szbd-vistor-wx/pages/visit/study.vue

<template>
	<view class="containers">
		<view class="steps">
			<uni-steps :options="steps" :active="stepActive" active-color="#044ed7" />
		</view>
		<view class="study" style="padding:0 20rpx">
			<view class="service-show" v-if="studyInfo.file_detail && studyInfo.file_detail.length>0">
				<view v-if="picList.length>0&&showSwiperFlag==0">
					<u-swiper :list="picList" @change="changeImg" keyName="url"
						:height="'360rpx'" :interval='4000' :duration='500' :autoplay='false' circular>
						<view slot="indicator" class="indicator">
							<view class="indicator__dot" v-for="(item, index) in picList" :key="index"
								:class="[index === imgcurrent && 'indicator__dot--active']">
							</view>
						</view>
					</u-swiper>
				</view>
				<view v-if="videoList.length>0&&showSwiperFlag==1">
					<u-swiper :list="videoList" @change="changeVideo" keyName="url"
						:height="'360rpx'" :interval='4000' :duration='500' :autoplay='false' circular>
					
						<view slot="indicator" class="indicator">
							<view class="indicator__dot" v-for="(item, index) in videoList" :key="index"
								:class="[index === videocurrent && 'indicator__dot--active']">
							</view>
						</view>
					</u-swiper>
				</view>
				
				<view class="changePicVideo">
					<view @click='changeSwiperImg' v-if="picList.length>0">
						<image src="../../static/img/pic.png">
						</image>{{picList.length}}
					</view>
					<view @click='changeSwiperVideo' v-if="videoList.length>0">
						<image src="../../static/img/video.png">
						</image>{{videoList.length}}
					</view>
				</view>
				
			</view>
			<view v-html="studyInfo.content" style="padding-bottom: 160rpx;">
			</view>
		</view>
		<view class="asks">

		</view>

		<button @click="goTest" :class="studyMin==-1?'goTest':'noTest'" :disabled="studyMin==-1?false:true">
			<text v-if="studyMin==-1">{{ quizRequired ? '去测验' : '完成学习' }}</text>
			<text v-else>{{ quizRequired ? ('需要学习'+(studyInfo.minute?studyInfo.minute:'')+'分钟可去测验('+studyTime+')') : ('请观看学习资料（'+studyTime+'）') }}</text>

		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				steps: [{
					title: '填报'
				}, {
					title: '学习'
				}, {
					title: '完成'
				}],
				stepActive: 1,
				studyInfo: {},
				picList:[],
				videoList:[],
				showSwiperFlag:0,
				imgcurrent: 0,
				videocurrent:0,
				studyTime: "00:00", // 学习时间
				// null：尚未拉取学习配置，避免定时器在 getStudy 返回前误 clear
				studyMin: null,
				timer: null,
				quizRequired: true,
			}
		},
		onLoad(options) {
			// uni.navigateTo({
			// 	url:'/pages/visit/testStudy?type=1'
			// })
			// return
			const that = this
			this.type = options.type
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
			this.timer = setInterval(function() {
				that.loadTime()
			}, 1000)
			this.getStudy()
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		},
		onShareAppMessage() {
			return {
				title: 'BD访客系统',
				path: '/pages/index/index',
				// imageUrl: this.logoIndex
			}
		},
		onShareTimeline() {
			return {
				title: 'BD访客系统',
				path: '/pages/index/index',
				// imageUrl: this.logoIndex
			}
		},

		methods: {
			async getStudy() {
				let that = this
				const fd = uni.getStorageSync('formdata') || {}
				const sd = uni.getStorageSync('studydata') || {}
				const mobileParam = fd.mobile || sd.mobile || ''
				this.util.request({
					api: '/api/mobile/visit/get-ask',
					data: {
						type: that.type,
						mobile: mobileParam
					},
					utilSuccess: function(res) {
						that.studyInfo = res
						that.quizRequired = !(
							res.quiz_required === 0 ||
							res.quiz_required === false ||
							res.quiz_required === '0'
						)
						const files = res.file_detail || []
						for(var k of files){
							if(k.extension=='mp4'){
								that.videoList.push(k)
							}else{
								that.picList.push(k)
							}
						}
						that.showSwiperFlag = that.picList.length==0? 1 : 0
						const minute = res.minute ? parseFloat(res.minute) : 0
						// VIP 也强制最短观看时长：若未配置分钟数，默认最短 1 分钟
						if (!that.quizRequired && (!minute || minute <= 0)) {
							that.studyMin = 60
						} else {
							that.studyMin = Math.max(0, Math.round(minute * 60))
						}
					},
					utilFail: function(res) {}
				})
			},
			loadTime() {
				if (this.studyMin === null || this.studyMin === undefined) {
					return
				}
				if (this.studyMin >= 0) {
					let minutes = Math.floor(this.studyMin / 60);
					let seconds = Math.floor(this.studyMin % 60);
					minutes = minutes < 10 ? "0" + minutes : minutes
					seconds = seconds < 10 ? "0" + seconds : seconds
					this.studyTime = minutes + ":" + seconds
					this.studyMin--
				} else if (this.studyMin === -1) {
					if (this.timer) {
						clearInterval(this.timer)
						this.timer = null
					}
				}
			},
			goTest() {
				if (!this.quizRequired) {
					this.submitWatchOnly()
					return
				}
				const form = uni.getStorageSync('formdata') || {}
				const base = {
					type: parseInt(this.type),
					name: form.name,
					mobile: form.mobile,
					idcard: form.idcard || form.passcard,
					expire_day: this.studyInfo.expire_day
				}
				const prev = uni.getStorageSync('studydata') || {}
				uni.setStorageSync('studydata', Object.assign({}, prev, base))
				uni.redirectTo({
					url: '/pages/visit/testStudy?type=' + this.type
				})
			},
			submitWatchOnly() {
				const form = uni.getStorageSync('formdata') || uni.getStorageSync('studydata') || {}
				const that = this
				this.util.request({
					api: '/api/mobile/visit/ask-save',
					method: 'POST',
					data: {
						type: parseInt(this.type),
						name: form.name,
						mobile: form.mobile,
						idcard: form.idcard || form.passcard,
						expire_day: this.studyInfo.expire_day,
						content: [],
						ask: []
					},
					utilSuccess: function(res) {
						if (uni.getStorageSync('studydata')) {
							uni.removeStorageSync('studydata')
						}
						uni.showToast({
							title: '学习已完成',
							duration: 1500,
							icon: 'none'
						})
						setTimeout(function() {
							if (uni.getStorageSync('formdata')) {
								uni.redirectTo({
									url: '/pages/visit/addrecord'
								})
							} else {
								uni.redirectTo({
									url: '/pages/index/index'
								})
							}
						}, 1500)
					},
					utilFail: function(res) {
						uni.showToast({
							title: res || '提交失败',
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			changeImg(e) {
				this.imgcurrent = e.current
			},
			changeVideo(e) {
				this.videocurrent = e.current
			},
			changeSwiperImg(){
				this.showSwiperFlag=0
				this.imgcurrent=0
			},
			changeSwiperVideo(){
				this.showSwiperFlag=1
				this.videocurrent=0
			}
			

		}
	}
</script>

<style lang="scss">
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: #fff;
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #044ed7;
			}
		}
	}
</style>
<style scoped>
	.containers {
		background-color: #fff;
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: 60rpx;
		position: relative;
	}

	.containers>button {
		position: absolute;
		bottom: 60rpx;
		margin: 20rpx;
		width: 90%;
	}

	.steps {
		margin-bottom: 40rpx
	}

	.goTest {
		background-color: #044ed7;
		color: #fff;
	}

	.noTest {
		background-color: #ddd;
		color: #000
	}

	.service-show {
		width: 100%;
		height: 360rpx;
		position: relative;
	}
	.service-show .changePicVideo{
		    position: absolute;
		    right: 80rpx;
		    bottom: 25rpx;
	}
	.service-show .changePicVideo view{
		    background: rgba(0,0,0,0.5);
		        display: inline-block;
		        padding: 5rpx 20rpx;
		        margin: 6rpx;
		        border-radius: 15rpx;
		        color: #fff;
		        font-size: 28rpx;
	}
	.service-show .changePicVideo view image{
		width:24rpx;
		height:21rpx;
		margin-right: 10rpx;
	}
</style>