拉取 develop分支代码

.eslintrc.js

@@ -15,9 +15,12 @@ module.exports = {
       // 关闭eslint语法检测
       "no-unused-vars":0,
     },
+    // 添加全局变量过滤
     globals: {
       "AMap": "true",
       "AMapUI": "true",
+      "WeixinJSBridge": "true",
+      "eruda": "true"
     },
     overrides: [
       {

README.md

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-08-17 16:19:13
  * @LastEditors: JinxChen
- * @LastEditTime: 2023-03-23 15:58:54
+ * @LastEditTime: 2023-04-03 14:12:11
  * @FilePath: \TelpoH5FrontendWeb\README.md
  * @description: 项目说明
 -->
@@ -271,3 +271,60 @@ feat
 - packageList，packageBuy
     - 增加 下单接口iccid参数
 
+
+
+## v1.0.32
+`2023.3.24`
+feature
+- alarmDetails
+    - 增加 涉水区域告警页面
+- amap.js
+    - 增加 高德地图js
+
+## v1.0.33
+`2023.3.27`
+feature
+- alarmDetails
+    - 增加 误报功能，设置该设备IMEI与该水域告警poi_id不做任何报警信息处理
+
+
+## v1.0.34
+`2023.3.29`
+update
+- alarmDetails
+    - 修改 标题显示文字
+    - 修改 弹窗显示文字
+
+
+## v1.0.35
+`2023.3.30`
+update
+- alarmDetails
+    - 增加 坐标通过高德逆地理编码解析中文地址
+- packageList
+    - 修改 微信支付的方式，不使用jssdk，使用微信内置WeixinJSBridge对象
+
+- appId
+    - 修改 微信测试环境appId
+
+## v1.0.36
+`2023.3.30`
+update
+- 增加 debug按钮
+
+
+## v1.0.37
+`2023.3.31`
+update
+- alarmDetails
+    - 修改 详情地址转化方式
+    - 增加 进入/离开状态显示
+- packageList
+    - 修改 微信支付方式
+
+
+## v1.0.38
+`2023.4.3`
+update
+- packageHome
+    - 增加 进入首页判断是否存在redUrl的逻辑

src/App.vue

@@ -1,8 +1,8 @@
 <!--
  * @Date: 2022-01-19 10:08:26
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-05-10 18:25:55
- * @FilePath: \AntpayFrontEnd\src\App.vue
+ * @LastEditTime: 2023-03-30 18:29:20
+ * @FilePath: \TelpoH5FrontendWeb\src\App.vue
  * @description:
 -->
 <template>
@@ -25,6 +25,7 @@ export default {
             }
         },
         mounted() {
+            this.debug();
             console.log("当前版本号::", VERSION_MODEL, "当前环境::", process.env.NODE_ENV, this.$title);
 
         },
@@ -35,6 +36,20 @@ export default {
                     this.isRouterAlive = true;
                 });
             },
+            debug() {
+                if (process.env.NODE_ENV !== 'production') {
+                    const script = document.createElement('script');
+                    script.src = "//cdn.jsdelivr.net/npm/eruda";
+                    document.body.appendChild(script);
+                    script.onload = function () {
+                        try {
+                            window.eruda.init();
+                        } catch (e) {
+                            console.log(e);
+                        }
+                    }
+                }
+            }
         }
 }
 </script>

src/api/core.js

@@ -1,7 +1,7 @@
 /*
  * @Date: 2021-12-18 15:49:01
  * @LastEditors: JinxChen
- * @LastEditTime: 2023-02-25 17:04:23
+ * @LastEditTime: 2023-03-27 15:29:01
  * @FilePath: \TelpoH5FrontendWeb\src\api\core.js
  * @description:
  * b端的接口, 每次调用前先获取token
@@ -29,6 +29,7 @@ export const APICore = {
     GpsDeviceFence, //围栏 redis
     cardPackageList, //零川基础套餐列表
     devicePayPackage,
+    drownReportFilterAdd,//添加过滤危险水域区域
 }
 /* const headerAuth = this.$store.getters.gatewayToken; */
 // 获取告警详情
@@ -93,4 +94,11 @@ function devicePayPackage(imei) {
         params: {imei},
     })
 }
+function drownReportFilterAdd(data) {
+    return service({
+        url: `${baseUrl}/core/api/v1/Device/DrownReportFilterAdd`,
+        method: 'post',
+        data,
+    });
+}
 export default APICore;

src/config/amap.js

@@ -0,0 +1,40 @@
+export default function MapLoader(isSyncLoad = false, pluginsArr = []) {
+    // plugin: 字符串数组[ 'AMap.Geocoder', ... ]
+    return new Promise((resolve, reject) => {
+        try {
+            if (window.AMap && (pluginsArr === null || pluginsArr === undefined || pluginsArr.length === 0)) {
+                resolve(window.AMap);
+            } else {
+                var script = document.createElement('script');
+                script.type = 'text/javascript';
+                script.async = !isSyncLoad;
+                script.src = 'https://webapi.amap.com/maps?v=1.4.15&callback=initAMap&key='
+                    + '6e4a6c39ea6d18b8dd3151baa3a7c0d5'
+                    + '&plugin=AMap.BezierCurveEditor'
+                    + (pluginsArr ? ',' + pluginsArr.join(',') : '');
+                script.onerror = reject;
+                document.head.appendChild(script);
+
+                var script1 = document.createElement('script');
+                script1.type = 'text/javascript';
+                script1.async = false;
+                script1.src = 'https://webapi.amap.com/ui/1.0/main.js?v=1.0.11';
+                script1.onerror = reject;
+                if (isSyncLoad) {
+                    document.head.appendChild(script1);
+                }
+
+            }
+            window.initAMap = () => {
+                resolve(window.AMap);
+            }
+            // JSAPI key搭配静态安全密钥以明文设置, 详情见: https://lbs.amap.com/api/jsapi-v2/guide/abc/load
+            window._AMapSecurityConfig = {
+                securityJsCode:'6a421e1233cd12dd4899e373e11bb641',
+            }
+        } catch (e) {
+            console.log(e);
+        }
+
+    })
+}

src/config/appId.js

@@ -6,8 +6,8 @@
  * @description:
  */
 const AppId = process.env.NODE_ENV === 'production' ?
-    'wx23f697736154110b' :
+    'wxd78b83bdb0b4df55' :
     process.env.VUE_APP_BASE_API.indexOf('ai.ssjlai.com') > -1 ?
-        'wx23f697736154110b':
-        /* 'wx785c95a3e7f46f72' */'wx5e26f0813859e5f6'; //wx5e26f0813859e5f6 2022.10.12 更改测试公众号
+        'wxd78b83bdb0b4df55':
+        /* 'wx785c95a3e7f46f72' */'wxd78b83bdb0b4df55'; //wx5e26f0813859e5f6 2022.10.12 更改测试公众号
 export default AppId;

src/config/models.js

@@ -1,11 +1,11 @@
 /*
  * @Date: 2021-11-20 10:26:39
  * @LastEditors: JinxChen
- * @LastEditTime: 2023-03-20 14:05:54
+ * @LastEditTime: 2023-04-03 14:12:32
  * @FilePath: \TelpoH5FrontendWeb\src\config\models.js
  * @description:
  */
-export const VERSION_MODEL = '1.0.31F'; //版本号
+export const VERSION_MODEL = '1.0.38F'; //版本号
 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 14:40:46
+ * @LastEditTime: 2023-03-27 16:04:16
  * @FilePath: \TelpoH5FrontendWeb\src\main.js
  * @description:
  */
@@ -53,6 +53,7 @@ import {
     TabbarItem,
     Tabs,
     Toast,
+    ActionSheet,
 } from 'vant'; //按需加载vant组件
 
 Vue
@@ -94,12 +95,13 @@ Vue
 .use(TabbarItem)
 .use(Tabs)
 .use(Toast)
+.use(ActionSheet)
 
 Vue.config.productionTip = false;
 Vue.config.devtools = true;
 // 全局配置 loading
 Toast.setDefaultOptions('success', {
-    duration: 1500,
+    duration: 2500,
     forbidClick: true,
 });
 Toast.setDefaultOptions('loading', {

src/router/index.js

@@ -1,7 +1,7 @@
 /*
  * @Date: 2023-02-25 16:34:35
  * @LastEditors: JinxChen
- * @LastEditTime: 2023-03-14 09:33:17
+ * @LastEditTime: 2023-03-24 14:40:54
  * @FilePath: \TelpoH5FrontendWeb\src\router\index.js
  * @description:
  */
@@ -30,7 +30,7 @@ const routes = [
     { path: '/activeStatus', name: 'activeStatus', component: resolve => require(['@/views/active-status'], resolve) },
     { path: '/cardActive', name: 'cardActive', component: resolve => require(['@/views/card-active'], resolve) },
 
-
+    { path: '/alarmDetails', name: 'alarmDetails', component: resolve => require(['@/views/alarm/alarm-details'], resolve) },
 ];
 
 const router = new VueRouter({

src/views/alarm/alarm-details.vue

@@ -0,0 +1,425 @@
+<template>
+    <div class="alarm-container" v-show="isPageShow">
+        <van-nav-bar :title="title" :left-arrow="false" :border="true" @click-left="onNavBack"></van-nav-bar>
+        <div id="details_map" class="details_map" style="width: 100%;height: 100vh"></div>
+        <div class="notice">{{ alarm.message + '' }}</div>
+        <div class="refresh" @click="onRefresh">
+            <van-icon name="replay" size="25"/>
+            <span>刷新</span>
+        </div>
+        <div class="bottom">
+            <div class="address">
+                <div class="title">
+                    <p>{{ params.address }}</p>
+                </div>
+                <div class="time">
+                    <span>{{ params.time }}</span>
+                </div>
+            </div>
+            <div class="action">
+                <van-button
+                    v-for="(item, index) in buttonList"
+                    :key="index"
+                    :type="item.type"
+                    :icon="item.icon"
+                    v-show="item.show"
+                    @click="onErrorReport(item.name)"
+                >{{ item.text }}</van-button>
+            </div>
+        </div>
+        <!-- 外部地图app选择弹窗 -->
+        <van-action-sheet
+            class="actionSheet"
+            v-model="actionSheetShow"
+            title="即将打开以下外部APP进行导航"
+            :actions="mapAppList"
+            :closeable="false"
+            cancel-text="取消"
+            @select="onSelect"
+        />
+    </div>
+</template>
+
+<script>
+import MapLoader from "@/config/amap.js";
+import APICore from "@/api/core";
+import { isNotNull } from "@/utils/index";
+export default {
+  name: 'alarm-details',
+  inject: ["reload"],
+  data(){
+   return {
+       alarm: {
+           message: '你的孩子靠近水域危险区',
+           address: '',
+           time: '2023-03-14 14:16:55',
+           glng: '113.175203274874',
+           glat: '23.0261293630648'
+       },
+       currentAddress: {
+           address: '',
+           lng: '',
+           lat: ''
+       },
+       buttonList: [
+        { name: 'goHere', text: '去这里', type: 'primary', icon: 'guide-o', show: true},
+        { name: 'errorReport', text: '误报', type: 'primary', icon: 'warn-o', show: true },
+       ],
+       map: {
+           geocoder: null,
+           instance: null,
+           resizeEnable: true,
+           zoom: 18,
+           centerMarker: null,
+           center: [113.175203274874, 23.0261293630648],
+       },
+       markers: null,
+       actionSheetShow: false,
+       mapAppList: [
+           { name: "高德地图", wakeUpUrl: "https://uri.amap.com/marker?", number: 0 },
+           { name: "腾讯地图", wakeUpUrl: "https://apis.map.qq.com/tools/poimarker?", number: 1 }
+       ],
+       params: {
+           imei: '',
+           poiId: '',
+           title: '',
+           lng: '',
+           lat: '',
+           address: '',
+           status: true,
+           time: ''
+       },
+       isPageShow: null,
+       status: 1
+   }
+  },
+  computed: {
+    title() {
+        return this.status === "1" ? '进入涉水区域警报' : '离开涉水区域警报';
+    }
+  },
+  created() {
+    this.getAuth();
+    this.getParams();
+    //this.initAmap();
+  },
+  methods: {
+    // 获取b端接口的token
+    getAuth() {
+        let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650";
+        APICore.getAuth({ manufactorId: manufactorId }).then(res => {
+            this.$store.commit("gatewayToken", res.data.data);
+        });
+    },
+    // 获取路由参数
+    getParams() {
+        let params = this.$route.query;
+        if (isNotNull(params)) {
+            console.log("params", params);
+            this.params = {...params};
+            this.buttonList[1].show = params.status === "1";
+            this.status = params.status;
+            this.alarm.message = params.status === "1" ? '你的孩子靠近水域危险区': '你的孩子离开水域危险区';
+            this.isPageShow = true;
+            this.initAmap();
+            console.log("this.params", this.params);
+        } else {
+            this.$dialog.confirm({
+                message: '跳转参数错误,请联系管理员',
+                showCancelButton: false
+            })
+            this.isPageShow = false;
+        }
+    },
+    onNavBack() {},
+    // 初始化地图
+    initAmap() {
+        this.$toast.loading('地图加载中');
+        MapLoader(false, [ 'AMap.PolyEditor', 'AMap.MouseTool', 'AMap.Geocoder', 'AMap.Geolocation', 'AMap.ToolBar' ]).then(
+            AMap => {
+                this.map.instance = new AMap.Map("details_map", {
+                    center: [this.params.lng, this.params.lat],
+                    resizeEnable: this.map.resizeEnable,
+                    zoom: this.map.zoom,
+                    zoomEnable: true
+                });
+                // 构建逆地理编码器
+                this.map.geocoder = new AMap.Geocoder({
+                    extensions: "all"
+                });
+                const toolBar = new AMap.ToolBar({ offset: new AMap.Pixel(10, 310), position: 'RB' });
+                this.map.instance.addControl(toolBar);
+                this.initCenterMarker();
+                this.$toast.success('地图加载完成');
+                this.geocoder([this.params.lng, this.params.lat]);
+            },
+            err => {
+                this.$toast.clear();
+                console.log("加载地图失败:::", err);
+            }
+        );
+        setTimeout(() => {
+            this.$toast.clear();
+        }, 5000)
+    },
+    // 初始化marker
+    initCenterMarker() {
+        const content = '<div class="centerMarker"><i class="cir"></i></div>';
+        let position = this.map.instance.getCenter();
+        console.log("position", position);
+        position = [ position.lng, position.lat ];
+        if(this.map.centerMarker) {
+            // 如果 存在marker，则清掉前一个marker，防止出现多个marker的情况
+            this.map.instance.remove(this.map.centerMarker);
+        }
+        // 创建一个 Icon
+        let markerIcon = new AMap.Icon({
+            size: new AMap.Size(25, 34),
+            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
+            imageSize: new AMap.Size(135, 40),
+            imageOffset: new AMap.Pixel(-95, -3)
+        });
+        this.map.centerMarker = new AMap.Marker({
+            position: position,
+            icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
+            offset: new AMap.Pixel(-13, -30)
+        });
+        this.map.instance.add(this.map.centerMarker);
+    },
+    // 逆地理编码，通过坐标获取详细中文地址
+    geocoder(lngLat) {
+        this.map.geocoder.getAddress(lngLat, (status, result) => {
+            if (status == "complete" && result.info == "OK") {
+                this.currentAddress.address = result.regeocode.formattedAddress;
+                this.alarm.address = result.regeocode.formattedAddress;
+                console.log("使用高德逆地理解析得到的地址", this.currentAddress.address);
+            }
+        });
+    },
+    // 调用高德定位api获取当前位置
+    createGeolocation() {
+        this.map.geolocation = new AMap.Geolocation({
+            nableHighAccuracy: true, //是否使用高精度定位，默认:true
+            timeout: 10000,           //超过10秒后停止定位，默认：5s
+            zoomToAccuracy: false,     //定位成功后是否自动调整地图视野到定位点
+            buttonPosition:'LT',      //定位按钮的停靠位置
+            showButton: process.env.NODE_ENV !== 'production',
+            buttonOffset: new AMap.Pixel(20, 400), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
+            showMarker: false,        // 定位成功后是否显示marker
+            showCircle: false,        // 定位成功并且有精度信息时，是否用一个圆圈circle表示精度范围，默认值：true
+        });
+        this.map.instance.addControl(this.map.geolocation);
+        const _this = this;
+        const localeLoading = this.$toast.loading('获取定位中...');
+        this.map.geolocation.getCurrentPosition(function (status, result) {
+            try {
+                if(status == 'complete') {
+                    console.log('定位完成:::', result);
+                    const position = [ result.position.lng, result.position.lat ];
+                    _this.geocoder(position);
+                } else {
+                    console.error('用户未授权定位:::');
+                    console.error('status:::', status);
+                    console.error('result:::', result);
+                    _this.$notify({
+                        type: 'warning',
+                        message: '您未打开定位服务，前往设置可打开'
+                    });
+                }
+            } catch (e) {
+                console.log(e);
+            } finally {
+                localeLoading.clear();
+            }
+        })
+    },
+    // 误报
+    onErrorReport(name) {
+        if(name === 'goHere') {
+            // 根据选择的地图跳转不同地图app的url
+            this.actionSheetShow = true;
+        } else {
+            this.$dialog({
+                title: '',
+                message: '点击确认后，进入这个区域将永不告警',
+                showCancelButton: true,
+                closeOnClickOverlay: true,
+            }).then(() => {
+                // 调取接口设置该设备IMEI与该水域告警poi_id不做任何报警信息处理
+                this.drownReportFilterAdd();
+            }).catch(() => {
+                console.log("取消");
+            })
+        }
+    },
+    // 误报接口
+    drownReportFilterAdd() {
+        this.$toast.loading('设置中');
+        let reqBody = {
+            ...this.params
+        };
+        reqBody['status'] = true;
+        delete reqBody.message;
+        delete reqBody.time;
+        console.log("请求的参数", reqBody);
+        APICore.drownReportFilterAdd(reqBody).then(res => {
+            console.log("res", res);
+            let data = res.data;
+            if(data.code === 0) {
+                this.$toast.success('设置成功')
+            };
+        }).catch(error => {
+            this.$dialog.confirm({
+                message: `${error.message}`
+            });
+        }).finally(() => {
+            setTimeout(() => {
+                this.$toast.clear();
+            },1500)
+        })
+    },
+    // 选择打开外部地图app
+    onSelect(item) {
+        if(item.number === 0) {
+            // 高德
+            this.wakeUpGaodeMap(item.wakeUpUrl);
+        } else if (item.number === 1) {
+            this.wakeUpTencentMap(item.wakeUpUrl);
+        }
+    },
+    // 唤醒高德地图
+    wakeUpGaodeMap(wakeUpUrl) {
+        const position = this.params.lng + ',' +this.params.lat;
+        const name = this.params.address;
+        window.location.href = `${wakeUpUrl}position=${position}&name=${name}&callnative=1`;
+    },
+    // 唤醒 腾讯地图
+    wakeUpTencentMap(wakeUpUrl) {
+        const position = this.params.lat + ',' + this.params.lng ;
+        const address = this.params.address;
+        const key = 'UHFBZ-I5ECQ-GSA5B-GW3UW-V2NL5-A3FNY';
+        const myAppName = 'ssjlqqmap';
+        window.location.href = `${wakeUpUrl}type=0&marker=coord:${position};title:${address};addr:${address}&key=${key}&referer=${myAppName}`;
+    },
+    // 刷新
+    onRefresh() {
+        this.reload();
+    }
+  }
+}
+</script>
+<style lang="scss">
+    .alarm-container {
+        .details_map {
+            $width: 50PX;
+            $cirWidth: 15PX;
+            .centerMarker {
+                position: relative;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                z-index: 999;
+            }
+
+            .centerMarker i.cir {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                width: $width;
+                height: $width;
+                background: rgba(255, 178, 128, 0.4);
+                border-radius: 50%;
+            }
+            .centerMarker i.cir:after {
+                content: " ";
+                width: $cirWidth;
+                height: $cirWidth;
+                background: #ff9625;
+                border: 2PX solid #fff;
+                border-radius: 50%;
+            }
+        }
+    }
+</style>
+<style scoped lang="scss">
+.alarm-container {
+    position: relative;
+    height: 100vh;
+    width: 100%;
+    .van-nav-bar {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+    }
+    .notice {
+        position: absolute;
+        top: 40px;
+        height: 40px;
+        width: 100%;
+        background-color: #ee0a24;
+        color: #fff;
+        font-size: 14px;
+        @include center();
+    }
+    .refresh {
+        position: absolute;
+        top: 100px;
+        right: 20px;
+        height: 50px;
+        width: 50px;
+        background-color: #fff;
+        box-shadow: 0 0 5px 1px rgba(185, 185, 185, 0.4);
+        border-radius: 5px;
+        @include center();
+        flex-direction: column;
+        span {
+            font-size: 14px;
+        }
+    }
+    .bottom {
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background-color: $background;
+        z-index: 999;
+        padding-bottom: constant(safe-area-inset-bottom); //* 兼容 iOS<11.2 */
+        padding-bottom: env(safe-area-inset-bottom); ///* 兼容iOS>= 11.2 */
+        .address {
+            padding: 10px;
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            flex-direction: column;
+            font-size: 14px;
+            margin: 10px 10px 0 10px;
+            .title {
+                width: 100%;
+                text-align: left;
+                font-weight: bold;
+            }
+            .time {
+                width: 100%;
+                background-color: #fff;
+                padding: 5px 0;
+                margin: 5px 0;
+                font-weight: 400;
+                text-align: left;
+                border-radius: 5px;
+                span {
+                    margin-left: 5px;
+                }
+            }
+        }
+        .action {
+            display: flex;
+            justify-content: space-around;
+            padding-bottom: 15px;
+            .van-button {
+                width: 120px;
+            }
+        }
+    }
+}
+</style>

src/views/package-home/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2023-02-24 14:18:25
  * @LastEditors: JinxChen
- * @LastEditTime: 2023-03-03 17:05:44
+ * @LastEditTime: 2023-04-03 14:12:51
  * @FilePath: \TelpoH5FrontendWeb\src\views\package-home\index.vue
  * @description:
 -->
@@ -27,11 +27,8 @@ export default {
     created() {
         this.getToken();
         this.getAuth();
-        this.getParams();
         this.checkImei();
-    },
-    mounted() {
-
+        this.getParams();
     },
     methods: {
         checkImei() {
@@ -40,13 +37,10 @@ export default {
                 iccid: this.params.iccid || ''
             };
             APIWx.CheckImei(reqBody).then(res =>{
-                console.log("checkImei", res);
                 let data = res.data;
                 if(data) {
                     this.isRecharge = data.isRecharge;
-                    console.log("是否已经支付", this.isRecharge);
                 };
-                this.checkBrowser();
             }).catch(e => {
                 console.log("e", e.message);
             })
@@ -141,6 +135,14 @@ export default {
                 console.log("params", params);
                 this.params = {...params};
                 this.$store.commit("appId", params.appId);
+                if(params.reqUrl) {
+                    const reqUrl = encodeURI(params.reqUrl);
+                    console.log("reqUrl", params.reqUrl, reqUrl);
+                    window.location.href = reqUrl;
+                } else {
+                    console.log("不存在redUrl");
+                    this.checkBrowser();
+                }
                 console.log("this.params", this.params);
             }
         },

src/views/package-list/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-03-29 16:57:58
  * @LastEditors: JinxChen
- * @LastEditTime: 2023-03-23 15:59:10
+ * @LastEditTime: 2023-04-03 14:13:02
  * @FilePath: \TelpoH5FrontendWeb\src\views\package-list\index.vue
  * @description: TODO 小台风充值h5
 -->
@@ -364,7 +364,7 @@ export default {
                             issue: data.packageIssue
                         }
                     }); */
-                    wx.chooseWXPay({
+                    /* wx.chooseWXPay({
                         timestamp: wxData.timeStamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
                         nonceStr: wxData.nonceStr, // 支付签名随机串，不长于 32 位
                         package: wxData.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
@@ -403,7 +403,8 @@ export default {
                             });
                             console.log("用户取消了支付::", err);
                         }
-                    });
+                    }); */
+                    this.onWxPay(wxData);
                 })
                 .catch(error => {
                     console.log("error", error);
@@ -412,6 +413,62 @@ export default {
                     this.$toast.clear();
                 });
         },
+        onWxPay(data) {
+            let that = this;
+            function onBridgeReady() {
+                WeixinJSBridge.invoke(
+                    "getBrandWCPayRequest",
+                    {
+                        appId: AppId, //公众号ID，由商户传入
+                        timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
+                        nonceStr: data.nonceStr, //随机串
+                        package: data.package,
+                        signType: data.signType, //微信签名方式：
+                        paySign: data.paySign //微信签名
+                    },
+                    function(res) {
+                        if (res.err_msg == "get_brand_wcpay_request:ok") {
+                            // 使用以上方式判断前端返回,微信团队郑重提示：
+                            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
+                            that.$router.replace({
+                                name: "payResult",
+                                query: {
+                                    outTradeNo: that.outTradeNo,
+                                    price: that.price,
+                                    rechargeUrl: data.rechargeUrl,
+                                    iccid: that.params.iccid,
+                                    isAdmin: that.$route.query.isAdmin || false,
+                                    serialNo: that.params.imei,
+                                    issue: that.packageIssue
+                                }
+                            });
+                        } else {
+                            that.$dialog.confirm({
+                                message: "您取消了支付",
+                                showCancelButton: false
+                            });
+                        }
+                    }
+                );
+            }
+            if (typeof WeixinJSBridge == "undefined") {
+                if (document.addEventListener) {
+                    document.addEventListener(
+                        "WeixinJSBridgeReady",
+                        onBridgeReady,
+                        false
+                    );
+                } else if (document.attachEvent) {
+                    document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
+                    document.attachEvent(
+                        "onWeixinJSBridgeReady",
+                        onBridgeReady
+                    );
+                }
+            } else {
+                onBridgeReady();
+            }
+        },
         // 跳转到支付宝花呗外部链接
         aliPay(data) {
             console.log("选择了支付宝::", data);