chenJinxu
/
TelpoH5FrontendWeb
關注 1
收藏 0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

优化跳转逻辑

test
chenJinxu 9 月之前
父節點
3b00e484f4
當前提交
19aad55c1e
共有 2 個檔案被更改，包括 100 行新增 和 44 行删除
分割檢視
Diff Options
Show Stats Download Patch File Download Diff File
  1. +5
    -2
      src/views/card-info/index.vue
  2. +95
    -42
      src/views/package-list/index.vue

+ 5
- 2
src/views/card-info/index.vue 查看文件

@@ -117,9 +117,12 @@ export default {
return /micromessenger/.test(ua);
}
},
async mounted() {
async created() {
await this.getAuth();
await this.getToken();
},
mounted() {

this.getParams();
this.getCardInfo();

@@ -155,7 +158,7 @@ export default {
if (params) {
this.params = { ...params };
let url = window.location.href.split("?code=")[1];
if (isNotNull(url) && window.location.href.indexOf("code") > -1 && this.isWeChat) {
if (isNotNull(url) || window.location.href.indexOf("code") > -1) {
let timeStamp = new Date().getTime();
let code = url.split("&")[0];
this.code = code;


+ 95
- 42
src/views/package-list/index.vue 查看文件

@@ -9,7 +9,7 @@
<div class="package-list-container">
<van-nav-bar :left-arrow="false" :border="true">
<template #title>
<h5 style="font-size: 16px">{{topupTitle}}</h5>
<h5 style="font-size: 16px">{{ topupTitle }}</h5>
</template>
</van-nav-bar>
<!-- 灰色线条 -->
@@ -22,12 +22,7 @@
<p>暂无相关套餐数据,请您联系管理员~</p>
</div>
<!-- 套餐订购 -->
<div
class="package-order-container"

v-for="(item, index) in packageOrderList"
:key="index"
>
<div class="package-order-container" v-for="(item, index) in packageOrderList" :key="index">
<!-- 推荐 -->
<div class="recom" v-show="false">
<div class="shape"></div>
@@ -38,7 +33,8 @@
<!-- 套餐内容 -->
<div class="order-content">
<div class="title">
<p>{{item.packageName}}<!-- ：{{(item.packagesPrice/item.packageIssue).toFixed(0)}}元/月 --></p>
<p>{{ item.packageName }}<!-- ：{{(item.packagesPrice/item.packageIssue).toFixed(0)}}元/月 -->
</p>
</div>
<div class="remark">
<p>每月200分钟通话时长，1G流量</p>
@@ -46,10 +42,11 @@
<div class="details">
<p>

<span class="orange large">￥{{(item.packagesPrice/(item.packageIssue === 0 ? 1: item.packageIssue)).toFixed(0)}}</span>元/月，
<span class="orange large">￥{{ (item.packagesPrice / (item.packageIssue === 0 ? 1 :
item.packageIssue)).toFixed(0)}}</span>元/月，
</p>
<p class="total">
<span>合计</span><span class="orange price">{{item.packagesPrice}}元</span>
<span>合计</span><span class="orange price">{{ item.packagesPrice }}元</span>
</p>
</div>
<!-- <div class="package-buy">
@@ -61,12 +58,12 @@
<div class="pay-type">
<p>支付方式：</p>
</div>
<van-radio-group v-model="radio" direction="horizontal" @change="onRaidoChange">
<van-radio-group v-model="radio" direction="horizontal" @change="onRaidoChange">
<van-radio name="1">
<template #default>
<div class="radio-con">
<span>微信</span>
<img src="../../assets/wx-pay.png"/>
<img src="../../assets/wx-pay.png" />
</div>
</template>
</van-radio>
@@ -74,7 +71,7 @@
<template #default>
<div class="radio-con">
<span>支付宝</span>
<img src="../../assets/alipay.png"/>
<img src="../../assets/alipay.png" />
</div>
</template>
</van-radio>
@@ -82,7 +79,7 @@
<template #default>
<div class="radio-con">
<span>12期花呗</span>
<img src="../../assets/antpay.png"/>
<img src="../../assets/antpay.png" />
</div>
</template>
</van-radio>
@@ -144,6 +141,13 @@ export default {
code: ''
};
},
computed: {
isWeChat() {
const ua = window.navigator.userAgent.toLowerCase();
return /micromessenger/.test(ua);
}

},
created() {
this.getAuth();
this.getToken();
@@ -158,8 +162,8 @@ export default {
// 根据code获取openId
getOpenId(code) {
APIPay.getOpenId(code).then(res => {
let data= res.data;
if(data.code === 20000) {
let data = res.data;
if (data.code === 20000) {
this.openId = data.data.openId;
this.$store.commit("openId", data.data.openId);
} else if (data.state === false) {
@@ -169,7 +173,7 @@ export default {
}
})
},
// 获取b端接口的token
// 获取b端接口的token
getAuth() {
let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650";
APICore.getAuth({ manufactorId: manufactorId }).then(res => {
@@ -182,16 +186,16 @@ export default {
APIPay.getToken(manufacturerNo).then(res => {
console.log("token的数据", res.data)
let data = res.data;
if(data.code === 20000) {
if (data.code === 20000) {
this.$store.commit("token", data.token);
console.log("token的数据", localStorage.getItem('token'))
console.log("token的数据", localStorage.getItem('token'))
}
})
},
getCode() {
let url = window.location.href.split("?code=")[1];
console.log("url", url);
if (isNotNull(url) ||window.location.href.indexOf("code") > -1) {
if (isNotNull(url) || window.location.href.indexOf("code") > -1) {
let code = url.split("&")[0];
this.code = code;
if (isNotNull(code)) {
@@ -209,7 +213,7 @@ export default {
let params = this.$route.query;
console.log("params", params);
if (params) {
this.params = {...params};
this.params = { ...params };
}
},
// 获取基本套餐信息
@@ -230,7 +234,7 @@ export default {
} else if (res.data.code === 0 && res.data.data === null) {
this.isShowNoData = true;
} else {
if(res.data.data === null) {
if (res.data.data === null) {
this.isShowNoData = false;
} else {
let data = res.data.data.packagesList;
@@ -271,7 +275,7 @@ export default {
APIWx.createJSSDK({
sUrl: window.location.href.split("#")[0],
userId: '',
appId: this.params.appId || AppId
appId: this.params.appId || AppId
})
.then(res => {
let item = res.data.data;
@@ -300,6 +304,12 @@ export default {
// 遍历数据找到属于三种支付方式对应的套餐id， 1 微信 2 支付宝全额 3 支付宝分期
let payTypeToPackAgeId = data.payTypeList;
console.log("购买的套餐数据data", payTypeToPackAgeId);
if (!this.isWeChat) {
return this.$dialog.confirm({
message: '请用微信客户端打开此页。',
showCancelButton: false,
})
}
// 需要区分是要用微信支付还是支付宝花呗支付
if (this.payType === '2') {
// 全额
@@ -326,7 +336,7 @@ export default {
})[0].productId;
this.packageIssue = 0;
console.log("this.payProductId3", this.payProductId);
if(openId === null || openId === 'null') {
if (openId === null || openId === 'null') {
this.$dialog.confirm({
message: '获取OpenId失败，请您重新进入',
showCancelButton: false,
@@ -367,7 +377,7 @@ export default {
message: `${res.data.message}`,
showCancelButton: false
})
} else if ( res.data.code !== 0){
} else if (res.data.code !== 0) {
return this.$dialog.confirm({
message: `请反馈给一线人员,\n${res.data.message}`,
showCancelButton: false
@@ -453,7 +463,7 @@ export default {
signType: data.signType, //微信签名方式：
paySign: data.paySign //微信签名
},
function(res) {
function (res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
@@ -575,6 +585,7 @@ export default {
.package-list-container {
background-color: white;
height: 100vh;

.topup-container {
position: relative;
/* margin: 20px; */
@@ -585,14 +596,17 @@ export default {
background-color: white;
overflow: scroll;
height: calc(100vh - 88px);

.main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;

.tips {
padding: 10px;
}

.noData_container {
margin: 100px auto 0;
height: 120px;
@@ -603,15 +617,19 @@ export default {
align-items: flex-end;
font-size: 16px;
color: #999;

p {
font-size: 16px;
}

/* @include colorAndFont(#999, 28); */
}

p {
padding: 10px;
font-size: 16px;
}

.cancel-button {
width: 30vw;
border-radius: 5px;
@@ -623,6 +641,7 @@ export default {
align-items: center;
font-size: 16px;
}

.package-order-container {
position: relative;
margin: 10px 0;
@@ -630,6 +649,7 @@ export default {
z-index: 999;
box-shadow: rgba(14, 30, 37, 0.12) 0 3px 5px 0,
rgba(14, 30, 37, 0.32) 0 2px 16px 0;

.recom {
position: absolute;
top: -7px;
@@ -640,11 +660,13 @@ export default {
transform: rotate(-45deg);
text-align: center;
z-index: 9999;

p {
padding: 0;
color: white;
font-size: 14px;
}

.shape {
position: absolute;
top: -1px;
@@ -653,6 +675,7 @@ export default {
border-width: 0 21px 21px;
border-color: transparent transparent white;
}

.square {
height: 15px;
width: 35px;
@@ -663,40 +686,50 @@ export default {
font-size: 14px;
}
}

.order-content {
padding: 15px 10px;

.title {
display: flex;
justify-content: flex-start;

p {
font-size: 16px;
font-weight: bold;
}
}

.details {
display: flex;
justify-content: flex-start;
align-items: center;

p {
height: 40px;
@include center();
font-size: 14px;
padding: 5px 0 5px 10px;
}

.total {
font-size: 16px;
padding: 0;
}

.orange {
color: orange;
}

.large {
font-size: 26px;
margin: 0 2px;
}

.price {
font-size: 16px;
}

/* .buy-btn {
height: 30px;
width: 100px;
@@ -712,41 +745,48 @@ export default {
}
} */
}

.remark {
display: flex;
justify-content: flex-start;

p {
font-size: 14px;
padding: 5px 10px;
padding: 5px 10px;
/* font-weight: bold; */
}
}

.package-buy {
@include center();
padding: 5px 8px;
@include center();
.buy-btn {
height: 40px;
width: 200px;
padding: 0 5px;
display: flex;
justify-content: center;
align-items: center;
background: orange;
border-radius: 20px;
p {
font-size: 16px;
padding: 0;
color: white;
}

.buy-btn {
height: 40px;
width: 200px;
padding: 0 5px;
display: flex;
justify-content: center;
align-items: center;
background: orange;
border-radius: 20px;

p {
font-size: 16px;
padding: 0;
color: white;
}
}
}

.radios-con {
/* padding: 20px 10px; */
/* @include center(); */
/* align-items: center; */
padding: 10px 0 10px 10px;
font-size: 14px;

/* box-shadow: rgba(14, 30, 37, 0.12) 0 3px 5px 0,
rgba(14, 30, 37, 0.32) 0 2px 16px 0; */
img {
@@ -754,8 +794,10 @@ export default {
width: 20px;
margin: 2px;
}

.pay-type {
text-align: left;

p {
font-size: 14px;
padding: 0 0 10px 0;
@@ -765,10 +807,12 @@ export default {
.radio-con {
@include center();
}

.van-cell-text {
display: flex;
justify-content: flex-start;
align-items: center;

span {
font-size: 14px;
padding: 0 5px;
@@ -776,18 +820,21 @@ export default {
}
}
}

.content {
font-size: 14px;
}
}
}
}

.gray-line {
height: 10px;
width: 100%;
background: #f2f4f5;

}

.order-description {
height: 60px;
display: flex;
@@ -795,15 +842,18 @@ export default {
align-items: flex-start;
flex-direction: column;
padding: 5px 0 10px 10px;

h5 {
font-size: 14px;
padding: 10px 0 0 0;
}
}

.pay-radios {
position: relative;
top: 0;
width: 100%;

/* background-color: red; */
/* padding: 0 15px; */
.radios-con {
@@ -812,15 +862,18 @@ export default {
align-items: center;
font-size: 18px;
box-shadow: rgba(14, 30, 37, 0.12) 0 3px 5px 0,
rgba(14, 30, 37, 0.32) 0 2px 16px 0;
rgba(14, 30, 37, 0.32) 0 2px 16px 0;

img {
height: 35px;
width: auto;
}

.van-cell-text {
display: flex;
justify-content: flex-start;
align-items: center;

span {
padding: 0 5px;
}


Write Preview
Loading…
取消
儲存