chenJinxu
/
TelpoH5FrontendWeb
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

feature 

- 增加 已购买未激活容错页面
feat
JinxChen 1年前
父节点
a70e0c7cbd
当前提交
8977b3675b
共有 9 个文件被更改，包括 253 次插入 和 163 次删除
分列视图
Diff 选项
显示统计 下载 Patch 文件 下载 Diff 文件
  1. +7
    -1
      README.md
  2. +10
    -1
      src/api/wx.js
  3. +1
    -1
      src/config/models.js
  4. +1
    -0
      src/router/index.js
  5. +3
    -3
      src/views/active-status/index.vue
  6. +160
    -0
      src/views/card-active/index.vue
  7. +33
    -21
      src/views/package-home/index.vue
  8. +21
    -119
      src/views/package-list/index.vue
  9. +17
    -17
      src/views/pay-result/index.vue

+ 7
- 1
README.md 查看文件

@@ -233,4 +233,10 @@ update
`2023.2.28`
update
- 开放 微信支付
- 修改 支付宝全额支付参数，0表示全额，12表示分期
- 修改 支付宝全额支付参数，0表示全额，12表示分期


## v1.0.27
`2023.3.1`
feature
- 增加 已购买未激活容错页面

+ 10
- 1
src/api/wx.js 查看文件

@@ -14,7 +14,8 @@ const APIWx = {
ocr, //ocr识别
Effective, //激活接口
GetCardInfo,
LckjGetOrderPackageShow
LckjGetOrderPackageShow,
CheckImei,
}
export default APIWx;
function createJSSDK({ userId, sUrl, appId }) {
@@ -64,4 +65,12 @@ function LckjGetOrderPackageShow({ iccid, imei }){
method: 'get',
params: { iccid, imei}
})
}
//检查imei属于哪家厂商
function CheckImei(params) {
return request({
url: '/api/Command/CheckImei',
method: 'post',
data: params,
});
}

+ 1
- 1
src/config/models.js 查看文件

@@ -5,7 +5,7 @@
* @FilePath: \TelpoH5FrontendWeb\src\config\models.js
* @description:
*/
export const VERSION_MODEL = '1.0.26F'; //版本号
export const VERSION_MODEL = '1.0.27F'; //版本号
export const IMAGE_URL = {
production: 'http://zfb.ssjlai.com/web/',
test: 'http://zfb.ssjlai.com/web/',


+ 1
- 0
src/router/index.js 查看文件

@@ -27,6 +27,7 @@ const routes = [
{ 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) },
{ path: '/cardActive', name: 'cardActive', component: resolve => require(['@/views/card-active'], resolve) },


];


+ 3
- 3
src/views/active-status/index.vue 查看文件

@@ -7,7 +7,7 @@
<div class="main">
<div class="text success" v-if="isActive">
<p>激活成功，请重启设备，看到连接平台</p>
<p class="img">图标<img src="../../assets/online.png"/>后，则可正常使用。</p>
<div class="img">图标<img src="../../assets/online.png"/>后，则可正常使用。</div>
</div>
<div class="text fail" v-else>
<p>电话卡激活失败！请进行实名认证与绑定SIM卡。如您已实名认证，请5分钟后，再进行设备绑定。</p>
@@ -106,14 +106,14 @@ export default {
<style scoped lang="scss">
.active-container {
height: 100vh;
padding: 40px 50px;
padding: 40px 40px;
.header {
padding: 10px 0;
@include center();
}
.main {
width: 100%;
padding: 10px 0;
padding: 10px;
display: flex;
justify-content: flex-start;
align-items: flex-start;


+ 160
- 0
src/views/card-active/index.vue 查看文件

@@ -0,0 +1,160 @@
<template>
<div class="active-container" v-if="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>
<p class="img">图标<img src="../../assets/online.png"/>后，则可正常使用。</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();
this.onShowDialog();
},
methods: {
onShowDialog() {
let that = this;
this.$dialog.confirm({
title: '激活提示',
message: `<span>您已付费、但未激电话卡，</span></br><span>请点击确认前往激活电话卡。</span>`,
showCancelButton: false
}).then(() => {
that.$router.replace({
name: 'activeStatus',
query: {
serialNo: this.$route.query.imei,
iccid: this.$route.query.iccid || '',
}
})
})
},
// 激活接口
effective() {
this.$toast.loading('激活中,请稍候...');
let reqBody = {
imei: this.$route.query.imei,
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 50px;
.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;
font-weight: 500;
margin: 5px 0;
img {
height: 25px;
width: 60px;
margin: 0 5px;
}
.img {
display: flex;
justify-content: flex-start;
align-items: center;
}
}
}
.van-button {
margin-top: 20px;
}
}
</style>

+ 33
- 21
src/views/package-home/index.vue 查看文件

@@ -1,7 +1,7 @@
<!--
* @Date: 2023-02-24 14:18:25
* @LastEditors: JinxChen
* @LastEditTime: 2023-02-28 14:53:14
* @LastEditTime: 2023-03-01 17:08:02
* @FilePath: \TelpoH5FrontendWeb\src\views\package-home\index.vue
* @description:
-->
@@ -14,23 +14,43 @@
<script>
import { APIPay } from "@/api/pay";
import APICore from "@/api/core";
import APIWx from "@/api/wx";
import { isNotNull } from "@/utils/index";
export default {
name: "",
data() {
return {
params: {

}
params: {}, //获取路由的参数
isRecharge: null, //是否已经支付
};
},
created() {
this.getToken();
this.getAuth();
this.getParams();
this.checkImei();
},
mounted() {
this.checkBrowser();
},
methods: {
checkImei() {
let reqBody = {
imei: this.params.imei,
iccid: this.params.imei || ''
};
APIWx.CheckImei(reqBody).then(res =>{
console.log("checkImei", res);
let data = res.data;
if(data) {
this.isRecharge = data.isRecharge;
console.log("是否已经支付", this.isRecharge);
}
}).catch(e => {
console.log("e", e.message);
})
},

// checkBrowser 检查扫码的浏览器内核
checkBrowser() {
const userAgent = window.navigator.userAgent;
@@ -92,23 +112,17 @@ export default {
getWxCode() {
let params = this.params;
let commonUrl = process.env.VUE_APP_BASE_API;
/* let testUrl = encodeURIComponent(`https://id.ssjlai.com/h5-frontendweb/#/${params.routerName}?imei=${params.imei}&appId=${params.appId}`);
let proUrl = encodeURIComponent(`https://ai.ssjlai.com/h5-frontendweb/#/${params.routerName}?imei=${params.imei}&appId=${params.appId}`); */
let redUrl = encodeURIComponent(`${commonUrl}/h5-frontendweb/#/${params.routerName}?imei=${params.imei}&appId=${params.appId}&iccid=${params.iccid}`);
console.log("redUrl", redUrl);
let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${params.appId}&redirect_uri=${redUrl}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
/* if(params.imei) {
this.$router.replace({
name: 'packageList',
query: {
imei: params.imei,
iccid: params.iccid,
}
})
if(this.isRecharge) {
// 如果是已经支付，但未激活，跳转激活界面
let redUrl = encodeURIComponent(`${commonUrl}/h5-frontendweb/#/cardActive?imei=${params.imei}&appId=${params.appId}&iccid=${params.iccid}`);
let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${params.appId}&redirect_uri=${redUrl}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
window.location.href = url;
} else {
let redUrl = encodeURIComponent(`${commonUrl}/h5-frontendweb/#/${params.routerName}?imei=${params.imei}&appId=${params.appId}&iccid=${params.iccid}`);
let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${params.appId}&redirect_uri=${redUrl}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
window.location.href = url;
} */
window.location.href = url;
}

},
// 获取url传过来的参数
getParams() {
@@ -125,6 +139,4 @@ export default {
</script>

<style scoped lang="scss">
.package-home {
}
</style>

+ 21
- 119
src/views/package-list/index.vue 查看文件

@@ -1,7 +1,7 @@
<!--
* @Date: 2022-03-29 16:57:58
* @LastEditors: JinxChen
* @LastEditTime: 2023-02-28 17:33:41
* @LastEditTime: 2023-03-01 16:59:47
* @FilePath: \TelpoH5FrontendWeb\src\views\package-list\index.vue
* @description: TODO 小台风充值h5
-->
@@ -14,19 +14,9 @@
</van-nav-bar>
<!-- 灰色线条 -->
<div class="gray-line"></div>
<!-- 套餐说明 -->
<!-- <div class="order-description" v-show="packageOrderList.length">
<h5>套餐说明：</h5>
<h5>每月200分钟通话时长，1G流量。</h5>
</div> -->
<!-- 套餐列表 -->
<div class="topup-container">
<div class="main">
<!-- <div class="tips" v-show="!isCanTopup">
<p>非本公司发行的SIM卡，</p>
<p>无此服务。</p>
<div class="cancel-button" @click="onNavBack">返回</div>
</div> -->
<!-- 无套餐时显示 -->
<div class="noData_container" v-show="packageOrderList.length === 0 && isShowNoData">
<p>暂无相关套餐数据,请您联系管理员~</p>
@@ -51,7 +41,7 @@
<p>{{item.packageName}}<!-- ：{{(item.packagePrice/item.packageIssue).toFixed(0)}}元/月 --></p>
</div>
<div class="remark">
<p>每月200分钟通话时长，1G流量。</p>
<p>每月200分钟通话时长，1G流量</p>
</div>
<div class="details">
<p>
@@ -59,12 +49,12 @@
<span class="orange large">￥{{(item.packagePrice/(item.packageIssue === 0 ? 1: item.packageIssue)).toFixed(0)}}</span>元/月，
</p>
<p class="total">
<span>合计</span><span class="orange price">{{item.packagePrice}}元</span>。
<span>合计</span><span class="orange price">{{item.packagePrice}}元</span>
</p>
</div>
<div class="package-buy">
<div class="buy-btn" @click="onBuy(item)">
<p>立即充值话费</p>
<p>第一步：充值话费</p>
</div>
</div>
<div class="radios-con">
@@ -102,86 +92,22 @@
</div>
</div>
</div>
<!-- 底部支付类型选择 -->
<div class="pay-radios" v-show="false">
<div class="radios-con">
<!-- <van-radio-group v-model="radio" direction="horizontal" @change="onRaidoChange">
<van-radio name="1">
<template #default>
<span>微信支付</span>
<img src="../../assets/wx_pay_icon.png"/>
</template>
</van-radio>
<van-radio name="2">
<template #default>
<span>支付宝</span>
<img src="../../assets/alipay.png"/>
</template>
</van-radio>
<van-radio name="3">
<template #default>
<span>花呗</span>
<img src="../../assets/antpay.png"/>
</template>
</van-radio>
</van-radio-group> -->
<!-- <van-radio-group v-model="radio" @change="onRaidoChange">
<van-cell-group border >
<van-cell clickable @click="radio = '1'" center>
<template #default>
<div class="van-cell-text">
<img src="../../assets/wx-pay.png" alt="">
<span class="custom-title">微信支付</span>
</div>
</template>
<template #right-icon>
<van-radio name="1" />
</template>
</van-cell>
<van-cell clickable @click="radio = '2'">
<template #default>
<div class="van-cell-text">
<img src="../../assets/alipay.png"/>
<span class="custom-title">支付宝支付</span>
</div>
</template>
<template #right-icon>
<van-radio name="2" />
</template>
</van-cell>
<van-cell clickable @click="radio = '3'" >
<template #default >
<div class="van-cell-text">
<img src="../../assets/antpay.png"/>
<span class="custom-title">花呗支付</span>
</div>
</template>
<template #right-icon>
<van-radio name="3" />
</template>
</van-cell>
</van-cell-group>
</van-radio-group> -->
</div>

</div>
</div>
</template>

<script>
import APIWx from "@/api/wx";
import AppId from "@/config/appId";
import { APIPay } from "@/api/pay";
let wx = require("weixin-js-sdk"); // TODO 再封装，可拦截错误提示等操作
import APICore from "@/api/core";
import axios from "axios";
let wx = require("weixin-js-sdk"); // TODO 再封装，可拦截错误提示等操作
import { isNotNull } from "@/utils/index";
import AppId from "@/config/appId";
export default {
name: "packageList",
data() {
return {
topupTitle: "请选择套餐充值激活电话卡",
wxItem: "",
topupTitle: "请选择套餐充值激活电话卡", //充值页面标题
// 套餐列表， todo 需要从接口获取
packageOrderList: [
{
packageName: '移动语音卡套餐(1年)',
@@ -196,31 +122,25 @@ export default {
outTradeNo: "", //订单号
price: "", //价格,
isShowNoData: false, //是否显示无套餐内容, 默认false
// 获取从路由的参数，import 调取激活接口需要用到
params: {
imei: '',
iccid: '',
manufactorId: '',
appId: '',
manufactorId: '', //厂商id，一般用来获取core接口token
appId: '', //公众号appId，需要对接多个不同公众号时动态从页面路由获取，

},
radio: '1',
payProductId: null,
packageIssue: null,
payType: '1',
radio: '1', //支付方式单选按钮默认值
payProductId: null, //套餐id
packageIssue: null, //套餐分期
payType: '1', //支付方式 1 微信， 2 支付宝，支付宝又分为花呗和全额支付，全额支付分期数传0 或者1 ，花呗则传 3 6 12
};
},
computed: {
isCanTopup() {
return this.$route.query.isCanTopup;
},
serialNo() {
return this.$route.query.serialNo;
}
},
created() {
this.getAuth();
this.getParams();
this.getWxAutograph();
// todo 接口列表
/* this.getLiveBasePackage(); */
},
/* mounted() {
@@ -334,7 +254,6 @@ export default {
})
.then(res => {
let item = res.data.data;
this.wxItem = res.data.data;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: item.appId, // 必填，公众号的唯一标识
@@ -346,7 +265,6 @@ export default {

wx.ready(() => {
resolve(true);
/* that.canScan = true; */
});
})
.catch(err => {
@@ -370,21 +288,14 @@ export default {
this.aliPay(data);
} else {
let openId = this.$store.getters.openId;
this.payProductId = process.env.NODE_ENV === "production" ? '1629407705558630400': '1629405558344859648'; //支付宝花呗支付
this.payProductId = process.env.NODE_ENV === "production" ? '1629407413618294784': '1629405716684029952'; //支付宝花呗支付
if(openId === null || openId === 'null') {
this.$dialog.confirm({
message: '获取OpenId失败，请您重新进入',
showCancelButton: false,
})
} else {
/* this.packageIssue = 1;
this.$dialog.confirm({
message: '微信支付在调整中，请选择其它支付方式',
showCancelButton: false,
}) */
// todo 暂时取消开放微信支付
this.wxPay(data);
console.log("openid为空");
}
}
},
@@ -401,7 +312,7 @@ export default {
productId: this.payProductId, //套餐id
packageName: /* data.productModel */ data.packageName, //套餐名字
packagePayType: Number(this.payType), //支付类型
packageIssue: 1, //分期
packageIssue: 12, //分期
packagePrice: process.env.NODE_ENV === "production" ? data.packagePrice * 100 : 1 //总金额单位为分，测试环境写死
};
APICore.payLiveBaseDevice(reqBody)
@@ -542,17 +453,7 @@ export default {
this.$toast.clear();
});
},
// 转换类型
shiftType(type) {
switch (type) {
case "微信":
return "1"
/* break; */
case "支付宝花呗":
return "2"
/* break; */
}
},
// 支付类型切换
onRaidoChange(value) {
console.log("选择的支付类型是", value);
this.payType = value;
@@ -720,7 +621,8 @@ export default {
padding: 5px 8px;
.buy-btn {
height: 40px;
width: 120px;
width: 150px;
padding: 0 5px;
display: flex;
justify-content: center;
align-items: center;


+ 17
- 17
src/views/pay-result/index.vue 查看文件

@@ -1,7 +1,7 @@
<!--
* @Date: 2023-02-24 16:47:33
* @LastEditors: JinxChen
* @LastEditTime: 2023-02-28 18:33:53
* @LastEditTime: 2023-03-01 15:56:15
* @FilePath: \TelpoH5FrontendWeb\src\views\pay-result\index.vue
* @description:
-->
@@ -25,7 +25,7 @@
<div class="details">
<div class="details-item">
<p class="left-text">订单状态</p>
<p v-if="isPayStatus">支付成功</p>
<p v-if="payStatus">支付成功</p>
<p v-else class="error">查询失败</p>
</div>
<div class="details-item">
@@ -39,13 +39,13 @@
</div>
<!-- 返回 -->
<div class="footer pos-center">
<!-- <div class="back-btn" @click="onNavBack" v-show="!isPayStatus">
<!-- <div class="back-btn" @click="onNavBack" v-show="!payStatus">
<p>返回重新选择套餐购买</p>
</div> -->
<div class="back-btn" @click="onNext" v-show="isPayStatus">
<div class="back-btn" @click="onNext" v-show="payStatus">
<p>激活电话卡</p>
</div>
<div class="back-btn" @click="onBackHome" v-show="!isPayStatus">
<div class="back-btn" @click="onBackHome" v-show="!payStatus">
<p>返回首页</p>
</div>
</div>
@@ -67,12 +67,12 @@ export default {
name: "payResult",
data() {
return {
pageShow: false,
count: 0,
timer: "", //定时器
isPayStatus: null,
price: this.$route.query.price,
outTradeNo: this.$route.query.outTradeNo,
pageShow: false, //是否显示页面，备注：需要在查询结果出来后才显示页面
count: 0, //轮询接口时间次数
timer: "", //轮询支付结果定时器
payStatus: null, //支付状态
price: this.$route.query.price, //价格
outTradeNo: this.$route.query.outTradeNo, //支付订单号
isIos: null //是否是ios
};
},
@@ -202,7 +202,7 @@ export default {
let that = this;
console.log("支付宝结果");
this.$toast.loading({
message: "结果查询中"
message: "支付结果查询中"
});
let reqBody = {
outTradeNo: params.outTradeNo
@@ -214,7 +214,7 @@ export default {
if (that.count >= 30) {
if (that.timer) {
clearInterval(that.timer);
this.isPayStatus = false;
this.payStatus = false;
this.pageShow = true;
this.$toast.clear();
console.log("关闭轮询1");
@@ -226,7 +226,7 @@ export default {
.then(res => {
if (res.data.code === 20000) {
this.pageShow = true;
this.isPayStatus = true;
this.payStatus = true;
this.$toast.clear();
console.log("关闭轮询2");
if (that.timer) {
@@ -242,7 +242,7 @@ export default {
// todo 轮询微信支付的订单，支付成功则激活 （只有直播基地的imei才激活操作）
let that = this;
console.log("微信");
this.$toast.loading({message: "结果查询中"});
this.$toast.loading({message: "支付结果查询中"});
let reqBody = {
outTradeNo: params.outTradeNo
};
@@ -253,7 +253,7 @@ export default {
if (that.count >= 30) {
if (that.timer) {
clearInterval(that.timer);
this.isPayStatus = false;
this.payStatus = false;
this.pageShow = true;
this.$toast.clear();
console.log("关闭轮询3");
@@ -265,7 +265,7 @@ export default {
.then(res => {
if (res.data.code === 20000) {
this.pageShow = true;
this.isPayStatus = true;
this.payStatus = true;
this.$toast.clear();
console.log("关闭轮询4");
if (that.timer) {


撰写 预览
正在加载...
取消
保存