|
|
|
<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>
|