master
parent
90ca22d360
commit
490382bb7c
File diff suppressed because it is too large
Load Diff
@ -1,252 +1,372 @@
|
||||
<template>
|
||||
<view class="containers">
|
||||
<view class="steps">
|
||||
<uni-steps :options="steps" :active="stepActive" active-color="#4f607e" />
|
||||
</view>
|
||||
<view class="study" style="padding:0 20rpx">
|
||||
<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">
|
||||
<view v-if="studyMin==-1" class="button-text">
|
||||
<view>去测验</view>
|
||||
<view class="en-text">Go to Test</view>
|
||||
</view>
|
||||
<view v-else class="button-text">
|
||||
<view>需要学习{{studyInfo.minute?studyInfo.minute:""}}分钟可去测验({{studyTime}})</view>
|
||||
<view class="en-text">Need to study {{studyInfo.minute?studyInfo.minute:""}} minutes before test ({{studyTime}})</view>
|
||||
</view>
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type: 1,
|
||||
steps: [{
|
||||
title: '填报\nRegistration'
|
||||
}, {
|
||||
title: '学习\nStudy'
|
||||
}, {
|
||||
title: '完成\nComplete'
|
||||
}],
|
||||
stepActive: 1,
|
||||
studyInfo: {},
|
||||
picList:[],
|
||||
videoList:[],
|
||||
showSwiperFlag:0,
|
||||
imgcurrent: 0,
|
||||
videocurrent:0,
|
||||
studyTime: "00:00", // 学习时间
|
||||
studyMin: -1, // 倒计时
|
||||
timer: null,
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// uni.navigateTo({
|
||||
// url:'/pages/visit/testStudy?type=1'
|
||||
// })
|
||||
// return
|
||||
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: #4f607e;
|
||||
}
|
||||
}
|
||||
}
|
||||
</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: #4f607e;
|
||||
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;
|
||||
}
|
||||
.button-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.button-text .en-text {
|
||||
font-size: 20rpx;
|
||||
opacity: 0.85;
|
||||
margin-top: -25rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
.button-text > view:first-child {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="containers">
|
||||
<view class="steps">
|
||||
<uni-steps :options="steps" :active="stepActive" active-color="#4f607e" />
|
||||
</view>
|
||||
<view class="study" style="padding:0 20rpx">
|
||||
<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" class="video-overlay">
|
||||
<u-icon name="arrow-left" color="#fff" size="40" class="video-arrow"
|
||||
@click.stop="slideVideo('prev')" v-if="videoList.length>1"></u-icon>
|
||||
|
||||
<view class="video-main" @click="openVideoPopup(videoList[videocurrent], videocurrent)">
|
||||
<u-icon name="play-right-fill" color="#fff" size="60"></u-icon>
|
||||
<!-- <view class="video-count">
|
||||
<text>视频 {{videocurrent+1}} / {{videoList.length}}</text>
|
||||
<text class="en-text">{{videocurrent+1}} / {{videoList.length}} Videos</text>
|
||||
</view> -->
|
||||
<!-- <view class="video-title" v-if="videoList[videocurrent] && (videoList[videocurrent].name || videoList[videocurrent].title)">
|
||||
<text>{{videoList[videocurrent].name || videoList[videocurrent].title}}</text>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<u-icon name="arrow-right" color="#fff" size="40" class="video-arrow"
|
||||
@click.stop="slideVideo('next')" v-if="videoList.length>1"></u-icon>
|
||||
</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>
|
||||
<u-popup class="video-popup" :show="showVideoPlayer" mode="center" closeable="true" @close="closeVideoPopup">
|
||||
<view class="video-wrapper">
|
||||
<video id="studyVideo" class="study-video" :src="currentVideoUrl" controls
|
||||
show-center-play-btn enable-play-gesture show-fullscreen-btn
|
||||
@fullscreenchange="handleFullScreenChange">
|
||||
</video>
|
||||
</view>
|
||||
</u-popup>
|
||||
<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">
|
||||
<view v-if="studyMin==-1" class="button-text">
|
||||
<view>去测验</view>
|
||||
<view class="en-text">Go to Test</view>
|
||||
</view>
|
||||
<view v-else class="button-text">
|
||||
<view>需要学习{{studyInfo.minute?studyInfo.minute:""}}分钟可去测验({{studyTime}})</view>
|
||||
<view class="en-text">Need to study {{studyInfo.minute?studyInfo.minute:""}} minutes before test ({{studyTime}})</view>
|
||||
</view>
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type: 1,
|
||||
steps: [{
|
||||
title: '填报\nRegistration'
|
||||
}, {
|
||||
title: '学习\nStudy'
|
||||
}, {
|
||||
title: '完成\nComplete'
|
||||
}],
|
||||
stepActive: 1,
|
||||
studyInfo: {},
|
||||
picList:[],
|
||||
videoList:[],
|
||||
showSwiperFlag:0,
|
||||
imgcurrent: 0,
|
||||
videocurrent:0,
|
||||
studyTime: "00:00", // 学习时间
|
||||
studyMin: -1, // 倒计时
|
||||
timer: null,
|
||||
videoDirection: 90,
|
||||
showVideoPlayer: false,
|
||||
currentVideoUrl: '',
|
||||
videoContext: null,
|
||||
videoPoster: require('../../static/img/ptfk.png')
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// uni.navigateTo({
|
||||
// url:'/pages/visit/testStudy?type=1'
|
||||
// })
|
||||
// return
|
||||
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
|
||||
},
|
||||
changeSwiperImg(){
|
||||
this.showSwiperFlag=0
|
||||
this.imgcurrent=0
|
||||
},
|
||||
changeSwiperVideo(){
|
||||
this.showSwiperFlag=1
|
||||
this.videocurrent=0
|
||||
},
|
||||
slideVideo(direction){
|
||||
if(this.videoList.length<=1){
|
||||
return
|
||||
}
|
||||
if(direction === 'prev'){
|
||||
this.videocurrent = (this.videocurrent - 1 + this.videoList.length) % this.videoList.length
|
||||
}else if(direction === 'next'){
|
||||
this.videocurrent = (this.videocurrent + 1) % this.videoList.length
|
||||
}
|
||||
},
|
||||
openVideoPopup(item, index){
|
||||
if(!item || !item.url){
|
||||
return
|
||||
}
|
||||
this.currentVideoUrl = item.url
|
||||
this.showVideoPlayer = true
|
||||
this.$nextTick(()=>{
|
||||
setTimeout(()=>{
|
||||
this.videoContext = uni.createVideoContext('studyVideo', this)
|
||||
// #ifdef MP-WEIXIN
|
||||
this.videoContext.requestFullScreen({
|
||||
direction: this.videoDirection
|
||||
})
|
||||
// #endif
|
||||
this.videoContext.play()
|
||||
}, 200)
|
||||
})
|
||||
},
|
||||
closeVideoPopup(){
|
||||
if(this.videoContext){
|
||||
this.videoContext.pause()
|
||||
// #ifdef MP-WEIXIN
|
||||
this.videoContext.exitFullScreen()
|
||||
// #endif
|
||||
}
|
||||
this.showVideoPlayer = false
|
||||
},
|
||||
handleFullScreenChange(e){
|
||||
if(!e.detail.fullScreen){
|
||||
this.closeVideoPopup()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</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: #4f607e;
|
||||
}
|
||||
}
|
||||
}
|
||||
</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: #4f607e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.noTest {
|
||||
background-color: #ddd;
|
||||
color: #000
|
||||
}
|
||||
|
||||
.service-show {
|
||||
width: 100%;
|
||||
height: 360rpx;
|
||||
position: relative;
|
||||
}
|
||||
.video-overlay{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.75);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 20rpx;
|
||||
color: #fff;
|
||||
padding: 0 30rpx;
|
||||
gap: 20rpx;
|
||||
height: 100%;
|
||||
}
|
||||
.video-main{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.video-count{
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.video-count .en-text{
|
||||
font-size: 22rpx;
|
||||
margin-top: 8rpx;
|
||||
color: rgba(255,255,255,0.85);
|
||||
}
|
||||
.video-title{
|
||||
margin-top: 20rpx;
|
||||
font-size: 26rpx;
|
||||
color: rgba(255,255,255,0.9);
|
||||
text-align: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.video-arrow{
|
||||
padding: 20rpx;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.button-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.button-text .en-text {
|
||||
font-size: 20rpx;
|
||||
opacity: 0.85;
|
||||
margin-top: -25rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
.button-text > view:first-child {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.video-popup /deep/ .u-popup__content{
|
||||
background: transparent;
|
||||
}
|
||||
.video-wrapper{
|
||||
width: 640rpx;
|
||||
height: 360rpx;
|
||||
background: #000;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.study-video{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue