You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

138 lines
2.8 KiB

<template>
<view class="containers">
<view class="steps">
<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>
<view>
{{studyInfo.content?studyInfo.content:""}}
</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: {},
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
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.navigateTo({
url: '/pages/visit/testStudy?type=' + this.type
})
}
}
}
</script>
<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;
}
</style>