|
@@ -1,7 +1,7 @@ |
|
|
<!-- |
|
|
<!-- |
|
|
* @Date: 2022-03-29 16:57:58 |
|
|
* @Date: 2022-03-29 16:57:58 |
|
|
* @LastEditors: JinxChen |
|
|
* @LastEditors: JinxChen |
|
|
* @LastEditTime: 2023-03-05 11:59:59 |
|
|
|
|
|
|
|
|
* @LastEditTime: 2023-03-13 16:41:09 |
|
|
* @FilePath: \TelpoH5FrontendWeb\src\views\package-list\index.vue |
|
|
* @FilePath: \TelpoH5FrontendWeb\src\views\package-list\index.vue |
|
|
* @description: TODO 小台风充值h5 |
|
|
* @description: TODO 小台风充值h5 |
|
|
--> |
|
|
--> |
|
@@ -18,7 +18,7 @@ |
|
|
<div class="topup-container"> |
|
|
<div class="topup-container"> |
|
|
<div class="main"> |
|
|
<div class="main"> |
|
|
<!-- 无套餐时显示 --> |
|
|
<!-- 无套餐时显示 --> |
|
|
<div class="noData_container" v-show="packageOrderList.length === 0 && isShowNoData"> |
|
|
|
|
|
|
|
|
<div class="noData_container" v-show="packageOrderList.length === 0 && !isShowNoData"> |
|
|
<p>暂无相关套餐数据,请您联系管理员~</p> |
|
|
<p>暂无相关套餐数据,请您联系管理员~</p> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 套餐订购 --> |
|
|
<!-- 套餐订购 --> |
|
@@ -38,7 +38,7 @@ |
|
|
<!-- 套餐内容 --> |
|
|
<!-- 套餐内容 --> |
|
|
<div class="order-content"> |
|
|
<div class="order-content"> |
|
|
<div class="title"> |
|
|
<div class="title"> |
|
|
<p>{{item.packageName}}<!-- :{{(item.packagePrice/item.packageIssue).toFixed(0)}}元/月 --></p> |
|
|
|
|
|
|
|
|
<p>{{item.packageName}}<!-- :{{(item.packagesPrice/item.packageIssue).toFixed(0)}}元/月 --></p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="remark"> |
|
|
<div class="remark"> |
|
|
<p>每月200分钟通话时长,1G流量</p> |
|
|
<p>每月200分钟通话时长,1G流量</p> |
|
@@ -46,10 +46,10 @@ |
|
|
<div class="details"> |
|
|
<div class="details"> |
|
|
<p> |
|
|
<p> |
|
|
|
|
|
|
|
|
<span class="orange large">¥{{(item.packagePrice/(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> |
|
|
<p class="total"> |
|
|
<p class="total"> |
|
|
<span>合计</span><span class="orange price">{{item.packagePrice}}元</span> |
|
|
|
|
|
|
|
|
<span>合计</span><span class="orange price">{{item.packagesPrice}}元</span> |
|
|
</p> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<!-- <div class="package-buy"> |
|
|
<!-- <div class="package-buy"> |
|
@@ -114,15 +114,15 @@ export default { |
|
|
topupTitle: "请选择套餐充值电话卡", //充值页面标题 |
|
|
topupTitle: "请选择套餐充值电话卡", //充值页面标题 |
|
|
// 套餐列表, todo 需要从接口获取 |
|
|
// 套餐列表, todo 需要从接口获取 |
|
|
packageOrderList: [ |
|
|
packageOrderList: [ |
|
|
{ |
|
|
|
|
|
|
|
|
/* { |
|
|
packageName: '语音卡套餐(1年)', |
|
|
packageName: '语音卡套餐(1年)', |
|
|
packagePayType: 1, |
|
|
packagePayType: 1, |
|
|
packagePrice: 240, |
|
|
|
|
|
|
|
|
packagesPrice: 240, |
|
|
packageIssue: 12, |
|
|
packageIssue: 12, |
|
|
payWxPayProductId: process.env.NODE_ENV === "production" ? '1629407413618294784' : '1629405716684029952', //微信支付 |
|
|
|
|
|
|
|
|
payWxPayProductId: process.env.NODE_ENV === "production" ? '1635123463911587840' : '1635122887959592960', //微信支付 |
|
|
payAliPayProductId: process.env.NODE_ENV === "production" ? '1629407413618294784' : '1629405716684029952', //支付宝全额支付 |
|
|
payAliPayProductId: process.env.NODE_ENV === "production" ? '1629407413618294784' : '1629405716684029952', //支付宝全额支付 |
|
|
payAntPayProductId: process.env.NODE_ENV === "production" ? '1629407705558630400': '1629405558344859648', //支付宝花呗支付 |
|
|
payAntPayProductId: process.env.NODE_ENV === "production" ? '1629407705558630400': '1629405558344859648', //支付宝花呗支付 |
|
|
} |
|
|
|
|
|
|
|
|
} */ |
|
|
], |
|
|
], |
|
|
outTradeNo: "", //订单号 |
|
|
outTradeNo: "", //订单号 |
|
|
price: "", //价格, |
|
|
price: "", //价格, |
|
@@ -145,8 +145,8 @@ export default { |
|
|
this.getAuth(); |
|
|
this.getAuth(); |
|
|
this.getParams(); |
|
|
this.getParams(); |
|
|
this.getWxAutograph(); |
|
|
this.getWxAutograph(); |
|
|
// todo 接口列表 |
|
|
|
|
|
/* this.getLiveBasePackage(); */ |
|
|
|
|
|
|
|
|
// 套餐列表 |
|
|
|
|
|
this.getDevicePayPackage(); |
|
|
}, |
|
|
}, |
|
|
/* mounted() { |
|
|
/* mounted() { |
|
|
this.getParams(); |
|
|
this.getParams(); |
|
@@ -193,49 +193,45 @@ export default { |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
// 获取基本套餐信息 |
|
|
// 获取基本套餐信息 |
|
|
getLiveBasePackage() { |
|
|
|
|
|
|
|
|
getDevicePayPackage() { |
|
|
this.$toast.loading({ |
|
|
this.$toast.loading({ |
|
|
message: "获取套餐中", |
|
|
|
|
|
|
|
|
message: "加载中", |
|
|
duration: 1500 |
|
|
duration: 1500 |
|
|
}); |
|
|
}); |
|
|
let reqBody = { |
|
|
|
|
|
manufactorId:"", |
|
|
|
|
|
productModelId:0, |
|
|
|
|
|
iccid:"", |
|
|
|
|
|
pageNumber:1, |
|
|
|
|
|
begNumber:20 |
|
|
|
|
|
} |
|
|
|
|
|
APICore.cardPackageList(reqBody) |
|
|
|
|
|
|
|
|
APICore.devicePayPackage(this.params.imei) |
|
|
.then(res => { |
|
|
.then(res => { |
|
|
console.log("data", res.data); |
|
|
console.log("data", res.data); |
|
|
if (res.data.code === 106 || res.data.code === 104) { |
|
|
if (res.data.code === 106 || res.data.code === 104) { |
|
|
// token过期 |
|
|
// token过期 |
|
|
this.getAuth(); |
|
|
this.getAuth(); |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
this.getLiveBasePackage(); |
|
|
|
|
|
|
|
|
this.getDevicePayPackage(); |
|
|
}, 1500); |
|
|
}, 1500); |
|
|
} else if (res.data.code === 0 && res.data.data === null) { |
|
|
} else if (res.data.code === 0 && res.data.data === null) { |
|
|
this.isShowNoData = true; |
|
|
this.isShowNoData = true; |
|
|
}else { |
|
|
|
|
|
let data = res.data.data.list; |
|
|
|
|
|
if(data === null) { |
|
|
|
|
|
this.isShowNoData = true; |
|
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
if(res.data.data === null) { |
|
|
|
|
|
this.isShowNoData = false; |
|
|
} else { |
|
|
} else { |
|
|
this.packageOrderList = data.filter(item => { |
|
|
|
|
|
return item.pechargeUrl === '1629405716684029952' || item.pechargeUrl === '1629405558344859648'; |
|
|
|
|
|
|
|
|
let data = res.data.data.packagesList; |
|
|
|
|
|
// 处理获取套餐的逻辑 |
|
|
|
|
|
// 筛选 基础套餐,producModelId 1 是基础套餐;2 是加油包 |
|
|
|
|
|
let packageList = data.filter(item => { |
|
|
|
|
|
return item.producModelId === 1 |
|
|
}); |
|
|
}); |
|
|
console.log("套餐数据::", data); |
|
|
|
|
|
|
|
|
this.packageOrderList = packageList; |
|
|
|
|
|
console.log("套餐数据::", packageList); |
|
|
} |
|
|
} |
|
|
|
|
|
this.$toast.success({ |
|
|
|
|
|
message: "加载完成", |
|
|
|
|
|
duration: 1500 |
|
|
|
|
|
}); |
|
|
} |
|
|
} |
|
|
this.$toast.success({ |
|
|
|
|
|
message: "成功获取套餐", |
|
|
|
|
|
duration: 1500 |
|
|
|
|
|
}); |
|
|
|
|
|
}) |
|
|
}) |
|
|
.catch(error => { |
|
|
.catch(error => { |
|
|
this.$dialog.confirm({ |
|
|
this.$dialog.confirm({ |
|
|
title: "获取套餐数据失败", |
|
|
title: "获取套餐数据失败", |
|
|
message: error, |
|
|
|
|
|
|
|
|
message: error.message, |
|
|
showCancelButton: false, |
|
|
showCancelButton: false, |
|
|
}); |
|
|
}); |
|
|
}) |
|
|
}) |
|
@@ -280,20 +276,33 @@ export default { |
|
|
}, |
|
|
}, |
|
|
// 话费充值 |
|
|
// 话费充值 |
|
|
onBuy(data) { |
|
|
onBuy(data) { |
|
|
this.price = data.packagePrice; |
|
|
|
|
|
|
|
|
this.price = data.packagesPrice; |
|
|
|
|
|
// 遍历数据找到属于三种支付方式对应的套餐id, 1 微信 2 支付宝全额 3 支付宝分期 |
|
|
|
|
|
let payTypeToPackAgeId = data.payTypeList; |
|
|
|
|
|
console.log("购买的套餐数据data", data); |
|
|
// 需要区分是要用微信支付还是支付宝花呗支付 |
|
|
// 需要区分是要用微信支付还是支付宝花呗支付 |
|
|
if (this.payType === '2') { |
|
|
if (this.payType === '2') { |
|
|
this.payProductId = process.env.NODE_ENV === "production" ? '1629407413618294784' : '1629405716684029952', //支付宝全额支付 |
|
|
|
|
|
|
|
|
// 全额 |
|
|
|
|
|
this.payProductId = payTypeToPackAgeId.filter(item => { |
|
|
|
|
|
return item.payType === '2'; |
|
|
|
|
|
})[0].productId; |
|
|
this.packageIssue = 0; |
|
|
this.packageIssue = 0; |
|
|
this.aliPay(data); |
|
|
this.aliPay(data); |
|
|
} else if (this.payType === '3') { |
|
|
} else if (this.payType === '3') { |
|
|
this.payProductId = process.env.NODE_ENV === "production" ? '1629407705558630400': '1629405558344859648', //支付宝花呗支付 |
|
|
|
|
|
|
|
|
// 分期 |
|
|
|
|
|
this.payProductId = payTypeToPackAgeId.filter(item => { |
|
|
|
|
|
return item.payType === '3'; |
|
|
|
|
|
})[0].productId; |
|
|
this.packageIssue = 12; |
|
|
this.packageIssue = 12; |
|
|
this.payType = '2' |
|
|
this.payType = '2' |
|
|
this.aliPay(data); |
|
|
this.aliPay(data); |
|
|
} else { |
|
|
} else { |
|
|
|
|
|
// 微信 |
|
|
let openId = this.$store.getters.openId; |
|
|
let openId = this.$store.getters.openId; |
|
|
this.payProductId = process.env.NODE_ENV === "production" ? '1629407413618294784': '1629405716684029952'; //支付宝花呗支付 |
|
|
|
|
|
|
|
|
this.payProductId = payTypeToPackAgeId.filter(item => { |
|
|
|
|
|
return item.payType === '1'; |
|
|
|
|
|
})[0].productId; |
|
|
|
|
|
this.packageIssue = 0; |
|
|
if(openId === null || openId === 'null') { |
|
|
if(openId === null || openId === 'null') { |
|
|
this.$dialog.confirm({ |
|
|
this.$dialog.confirm({ |
|
|
message: '获取OpenId失败,请您重新进入', |
|
|
message: '获取OpenId失败,请您重新进入', |
|
@@ -317,8 +326,8 @@ export default { |
|
|
productId: this.payProductId, //套餐id |
|
|
productId: this.payProductId, //套餐id |
|
|
packageName: /* data.productModel */ data.packageName, //套餐名字 |
|
|
packageName: /* data.productModel */ data.packageName, //套餐名字 |
|
|
packagePayType: Number(this.payType), //支付类型 |
|
|
packagePayType: Number(this.payType), //支付类型 |
|
|
packageIssue: 12, //分期 |
|
|
|
|
|
packagePrice: process.env.NODE_ENV === "production" ? data.packagePrice * 100 : 1 //总金额单位为分,测试环境写死 |
|
|
|
|
|
|
|
|
packageIssue: 0, //分期 |
|
|
|
|
|
packagePrice: process.env.NODE_ENV === "production" ? data.packagesPrice * 100 : 1 //总金额单位为分,测试环境写死 |
|
|
}; |
|
|
}; |
|
|
this.$toast.clear(); |
|
|
this.$toast.clear(); |
|
|
APICore.payLiveBaseDevice(reqBody) |
|
|
APICore.payLiveBaseDevice(reqBody) |
|
@@ -413,7 +422,7 @@ export default { |
|
|
packageName: /* data.productModel + ',' + */data.packageName, //套餐名字 |
|
|
packageName: /* data.productModel + ',' + */data.packageName, //套餐名字 |
|
|
packagePayType: Number(this.payType), //支付类型 |
|
|
packagePayType: Number(this.payType), //支付类型 |
|
|
packageIssue: this.packageIssue, //分期 |
|
|
packageIssue: this.packageIssue, //分期 |
|
|
packagePrice: process.env.NODE_ENV === "production" ? data.packagePrice * 100 : 1 //总金额单位为分,测试环境写死 |
|
|
|
|
|
|
|
|
packagePrice: process.env.NODE_ENV === "production" ? data.packagesPrice * 100 : 1 //总金额单位为分,测试环境写死 |
|
|
}; |
|
|
}; |
|
|
this.$toast.clear(); |
|
|
this.$toast.clear(); |
|
|
APICore.payLiveBaseDevice(reqBody) |
|
|
APICore.payLiveBaseDevice(reqBody) |
|
|