@ -0,0 +1,237 @@ |
||||
<template> |
||||
<view class="onLineCourseItemWrap" @click="toLearn(onLineCourse)"> |
||||
<view class="onLineTitle"> |
||||
<view v-if="rejectStatus == '1'" class="backVersion">预告</view> |
||||
<view v-if="rejectStatus == '2'" class="starting">直播中<img src="./liveSteam.png" alt=""></view> |
||||
<view v-if="rejectStatus == '3'" class="preVersion">回放</view> |
||||
<view>{{ courseTime(onLineCourse.courseTime) }}</view> |
||||
<view class="onLineClassName">{{ onLineCourse.courseName }}</view> |
||||
</view> |
||||
<view class="onLineCourse">{{ onLineCourse.className }}</view> |
||||
<view class="onLineTeacher"> |
||||
<img src="http://image.bjkeyware.com/static/index/teacher.png" alt=""> |
||||
讲师: {{ onLineCourse.instructor }} |
||||
</view> |
||||
<!-- <view>{{ courseTime(onLineCourse.date_time) }}</view> --> |
||||
|
||||
<view class="onLineBtnWrap"> |
||||
<view v-if="toLearnShow" class="onLineBtn toPay">付费学习¥{{ onLineCourse.amount }}</view> |
||||
<view v-else class="onLineBtn toLearn">去学习</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { dateFormat } from '../../utils/util'; |
||||
|
||||
export default { |
||||
computed: { |
||||
toLearnShow() { |
||||
if ((this.onLineCourse.isPay == '1') && (this.onLineCourse.remark.indexOf(this.onLineCourse.courseId) == -1)) { |
||||
return true |
||||
} |
||||
return false |
||||
}, |
||||
rejectStatus() { |
||||
const endTime = new Date(this.onLineCourse.date_time).getTime() |
||||
const startTime = new Date(this.onLineCourse.courseTime).getTime() |
||||
const nowTime = new Date().getTime() |
||||
if (startTime > nowTime) { |
||||
return '1' |
||||
} else if (startTime < nowTime && endTime > nowTime) { |
||||
return '2' |
||||
} else { |
||||
return '3' |
||||
} |
||||
}, |
||||
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(':')); |
||||
console.log(time); |
||||
console.log(preDay + ' ' + time); |
||||
return preDay + ' ' + time |
||||
} |
||||
} |
||||
}, |
||||
props: { |
||||
onLineCourse: Object |
||||
}, |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
methods: { |
||||
toggleShow() { |
||||
if ((this.onLineCourse.isPay == '1') && (this.onLineCourse.remark.indexOf(this.onLineCourse.courseId) == -1)) { |
||||
this.onLineCourse.show = false |
||||
return |
||||
} |
||||
this.onLineCourse.show = true |
||||
return |
||||
}, |
||||
toLearn() { |
||||
this.toggleShow() |
||||
this.$emit('toLearn', this.onLineCourse) |
||||
}, |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.onLineCourseItemWrap { |
||||
height: 270rpx; |
||||
width: 700rpx; |
||||
background: linear-gradient(135deg, #FCF5F0, #ECF3FD); |
||||
box-shadow: 0rpx 2rpx 14rpx 1rpx rgba(8, 67, 140, 0.12); |
||||
border-radius: 10rpx; |
||||
margin: 0 auto; |
||||
margin-bottom: 30rpx; |
||||
|
||||
|
||||
.onLineTitle { |
||||
font-size: 32rpx; |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
font-family: PingFang SC; |
||||
font-weight: bold; |
||||
height: 88rpx; |
||||
padding: 30rpx 0 0 20rpx; |
||||
line-height: 54rpx; |
||||
|
||||
.starting { |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
font-size: 28rpx; |
||||
line-height: 40rpx; |
||||
margin-top: 7rpx; |
||||
height: 40rpx; |
||||
margin-right: 10rpx; |
||||
min-width: 120rpx; |
||||
text-align: center; |
||||
background: linear-gradient(90deg, #09B885, #0BE8A5); |
||||
border-radius: 8rpx; |
||||
|
||||
img { |
||||
margin-left: 5rpx; |
||||
width: 15rpx; |
||||
height: 15rpx; |
||||
} |
||||
} |
||||
|
||||
.backVersion { |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
font-size: 28rpx; |
||||
line-height: 35rpx; |
||||
margin-top: 10rpx; |
||||
height: 35rpx; |
||||
padding: 0 20rpx; |
||||
background: linear-gradient(90deg, #FCA041, #FD6841); |
||||
margin-right: 10rpx; |
||||
border-radius: 8rpx; |
||||
min-width: 95rpx; |
||||
} |
||||
|
||||
.preVersion { |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
font-size: 28rpx; |
||||
line-height: 35rpx; |
||||
margin-top: 10rpx; |
||||
height: 35rpx; |
||||
padding: 0 20rpx; |
||||
margin-right: 10rpx; |
||||
background: linear-gradient(90deg, #06466b, #1479b3af); |
||||
border-radius: 8rpx; |
||||
min-width: 95rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
.onLineClassName { |
||||
flex:1;width: 0; |
||||
margin-left: 25rpx; |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
} |
||||
|
||||
.onLineCourse { |
||||
display: inline; |
||||
padding: 5rpx 15rpx; |
||||
border-radius: 6rpx; |
||||
font-size: 30rpx; |
||||
// width: 320rpx; |
||||
color: #1A1A1A; |
||||
line-height: 46rpx; |
||||
background: #DEE9FD; |
||||
margin-left: 18rpx; |
||||
} |
||||
|
||||
|
||||
.onLineTeacher { |
||||
margin-top: 10rpx; |
||||
margin-left: 24rpx; |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
color: #666666; |
||||
line-height: 46rpx; |
||||
|
||||
img { |
||||
width: 20rpx; |
||||
height: 20rpx; |
||||
margin-right: 10rpx; |
||||
} |
||||
} |
||||
|
||||
.onLineBtnWrap { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
margin: 0 25rpx; |
||||
} |
||||
|
||||
.onLineBtn { |
||||
min-width: 209rpx; |
||||
padding: 0 5rpx; |
||||
height: 56rpx; |
||||
line-height: 56rpx; |
||||
border-radius: 28rpx; |
||||
// width: 209rpx; |
||||
width: 167rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
font-size: 24rpx; |
||||
color: #FFFFFF; |
||||
line-height: 56rpx; |
||||
text-align: center; |
||||
} |
||||
|
||||
.toLearn { |
||||
background: linear-gradient(90deg, #FB8C16, #FEC36E); |
||||
} |
||||
|
||||
.toPay { |
||||
background: linear-gradient(90deg, #5EA6FD, #1A81F9); |
||||
border: 1px solid #AAD1FE; |
||||
} |
||||
</style> |
After Width: | Height: | Size: 348 B |
@ -0,0 +1,68 @@ |
||||
<template> |
||||
<view class="posterWrapper"> |
||||
<view>haibao</view> |
||||
<button @click="drawPoster">生成海报</button> |
||||
<view class="my_canvas_box"> |
||||
<!-- <canvas></canvas> --> |
||||
<view>长按分享</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import com from '../../utils/comstemutil' |
||||
|
||||
export default { |
||||
|
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
onload(query) { |
||||
// console.log('123'); |
||||
|
||||
// scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene |
||||
const scene = decodeURIComponent(query.scene) |
||||
console.log(scene); |
||||
|
||||
}, |
||||
methods: { |
||||
drawPoster() { |
||||
const currentPage = getCurrentPages() |
||||
const route = currentPage[currentPage.length - 1].route |
||||
const options = currentPage[currentPage.length - 1].options |
||||
let path = '' |
||||
if (Object.keys(options).length == 0) { |
||||
path = route |
||||
} else { |
||||
options.forEach((ele, index) => { |
||||
if (index == 0) { |
||||
path = route + '?' + ele + '=' + index |
||||
} else { |
||||
path = route + '&' + ele + '=' + index |
||||
} |
||||
}); |
||||
} |
||||
this.draw(path) |
||||
}, |
||||
async draw(path) { |
||||
// const tok = await com.refreshToken() |
||||
// return |
||||
let accessToken = uni.getStorageSync('accessToken') |
||||
|
||||
const data = { |
||||
"path": path, |
||||
"width": 430 |
||||
} |
||||
const res = await this.http.quickPost('https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=' + accessToken, data, true) |
||||
console.log(res); |
||||
|
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.posterWrapper {} |
||||
</style> |
Before Width: | Height: | Size: 866 B |
Before Width: | Height: | Size: 41 KiB |
Before Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 28 KiB |
Before Width: | Height: | Size: 61 KiB |
Before Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,109 @@ |
||||
<template> |
||||
<view class="allcourseWrapper"> |
||||
<view v-if="onLineList.length"> |
||||
<view v-for="course in onLineList" :key="course.courseId"> |
||||
<onLineCourseItem :onLineCourse="course" @toLearn="toLearn"></onLineCourseItem> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { dateFormat } from '@/utils/util'; |
||||
import onLineCourseItem from '@/components/onLineCourseItem/index.vue' |
||||
|
||||
export default { |
||||
components: { |
||||
onLineCourseItem |
||||
}, |
||||
data() { |
||||
return { |
||||
onLineList: [], |
||||
total: 10, |
||||
classId: '', |
||||
className: '', |
||||
queryParams: { |
||||
pageSize: 10, |
||||
pageNum: 1, |
||||
}, |
||||
} |
||||
}, |
||||
onShow() { |
||||
// const classId = options.id |
||||
// const className = options.name |
||||
// this.className = className |
||||
// // console.log(options) |
||||
// this.classId = classId |
||||
// uni.setNavigationBarTitle({ title: className }) |
||||
this.getCourseList() |
||||
}, |
||||
methods: { |
||||
async toLearn(course) { |
||||
if (!course.signUp && course.isPay == '0') { |
||||
const res = await this.http.quickPost(`/train/online/signUp/${course.courseId}`, {}, true) |
||||
if (res.data.code == 200) { |
||||
uni.navigateTo({ |
||||
url: `/pages/index/testtraining/onLineCourse?courseId=${course.courseId}` |
||||
}) |
||||
} |
||||
else { |
||||
return |
||||
} |
||||
} else { |
||||
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() { |
||||
let accessToken = uni.getStorageSync('accessToken') |
||||
if (accessToken) { |
||||
const wxUserInfo = uni.getStorageSync('wxUserInfo') |
||||
const userId = wxUserInfo.userId |
||||
this.http.quickGet(`/course/online/courses?userId=${userId}`).then((res) => { |
||||
// console.log(res); |
||||
this.onLineList = res.data.data |
||||
console.log(this.onLineList); |
||||
|
||||
}) |
||||
} else { |
||||
this.http.quickGet(`/course/online/courses`, false).then((res) => { |
||||
// console.log(res); |
||||
this.onLineList = res.data.data |
||||
console.log(this.onLineList); |
||||
|
||||
}) |
||||
} |
||||
}, |
||||
async onReachBottom() { |
||||
if (this.total <= this.queryParams.pageSize) { |
||||
return |
||||
} |
||||
this.queryParams.pageSize += 10 |
||||
this.getCourseList() |
||||
console.log("onReachBottom"); |
||||
}, |
||||
async onReachBottom() { |
||||
// if (this.total <= this.queryParams.pageSize) { |
||||
// return |
||||
// } |
||||
// this.queryParams.pageSize += 10 |
||||
// this.getCourseList() |
||||
console.log("onReachBottom"); |
||||
}, |
||||
|
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.allcourseWrapper { |
||||
// text-align: center; |
||||
margin: 20rpx; |
||||
} |
||||
</style> |