|
|
@@ -77,11 +77,34 @@
|
|
|
|
|
|
<view class="btn-wrap">
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
|
- <button class="button-com green" @click="wexinPayFn">微信支付</button>
|
|
|
+ <button class="button-com green" @click="showPayConfirm">微信支付</button>
|
|
|
<!-- #endif -->
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
+ <!-- 支付确认弹框 -->
|
|
|
+ <ModalModule
|
|
|
+ :show="payConfirmShow"
|
|
|
+ title="支付提示"
|
|
|
+ :custom="true"
|
|
|
+ :button="[]"
|
|
|
+ @click="handlePayConfirm"
|
|
|
+ >
|
|
|
+ <view class="pay-confirm-content">
|
|
|
+ <view class="confirm-icon">
|
|
|
+ <view class="info-icon">i</view>
|
|
|
+ </view>
|
|
|
+ <view class="confirm-text">
|
|
|
+ <view class="text-title">充值金额由门店收取和管理</view>
|
|
|
+ <view class="text-desc">保证余额安全是门店责任，与本小程序无关，小程序只是收款工具</view>
|
|
|
+ </view>
|
|
|
+ <view class="confirm-btn-wrap">
|
|
|
+ <button class="confirm-btn" @click="handleConfirmRecharge">知道了，继续充值</button>
|
|
|
+ <view class="tech-support">花掌柜小程序提供技术支持</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </ModalModule>
|
|
|
+
|
|
|
<wangCg :loginStyle.sync="globalLoginStyle" @goToLogin="loginTo()"></wangCg>
|
|
|
|
|
|
</view>
|
|
|
@@ -122,7 +145,9 @@ export default {
|
|
|
loginComeBack:0,
|
|
|
rechargeWeal:0,
|
|
|
weal:[],
|
|
|
- hint:'请输入充值金额'
|
|
|
+ hint:'请输入充值金额',
|
|
|
+ // 支付确认弹框相关
|
|
|
+ payConfirmShow: false
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -303,6 +328,20 @@ export default {
|
|
|
},
|
|
|
viewChange() {
|
|
|
this.pageTo({ url:'/pages/balance/changeList?id='+this.id+'&account='+this.account})
|
|
|
+ },
|
|
|
+ // 显示支付确认弹框
|
|
|
+ showPayConfirm() {
|
|
|
+ this.payConfirmShow = true
|
|
|
+ },
|
|
|
+ // 处理支付确认弹框点击
|
|
|
+ handlePayConfirm(e) {
|
|
|
+ // 点击遮罩层关闭弹框
|
|
|
+ this.payConfirmShow = false
|
|
|
+ },
|
|
|
+ // 确认充值
|
|
|
+ handleConfirmRecharge() {
|
|
|
+ this.payConfirmShow = false
|
|
|
+ this.wexinPayFn()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -736,4 +775,77 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+// 支付确认弹框样式
|
|
|
+.pay-confirm-content {
|
|
|
+ padding: 40upx 20upx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .confirm-icon {
|
|
|
+ margin-bottom: 30upx;
|
|
|
+
|
|
|
+ .info-icon {
|
|
|
+ width: 80upx;
|
|
|
+ height: 80upx;
|
|
|
+ background: #4a90e2;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 36upx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirm-text {
|
|
|
+ margin-bottom: 40upx;
|
|
|
+
|
|
|
+ .text-title {
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 16upx;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-desc {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #3f3e3e;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirm-btn-wrap {
|
|
|
+ .confirm-btn {
|
|
|
+ width: 60%;
|
|
|
+ height: 80upx;
|
|
|
+ background: linear-gradient(135deg, #07c160 0%, #10ad6a 100%);
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ border-radius: 40upx;
|
|
|
+ font-size: 30upx;
|
|
|
+ font-weight: bold;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-shadow: 0 4upx 12upx rgba(7, 193, 96, 0.3);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ margin: 0 auto 20upx;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ transform: scale(0.98);
|
|
|
+ box-shadow: 0 2upx 8upx rgba(7, 193, 96, 0.4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tech-support {
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #999;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
