From 19aad55c1e6b06056742fbfa6289ba0e497d3051 Mon Sep 17 00:00:00 2001
From: chenJinxu <2183691628@qq.com>
Date: Fri, 21 Jun 2024 15:27:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=B7=B3=E8=BD=AC=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/card-info/index.vue    |   7 +-
 src/views/package-list/index.vue | 137 +++++++++++++++++++++----------
 2 files changed, 100 insertions(+), 44 deletions(-)

diff --git a/src/views/card-info/index.vue b/src/views/card-info/index.vue
index eccf3a3..3b8ad68 100644
--- a/src/views/card-info/index.vue
+++ b/src/views/card-info/index.vue
@@ -117,9 +117,12 @@ export default {
             return /micromessenger/.test(ua);
         }
     },
-    async mounted() {
+    async created() {
         await this.getAuth();
         await this.getToken();
+    },
+    mounted() {
+
         this.getParams();
         this.getCardInfo();
 
@@ -155,7 +158,7 @@ export default {
             if (params) {
                 this.params = { ...params };
                 let url = window.location.href.split("?code=")[1];
-                if (isNotNull(url) && window.location.href.indexOf("code") > -1 && this.isWeChat) {
+                if (isNotNull(url) || window.location.href.indexOf("code") > -1) {
                     let timeStamp = new Date().getTime();
                     let code = url.split("&")[0];
                     this.code = code;
diff --git a/src/views/package-list/index.vue b/src/views/package-list/index.vue
index 8c7d26f..4aa6801 100644
--- a/src/views/package-list/index.vue
+++ b/src/views/package-list/index.vue
@@ -9,7 +9,7 @@
     <div class="package-list-container">
         <van-nav-bar :left-arrow="false" :border="true">
             <template #title>
-                <h5 style="font-size: 16px">{{topupTitle}}</h5>
+                <h5 style="font-size: 16px">{{ topupTitle }}</h5>
             </template>
         </van-nav-bar>
         <!-- 灰色线条 -->
@@ -22,12 +22,7 @@
                     <p>暂无相关套餐数据,请您联系管理员~</p>
                 </div>
                 <!-- 套餐订购 -->
-                <div
-                    class="package-order-container"
-
-                    v-for="(item, index) in packageOrderList"
-                    :key="index"
-                >
+                <div class="package-order-container" v-for="(item, index) in packageOrderList" :key="index">
                     <!-- 推荐 -->
                     <div class="recom" v-show="false">
                         <div class="shape"></div>
@@ -38,7 +33,8 @@
                     <!-- 套餐内容 -->
                     <div class="order-content">
                         <div class="title">
-                            <p>{{item.packageName}}<!-- ：{{(item.packagesPrice/item.packageIssue).toFixed(0)}}元/月 --></p>
+                            <p>{{ item.packageName }}<!-- ：{{(item.packagesPrice/item.packageIssue).toFixed(0)}}元/月 -->
+                            </p>
                         </div>
                         <div class="remark">
                             <p>每月200分钟通话时长，1G流量</p>
@@ -46,10 +42,11 @@
                         <div class="details">
                             <p>
 
-                                <span class="orange large">￥{{(item.packagesPrice/(item.packageIssue === 0 ? 1: item.packageIssue)).toFixed(0)}}</span>元/月，
+                                <span class="orange large">￥{{ (item.packagesPrice / (item.packageIssue === 0 ? 1 :
+                                    item.packageIssue)).toFixed(0)}}</span>元/月，
                             </p>
                             <p class="total">
-                                <span>合计</span><span class="orange price">{{item.packagesPrice}}元</span>
+                                <span>合计</span><span class="orange price">{{ item.packagesPrice }}元</span>
                             </p>
                         </div>
                         <!-- <div class="package-buy">
@@ -61,12 +58,12 @@
                             <div class="pay-type">
                                 <p>支付方式：</p>
                             </div>
-                            <van-radio-group v-model="radio" direction="horizontal"  @change="onRaidoChange">
+                            <van-radio-group v-model="radio" direction="horizontal" @change="onRaidoChange">
                                 <van-radio name="1">
                                     <template #default>
                                         <div class="radio-con">
                                             <span>微信</span>
-                                            <img src="../../assets/wx-pay.png"/>
+                                            <img src="../../assets/wx-pay.png" />
                                         </div>
                                     </template>
                                 </van-radio>
@@ -74,7 +71,7 @@
                                     <template #default>
                                         <div class="radio-con">
                                             <span>支付宝</span>
-                                            <img src="../../assets/alipay.png"/>
+                                            <img src="../../assets/alipay.png" />
                                         </div>
                                     </template>
                                 </van-radio>
@@ -82,7 +79,7 @@
                                     <template #default>
                                         <div class="radio-con">
                                             <span>12期花呗</span>
-                                            <img src="../../assets/antpay.png"/>
+                                            <img src="../../assets/antpay.png" />
                                         </div>
                                     </template>
                                 </van-radio>
@@ -144,6 +141,13 @@ export default {
             code: ''
         };
     },
+    computed: {
+        isWeChat() {
+            const ua = window.navigator.userAgent.toLowerCase();
+            return /micromessenger/.test(ua);
+        }
+
+    },
     created() {
         this.getAuth();
         this.getToken();
@@ -158,8 +162,8 @@ export default {
         // 根据code获取openId
         getOpenId(code) {
             APIPay.getOpenId(code).then(res => {
-                let data= res.data;
-                if(data.code === 20000) {
+                let data = res.data;
+                if (data.code === 20000) {
                     this.openId = data.data.openId;
                     this.$store.commit("openId", data.data.openId);
                 } else if (data.state === false) {
@@ -169,7 +173,7 @@ export default {
                 }
             })
         },
-         // 获取b端接口的token
+        // 获取b端接口的token
         getAuth() {
             let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650";
             APICore.getAuth({ manufactorId: manufactorId }).then(res => {
@@ -182,16 +186,16 @@ export default {
             APIPay.getToken(manufacturerNo).then(res => {
                 console.log("token的数据", res.data)
                 let data = res.data;
-                if(data.code === 20000) {
+                if (data.code === 20000) {
                     this.$store.commit("token", data.token);
-                    console.log("token的数据",  localStorage.getItem('token'))
+                    console.log("token的数据", localStorage.getItem('token'))
                 }
             })
         },
         getCode() {
             let url = window.location.href.split("?code=")[1];
             console.log("url", url);
-            if (isNotNull(url) ||window.location.href.indexOf("code") > -1) {
+            if (isNotNull(url) || window.location.href.indexOf("code") > -1) {
                 let code = url.split("&")[0];
                 this.code = code;
                 if (isNotNull(code)) {
@@ -209,7 +213,7 @@ export default {
             let params = this.$route.query;
             console.log("params", params);
             if (params) {
-                this.params = {...params};
+                this.params = { ...params };
             }
         },
         // 获取基本套餐信息
@@ -230,7 +234,7 @@ export default {
                     } else if (res.data.code === 0 && res.data.data === null) {
                         this.isShowNoData = true;
                     } else {
-                        if(res.data.data === null) {
+                        if (res.data.data === null) {
                             this.isShowNoData = false;
                         } else {
                             let data = res.data.data.packagesList;
@@ -271,7 +275,7 @@ export default {
                 APIWx.createJSSDK({
                     sUrl: window.location.href.split("#")[0],
                     userId: '',
-                    appId:  this.params.appId || AppId
+                    appId: this.params.appId || AppId
                 })
                     .then(res => {
                         let item = res.data.data;
@@ -300,6 +304,12 @@ export default {
             // 遍历数据找到属于三种支付方式对应的套餐id， 1 微信 2 支付宝全额 3 支付宝分期
             let payTypeToPackAgeId = data.payTypeList;
             console.log("购买的套餐数据data", payTypeToPackAgeId);
+            if (!this.isWeChat) {
+                return this.$dialog.confirm({
+                    message: '请用微信客户端打开此页。',
+                    showCancelButton: false,
+                })
+            }
             // 需要区分是要用微信支付还是支付宝花呗支付
             if (this.payType === '2') {
                 // 全额
@@ -326,7 +336,7 @@ export default {
                 })[0].productId;
                 this.packageIssue = 0;
                 console.log("this.payProductId3", this.payProductId);
-                if(openId === null || openId === 'null') {
+                if (openId === null || openId === 'null') {
                     this.$dialog.confirm({
                         message: '获取OpenId失败，请您重新进入',
                         showCancelButton: false,
@@ -367,7 +377,7 @@ export default {
                             message: `${res.data.message}`,
                             showCancelButton: false
                         })
-                    } else if ( res.data.code !== 0){
+                    } else if (res.data.code !== 0) {
                         return this.$dialog.confirm({
                             message: `请反馈给一线人员,\n${res.data.message}`,
                             showCancelButton: false
@@ -453,7 +463,7 @@ export default {
                         signType: data.signType, //微信签名方式：
                         paySign: data.paySign //微信签名
                     },
-                    function(res) {
+                    function (res) {
                         if (res.err_msg == "get_brand_wcpay_request:ok") {
                             // 使用以上方式判断前端返回,微信团队郑重提示：
                             //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
@@ -575,6 +585,7 @@ export default {
 .package-list-container {
     background-color: white;
     height: 100vh;
+
     .topup-container {
         position: relative;
         /* margin: 20px; */
@@ -585,14 +596,17 @@ export default {
         background-color: white;
         overflow: scroll;
         height: calc(100vh - 88px);
+
         .main {
             display: flex;
             justify-content: center;
             align-items: center;
             flex-direction: column;
+
             .tips {
                 padding: 10px;
             }
+
             .noData_container {
                 margin: 100px auto 0;
                 height: 120px;
@@ -603,15 +617,19 @@ export default {
                 align-items: flex-end;
                 font-size: 16px;
                 color: #999;
+
                 p {
                     font-size: 16px;
                 }
+
                 /* @include colorAndFont(#999, 28); */
             }
+
             p {
                 padding: 10px;
                 font-size: 16px;
             }
+
             .cancel-button {
                 width: 30vw;
                 border-radius: 5px;
@@ -623,6 +641,7 @@ export default {
                 align-items: center;
                 font-size: 16px;
             }
+
             .package-order-container {
                 position: relative;
                 margin: 10px 0;
@@ -630,6 +649,7 @@ export default {
                 z-index: 999;
                 box-shadow: rgba(14, 30, 37, 0.12) 0 3px 5px 0,
                     rgba(14, 30, 37, 0.32) 0 2px 16px 0;
+
                 .recom {
                     position: absolute;
                     top: -7px;
@@ -640,11 +660,13 @@ export default {
                     transform: rotate(-45deg);
                     text-align: center;
                     z-index: 9999;
+
                     p {
                         padding: 0;
                         color: white;
                         font-size: 14px;
                     }
+
                     .shape {
                         position: absolute;
                         top: -1px;
@@ -653,6 +675,7 @@ export default {
                         border-width: 0 21px 21px;
                         border-color: transparent transparent white;
                     }
+
                     .square {
                         height: 15px;
                         width: 35px;
@@ -663,40 +686,50 @@ export default {
                         font-size: 14px;
                     }
                 }
+
                 .order-content {
                     padding: 15px 10px;
+
                     .title {
                         display: flex;
                         justify-content: flex-start;
+
                         p {
                             font-size: 16px;
                             font-weight: bold;
                         }
                     }
+
                     .details {
                         display: flex;
                         justify-content: flex-start;
                         align-items: center;
+
                         p {
                             height: 40px;
                             @include center();
                             font-size: 14px;
                             padding: 5px 0 5px 10px;
                         }
+
                         .total {
                             font-size: 16px;
                             padding: 0;
                         }
+
                         .orange {
                             color: orange;
                         }
+
                         .large {
                             font-size: 26px;
                             margin: 0 2px;
                         }
+
                         .price {
                             font-size: 16px;
                         }
+
                         /* .buy-btn {
                             height: 30px;
                             width: 100px;
@@ -712,41 +745,48 @@ export default {
                             }
                         } */
                     }
+
                     .remark {
                         display: flex;
                         justify-content: flex-start;
+
                         p {
                             font-size: 14px;
-                             padding: 5px 10px;
+                            padding: 5px 10px;
                             /* font-weight: bold; */
                         }
                     }
+
                     .package-buy {
                         @include center();
                         padding: 5px 8px;
                         @include center();
-                            .buy-btn {
-                                height: 40px;
-                                width: 200px;
-                                padding: 0 5px;
-                                display: flex;
-                                justify-content: center;
-                                align-items: center;
-                                background: orange;
-                                border-radius: 20px;
-                                p {
-                                    font-size: 16px;
-                                    padding: 0;
-                                    color: white;
-                                }
+
+                        .buy-btn {
+                            height: 40px;
+                            width: 200px;
+                            padding: 0 5px;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            background: orange;
+                            border-radius: 20px;
+
+                            p {
+                                font-size: 16px;
+                                padding: 0;
+                                color: white;
                             }
                         }
+                    }
+
                     .radios-con {
                         /* padding: 20px 10px; */
                         /* @include center(); */
                         /* align-items: center; */
                         padding: 10px 0 10px 10px;
                         font-size: 14px;
+
                         /* box-shadow: rgba(14, 30, 37, 0.12) 0 3px 5px 0,
                                 rgba(14, 30, 37, 0.32) 0 2px 16px 0; */
                         img {
@@ -754,8 +794,10 @@ export default {
                             width: 20px;
                             margin: 2px;
                         }
+
                         .pay-type {
                             text-align: left;
+
                             p {
                                 font-size: 14px;
                                 padding: 0 0 10px 0;
@@ -765,10 +807,12 @@ export default {
                         .radio-con {
                             @include center();
                         }
+
                         .van-cell-text {
                             display: flex;
                             justify-content: flex-start;
                             align-items: center;
+
                             span {
                                 font-size: 14px;
                                 padding: 0 5px;
@@ -776,18 +820,21 @@ export default {
                         }
                     }
                 }
+
                 .content {
                     font-size: 14px;
                 }
             }
         }
     }
+
     .gray-line {
         height: 10px;
         width: 100%;
         background: #f2f4f5;
 
     }
+
     .order-description {
         height: 60px;
         display: flex;
@@ -795,15 +842,18 @@ export default {
         align-items: flex-start;
         flex-direction: column;
         padding: 5px 0 10px 10px;
+
         h5 {
             font-size: 14px;
             padding: 10px 0 0 0;
         }
     }
+
     .pay-radios {
         position: relative;
         top: 0;
         width: 100%;
+
         /* background-color: red; */
         /* padding: 0 15px; */
         .radios-con {
@@ -812,15 +862,18 @@ export default {
             align-items: center;
             font-size: 18px;
             box-shadow: rgba(14, 30, 37, 0.12) 0 3px 5px 0,
-                    rgba(14, 30, 37, 0.32) 0 2px 16px 0;
+                rgba(14, 30, 37, 0.32) 0 2px 16px 0;
+
             img {
                 height: 35px;
                 width: auto;
             }
+
             .van-cell-text {
                 display: flex;
                 justify-content: flex-start;
                 align-items: center;
+
                 span {
                     padding: 0 5px;
                 }