Skip to content

T
transport-show-h5
提交 35607f4f authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

修改样式 修改支付页面

上级 b50e77de
隐藏空白字符变更
内嵌 并排
正在显示 包含 402 行增加 和 64 行删除
src/modules/exam-module/action/ExamAction.js
浏览文件 @ 35607f4f
......@@ -11,13 +11,16 @@ export default class ExamAction extends BaseACTION {
return res.code
}
const _data = JSON.parse(res.data)
const question = _data.sheet.questions.question_items.map(function(_) {
let num = 0
const question = _data.sheet.questions.question_items.map(function(_, index) {
return {
type: _.question_type,
score: _.score,
id: _.question_item_id,
question_list: _.question_list.map((e) => {
question_list: _.question_list.map((e, i) => {
num++
return {
num: num,
question_analysis: e.question_analysis,
question_answer: e.question_answer,
question_content: e.question_content,
......
src/modules/exam-module/src/ExamEnd.vue
浏览文件 @ 35607f4f
......@@ -36,14 +36,14 @@
<div v-else class="txt">您离成功还有一段距离，继续努力！</div>
</template>
<template v-else>
<div v-if="ratioNum >= 90" class="txt" style="text-align: left;">您的成绩不错呦，保持住，想进一步提升成绩，推荐您使用全部课程服务！</div>
<div v-else class="txt" style="text-align: left;">您距离拿证还有一段距离，急速拿证推荐您使用全部课程服务！</div>
<div v-if="ratioNum >= 90" class="txt" style="text-align: left;">您的成绩不错呦，保持住，想进一步提升成绩，推荐您使用全部考试服务！</div>
<div v-else class="txt" style="text-align: left;">您距离拿证还有一段距离，急速拿证推荐您使用全部考试服务！</div>
</template>
</div>
<div class="nl-btn" v-if="title == '考前摸底'">
<!-- <div class="btn" @click="goAbilityExam">重做测试</div>
<div class="btn" @click="goCourse">学习课程</div> -->
<div class="new-btn" @click="goVip">全部课程服务</div>
<div class="new-btn" @click="goVip">全部考试服务</div>
</div>
<div class="card">
<div class="tit">答题卡：</div>
......
src/modules/exam-module/src/ExamTopic.vue
浏览文件 @ 35607f4f
......@@ -14,14 +14,15 @@
<swiper ref="mySwiper" :options="swiperOptions">
<template v-for="(item) in questionsData.questions">
<template v-for="(dItem, dIndex) in item.question_list">
<swiper-slide :key="dIndex+dItem.id" :data-dId="dItem.id" :data-cId="item.id">
<!-- <answer :item="item" :dItem="dItem" :currentNum="currentNum" :questionsData="questionsData" :requestData="requestData" :requestData2="requestData2"></answer> -->
<swiper-slide :key="dIndex+dItem.id" :data-dId="dItem.id" :data-cId="item.id" :indexs="dItem.num">
<!-- v-if="dItem.num <= (countPage.currentPage + 1) * countPage.showQuestionNum && dItem.num >= ((countPage.currentPage == 1 ? 0 : countPage.currentPage) - 2) * countPage.showQuestionNum" -->
<div class="title">
<!-- {{dItem.num}}-{{(countPage.currentPage + 1) * countPage.showQuestionNum}}==={{dItem.num}}-{{((countPage.currentPage == 1 ? 0 : countPage.currentPage) - 2) * countPage.showQuestionNum}} -->
<div class="type" v-if="item.type == 1">单选题</div>
<div class="type" v-if="item.type == 2">多选题</div>
<div class="type" v-if="item.type == 5">案例题</div>
<div class="type" v-if="item.type == 6">判断题</div>
<div class="count">{{ currentNum }}/{{ questionsData.sheet.question_count }}</div>
<div class="count">{{ dItem.num }}/{{ questionsData.sheet.question_count }}</div>
</div>
<div class="topic-bt" v-if="item.type == '5'" v-html="dItem.common_content"></div>
<div class="topic" v-html="dItem.question_content">
......@@ -205,6 +206,10 @@ export default {
data () {
const _this = this
return {
countPage: {
currentPage: 1,
showQuestionNum: 10
},
collect: {
currentPages: false,
currentId: '',
......@@ -256,9 +261,16 @@ export default {
_this.sildesHeightCount()
_this.setCurrentCollect()
_this.getIsSign()
} else {
// if (this.activeIndex === 0) {
// _this.prevQuestionLoading()
// }
}
},
slideNextTransitionEnd: function() {
// if (this.activeIndex === this.slides.length - 2) {
// _this.nextQuestionLoading()
// }
if (this.activeIndex === _this.questionsData.sheet.question_count - 1) {
_this.swiperSign = _this.questionsData.sheet.question_count - 1
}
......@@ -319,6 +331,30 @@ export default {
this.answerInit()
},
methods: {
prevQuestionLoading() {
const qId = this.swiper.slides[this.swiper.activeIndex].attributes['data-cId'].nodeValue
console.log(qId, this.questionsData.questions)
// const item = this.questionData.list.find(item => { return item.question_id === qId })
},
nextQuestionLoading() {
// countPage: {
// currentPage: 1,
// showQuestionNum: 10
// },
const dId = this.swiper.slides[this.swiper.activeIndex].attributes['data-dId'].nodeValue
this.countPage.currentPage += this.countPage.currentPage
this.$nextTick(() => {
for (let i = 0; i < this.swiper.slides.length; i++) {
console.log(i)
if (this.swiper.slides[i].attributes['data-dId']) {
this.swiper.slides[i].attributes['data-dId'].nodeValue === dId && (this.swiper.slideTo(i, 0, false))
}
}
})
// console.log(dId, this.questionsData.questions)
// this.swiper.slideTo(0, 0, false)
// console.log(this.swiper.slides.length)
},
sildesHeightCount() {
// slides高度重新赋值
if (document.getElementById('bottom-view-btn') === null) {
......
src/pages/courseExam/abilityAnswer.vue
浏览文件 @ 35607f4f
......@@ -118,11 +118,11 @@ export default {
}
.btn{
width:6.7rem;
height:.7rem;
height:.8rem;
background:#C62245;
border-radius:.12rem;
text-align: center;
line-height: .7rem;
line-height: .8rem;
color: #fff;
font-size: .3rem;
}
......
src/pages/pay/index copy.vue 0 → 100644
浏览文件 @ 35607f4f
<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
浏览文件 @ 35607f4f
<template>
<div class="pay-bg">
<img src="../../assets/images/pay1.png" alt />
<div class="pay-bg2">
<div class="top-view">
<img src="../../assets/images/pay/top-bj.png" alt="" class="bj">
<img src="../../assets/images/pay/top-btn.png" alt="" class="btn" @click="goPay">
<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">
<div class="text">
<div class="l">特惠价</div>
<div class="c">199.00</div>
<div class="r" v-if="orderStatus != 0">原价999.00</div>
<div class="r" v-else>课程有效期剩余{{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>
<!-- <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 />
......@@ -16,7 +39,7 @@
<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>
</div> -->
<pay-we-chart :requestParam="requestParam"></pay-we-chart>
<div class="succ-pop" v-if="isPopShow">
<div class="pop">
......@@ -82,6 +105,10 @@ export default {
},
// 支付
goPay() {
if (this.orderStatus === 1) {
this.$toast('您已购买全部服务，可直接使用')
return false
}
this.tikeOrderStatus()
wx.miniProgram.navigateTo({
url: `/pages/pay/index?data=${this.requestParam.product_id}`
......@@ -120,61 +147,99 @@ export default {
}
</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;
.pay-bg2{
.top-view{
position: relative;
.bj{
width: 100%;
}
span {
font-size: 0.4rem;
.btn{
position: absolute;
top: 3.25rem;
right: .7rem;
width: 3.42rem;
height: .85rem;
}
.content{
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, 50%);
width: 6.58rem;
height: 2.82rem;
}
}
.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;
.main-cen{
padding: 1.9rem .52rem 1.5rem .52rem;
.c2{
width: 100%;
}
.c3{
margin-top: .5rem;
width: 100%;
}
.c4{
margin-top: .5rem;
width: 100%;
}
.c5{
margin-top: .5rem;
width: 100%;
}
}
}
.img-con{
background: #fff;
padding: .4rem .3rem 1.2rem .3rem;
.img4{
margin-top: .4rem;
.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:2.38rem;
height:1rem;
background:linear-gradient(-90deg,rgba(204,158,94,1),rgba(247,214,161,1));
font-size:.37rem;
color:rgba(81,42,4,1);
line-height:1rem;
text-align: center;
}
.text{
display: flex;
.l{
font-size:.22rem;
text-decoration:line-through;
color:rgba(255,255,255,1);
line-height:100%;
margin: .46rem 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-left: .15rem;
font-size:.44rem;
color:rgba(255,255,255,1);
line-height:1rem;
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:.22rem;
text-decoration:line-through;
color:rgba(255,255,255,1);
line-height:100%;
opacity:0.8;
margin: .44rem 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;
}
}
}
}
.succ-pop{
......
src/pages/pay/payPage.vue
浏览文件 @ 35607f4f
......@@ -8,6 +8,8 @@
<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">
<div class="text">
......@@ -176,6 +178,14 @@ export default {
margin-top: .5rem;
width: 100%;
}
.c4{
margin-top: .5rem;
width: 100%;
}
.c5{
margin-top: .5rem;
width: 100%;
}
}
.btn-box{
position: fixed;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论