|
|
@@ -1,120 +1,143 @@
|
|
|
<template>
|
|
|
- <view class="shop-list_box">
|
|
|
- <block v-if="loginStyle == 0">
|
|
|
- <view style="width:100vw;height:500upx;display:flex;align-items:center;justify-content:center;">
|
|
|
- <button class="admin-button-com big blue" style="border:none;" @click="pageTo({url:'/pages/login/index?needBack=1'})">点我登录</button>
|
|
|
+ <view class="page-container">
|
|
|
+ <!-- 未登录状态 -->
|
|
|
+ <block v-if="loginStyle == 0">
|
|
|
+ <view class="login-container">
|
|
|
+ <view class="login-content">
|
|
|
+ <text class="login-title">欢迎使用</text>
|
|
|
+ <text class="login-subtitle">请先登录以查看您的花店</text>
|
|
|
+ <button class="login-btn" @click="pageTo({url:'/pages/login/index?needBack=1'})">立即登录</button>
|
|
|
</view>
|
|
|
- </block>
|
|
|
- <block v-else>
|
|
|
- <view class="ghs_list_page flex-col" v-if="!$util.isEmpty(list.data)">
|
|
|
- <!-- 个人中心版块 -->
|
|
|
- <view class="profile-section">
|
|
|
- <!-- 个人信息头部 -->
|
|
|
- <view class="profile-header">
|
|
|
- <view class="avatar-container">
|
|
|
- <image class="avatar" src="/static/images/default-avatar.png" mode="aspectFill" />
|
|
|
- </view>
|
|
|
- <view class="user-info">
|
|
|
- <text class="username">刘小明</text>
|
|
|
- <text class="user-id">ID 31548</text>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+
|
|
|
+ <!-- 已登录状态 -->
|
|
|
+ <block v-else>
|
|
|
+ <view class="main-content" v-if="!$util.isEmpty(list.data)">
|
|
|
+ <!-- 个人中心版块 -->
|
|
|
+ <view class="profile-section">
|
|
|
+ <view class="profile-header">
|
|
|
+ <view class="avatar-container">
|
|
|
+ <image class="avatar" src="/static/images/default-avatar.png" mode="aspectFill" />
|
|
|
</view>
|
|
|
-
|
|
|
- <!-- 功能按钮网格 -->
|
|
|
- <view class="function-grid">
|
|
|
- <view class="function-item" @click="">
|
|
|
- <text class="function-icon">📊</text>
|
|
|
- <text class="function-text">统计</text>
|
|
|
- </view>
|
|
|
- <view class="function-item" @click="">
|
|
|
- <text class="function-icon">📍</text>
|
|
|
- <text class="function-text">地址</text>
|
|
|
- </view>
|
|
|
- <view class="function-item" @click="">
|
|
|
- <text class="function-icon">📱</text>
|
|
|
- <text class="function-text">改号码</text>
|
|
|
- </view>
|
|
|
- <view class="function-item" @click="logout()">
|
|
|
- <text class="function-icon">🚪</text>
|
|
|
- <text class="function-text">退出</text>
|
|
|
- </view>
|
|
|
+ <view class="user-info">
|
|
|
+ <text class="username">刘小明</text>
|
|
|
+ <text class="user-id">ID 31548</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="ghs_list_area flex-col justify-end">
|
|
|
- <view class="ghs_box flex-col justify-end" v-for="(item, index) in list.data" :key="item.id">
|
|
|
- <!-- 右上角tip按钮 -->
|
|
|
- <view class="tip-button" @click.stop="showMoreOptions(index)">
|
|
|
- <view class="tip-icon"></view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 更多选项弹出菜单 -->
|
|
|
- <view class="more-options-popup" v-if="activePopupIndex === index" @click.stop>
|
|
|
- <view class="popup-overlay" @click="hideMoreOptions"></view>
|
|
|
- <view class="popup-content">
|
|
|
- <view class="popup-item" @click="toRechargeClear(item)">
|
|
|
- <text>充值</text>
|
|
|
- </view>
|
|
|
- <view class="popup-item" @click="getRechargeList(item)">
|
|
|
- <text>充值记录</text>
|
|
|
- </view>
|
|
|
- <view class="popup-item" @click="toPay(item)">
|
|
|
- <text>付款</text>
|
|
|
- </view>
|
|
|
- <view class="popup-item" @click="hideMoreOptions()">
|
|
|
- <text>取消</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+
|
|
|
+ <view class="function-grid">
|
|
|
+ <view class="function-item" @click="">
|
|
|
+ <text class="function-icon">📊</text>
|
|
|
+ <text class="function-text">统计</text>
|
|
|
+ </view>
|
|
|
+ <view class="function-item" @click="">
|
|
|
+ <text class="function-icon">📍</text>
|
|
|
+ <text class="function-text">地址</text>
|
|
|
+ </view>
|
|
|
+ <view class="function-item" @click="">
|
|
|
+ <text class="function-icon">📱</text>
|
|
|
+ <text class="function-text">改号码</text>
|
|
|
+ </view>
|
|
|
+ <view class="function-item" @click="logout()">
|
|
|
+ <text class="function-icon">🚪</text>
|
|
|
+ <text class="function-text">退出</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 花店列表 -->
|
|
|
+ <view class="shop-list">
|
|
|
+ <view class="shop-card" v-for="(item, index) in list.data" :key="item.id">
|
|
|
+ <!-- 更多选项按钮 -->
|
|
|
+ <view class="more-btn" @click.stop="showMoreOptions(index)">
|
|
|
+ <text class="more-icon">⋯</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 更多选项弹出菜单 -->
|
|
|
+ <view class="options-popup" v-if="activePopupIndex === index" @click.stop>
|
|
|
+ <view class="popup-overlay" @click="hideMoreOptions"></view>
|
|
|
+ <view class="popup-content">
|
|
|
+ <view class="popup-item" @click="toRechargeClear(item)">
|
|
|
+ <text>💰 充值</text>
|
|
|
</view>
|
|
|
-
|
|
|
- <view class="image-text_7 flex-row justify-between" @click.stop="bug(item)">
|
|
|
- <view class="section_1 flex-col">
|
|
|
- <image class="logo" :src="item.smallAvatar" />
|
|
|
- </view>
|
|
|
- <view class="text-group_7 flex-col justify-start">
|
|
|
- <text class="text_8">{{item.name}}</text>
|
|
|
- <text class="text_9">{{item.dist}}{{item.address}}{{item.floor}}</text>
|
|
|
- </view>
|
|
|
+ <view class="popup-item" @click="getRechargeList(item)">
|
|
|
+ <text>📋 充值记录</text>
|
|
|
</view>
|
|
|
- <view class="box_4 flex-col"></view>
|
|
|
- <view class="box_9">
|
|
|
- <view class="tag_2" @click="getLevelChange(item)"> <text>等级变动</text> </view>
|
|
|
- <view class="tag_2" @click="getBalanceChange(item)"> <text>余额变动</text> </view>
|
|
|
- <view class="tag_2" @click="getSettleList(item)"> <text>结账记录</text> </view>
|
|
|
- <view class="tag_2" @click="getBuyList(item)"> <text>买花记录</text> </view>
|
|
|
+ <view class="popup-item" @click="toPay(item)">
|
|
|
+ <text>💳 付款</text>
|
|
|
</view>
|
|
|
-
|
|
|
- <view class="box_6 flex-row" @click.stop="recharge(item)" v-if="Number(item.balance)<0">
|
|
|
- <view class="show_clear_area flex-row justify-between">
|
|
|
- <text class="waite_clear_order">
|
|
|
- 待结金额 ¥{{parseFloat(Math.abs(item.balance))}}
|
|
|
- <text style="margin-left:30upx;text-decoration: underline;">去结账</text>
|
|
|
- </text>
|
|
|
+ <view class="popup-item cancel" @click="hideMoreOptions()">
|
|
|
+ <text>取消</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
|
|
|
- <view class="box_6 flex-row" v-if="item.balance>0" @click.stop="recharge(item)">
|
|
|
- <view class="show_clear_area flex-row justify-between">
|
|
|
- <text class="waite_clear_order" style="color:#3385ff;">
|
|
|
- <text>可用余额 ¥{{ parseFloat(item.balance) }}</text>
|
|
|
- <text style="margin-left:30upx;text-decoration: underline;">去充值</text>
|
|
|
- </text>
|
|
|
- </view>
|
|
|
+ <!-- 店铺基本信息 -->
|
|
|
+ <view class="shop-header" @click.stop="bug(item)">
|
|
|
+ <view class="shop-avatar">
|
|
|
+ <image class="shop-logo" :src="item.smallAvatar" mode="aspectFill" />
|
|
|
</view>
|
|
|
+ <view class="shop-info">
|
|
|
+ <text class="shop-name">{{item.name}}</text>
|
|
|
+ <text class="shop-address">{{item.dist}}{{item.address}}{{item.floor}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 余额信息 -->
|
|
|
+ <view class="balance-section" v-if="item.balance != 0">
|
|
|
+ <view class="balance-item" @click.stop="recharge(item)" v-if="Number(item.balance) < 0">
|
|
|
+ <text class="balance-label">待结金额</text>
|
|
|
+ <text class="balance-amount negative">¥{{parseFloat(Math.abs(item.balance))}}</text>
|
|
|
+ <text class="balance-action">去结账</text>
|
|
|
+ </view>
|
|
|
+ <view class="balance-item" @click.stop="recharge(item)" v-if="item.balance > 0">
|
|
|
+ <text class="balance-label">可用余额</text>
|
|
|
+ <text class="balance-amount positive">¥{{parseFloat(item.balance)}}</text>
|
|
|
+ <text class="balance-action">去充值</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
- <view class="button_4 flex-col" @click.stop="bug(item)"><text class="text_13">花材商城</text></view>
|
|
|
-
|
|
|
- <view class="button_9 flex-col" @click.stop="hs(item)"><text class="text_13">花束商城</text></view>
|
|
|
-
|
|
|
- <view class="button_15 flex-col" @click.stop="tj(item)"><text class="text_13">花束相册</text></view>
|
|
|
-
|
|
|
+ <!-- 操作按钮组 -->
|
|
|
+ <view class="action-buttons">
|
|
|
+ <view class="action-btn primary" @click.stop="bug(item)">
|
|
|
+ <text class="btn-text">🌸 花材商城</text>
|
|
|
+ </view>
|
|
|
+ <view class="action-btn secondary" @click.stop="hs(item)">
|
|
|
+ <text class="btn-text">💐 花束商城</text>
|
|
|
+ </view>
|
|
|
+ <view class="action-btn tertiary" @click.stop="tj(item)">
|
|
|
+ <text class="btn-text">📷 花束相册</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 记录查询按钮 -->
|
|
|
+ <view class="record-buttons">
|
|
|
+ <view class="record-btn" @click="getLevelChange(item)">
|
|
|
+ <text class="record-text">等级变动</text>
|
|
|
+ </view>
|
|
|
+ <view class="record-btn" @click="getBalanceChange(item)">
|
|
|
+ <text class="record-text">余额变动</text>
|
|
|
+ </view>
|
|
|
+ <view class="record-btn" @click="getSettleList(item)">
|
|
|
+ <text class="record-text">结账记录</text>
|
|
|
</view>
|
|
|
+ <view class="record-btn" @click="getBuyList(item)">
|
|
|
+ <text class="record-text">买花记录</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view v-else>
|
|
|
- <text style="margin-top:200upx;margin-left:80upx;font-size:30upx;font-weight:bold;">暂无花店</text>
|
|
|
- </view>
|
|
|
- </block>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 空状态 -->
|
|
|
+ <view v-else class="empty-state">
|
|
|
+ <text class="empty-icon">🏪</text>
|
|
|
+ <text class="empty-title">暂无花店</text>
|
|
|
+ <text class="empty-subtitle">您还没有关联任何花店</text>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
<script>
|
|
|
import AppSwiper from "@/components/app-swiper";
|
|
|
@@ -266,423 +289,384 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
|
page {
|
|
|
height: 100%;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+}
|
|
|
+
|
|
|
+.page-container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #f8f9fa;
|
|
|
}
|
|
|
|
|
|
-.shop-list_box {
|
|
|
+// 登录页面样式
|
|
|
+.login-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
min-height: 100vh;
|
|
|
+ padding: 40upx;
|
|
|
|
|
|
- .ghs_list_page {
|
|
|
- background-color: rgba(255, 255, 255, 1);
|
|
|
- width: 750upx;
|
|
|
+ .login-content {
|
|
|
+ text-align: center;
|
|
|
|
|
|
- // 个人中心版块样式
|
|
|
- .profile-section {
|
|
|
- background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
|
|
|
- padding: 30upx 25upx;
|
|
|
- border-radius: 0 0 20upx 20upx;
|
|
|
- border-bottom: 1upx solid #e8eaff;
|
|
|
+ .login-title {
|
|
|
+ display: block;
|
|
|
+ font-size: 48upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 16upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-subtitle {
|
|
|
+ display: block;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 60upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-btn {
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ border-radius: 50upx;
|
|
|
+ padding: 24upx 60upx;
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: 500;
|
|
|
+ box-shadow: 0 8upx 20upx rgba(102, 126, 234, 0.3);
|
|
|
|
|
|
- .profile-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 30upx;
|
|
|
-
|
|
|
- .avatar-container {
|
|
|
- position: relative;
|
|
|
- margin-right: 25upx;
|
|
|
-
|
|
|
- .avatar {
|
|
|
- width: 100upx;
|
|
|
- height: 100upx;
|
|
|
- border-radius: 50upx;
|
|
|
- border: 2upx solid #e8eaff;
|
|
|
- background-color: #f5f5f5;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .user-info {
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .username {
|
|
|
- display: block;
|
|
|
- color: #333333;
|
|
|
- font-size: 42upx;
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 6upx;
|
|
|
- }
|
|
|
-
|
|
|
- .user-id {
|
|
|
- display: block;
|
|
|
- color: #999999;
|
|
|
- font-size: 26upx;
|
|
|
- }
|
|
|
- }
|
|
|
+ &:active {
|
|
|
+ transform: translateY(2upx);
|
|
|
+ box-shadow: 0 4upx 12upx rgba(102, 126, 234, 0.4);
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 主要内容区域
|
|
|
+.main-content {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+// 个人中心版块
|
|
|
+.profile-section {
|
|
|
+ background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
|
|
|
+ padding: 30upx 25upx;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+
|
|
|
+ .profile-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 30upx;
|
|
|
+
|
|
|
+ .avatar-container {
|
|
|
+ margin-right: 25upx;
|
|
|
|
|
|
- .function-grid {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- padding: 0 20upx;
|
|
|
-
|
|
|
- .function-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 100upx;
|
|
|
- height: 90upx;
|
|
|
- background: rgba(255, 255, 255, 0.8);
|
|
|
- border-radius: 15upx;
|
|
|
- border: 1upx solid #f0f0f0;
|
|
|
- transition: all 0.2s ease;
|
|
|
-
|
|
|
- &:active {
|
|
|
- transform: scale(0.95);
|
|
|
- background: rgba(240, 242, 255, 0.9);
|
|
|
- }
|
|
|
-
|
|
|
- .function-icon {
|
|
|
- font-size: 32upx;
|
|
|
- margin-bottom: 6upx;
|
|
|
- }
|
|
|
-
|
|
|
- .function-text {
|
|
|
- color: #666666;
|
|
|
- font-size: 20upx;
|
|
|
- font-weight: 400;
|
|
|
- }
|
|
|
- }
|
|
|
+ .avatar {
|
|
|
+ width: 100upx;
|
|
|
+ height: 100upx;
|
|
|
+ border-radius: 50upx;
|
|
|
+ border: 2upx solid #e8eaff;
|
|
|
+ background-color: #f5f5f5;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .top-button {
|
|
|
- padding-top: 18upx;
|
|
|
- padding-bottom: 18upx;
|
|
|
- border: none;
|
|
|
- margin-top: 10upx;
|
|
|
+ .user-info {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .username {
|
|
|
+ display: block;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 42upx;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 6upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-id {
|
|
|
+ display: block;
|
|
|
+ color: #999999;
|
|
|
+ font-size: 26upx;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .function-grid {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding: 0 20upx;
|
|
|
|
|
|
- .flex-col {
|
|
|
+ .function-item {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 120upx;
|
|
|
+ height: 110upx;
|
|
|
+ background: rgba(255, 255, 255, 0.8);
|
|
|
+ border-radius: 15upx;
|
|
|
+ border: 1upx solid #f0f0f0;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ transform: scale(0.95);
|
|
|
+ background: rgba(240, 242, 255, 0.9);
|
|
|
+ }
|
|
|
+
|
|
|
+ .function-icon {
|
|
|
+ font-size: 44upx;
|
|
|
+ margin-bottom: 8upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .function-text {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 26upx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 花店列表
|
|
|
+.shop-list {
|
|
|
+ padding: 0 20upx;
|
|
|
+}
|
|
|
+
|
|
|
+// 花店卡片
|
|
|
+.shop-card {
|
|
|
+ background: white;
|
|
|
+ border-radius: 20upx;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ padding: 30upx;
|
|
|
+ position: relative;
|
|
|
+ box-shadow: 0 4upx 20upx rgba(0, 0, 0, 0.08);
|
|
|
+
|
|
|
+ .more-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 20upx;
|
|
|
+ right: 20upx;
|
|
|
+ width: 40upx;
|
|
|
+ height: 40upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 20upx;
|
|
|
+ background: rgba(0, 0, 0, 0.05);
|
|
|
|
|
|
- .flex-row {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
+ .more-icon {
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #666;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 24upx;
|
|
|
|
|
|
- .justify-between {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ .shop-avatar {
|
|
|
+ margin-right: 20upx;
|
|
|
+
|
|
|
+ .shop-logo {
|
|
|
+ width: 80upx;
|
|
|
+ height: 80upx;
|
|
|
+ border-radius: 12upx;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .justify-end {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
+ .shop-info {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .shop-name {
|
|
|
+ display: block;
|
|
|
+ font-size: 36upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 8upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-address {
|
|
|
+ display: block;
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- .ghs_list_area {
|
|
|
- padding-top: 25rpx;
|
|
|
- width: 750upx;
|
|
|
- background-color: #ece5e5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .balance-section {
|
|
|
+ margin-bottom: 24upx;
|
|
|
+
|
|
|
+ .balance-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20upx 24upx;
|
|
|
+ background: #f8f9fa;
|
|
|
+ border-radius: 12upx;
|
|
|
|
|
|
- .ghs_box {
|
|
|
- background-color: rgba(255, 255, 255, 1);
|
|
|
- position: relative;
|
|
|
- width: 750upx;
|
|
|
- height: auto;
|
|
|
- min-height: 360upx;
|
|
|
- margin-bottom: 25upx;
|
|
|
- padding-bottom: 40upx;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .image-text_7 {
|
|
|
- width: 674upx;
|
|
|
- height: 180upx;
|
|
|
- margin: 40upx 0 0 31upx;
|
|
|
-
|
|
|
- .section_1 {
|
|
|
- width: 120upx;
|
|
|
- height: 120upx;
|
|
|
-
|
|
|
- .logo {
|
|
|
- width: 120upx;
|
|
|
- height: 120upx;
|
|
|
- border-radius: 10upx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .text-group_7 {
|
|
|
- width: 533upx;
|
|
|
- height: 100upx;
|
|
|
- margin-top: 5upx;
|
|
|
-
|
|
|
- .text_8 {
|
|
|
- width: 458upx;
|
|
|
- height: 42upx;
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- font-size: 42upx;
|
|
|
- font-weight: bold;
|
|
|
- text-align: left;
|
|
|
- white-space: nowrap;
|
|
|
- line-height: 42upx;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
-
|
|
|
- .text_9 {
|
|
|
- width: 250upx;
|
|
|
- height: 29upx;
|
|
|
- color: rgba(153, 153, 153, 1);
|
|
|
- font-size: 28upx;
|
|
|
- text-align: left;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- line-height: 29upx;
|
|
|
- margin-top: 20upx;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .box_4 {
|
|
|
- background-color: rgba(238, 238, 238, 1);
|
|
|
- width: 750upx;
|
|
|
- height: 1upx;
|
|
|
- margin-top: 85upx;
|
|
|
- }
|
|
|
+ .balance-label {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .balance-amount {
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: 600;
|
|
|
|
|
|
- .box_9 {
|
|
|
- height: 65upx;
|
|
|
- padding: 23upx 15upx 22upx 15upx;
|
|
|
- display: flex;
|
|
|
- flex-wrap: nowrap;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-evenly;
|
|
|
- box-sizing: content-box;
|
|
|
-
|
|
|
- .tag_2 {
|
|
|
- background-color: rgba(255, 255, 255, 1);
|
|
|
- border-radius: 8px;
|
|
|
- height: 70upx;
|
|
|
- line-height: 70upx;
|
|
|
- border: 2px solid rgba(221, 221, 221, 1);
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- font-size: 30upx;
|
|
|
- text-align: center;
|
|
|
- flex: 1;
|
|
|
- margin: 0 10upx;
|
|
|
- padding-left: 10upx;
|
|
|
- padding-right: 10upx;
|
|
|
- }
|
|
|
+ &.negative {
|
|
|
+ color: #ff4757;
|
|
|
}
|
|
|
|
|
|
- .box_6 {
|
|
|
- background-color: rgb(248, 242, 242);
|
|
|
- width: 750upx;
|
|
|
- height: 85upx;
|
|
|
- margin-top: 10upx;
|
|
|
- box-sizing: content-box;
|
|
|
-
|
|
|
- .show_clear_area {
|
|
|
- width: 247upx;
|
|
|
- height: 29upx;
|
|
|
- margin: 26upx 0 0 30upx;
|
|
|
-
|
|
|
- .waite_clear_order {
|
|
|
- width: 214upx;
|
|
|
- height: 29upx;
|
|
|
- color: rgba(255, 40, 66, 1);
|
|
|
- font-size: 30upx;
|
|
|
- font-weight: bold;
|
|
|
- text-align: left;
|
|
|
- white-space: nowrap;
|
|
|
- line-height: 29upx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .button_4 {
|
|
|
- height: 100upx;
|
|
|
- line-height: 100upx;
|
|
|
- text-align: center;
|
|
|
- background-color: #FF2842;
|
|
|
- width: 180upx;
|
|
|
- position: absolute;
|
|
|
- right: 52upx;
|
|
|
- top: 180upx;
|
|
|
- border-radius: 20upx;
|
|
|
- z-index: 10;
|
|
|
-
|
|
|
- .text_13 {
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 30upx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .button_9 {
|
|
|
- height: 100upx;
|
|
|
- line-height: 100upx;
|
|
|
- text-align: center;
|
|
|
- background-color: #FF2842;
|
|
|
- width: 180upx;
|
|
|
- position: absolute;
|
|
|
- right: 288upx;
|
|
|
- top: 180upx;
|
|
|
- border-radius: 20upx;
|
|
|
- z-index: 10;
|
|
|
-
|
|
|
- .text_13 {
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 30upx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .button_15 {
|
|
|
- height: 100upx;
|
|
|
- line-height: 100upx;
|
|
|
- text-align: center;
|
|
|
- background-color: #FF2842;
|
|
|
- width: 180upx;
|
|
|
- position: absolute;
|
|
|
- right: 525upx;
|
|
|
- top: 180upx;
|
|
|
- border-radius: 20upx;
|
|
|
- z-index: 10;
|
|
|
-
|
|
|
- .text_13 {
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 30upx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .tip-button {
|
|
|
- position: absolute;
|
|
|
- top: 15upx;
|
|
|
- right: 15upx;
|
|
|
- width: 44upx;
|
|
|
- height: 44upx;
|
|
|
- background: rgba(255, 255, 255, 0.95);
|
|
|
- border-radius: 8upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- z-index: 20;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.2s ease;
|
|
|
- box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.12);
|
|
|
- border: 1upx solid rgba(0, 0, 0, 0.08);
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: rgba(248, 249, 250, 1);
|
|
|
- transform: scale(1.05);
|
|
|
- box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.18);
|
|
|
- }
|
|
|
-
|
|
|
- &:active {
|
|
|
- transform: scale(0.98);
|
|
|
- background: rgba(233, 236, 239, 1);
|
|
|
- }
|
|
|
-
|
|
|
- .tip-icon {
|
|
|
- width: 24upx;
|
|
|
- height: 24upx;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- width: 6upx;
|
|
|
- height: 6upx;
|
|
|
- background-color: #666;
|
|
|
- border-radius: 50%;
|
|
|
- position: absolute;
|
|
|
- transition: all 0.2s ease;
|
|
|
- box-shadow:
|
|
|
- 0 -8upx 0 0 #666,
|
|
|
- 0 8upx 0 0 #666;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &:hover .tip-icon {
|
|
|
- &::before {
|
|
|
- background-color: #333;
|
|
|
- transform: scale(1.1);
|
|
|
- box-shadow:
|
|
|
- 0 -8upx 0 0 #333,
|
|
|
- 0 8upx 0 0 #333;
|
|
|
- }
|
|
|
- }
|
|
|
+ &.positive {
|
|
|
+ color: #2ed573;
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .balance-action {
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #667eea;
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-buttons {
|
|
|
+ display: flex;
|
|
|
+ gap: 12upx;
|
|
|
+ margin-bottom: 24upx;
|
|
|
+
|
|
|
+ .action-btn {
|
|
|
+ flex: 1;
|
|
|
+ padding: 20upx 16upx;
|
|
|
+ border-radius: 12upx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &.primary {
|
|
|
+ background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.secondary {
|
|
|
+ background: linear-gradient(135deg, #a55eea 0%, #8e44ad 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.tertiary {
|
|
|
+ background: linear-gradient(135deg, #26de81 0%, #20bf6b 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-text {
|
|
|
+ color: white;
|
|
|
+ font-size: 24upx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .record-buttons {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 12upx;
|
|
|
+
|
|
|
+ .record-btn {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 140upx;
|
|
|
+ padding: 16upx 12upx;
|
|
|
+ background: #f8f9fa;
|
|
|
+ border-radius: 8upx;
|
|
|
+ text-align: center;
|
|
|
+ border: 1upx solid #e9ecef;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background: #e9ecef;
|
|
|
+ }
|
|
|
+
|
|
|
+ .record-text {
|
|
|
+ font-size: 22upx;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- .more-options-popup {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- z-index: 1000;
|
|
|
-
|
|
|
- .popup-overlay {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: rgba(0, 0, 0, 0.3);
|
|
|
- }
|
|
|
-
|
|
|
- .popup-content {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- background-color: white;
|
|
|
- border-radius: 20upx;
|
|
|
- padding: 0;
|
|
|
- min-width: 600upx;
|
|
|
- box-shadow: 0 10upx 30upx rgba(0, 0, 0, 0.3);
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .popup-item {
|
|
|
- padding: 55upx 60upx;
|
|
|
- border-bottom: 1upx solid #f0f0f0;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background-color: #f8f9fa;
|
|
|
- transform: translateX(5upx);
|
|
|
- }
|
|
|
-
|
|
|
- &:active {
|
|
|
- background-color: #e9ecef;
|
|
|
- }
|
|
|
-
|
|
|
- text {
|
|
|
- color: #333;
|
|
|
- font-size: 44upx;
|
|
|
- font-weight: 500;
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+// 弹出菜单
|
|
|
+.options-popup {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ z-index: 1000;
|
|
|
+
|
|
|
+ .popup-overlay {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.4);
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-content {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 20upx;
|
|
|
+ padding: 0;
|
|
|
+ min-width: 500upx;
|
|
|
+ box-shadow: 0 20upx 40upx rgba(0, 0, 0, 0.3);
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .popup-item {
|
|
|
+ padding: 40upx 50upx;
|
|
|
+ border-bottom: 1upx solid #f0f0f0;
|
|
|
+ text-align: center;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.cancel {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: #333;
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+// 空状态
|
|
|
+.empty-state {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 100upx 40upx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .empty-icon {
|
|
|
+ font-size: 120upx;
|
|
|
+ margin-bottom: 30upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-title {
|
|
|
+ font-size: 36upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 12upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-subtitle {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
