Skip to content

T
transport-show-h5
提交 649c27fd authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

优化购买页面

上级 cab5f3c1
显示空白字符变更
内嵌 并排
正在显示 包含 17 行增加 和 664 行删除
src/pages/pay/index copy.vue deleted 100644 → 0
浏览文件 @ cab5f3c1
<template>
<div class="pay-bg">
<img src="../../assets/images/pay1.png" alt />
<img src="../../assets/images/pay2.png" alt />
<div class="img-con">
<img src="../../assets/images/pay3.png" alt />
<img src="../../assets/images/pay4.png" class="img4" alt />
</div>
<div class="pay-btn">
<div class="num">
¥
<span>199</span>.00
<i v-if="orderStatus === 0">课程有效期剩余{{expireDay}}天</i>
</div>
<div class="btn" @click="goPay" v-if="orderStatus === 100">立即购买</div>
<div class="btn active" v-if="orderStatus === 1" @click="goHome">已购买</div>
<div class="btn" v-if="orderStatus === -1" @click="goMyOrder">待支付</div>
<div class="btn xf" @click="goPay" v-if="orderStatus === 0">续费</div>
</div>
<pay-we-chart :requestParam="requestParam"></pay-we-chart>
<div class="succ-pop" v-if="isPopShow">
<div class="pop">
<div class="close" @click="isPopShow = false">×</div>
<div class="tit">恭喜您，课程已购买成功！</div>
<div class="txt">请添加助教微信，有任何问题可随时沟通老师。</div>
<img @click="imagePreview" src="https://zws-imgs-pub.ezijing.com/static/public/dcef7bc62237a077b10d7e49c44a1e51.jpg" alt="">
</div>
</div>
</div>
</template>
<script>
import { ImagePreview } from 'vant'
import * as api from '@/api/pay.js'
import { getUser } from '@/api/account'
export default {
metaInfo: {
title: '课程详情'
},
components: {
[ImagePreview.name]: ImagePreview
},
data() {
const productId =
webConf.isDev === 'production'
? '6684359515615264768'
: '6682927830365372416'
return {
isPopShow: false,
expireDay: 0,
userId: '',
requestParam: {
product_id: productId, // 提前设定
open_id: '', // 通过微信授权获取
prepay_id: '', // 通过调用接口获取
app_id: '', // 提前设定
app_secret: '' // 提前设定
},
orderStatusTime: null,
orderStatus: 100
}
},
mounted() {
api.getOrderStatus().then(res => {
this.expireDay = res.expire_day
this.orderStatus = res.status
})
},
methods: {
imagePreview() {
ImagePreview(['https://zws-imgs-pub.ezijing.com/static/public/dcef7bc62237a077b10d7e49c44a1e51.jpg'])
},
async tikeOrderStatus() {
const isLogin = await this.$store.dispatch('checkLogin')
if (isLogin) {
this.orderStatusTime = setInterval(this.getOrderStatus, 1000)
}
},
// 已购买
goHome() {
this.$toast('您已购买全部服务，可直接使用')
},
// 支付
goPay() {
this.tikeOrderStatus()
wx.miniProgram.navigateTo({
url: `/pages/pay/index?data=${this.requestParam.product_id}`
})
},
// 去我的订单页面
goMyOrder() {
wx.miniProgram.navigateTo({
url: `/pages/web/index?src=${window.location.origin}/my/buyCourses`
})
},
// 获取订单状态
getOrderStatus() {
api.getOrderStatus().then(res => {
this.orderStatus = res.status
if (this.orderStatus === 1) {
this.isPopShow = true
this.orderStatusTime && clearInterval(this.orderStatusTime)
}
})
},
// 获取openID
getOpenid() {
getUser().then(res => {
api.getOpenid({ id: res.id, identity: 'transport' }).then(res => {
if (res.code === 0) {
this.requestParam.open_id = res.data.openid
}
})
})
}
},
destroyed() {
this.orderStatusTime && clearInterval(this.orderStatusTime)
}
}
</script>
<style lang="scss" scoped>
.pay-bg {
width: 100%;
padding-bottom: 1rem;
padding-bottom: env(safe-area-inset-bottom);
img {
width: 100%;
}
}
.pay-btn {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.4rem env(safe-area-inset-bottom);
.num {
font-size: 0.26rem;
color: #ff6767;
font-weight: bold;
i{
// font-weight: normal;
}
span {
font-size: 0.4rem;
}
}
.btn {
width: 4.65rem;
height: 0.7rem;
background: rgba(255, 103, 103, 1);
border-radius: 0.12rem;
text-align: center;
line-height: 0.7rem;
color: #fff;
font-size: 0.3rem;
margin: 0.15rem 0;
}
.xf {
width:2.51rem;
height:.7rem;
background:rgba(198,24,24,1);
}
.active {
background: #ccc;
}
}
.img-con{
background: #fff;
padding: .4rem .3rem 1.2rem .3rem;
.img4{
margin-top: .4rem;
}
}
.succ-pop{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
.pop{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
width:5.9rem;
height:6.98rem;
background:rgba(255,255,255,1);
border-radius:.12rem;
.tit{
line-height: 1.1rem;
text-align: center;
font-size: .3rem;
color: #222;
font-weight: bold;
}
.txt{
width:5.1rem;
font-size: .3rem;
color:rgba(34,34,34,1);
margin: 0 auto;
}
img{
width: 4.3rem;
height: 4.3rem;
margin: 0.4rem auto;
display: block;
}
.close{
position: absolute;
top: -.8rem;
right: 0;
font-size: .6rem;
color: #fff;
}
}
}
</style>
src/pages/pay/index.vue
浏览文件 @ 649c27fd
<template> <template>
<div class="pay-bg2"> <div class="pay-bg2">
<div class="top-view"> <div class="top-view">
<img src="../../assets/images/pay/top-bj.png" alt class="bj" v-if="!isSystem" /> <img src="../../assets/images/pay/top-bj.png" alt class="bj" v-if="!isWeappPay" />
<img src="../../assets/images/pay/top-bj-ios.png" alt class="bj" v-if="isSystem" /> <img src="../../assets/images/pay/top-bj-ios.png" alt class="bj" v-if="isWeappPay" />
<img <img src="../../assets/images/pay/top-btn.png" alt class="btn" @click="goPay" v-if="!isWeappPay" />
src="../../assets/images/pay/top-btn.png" <a :href="`https://mp.weixin.qq.com/s/dQVf6EWwCGJOthUbpIrQMg?v=${Date.parse(new Date())}`" v-if="isWeappPay">
alt <img src="../../assets/images/pay/top-btn-ios.png" alt class="btn" @click="goPayIos" v-if="isWeappPay" />
class="btn"
@click="goPay"
v-if="!isSystem"
/>
<a
:href="`https://mp.weixin.qq.com/s/dQVf6EWwCGJOthUbpIrQMg?v=${Date.parse(new Date())}`"
v-if="isSystem"
>
<img
src="../../assets/images/pay/top-btn-ios.png"
alt
class="btn"
@click="goPayIos"
v-if="isSystem"
/>
</a> </a>
<img src="../../assets/images/pay/c1.png" alt class="content" /> <img src="../../assets/images/pay/c1.png" alt class="content" />
</div> </div>
...@@ -30,7 +15,7 @@ ...@@ -30,7 +15,7 @@
<img src="../../assets/images/pay/c4.png" alt class="c4" /> <img src="../../assets/images/pay/c4.png" alt class="c4" />
<img src="../../assets/images/pay/c5.png" alt class="c5" /> <img src="../../assets/images/pay/c5.png" alt class="c5" />
</div> </div>
<div class="btn-box" v-if="!isSystem"> <div class="btn-box" v-if="!isWeappPay">
<div class="text"> <div class="text">
<div class="fle"> <div class="fle">
<div class="l">特惠价</div> <div class="l">特惠价</div>
...@@ -38,17 +23,14 @@ ...@@ -38,17 +23,14 @@
<div class="r">原价999.00</div> <div class="r">原价999.00</div>
</div> </div>
<!-- <div class="r" v-else>课程有效期剩余{{expireDay}}天</div> --> <!-- <div class="r" v-else>课程有效期剩余{{expireDay}}天</div> -->
<div class="new-b" v-if="orderStatus === 0">课程有效期剩余{{expireDay}}天</div> <div class="new-b" v-if="orderStatus === 0">课程有效期剩余{{ expireDay }}天</div>
</div> </div>
<div class="btn" @click="goPay" v-if="orderStatus === 100">立即购买</div> <div class="btn" @click="goPay" v-if="orderStatus === 100">立即购买</div>
<div class="btn" v-if="orderStatus === 1" @click="goHome">已购买</div> <div class="btn" v-if="orderStatus === 1" @click="goHome">已购买</div>
<div class="btn" v-if="orderStatus === -1" @click="goMyOrder">待支付</div> <div class="btn" v-if="orderStatus === -1" @click="goMyOrder">待支付</div>
<div class="btn" @click="goPay" v-if="orderStatus === 0">续费</div> <div class="btn" @click="goPay" v-if="orderStatus === 0">续费</div>
</div> </div>
<a <a :href="`https://mp.weixin.qq.com/s/dQVf6EWwCGJOthUbpIrQMg?v=${Date.parse(new Date())}`" v-if="isWeappPay">
:href="`https://mp.weixin.qq.com/s/dQVf6EWwCGJOthUbpIrQMg?v=${Date.parse(new Date())}`"
v-if="isSystem"
>
<div class="b-b-i"> <div class="b-b-i">
<img @click="goPayIos" src="../../assets/images/pay/bottom-btn-ios.png" alt /> <img @click="goPayIos" src="../../assets/images/pay/bottom-btn-ios.png" alt />
</div> </div>
...@@ -88,7 +70,8 @@ ...@@ -88,7 +70,8 @@
</div> </div>
</template> </template>
<script> <script>
import { ImagePreview, Toast } from 'vant' import { mapState } from 'vuex'
import { ImagePreview } from 'vant'
import * as api from '@/api/pay.js' import * as api from '@/api/pay.js'
import { getUser } from '@/api/account' import { getUser } from '@/api/account'
...@@ -97,14 +80,11 @@ export default { ...@@ -97,14 +80,11 @@ export default {
title: '课程详情' title: '课程详情'
}, },
components: { components: {
[ImagePreview.name]: ImagePreview, [ImagePreview.name]: ImagePreview
[Toast.name]: Toast
}, },
data() { data() {
const productId = webConf.isDev === 'production' ? '6684359515615264768' : '6682927830365372416' const productId = webConf.isDev === 'production' ? '6684359515615264768' : '6682927830365372416'
// Toast(productId)
return { return {
isSystem: 1,
isPopShow: false, isPopShow: false,
expireDay: 0, expireDay: 0,
userId: '', userId: '',
...@@ -119,8 +99,11 @@ export default { ...@@ -119,8 +99,11 @@ export default {
orderStatus: 100 orderStatus: 100
} }
}, },
created() { computed: {
this.appSource() ...mapState(['isWeapp', 'isAndroid', 'isIos', 'isVip', 'isLogin']),
isWeappPay() {
return this.isWeapp && !this.isIos
}
}, },
mounted() { mounted() {
this.getOrder() this.getOrder()
...@@ -140,17 +123,6 @@ export default { ...@@ -140,17 +123,6 @@ export default {
} }
}, },
goPayIos() {}, goPayIos() {},
appSource() {
const u = navigator.userAgent
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
if (isiOS) {
// this.$utils.msgshow('ios')
this.isSystem = 1
} else {
// this.$utils.msgshow('安卓')
this.isSystem = 0
}
},
imagePreview() { imagePreview() {
ImagePreview(['https://zws-imgs-pub.ezijing.com/static/public/dcef7bc62237a077b10d7e49c44a1e51.jpg']) ImagePreview(['https://zws-imgs-pub.ezijing.com/static/public/dcef7bc62237a077b10d7e49c44a1e51.jpg'])
}, },
......
src/pages/pay/payPage.vue deleted 100644 → 0
浏览文件 @ cab5f3c1
<template>
<div class="pay-bg2">
<div class="top-view">
<img src="../../assets/images/pay/top-bj.png" alt class="bj" v-if="!isSystem" />
<img src="../../assets/images/pay/top-bj-ios.png" alt class="bj" v-if="isSystem" />
<img
src="../../assets/images/pay/top-btn.png"
alt
class="btn"
@click="goPay"
v-if="!isSystem"
/>
<a
:href="`https://mp.weixin.qq.com/s/dQVf6EWwCGJOthUbpIrQMg?v=${Date.parse(new Date())}`"
v-if="isSystem"
>
<img
src="../../assets/images/pay/top-btn-ios.png"
alt
class="btn"
@click="goPayIos"
v-if="isSystem"
/>
</a>
<img src="../../assets/images/pay/c1.png" alt class="content" />
</div>
<div class="main-cen">
<img src="../../assets/images/pay/c2.png" alt class="c2" />
<img src="../../assets/images/pay/c3.png" alt class="c3" />
<img src="../../assets/images/pay/c4.png" alt class="c4" />
<img src="../../assets/images/pay/c5.png" alt class="c5" />
</div>
<div class="btn-box" v-if="!isSystem">
<div class="text">
<div class="fle">
<div class="l">特惠价</div>
<div class="c">199.00</div>
<div class="r">原价999.00</div>
</div>
<!-- <div class="r" v-else>课程有效期剩余{{expireDay}}天</div> -->
<div class="new-b" v-if="orderStatus === 0">课程有效期剩余{{expireDay}}天</div>
</div>
<div class="btn" @click="goPay" v-if="orderStatus === 100">立即购买</div>
<div class="btn" v-if="orderStatus === 1" @click="goHome">已购买</div>
<div class="btn" v-if="orderStatus === -1" @click="goMyOrder">待支付</div>
<div class="btn" @click="goPay" v-if="orderStatus === 0">续费</div>
</div>
<a
:href="`https://mp.weixin.qq.com/s/dQVf6EWwCGJOthUbpIrQMg?v=${Date.parse(new Date())}`"
v-if="isSystem"
>
<div class="b-b-i">
<img @click="goPayIos" src="../../assets/images/pay/bottom-btn-ios.png" alt />
</div>
</a>
<!-- <img src="../../assets/images/pay1.png" alt />
<img src="../../assets/images/pay2.png" alt />
<div class="img-con">
<img src="../../assets/images/pay3.png" alt />
<img src="../../assets/images/pay4.png" class="img4" alt />
</div>
<div class="pay-btn">
<div class="num">
¥
<span>199</span>.00
<i v-if="orderStatus === 0">课程有效期剩余{{expireDay}}天</i>
</div>
<div class="btn" @click="goPay" v-if="orderStatus === 100">立即购买</div>
<div class="btn active" v-if="orderStatus === 1" @click="goHome">已购买</div>
<div class="btn" v-if="orderStatus === -1" @click="goMyOrder">待支付</div>
<div class="btn xf" @click="goPay" v-if="orderStatus === 0">续费</div>
</div>-->
<pay-we-chart :requestParam="requestParam"></pay-we-chart>
<!-- isPopShow -->
<div class="succ-pop" v-if="isPopShow">
<div class="pop">
<div class="close" @click="isPopShow = false">×</div>
<div class="tit">恭喜您，课程已购买成功！</div>
<div class="txt">请添加客服微信，有任何问题可随时沟通客服。</div>
<img src="../../assets/images/pay/pay-izq.png" alt />
<a :href="`https://mp.weixin.qq.com/s/dQVf6EWwCGJOthUbpIrQMg?v=${Date.parse(new Date())}`">
<div class="btns">添加客服微信</div>
</a>
<!-- https://mp.weixin.qq.com/s/dQVf6EWwCGJOthUbpIrQMg -->
<!-- <img @click="imagePreview" src="https://zws-imgs-pub.ezijing.com/static/public/dcef7bc62237a077b10d7e49c44a1e51.jpg" alt=""> -->
</div>
</div>
</div>
</template>
<script>
import { ImagePreview } from 'vant'
import * as api from '@/api/pay.js'
import { getUser } from '@/api/account'
export default {
metaInfo: {
title: '课程详情'
},
components: {
[ImagePreview.name]: ImagePreview
},
data() {
const productId = webConf.isDev === 'production' ? '6684359515615264768' : '6682927830365372416'
return {
isSystem: 1,
isPopShow: false,
expireDay: 0,
userId: '',
requestParam: {
product_id: productId, // 提前设定
open_id: '', // 通过微信授权获取
prepay_id: '', // 通过调用接口获取
app_id: '', // 提前设定
app_secret: '' // 提前设定
},
orderStatusTime: null,
orderStatus: 100
}
},
created() {
this.appSource()
},
mounted() {
this.getOrder()
// api.getOrderStatus().then(res => {
// this.expireDay = res.expire_day
// this.orderStatus = res.status
// })
},
methods: {
async getOrder() {
const isLogin = await this.$store.dispatch('checkLogin')
if (isLogin) {
api.getOrderStatus().then(res => {
this.expireDay = res.expire_day
this.orderStatus = res.status
})
}
},
goPayIos() {},
appSource() {
const u = navigator.userAgent
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
if (isiOS) {
// this.$utils.msgshow('ios')
this.isSystem = 1
} else {
// this.$utils.msgshow('安卓')
this.isSystem = 0
}
},
imagePreview() {
ImagePreview(['https://zws-imgs-pub.ezijing.com/static/public/dcef7bc62237a077b10d7e49c44a1e51.jpg'])
},
async tikeOrderStatus() {
const isLogin = await this.$store.dispatch('checkLogin')
if (isLogin) {
this.orderStatusTime = setInterval(this.getOrderStatus, 1000)
}
},
// 已购买
goHome() {
this.$toast('您已购买全部服务，可直接使用')
},
// 支付
goPay() {
if (this.orderStatus === 1) {
this.$toast('您已购买全部服务，可直接使用')
return false
}
this.tikeOrderStatus()
wx.miniProgram.navigateTo({
url: `/pages/pay/index?data=${this.requestParam.product_id}`
})
},
// 去我的订单页面
goMyOrder() {
wx.miniProgram.navigateTo({
url: `/pages/web/index?src=${window.location.origin}/my/buyCourses`
})
},
// 获取订单状态
getOrderStatus() {
api.getOrderStatus().then(res => {
this.orderStatus = res.status
if (this.orderStatus === 1) {
this.isPopShow = true
this.orderStatusTime && clearInterval(this.orderStatusTime)
}
})
},
// 获取openID
getOpenid() {
getUser().then(res => {
api.getOpenid({ id: res.id, identity: 'transport' }).then(res => {
if (res.code === 0) {
this.requestParam.open_id = res.data.openid
}
})
})
}
},
destroyed() {
this.orderStatusTime && clearInterval(this.orderStatusTime)
}
}
</script>
<style lang="scss" scoped>
.pay-bg2 {
.top-view {
position: relative;
.bj {
width: 100%;
}
.btn {
position: absolute;
top: 3.25rem;
right: 0.7rem;
width: 3.42rem;
height: 0.85rem;
}
.content {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, 50%);
width: 6.58rem;
height: 2.82rem;
}
}
.main-cen {
padding: 1.9rem 0.52rem 2rem 0.52rem;
.c2 {
width: 100%;
}
.c3 {
margin-top: 0.5rem;
width: 100%;
}
.c4 {
margin-top: 0.5rem;
width: 100%;
}
.c5 {
margin-top: 0.5rem;
width: 100%;
}
}
.btn-box {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 1rem;
background: rgba(171, 27, 48, 1);
.btn {
position: absolute;
top: 0;
right: 0;
width: 3.3rem;
height: 1rem;
background: linear-gradient(-90deg, rgba(204, 157, 93, 1), rgba(247, 213, 161, 1));
font-size: 0.37rem;
color: rgba(80, 41, 3, 1);
line-height: 1rem;
text-align: center;
font-weight: bold;
}
.text {
.fle {
display: flex;
div {
line-height: 100%;
}
}
.l {
font-size: 0.22rem;
color: rgba(255, 255, 255, 1);
line-height: 100%;
margin: 0.43rem 0 0 0.34rem;
background: linear-gradient(-90deg, rgba(204, 158, 94, 1) 0%, rgba(247, 214, 161, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 0.8;
}
.c {
margin-top: 0.3rem;
margin-left: 0.15rem;
font-size: 0.44rem;
color: rgba(255, 255, 255, 1);
background: linear-gradient(-90deg, rgba(204, 158, 94, 1) 0%, rgba(247, 214, 161, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.r {
font-size: 0.22rem;
color: rgba(204, 158, 94, 1);
line-height: 100%;
opacity: 0.9;
margin: 0.43rem 0 0 0.17rem;
// background:linear-gradient(-90deg,rgba(204,158,94,1) 0%, rgba(247,214,161,1) 100%);
// -webkit-background-clip:text;
// -webkit-text-fill-color:transparent;
text-decoration: line-through;
}
.new-b {
font-size: 0.22rem;
color: rgba(255, 255, 255, 1);
line-height: 100%;
opacity: 0.8;
margin: 0 0 0 0.34rem;
background: linear-gradient(-90deg, rgba(204, 158, 94, 1) 0%, rgba(247, 214, 161, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
}
.succ-pop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
.pop {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
width: 5.9rem;
height: 6.98rem;
background: rgba(255, 255, 255, 1);
border-radius: 0.12rem;
.tit {
line-height: 1.1rem;
text-align: center;
font-size: 0.3rem;
color: #222;
font-weight: bold;
}
.txt {
width: 5.1rem;
font-size: 0.3rem;
color: rgba(34, 34, 34, 1);
margin: 0 auto;
}
// img{
// width: 4.3rem;
// height: 4.3rem;
// margin: 0.4rem auto;
// display: block;
// }
img {
width: 3.16rem;
height: 3rem;
margin: 0.6rem auto 0.45rem auto;
display: block;
}
.btns {
width: 4.5rem;
height: 0.7rem;
background: #c62245;
border-radius: 0.12rem;
margin: 0 auto;
text-align: center;
line-height: 0.7rem;
font-size: 0.3rem;
color: #fff;
}
.close {
position: absolute;
top: -0.8rem;
right: 0;
font-size: 0.6rem;
color: #fff;
}
}
}
.b-b-i {
position: fixed;
bottom: -0.01rem;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
height: 1.2rem;
img {
width: 6.4rem;
margin: 0.2rem auto 0 auto;
display: block;
}
padding-bottom: env(safe-area-inset-bottom);
}
</style>
src/router/routes.js
浏览文件 @ 649c27fd
...@@ -191,7 +191,7 @@ export default [ ...@@ -191,7 +191,7 @@ export default [
{ {
path: '/payPage', path: '/payPage',
name: 'payPage', name: 'payPage',
component: () => import('../pages/pay/payPage.vue') component: () => import('../pages/pay/index.vue')
// meta: { requiredLogin: true } // meta: { requiredLogin: true }
}, },
// 下载资料 // 下载资料
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论