学习

pages/visit/addrecord.vue

@@ -240,7 +240,12 @@
 			}
 		},
 		onLoad(options) {
+
 			this.form.type = options.type
+			// uni.navigateTo({
+			// 	url: '/pages/visit/study?type='+this.form.type
+			// })
+			// return
 			this.isCall = options.iscall?options.iscall:''
 			this.goStudy = this.isCall=='call'?'提交':'去学习'
 			this.form.audit_status = this.isCall=='call'?1:0

pages/visit/study.vue

@@ -4,16 +4,42 @@
 			<uni-steps :options="steps" :active="stepActive" active-color="#044ed7" />
 		</view>
 		<view class="study">
-			<view class="service-show">
+			<view class="service-show" v-if="studyInfo.file_detail.length>0">
-				<swiper class="service-show-swiper" :indicator-dots="true">
+				<view v-if="picList.length>0&&showSwiperFlag==0">
-					<swiper-item v-for="(img,index) in studyInfo.file_detail" :key="index">
+					<u-swiper :list="picList" @change="e => imgcurrent = e.current" keyName="url"
-						<u-image height="360rpx" width="100%" :src="img.url" mode="aspectFit">
+						:height="'360rpx'" :interval='4000' :duration='500' :autoplay='false' circular>
-						</u-image>
+						<view slot="indicator" class="indicator">
-					</swiper-item>
+							<view class="indicator__dot" v-for="(item, index) in picList" :key="index"
-				</swiper>
+								:class="[index === imgcurrent && 'indicator__dot--active']">
+							</view>
+						</view>
+					</u-swiper>
+				</view>
+				<view v-if="videoList.length>0&&showSwiperFlag==1">
+					<u-swiper :list="videoList" @change="e => videocurrent = e.current" 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='showSwiperFlag=0,imgcurrent=0' v-if="picList.length>0">
+						<image src="../../static/img/pic.png">
+						</image>{{picList.length}}
+					</view>
+					<view @click='showSwiperFlag=1,videocurrent=0' v-if="videoList.length>0">
+						<image src="../../static/img/video.png">
+						</image>{{videoList.length}}
+					</view>
+				</view>
+				
 			</view>
-			<view>
+			<view v-html="studyInfo.content" style="padding-bottom: 160rpx;">
-				{{studyInfo.content?studyInfo.content:""}}
 			</view>
 		</view>
 		<view class="asks">
@@ -42,6 +68,11 @@
 				}],
 				stepActive: 1,
 				studyInfo: {},
+				picList:[],
+				videoList:[],
+				showSwiperFlag:0,
+				imgcurrent: 0,
+				videocurrent:0,
 				studyTime: "00:00", // 学习时间
 				studyMin: -1, // 倒计时
 				timer: null,
@@ -70,6 +101,14 @@
 					},
 					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
 					},
@@ -98,6 +137,25 @@
 	}
 </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;
@@ -131,7 +189,25 @@
 	.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>