充值

hdApp/src/admin/member/detail.vue

@@ -177,8 +177,8 @@
           </view>
         </view>
         
-        <!-- 弹框内容 -->
-        <scroll-view class="popup-content" scroll-y="true" :style="{maxHeight: '60vh'}">
+                 <!-- 弹框内容 -->
+         <scroll-view class="popup-content" scroll-y="true" :style="{maxHeight: '70vh'}">
           <!-- 充值金额输入 -->
           <view class="input-section">
             <view class="input-label">充值金额</view>
@@ -228,21 +228,20 @@
                 type="text" 
                 v-model="rForm.rechargeRemark" 
                 class="remark-input" 
-                placeholder="这里写备注" 
+                placeholder="选填" 
               />
             </view>
           </view>
 
-                     <!-- 充值升级优惠 -->
-           <view v-if="rechargeWeal == 1" class="recharge-options">
-             <view class="options-title">充值优惠方案：</view>
-             <view v-for="(item,index) in weal" :key="index" class="option-item">
-               <button 
-                 @click="getRecharge(item.recharge)"
-                 class="admin-button-com big"
-                 :class="[rForm.rechargeAmount == item.recharge ? 'blue' : 'default']"
-                 style="width:100%;text-align:left;justify-content:space-between;"
-               >
+                                <!-- 充值升级优惠 -->
+            <view v-if="rechargeWeal == 1" class="recharge-options">
+              <view class="options-title">充值活动：</view>
+              <view v-for="(item,index) in weal" :key="index" class="option-item">
+                <button 
+                  @click="getRecharge(item.recharge)"
+                  class="recharge-option-btn"
+                  :class="[rForm.rechargeAmount == item.recharge ? 'selected' : '']"
+                >
                 <view class="option-content">
                   <view class="option-left">
                     <text class="recharge-amount">充值{{ item.recharge }}元</text>
@@ -257,16 +256,15 @@
             </view>
           </view>
 
-                     <!-- 充值送金额 -->
-           <view v-if="rechargeWeal == 2" class="recharge-options">
-             <view class="options-title">充值优惠方案：</view>
-             <view v-for="(item,index) in weal" :key="index" class="option-item">
-               <button 
-                 @click="getRecharge(item.recharge)"
-                 class="admin-button-com big"
-                 :class="[rForm.rechargeAmount == item.recharge ? 'blue' : 'default']"
-                 style="width:100%;text-align:left;justify-content:space-between;"
-               >
+                                <!-- 充值送金额 -->
+            <view v-if="rechargeWeal == 2" class="recharge-options">
+              <view class="options-title">充值优惠方案：</view>
+              <view v-for="(item,index) in weal" :key="index" class="option-item">
+                <button 
+                  @click="getRecharge(item.recharge)"
+                  class="recharge-option-btn"
+                  :class="[rForm.rechargeAmount == item.recharge ? 'selected' : '']"
+                >
                 <view class="option-content">
                   <view class="option-left">
                     <text class="recharge-amount">充值{{ item.recharge }}元</text>
@@ -998,30 +996,30 @@ export default {
    font-size:30upx;
  }
 
- // 充值弹框样式
- .recharge-popup-container {
-   width: 98vw;
-   max-width: 600upx;
-   background: #fff;
-   border-radius: 20upx;
-   overflow: hidden;
-   box-shadow: 0 10upx 30upx rgba(0,0,0,0.3);
- }
+   // 充值弹框样式
+  .recharge-popup-container {
+    width: 95vw;
+    max-width: 700upx;
+    background: #fff;
+    border-radius: 20upx;
+    overflow: hidden;
+    box-shadow: 0 10upx 30upx rgba(0,0,0,0.3);
+  }
 
- .popup-header {
-   display: flex;
-   justify-content: space-between;
-   align-items: center;
-   padding: 30upx 30upx 20upx;
-   border-bottom: 1upx solid #f0f0f0;
-   background: #fff;
- }
+   .popup-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 40upx 40upx 30upx;
+    border-bottom: 1upx solid #f0f0f0;
+    background: #fff;
+  }
 
- .popup-title {
-   font-size: 32upx;
-   font-weight: 600;
-   color: #333;
- }
+   .popup-title {
+    font-size: 36upx;
+    font-weight: 600;
+    color: #333;
+  }
 
  .popup-close {
    width: 60upx;
@@ -1039,62 +1037,82 @@ export default {
    line-height: 1;
  }
 
- .popup-content {
-   padding: 30upx;
-   background: #fff;
- }
+   .popup-content {
+    padding: 40upx;
+    background: #fff;
+  }
 
- .input-section {
-   margin-bottom: 30upx;
- }
+   .input-section {
+    margin-bottom: 35upx;
+  }
 
- .input-label {
-   font-size: 28upx;
-   color: #333;
-   margin-bottom: 15upx;
-   font-weight: 500;
- }
+   .input-label {
+    font-size: 32upx;
+    color: #333;
+    margin-bottom: 18upx;
+    font-weight: 500;
+  }
 
  .input-wrapper {
    position: relative;
  }
 
- .amount-input, .remark-input {
-   width: 100%;
-   height: 80upx;
-   padding: 0 20upx;
-   border: 2upx solid #e9ecef;
-   border-radius: 12upx;
-   font-size: 28upx;
-   text-align: center;
-   background: #fff;
-   box-sizing: border-box;
- }
+   .amount-input, .remark-input {
+    width: 100%;
+    height: 90upx;
+    padding: 0 25upx;
+    border: 2upx solid #e9ecef;
+    border-radius: 12upx;
+    font-size: 32upx;
+    text-align: center;
+    background: #fff;
+    box-sizing: border-box;
+  }
 
  .amount-input:focus, .remark-input:focus {
    border-color: #3385FF;
    background: #f8f9fa;
  }
 
- .payment-buttons {
-   display: flex;
-   flex-wrap: wrap;
-   gap: 12upx;
- }
+   .payment-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12upx;
+    
+    button {
+      flex: 1;
+      min-width: 120upx;
+    }
+  }
 
  .recharge-options {
    margin-top: 20upx;
  }
 
- .options-title {
-   font-size: 26upx;
-   color: #666;
-   margin-bottom: 20upx;
- }
+   .options-title {
+    font-size: 30upx;
+    color: #666;
+    margin-bottom: 25upx;
+  }
 
- .option-item {
-   margin-bottom: 15upx;
- }
+   .option-item {
+    margin-bottom: 20upx;
+  }
+
+  .recharge-option-btn {
+    width: 100%;
+    padding: 20upx 25upx;
+    background: #f8f9fa;
+    border: 2upx solid #e9ecef;
+    border-radius: 12upx;
+    text-align: left;
+    transition: all 0.3s;
+  }
+
+  .recharge-option-btn.selected {
+    border-color: #3385FF;
+    background: #f0f7ff;
+  }
 
  .option-content {
    display: flex;
@@ -1109,34 +1127,43 @@ export default {
    gap: 10upx;
  }
 
- .recharge-amount {
-   font-weight: 500;
-   font-size: 26upx;
-   color: #333;
- }
+   .recharge-amount {
+    font-weight: 500;
+    font-size: 30upx;
+    color: #333;
+  }
 
- .upgrade-info {
-   font-size: 24upx;
-   color: #666;
- }
+  .upgrade-info {
+    font-size: 26upx;
+    color: #666;
+  }
 
- .discount-info, .give-info {
-   font-size: 24upx;
-   color: #ff6b35;
-   font-weight: bold;
- }
+  .discount-info, .give-info {
+    font-size: 26upx;
+    color: #ff6b35;
+    font-weight: bold;
+  }
 
- .option-right {
-   color: #3385FF;
-   font-size: 24upx;
-   font-weight: bold;
- }
+  .option-right {
+    color: #3385FF;
+    font-size: 26upx;
+    font-weight: bold;
+  }
 
    .popup-footer {
     display: flex;
     gap: 20upx;
-    padding: 30upx;
+    padding: 40upx;
     background: #fff;
     border-top: 1upx solid #f0f0f0;
+    
+    button {
+      flex: 1;
+      min-width: 0;
+      height: 90upx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 </style>