余额变动

hdApp/src/admin/member/detail.vue

@@ -24,19 +24,9 @@
       </div>
       <div class="user-bottom">
 
-        <div class="data-list" @click="pageTo({ url: '/admin/custom/balanceChange?id='+data.id })">
+        <div class="data-list" @click="openBalanceDetailPopup()">
           <div class="app-size-30 app-bold">{{ data.balance?parseFloat(data.balance):0 }}</div>
-          <div class="app-color-3">总余额</div>
-        </div>
-
-        <div class="data-list" @click="pageTo({ url: '/admin/custom/balancePayChange?id='+data.id })">
-          <div class="app-size-30">{{ data.balancePay?parseFloat(data.balancePay):0 }}</div>
-          <div class="app-color-3">充值余额</div>
-        </div>
-
-        <div class="data-list" @click="pageTo({ url: '/admin/custom/balanceGiveChange?id='+data.id })">
-          <div class="app-size-30">{{ data.balanceGive?parseFloat(data.balanceGive):0 }}</div>
-          <div class="app-color-3">赠送余额</div>
+          <div class="app-color-3">余额</div>
         </div>
 
         <div class="data-list">
@@ -190,6 +180,32 @@
     </modal-module>
 
     <!-- 充值弹框 - 使用uni-popup替代 -->
+    <!-- 余额详情弹框 -->
+    <uni-popup ref="balanceDetailPopupRef" background-color="#fff" type="center" :animation="true" :mask-click="true" :safe-area="false">
+      <view class="balance-detail-popup-container">
+        <view class="popup-header">
+          <text class="popup-title">详情</text>
+          <view class="popup-close" @click="closeBalanceDetailPopup">
+            <text class="close-icon">×</text>
+          </view>
+        </view>
+        <view class="popup-content balance-detail-content">
+          <view class="balance-item" @click="pageTo({ url: '/admin/custom/balancePayChange?id='+data.id })">
+            <text class="balance-label">充值余额</text>
+            <text class="balance-value">{{ data.balancePay?parseFloat(data.balancePay):0 }}</text>
+          </view>
+          <view class="balance-item" @click="pageTo({ url: '/admin/custom/balanceGiveChange?id='+data.id })">
+            <text class="balance-label">赠送余额</text>
+            <text class="balance-value">{{ data.balanceGive?parseFloat(data.balanceGive):0 }}</text>
+          </view>
+        </view>
+        <view class="popup-footer">
+          <button class="admin-button-com middle blue" @click="closeBalanceDetailPopup">确定</button>
+        </view>
+      </view>
+    </uni-popup>
+    
+    <!-- 充值弹框 -->
     <uni-popup ref="rechargePopupRef" background-color="#fff" type="center" :animation="true" :mask-click="false" :safe-area="false">
       <view class="recharge-popup-container">
         <!-- 弹框头部 -->
@@ -634,6 +650,23 @@ export default {
     this.init()
   },
   methods: {
+    // 打开余额详情弹框
+    openBalanceDetailPopup() {
+      this.$refs.balanceDetailPopupRef.open('center')
+      // 禁用背景页面滚动
+      setTimeout(() => {
+        uni.pageScrollTo({
+          scrollTop: 0,
+          duration: 0
+        })
+      }, 100)
+    },
+    
+    // 关闭余额详情弹框
+    closeBalanceDetailPopup() {
+      this.$refs.balanceDetailPopupRef.close()
+    },
+    
     addOrder(){
       this.$util.pageTo({url:'/admin/billing/index2?customId='+this.data.id+'&customName='+this.data.name})
     },
@@ -1427,6 +1460,55 @@ export default {
     line-height: 1.5;
   }
   
+  /* 余额详情弹框样式 */
+  .balance-detail-popup-container {
+    width: 82vw;
+    max-width: 600upx;
+    background: #fff;
+    border-radius: 20upx;
+    overflow: hidden;
+    box-shadow: 0 10upx 30upx rgba(0,0,0,0.3);
+  }
+  
+  .balance-detail-content {
+    padding: 30upx 40upx;
+  }
+  
+  .balance-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 25upx 0;
+    border-bottom: 1upx solid #f0f0f0;
+  }
+  
+  .balance-item:last-child {
+    border-bottom: none;
+  }
+  
+  .balance-item.total {
+    margin-top: 10upx;
+    padding-top: 30upx;
+    border-top: 2upx solid #f0f0f0;
+  }
+  
+  .balance-label {
+    font-size: 32upx;
+    color: #333;
+  }
+  
+  .balance-value {
+    font-size: 36upx;
+    color: #09C567;
+    font-weight: 600;
+  }
+  
+  .balance-item.total .balance-label,
+  .balance-item.total .balance-value {
+    font-size: 38upx;
+    font-weight: 700;
+  }
+  
   /* 生日弹框样式 */
   .birthday-container {
     width: 100%;