hcj
3 months ago
parent
51fae596c6
commit
bb49e55e75
@ -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> |
||||||
Loading…
Reference in new issue