减余额优化

hdApp/src/admin/member/detail.vue

@@ -363,25 +363,64 @@
 		</view>
 	  </uni-popup>
 
-		<modal-module :show="reduceShow" @click="confirmDeduct" :maskClosable="true" title="请输入金额" padding="30rpx 30rpx" >
-      <template v-slot:content>
-        <div class="app-modal-input-wrap">
-        <div class="inp-list-line">
-          <view class="line-label">金额</view>
-          <div class="line-input">
-            <input type="digit" style="text-align:center;" v-model="deductAmount" class="inp-input" />
-          </div>
-        </div>
-        <div class="inp-list-line">
-          <view class="line-label">备注</view>
-          <div class="line-input">
-          <input type="text" style="text-align:center;" v-model="deductRemark" class="inp-input" />
-          </div>
-			  </div>
-        <view style="font-size:32upx;font-weight:bold;width:80%;margin:0 auto;">余额减少后，不会自动降等级，如需要请手动给客户降级</view>
-        </div>
-      </template>
-		</modal-module>
+		<!-- 减余额弹框 - 使用uni-popup替代 -->
+		<uni-popup ref="deductPopupRef" background-color="#fff" type="center" :animation="true" :mask-click="false" :safe-area="false">
+			<view class="deduct-popup-container">
+				<!-- 弹框头部 -->
+				<view class="popup-header">
+					<text class="popup-title">减余额</text>
+					<view class="popup-close" @click="closeDeductPopup">
+						<text class="close-icon">×</text>
+					</view>
+				</view>
+				
+				<!-- 弹框内容 -->
+				<scroll-view class="popup-content" scroll-y="true" :style="{maxHeight: '70vh'}">
+					<!-- 减余额金额输入 -->
+					<view class="input-section">
+						<view class="input-label">金额</view>
+						<view class="input-wrapper">
+							<input 
+								type="digit" 
+								placeholder="请输入金额" 
+								v-model="deductAmount" 
+								:adjust-position="false" 
+								class="amount-input"
+								:focus="deductInputFocus"
+								:cursor-spacing="20"
+								confirm-type="done"
+								confirm-hold="true"
+								@blur="onDeductInputBlur"
+							/>
+						</view>
+					</view>
+
+					<!-- 备注输入 -->
+					<view class="input-section">
+						<view class="input-label">备注</view>
+						<view class="input-wrapper">
+							<input 
+								type="text" 
+								v-model="deductRemark" 
+								class="remark-input" 
+								placeholder="选填" 
+							/>
+						</view>
+					</view>
+
+					<!-- 提示信息 -->
+					<view class="deduct-tip">
+						<text class="tip-text">余额减少后，不会自动降等级，如需要请手动给客户降级</text>
+					</view>
+				</scroll-view>
+				
+				<!-- 弹框底部按钮 -->
+				<view class="popup-footer">
+					<button class="admin-button-com middle" @click="closeDeductPopup">取消</button>
+					<button class="admin-button-com middle blue" @click="confirmDeduct">确认减余额</button>
+				</view>
+			</view>
+		</uni-popup>
 
   </div>
 </template>
@@ -434,7 +473,7 @@ export default {
           funtion: () => {
             this.deductAmount = ''
             this.deductRemark = ''
-            this.reduceShow = true
+            this.openDeductPopup()
           }
         },
                  {
@@ -470,6 +509,7 @@ export default {
       customName:'',
       deductAmount:'',
       deductRemark:'',
+      deductInputFocus: false,
       changeShow:false,
       changeFocus:false,
       weal:[],
@@ -480,7 +520,7 @@ export default {
         rechargePayWay:0,
       },
       rechargeInputFocus: false,
-      reduceShow:false
+
     };
   },
   computed: {
@@ -498,13 +538,40 @@ export default {
     this.init()
   },
   methods: {
-    confirmDeduct(val){
-			if (val.index == 0) {
-        this.deductAmount = ''
-        this.deductRemark = ''
-        this.reduceShow = false
-				return
-			}
+    // 打开减余额弹框
+    openDeductPopup(){
+      this.$refs.deductPopupRef.open('center')
+      // 禁用背景页面滚动
+      setTimeout(() => {
+        uni.pageScrollTo({
+          scrollTop: 0,
+          duration: 0
+        })
+      }, 100)
+      // 延迟设置焦点，确保弹框完全打开
+      setTimeout(() => {
+        this.deductInputFocus = true
+      }, 300)
+    },
+    // 关闭减余额弹框
+    closeDeductPopup(){
+      this.$refs.deductPopupRef.close()
+      // 重置焦点状态
+      this.deductInputFocus = false
+      // 重置表单
+      this.deductAmount = ''
+      this.deductRemark = ''
+    },
+    // 减余额输入框失去焦点
+    onDeductInputBlur(){
+      this.deductInputFocus = false
+    },
+    // 确认减余额
+    confirmDeduct(){
+      if (this.$util.isEmpty(this.deductAmount)){
+        this.$msg('请填写减余额金额')
+        return false
+      }
       if(Number(this.deductAmount)<0){
         this.$msg('金额要大于0')
         return false
@@ -512,9 +579,7 @@ export default {
       this.$util.confirmModal({content:'确认减少？'},() => {
         deductBalance({amount:this.deductAmount,customId:this.data.id,remark:this.deductRemark}).then(res=>{
           if(res.code == 1){
-            this.deductAmount = ''
-            this.deductRemark = ''
-            this.reduceShow = false
+            this.closeDeductPopup()
             this.$msg(res.msg)
             this.init()
           }
@@ -1195,4 +1260,29 @@ export default {
       justify-content: center;
     }
   }
+
+  // 减余额弹框样式
+  .deduct-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);
+  }
+
+  .deduct-tip {
+    margin-top: 30upx;
+    padding: 25upx;
+    background: #fff7e6;
+    border-radius: 12upx;
+    border-left: 6upx solid #ff9500;
+  }
+
+  .tip-text {
+    font-size: 28upx;
+    color: #ff6b35;
+    font-weight: 500;
+    line-height: 1.5;
+  }
 </style>