余额

hdApp/src/admin/member/detail.vue

@@ -21,9 +21,12 @@
       <div class="user-bottom">
 
 
-        <div class="data-list" @click="openBalanceDetailPopup()">
+        <div class="data-list balance-clickable" @click="toggleBalanceDetail()">
           <div class="app-size-30 app-bold">{{ data.balance?parseFloat(data.balance):0 }}</div>
-          <div class="app-color-3">余额</div>
+          <div class="app-color-3 balance-label-row">
+            <span>余额</span>
+            <i class="iconfont balance-arrow" :class="showBalanceDetail ? 'iconjiantou-shang' : 'iconjiantou-xia'"></i>
+          </div>
         </div>
 
         <div class="data-list">
@@ -32,6 +35,21 @@
         </div>
 
       </div>
+
+      <!-- 余额详情展开区域 -->
+      <div class="balance-detail-expand" v-show="showBalanceDetail">
+        <div class="balance-detail-row">
+          <div class="balance-detail-item" @click="pageTo({ url: '/admin/custom/balancePayChange?id='+data.id })">
+            <div class="balance-detail-value">{{ data.balancePay?parseFloat(data.balancePay):0 }}</div>
+            <div class="balance-detail-label">充值余额</div>
+          </div>
+          <div class="balance-detail-item" @click="pageTo({ url: '/admin/custom/balanceGiveChange?id='+data.id })">
+            <div class="balance-detail-value">{{ data.balanceGive?parseFloat(data.balanceGive):0 }}</div>
+            <div class="balance-detail-label">赠送余额</div>
+          </div>
+        </div>
+      </div>
+
     </div>
 
 <!--
@@ -177,30 +195,6 @@
     </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">
@@ -604,6 +598,7 @@ export default {
         rechargePayWay:0,
       },
       rechargeInputFocus: false,
+      showBalanceDetail: false, // 控制余额详情展开/隐藏
 
     };
   },
@@ -623,20 +618,13 @@ export default {
   },
   methods: {
     init(){},
-    // 打开余额详情弹框
-    openBalanceDetailPopup() {
-      this.$refs.balanceDetailPopupRef.open('center')
-      // 禁用背景页面滚动
-      setTimeout(() => {
-        uni.pageScrollTo({
-          scrollTop: 0,
-          duration: 0
-        })
-      }, 100)
+    // 切换余额详情展开/隐藏
+    toggleBalanceDetail() {
+      this.showBalanceDetail = !this.showBalanceDetail
     },
-    // 关闭余额详情弹框
+    // 关闭余额详情弹框（保留方法以避免引用错误）
     closeBalanceDetailPopup() {
-      this.$refs.balanceDetailPopupRef.close()
+      // 已废弃，现在使用展开方式
     },
     addOrder(){
       this.$util.pageTo({url:'/admin/billing/index2?customId='+this.data.id+'&customName='+this.data.name})
@@ -1057,6 +1045,60 @@ export default {
       .app-color-3 {
         font-size: 28upx;
       }
+      
+      &.balance-clickable {
+        cursor: pointer;
+        
+        .balance-label-row {
+          @include disFlex(center, center);
+          gap: 8upx;
+          
+          .balance-arrow {
+            font-size: 24upx;
+            color: #999;
+            transition: transform 0.3s ease;
+          }
+        }
+        
+        &:active {
+          opacity: 0.7;
+        }
+      }
+    }
+  }
+  
+  // 余额详情展开区域
+  .balance-detail-expand {
+    width: 100%;
+    padding: 20upx 0;
+    border-top: 1upx solid #f5f5f5;
+    background-color: #f8f9fa;
+    border-radius: 0 0 10upx 10upx;
+    margin-top:20upx;
+    .balance-detail-row {
+      @include disFlex(center, space-around);
+      
+      .balance-detail-item {
+        text-align: center;
+        flex: 1;
+        padding: 0 20upx;
+        
+        .balance-detail-value {
+          font-size: 32upx;
+          font-weight: 600;
+          color: #333;
+          margin-bottom: 8upx;
+        }
+        
+        .balance-detail-label {
+          font-size: 26upx;
+          color: #666;
+        }
+        
+        &:active {
+          opacity: 0.7;
+        }
+      }
     }
   }
 }