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.
255 lines
6.0 KiB
255 lines
6.0 KiB
<template> |
|
<view class="course-detail-index"> |
|
<view v-if="$store.getters.token || userInfo.uid"> |
|
<view class="swiper-box"> |
|
<view class="swiper-item"> |
|
<image :src="detail.coverImg" mode="aspectFill"></image> |
|
</view> |
|
</view> |
|
<view class="course-info-box"> |
|
<view class="course-title acea-row row-between-wrapper"> |
|
<view>{{detail.courseName}}</view> |
|
<view class="price" v-if="detail.price == 0">公开课</view> |
|
<view class="price" v-if="detail.price > 0 && detail.price < 199">¥{{detail.price}}</view> |
|
</view> |
|
<view class="tips-box"> |
|
<view class="tip-item blue">{{detail.categoryName}}</view> |
|
<!-- <view class="tip-item orange">{{detail.levelName}}</view> --> |
|
</view> |
|
</view> |
|
<view class="course-desc-box content" id="content2"> |
|
<view class="title-box acea-row row-middle"> |
|
<view class="left-line"></view> |
|
<span>课程表</span> |
|
</view> |
|
<view class="course-card-list"> |
|
<view class="course-card-item acea-row row-middle"> |
|
<image src="../../static/course-icon5.png"></image> |
|
<view class="label">课程类型</view> |
|
<view class="info">{{detail.courseType == 0 ? '线下课程' : '直播课程'}}</view> |
|
</view> |
|
<view class="course-card-item acea-row row-middle"> |
|
<image src="../../static/course-icon1.png"></image> |
|
<view class="label">课程时间</view> |
|
<view class="info">{{detail.courseStartTime}} 至 {{detail.courseEndTime}}</view> |
|
</view> |
|
<view class="course-card-item acea-row row-middle"> |
|
<image src="../../static/course-icon2.png"></image> |
|
<view class="label">课程地点</view> |
|
<view class="info">{{detail.coursePlace}}</view> |
|
</view> |
|
<view class="course-card-item acea-row row-middle"> |
|
<image src="../../static/course-icon3.png"></image> |
|
<view class="label">签到时间</view> |
|
<view class="info">{{detail.signStartTime}} 至 {{detail.signEndTime}}</view> |
|
</view> |
|
<view class="course-card-item acea-row row-middle"> |
|
<image src="../../static/course-icon4.png"></image> |
|
<view class="label">报名截止</view> |
|
<view class="info">{{detail.enterEndTime}}</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="course-desc-box" > |
|
<view class="title-box acea-row row-middle"> |
|
<view class="left-line"></view> |
|
<span>课程安排</span> |
|
</view> |
|
<view class="plan-box acea-row-nowrap" v-for="(item,index) in detail.scheduleList" :key="index"> |
|
<text>{{item}}</text> |
|
</view> |
|
</view> |
|
<view class="sign-btn" @click="signIn">{{detail.signState == 0 ? '立即签到' : '已签到' }}</view> |
|
</view> |
|
<Authorization v-else /> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import Authorization from '@/pages/authorization/index' |
|
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex' |
|
import { getCourseDetail ,enterCourse, signCourse } from '@/api/knowledge'; |
|
import { handleQrCode, handleUrlParam, getCurrentPageUrlWithArgs } from '@/utils' |
|
export default{ |
|
components: { |
|
Authorization, |
|
}, |
|
data(){ |
|
return { |
|
courseId: '', |
|
detail: [] |
|
} |
|
}, |
|
computed:{ |
|
userInfo(){ |
|
return this.$store.getters["userInfo"] |
|
}, |
|
}, |
|
onLoad(){ |
|
let url = handleQrCode() |
|
if (!url) { |
|
url = handleUrlParam(getCurrentPageUrlWithArgs()) |
|
} |
|
console.log(url) |
|
if (url && url.id) { |
|
this.courseId = url.id |
|
} |
|
if(this.userInfo.uid && this.courseId){ |
|
this.getDetail() |
|
} |
|
}, |
|
onPullDownRefresh() { |
|
this.getDetail() |
|
}, |
|
methods:{ |
|
getDetail(){ |
|
uni.showLoading({ |
|
title:'正在加载中...' |
|
}) |
|
let nowTime = Date.parse(new Date())/1000; |
|
getCourseDetail({id:this.courseId}).then((res)=>{ |
|
uni.hideLoading() |
|
this.detail = res.data |
|
uni.stopPullDownRefresh() |
|
}) |
|
}, |
|
signIn(){ |
|
if(this.detail.signState == 0){ |
|
signCourse(this.courseId).then((res)=>{ |
|
if(res.success){ |
|
uni.showModal({ |
|
title:'提示!', |
|
content:'签到成功!', |
|
showCancel: false |
|
}) |
|
} else{ |
|
uni.showToast({ |
|
title:res.msg, |
|
icon:'none', |
|
duration:5000 |
|
}) |
|
} |
|
}) |
|
} |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less"> |
|
.course-detail-index{ |
|
width: 100%; |
|
min-height: 100vh; |
|
padding-bottom: 200rpx; |
|
box-sizing: border-box; |
|
} |
|
.swiper-box{ |
|
width: 100%; |
|
height: 340rpx; |
|
.swiper-item{ |
|
width: 100%; |
|
height: 100%; |
|
image{ |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
swiper{ |
|
height: 100%; |
|
.swiper-item{ |
|
width: 100%; |
|
height: 100%; |
|
image{ |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
} |
|
} |
|
.course-info-box{ |
|
box-sizing: border-box; |
|
padding: 30rpx 30rpx 50rpx; |
|
background: #fff; |
|
.course-title{ |
|
font-size: 40rpx; |
|
font-weight: 500; |
|
color: #333333; |
|
line-height: 56rpx; |
|
margin: 0rpx 0 20rpx; |
|
.price{ |
|
color: #EA533E; |
|
} |
|
} |
|
.tips-box{ |
|
display: flex; |
|
.tip-item{ |
|
min-width: 60rpx; |
|
height: 34rpx; |
|
text-align: center; |
|
line-height: 34rpx; |
|
font-size: 24rpx; |
|
padding: 0 5rpx; |
|
border-radius: 5rpx; |
|
} |
|
.blue{ |
|
color: #6E85EB; |
|
border: 1px solid #6E85EB; |
|
background: #EDEFF8; |
|
} |
|
.orange{ |
|
margin-left: 10rpx; |
|
border: 1px solid #F99C10; |
|
color: #F99C10; |
|
background: #FFEDCC; |
|
} |
|
} |
|
} |
|
.course-desc-box{ |
|
width: 100%; |
|
background:#fff; |
|
border-radius: 8rpx; |
|
padding: 30rpx 24rpx; |
|
margin-bottom: 20rpx; |
|
} |
|
.content{ |
|
padding-top: 0; |
|
} |
|
.course-card-item{ |
|
font-size: 26rpx; |
|
margin-bottom: 12rpx; |
|
image{ |
|
width: 30rpx; |
|
height: 30rpx; |
|
} |
|
.label{ |
|
color: #999999; |
|
margin: 0 24rpx 0 16rpx; |
|
} |
|
.info{ |
|
color: #666666; |
|
} |
|
} |
|
.title-box{ |
|
font-size: 36rpx; |
|
font-weight: bold; |
|
color: #3C464F; |
|
line-height: 50rpx; |
|
margin-bottom: 20rpx; |
|
.left-line{ |
|
width: 6rpx; |
|
height: 32rpx; |
|
background-color: #F99C10; |
|
margin-right: 16rpx; |
|
} |
|
} |
|
.sign-btn{ |
|
width: 254rpx; |
|
height: 79rpx; |
|
background: linear-gradient(180deg, #F7D08E 0%, #ECBE71 100%); |
|
border-radius: 12rpx; |
|
text-align: center; |
|
line-height: 79rpx; |
|
color: #fff; |
|
margin: 60rpx auto 0; |
|
} |
|
</style>
|
|
|