Skip to content

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

优化购买页面

上级 cab5f3c1
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 17 行增加 和 269 行删除
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>
<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"
/>
<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="isWeappPay" />
<img src="../../assets/images/pay/top-btn.png" alt class="btn" @click="goPay" v-if="!isWeappPay" />
<a :href="`https://mp.weixin.qq.com/s/dQVf6EWwCGJOthUbpIrQMg?v=${Date.parse(new Date())}`" v-if="isWeappPay">
<img src="../../assets/images/pay/top-btn-ios.png" alt class="btn" @click="goPayIos" v-if="isWeappPay" />
</a>
<img src="../../assets/images/pay/c1.png" alt class="content" />
</div>
......@@ -30,7 +15,7 @@
<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="btn-box" v-if="!isWeappPay">
<div class="text">
<div class="fle">
<div class="l">特惠价</div>
......@@ -38,17 +23,14 @@
<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 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"
>
<a :href="`https://mp.weixin.qq.com/s/dQVf6EWwCGJOthUbpIrQMg?v=${Date.parse(new Date())}`" v-if="isWeappPay">
<div class="b-b-i">
<img @click="goPayIos" src="../../assets/images/pay/bottom-btn-ios.png" alt />
</div>
......@@ -88,7 +70,8 @@
</div>
</template>
<script>
import { ImagePreview, Toast } from 'vant'
import { mapState } from 'vuex'
import { ImagePreview } from 'vant'
import * as api from '@/api/pay.js'
import { getUser } from '@/api/account'
......@@ -97,14 +80,11 @@ export default {
title: '课程详情'
},
components: {
[ImagePreview.name]: ImagePreview,
[Toast.name]: Toast
[ImagePreview.name]: ImagePreview
},
data() {
const productId = webConf.isDev === 'production' ? '6684359515615264768' : '6682927830365372416'
// Toast(productId)
return {
isSystem: 1,
isPopShow: false,
expireDay: 0,
userId: '',
......@@ -119,8 +99,11 @@ export default {
orderStatus: 100
}
},
created() {
this.appSource()
computed: {
...mapState(['isWeapp', 'isAndroid', 'isIos', 'isVip', 'isLogin']),
isWeappPay() {
return this.isWeapp && !this.isIos
}
},
mounted() {
this.getOrder()
......@@ -140,17 +123,6 @@ export default {
}
},
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'])
},
......
src/pages/pay/payPage.vue deleted 100644 → 0
浏览文件 @ cab5f3c1
差异被折叠。
src/router/routes.js
浏览文件 @ 649c27fd
......@@ -191,7 +191,7 @@ export default [
{
path: '/payPage',
name: 'payPage',
component: () => import('../pages/pay/payPage.vue')
component: () => import('../pages/pay/index.vue')
// meta: { requiredLogin: true }
},
// 下载资料
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论