|
|
@@ -4,79 +4,63 @@
|
|
|
|
|
|
<div class="section">
|
|
|
<h2 class="title line_bottom">课程</h2>
|
|
|
- <div v-for="s in mainSubject" :key="s.courseId">
|
|
|
- <p class="indate line_bottom" v-if="s.chargeMode >= 26"><span>现价:￥580</span></p>
|
|
|
- <div class="options" v-if="s.chargeMode < 26" key="yuetuan">
|
|
|
- <div class="option">
|
|
|
- <div class="0_hd"><i class="check_default check_active"></i></div>
|
|
|
- <div class="o_bd">乐团课</div>
|
|
|
- <span class="o_ft">
|
|
|
- <del>原价:￥23520</del> 现价:￥{{ s.buyCount * s.price }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="options" v-else key="yuetuan">
|
|
|
- <div class="option">
|
|
|
- <div class="0_hd"><i class="check_default check_active"></i></div>
|
|
|
- <div class="o_bd">乐团声部训练</div>
|
|
|
- </div>
|
|
|
- <div class="option">
|
|
|
- <div class="0_hd"><i class="check_default check_active"></i></div>
|
|
|
- <div class="o_bd">乐团合奏训练</div>
|
|
|
- </div>
|
|
|
- <div class="option">
|
|
|
- <div class="0_hd"><i class="check_default check_active"></i></div>
|
|
|
- <div class="o_bd">基础技能训练</div>
|
|
|
- </div>
|
|
|
- <div class="option">
|
|
|
- <div class="0_hd"><i class="check_default check_active"></i></div>
|
|
|
- <div class="o_bd">假期集中训练</div>
|
|
|
+ <div class="options">
|
|
|
+ <div v-for="s in classInfo" :key="s.courseId">
|
|
|
+ <div class="item" v-if="s.classType == 2">
|
|
|
+ <div class="option" @click="onSelect(s)">
|
|
|
+ <div class="0_hd"><i class="check_default" :class="[s.status ? 'check_active' : '']"></i></div>
|
|
|
+ <div class="o_bd">乐团课</div>
|
|
|
+ <span class="o_ft">价格：￥{{ s.buyCount * s.price }}</span>
|
|
|
+ </div>
|
|
|
+ <p class="timer">开课周期：{{ s.startCycel }}</p>
|
|
|
+ <!-- <input class="inputAmount" type="number" @keyup="calcAmount" v-model="s.inputNumber" pattern="[0-9]" placeholder="输入金额"> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="coutInfo n" v-if="s.chargeMode >= 26">
|
|
|
- <i class="trumpet_icon"></i>年度安排十个月训练，共计168课时，120元/课时，原价20160元，现仅支付560元/月（约合34.5元/课时）
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
- <div class="section" v-for="c in classInfo" :key="c.courseId">
|
|
|
- <div class="options">
|
|
|
- <div class="option">
|
|
|
- <div class="0_hd"><i class="check_default check_active"></i></div>
|
|
|
- <div class="o_bd">提高课（{{ c.buyCount }}次）</div>
|
|
|
- <span class="o_ft">
|
|
|
- <del>原价:￥23520</del> 现价:￥{{ c.buyCount * c.price }}
|
|
|
- </span>
|
|
|
+ <div v-for="c in classInfo" :key="c.courseId">
|
|
|
+ <div class="section" v-if="c.classType != 2">
|
|
|
+ <div class="options">
|
|
|
+ <div class="option" @click="onSelect(c)">
|
|
|
+ <div class="0_hd"><i class="check_default" :class="[c.status ? 'check_active' : '']"></i></div>
|
|
|
+ <div class="o_bd">提高课</div>
|
|
|
+ <span class="o_ft">
|
|
|
+ 现价:￥{{ c.smallAmount }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="classInfo">
|
|
|
- <div class="class">
|
|
|
- <p>课程名称：{{ c.className }} </p>
|
|
|
- <p>学习科目：{{ c.subNames }}</p>
|
|
|
- <p>每课时长：{{ c.duration }}分钟 </p>
|
|
|
+ <div class="classInfo">
|
|
|
+ <div class="class">
|
|
|
+ <p>学习科目：{{ c.subNames }}</p>
|
|
|
+ <p>指导老师：{{ c.teaNames }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="class">
|
|
|
+ <p>开课周期：{{ c.startCycel }}</p>
|
|
|
+ <!-- <p>计划开课周期：{{ c.planCycle }}</p> -->
|
|
|
+ <p>每课时长：{{ c.duration }}分钟</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="class">
|
|
|
-
|
|
|
- <p>指导老师：{{ c.teaNames }}</p>
|
|
|
- <p>计划开课时间：{{ c.planBegin }}</p>
|
|
|
- <p>计划开课周期：{{ c.planCycle }}</p>
|
|
|
+ <div class="classTime">
|
|
|
+ <p class="title">购买次数：</p>
|
|
|
+ <div class="ct_button_group">
|
|
|
+ <span @click="fixationTimer(t, c)" v-for="t in classTimer" :key="t.timer" :class="[t.status?'active':'']">{{ t.timer }}次</span>
|
|
|
+ </div>
|
|
|
+ <input type="number" placeholder="输入次数" @keyup="calcAmount(c)" v-model="c.inputNumber" class="inputTime" pattern="[0-9]">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="buy">
|
|
|
- <div class="price">
|
|
|
- <p class="oldprice">
|
|
|
+ <div class="price">
|
|
|
+ <!-- <p class="oldprice">
|
|
|
<del class="text">原价</del>
|
|
|
- <del>{{ orderInfo.marketPrice }}￥</del>
|
|
|
- </p>
|
|
|
+ <del>￥{{ orderInfo.marketPrice }}</del>
|
|
|
+ </p> -->
|
|
|
<p class="now_price">
|
|
|
<span class="text">仅需支付</span>
|
|
|
- <span>{{ orderInfo.referencePrice }}￥</span>
|
|
|
+ <span>￥{{ orderInfo.referencePrice }}</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
<a @click="buy">购买</a>
|
|
|
@@ -86,47 +70,188 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { payment } from '../mockjs/payment.js'
|
|
|
+// import { payment } from '../mockjs/payment.js'
|
|
|
+import { Dialog } from 'vant'
|
|
|
import qs from 'qs'
|
|
|
export default {
|
|
|
name: 'payment',
|
|
|
+ components: { Dialog },
|
|
|
data() {
|
|
|
return {
|
|
|
type: true,
|
|
|
- classInfo: [], // 小课信息
|
|
|
- mainSubject: [], // 主课程
|
|
|
+ classInfo: [],
|
|
|
+ // mainSubject: [], // 主课程
|
|
|
// 金额列表，金额计算
|
|
|
orderInfo: {
|
|
|
marketPrice: 0, // 原价总金额
|
|
|
referencePrice: 0, // 现价总金额
|
|
|
}, // 信息列表
|
|
|
+ classTimer: [{
|
|
|
+ status: true,
|
|
|
+ timer: 10
|
|
|
+ },{
|
|
|
+ status: false,
|
|
|
+ timer: 20
|
|
|
+ },{
|
|
|
+ status: false,
|
|
|
+ timer: 40
|
|
|
+ }]
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
- // let result = payment
|
|
|
-
|
|
|
let userId = this.$route.query.userId
|
|
|
axios.post('/user/queryUserCourse', qs.stringify({ userId: userId })).then((res) => {
|
|
|
- console.log(res)
|
|
|
let data = res.data.data
|
|
|
if(!res.data.data) {
|
|
|
throw '数据为空'
|
|
|
}
|
|
|
+ let subjectStatus = false // 过滤数据 乐团课只需要显示一条数据
|
|
|
data.forEach(el => {
|
|
|
- this.orderInfo.referencePrice += el.buyCount * el.price
|
|
|
- if(el.classType == 2) {
|
|
|
- this.mainSubject.push(el)
|
|
|
- this.orderInfo.marketPrice += 23520
|
|
|
- } else {
|
|
|
+ el.status = false // 状态
|
|
|
+ el.inputNumber = null // 输入的内容
|
|
|
+ el.smallAmount = 0 // 小课金额
|
|
|
+ // 开课周期
|
|
|
+ el.startCycel = this.weekSelect(5) + ' ' + el.planBegin.split(' ')[1]
|
|
|
+
|
|
|
+ // 课程
|
|
|
+ if(!subjectStatus && el.classType == 2) {
|
|
|
this.classInfo.push(el)
|
|
|
- this.orderInfo.marketPrice += 0
|
|
|
+ subjectStatus = true
|
|
|
}
|
|
|
+ // 小课
|
|
|
+ if(el.classType == 1) {
|
|
|
+ this.classInfo.push(el)
|
|
|
+ }
|
|
|
+
|
|
|
})
|
|
|
+ this.calcAmount() // 计算金额
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
buy() {
|
|
|
- alert('请不要购买了')
|
|
|
+ let [record, timer] = [0, 0] // 购买课次数据
|
|
|
+ let params = {
|
|
|
+ userId: this.$route.query.userId
|
|
|
+ }
|
|
|
+ this.classTimer.forEach(ct => {
|
|
|
+ if(ct.status) {
|
|
|
+ timer = ct.timer
|
|
|
+ }
|
|
|
+ })
|
|
|
+ let cour = {}
|
|
|
+ this.classInfo.forEach(c => {
|
|
|
+ if(c.classType == 2 && c.status) {
|
|
|
+ cour = {
|
|
|
+ courseId: c.courseId,
|
|
|
+ buyCount: c.buyCount,
|
|
|
+ price: c.price
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(c.classType == 1 && c.status) {
|
|
|
+ cour = {
|
|
|
+ courseId: c.courseId,
|
|
|
+ buyCount: c.buyCount,
|
|
|
+ price: c.price
|
|
|
+ }
|
|
|
+ if(timer) {
|
|
|
+ cour.buyCount = timer
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(c.status) {
|
|
|
+ record++
|
|
|
+ }
|
|
|
+ })
|
|
|
+ params.courses = JSON.stringify(cour)
|
|
|
+ if(!record) {
|
|
|
+ Dialog.alert({
|
|
|
+ title: '提示',
|
|
|
+ message: '请选择续费课程'
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ axios.post('/yqpay/renewalsPay', qs.stringify(params)).then(res => {
|
|
|
+ let result = res.data
|
|
|
+ if(result.status) {
|
|
|
+ document.querySelector('#onSubmit').action = result.data.host
|
|
|
+ document.querySelector('#apiContent').value = result.data.apiContent
|
|
|
+ document.querySelector('#merNo').value = result.data.merNo
|
|
|
+ document.querySelector('#notifyUrl').value = result.data.notifyUrl
|
|
|
+ document.querySelector('#sign').value = result.data.sign
|
|
|
+ document.querySelector('#signType').value = result.data.signType
|
|
|
+ document.querySelector('#timestamp').value = result.data.timestamp
|
|
|
+ document.querySelector('#version').value = result.data.version
|
|
|
+ document.querySelector('#onSubmit').submit()
|
|
|
+ } else {
|
|
|
+ Dialog.alert({
|
|
|
+ title: '提示',
|
|
|
+ message: result.msg
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onSelect(item) {
|
|
|
+ this.classInfo.forEach(e => {
|
|
|
+ e.status = false
|
|
|
+ })
|
|
|
+ item.status = true
|
|
|
+ this.calcAmount()
|
|
|
+ },
|
|
|
+ // 固定次数计算
|
|
|
+ fixationTimer(t, item) {
|
|
|
+ item.inputNumber = null
|
|
|
+ this.classTimer.forEach(e => {
|
|
|
+ e.status = false
|
|
|
+ })
|
|
|
+ t.status = true
|
|
|
+ let amount = t.timer * item.price
|
|
|
+ item.smallAmount = amount
|
|
|
+ // 如果当前课程选中则需要重新计算金额
|
|
|
+ if(item.status) {
|
|
|
+ this.orderInfo.referencePrice = amount
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 计算总金额
|
|
|
+ calcAmount(item) {
|
|
|
+ let timer, c = this.classInfo
|
|
|
+ this.classTimer.forEach(ct => {
|
|
|
+ // 判断是否从 Input 里面输入的
|
|
|
+ if(item && item.inputNumber) {
|
|
|
+ ct.status = false
|
|
|
+ }
|
|
|
+ if(ct.status) {
|
|
|
+ timer = ct.timer
|
|
|
+ }
|
|
|
+ })
|
|
|
+ c.forEach(e => {
|
|
|
+ // 小课现价
|
|
|
+ let amount = timer ? (timer * e.price) : e.inputNumber * e.price
|
|
|
+ e.smallAmount = amount
|
|
|
+
|
|
|
+ if(e.status) {
|
|
|
+ if(e.classType == 2) {
|
|
|
+ this.orderInfo.referencePrice = e.price * e.buyCount
|
|
|
+ } else {
|
|
|
+ // 判断是否有选中固定次数
|
|
|
+ this.orderInfo.referencePrice = amount
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ weekSelect(num) {
|
|
|
+ // 计算是周几
|
|
|
+ let res = num.toString(2).split('').reverse() // 转换成二进制 并分割成数组 反转
|
|
|
+ let strArr = []
|
|
|
+ parseInt(res[0]) ? strArr.push('周一') : ''
|
|
|
+ parseInt(res[1]) ? strArr.push('周二') : ''
|
|
|
+ parseInt(res[2]) ? strArr.push('周三') : ''
|
|
|
+ parseInt(res[3]) ? strArr.push('周四') : ''
|
|
|
+ parseInt(res[4]) ? strArr.push('周五') : ''
|
|
|
+ parseInt(res[5]) ? strArr.push('周六') : ''
|
|
|
+ parseInt(res[6]) ? strArr.push('周七') : ''
|
|
|
+
|
|
|
+ strArr = strArr.join('和')
|
|
|
+ return strArr
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -158,47 +283,19 @@ header {
|
|
|
font-size: .2rem;
|
|
|
line-height: .28rem;
|
|
|
font-weight: bold;
|
|
|
- }
|
|
|
- .indate {
|
|
|
- font-size: .12rem;
|
|
|
- padding: .05rem 0;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- span {
|
|
|
- color: #FA101D;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .coutInfo {
|
|
|
- font-size: .12rem;
|
|
|
- color: #ACACAC;
|
|
|
- border-top: 1px solid #ededed;
|
|
|
- padding: .12rem 0 0;
|
|
|
- margin-top: .1rem;
|
|
|
-
|
|
|
- &.n {
|
|
|
- font-size: .12rem;
|
|
|
- color: #F85043;
|
|
|
- text-align: left;
|
|
|
- border-top: 1px solid #ededed;
|
|
|
- padding: .12rem 0 0 .15rem;
|
|
|
- margin-top: .1rem;
|
|
|
- position: relative;
|
|
|
- .trumpet_icon {
|
|
|
- width: .14rem;
|
|
|
- height: .12rem;
|
|
|
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAYCAYAAADpnJ2CAAAAAXNSR0IArs4c6QAAAyZJREFUSA21Vk1IVFEUPufOezNilJXQD2UQRERamWhBaUWOSS3U0SawdgZai2gR0aoQXPSDm3JRCbm0xZBjbkQZS0KDjKywDCIIkoKKEIkm35uZezr32X0jQ+bY2IU359xzzj3fPXe++4PwDy0W8JdKgjYCWOkzzWIM9X5NN42RbqCKoxOHl1nR2FVJ1MRgqGzxhCxg8VDp6TSRTpCKsQL+aitqjwPRKQ3mjCVygFPz2MGKQqvG/zxW56+c7ZsXkIJH1liB8hARdQPButmD59WR8mUCuqy6ynwd686OmpsN++XjLUiYrZ0g5E6SdJmAVri2FMWDnnIz3P8gxex07Rp/owS6jQij3h1lu7G5Oe5UOF1bcc5+MTRFlBiTEH/iflLe+htYKsh0oHwzBcpztd3bHWlHxPtEUMTFHFV2YdceOglStnLiZGV6xEIlwbBF+JQaqpa6Qw246OiUOKOkICnPus4MFYGik7m80Z6MXtCpfKHIGBN6kIm2x66tLBJM7q3amak0DbqEgD84eQNzwiUkE+Wmk1vGjwtmnydTID0eQ5EpLoDZTGvjr4b2absXzGdKlwC73FloZ6aSSTKocjC7kyu3Ku8D2xOAuOk/ANKEAwhivZKqYXt7jFdyAnl7LTrgDMTcv4sOyCddnlOVnKlU6dTYaPKS5hHg5IIO77nnnfTw0h1QPTTgjWv9MrGB97ki5zvh/JmuJzOFgv4cPm9rGO6TUVD6SGezhV2sdF7OEcEB49qRqbRi0MKVLEEBHXxu8i6YabzMpx1NGJ18OIjr2pG5pHqu7r13efY1ncsK+rfxvtzPW2LY29U3Krxd/Xe4c55PiKgO+meJsNeHVIIdPd/dHHFoUToitSnpsDQrHGn1FpbmoMcoEIJPA/0BNvFEJlVgOi0rPPAWwwPfdKy6nphE1c71tL3snrK796EOSpVUX7Xano628cBgqk/157oP1Y1PcTkChDEwzRJfqNfhyrz7EO/2fPaFI8dAiGqe3sc/gc5pI3wtPFCrwVTcvBXOTuY8on7GrqBMvms8wjhodvWl/YhaEKAG//1MvMHXUO5Cn4m/ACXBMJBwQaFpAAAAAElFTkSuQmCC) no-repeat center;
|
|
|
- background-size: contain;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: .14rem;
|
|
|
- }
|
|
|
+ &::before {
|
|
|
+ content: ' ';
|
|
|
+ width: .04rem;
|
|
|
+ height: 0.15rem;
|
|
|
+ background: #14928a;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: .07rem;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.options {
|
|
|
- padding-top: .08rem;
|
|
|
+ // padding-top: .08rem;
|
|
|
.option {
|
|
|
line-height: .26rem;
|
|
|
font-size: .15rem;
|
|
|
@@ -234,6 +331,28 @@ header {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.item {
|
|
|
+ position: relative;
|
|
|
+ border-bottom: 1px solid #ededed;
|
|
|
+ padding: .2rem 0;
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: 0;
|
|
|
+ }
|
|
|
+ .timer {
|
|
|
+ font-size: .14rem;
|
|
|
+ color: #ACACAC;
|
|
|
+ }
|
|
|
+ .inputAmount {
|
|
|
+ position: absolute;
|
|
|
+ top: .2rem;
|
|
|
+ right: 0;
|
|
|
+ width: 1.08rem;
|
|
|
+ height: .4rem;
|
|
|
+ border-radius: 5px;
|
|
|
+ border: 1px solid rgba(238,238,238,1);
|
|
|
+ padding-left: .08rem;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
.classInfo {
|
|
|
color: #ACACAC;
|
|
|
@@ -245,6 +364,39 @@ header {
|
|
|
padding-top: .08rem;
|
|
|
line-height: .22rem;
|
|
|
}
|
|
|
+.classTime {
|
|
|
+ color: #ACACAC;
|
|
|
+ font-size: .12rem;
|
|
|
+ .ct_button_group {
|
|
|
+ padding-top: .08rem;
|
|
|
+ padding-bottom: .15rem;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ span {
|
|
|
+ width: 1rem;
|
|
|
+ line-height: .36rem;
|
|
|
+ text-align: center;
|
|
|
+ background:rgba(255,255,255,1);
|
|
|
+ border-radius:5px;
|
|
|
+ font-size: .14rem;
|
|
|
+ color: #444444;
|
|
|
+ border:1px solid rgba(226,224,224,1);
|
|
|
+ &.active {
|
|
|
+ background: #14928A;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .inputTime {
|
|
|
+ width: calc(100% - .08rem);
|
|
|
+ height: .4rem;
|
|
|
+ border-radius:5px;
|
|
|
+ border:1px solid rgba(238,238,238,1);
|
|
|
+ padding-left: .08rem;
|
|
|
+ font-size: .14rem;
|
|
|
+ color: #444;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
.buy {
|
|
|
position: fixed;
|
