216 lines
6.6 KiB
Vue
216 lines
6.6 KiB
Vue
|
<template>
|
|||
|
|
<view class="page">
|
|||
|
|
<nav-bar title="Questionnaire" bgColor="#fff"></nav-bar>
|
|||
|
|
<!-- 内容切换 -->
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="v2" style="margin-top: 20rpx">
|
|||
|
|
<view class="title">{{detail.questionnaire.title}}</view>
|
|||
|
|
<view style="font-weight: 400;font-size: 14px;color: #999999;">Answer time: {{detail.created_at}}</view>
|
|||
|
|
<view v-for="(item, index) in detail.questionnaire.body" :key="index" style="margin-top: 30rpx;" :id="'item'+index">
|
|||
|
|
<view style="font-size: 28rpx; color: #333; font-weight: 600;">
|
|||
|
|
<view style="float: left; width: 8%;" :class="ans==index? 'ans' : ''">{{index+1}})</view>
|
|||
|
|
<view style="float: left; width: 92%;" :class="ans==index? 'ans' : ''">{{item.question}}</view>
|
|||
|
|
<view style="clear: both;"></view>
|
|||
|
|
</view>
|
|||
|
|
<view style="margin-top: 20rpx;">
|
|||
|
|
<uni-row :gutter="10">
|
|||
|
|
<radio-group style="width: 100%;">
|
|||
|
|
<uni-col :span="24" v-for="(answer, i) in item.answer">
|
|||
|
|
<radio :value="String.fromCharCode(65+i)" :checked="item.Res === (i)" style="width: 100%; padding-left: 7%;" >
|
|||
|
|
<view >
|
|||
|
|
<view :class="ans==index? 'ans' : ''" style="float: left; width: 6%; font-size: 28rpx;">{{String.fromCharCode(65+i)}} :</view>
|
|||
|
|
<view :class="ans==index? 'ans' : ''" style="float: left; width: 80%; margin-left: 1%; font-size: 28rpx;">{{answer}}</view>
|
|||
|
|
</view>
|
|||
|
|
</radio>
|
|||
|
|
</uni-col>
|
|||
|
|
</radio-group>
|
|||
|
|
</uni-row>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view style="clear: both;"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="h5_press_save">
|
|||
|
|
<button class="download">{{msg}}</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import zNavigation from '@/components/module/navigation.vue';
|
|||
|
|
import {
|
|||
|
|
mapState,
|
|||
|
|
mapMutations
|
|||
|
|
} from 'vuex';
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
zNavigation
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
detail:{
|
|||
|
|
questionnaire:{
|
|||
|
|
title:''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
msg:'',
|
|||
|
|
ans: -1,
|
|||
|
|
oldans: -1,
|
|||
|
|
id: 0,
|
|||
|
|
top: 0,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapState(['userInfo'])
|
|||
|
|
},
|
|||
|
|
//第一次加载
|
|||
|
|
onLoad(e) {
|
|||
|
|
uni.showLoading({
|
|||
|
|
title:'loading...'
|
|||
|
|
});
|
|||
|
|
if(e.id){
|
|||
|
|
this.id = e.id;
|
|||
|
|
this.getDetails(e.id);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//页面显示
|
|||
|
|
onShow() {},
|
|||
|
|
methods: {
|
|||
|
|
getDetails(id){
|
|||
|
|
this.$http.post('/api/server/detail?server_id='+id+'&lang='+this.$i18n.locale).then(res => {
|
|||
|
|
if(res.code == 0){
|
|||
|
|
this.detail = res.data;
|
|||
|
|
uni.hideLoading();
|
|||
|
|
if(parseInt(this.detail.step_text.status) === 8888){
|
|||
|
|
//答题中
|
|||
|
|
this.msg = this.detail.step_text.msg;
|
|||
|
|
this.ans = this.detail.step_text.index-1;
|
|||
|
|
for(let i = 0; i<this.detail.step_text.index; i++){
|
|||
|
|
this.detail.questionnaire.body[i].Res = this.detail.answer[i];
|
|||
|
|
}
|
|||
|
|
if(this.ans != this.oldans){
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.getElementTop(this.ans);
|
|||
|
|
this.oldans = this.detail.step_text.index-1;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}else if(parseInt(this.detail.step_text.status) === 9999){
|
|||
|
|
this.msg = this.detail.step_text.msg;
|
|||
|
|
}else{
|
|||
|
|
this.msg = this.detail.step_text.msg;
|
|||
|
|
this.ans = this.detail.questionnaire.body.length-1;
|
|||
|
|
for(let i = 0; i<=this.ans; i++){
|
|||
|
|
this.detail.questionnaire.body[i].Res = this.detail.answer[i];
|
|||
|
|
}
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.getElementTop(this.ans);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if(parseInt(this.detail.step_text.status) !== 2){
|
|||
|
|
const seconds = parseInt(this.detail.step_text.remaining_seconds) + 1;
|
|||
|
|
const timerId = setTimeout(() => {
|
|||
|
|
this.getDetails(id);
|
|||
|
|
clearTimeout(timerId);
|
|||
|
|
}, seconds*1000);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}).catch(err => {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
getElementTop(id) {
|
|||
|
|
let _sef = this;
|
|||
|
|
// 创建一个节点选择器
|
|||
|
|
const query = uni.createSelectorQuery();
|
|||
|
|
// 在组件内使用 this 指向当前组件实例
|
|||
|
|
query.select('#item'+id).boundingClientRect(function(rect) {
|
|||
|
|
// rect 是获取到的节点的布局位置信息
|
|||
|
|
if (rect) {
|
|||
|
|
uni.pageScrollTo({
|
|||
|
|
scrollTop: rect.top + _sef.top - 50, // 目标位置的偏移量，根据实际情况调整
|
|||
|
|
duration: 300 // 动画时长，单位ms
|
|||
|
|
});
|
|||
|
|
_sef.top += rect.top - 50;
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}).exec(); // 注意这里的 exec() 是必须的，用于执行查询
|
|||
|
|
},
|
|||
|
|
onTokenJump(url) {
|
|||
|
|
this.judgeLogin(() => {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: url
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
//页面隐藏
|
|||
|
|
onHide() {},
|
|||
|
|
//页面卸载
|
|||
|
|
onUnload() {},
|
|||
|
|
//页面下来刷新
|
|||
|
|
onPullDownRefresh() {},
|
|||
|
|
//页面上拉触底
|
|||
|
|
onReachBottom() {},
|
|||
|
|
//用户点击分享
|
|||
|
|
onShareAppMessage(e) {
|
|||
|
|
return this.wxShare();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
@import '@/style/mixin.scss';
|
|||
|
|
body{background-color: #fff;}
|
|||
|
|
.page{background-color: #fff; min-height: 100vh; overflow: hidden;}
|
|||
|
|
.b{height: 70rpx; width: 200rpx; line-height: 70rpx; font-size: 28rpx;}
|
|||
|
|
::v-deep .uni-radio-input{width: 30rpx; height: 30rpx; float: left;}
|
|||
|
|
::v-deep .uni-radio-wrapper{width: 100%; display: block;}
|
|||
|
|
::v-deep .uni-radio-wrapper{-webkit-align-items: flex-start; -webkit-box-align:flex-start; align-items:flex-start; vertical-align: top}
|
|||
|
|
//修改slider高度
|
|||
|
|
::v-deep .uni-slider-handle-wrapper {height: 14rpx !important;}
|
|||
|
|
//修改slider选中的背景色
|
|||
|
|
::v-deep .uni-slider-track {background-image: linear-gradient(to right,#6cd0ca,#133fce) !important;}
|
|||
|
|
::v-deep .uni-slider-handle{display: none;}
|
|||
|
|
::v-deep .uni-slider-thumb{display: none;}
|
|||
|
|
::v-deep uni-slider{margin: 16rpx 0px !important;}
|
|||
|
|
::v-deep uni-slider .uni-slider-tap-area{padding: 4rpx 0rpx !important;}
|
|||
|
|
|
|||
|
|
.v2{ padding: 10px; width: 94%; margin: 0rpx auto; }
|
|||
|
|
.v2 .title{font-weight: 600; font-size: 16px; color: #333;}
|
|||
|
|
.w{background-color: #F8F8F8; border-radius: 10px; padding: 20px 10px;}
|
|||
|
|
.w .t{text-align: center; margin-top: 10px; font-size: 14px;}
|
|||
|
|
.head-nav {display: flex;align-items: center;color: #999;font-size: 36rpx;font-weight: 500;background-color: #fff;}
|
|||
|
|
.tab{color: #999;font-size: 32rpx;font-weight: 500;float: left;padding: 40rpx;}
|
|||
|
|
.activite {color: #333;border-bottom: 2px solid #1D61E7;}
|
|||
|
|
.head-nav>view {padding-bottom: 10rpx;}
|
|||
|
|
.content {height: 100%; padding-bottom: 20rpx;}
|
|||
|
|
.h5_press_save {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
z-index: 100;
|
|||
|
|
.download {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
background-color: rgba(0,0,0,0.5);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: center;
|
|||
|
|
position: absolute;
|
|||
|
|
padding: 0rpx 30rpx;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
bottom: 20rpx;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.ans{
|
|||
|
|
color: #1D61E7;
|
|||
|
|
}
|
|||
|
|
</style>
|