You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
482 lines
16 KiB
482 lines
16 KiB
<template>
|
|
<view class="onLineCourseWrap" v-show="courseItem.courseName">
|
|
<view class="onLineTitle">
|
|
<img src="http://image.bjkeyware.com/static/index/olCourse.png" alt="">
|
|
<view style="max-width: calc(100% - 100rpx);word-break: break-all">{{ courseItem.courseName }}</view>
|
|
</view>
|
|
<view class="onLineTime">时间: {{ yyyDate(courseItem.courseTime) }}</view>
|
|
<view class="onLineTeacher">讲师：{{ courseItem.instructor }}</view>
|
|
<view class="onLine" v-show="courseItem.title">职称：{{ courseItem.title }}</view>
|
|
<view class="onLineContent">授课内容: {{ courseItem.courseContent }}</view>
|
|
<view class="onLineMask" v-show="maskShow">
|
|
<!-- <img src="http://image.bjkeyware.com/static/index/arr.png" alt=""> -->
|
|
<img src="" alt="">
|
|
<view class="learnBtnWrap">
|
|
<view v-if="courseItem.status == '1'" class="learnBtn" @click="startLearn('pay')">付费学习￥{{
|
|
courseItem.amount }}</view>
|
|
<view v-if="courseItem.status == '1'" class="passBtn" @click="startLearn('code')">输入口令学习</view>
|
|
</view>
|
|
</view>
|
|
<view v-show="!maskShow" class="startLeranBtn" @click="urlShow = true">开始学习</view>
|
|
<u-modal v-model="show" title="请输入口令" :show-confirm-button="false">
|
|
<view class="slot-content">
|
|
<view class="input-list">
|
|
<!-- input输入框 -->
|
|
<input class="input-item" v-if="focus" adjust-position="false" auto-blur="true"
|
|
@blur="inputCodeBlur" @input="inputCode" :focus="focus" v-model="code" @focus="inputFocus"
|
|
type="number" oneTimeCode maxlength="6" />
|
|
<!-- 验证码输入框 -->
|
|
<view class="code-list" @click="focusClick">
|
|
<view class="code-item" v-for="(_, index) in 4" :key="index"
|
|
:style="(index == code.length && focus ? 'border-color:#3c9cff;' : '')">{{ code[index] || ''
|
|
}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="codeBtnCoup">
|
|
<view class="codeBtn canle" @click="show = false">取消</view>
|
|
<view class="codeBtn sure" @click="submitCode">确定</view>
|
|
</view>
|
|
</view>
|
|
</u-modal>
|
|
<u-modal v-model="urlShow" title="学习链接" :show-confirm-button="false">
|
|
<view class="slot-content">
|
|
<view class="courseContent" style="text-align: center;">
|
|
<view style="color: #2084F9;">请使用腾讯会议打开</view>
|
|
<view style="font-weight: 500;">{{ courseItem.url }}</view>
|
|
</view>
|
|
<view class="codeBtnCoup" style="justify-content: center;margin-top: 0;">
|
|
<view class="codeBtn sure" style="width: 80%;border-radius: 5rpx;" @click="copy">复制</view>
|
|
</view>
|
|
</view>
|
|
</u-modal>
|
|
<!-- <u-popup style="background:#66666;padding: 20px;" v-model="isPopupShow" @close="close" mode="bottom"
|
|
length="80%" height='60%' border-radius="15" :closeable='true' :mask-close-able="false">
|
|
<view style="background:#66666;padding:15px 20px 30px 20px; ">
|
|
<view style="background-color: #FFFFFF;">
|
|
<view class="horizontalline"></view>
|
|
<view>
|
|
<view class="commodity">
|
|
<p>课程名称：</p>
|
|
<p style="color:#333333;">{{ courseItem.courseName }}</p>
|
|
</view>
|
|
<view class="commodity">
|
|
<p>商品价格：</p>
|
|
<p style="color:#333333;">
|
|
<span>￥{{ '9.9' }}</span>
|
|
</p>
|
|
</view>
|
|
<view class="commodity">
|
|
<p>支付金额：</p>
|
|
<p style="color:#FD461A;margin-top: -3px;" v-if="addPriceAll != 0">
|
|
<span>¥ </span>
|
|
<span style="font-size:40rpx;margin-left:10rpx;font-weight: 800;">{{ addPriceAll
|
|
}}</span>
|
|
</p>
|
|
<p style="color:#FD461A;margin-top: -3px;" v-else>
|
|
<span>限时免费</span>
|
|
</p>
|
|
</view>
|
|
<view class="commodity">
|
|
<p>支付方式：</p>
|
|
<p style="color:#FD461A;margin-top: -3px;">
|
|
<u-radio-group v-model="payTypeBig" placement="row">
|
|
<u-radio name="0">微信支付</u-radio>
|
|
<u-radio name="1" :disabled="lingqianIS">{{ lingqianIS ? '零钱不足' : '零钱' }}</u-radio>
|
|
</u-radio-group>
|
|
</p>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-line></u-line>
|
|
<view class="codeBtnCoup" style="justify-content: center;">
|
|
<view class="codeBtn sure" style="width: 80%;" @click="payOrder">支付</view>
|
|
</view>
|
|
</u-popup> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { dateFormat } from '../../../utils/util';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
maskShow: true,
|
|
show: false,
|
|
focus: false,
|
|
code: '',
|
|
courseItem: {},
|
|
courseId: '',
|
|
urlShow: false,
|
|
url: '',
|
|
learnStatus: false,
|
|
// isPopupShow: false,
|
|
// payTypeBig: '0',
|
|
// lingqianIS: false
|
|
}
|
|
},
|
|
computed: {
|
|
yyyDate() {
|
|
return function (val) {
|
|
return dateFormat(new Date(val))
|
|
}
|
|
}
|
|
},
|
|
onLoad(course) {
|
|
const id = course.courseId
|
|
this.courseId = id
|
|
this.http.quickGet('/course/online/course/' + id).then(res => {
|
|
this.courseItem = res.data.data
|
|
if ((this.courseItem.status == 0) || course.learnStatus == 'true') {
|
|
this.maskShow = false
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
payOrder() {
|
|
|
|
},
|
|
close() {
|
|
this.isPopupShow = false
|
|
// console.log('close');
|
|
},
|
|
startLearn(val) {
|
|
if (val == 'code') {
|
|
this.show = true
|
|
} else if (val == 'pay') {
|
|
// this.isPopupShow = true
|
|
this.toPay()
|
|
}
|
|
// this.toggleFlag = 'tolearn'
|
|
},
|
|
toPay() {
|
|
const userinform = uni.getStorageSync('wxUserInfo');
|
|
const id = userinform.userId
|
|
// const data = {
|
|
// courseId: this.tooldetilsdata.tool.toolId,
|
|
// amount: this.cartnumber,
|
|
// deliverType: this.tooldetilsdata.tool.deliverType,
|
|
// price: '',
|
|
// payType: 'W06',
|
|
// paytype: 'W06',
|
|
// toolType: this.tooldetilsdata.tool.toolType,
|
|
// userId: id
|
|
// }
|
|
const data = {
|
|
"price": this.courseItem.amount,
|
|
"payType": "W06",
|
|
"userId": id,
|
|
// "recordName": this.courseItem.courseName,
|
|
// "toolId":this.courseItem.courseId
|
|
}
|
|
// return
|
|
const _this = this
|
|
this.http.quickPost(`/play/course/pay`, data, true).then(res => {
|
|
// console.log(res);
|
|
if (res.data.data.retcode == 'SUCCESS') {
|
|
const info = JSON.parse(res.data.data.payinfo)
|
|
console.log(info);
|
|
// return
|
|
// 06 小程序
|
|
// 01 扫码
|
|
// return
|
|
uni.requestPayment({
|
|
timeStamp: info.timeStamp,
|
|
nonceStr: info.nonceStr,
|
|
package: info.package,
|
|
signType: info.signType,
|
|
paySign: info.paySign,
|
|
success(r) {
|
|
const sucData = {
|
|
"price": _this.courseItem.amount,
|
|
"payType": "W06",
|
|
"userId": id,
|
|
"recordName": _this.courseItem.courseName,
|
|
"toolId": _this.courseItem.courseId
|
|
}
|
|
_this.http.quickPost(`/play/course/pay/succes`, sucData, true).then(res => { })
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '支付成功'
|
|
})
|
|
_this.maskShow = false
|
|
// that.isPopupShow = false
|
|
// setTimeout(() => {
|
|
// uni.navigateTo({
|
|
// url: '/pages/personal/ordernumber/ordernumber?current=0'
|
|
// })
|
|
// }, 1000)
|
|
},
|
|
fail(error) {
|
|
console.log(error);
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '支付失败'
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '支付错误，请联系管理员'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
focusClick() {
|
|
this.focus = true
|
|
},
|
|
pay() {
|
|
console.log('pay for this');
|
|
},
|
|
openInputCode() {
|
|
this.show = true
|
|
},
|
|
inputCode(e) {
|
|
if (this.code.length > 4) {
|
|
return
|
|
}
|
|
let value = e.detail.value
|
|
this.code = value
|
|
},
|
|
inputFocus(e) {
|
|
console.log(e);
|
|
},
|
|
inputCodeBlur(e) {
|
|
let value = e.detail.value
|
|
this.focus = false
|
|
},
|
|
copy() {
|
|
uni.setClipboardData({
|
|
data: this.courseItem.url, // 这里是个坑接受字符串类型 value转化为字符串
|
|
success: function () {
|
|
//调用方法成功
|
|
uni.showToast({
|
|
title: '已复制到剪切板',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
this.urlShow = false
|
|
},
|
|
submitCode() {
|
|
this.http.quickPost('/train/course/enterPasswd/' + this.courseId, { password: this.code }, true).then(res => {
|
|
if (res.data.code != 200) {
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'none',
|
|
duration: 2000,
|
|
})
|
|
} else {
|
|
// this.url = res.data.data
|
|
this.maskShow = false
|
|
}
|
|
})
|
|
this.code = ''
|
|
this.show = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.commodity {
|
|
display: flex;
|
|
color: #808080;
|
|
font-size: 32rpx;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.commodity input {
|
|
min-height: 40rpx !important;
|
|
}
|
|
|
|
.onLineCourseWrap {
|
|
margin: 25rpx;
|
|
height: calc(100% - 50rpx);
|
|
background: #FFFFFF;
|
|
border-radius: 10rpx;
|
|
padding: 24rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #404040;
|
|
|
|
.onLineTitle {
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
color: #000000;
|
|
line-height: 46rpx;
|
|
margin: 30rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
|
|
.onLineTime {
|
|
margin: 15rpx 0;
|
|
}
|
|
|
|
.onLineTeacher {
|
|
margin: 20rpx 0;
|
|
}
|
|
|
|
.onLine {
|
|
margin: 20rpx 0;
|
|
}
|
|
|
|
.onLineContent {
|
|
margin: 20rpx 0;
|
|
line-height: 46rpx;
|
|
// line-height: 1.5;
|
|
}
|
|
|
|
.onLineMask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
img {
|
|
width: 46rpx;
|
|
height: 111rpx;
|
|
margin: 619rpx 0 0 50%;
|
|
}
|
|
|
|
.learnBtnWrap {
|
|
width: 279rpx;
|
|
margin-top: 211rpx;
|
|
margin-left: 50%;
|
|
transform: translate(-50%);
|
|
|
|
.learnBtn {
|
|
width: 279rpx;
|
|
height: 67rpx;
|
|
background: linear-gradient(90deg, #5EA6FD, #1A81F9);
|
|
box-shadow: 0rpx 1rpx 20rpx 1rpx rgba(13, 92, 187, 0.53);
|
|
margin-bottom: 30rpx;
|
|
border-radius: 33rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #FFFFFF;
|
|
line-height: 65rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.passBtn {
|
|
margin-bottom: 90rpx;
|
|
height: 67rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #1578ED;
|
|
line-height: 65rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.startLeranBtn {
|
|
position: fixed;
|
|
bottom: 69rpx;
|
|
width: 646rpx;
|
|
height: 70rpx;
|
|
background: linear-gradient(90deg, #5EA6FD, #1A81F9);
|
|
box-shadow: 0rpx 1rpx 20rpx 1rpx rgba(13, 92, 187, 0.4);
|
|
border-radius: 35rpx;
|
|
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #FFFFFF;
|
|
line-height: 65rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.slot-content {
|
|
font-size: 28rpx;
|
|
color: $u-content-color;
|
|
padding-left: 30rpx;
|
|
}
|
|
|
|
.input-list {
|
|
padding-top: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.input-item {
|
|
width: 0rpx;
|
|
}
|
|
|
|
.code-list {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
|
|
.code-item {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
border: 1rpx solid #eee;
|
|
border-radius: 10rpx;
|
|
background: #EAEEF3;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.codeBtnCoup {
|
|
padding: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 40rpx;
|
|
|
|
.codeBtn {
|
|
width: 250rpx;
|
|
line-height: 70rpx;
|
|
border-radius: 35rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.sure {
|
|
background: linear-gradient(90deg, #5EA6FD, #1A81F9);
|
|
}
|
|
|
|
.canle {
|
|
color: #666666;
|
|
border: 1px solid #E0E0E0;
|
|
}
|
|
}
|
|
|
|
.courseContent {
|
|
width: 372rpx;
|
|
text-overflow: ellipsis;
|
|
white-space: normal;
|
|
word-break: break-all;
|
|
margin: 30rpx auto 0 auto;
|
|
font-family: PingFang SC;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
line-height: 49rpx;
|
|
// background-color: #000000;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
}
|
|
</style> |