chanyishenghuo-uniapp/pages/course/signIn.vue

<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.imageArr[0]" mode="aspectFill" :key="index"></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="sign-btn" @click="signIn">立即签到</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()
			}
		},
		methods:{
			getDetail(){
				uni.showLoading({
					title:'正在加载中...'
				})
				let nowTime = Date.parse(new Date())/1000;
				getCourseDetail({id:this.courseId}).then((res)=>{
					uni.hideLoading()
					res.data.courseIntroduce = res.data.courseIntroduce.replace(/\<img/g, "<img style='width: 100%;'")
					this.detail = res.data
					let t = res.data.signEndTime.replace(/-/g, '/');
					let endTime = Date.parse(new Date(t))/1000
					this.times = endTime - nowTime;
					this.day = Math.floor(this.times / (60 * 60 * 24));
					this.hour = Math.floor(this.times / (60 * 60)) - (this.day * 24);
					this.minute = Math.floor(this.times / 60) - (this.day * 24 * 60) - (this.hour * 60);
					this.second = Math.floor(this.times) - (this.day * 24 * 60 * 60) - (this.hour * 60 * 60) - (this.minute * 60);
					// console.log(this.times)
					uni.stopPullDownRefresh()
				})
			},
			signIn(){
				signCourse(this.courseId).then((res)=>{
					if(res.success){
						uni.showModal({
							title:'提示!',
							content:'签到成功！'
						})
					} 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: 0rpx 24rpx 30rpx;
		margin-bottom: 20rpx;
	}
	.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>