From a9b34c58adb9089ef16d781c6e6af617663ca39c Mon Sep 17 00:00:00 2001
From: wangxiaowei <1121133807@qq.com>
Date: Tue, 30 Dec 2025 18:17:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=85=85=E5=80=BC=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bundle/recharge/recharge.vue | 648 ++++++++++++++++++++---------------
 1 file changed, 379 insertions(+), 269 deletions(-)

diff --git a/bundle/recharge/recharge.vue b/bundle/recharge/recharge.vue
index cf7b7d4..2577536 100644
--- a/bundle/recharge/recharge.vue
+++ b/bundle/recharge/recharge.vue
@@ -1,7 +1,7 @@
 <template>
     <view class="">
         <navbar title="充值"></navbar>
-        
+
         <view class="recharge-box">
             <view class="r-desc">
                 <view class="r-desc1">请选择充值金额</view>
@@ -10,9 +10,11 @@
 
             <view class="bg-white card">
                 <view>
-                    <view class="card-item" :class="currentType == i + 1 ? 'active' : ''" v-for="i in 5" :key="i" @click="selectCard(i + 1)">
+                    <view class="card-item" :class="currentType == i + 1 ? 'active' : ''" v-for="i in 5" :key="i"
+                        @click="selectCard(i + 1)">
                         <view class="d-f a-i-c">
-                            <view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
+                            <view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span>
+                            </view>
                             <view class="card-balance">充值{{ balance['balance' + (i + 1)] }}</view>
                         </view>
                         <view class="d-f a-i-c">
@@ -26,11 +28,11 @@
                         </view>
                     </view>
                 </view>
-                <view >
-                    <checkbox-group @change="checkboxChange">
+                <view>
+                    <!-- <checkbox-group @change="checkboxChange">
                         <text class="" style="margin-right: 20rpx;" @click="see">我已阅读并同意充值协议</text>
                         <checkbox value="true" :checked="yxChekced"/>
-                    </checkbox-group>
+                    </checkbox-group> -->
                     <!-- <text class="" style="margin-right: 20rpx;">我已阅读并同意充值协议</text>
                     <checkbox value="cb" class="checkbox" :checked="yxChekced" @change="yxChekced = !yxChekced" /> -->
                 </view>
@@ -44,7 +46,7 @@
                 <view class="r-desc2">c.充值前请先查看本协议<text style="color: #FF5951;" @click="see">《充值协议》</text>。</view>
             </view>
 
-            <view class="card-btn" @click="confirmCard">确定</view>
+            <view class="card-btn" @click="openXieYi">确定</view>
         </view>
 
         <!-- 会员卡选择弹窗 -->
@@ -60,311 +62,419 @@
 				</view>
 			</view>
         </Popup> -->
+
+        <Popup :show="cardPopup" :width='680' :padding="0" backgroundColor="#fff" radius="16rpx">
+            <view class="notice-popup">
+                <view class="title" style="font-size: 36rpx; color: #303133; line-height: 50rpx;margin-top: 20rpx;">充值说明
+                </view>
+                <view class="desc" style="text-align: left; padding: 0 30rpx;">
+                    <view class="r-desc2" style="margin-bottom: 10rpx;">a.账户充值仅限在线方式支付，充值金额实时到账；</view>
+                    <view class="r-desc2" style="margin-bottom: 10rpx;">b.有问题请联系客服。</view>
+                    <!-- <view class="r-desc2" style="margin-bottom: 10rpx;">c.充值前请先查看本协议<text style="color: #FF5951;" @click="see">《充值协议》</text>。</view> -->
+                    <view class="r-desc2 xy" style="margin-bottom: 10rpx;display: flex; align-items: center; flex-wrap: wrap;"  @click="yxChekced = !yxChekced">
+                        <view style="margin-right: 10rpx;" :class="yxChekced ? 'active' : ''">
+                            <view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze" style="font-size: 46rpx;"></span>
+                            </view>
+                        </view>
+                        <view class="" style="font-size: 30rpx;">
+                            我已认真阅读并查看此协议<text style="color: #FF5951;" @click="see">《充值协议》</text>
+                        </view>
+                    </view>
+                </view>
+                <view class="btn">
+                    <view class="btn1" @click="cardPopup = false">取消</view>
+                    <view class="btn2" @click="confirmCard">确定</view>
+                </view>
+            </view>
+        </Popup>
     </view>
 </template>
 
 <script>
-    import navbar from '@/components/navbar.vue';
-    import Popup from '@/components/uni-popup.vue';
+import navbar from '@/components/navbar.vue';
+import Popup from '@/components/uni-popup.vue';
 
-    export default {
-        components: {
-            navbar,
-            Popup
-        },
+export default {
+    components: {
+        navbar,
+        Popup
+    },
 
-        data() {
-            return {
-                cardPopup: false,
-                currentType: -1,
-                balance: {},
-                yxChekced: true
+    data() {
+        return {
+            cardPopup: false,
+            currentType: -1,
+            balance: {},
+            yxChekced: false
+        }
+    },
+
+    onLoad() {
+        let self = this;
+        // 获取充值卡
+        self._post(
+            'ground.ground/groundSetting',
+            {
+                app_id: self.getAppId(),
+            },
+            function (res) {
+                self.balance = res.data.lists.balance;
+                console.log("🚀 ~ res:", self.balance)
             }
+        )
+    },
+
+    methods: {
+        // 选择会员卡
+        selectCard(index) {
+            this.currentType = index;
         },
-        
-        onLoad() {
+
+        checkboxChange(e) {
+            console.log("🚀 ~ e:", e)
+            this.yxChekced = e.detail.value[0]
+            console.log("🚀 ~ e:", this.yxChekced)
+
+        },
+
+        openXieYi() {
+            this.cardPopup = true;
+        },
+
+        // 确认选择
+        confirmCard() {
             let self = this;
-            // 获取充值卡
-            self._post(
-                'ground.ground/groundSetting',
-                {
-                    app_id: self.getAppId(),
-                },
-                function(res) {
-                    self.balance = res.data.lists.balance;
-                    console.log("🚀 ~ res:", self.balance)
+            if (!self.yxChekced) {
+                uni.showToast({
+                    title: '请认真阅读并查看此协议',
+                    icon: 'none'
+                });
+                return;
+            }
+
+            self.cardPopup = false;
+            uni.showLoading({
+                title: '加载中'
+            });
+            self._post('user.index/detail', {
+                source: self.getPlatform()
+            }, function (res) {
+                uni.hideLoading();
+                console.log("🚀 ~ res:", res)
+                if (res.data.userInfo.mobile == '') {
+                    uni.showModal({
+                        title: '提示',
+                        content: '请先绑定手机号',
+                        success: function (sm) {
+                            if (sm.confirm) {
+                                uni.switchTab({
+                                    url: '/pages/user/index/index'
+                                });
+                            }
+                        }
+                    });
+                } else {
+                    if (self.currentType == -1) {
+                        uni.showToast({
+                            title: '请选择充值金额',
+                            icon: 'none'
+                        });
+                        return;
+                    }
+                    self.wxPay()
                 }
-            )
+            });
         },
 
-        methods: {
-            // 选择会员卡
-            selectCard(index) {
-                this.currentType = index;
-            },
+        // 微信支付
+        wxPay() {
+            let self = this;
+            uni.showLoading({
+                title: '加载中'
+            });
 
-            checkboxChange(e) {
-	            console.log("🚀 ~ e:", e)
-	            this.yxChekced = e.detail.value[0]
-	            console.log("🚀 ~ e:", this.yxChekced)
-
-            },
-            
-            // 确认选择
-            confirmCard() {
-                if (!this.yxChekced) {
-                    uni.showToast({
-                        title: '请同意充值协议',
-                        icon: 'none'
-                    });
-                    return;
-                }
-
-                let self = this;
-                uni.showLoading({
-                    title: '加载中'
-                });
-                self._post('user.index/detail', {
-                    source: self.getPlatform()
-                }, function(res) {
-                    uni.hideLoading();
-                    console.log("🚀 ~ res:", res)
-                    if (res.data.userInfo.mobile == '') {
-                        uni.showModal({
-                            title: '提示',
-                            content: '请先绑定手机号',
-                            success: function(sm) {
-                                if (sm.confirm) {
-                                    uni.switchTab({
-                                        url: '/pages/user/index/index'
+            try {
+                self._post(
+                    'user.groundOrder/recharge',
+                    {
+                        app_id: self.getAppId(),
+                        type: this.currentType
+                    },
+                    function (res) {
+                        if (res.code) {
+                            const data = res.data
+                            console.log("🚀 ~ pay data:", data)
+                            uni.requestPayment({
+                                provider: 'wxpay',
+                                timeStamp: data.payment.timeStamp,
+                                nonceStr: data.payment.nonceStr,
+                                package: 'prepay_id=' + data.payment.prepay_id,
+                                signType: 'MD5',
+                                paySign: data.payment.paySign,
+                                success: res => {
+                                    self.result = 'success'
+                                    console.log("🚀 ~ pay success res:", res)
+                                    uni.showToast({
+                                        title: '支付成功',
+                                        icon: 'none'
                                     });
-                                }
-                            }
-                        });
-                    }else {
-                        if (self.currentType == -1) {
+                                    self.loadding = false;
+
+                                    setTimeout(() => {
+                                        uni.redirectTo({
+                                            url: '/bundle/recharge/card'
+                                        });
+                                    }, 500);
+                                },
+                                fail: res => {
+                                    console.log("🚀 ~ pay error res:", res)
+                                    self.result = 'fail'
+                                    self.loadding = false;
+
+                                    uni.showToast({
+                                        title: '支付失败',
+                                        icon: 'none'
+                                    });
+                                },
+                            });
+                        } else {
+                            self.loadding = false;
                             uni.showToast({
-                                title: '请选择充值金额',
+                                title: '创建订单失败',
                                 icon: 'none'
                             });
-                            return;
+                            return
                         }
-                        self.wxPay()
                     }
+                )
+            } catch (error) {
+                console.log("🚀 ~ pay error res:", res)
+                self.result = 'fail'
+                self.loadding = false;
+
+                uni.showToast({
+                    title: '支付失败',
+                    icon: 'none'
                 });
-            },
-
-            // 微信支付
-            wxPay() {
-                let self = this;
-                uni.showLoading({
-                    title: '加载中'
-                });
-
-                try {
-                    self._post(
-                        'user.groundOrder/recharge',
-                        {
-                            app_id: self.getAppId(),
-                            type: this.currentType
-                        },
-                        function(res) {
-                            if (res.code) {
-                                const data = res.data
-                                console.log("🚀 ~ pay data:", data)
-                                uni.requestPayment({
-                                    provider: 'wxpay',
-                                    timeStamp: data.payment.timeStamp,
-                                    nonceStr: data.payment.nonceStr,
-                                    package: 'prepay_id=' + data.payment.prepay_id,
-                                    signType: 'MD5',
-                                    paySign: data.payment.paySign,
-                                    success: res => {
-                                        self.result = 'success'
-                                        console.log("🚀 ~ pay success res:", res)
-                                        uni.showToast({
-                                            title: '支付成功',
-                                            icon: 'none'
-                                        });
-                                        self.loadding = false;
-
-                                        setTimeout(() => {
-                                            uni.redirectTo({
-                                                url: '/bundle/recharge/card'
-                                            });
-                                        }, 500);
-                                    },
-                                    fail: res => {
-                                        console.log("🚀 ~ pay error res:", res)
-                                        self.result = 'fail'
-                                        self.loadding = false;
-
-                                        uni.showToast({
-                                            title: '支付失败',
-                                            icon: 'none'
-                                        });
-                                    },
-                                });
-                            } else {
-                                self.loadding = false;
-                                uni.showToast({
-                                    title: '创建订单失败',
-                                    icon: 'none'
-                                });
-                                return
-                            }
-                        }
-                    )
-                } catch (error) {
-                    console.log("🚀 ~ pay error res:", res)
-                    self.result = 'fail'
-                    self.loadding = false;
-
-                    uni.showToast({
-                        title: '支付失败',
-                        icon: 'none'
-                    });
-                    setTimeout(() => {
-                        uni.navigateBack({delta: 1})
-                    }, 500);
-                }
-            },
-
-            see() {
-                uni.navigateTo({
-                    url: '/pages/webview/webview?url=https://xh.stnav.com/czxy.html'
-                });
+                setTimeout(() => {
+                    uni.navigateBack({ delta: 1 })
+                }, 500);
             }
+        },
+
+        see() {
+            uni.showLoading({
+                title: '加载中'
+            });
+            // 1. 协议文件地址（可替换为实际后端返回的 word 文件 url）
+            const url = 'https://xh.stnav.com/czxy.doc';
+            // 2. 下载 word 文件
+            uni.downloadFile({
+                url,
+                success: (res) => {
+                    if (res.statusCode === 200) {
+                        // 3. 预览 word 文件
+                        uni.openDocument({
+                            filePath: res.tempFilePath,
+                            fileType: 'doc',
+                            success: () => {
+                                // 预览成功
+                                uni.hideLoading();
+                            },
+                            fail: (err) => {
+                                uni.hideLoading();
+                                setTimeout(() => {
+                                    uni.showToast({ title: '无法预览文件', icon: 'none' });
+                                }, 1000);
+                            }
+                        });
+                    } else {
+                        uni.hideLoading();
+                        // setTimeout(() => {
+                        //     uni.showToast({ title: '下载失败', icon: 'none' });
+                        // }, 1000);
+                    }
+                },
+                fail: () => {
+                    uni.hideLoading();
+
+                    // setTimeout(() => {
+                    //     uni.showToast({ title: '下载失败', icon: 'none' });
+                    // }, 1000);
+                }
+            });
         }
     }
+}
 
 </script>
 
 <style lang="scss">
-    page {
-        background-color: #fff;
+page {
+    background-color: #fff;
+}
+
+.recharge-box {
+    margin: 0 30rpx;
+    margin-top: 24rpx;
+
+    .r-desc {
+        .r-desc1 {
+            font-size: 32rpx;
+            color: #303133;
+            line-height: 44rpx;
+        }
+
+        .r-desc2 {
+            margin-top: 12rpx;
+            font-size: 26rpx;
+            color: #909399;
+            line-height: 36rpx;
+        }
     }
 
-    .recharge-box {
-        margin: 0 30rpx;
-        margin-top: 24rpx;
+    .card {
+        margin-top: 28rpx;
+        padding-bottom: 64rpx;
 
-        .r-desc {
-            .r-desc1 {
-                font-size: 32rpx;
+        .card-item {
+            width: 690rpx;
+            height: 104rpx;
+            background: #FFFFFF;
+            box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.04);
+            border-radius: 16rpx;
+            border: 2rpx solid #fff;
+            margin: 0 0 20rpx;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 30rpx;
+            box-sizing: border-box;
+
+            .card-title {
+                font-size: 30rpx;
+                color: #121212;
+                margin-right: 24rpx;
+            }
+
+            .sale {
+                font-size: 28rpx;
+
+                .discount {
+                    color: #FF5951;
+                }
+            }
+
+            .card-balance {
+                font-size: 30rpx;
                 color: #303133;
-                line-height: 44rpx;
-            }
-
-            .r-desc2 {
-                margin-top: 12rpx;
-                font-size: 26rpx;
-                color: #909399;
-                line-height: 36rpx;
+                line-height: 42rpx;
+                margin-left: 26rpx;
             }
         }
 
-        .card {
-            margin-top: 28rpx;
-            padding-bottom: 64rpx;
+        .active {
+            border: 2rpx solid #FF5951;
+            background: #FFF4F4;
 
-            .card-item {
-                width: 690rpx;
-                height: 104rpx;
-                background: #FFFFFF;
-                box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0,0,0,0.04);
-                border-radius: 16rpx;
-                border: 2rpx solid #fff;
-                margin: 0 0 20rpx;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                padding: 0 30rpx;
-                box-sizing: border-box;
-
-                .card-title {
-                    font-size: 30rpx;
-                    color: #121212;
-                    margin-right: 24rpx;
-                }
-                .sale {
-                    font-size: 28rpx;
-                    .discount {
-                        color: #FF5951;
-                    }
-                }
-
-                .card-balance {
-                    font-size: 30rpx;
-                    color: #303133;
-                    line-height: 42rpx;
-                    margin-left: 26rpx;
+            .card-checkout {
+                .iconfont {
+                    color: #365A9A;
                 }
             }
-
-            .active {
-                border: 2rpx solid #FF5951;
-                background: #FFF4F4;
-
-                .card-checkout {
-                    .iconfont{
-                        color: #365A9A;
-                    }
-                }
-            }
-
-           
         }
 
-        .card-btn {
-            position: fixed;
-            left: 50%;
-            transform: translateX(-50%);
-            bottom: 22rpx;
-            width: 630rpx;
-            height: 90rpx;
-            background: #365A9A;
-            border-radius: 8rpx;
-            font-weight: bold;
-            font-size: 30rpx;
-            color: #FFFFFF;
-            line-height: 90rpx;
-            text-align: center;
-        }
+
     }
 
-    .notice-popup {
-		padding: 20rpx 0;
-		width: 100%;
+    .card-btn {
+        position: fixed;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 22rpx;
+        width: 630rpx;
+        height: 90rpx;
+        background: #365A9A;
+        border-radius: 8rpx;
+        font-weight: bold;
+        font-size: 30rpx;
+        color: #FFFFFF;
+        line-height: 90rpx;
+        text-align: center;
+    }
+}
 
-		.title {
-			font-size: 36rpx;
-			color: #303133;
-			line-height: 50rpx;
-			text-align: center;
-		}
+.notice-popup {
+    padding: 20rpx 0;
+    width: 100%;
 
-		.desc {
-			margin-top: 48rpx;
-			font-weight: 400;
-			font-size: 32rpx;
-			color: #303133;
-			line-height: 52rpx;
-			text-align: center;
-		}
+    .title {
+        font-size: 36rpx;
+        color: #303133;
+        line-height: 50rpx;
+        text-align: center;
+    }
 
-		.rule {
-			margin-bottom: 18rpx;
-			text-align: left;
-		}
+    .desc {
+        margin-top: 48rpx;
+        font-weight: 400;
+        font-size: 32rpx;
+        color: #303133;
+        line-height: 52rpx;
+        text-align: center;
+    }
 
-		.rule1 {
-			font-weight: 400;
-			font-size: 32rpx;
-			color: #303133;
-			line-height: 44rpx;
-			text-align: left;
-			margin-bottom: 10rpx;
-		}
-	}
+    .rule {
+        margin-bottom: 18rpx;
+        text-align: left;
+    }
+
+    .rule1 {
+        font-weight: 400;
+        font-size: 32rpx;
+        color: #303133;
+        line-height: 44rpx;
+        text-align: left;
+        margin-bottom: 10rpx;
+    }
+}
+
+.btn {
+    margin-top: 40rpx;
+    display: flex;
+    justify-content: space-around;
+    padding-bottom: 20rpx;
+}
+
+.btn1 {
+    width: 280rpx;
+    height: 80rpx;
+    text-align: center;
+    line-height: 80rpx;
+    font-size: 32rpx;
+    color: #121212;
+    background-color: #F6F7F8;
+    border-radius: 8rpx;
+}
+
+.btn2 {
+    width: 280rpx;
+    height: 80rpx;
+    text-align: center;
+    line-height: 80rpx;
+    font-size: 32rpx;
+    color: #fff;
+    background-color: #365A9A;
+    border-radius: 8rpx;
+}
+
+.xy {
+    .active {
+        .card-checkout {
+            .iconfont {
+                color: #365A9A;
+            }
+        }
+    }
+}
 </style>