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.
313 lines
9.1 KiB
313 lines
9.1 KiB
<template>
|
|
<view class="courseWrapper">
|
|
<!-- <view v-if="courseList.length">
|
|
<view class="onlineTrain">
|
|
<view class="onLineTitle">
|
|
<view class="onLineClassName">软测课堂</view>
|
|
<view class="onLineCourseTime">时间：{{ '今日 20:00' }}</view>
|
|
</view>
|
|
<view class="onLineCourse">如何使用性能测试工具</view>
|
|
<view class="onLineTeacher">讲师: 风清扬老师</view>
|
|
<view class="onLineBtnWrap">
|
|
<view class="onLineBtn toLearn" @click="toLearn">去学习</view>
|
|
<view class="onLineBtn toPay" @click="toLearn">付费学习: {{ '9.9' }}</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<view v-if="courseList.length">
|
|
<view class="" v-for="course in courseList" :key="course.courseId">
|
|
<view class="courseItem" v-if="!course.isPay">
|
|
<view class="courseName">{{ course.courseName }}</view>
|
|
<view class="courseTime">{{ course.courseTime }}</view>
|
|
<view class="courseSource" @click="courseDialog">课程资料</view>
|
|
<view class="signInfo" :style="{ background: course.status ? '#28D17C' : '#FBA02A' }">{{
|
|
course.status ? '已签到' : '未签到'
|
|
}}</view>
|
|
</view>
|
|
<view v-else class="onlineTrain" @click="toLearn(course)">
|
|
<view class="onLineTitle">
|
|
<view class="onLineClassName">{{ className }}</view>
|
|
<view class="onLineCourseTime">时间：{{ courseTime(course.courseTime) }}</view>
|
|
</view>
|
|
<view class="onLineCourse">{{ course.courseName }}</view>
|
|
<view class="onLineTeacher">讲师: {{ course.instructor }}</view>
|
|
<view class="onLineBtnWrap">
|
|
<view v-if="toLearnShow(course)" class="onLineBtn toPay" @click="toLearn(course)">付费学习￥{{
|
|
course.amount }}</view>
|
|
<view v-else class="onLineBtn toLearn" @click="toLearn(course)">去学习
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="mycourseWrapper" v-else>
|
|
<img src="http://image.bjkeyware.com/static/index/noCourse.png" alt="">
|
|
<view>暂未配置课程</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { dateFormat } from '@/utils/util';
|
|
|
|
export default {
|
|
computed: {
|
|
toLearnShow() {
|
|
return function (course) {
|
|
if ((course.isPay == '1') && (course.remark.indexOf(course.courseId) == -1)) {
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
},
|
|
courseTime() {
|
|
return function (val) {
|
|
const tarTime = dateFormat(new Date(val))
|
|
const nowTime = dateFormat(new Date())
|
|
const day = tarTime.split(' ')[0];
|
|
const nday = nowTime.split(' ')[0];
|
|
|
|
let preDay = ''
|
|
if (nday === day) {
|
|
preDay = '今日'
|
|
} else if ((day.substr(0, 8) === nday.substr(0, 8)) && (day.substr(8, 10) * 1 - nday.substr(8, 10)) == 1) {
|
|
preDay = '明日'
|
|
} else {
|
|
preDay = day
|
|
}
|
|
const temp = tarTime.split(' ')[1]
|
|
const time = temp.slice(0, temp.lastIndexOf(':'));
|
|
return preDay + ' ' + time
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
courseList: [],
|
|
total: 10,
|
|
classId: '',
|
|
className: '',
|
|
queryParams: {
|
|
pageSize: 10,
|
|
pageNum: 1,
|
|
},
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getCourseList()
|
|
},
|
|
onLoad(options) {
|
|
const classId = options.id
|
|
const className = options.name
|
|
this.className = className
|
|
// console.log(options)
|
|
this.classId = classId
|
|
uni.setNavigationBarTitle({ title: className })
|
|
},
|
|
methods: {
|
|
toLearn(course) {
|
|
// console.log(course.isPay && course.remark && (course.remark.indexOf(course.courseId) != -1));
|
|
// 如果有remark并且remark中含有courseId 则已经付款
|
|
if ((course.isPay == '1') && (course.remark.indexOf(course.courseId) == -1)) {
|
|
course.show = false
|
|
} else {
|
|
course.show = true
|
|
}
|
|
// console.log(course.show);
|
|
uni.navigateTo({
|
|
url: `/pages/index/testtraining/onLineCourse?courseId=${course.courseId}&learnStatus=${course.show ? true : false}`
|
|
})
|
|
},
|
|
pagionChange(e) {
|
|
console.log(e);
|
|
this.queryParams.pageNum = e.current
|
|
this.getCourseList()
|
|
},
|
|
async getCourseList() {
|
|
const params = this.queryParams
|
|
this.http.get(`/course/myCourse/class/${this.classId}`, params, true).then((res) => {
|
|
this.total = res.data.total
|
|
this.courseList = res.data.rows
|
|
})
|
|
console.log(this.courseList);
|
|
},
|
|
async onReachBottom() {
|
|
if (this.total <= this.queryParams.pageSize) {
|
|
return
|
|
}
|
|
this.queryParams.pageSize += 10
|
|
this.getCourseList()
|
|
console.log("onReachBottom");
|
|
},
|
|
courseDialog() {
|
|
const url = 'https://www.bjkeyware.com'
|
|
uni.showModal({
|
|
title: '请去PC端下载资料',
|
|
content: 'PC端网址:' + url,
|
|
showCancel: false,
|
|
confirmText: '复制网址',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
uni.setClipboardData({
|
|
data: url,
|
|
success: function () {
|
|
uni.showToast({
|
|
title: '复制成功',
|
|
})
|
|
},
|
|
fail: function () {
|
|
uni.showToast({
|
|
title: '复制失败',
|
|
})
|
|
},
|
|
})
|
|
console.log('用户点击确定')
|
|
}
|
|
},
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.mycourseWrapper {
|
|
font-size: 23px;
|
|
font-weight: bold;
|
|
color: #9D9D9D;
|
|
text-align: center;
|
|
margin-top: 100px;
|
|
|
|
img {
|
|
width: 338rpx;
|
|
height: 254rpx;
|
|
}
|
|
}
|
|
|
|
.courseItem {
|
|
position: relative;
|
|
margin: 25rpx;
|
|
width: 700rpx;
|
|
height: 210rpx;
|
|
margin-bottom: 0;
|
|
padding: 30rpx;
|
|
background: #ffffff;
|
|
border-radius: 10rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.courseName {
|
|
/* width: 369rpx; */
|
|
/* height: 29rpx; */
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.courseTime {
|
|
color: #4d4d4d;
|
|
}
|
|
|
|
.courseSource {
|
|
color: #2853e4;
|
|
}
|
|
|
|
.signInfo {
|
|
width: 110rpx;
|
|
/* height: 40rpx; */
|
|
line-height: 40rpx;
|
|
border-radius: 20rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
position: absolute;
|
|
top: 85rpx;
|
|
right: 25rpx;
|
|
}
|
|
|
|
.onlineTrain {
|
|
margin: 30rpx 30rpx;
|
|
height: 270rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.onLineTitle {
|
|
display: flex;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
height: 88rpx;
|
|
line-height: 54rpx;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.onLineClassName {
|
|
height: 54rpx;
|
|
min-width: 183rpx;
|
|
padding: 0 10rpx;
|
|
text-align: center;
|
|
background: linear-gradient(90deg, #5EA6FD, #1A81F9);
|
|
border-radius: 9rpx 0rpx 46rpx 0rpx;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.onLineCourse {
|
|
font-size: 28rpx;
|
|
line-height: 46rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: bold;
|
|
color: #1A1A1A;
|
|
margin-left: 24rpx;
|
|
height: 40rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space:nowrap
|
|
}
|
|
|
|
.onLineCourseTime {
|
|
margin-left: 24rpx;
|
|
margin-right: 30rpx;
|
|
line-height: 88rpx;
|
|
font-size: 22rpx;
|
|
color: #808080;
|
|
}
|
|
|
|
.onLineTeacher {
|
|
margin-top: 10rpx;
|
|
margin-left: 24rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #666666;
|
|
line-height: 46rpx;
|
|
}
|
|
|
|
.onLineBtnWrap {
|
|
padding: 0 30rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.onLineBtn {
|
|
min-width: 209rpx;
|
|
height: 50rpx;
|
|
border-radius: 25rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.toLearn {
|
|
background: linear-gradient(90deg, #FB8C16, #FEC36E);
|
|
}
|
|
|
|
.toPay {
|
|
background: linear-gradient(90deg, #5EA6FD, #1A81F9);
|
|
border: 1px solid #AAD1FE;
|
|
}
|
|
</style>
|
|
|