mkw-visit-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">
			<view class="service-show" v-if="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">去测验</text>
			<text v-else>需要学习{{studyInfo.minute?studyInfo.minute:""}}分钟可去测验({{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", // 学习时间
				studyMin: -1, // 倒计时
				timer: null,
			}
		},
		onLoad(options) {
			let that = this
			this.type = options.type
			this.getStudy()
			if (this.timer) {
				clearInterval(this.timer)
			} else {
				this.timer = setInterval(function() {
					that.loadTime()
				}, 1000)
			}

		},
		methods: {
			async getStudy() {
				let that = this
				this.util.request({
					api: '/api/mobile/visit/get-ask',
					data: {
						type: that.type
					},
					utilSuccess: function(res) {
						that.studyInfo = res
						for(var k of res.file_detail){
							if(k.extension=='mp4'){
								that.videoList.push(k)
							}else{
								that.picList.push(k)
							}
						}
						that.showSwiperFlag = that.picList.length==0? 1 : 0
						that.studyMin = res.minute * 60
						// that.studyMin = .1 * 60
					},
					utilFail: function(res) {}
				})
			},
			loadTime() {
				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 {
					clearInterval(this.timer);
				}
			},
			goTest() {
				uni.redirectTo({
					url: '/pages/visit/testStudy?type=' + this.type
				})
			},
			changeImg(e){
				this.imgcurrent = e.current
			},
			changeImg(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: 10rpx;
		    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>