update

- 增加 激活成功显示页面

README.md

@@ -207,4 +207,10 @@ update
 update
 - 修复 查询支付结果异常的问题
 - 增加 激活成功返回校园号首页
-- 取消 从接口获取套餐数据
+- 取消 从接口获取套餐数据
+
+
+## v1.0.23
+`2023.2.26`
+update
+- 增加 激活成功显示页面

package-lock.json

@@ -11,7 +11,9 @@
         "@vant/area-data": "^1.2.2",
         "amfe-flexible": "^2.2.1",
         "axios": "^0.26.0",
+        "clipboard": "^2.0.11",
         "core-js": "^3.6.5",
+        "dayjs": "^1.11.7",
         "html2canvas": "^1.4.1",
         "nprogress": "^0.2.0",
         "rxjs": "^7.8.0",
@@ -5391,6 +5393,16 @@
         "node": ">= 10"
       }
     },
+    "node_modules/clipboard": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+      "dependencies": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "node_modules/clipboardy": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz",
@@ -6556,6 +6568,11 @@
       "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
       "dev": true
     },
+    "node_modules/dayjs": {
+      "version": "1.11.7",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -6884,6 +6901,11 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "node_modules/depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -8838,6 +8860,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+      "dependencies": {
+        "delegate": "^3.1.2"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.9",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz",
@@ -16159,6 +16189,11 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -17873,6 +17908,11 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
+    "node_modules/tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "node_modules/tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -24225,6 +24265,16 @@
       "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "clipboardy": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz",
@@ -25169,6 +25219,11 @@
       "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
       "dev": true
     },
+    "dayjs": {
+      "version": "1.11.7",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -25418,6 +25473,11 @@
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
       "dev": true
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -26966,6 +27026,14 @@
         "slash": "^2.0.0"
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.9",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz",
@@ -32814,6 +32882,11 @@
         "ajv-keywords": "^3.5.2"
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -34250,6 +34323,11 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",

package.json

@@ -12,10 +12,11 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "amfe-flexible": "^2.2.1",
     "@vant/area-data": "^1.2.2",
+    "amfe-flexible": "^2.2.1",
     "axios": "^0.26.0",
     "core-js": "^3.6.5",
+    "dayjs": "^1.11.7",
     "html2canvas": "^1.4.1",
     "nprogress": "^0.2.0",
     "rxjs": "^7.8.0",
@@ -23,7 +24,8 @@
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0",
-    "weixin-js-sdk": "^1.6.0"
+    "weixin-js-sdk": "^1.6.0",
+    "clipboard": "^2.0.11"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.0",
@@ -34,16 +36,16 @@
     "@vue/test-utils": "^1.0.3",
     "babel-eslint": "^10.1.0",
     "babel-plugin-import": "^1.13.3",
+    "compression-webpack-plugin": "^5.0.0",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^6.2.2",
     "lint-staged": "^9.5.0",
+    "postcss-pxtorem": "^5.1.1",
     "prettier": "^2.2.1",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
-    "vue-template-compiler": "^2.6.11",
-    "postcss-pxtorem": "^5.1.1",
-    "compression-webpack-plugin": "^5.0.0"
+    "vue-template-compiler": "^2.6.11"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"

src/api/wx.js

@@ -13,6 +13,8 @@ const APIWx = {
     checkIsNewCustomer, //获取微信用户是否首次关注,即是否是新用户
     ocr, //ocr识别
     Effective, //激活接口
+    GetCardInfo,
+    LckjGetOrderPackageShow
 }
 export default APIWx;
 function createJSSDK({ userId, sUrl, appId }) {
@@ -46,4 +48,20 @@ function Effective(params) {
         method: 'post',
         data: params,
     });
+}
+//获取物联网卡信息
+function GetCardInfo(params) {
+    return request({
+        url: '/api/Command/GetCardInfo',
+        method: 'post',
+        data: params,
+    });
+}
+// 随手精灵(查询零川物联卡加油包已订购套餐)
+function LckjGetOrderPackageShow({ iccid, imei }){
+    return request({
+        url: '/api/IOTCard/LckjGetOrderPackageShow',
+        method: 'get',
+        params: { iccid, imei}
+    })
 }

src/config/models.js

@@ -1,11 +1,11 @@
 /*
  * @Date: 2021-11-20 10:26:39
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-07-21 16:41:11
- * @FilePath: \AntpayFrontEnd\src\config\models.js
+ * @LastEditTime: 2023-02-26 16:07:34
+ * @FilePath: \TelpoH5FrontendWeb\src\config\models.js
  * @description:
  */
-export const VERSION_MODEL = '1.0.22F'; //版本号
+export const VERSION_MODEL = '1.0.23F'; //版本号
 export const IMAGE_URL = {
     production: 'http://zfb.ssjlai.com/web/',
     test: 'http://zfb.ssjlai.com/web/',

src/main.js

@@ -1,7 +1,7 @@
 /*
  * @Date: 2022-01-19 10:08:26
  * @LastEditors: JinxChen
- * @LastEditTime: 2023-02-26 10:11:02
+ * @LastEditTime: 2023-02-26 14:40:46
  * @FilePath: \TelpoH5FrontendWeb\src\main.js
  * @description:
  */
@@ -11,6 +11,7 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import '@/assets/css/reset.scss';
+import dayjs from 'dayjs';
 // ui库按需引入
 import 'vant/lib/index.css';
 import {
@@ -110,6 +111,7 @@ Dialog.setDefaultOptions({
     showCancelButton: false,
 });
 Vue.config.productionTip = false;
+Vue.prototype.$dayjs = dayjs;
 Vue.prototype.$bus =  new Vue();
 new Vue({
   router,

src/router/index.js

@@ -1,3 +1,10 @@
+/*
+ * @Date: 2023-02-25 16:34:35
+ * @LastEditors: JinxChen
+ * @LastEditTime: 2023-02-26 15:30:31
+ * @FilePath: \TelpoH5FrontendWeb\src\router\index.js
+ * @description:
+ */
 /*
  * @Date: 2022-01-19 10:08:26
  * @LastEditors: JinxChen
@@ -17,6 +24,10 @@ const routes = [
     { path: '/packageHome', name: 'packageHome', component: resolve => require(['@/views/package-home'], resolve) },
     { path: '/packageList', name: 'packageList', component: resolve => require(['@/views/package-list'], resolve) },
     { path: '/payResult', name: 'payResult', component: resolve => require(['@/views/pay-result'], resolve) },
+    { path: '/cardInfo', name: 'cardInfo', component: resolve => require(['@/views/card-info'], resolve) },
+    { path: '/buyRecord', name: 'buyRecord', component: resolve => require(['@/views/buy-record'], resolve) },
+    { path: '/activeStatus', name: 'activeStatus', component: resolve => require(['@/views/active-status'], resolve) },
+
 
 ];
 

src/views/active-status/index.vue

@@ -0,0 +1,132 @@
+<template>
+    <div class="active-container" v-show="isPageShow">
+        <div class="header">
+            <van-icon name="passed" size="80" color="green" v-if="isActive"/>
+            <van-icon name="warning-o" size="80" color="red" v-else/>
+        </div>
+        <div class="main">
+            <div class="text success" v-if="isActive">
+                <p>激活成功，请重启设备，看到连接平台图标后，则可正常使用。</p>
+            </div>
+            <div class="text fail" v-else>
+                <p>电话卡激活失败！请进行实名认证与绑定SIM卡。如您已实名认证，请5分钟后，再进行设备绑定。</p>
+            </div>
+        </div>
+        <van-button type="primary" size="large" @click="onBackHome">返回首页</van-button>
+    </div>
+</template>
+
+<script>
+import { isNotNull} from "@/utils/index";
+import APIWx from "@/api/wx";
+export default {
+  name:'',
+  data(){
+   return {
+       isPageShow: false,
+       isActive: null,
+   }
+  },
+  created() {
+    this.effective();
+  },
+  methods: {
+      // 激活接口
+        effective() {
+            this.$toast.loading('激活中,请稍候...');
+            let reqBody = {
+                imei: this.$route.query.serialNo,
+                iccid: this.$route.query.iccid || '',
+                issue: Number(this.$route.query.issue) || 0
+            };
+            APIWx.Effective(reqBody)
+                .then(res => {
+                    console.log("res", res);
+                    let data = res.data;
+                    console.log("data", data);
+                    this.$toast.clear();
+                    if(data.stateCode !== 1) {
+                        /* this.$dialog.confirm({
+                            title: '温馨提示',
+                            message: `${data.message}`,
+                            showCancelButton: false
+                        }) */
+                        this.isPageShow = true;
+                        this.isActive = false;
+                    } else if(data.stateCode === 0 && data.message !== null) {
+                         /* this.$dialog.confirm({
+                            title: '温馨提示',
+                            message: `电话卡激活失败！请进行实名认证与绑定SIM卡。如您已实名认证，请5分钟后，再进行设备绑定。`,
+                            showCancelButton: false
+                        }) */
+                        this.isPageShow = true;
+                        this.isActive = false;
+                        } else if (data.stateCode === 1 && data.message !== 'ok') {
+                            /* this.$dialog.confirm({
+                                title: "SIM卡激活成功",
+                                message: '卡激活成功，5分钟后则可正常使用。',
+                                showCancelButton: false,
+                                confirmButtonText: '返回首页'}).then(() => {
+                                    document.location.replace(" https://xrpt.jiankangtongxue.cn/WCUParentWebUI.WX/Home/")
+                                }); */
+                                this.isPageShow = true;
+                                this.isActive = true;
+                        } else if (data.stateCode === 1 && data.message === 'ok') {
+                            /* this.$dialog.confirm({
+                                title: "SIM卡激活成功",
+                                message: '卡激活成功，5分钟后则可正常使用。',
+                                showCancelButton: false,
+                                confirmButtonText: '返回首页'
+                                }).then(() => {
+                                    document.location.replace(" https://xrpt.jiankangtongxue.cn/WCUParentWebUI.WX/Home/")
+                                }); */
+                                this.isPageShow = true;
+                                this.isActive = true;
+                    }
+                })
+                .catch(error => {
+                    console.log("出错了:;", error);
+                    this.$dialog.confirm({
+                        title: '温馨提示',
+                        message: `${error.message}`,
+                        showCancelButton: false
+                    })
+                }).finally(() => {
+                    this.$toast.clear();
+                })
+        },
+        onBackHome() {
+            document.location.replace(" https://xrpt.jiankangtongxue.cn/WCUParentWebUI.WX/Home/")
+        }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+    .active-container {
+        height: 100vh;
+        padding: 40px 60px;
+        .header {
+            padding: 10px 0;
+            @include center();
+        }
+        .main {
+            width: 100%;
+            padding: 10px 0;
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            flex-direction: column;
+            .text, p {
+                width: 100%;
+                font-size: 16px;
+                text-align: left;
+                letter-spacing: 1px;
+                font-weight: 500;
+            }
+        }
+        .van-button {
+            margin-top: 20px;
+        }
+    }
+</style>

src/views/buy-record/index.vue

@@ -0,0 +1,195 @@
+<!--
+ * @Date: 2022-11-21 11:04:12
+ * @LastEditors: JinxChen
+ * @LastEditTime: 2023-02-26 15:02:53
+ * @FilePath: \TelpoH5FrontendWeb\src\views\buy-record\index.vue
+ * @description:
+-->
+<template>
+    <div class="buy-record">
+        <van-nav-bar title="订购记录" left-arrow :border="true" @click-left="onNavBack"></van-nav-bar>
+        <div class="record-container" v-if="recordList.length > 0">
+            <div class="record-list" v-for="(item, index) in recordList" :key="index">
+                <div class="title">
+                    <div class="title-left"><p class="order">充值套餐</p></div>
+                    <div class="title-right" :data-clipboard-text="item.packageOrder" @click="onCopy('.title-right')">
+                        <p>订单号<van-icon class="right-icon" name="description"/></p>
+                    </div>
+                </div>
+                <div class="name">
+                    <p>{{item.packageName}}</p>
+                </div>
+                <div class="bottom">
+                    <div class="btn-left"><span>{{new Date(item.orderTime).Format("yyyy-MM-dd hh:mm")}}</span></div>
+                    <div class="btn-right"><span>{{item.packagePrice}}</span><span class="btn-price">元</span></div>
+                </div>
+            </div>
+        </div>
+        <div class="data-null" v-else>
+            <img src="@/assets/img/news-noData.png" alt />
+            <span>暂无购买记录</span>
+        </div>
+    </div>
+</template>
+
+<script>
+import Clipboard from 'clipboard';
+import APIWx from "@/api/wx";
+export default {
+  name:'',
+  data(){
+   return {
+       recordList: [
+           /* {
+               title: '充值套餐',
+               orderNumber: '20221122112424',
+               name: '50分钟语音月清资源包',
+               time: '2022-11-22 11:24:23',
+               price: '6.5'
+           },
+           {
+               title: '充值套餐',
+               orderNumber: '777777777',
+               name: '50分钟语音月清资源包',
+               time: '2022-11-22 11:24:23',
+               price: '6.5'
+           },
+           {
+               title: '充值套餐',
+               orderNumber: '555555',
+               name: '50分钟语音月清资源包',
+               time: '2022-11-22 11:24:23',
+               price: '6.5'
+           }, */
+       ]
+   }
+  },
+  created() {
+    this.getLckjGetOrderPackageShow();
+  },
+  methods: {
+    getLckjGetOrderPackageShow() {
+        this.$toast.loading({
+            message: '数据加载中...'
+        })
+        let reqParams = {
+            imei: this.$route.query.imei,
+            iccid: this.$route.query.iccid
+        }
+        APIWx.LckjGetOrderPackageShow(reqParams).then(res => {
+            let data = res.data;
+            if(data.stateCode === 1) {
+                this.recordList = data.data;
+                this.$toast.success({
+                    message: "数据加载成功",
+                    duration: 1500
+                });
+            }
+            console.log("res", res);
+        }).catch(error => {
+            console.log("error");
+        }).finally(() => {
+            this.$toast.clear();
+        })
+    },
+    onNavBack() {
+        /* this.$router.push({
+            name: "check",
+            query: { serialNo: this.$route.query.serialNo, iccid: this.$route.query.iccid, isShowMenu: true}
+        }); */
+    },
+    // 复制订单号
+    onCopy(type) {
+        const clipboard = new Clipboard(type);
+        clipboard.on('success', e => {
+            this.$toast.success({
+                message: '已复制到粘贴板'
+            });
+            clipboard.destroy();
+        })
+    }
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+    .buy-record {
+        height: 100vh;
+        .record-container {
+            position: relative;
+            height: calc(100vh - 88px);
+            padding: 15px;
+             overflow: scroll;
+            .record-list {
+                background-color: #fff;
+                padding: 15px;
+                margin-bottom: 20px;
+                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 {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    p {
+                        font-size: 16px;
+                    }
+                    .title-right {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        p {
+                            font-size: 16px;
+                            color: $blue;
+                            @include center();
+                            .right-icon {
+                                height: 20px !important;
+                                width: 20px !important;
+                                display: flex;
+                                justify-content: flex-end;
+                                align-items: center;
+                                color: #1890ff !important;
+                            }
+                        }
+                    }
+                }
+                .name {
+                    margin-top: 20px;
+                }
+                .bottom {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    .btn-left {
+                        span {
+                            color: #999;
+                        }
+                    }
+                    .btn-right {
+                        span {
+                            font-size: 20px;
+                            color: #fca842;
+                        }
+                        .btn-price {
+                            font-size: 16px
+                        }
+                    }
+                }
+            }
+        }
+        .data-null {
+            height: calc(100vh - 88px);
+            @include center();
+            flex-direction: column;
+            img {
+                height: 200px;
+                width: 300px;
+            }
+            span {
+                font-size: 16px;
+            }
+        }
+    }
+</style>

src/views/card-info/index.vue

@@ -0,0 +1,316 @@
+<!--
+ * @Date: 2022-04-15 10:22:36
+ * @LastEditors: JinxChen
+ * @LastEditTime: 2023-02-26 15:05:41
+ * @FilePath: \TelpoH5FrontendWeb\src\views\card-info\index.vue
+ * @description:
+-->
+<template>
+    <div class="card-info-container">
+        <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>
+                    <div class="right-message">
+                        <p>{{ setMeal.msisdn }}</p>
+                    </div>
+                </div>
+                <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>
+            </div>
+            <!-- 套餐详情 -->
+            <div class="card-details">
+                <div class="set-meal">
+                    <p class="font-orange">{{ setMeal.expireTime || '--' }}</p>
+                    <p>套餐到期时间</p>
+                </div>
+                <div class="set-meal">
+                    <p class="font-orange">{{ setMeal.residueVoiceData || '--' }}</p>
+                    <p>剩余语音(分钟)</p>
+                </div>
+                <div class="set-meal" v-show="false">
+                    <p class="font-orange">{{ setMeal || '--' }}</p>
+                    <p>套餐流量(M)</p>
+                </div>
+                <div class="set-meal">
+                    <p class="font-orange">{{ setMeal.residueFlow || '--' }}</p>
+                    <p>剩余流量(M)</p>
+                </div>
+            </div>
+            <!-- 套餐操作 -->
+            <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=""/>
+                    <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=""/>
+                    <p>订购记录</p>
+                </div>
+            </div>
+            <div class="tips-container">
+                <p>注：</p>
+                <p>通话结束后，剩余语音时长需1小时后才更新。</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import APIWx from "@/api/wx";
+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,
+   }
+  },
+  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.getCardInfo();
+  },
+  methods: {
+    //获取小台风物联网卡信息
+    getCardInfo() {
+          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 = 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
+                    });
+                }
+            })
+            .catch(error => {
+                console.log("接口报错了", error);
+            }).finally(() => {
+                this.$toast.clear();
+            })
+    },
+    //   返回
+    onNavBack() {
+        /* this.$router.push({ name: 'device'}); */
+    },
+    //   onRefresh 刷新
+    onRefresh() {
+        this.reload();
+    },
+    // 购买套餐
+    onMealBuy() {
+        this.$router.push({
+            name: 'packageList',
+            query: { imei: this.$route.query.imei, iccid: this.$route.query.iccid, isShowMenu: this.isShowMenu}
+        })
+    },
+    // 订购记录
+    onRecordCheck () {
+        this.$router.push({
+            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;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            flex-direction: column;
+            .header {
+                height: 200px;
+                width: 100%;
+                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 {
+                    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;
+                        }
+                    }
+                }
+                .action {
+                    height: 35px;
+                    text-align: center;
+                    padding-left: 10px;
+                    width: 100%;
+                    display: flex;
+                    justify-content: flex-start;
+                    align-items: center;
+                    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 {
+                            color: #fff;
+                        }
+                    }
+                }
+            }
+            .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: center;
+                    align-items: center;
+                    flex-direction: column;
+                    p {
+                        font-size: 16px;
+                        padding: 5px 0;
+                    }
+                    .font-orange {
+                        color: orange;
+                    }
+                }
+                .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: center;
+                    align-items: center;
+                    flex-direction: column;
+                    padding-left: 10px;
+                    img {
+                        height: 45px;
+                        width: 40px
+                    }
+                    p {
+                        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-list/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-03-29 16:57:58
  * @LastEditors: JinxChen
- * @LastEditTime: 2023-02-26 10:37:08
+ * @LastEditTime: 2023-02-26 15:57:18
  * @FilePath: \TelpoH5FrontendWeb\src\views\package-list\index.vue
  * @description: TODO 小台风充值h5
 -->
@@ -149,6 +149,7 @@ export default {
         }
     },
     created() {
+        this.getAuth();
         this.getParams();
         this.getWxAutograph();
         /* this.getLiveBasePackage(); */

src/views/pay-result/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2023-02-24 16:47:33
  * @LastEditors: JinxChen
- * @LastEditTime: 2023-02-26 10:37:34
+ * @LastEditTime: 2023-02-26 16:03:53
  * @FilePath: \TelpoH5FrontendWeb\src\views\pay-result\index.vue
  * @description:
 -->
@@ -44,6 +44,9 @@
                 <div class="back-btn" @click="onNext" v-show="isPayStatus">
                     <p>激活电话卡</p>
                 </div>
+                <div class="back-btn" @click="onBackHome" v-show="!isPayStatus">
+                    <p>返回首页</p>
+                </div>
             </div>
         </div>
         <!-- <div class="flush" v-show="isIos">
@@ -103,7 +106,15 @@ export default {
         onNext() {
             console.log("激活", );
             //this.$toast.loading("激活中");
-            this.effective();
+            /* this.effective(); */
+            this.$router.replace({
+                name: 'activeStatus',
+                query: {
+                    serialNo: this.$route.query.serialNo,
+                    iccid: this.$route.query.iccid,
+                    issue: Number(this.$route.query.issue) || 0
+                }
+            })
         },
         // 激活接口
         effective() {
@@ -288,6 +299,9 @@ export default {
                     this.pageShow = true;
                 }
             }, 31000);
+        },
+        onBackHome() {
+            document.location.replace(" https://xrpt.jiankangtongxue.cn/WCUParentWebUI.WX/Home/")
         }
     }
 };