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

优化跳转逻辑

test
chenJinxu 10 月之前
父節點
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); return /micromessenger/.test(ua);
} }
}, },
async mounted() {
async created() {
await this.getAuth(); await this.getAuth();
await this.getToken(); await this.getToken();
},
mounted() {

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


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


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

@@ -9,7 +9,7 @@
<div class="package-list-container"> <div class="package-list-container">
<van-nav-bar :left-arrow="false" :border="true"> <van-nav-bar :left-arrow="false" :border="true">
<template #title> <template #title>
<h5 style="font-size: 16px">{{topupTitle}}</h5>
<h5 style="font-size: 16px">{{ topupTitle }}</h5>
</template> </template>
</van-nav-bar> </van-nav-bar>
<!-- 灰色线条 --> <!-- 灰色线条 -->
@@ -22,12 +22,7 @@
<p>暂无相关套餐数据,请您联系管理员~</p> <p>暂无相关套餐数据,请您联系管理员~</p>
</div> </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="recom" v-show="false">
<div class="shape"></div> <div class="shape"></div>
@@ -38,7 +33,8 @@
<!-- 套餐内容 --> <!-- 套餐内容 -->
<div class="order-content"> <div class="order-content">
<div class="title"> <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>
<div class="remark"> <div class="remark">
<p>每月200分钟通话时长，1G流量</p> <p>每月200分钟通话时长，1G流量</p>
@@ -46,10 +42,11 @@
<div class="details"> <div class="details">
<p> <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>
<p class="total"> <p class="total">
<span>合计</span><span class="orange price">{{item.packagesPrice}}元</span>
<span>合计</span><span class="orange price">{{ item.packagesPrice }}元</span>
</p> </p>
</div> </div>
<!-- <div class="package-buy"> <!-- <div class="package-buy">
@@ -61,12 +58,12 @@
<div class="pay-type"> <div class="pay-type">
<p>支付方式：</p> <p>支付方式：</p>
</div> </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"> <van-radio name="1">
<template #default> <template #default>
<div class="radio-con"> <div class="radio-con">
<span>微信</span> <span>微信</span>
<img src="../../assets/wx-pay.png"/>
<img src="../../assets/wx-pay.png" />
</div> </div>
</template> </template>
</van-radio> </van-radio>
@@ -74,7 +71,7 @@
<template #default> <template #default>
<div class="radio-con"> <div class="radio-con">
<span>支付宝</span> <span>支付宝</span>
<img src="../../assets/alipay.png"/>
<img src="../../assets/alipay.png" />
</div> </div>
</template> </template>
</van-radio> </van-radio>
@@ -82,7 +79,7 @@
<template #default> <template #default>
<div class="radio-con"> <div class="radio-con">
<span>12期花呗</span> <span>12期花呗</span>
<img src="../../assets/antpay.png"/>
<img src="../../assets/antpay.png" />
</div> </div>
</template> </template>
</van-radio> </van-radio>
@@ -144,6 +141,13 @@ export default {
code: '' code: ''
}; };
}, },
computed: {
isWeChat() {
const ua = window.navigator.userAgent.toLowerCase();
return /micromessenger/.test(ua);
}

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

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

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

.tips { .tips {
padding: 10px; padding: 10px;
} }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.orange { .orange {
color: orange; color: orange;
} }

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

.price { .price {
font-size: 16px; font-size: 16px;
} }

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

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

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

.package-buy { .package-buy {
@include center(); @include center();
padding: 5px 8px; padding: 5px 8px;
@include center(); @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 { .radios-con {
/* padding: 20px 10px; */ /* padding: 20px 10px; */
/* @include center(); */ /* @include center(); */
/* align-items: center; */ /* align-items: center; */
padding: 10px 0 10px 10px; padding: 10px 0 10px 10px;
font-size: 14px; font-size: 14px;

/* box-shadow: rgba(14, 30, 37, 0.12) 0 3px 5px 0, /* 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 { img {
@@ -754,8 +794,10 @@ export default {
width: 20px; width: 20px;
margin: 2px; margin: 2px;
} }

.pay-type { .pay-type {
text-align: left; text-align: left;

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

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

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

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

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


} }

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

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

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

/* background-color: red; */ /* background-color: red; */
/* padding: 0 15px; */ /* padding: 0 15px; */
.radios-con { .radios-con {
@@ -812,15 +862,18 @@ export default {
align-items: center; align-items: center;
font-size: 18px; font-size: 18px;
box-shadow: rgba(14, 30, 37, 0.12) 0 3px 5px 0, 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 { img {
height: 35px; height: 35px;
width: auto; width: auto;
} }

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

span { span {
padding: 0 5px; padding: 0 5px;
} }


Write Preview
Loading…
取消
儲存