update

- 增加 app打开充值h5跳转到话费查询页面
- 增加 app点击订购套餐提示

README.md

@@ -1166,3 +1166,11 @@ update
 fix
 
 - 修复 心理首页页面显示空白的问题
+
+## v1.0.127
+
+`2024.6.21`
+update
+
+- 增加 app打开充值h5跳转到话费查询页面
+- 增加 app点击订购套餐提示

src/config/models.js

@@ -8,7 +8,7 @@
 import store from "@/store";
 // 情绪模型
 const appTypeList = ['1'];
-export const VERSION_MODEL = '1.0.126F'; //版本号
+export const VERSION_MODEL = '1.0.127F'; //版本号
 export const IMAGE_URL = {
     production: 'http://zfb.ssjlai.com/web/',
     test: 'http://zfb.ssjlai.com/web/',

src/views/card-info/index.vue

@@ -7,19 +7,14 @@
 -->
 <template>
     <div class="card-info-container" v-show="isShowPage">
-        <van-nav-bar title="话费查询"
-                :left-arrow="false"
-                :border="true">
+        <van-nav-bar title="话费查询" :left-arrow="false" :border="true">
         </van-nav-bar>
         <div class="check-container">
             <!-- header -->
             <div class="header">
                 <!-- banner -->
                 <div class="banner">
-                    <van-image
-                    :src="logo"
-                    round
-                    >
+                    <van-image :src="logo" round>
                     </van-image>
                     <div class="right-message">
                         <p>{{ setMeal.msisdn }}</p>
@@ -28,7 +23,15 @@
                 <p class="padding-left">ICCID：{{ setMeal.iccid || '--' }}</p>
                 <p class="padding-left">语音通话接听免费，免漫游费。禁止手机使用</p>
                 <div class="action">
-                    <div class="action-item"><p>{{ setMeal.realname || '--' }}</p></div> <span> | </span> <div class="action-item"><p>{{ setMeal.cardState || '--' }}</p></div> <span> | </span> <div class="btn"><p @click="onRefresh">刷新</p></div>
+                    <div class="action-item">
+                        <p>{{ setMeal.realname || '--' }}</p>
+                    </div> <span> | </span>
+                    <div class="action-item">
+                        <p>{{ setMeal.cardState || '--' }}</p>
+                    </div> <span> | </span>
+                    <div class="btn">
+                        <p @click="onRefresh">刷新</p>
+                    </div>
                 </div>
             </div>
             <!-- 套餐详情 -->
@@ -53,11 +56,13 @@
             <!-- 套餐操作 -->
             <div class="card-details-menu">
                 <div class="meal-item" @click="onMealBuy">
-                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAADgUlEQVRYR+2XTWhUVxTH/+cl5IPQUhG0ASlWWoRaF22hSDeCRUT6gV+LUnEkQt+5b9GAUdRu2odupGDEQOa9+1IKRgUZLZUq1I1SF10VFdSNFqGKdBZtJ0UYTWi5R26ZFJmMvnvnRVDJ3QzDPR+/9z9zzpxHeMoPPeV8mAMsWqFnT8Esyz43xmxoevJTSqlDRdVox3+Ggs2ARPQaAGHmV9pJUNQnt8Ra6whA2RjzahRFvxVN6OvvArgcwBUR2aKUOuqboKh9LqCIUJZlfwI4wcyqaEJf/1xAGzBN09NEtISZl/kmKGrvBKi13gVgv4icICIpmrSVPxGdDsPwWPOdE2CWZe+JyM8AqgD+nmXAAMBSAEeYudQWYKVS6ZqYmLBgZWbeOZuASZKsCoLgnJ29URR93xagddJa/wSgh5lXzCZgmqYJEW3u6upaMDAwMNk2YJZl+0RkN4CXmPleA/pTAB94At9m5i+sT6VS6ajVar8DOKeUsrFmHKffoPXKsmyNiJw1xrwfRdH5BuBXAFoGfgy0BVxt7/PKa22cAUdGRl7s7u6uEdHeMAz3eqrW0ny6vPV6feHQ0ND9Qgo2FLsIoDatQBFIl/J6KdgAtBvNtmq1Oi+O43+TJFkcBEEsIp15sEQ0NTU1tWdwcPAP1/J6A46NjW0yxthh/W4Yhr+Uy+V3Ojo6jgDIBQRgO3Q9M9+0iV3K6w04Ojr6cmdnp+26Hcx8ME+1R927ltcbsFHmX0XkqlKqeal15nXp3ulgzl087aC1/haAhTvrTDTT8A0Aix/XvW0Dpmk6QEQW8haA/wZ2m+ckM3+Z5+utYJqmrxPRDQCfMfM3eQmK3vsC2uV1nTGmQkR2/bdz0eX0AvirsVKdsu84Lk5eTRLHcdDf32/3tU9EZIKI7Gh5oZHseouk9uHtGkUichfAP0Q0H8DxarW6OY5j4wLprGCapiUiOiwie5j560ZH7yIiu8huVUqNP5zQ1/5RsD6A3xHRm8xsVfn/aK2vi8g1pdTGJkAv+9kAtO8li5j5rSbAyyJyRyn1UROgl31hQK31dgAHjDEfR1F0xgZMkuTDIAh+aPXP4mtfGHB4eLi3r6/vAoC3RcR+gohWArhUr9dXNq9LvvaFAW2A8fHxvsnJyR3GmLX2exAEP/b09BwolUr1Vgl87VvFcG4Sl5HwJGzmAIuqOqfgc6/gA38wwThLucAeAAAAAElFTkSuQmCC" alt=""/>
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAADgUlEQVRYR+2XTWhUVxTH/+cl5IPQUhG0ASlWWoRaF22hSDeCRUT6gV+LUnEkQt+5b9GAUdRu2odupGDEQOa9+1IKRgUZLZUq1I1SF10VFdSNFqGKdBZtJ0UYTWi5R26ZFJmMvnvnRVDJ3QzDPR+/9z9zzpxHeMoPPeV8mAMsWqFnT8Esyz43xmxoevJTSqlDRdVox3+Ggs2ARPQaAGHmV9pJUNQnt8Ra6whA2RjzahRFvxVN6OvvArgcwBUR2aKUOuqboKh9LqCIUJZlfwI4wcyqaEJf/1xAGzBN09NEtISZl/kmKGrvBKi13gVgv4icICIpmrSVPxGdDsPwWPOdE2CWZe+JyM8AqgD+nmXAAMBSAEeYudQWYKVS6ZqYmLBgZWbeOZuASZKsCoLgnJ29URR93xagddJa/wSgh5lXzCZgmqYJEW3u6upaMDAwMNk2YJZl+0RkN4CXmPleA/pTAB94At9m5i+sT6VS6ajVar8DOKeUsrFmHKffoPXKsmyNiJw1xrwfRdH5BuBXAFoGfgy0BVxt7/PKa22cAUdGRl7s7u6uEdHeMAz3eqrW0ny6vPV6feHQ0ND9Qgo2FLsIoDatQBFIl/J6KdgAtBvNtmq1Oi+O43+TJFkcBEEsIp15sEQ0NTU1tWdwcPAP1/J6A46NjW0yxthh/W4Yhr+Uy+V3Ojo6jgDIBQRgO3Q9M9+0iV3K6w04Ojr6cmdnp+26Hcx8ME+1R927ltcbsFHmX0XkqlKqeal15nXp3ulgzl087aC1/haAhTvrTDTT8A0Aix/XvW0Dpmk6QEQW8haA/wZ2m+ckM3+Z5+utYJqmrxPRDQCfMfM3eQmK3vsC2uV1nTGmQkR2/bdz0eX0AvirsVKdsu84Lk5eTRLHcdDf32/3tU9EZIKI7Gh5oZHseouk9uHtGkUichfAP0Q0H8DxarW6OY5j4wLprGCapiUiOiwie5j560ZH7yIiu8huVUqNP5zQ1/5RsD6A3xHRm8xsVfn/aK2vi8g1pdTGJkAv+9kAtO8li5j5rSbAyyJyRyn1UROgl31hQK31dgAHjDEfR1F0xgZMkuTDIAh+aPXP4mtfGHB4eLi3r6/vAoC3RcR+gohWArhUr9dXNq9LvvaFAW2A8fHxvsnJyR3GmLX2exAEP/b09BwolUr1Vgl87VvFcG4Sl5HwJGzmAIuqOqfgc6/gA38wwThLucAeAAAAAElFTkSuQmCC"
+                        alt="" />
                     <p>套餐订购</p>
                 </div>
                 <div class="meal-item" @click="onRecordCheck">
-                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAD6UlEQVRYR+2YXWgcVRiG3+9sshtSiUaKmFAvSlEReiFuKSKWoNbUm17401DFH0KTOWdCDLheCHrhoCBi1MhKMnMmCaEJuZFaGhRrTVFaQW8MXigiFmqVyipYwRKM7GTOJyfsStimmbS72QbN3C3n7JyH9/t5vzOEDf7QBufDJmC1EdpUsFLBfD7fkk6n3wVwVCk1k6RwooJa605mlgBuTHpZ5ToRMRGNO44zbde01lsBfAwgCyBi5oNKqaOrvXdVQAsH4DiA88x8thrA8fHx9sXFxU8AbGfmZwAMENHdSZCrAgZB8D4R7Uqn07d3d3f/faWA5f2jo6Pb4zg+SUS3MPNepdTp4eHh61Kp1EclyAOXC3cS4Gf2EKXUfVXA3WGMmWXmrUSUATAkpcyVQn4AwHvMPKmUsqpe8qwr4MjISLahoeE4MxejKNrX2Nh4CMBzFjKVSh2L49iufVcsFh8YGBi4WFdArfW9AD4EcCGO4wf7+vqWclhr/XYJMgLwQxRFHf39/RcuF6F1UTAMw33MbKvznDGm03XdX8oAvu/vFEJ8ZQsPwB4pZeGqqzgIgivOQd/3HxVCTBPRt8z8kJTy9zKA1noHgM8BxMaYPa7rnkvK7ZoqqLW2iT7GzF8S0X4p5Z/LKnmbMcbCNQPokFJ+nwRn12sGGATBs0T0DjPPEtEjUsq/loX1JiHEKQA3G2Pud13367XA1QxQa/0SgFetfRUKhSc8zyuWAYaGhm5obm7+FMBtRNTpOM4XYRiOGWNsazmdBFq1gkEQ5IjoLQCHW1tbD3V1dcXlQwcHB7e0tLRY97jLhtxxnJM2alprw8wvK6VeWVdAz/NEW1vbTwC2WY8tFAoPe5635Dj5fD6TyWRsm+kA0CWlPFaCqR9gGIZ7bc4xs63agwBmLSSAxfb29iPGmP1CiKfLw8K1ADxsIYrFYltTU9PjzDxmIQH8AcD+7lNKBRVhrI+Ck5OTWxYWFn4FMC2lVBMTE01RFE3Y6aQE9IKU8o2V7LUuORgEwZNENMXMLwohdjDzYwCuB/AzM7+plLJD6Yr2WhdArfUJAHZeBDNfJKIjQoipnp6eU3ZQXaU66xNirfUMETUAmJqfn5/J5XILSS2j7kWyRqDKbfVR8CrhltyrLjm4YQCJ6B4A/04lSWC2sh3HeV5rbW+C1sqW22lhbm5uVzabLdbM6ojoVgBlm0risxV9Qin1ge/7u4UQT1UCSilf+1+FuCbXzuWyl0b+bwD0SymHk0Kyrhf3S/oLkT3vTvtVQQixs7e397eqAO2fq/n0sQKgdZgfmfl1pdSZJLilnrSWTddyzyZgtepvKvifV/Af4cRYRyl1cksAAAAASUVORK5CYII=" alt=""/>
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAD6UlEQVRYR+2YXWgcVRiG3+9sshtSiUaKmFAvSlEReiFuKSKWoNbUm17401DFH0KTOWdCDLheCHrhoCBi1MhKMnMmCaEJuZFaGhRrTVFaQW8MXigiFmqVyipYwRKM7GTOJyfsStimmbS72QbN3C3n7JyH9/t5vzOEDf7QBufDJmC1EdpUsFLBfD7fkk6n3wVwVCk1k6RwooJa605mlgBuTHpZ5ToRMRGNO44zbde01lsBfAwgCyBi5oNKqaOrvXdVQAsH4DiA88x8thrA8fHx9sXFxU8AbGfmZwAMENHdSZCrAgZB8D4R7Uqn07d3d3f/faWA5f2jo6Pb4zg+SUS3MPNepdTp4eHh61Kp1EclyAOXC3cS4Gf2EKXUfVXA3WGMmWXmrUSUATAkpcyVQn4AwHvMPKmUsqpe8qwr4MjISLahoeE4MxejKNrX2Nh4CMBzFjKVSh2L49iufVcsFh8YGBi4WFdArfW9AD4EcCGO4wf7+vqWclhr/XYJMgLwQxRFHf39/RcuF6F1UTAMw33MbKvznDGm03XdX8oAvu/vFEJ8ZQsPwB4pZeGqqzgIgivOQd/3HxVCTBPRt8z8kJTy9zKA1noHgM8BxMaYPa7rnkvK7ZoqqLW2iT7GzF8S0X4p5Z/LKnmbMcbCNQPokFJ+nwRn12sGGATBs0T0DjPPEtEjUsq/loX1JiHEKQA3G2Pud13367XA1QxQa/0SgFetfRUKhSc8zyuWAYaGhm5obm7+FMBtRNTpOM4XYRiOGWNsazmdBFq1gkEQ5IjoLQCHW1tbD3V1dcXlQwcHB7e0tLRY97jLhtxxnJM2alprw8wvK6VeWVdAz/NEW1vbTwC2WY8tFAoPe5635Dj5fD6TyWRsm+kA0CWlPFaCqR9gGIZ7bc4xs63agwBmLSSAxfb29iPGmP1CiKfLw8K1ADxsIYrFYltTU9PjzDxmIQH8AcD+7lNKBRVhrI+Ck5OTWxYWFn4FMC2lVBMTE01RFE3Y6aQE9IKU8o2V7LUuORgEwZNENMXMLwohdjDzYwCuB/AzM7+plLJD6Yr2WhdArfUJAHZeBDNfJKIjQoipnp6eU3ZQXaU66xNirfUMETUAmJqfn5/J5XILSS2j7kWyRqDKbfVR8CrhltyrLjm4YQCJ6B4A/04lSWC2sh3HeV5rbW+C1sqW22lhbm5uVzabLdbM6ojoVgBlm0risxV9Qin1ge/7u4UQT1UCSilf+1+FuCbXzuWyl0b+bwD0SymHk0Kyrhf3S/oLkT3vTvtVQQixs7e397eqAO2fq/n0sQKgdZgfmfl1pdSZJLilnrSWTddyzyZgtepvKvifV/Af4cRYRyl1cksAAAAASUVORK5CYII="
+                        alt="" />
                     <p>订购记录</p>
                 </div>
             </div>
@@ -76,325 +81,370 @@ import { isNotNull } from "@/utils/index";
 import APICore from "@/api/core";
 import AppId from "@/config/appId";
 export default {
-  name:'cardInfo',
-  inject: ["reload"],
-  data(){
-   return {
-       //套餐信息
-       setMeal: {
-           expireTime: '', //套餐过期时间
-           residueVoiceData: '', //剩余语音
-           availableData: '', //流量套餐
-           residueFlow: '', //剩余流量
-           iccid: this.$route.query.iccid, //iccid
-           cardState: '', //卡激活状态
-           realname: '', //是否已实名 1是 0 否
-           msisdn: '', //msisdn
-           isUnicom: null, //是否是联通
-       },
-       isShowMenu: this.$route.query.isShowMenu,
-       params: {},
-       isShowPage: false, //是否显示整个页面
-       code: '', //微信授权code
-   }
-  },
-  computed: {
-    //   顶部图标
-      logo(){
-          if(this.setMeal.isUnicom !== null) {
-            return this.setMeal.isUnicom ? require('@/assets/img/unicom.png') : require('@/assets/img/yidong_logo.png')
-          } else {
-            return null
-          }
-      }
-  },
-  created() {
-    this.getAuth();
-    this.getToken();
-    this.getParams();
-    this.getCardInfo();
-
-  },
-  methods: {
-    //   获取core token
-    getAuth() {
-        let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650";
-        APICore.getAuth({ manufactorId: manufactorId }).then(res => {
-            this.$store.commit("gatewayToken", res.data.data);
-        });
-    },
-    // 获取token
-    getToken() {
-        let manufacturerNo = '9f166b07-ff83-4991-84dc-ca6ad4a6b95b';
-        return new Promise((resolve) => {
-            APIPay.getToken(manufacturerNo).then(res => {
-                let data = res.data;
-                if(data.code === 20000) {
-                    this.$store.commit("token", data.token);
-                    resolve(true);
-                }
-            });
-        })
+    name: 'cardInfo',
+    inject: ["reload"],
+    data() {
+        return {
+            //套餐信息
+            setMeal: {
+                expireTime: '', //套餐过期时间
+                residueVoiceData: '', //剩余语音
+                availableData: '', //流量套餐
+                residueFlow: '', //剩余流量
+                iccid: this.$route.query.iccid, //iccid
+                cardState: '', //卡激活状态
+                realname: '', //是否已实名 1是 0 否
+                msisdn: '', //msisdn
+                isUnicom: null, //是否是联通
+            },
+            isShowMenu: this.$route.query.isShowMenu,
+            params: {},
+            isShowPage: false, //是否显示整个页面
+            code: '', //微信授权code
+        }
     },
-      // 获取url传过来的参数
-    getParams() {
-        let params = this.$route.query;
-        if (params) {
-            this.params = {...params};
-            let url = window.location.href.split("?code=")[1];
-            if ( isNotNull(url) || window.location.href.indexOf("code") > -1) {
-                let timeStamp = new Date().getTime();
-                let code = url.split("&")[0];
-                this.code = code;
-                if (isNotNull(code)) {
-                    this.isShowPage = true;
-                    if(!params.isHasCode) {
-                        this.getOpenId(code);
-                    }
-                } else {
-                    this.$dialog({
-                        message: '系统繁忙，请重新进入'
-                    })
-                }
+    computed: {
+        //   顶部图标
+        logo() {
+            if (this.setMeal.isUnicom !== null) {
+                return this.setMeal.isUnicom ? require('@/assets/img/unicom.png') : require('@/assets/img/yidong_logo.png')
             } else {
-                this.getWxCode();
+                return null
             }
+        },
+        isWeChat() {
+            const ua = window.navigator.userAgent.toLowerCase();
+            return /micromessenger/.test(ua);
         }
     },
-    getWxCode() {
-        let params = this.params;
-        let commonUrl = process.env.VUE_APP_BASE_API;
-        let redUrl = encodeURIComponent(`${commonUrl}/h5-frontendweb/#/cardInfo?imei=${params.imei}&iccid=${params.iccid}`);
-        let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${AppId}&redirect_uri=${redUrl}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
-        window.location.href = url;
+    async mounted() {
+        await this.getAuth();
+        await this.getToken();
+        this.getParams();
+        this.getCardInfo();
+
     },
-     // 根据code获取openId
-    getOpenId(code) {
-        let openId = this.$store.getters.openId;
-        APIPay.getOpenId(code).then( async res => {
-            let data= res.data;
-            if(data.code === 20000) {
-                this.$store.commit("openId", data.data.openId);
-            }else if (data.state === false) {
-                console.log("token过期");
-                let hasToken = await this.getToken();
-                if(hasToken) {
-                    this.getOpenId(this.code);
+    methods: {
+        //   获取core token
+        getAuth() {
+            let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650";
+            return new Promise((resolve) => {
+                APICore.getAuth({ manufactorId: manufactorId }).then(res => {
+                    this.$store.commit("gatewayToken", res.data.data);
+                });
+                resolve(true)
+            })
+        },
+        // 获取token
+        getToken() {
+            let manufacturerNo = '9f166b07-ff83-4991-84dc-ca6ad4a6b95b';
+            return new Promise((resolve) => {
+                APIPay.getToken(manufacturerNo).then(res => {
+                    let data = res.data;
+                    if (data.code === 20000) {
+                        this.$store.commit("token", data.token);
+
+                    }
+                });
+                resolve(true);
+            })
+        },
+        // 获取url传过来的参数
+        getParams() {
+            let params = this.$route.query;
+            if (params) {
+                this.params = { ...params };
+                let url = window.location.href.split("?code=")[1];
+                if (isNotNull(url) && window.location.href.indexOf("code") > -1 && this.isWeChat) {
+                    let timeStamp = new Date().getTime();
+                    let code = url.split("&")[0];
+                    this.code = code;
+                    if (isNotNull(code)) {
+                        this.isShowPage = true;
+                        if (!params.isHasCode) {
+                            this.getOpenId(code);
+                        }
+                    } else {
+                        this.$dialog({
+                            message: '系统繁忙，请重新进入'
+                        })
+                    }
                 } else {
-                    this.$dialog({
-                        message: '系统繁忙，请重新进入'
-                    })
+                    if (this.isWeChat) {
+                        this.getWxCode();
+                    } else {
+                        this.isShowPage = true;
+                    }
+
                 }
             }
-        })
-    },
-    //获取小台风物联网卡信息
-    getCardInfo() {
-          if( !this.isShowPage ) {return}
-          this.$toast.loading({ message: '查询中...' });
-          let reqBody = {
-              imei: this.$route.query.imei,
-              iccid: this.$route.query.iccid || ''
-          }
-          APIWx.GetCardInfo(reqBody)
-            .then(res => {
+        },
+        getWxCode() {
+            let params = this.params;
+            let commonUrl = process.env.VUE_APP_BASE_API;
+            let redUrl = encodeURIComponent(`${commonUrl}/h5-frontendweb/#/cardInfo?imei=${params.imei}&iccid=${params.iccid}`);
+            let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${AppId}&redirect_uri=${redUrl}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
+            window.location.href = url;
+        },
+        // 根据code获取openId
+        getOpenId(code) {
+            let openId = this.$store.getters.openId;
+            APIPay.getOpenId(code).then(async res => {
                 let data = res.data;
-                if (data.stateCode === 1 ) {
-                    let item = data.data;
-                    this.setMeal.expireTime = item.expireTime == '' ? "": this.$dayjs(item.expireTime).format("YYYY-MM-DD");
-                    this.setMeal.residueVoiceData = item.availableVoiceData;
-                    this.setMeal.residueFlow = item.availableData;
-                    this.setMeal.cardState = item.cardState;
-                    this.setMeal.realname = Number(item.realname) === 1 ? '已实名' : '未实名';
-                    this.setMeal.msisdn = item.msisdn;
-                    // 截取msisdn 前三位， 148 是移动，其它都是联通
-                    this.setMeal.isUnicom = item.msisdn.slice(0,3) === '148' ? false : true;
-                    this.$toast.success({
-                        message: "查询成功",
-                        duration: 1500
-                    });
+                if (data.code === 20000) {
+                    this.$store.commit("openId", data.data.openId);
+                } else if (data.state === false) {
+                    console.log("token过期");
+                    let hasToken = await this.getToken();
+                    if (hasToken) {
+                        this.getOpenId(this.code);
+                    } else {
+                        this.$dialog({
+                            message: '系统繁忙，请重新进入'
+                        })
+                    }
                 }
             })
-            .catch(error => {
-                console.log("接口报错了", error);
-            }).finally(() => {
-                this.$toast.clear();
+        },
+        //获取小台风物联网卡信息
+        getCardInfo() {
+            if (!this.isShowPage) { return }
+            this.$toast.loading({ message: '查询中...' });
+            let reqBody = {
+                imei: this.$route.query.imei,
+                iccid: this.$route.query.iccid || ''
+            }
+            APIWx.GetCardInfo(reqBody)
+                .then(res => {
+                    let data = res.data;
+                    if (data.stateCode === 1) {
+                        let item = data.data;
+                        this.setMeal.expireTime = item.expireTime == '' ? "" : this.$dayjs(item.expireTime).format("YYYY-MM-DD");
+                        this.setMeal.residueVoiceData = item.availableVoiceData;
+                        this.setMeal.residueFlow = item.availableData;
+                        this.setMeal.cardState = item.cardState;
+                        this.setMeal.realname = Number(item.realname) === 1 ? '已实名' : '未实名';
+                        this.setMeal.msisdn = item.msisdn;
+                        // 截取msisdn 前三位， 148 是移动，其它都是联通
+                        this.setMeal.isUnicom = item.msisdn.slice(0, 3) === '148' ? false : true;
+                        this.$toast.success({
+                            message: "查询成功",
+                            duration: 1500
+                        });
+                    } else {
+                        this.$toast.success({
+                            message: `${data.message}`,
+                            duration: 1500
+                        });
+                    }
+                })
+                .catch(error => {
+                    console.log("接口报错了", error);
+                }).finally(() => {
+                    setTimeout(() => {
+                        this.$toast.clear();
+                    }, 1500);
+
+                })
+        },
+        //   返回
+        onNavBack() {
+            /* this.$router.push({ name: 'device'}); */
+        },
+        //   onRefresh 刷新
+        onRefresh() {
+            this.reload();
+        },
+        // 购买套餐
+        onMealBuy() {
+            this.$router.replace({
+                name: 'packageBuy',
+                query: { imei: this.$route.query.imei, iccid: this.$route.query.iccid, isShowMenu: this.isShowMenu }
             })
-    },
-    //   返回
-    onNavBack() {
-        /* this.$router.push({ name: 'device'}); */
-    },
-    //   onRefresh 刷新
-    onRefresh() {
-        this.reload();
-    },
-    // 购买套餐
-    onMealBuy() {
-        this.$router.replace({
-            name: 'packageBuy',
-            query: { imei: this.$route.query.imei, iccid: this.$route.query.iccid, isShowMenu: this.isShowMenu}
-        })
-    },
-    // 订购记录
-    onRecordCheck () {
-        this.$router.replace({
-            name: 'buyRecord',
-            query: { imei: this.$route.query.imei, iccid: this.$route.query.iccid, isShowMenu: this.isShowMenu}
-        })
-    }
+        },
+        // 订购记录
+        onRecordCheck() {
+            this.$router.replace({
+                name: 'buyRecord',
+                query: { imei: this.$route.query.imei, iccid: this.$route.query.iccid, isShowMenu: this.isShowMenu }
+            })
+        }
 
-  }
+    }
 }
 </script>
 
 <style scoped lang="scss">
-    .card-info-container {
-        max-height: 100vh;
-        width: 100%;
-        position: relative;
-        background-color: #fff;
-        p {
-            font-size: 16px;
-            color: #9B9B9B;
-        }
-        .check-container {
-            height: calc(100vh - 88px);
-            padding: 8px 10px;
+.card-info-container {
+    max-height: 100vh;
+    width: 100%;
+    position: relative;
+    background-color: #fff;
+
+    p {
+        font-size: 16px;
+        color: #9B9B9B;
+    }
+
+    .check-container {
+        height: calc(100vh - 88px);
+        padding: 8px 10px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-direction: column;
+
+        .header {
+            height: 200px;
+            width: 100%;
             display: flex;
-            justify-content: flex-start;
-            align-items: center;
+            justify-content: space-around;
             flex-direction: column;
-            .header {
-                height: 200px;
-                width: 100%;
+            align-items: flex-start;
+            border: 1px solid #fff;
+            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+
+            .padding-left {
+                padding-left: 10px;
+            }
+
+            .banner {
+                height: 75px;
+                margin: 10px 0;
+                padding-left: 5px;
                 display: flex;
-                justify-content: space-around;
-                flex-direction: column;
-                align-items: flex-start;
-                border: 1px solid #fff;
-                box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
-                .padding-left {
-                    padding-left: 10px;
-                }
-                .banner {
+                justify-content: flex-start;
+                align-items: center;
+
+                .van-image {
                     height: 75px;
-                    margin: 10px 0;
-                    padding-left: 5px;
-                    display: flex;
-                    justify-content: flex-start;
-                    align-items: center;
-                    .van-image {
-                        height: 75px;
-                        width: 75px;
-                        border: 5px solid #E0EEFF;
-                    }
-                    .right-message {
-                        text-align: center;
-                        margin-left: 10px;
-                         p {
-                            font-size: 18px;
-                            color: #64A9FF;
-                        }
-                    }
+                    width: 75px;
+                    border: 5px solid #E0EEFF;
                 }
-                .action {
-                    height: 35px;
+
+                .right-message {
                     text-align: center;
-                    padding-left: 10px;
-                    width: 100%;
-                    display: flex;
-                    justify-content: flex-start;
-                    align-items: center;
+                    margin-left: 10px;
+
                     p {
-                        font-size: 16px;
+                        font-size: 18px;
                         color: #64A9FF;
                     }
-                    span {
-                        display: block;
-                        color: #9B9B9B;
-                        font-size: 16px;
-                        padding: 0 8px;
-                    }
-                    .btn {
-                        height: 25px;
-                        width: 75px;
-                        line-height: 25px;
-                        text-align: center;
-                        background-color: #64A9FF;
-                        border-radius: 10px;
-                        p {
-                            color: #fff;
-                        }
-                    }
                 }
             }
-            .card-details {
-                height: 75px;
+
+            .action {
+                height: 35px;
+                text-align: center;
+                padding-left: 10px;
                 width: 100%;
                 display: flex;
-                justify-content: space-between;
+                justify-content: flex-start;
                 align-items: center;
-                margin-top: 20px;
-                border: 1px solid #fff;
-                box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
-                .set-meal {
-                    flex: 1;
-                    height: 50px;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    flex-direction: column;
+
+                p {
+                    font-size: 16px;
+                    color: #64A9FF;
+                }
+
+                span {
+                    display: block;
+                    color: #9B9B9B;
+                    font-size: 16px;
+                    padding: 0 8px;
+                }
+
+                .btn {
+                    height: 25px;
+                    width: 75px;
+                    line-height: 25px;
+                    text-align: center;
+                    background-color: #64A9FF;
+                    border-radius: 10px;
+
                     p {
-                        font-size: 16px;
-                        padding: 5px 0;
-                    }
-                    .font-orange {
-                        color: orange;
+                        color: #fff;
                     }
                 }
-                .set-meal:nth-of-type(2) {
-                    border-left: 1px solid #DDDDDD;
-                    border-right: 1px solid #DDDDDD;
-                }
             }
-            .card-details-menu {
-                height: 75px;
-                width: 100%;
+        }
+
+        .card-details {
+            height: 75px;
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 20px;
+            border: 1px solid #fff;
+            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+
+            .set-meal {
+                flex: 1;
+                height: 50px;
                 display: flex;
-                justify-content: flex-start;
+                justify-content: center;
                 align-items: center;
-                margin-top: 20px;
-                border: 1px solid #fff;
-                box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
-                .meal-item {
-                    flex: 1;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    flex-direction: column;
-                    padding-left: 10px;
-                    img {
-                        height: 45px;
-                        width: 40px
-                    }
-                    p {
-                        font-size: 14px;
-                        padding: 5px 0;
-                    }
+                flex-direction: column;
+
+                p {
+                    font-size: 16px;
+                    padding: 5px 0;
+                }
+
+                .font-orange {
+                    color: orange;
                 }
             }
-            .tips-container {
-                width: 100%;
+
+            .set-meal:nth-of-type(2) {
+                border-left: 1px solid #DDDDDD;
+                border-right: 1px solid #DDDDDD;
+            }
+        }
+
+        .card-details-menu {
+            height: 75px;
+            width: 100%;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            margin-top: 20px;
+            border: 1px solid #fff;
+            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+
+            .meal-item {
+                flex: 1;
                 display: flex;
-                justify-content: flex-start;
-                align-items: flex-start;
+                justify-content: center;
+                align-items: center;
                 flex-direction: column;
+                padding-left: 10px;
+
+                img {
+                    height: 45px;
+                    width: 40px
+                }
+
                 p {
-                    margin: 10px;
-                    color: red;
+                    font-size: 14px;
+                    padding: 5px 0;
                 }
             }
         }
+
+        .tips-container {
+            width: 100%;
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            flex-direction: column;
+
+            p {
+                margin: 10px;
+                color: red;
+            }
+        }
     }
+}
 </style>

src/views/package-buy/index.vue

@@ -14,28 +14,17 @@
         </van-nav-bar>
         <!-- 套餐内容 -->
         <div class="package-container">
-            <van-tabs
-                type="line"
-                v-model="active"
-                color="#1890ff"
-                background="#fafafa"
-                swipeable
-                line-width="20%"
-                line-height="4px"
-            >
+            <van-tabs type="line" v-model="active" color="#1890ff" background="#fafafa" swipeable line-width="20%"
+                line-height="4px">
                 <van-tab title="加油包">
                     <div class="refuel-package" v-if="refuelPackageList.length > 0">
-                        <div
-                            class="refuel-item"
-                            v-for="(item, index) in refuelPackageList"
-                            :key="index"
-                        >
+                        <div class="refuel-item" v-for="(item, index) in refuelPackageList" :key="index">
                             <div class="title">
-                                <p>{{item.packagesName}}</p>
+                                <p>{{ item.packagesName }}</p>
                             </div>
                             <div class="bottom">
                                 <span>
-                                    {{item.packagesPrice}}
+                                    {{ item.packagesPrice }}
                                     <span class="price-span">元</span>
                                 </span>
                                 <div class="btn-button" @click="onBuyRefuel(item)">
@@ -51,11 +40,7 @@
                 </van-tab>
                 <van-tab title="基础套餐">
                     <div class="base-package" v-if="basePackageList.length > 0">
-                        <div
-                            class="base-item"
-                            v-for="(item, index) in basePackageList"
-                            :key="index"
-                        >
+                        <div class="base-item" v-for="(item, index) in basePackageList" :key="index">
                             <div class="base-item-content">
                                 <!-- <div class="title">
                                     <p>{{item.packagesName}}</p>
@@ -65,24 +50,20 @@
                                 </div>
                                 <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 class="orange price">{{ item.packagesPrice }}元</span>
                                     </p>
                                 </div>
                                 <div class="radios-con">
                                     <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">
@@ -134,38 +115,38 @@ import AppId from "@/config/appId";
 import { APIPay } from "@/api/pay";
 let wx = require("weixin-js-sdk"); // TODO 再封装，可拦截错误提示等操作
 export default {
-  name:'',
-  data(){
-   return {
-       basePackageList: [], //基础套餐
-       refuelPackageList: [], //加油包
-       outTradeNo: "", //订单号
-        price: "", //价格,
-        isShowNoData: false, //是否显示无套餐内容, 默认false
-        radio: '1', //支付方式单选按钮默认值
-        payProductId: null, //套餐id
-        packageIssue: null, //套餐分期
-        payType: '1', //支付方式 1 微信， 2 支付宝，支付宝又分为花呗和全额支付，全额支付分期数传0 或者1 ，花呗则传 3 6 12
-        active: 0, //tabs默认选择的下标
-   }
-  },
-  methods: {
-    onNavBack() {
-        this.$router.replace({
-            name: "cardInfo",
-            query: { imei: this.$route.query.imei, iccid: this.$route.query.iccid, isShowMenu: true, isHasCode: true}
-        });
-    },
-    //   获取core token
-    getAuth() {
-        let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650";
-        APICore.getAuth({ manufactorId: manufactorId }).then(res => {
-            this.$store.commit("gatewayToken", res.data.data);
-        });
+    name: '',
+    data() {
+        return {
+            basePackageList: [], //基础套餐
+            refuelPackageList: [], //加油包
+            outTradeNo: "", //订单号
+            price: "", //价格,
+            isShowNoData: false, //是否显示无套餐内容, 默认false
+            radio: '1', //支付方式单选按钮默认值
+            payProductId: null, //套餐id
+            packageIssue: null, //套餐分期
+            payType: '1', //支付方式 1 微信， 2 支付宝，支付宝又分为花呗和全额支付，全额支付分期数传0 或者1 ，花呗则传 3 6 12
+            active: 0, //tabs默认选择的下标
+        }
     },
-    // 获取微信授权
-    getWxAutograph(){
-        let that = this;
+    methods: {
+        onNavBack() {
+            this.$router.replace({
+                name: "cardInfo",
+                query: { imei: this.$route.query.imei, iccid: this.$route.query.iccid, isShowMenu: true, isHasCode: true }
+            });
+        },
+        //   获取core token
+        getAuth() {
+            let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650";
+            APICore.getAuth({ manufactorId: manufactorId }).then(res => {
+                this.$store.commit("gatewayToken", res.data.data);
+            });
+        },
+        // 获取微信授权
+        getWxAutograph() {
+            let that = this;
             return new Promise((resolve, reject) => {
                 APIWx.createJSSDK({
                     sUrl: window.location.href.split("#")[0],
@@ -192,10 +173,10 @@ export default {
                         console.log(err);
                     });
             });
-    },
-    // 获取套餐列表数据
-    getDevicePayPackage() {
-        this.$toast.loading({
+        },
+        // 获取套餐列表数据
+        getDevicePayPackage() {
+            this.$toast.loading({
                 message: "加载中",
                 duration: 1500
             });
@@ -211,7 +192,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;
@@ -242,19 +223,32 @@ export default {
                         this.$toast.clear();
                     }, 1500);
                 });
-    },
-    // 购买加油包
-    onBuyRefuel(data){
-        console.log("加油包", data);
-        this.price = data.packagesPrice;
-        this.wxPay(data,1);
-    },
-    // 购买基础套餐
-    onBuyBase(data) {
-        console.log("基础包", data);
-        this.price = data.packagesPrice;
-        let payTypeToPackAgeId = data.payTypeList;
-        if (this.payType == '2') {
+        },
+        // 购买加油包
+        onBuyRefuel(data) {
+            console.log("加油包", data);
+            if (!this.isWeChat) {
+                return this.$dialog.confirm({
+                    message: '请用微信客户端打开此页。',
+                    showCancelButton: false,
+                })
+            }
+            this.price = data.packagesPrice;
+            this.wxPay(data, 1);
+        },
+        // 购买基础套餐
+        onBuyBase(data) {
+            console.log("基础包", data);
+            console.log("isWeChat", this.isWeChat);
+            if (!this.isWeChat) {
+                return this.$dialog.confirm({
+                    message: '请用微信客户端打开此页。',
+                    showCancelButton: false,
+                })
+            }
+            this.price = data.packagesPrice;
+            let payTypeToPackAgeId = data.payTypeList;
+            if (this.payType == '2') {
                 // 全额
                 this.payProductId = payTypeToPackAgeId.filter(item => {
                     return item.payType == '2'
@@ -279,7 +273,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,
@@ -288,56 +282,56 @@ export default {
                     this.wxPay(data);
                 }
             }
-    },
-    // 支付类型切换
-    onRaidoChange(value) {
-        console.log("选择的支付类型是", value);
-        this.payType = value;
-    },
-     // 微信支付
-    wxPay(data, packageType) {
-        let that = this;
-        const orderData = data;
-        console.log("orderData", orderData);
-        let reqBody = {
-            openId: this.$store.getters.openId, //openId
-            imei: that.$route.query.imei, //imei
-            iccid: that.$route.query.iccid,
-            productId: orderData.payTypeList[0].productId, //套餐id
-            packageName:
-            orderData.productModel + "," + orderData.packagesName, //套餐名字
-            packagePayType: '1', //支付类型, 默认微信
-            pkId: data.packagesCardId,
-            packageIssue: orderData.packageIssue, //分期
-            packagePrice: orderData.packagesPrice * 100
-        };
+        },
+        // 支付类型切换
+        onRaidoChange(value) {
+            console.log("选择的支付类型是", value);
+            this.payType = value;
+        },
+        // 微信支付
+        wxPay(data, packageType) {
+            let that = this;
+            const orderData = data;
+            console.log("orderData", orderData);
+            let reqBody = {
+                openId: this.$store.getters.openId, //openId
+                imei: that.$route.query.imei, //imei
+                iccid: that.$route.query.iccid,
+                productId: orderData.payTypeList[0].productId, //套餐id
+                packageName:
+                    orderData.productModel + "," + orderData.packagesName, //套餐名字
+                packagePayType: '1', //支付类型, 默认微信
+                pkId: data.packagesCardId,
+                packageIssue: orderData.packageIssue, //分期
+                packagePrice: orderData.packagesPrice * 100
+            };
             // 1.获取微信预下单Id
-        APICore.payLiveBaseDevice(reqBody)
-            .then(res => {
-                if (res.data.code === 104 || res.data.code === 106) {
-                    this.getAuth();
-                    setTimeout(() => {
-                        this.wxPay(orderData);
-                    }, 1000);
-                } else if ( res.data.code !== 0){
-                    return this.$dialog.confirm({
-                        message: `请反馈给一线人员,\n${res.data.message},或者请您重新进入`,
-                        showCancelButton: false
-                    })
-                }
-                let wxData = res.data.data;
-                let outTradeNo = wxData.out_trade_no;
-                that.outTradeNo = wxData.out_trade_no;
-                //this.checkWxPayResult(outTradeNo);
-                //this.closeTime();
-                // 调起微信支付收银台
-                this.onWxPay(wxData,packageType);
-            })
-            .catch(error => {
-                console.log("error", error);
-            })
-    },
-    onWxPay(data,packageType) {
+            APICore.payLiveBaseDevice(reqBody)
+                .then(res => {
+                    if (res.data.code === 104 || res.data.code === 106) {
+                        this.getAuth();
+                        setTimeout(() => {
+                            this.wxPay(orderData);
+                        }, 1000);
+                    } else if (res.data.code !== 0) {
+                        return this.$dialog.confirm({
+                            message: `请反馈给一线人员,\n${res.data.message},或者请您重新进入`,
+                            showCancelButton: false
+                        })
+                    }
+                    let wxData = res.data.data;
+                    let outTradeNo = wxData.out_trade_no;
+                    that.outTradeNo = wxData.out_trade_no;
+                    //this.checkWxPayResult(outTradeNo);
+                    //this.closeTime();
+                    // 调起微信支付收银台
+                    this.onWxPay(wxData, packageType);
+                })
+                .catch(error => {
+                    console.log("error", error);
+                })
+        },
+        onWxPay(data, packageType) {
             let that = this;
             function onBridgeReady() {
                 WeixinJSBridge.invoke(
@@ -350,13 +344,13 @@ 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，但并不保证它绝对可靠。
-                            if(packageType === 1) {
-                            // 加油包不用跳转，直接提示支付成功
-                             // 2023.06.09 修改充值成功提示如下:
+                            if (packageType === 1) {
+                                // 加油包不用跳转，直接提示支付成功
+                                // 2023.06.09 修改充值成功提示如下:
                                 that.$toast.success({
                                     message: '充值成功，请重启设备后，恢复正常使用。'
                                 });
@@ -375,7 +369,7 @@ export default {
                                 });
                             }
                         } else {
-                            let cancelMessage = packageType === 1 ? '立即订购': '套餐订购'
+                            let cancelMessage = packageType === 1 ? '立即订购' : '套餐订购'
                             that.$dialog.confirm({
                                 message: `请点击“${cancelMessage}”支付`,
                                 showCancelButton: false
@@ -402,8 +396,8 @@ export default {
                 onBridgeReady();
             }
         },
-     // 跳转到支付宝花呗外部链接
-    aliPay(data) {
+        // 跳转到支付宝花呗外部链接
+        aliPay(data) {
             console.log("选择了支付宝::", data);
             this.$toast.loading({
                 message: "加载中"
@@ -462,12 +456,19 @@ export default {
                 .finally(() => {
                     this.$toast.clear();
                 });
+        },
+    },
+    computed: {
+        isWeChat() {
+            const ua = window.navigator.userAgent.toLowerCase();
+            return /micromessenger/.test(ua);
+        }
+
+    },
+    created() {
+        //  套餐列表
+        this.getDevicePayPackage();
     },
-  },
-  created() {
-    //  套餐列表
-    this.getDevicePayPackage();
-  },
 }
 </script>
 <style lang="scss">
@@ -475,21 +476,26 @@ export default {
     .van-tabs {
         min-height: 100vh;
         background: #fafafa;
+
         &.blue {
             background: #1890ff !important;
         }
+
         .van-tabs__wrap {
             height: 50px;
             width: 100%;
+
             .van-tabs__nav {
                 .van-tab {
                     @include center();
                     padding: 0;
+
                     span {
                         color: #333333;
                         font-size: 16px;
                         padding: 4px;
                     }
+
                     &.van-tab--active {
                         span {
                             color: #1890ff;
@@ -507,13 +513,16 @@ export default {
 .package-buy-container {
     height: 100vh;
     overflow: hidden;
+
     .package-container {
         height: calc(100vh - 88px);
         background: #fafafa;
+
         .refuel-package {
             height: calc(100vh - 88px);
             padding: 10px 20px;
             overflow: scroll;
+
             .refuel-item {
                 padding: 10px;
                 margin-bottom: 20px;
@@ -525,41 +534,50 @@ export default {
                 border-left: 3px solid #1890ff;
                 box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
                     rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+
                 p,
                 span {
                     font-size: 16px;
                 }
+
                 .title {
                     text-align: left;
                     padding-top: 10px;
                     font-weight: 500;
                 }
+
                 .tips {
                     margin-top: 10px;
+
                     p {
                         font-size: 14px;
                     }
                 }
+
                 .bottom {
                     padding-top: 20px;
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
+
                     span {
                         font-size: 20px;
                         color: #fca842;
                         font-weight: bold;
+
                         .price-span {
                             margin-left: 5px;
                             font-size: 14px;
                         }
                     }
+
                     .btn-button {
                         height: 35px;
                         width: 100px;
                         @include center();
                         background-color: #fca842;
                         border-radius: 17px;
+
                         p {
                             font-size: 14px;
                             color: #fff;
@@ -568,6 +586,7 @@ export default {
                 }
             }
         }
+
         .base-package {
             height: calc(100vh - 88px);
             position: relative;
@@ -579,39 +598,48 @@ export default {
                     rgba(14, 30, 37, 0.32) 0 2px 16px 0;
                 padding: 15px 10px;
                 background-color: #fff;
+
                 /* border-radius: 5px; */
                 .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;
@@ -627,18 +655,22 @@ export default {
                             }
                         } */
                 }
+
                 .remark {
                     display: flex;
                     justify-content: flex-start;
+
                     p {
                         font-size: 14px;
                         padding: 5px 10px;
                         /* font-weight: bold; */
                     }
                 }
+
                 .package-buy {
                     @include center();
                     padding: 5px 8px;
+
                     .buy-btn {
                         height: 40px;
                         width: 200px;
@@ -648,6 +680,7 @@ export default {
                         align-items: center;
                         background: orange;
                         border-radius: 20px;
+
                         p {
                             font-size: 16px;
                             padding: 0;
@@ -655,12 +688,14 @@ export default {
                         }
                     }
                 }
+
                 .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 {
@@ -668,8 +703,10 @@ export default {
                         width: 20px;
                         margin: 2px;
                     }
+
                     .pay-type {
                         text-align: left;
+
                         p {
                             font-size: 14px;
                             padding: 0 0 10px 0;
@@ -679,10 +716,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;
@@ -690,14 +729,17 @@ export default {
                     }
                 }
             }
+
             .content {
                 font-size: 14px;
             }
         }
+
         .data-null {
             height: calc(100vh - 88px);
             @include center();
             flex-direction: column;
+
             span {
                 font-size: 14px;
             }

src/views/package-home/index.vue

@@ -42,27 +42,27 @@ export default {
         // 4.如果有基础套餐但未充值，跳转套餐充值页面
         getDevicePayPackage() {
             APICore.devicePayPackage(this.params.imei)
-                    .then(res => {
-                        let data = res.data;
-                        if (data.code === 106 || data.code === 104) {
-                            this.getAuth();
-                            setTimeout(() => {
-                                this.getDevicePayPackage();
-                            }, 1500);
-                        } else {
-                            // 筛选是否存在基础套餐, producModelId = 1 是基础套餐， 2 是加油包
-                            this.isHasBasePackage = data.data.packagesList.some(res => {
-                                return res.producModelId === 1;
-                            });
-                        }
-                    }).catch(() => {})
+                .then(res => {
+                    let data = res.data;
+                    if (data.code === 106 || data.code === 104) {
+                        this.getAuth();
+                        setTimeout(() => {
+                            this.getDevicePayPackage();
+                        }, 1500);
+                    } else {
+                        // 筛选是否存在基础套餐, producModelId = 1 是基础套餐， 2 是加油包
+                        this.isHasBasePackage = data.data.packagesList.some(res => {
+                            return res.producModelId === 1;
+                        });
+                    }
+                }).catch(() => { })
         },
         checkImei() {
             let reqBody = {
                 imei: this.params.imei,
                 iccid: this.params.iccid || ''
             };
-            APIWx.CheckImei(reqBody).then(res =>{
+            APIWx.CheckImei(reqBody).then(res => {
                 this.isRecharge = res.data.isRecharge;
                 this.currentIotTitle = res.data.title;
                 this.getWxCode();
@@ -82,19 +82,19 @@ export default {
                 let url = window.location.href.split("?code=")[1];
                 console.log("获取授权code的url", url);
                 this.getWxCode();
-               /*  if (
-                    isNotNull(url) ||
-                    window.location.href.indexOf("code") > -1
-                ) {
-                    let timeStamp = new Date().getTime();
-                    let code = url.split("&")[0];
-                    console.log("code", code);
-                    if (isNotNull(code)) {
-                        this.getWxCode();
-                    }
-                } else {
-                    this.getWxCode();
-                } */
+                /*  if (
+                     isNotNull(url) ||
+                     window.location.href.indexOf("code") > -1
+                 ) {
+                     let timeStamp = new Date().getTime();
+                     let code = url.split("&")[0];
+                     console.log("code", code);
+                     if (isNotNull(code)) {
+                         this.getWxCode();
+                     }
+                 } else {
+                     this.getWxCode();
+                 } */
             } else {
                 this.getWxCode();
                 console.log("当前浏览器内核并非支付宝或者微信");
@@ -107,15 +107,15 @@ export default {
                 this.$store.commit("gatewayToken", res.data.data);
             });
         },
-         // 获取token
+        // 获取token
         getToken() {
             let manufacturerNo = '9f166b07-ff83-4991-84dc-ca6ad4a6b95b';
             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'))
                 }
             })
         },
@@ -123,8 +123,8 @@ export default {
         getOpenId(code) {
             //let code = this.$store.getters.wxAuthCode;
             APIPay.getOpenId(code).then(res => {
-                let data= res.data;
-                if(data.code === 20000) {
+                let data = res.data;
+                if (data.code === 20000) {
                     this.$store.commit("openId", data.data.openId);
                 }
             })
@@ -136,22 +136,22 @@ export default {
             let isWhiteTitle = this.whiteTitleList.includes(this.currentIotTitle) > 0;
             let cardInfoBaseUrl = encodeURIComponent(`${commonUrl}/h5-frontendweb/#/cardInfo?imei=${params.imei}&iccid=${params.iccid}`);
             let toupBaseUrl = encodeURIComponent(`${commonUrl}/h5-frontendweb/#/${params.routerName}?imei=${params.imei}&iccid=${params.iccid}`);
-            if(this.isHasBasePackage) {
+            if (this.isHasBasePackage) {
                 // 有套餐
-                if(this.isRecharge) {
+                if (this.isRecharge) {
                     // 已支付，跳转话费查询页面
                     console.log("有套餐跳转话费查询页面");
                     let wxRedUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${AppId}&redirect_uri=${cardInfoBaseUrl}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
                     window.location.href = wxRedUrl;
                 } else if (!this.isRecharge) {
                     // 未支付， 跳转套餐充值页面
-                     console.log("跳转套餐充值页面");
-                   let wxRedUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${AppId}&redirect_uri=${toupBaseUrl}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
+                    console.log("跳转套餐充值页面");
+                    let wxRedUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${AppId}&redirect_uri=${cardInfoBaseUrl}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
                     window.location.href = wxRedUrl;
                 }
             } else {
                 // 无套餐
-                if(isWhiteTitle) {
+                if (isWhiteTitle) {
                     // 是零川或者小台风，跳转话费查询页面
                     let wxRedUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${AppId}&redirect_uri=${cardInfoBaseUrl}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
                     window.location.href = wxRedUrl;
@@ -180,9 +180,9 @@ export default {
         getParams() {
             let params = this.$route.query;
             if (params) {
-                this.params = {...params};
+                this.params = { ...params };
                 this.$store.commit("appId", AppId);
-                if(params.reqUrl) {
+                if (params.reqUrl) {
                     const reqUrl = encodeURI(params.reqUrl);
                     window.location.href = reqUrl;
                 } else {
@@ -195,5 +195,4 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>