|
|
|
|
@ -4,16 +4,42 @@
|
|
|
|
|
<uni-steps :options="steps" :active="stepActive" active-color="#044ed7" />
|
|
|
|
|
</view>
|
|
|
|
|
<view class="study">
|
|
|
|
|
<view class="service-show">
|
|
|
|
|
<swiper class="service-show-swiper" :indicator-dots="true">
|
|
|
|
|
<swiper-item v-for="(img,index) in studyInfo.file_detail" :key="index">
|
|
|
|
|
<u-image height="360rpx" width="100%" :src="img.url" mode="aspectFit">
|
|
|
|
|
</u-image>
|
|
|
|
|
</swiper-item>
|
|
|
|
|
</swiper>
|
|
|
|
|
<view class="service-show" v-if="studyInfo.file_detail.length>0">
|
|
|
|
|
<view v-if="picList.length>0&&showSwiperFlag==0">
|
|
|
|
|
<u-swiper :list="picList" @change="e => imgcurrent = 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 picList" :key="index"
|
|
|
|
|
:class="[index === imgcurrent && 'indicator__dot--active']">
|
|
|
|
|
</view>
|
|
|
|
|
<view>
|
|
|
|
|
{{studyInfo.content?studyInfo.content:""}}
|
|
|
|
|
</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 v-html="studyInfo.content" style="padding-bottom: 160rpx;">
|
|
|
|
|
</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>
|
|
|
|
|
|
