440 lines
16 KiB
Vue
Raw Permalink Normal View History

2025-06-06 03:08:19 +08:00
<template>
<view class="page">
2025-06-10 17:10:40 +08:00
<uni-nav-bar @clickLeft="goto(1, 1)" left-icon="back" :border="false" :shadow="false" :fixed="true"
:title="$t('answer.title')" backgroundColor="#fff" :statusBar="true"></uni-nav-bar>
2025-06-06 03:08:19 +08:00
<!-- 内容切换 -->
<view class="content">
2025-06-10 00:51:49 +08:00
<!-- <view class="v2" style="margin-top: 20rpx" v-if="step==10">
2025-06-06 03:08:19 +08:00
<view class="title">{{detail.questionnaire.title}}</view>
2025-06-10 00:51:49 +08:00
<view style="font-weight: 400;font-size: 28rpx;color: #999999;">{{$t('answer.text1')}}: {{detail.created_at}}</view>
2025-06-06 03:08:19 +08:00
<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%;">
2025-06-07 21:01:16 +08:00
<uni-col :span="24" v-for="(answer, i) in item.answer" :key="i">
2025-06-06 03:08:19 +08:00
<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>
2025-06-10 00:51:49 +08:00
</view> -->
<view class="v2" v-if="step==1">
<view style="width: 50%; margin: 20rpx auto; background-color: #f8f8f8; text-align: center;
padding: 30rpx 50rpx; font-size: 32rpx; color: #333;">
2025-06-10 03:13:47 +08:00
{{$t('answer.text2')}}<span style="color: #1D61E7">{{step}}</span>/5
2025-06-10 00:51:49 +08:00
</view>
<view><image src="/static/images/step1.png" style="width: 60%; margin: auto;" mode="widthFix"></image></view>
<view style="font-size: 36rpx; font-weight: 600; text-align: center; color: #3d3d3d;">
2025-06-10 03:13:47 +08:00
{{$t('answer.text3')}}
2025-06-10 00:51:49 +08:00
</view>
<view style="font-size: 28rpx; font-weight: 400; text-align: center; color: #999; margin-top: 10rpx;">
2025-06-10 03:13:47 +08:00
{{$t('answer.text4')}}
2025-06-10 00:51:49 +08:00
</view>
<view>
<view style="color:#1D61FF; font-size: 28rpx; text-align: center; font-weight: 500;
2025-06-10 03:13:47 +08:00
margin-top: 60rpx;">{{$t('answer.text5')}}...{{b}}%</view>
2025-06-10 00:51:49 +08:00
<view style="width: 80%; margin: auto;">
<slider :value="b" :disabled="true" style="height: 24rpx;" min="0" max="100" step="0.01" />
</view>
</view>
</view>
<view class="v2" v-if="step==2">
<view style="width: 50%; margin: 20rpx auto; background-color: #f8f8f8; text-align: center;
padding: 30rpx 50rpx; font-size: 32rpx; color: #333;">
2025-06-10 03:13:47 +08:00
{{$t('answer.text6')}}<span style="color: #1D61E7">{{step}}</span>/5
2025-06-10 00:51:49 +08:00
</view>
<view><image src="/static/images/step2.png" style="width: 60%; margin: auto;" mode="widthFix"></image></view>
<view style="font-size: 36rpx; font-weight: 600; text-align: center; color: #3d3d3d;">
2025-06-10 03:13:47 +08:00
{{$t('answer.text7')}}
2025-06-10 00:51:49 +08:00
</view>
<view style="font-size: 28rpx; font-weight: 400; text-align: center; color: #999; margin-top: 10rpx;">
2025-06-10 03:13:47 +08:00
{{$t('answer.text8')}}
2025-06-10 00:51:49 +08:00
</view>
<view>
<view style="color:#1D61FF; font-size: 28rpx; text-align: center; font-weight: 500;
2025-06-10 03:13:47 +08:00
margin-top: 60rpx;">{{$t('answer.text5')}}...{{b}}%</view>
2025-06-10 00:51:49 +08:00
<view style="width: 80%; margin: auto;">
<slider :value="b" :disabled="true" style="height: 24rpx;" min="0" max="100" step="0.01" />
</view>
</view>
</view>
<view class="v2" v-if="step==3">
<view style="width: 50%; margin: 20rpx auto; background-color: #f8f8f8; text-align: center;
padding: 30rpx 50rpx; font-size: 32rpx; color: #333;">
2025-06-10 03:13:47 +08:00
{{$t('answer.text9')}}<span style="color: #1D61E7">{{step}}</span>/5
2025-06-10 00:51:49 +08:00
</view>
<view><image src="/static/images/step3.png" style="width: 60%; margin: auto;" mode="widthFix"></image></view>
<view style="font-size: 36rpx; font-weight: 600; text-align: center; color: #3d3d3d;">
2025-06-10 03:13:47 +08:00
{{$t('answer.text10')}}
2025-06-10 00:51:49 +08:00
</view>
<view style="font-size: 28rpx; font-weight: 400; text-align: center; color: #999; margin-top: 10rpx;">
2025-06-10 03:13:47 +08:00
{{$t('answer.text11')}}
2025-06-10 00:51:49 +08:00
</view>
<view>
<view style="color:#1D61FF; font-size: 28rpx; text-align: center; font-weight: 500;
2025-06-10 03:13:47 +08:00
margin-top: 60rpx;">{{$t('answer.text5')}}...{{b}}%</view>
2025-06-10 00:51:49 +08:00
<view style="width: 80%; margin: auto;">
<slider :value="b" :disabled="true" style="height: 24rpx;" min="0" max="100" step="0.01" />
</view>
</view>
</view>
<view class="v2" v-if="step==4">
<view style="width: 50%; margin: 20rpx auto; background-color: #f8f8f8; text-align: center;
padding: 30rpx 50rpx; font-size: 32rpx; color: #333;">
2025-06-10 03:13:47 +08:00
{{$t('answer.text12')}}<span style="color: #1D61E7">{{step}}</span>/5
2025-06-10 00:51:49 +08:00
</view>
<view><image src="/static/images/step4.png" style="width: 60%; margin: auto;" mode="widthFix"></image></view>
<view style="font-size: 36rpx; font-weight: 600; text-align: center; color: #3d3d3d;">
2025-06-10 03:13:47 +08:00
{{$t('answer.text13')}}
2025-06-10 00:51:49 +08:00
</view>
<view style="font-size: 28rpx; font-weight: 400; text-align: center; color: #999; margin-top: 10rpx;">
2025-06-10 03:13:47 +08:00
{{$t('answer.text14')}}
2025-06-10 00:51:49 +08:00
</view>
<view>
<view style="color:#1D61FF; font-size: 28rpx; text-align: center; font-weight: 500;
2025-06-10 03:13:47 +08:00
margin-top: 60rpx;">{{$t('answer.text5')}}...{{b}}%</view>
2025-06-10 00:51:49 +08:00
<view style="width: 80%; margin: auto;">
<slider :value="b" :disabled="true" style="height: 24rpx;" min="0" max="100" step="0.01" />
</view>
</view>
</view>
<view class="v2" v-if="step==5">
<view style="width: 50%; margin: 20rpx auto; background-color: #f8f8f8; text-align: center;
padding: 30rpx 50rpx; font-size: 32rpx; color: #333;">
2025-06-10 03:13:47 +08:00
{{$t('answer.text15')}}<span style="color: #1D61E7">{{step}}</span>/5
2025-06-10 00:51:49 +08:00
</view>
<view><image src="/static/images/step5.png" style="width: 60%; margin: auto;" mode="widthFix"></image></view>
<view style="font-size: 36rpx; font-weight: 600; text-align: center; color: #3d3d3d;">
2025-06-10 03:13:47 +08:00
{{$t('answer.text16')}}
2025-06-10 00:51:49 +08:00
</view>
<view style="font-size: 28rpx; font-weight: 400; text-align: center; color: #999; margin-top: 10rpx;">
2025-06-10 03:13:47 +08:00
{{$t('answer.text17')}}
2025-06-10 00:51:49 +08:00
</view>
<view>
<view style="color:#1D61FF; font-size: 28rpx; text-align: center; font-weight: 500;
2025-06-10 03:13:47 +08:00
margin-top: 60rpx;">{{$t('answer.text5')}}...{{b}}%</view>
2025-06-10 00:51:49 +08:00
<view style="width: 80%; margin: auto;">
<slider :value="b" :disabled="true" style="height: 24rpx;" min="0" max="100" step="0.01" />
</view>
</view>
</view>
<view class="v2" v-if="step==6">
<view style="background: url('/static/images/step6-2.png');
background-repeat: no-repeat;
background-position: center bottom;
background-size: 50%;
padding-bottom: 150rpx;
margin-bottom: 40rpx;">
<image src="/static/images/step6-1.png" class="bounce-image" style="width: 40%; margin: auto;" mode="widthFix"></image></view>
<view style="font-size: 32rpx; font-weight: 600; text-align: left; color: #3d3d3d;">
Q{{ans}}{{detail.q}}
</view>
<view style="font-size: 32rpx; font-weight: 400; color: #3d3d3d;">
<uni-row style="margin-top: 40rpx;" v-for="(item, index) in detail.a" :key="index">
<radio-group style="width: 100%;">
<uni-col :span="2">{{String.fromCharCode(65+index)}} :</uni-col>
<uni-col :span="21">
{{item}}
</uni-col>
<uni-col :span="1">
<radio style="width: 100%;" :checked="answer == index" ></radio>
</uni-col>
</radio-group>
</uni-row>
</view>
</view>
<view class="v2" v-if="step==7">
<view><image src="/static/images/step7.png" style="width: 40%; margin: 60rpx auto;" mode="widthFix"></image></view>
<view style="font-size: 36rpx; font-weight: 600; text-align: center; color: #3d3d3d;">
2025-06-10 03:13:47 +08:00
{{$t('answer.text18')}}
2025-06-10 00:51:49 +08:00
</view>
2025-06-10 03:13:47 +08:00
<!-- <view>
2025-06-10 00:51:49 +08:00
<button style="width: 40%; margin: 40rpx auto; background-color: #1D61E7; color: #fff; border-radius: 30rpx;">BACK</button>
2025-06-10 03:13:47 +08:00
</view> -->
2025-06-06 03:08:19 +08:00
</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 {
2025-06-10 00:51:49 +08:00
step: -1,
stepvalue: 0,
2025-06-06 03:08:19 +08:00
detail:{
2025-06-10 00:51:49 +08:00
q:'',
a:[],
r:-1
2025-06-06 03:08:19 +08:00
},
2025-06-10 00:51:49 +08:00
answer: -1,
2025-06-06 03:08:19 +08:00
msg:'',
ans: -1,
oldans: -1,
id: 0,
top: 0,
2025-06-10 00:51:49 +08:00
b: 0,
2025-06-06 03:08:19 +08:00
};
},
computed: {
...mapState(['userInfo'])
},
//第一次加载
onLoad(e) {
uni.showLoading({
2025-06-07 21:08:06 +08:00
title: this.$t('loading')
2025-06-06 03:08:19 +08:00
});
if(e.id){
this.id = e.id;
this.getDetails(e.id);
}
},
//页面显示
onShow() {},
methods: {
2025-06-10 00:51:49 +08:00
goto(url, type) {
console.log(url);
if (type == 2) {
return uni.switchTab({ url: url })
}
if (type == 1) {
return uni.navigateBack();
}
uni.navigateTo({
url: url
})
},
2025-06-06 03:08:19 +08:00
getDetails(id){
this.$http.post('/api/server/detail?server_id='+id+'&lang='+this.$i18n.locale).then(res => {
if(res.code == 0){
2025-06-10 00:51:49 +08:00
this.answer = -1;
2025-06-06 03:08:19 +08:00
uni.hideLoading();
2025-06-10 00:51:49 +08:00
if(parseInt(res.data.step_text.status) === 8888){
2025-06-06 03:08:19 +08:00
//答题中
2025-06-10 00:51:49 +08:00
this.step = 6;
this.msg = res.data.step_text.msg;
this.ans = res.data.step_text.index-1;
this.detail.q = res.data.questionnaire.body[this.ans].question;
this.detail.a = res.data.questionnaire.body[this.ans].answer;
this.detail.r = res.data.answer[this.ans];
}else if(parseInt(res.data.step_text.status) === 9999){
this.msg = res.data.step_text.msg;
if(res.data.step_text.msg === "bootstrap"){
this.step = 1;
this.stepvalue = 0;
this.b = 0;
const interId = setInterval(() => {
this.stepvalue = this.stepvalue + 5;
this.b = (this.stepvalue * 10 / res.data.step_text.remaining_seconds).toFixed(2);
if(this.b > 100){
this.b = 100;
}
if(parseInt(res.data.step_text.remaining_seconds) * 10 < this.stepvalue){
clearInterval(interId);
}
}, 500);
}else if(res.data.step_text.msg === "http_proxy"){
this.stepvalue = 0;
this.step = 2;
this.b = 0;
const interId2 = setInterval(() => {
this.stepvalue = this.stepvalue + 5;
this.b = (this.stepvalue * 10 / res.data.step_text.remaining_seconds).toFixed(2);
if(this.b > 100){
this.b = 100;
}
if(parseInt(res.data.step_text.remaining_seconds) * 10 < this.stepvalue){
clearInterval(interId2);
}
}, 500);
}else if(res.data.step_text.msg === "browser_env"){
this.stepvalue = 0;
this.step = 3;
this.b = 0;
const interId3 = setInterval(() => {
this.stepvalue = this.stepvalue + 5;
this.b = (this.stepvalue * 10 / res.data.step_text.remaining_seconds).toFixed(2);
if(this.b > 100){
this.b = 100;
}
if(parseInt(res.data.step_text.remaining_seconds) * 10 < this.stepvalue){
clearInterval(interId3);
}
}, 500);
}else if(res.data.step_text.msg === "enter_questionnaire"){
this.stepvalue = 0;
this.step = 4;
this.b = 0;
const interId4 = setInterval(() => {
this.stepvalue = this.stepvalue + 5;
this.b = (this.stepvalue * 10 / res.data.step_text.remaining_seconds).toFixed(2);
if(this.b > 100){
this.b = 100;
}
if(parseInt(res.data.step_text.remaining_seconds) * 10 < this.stepvalue){
clearInterval(interId4);
}
}, 500);
}else if(res.data.step_text.msg === "match_virtual_person"){
this.stepvalue = 0;
this.step = 5;
this.b = 0;
const interId5 = setInterval(() => {
this.stepvalue = this.stepvalue + 5;
this.b = (this.stepvalue * 10 / res.data.step_text.remaining_seconds).toFixed(2);
if(this.b > 100){
this.b = 100;
}
if(parseInt(res.data.step_text.remaining_seconds) * 10 < this.stepvalue){
clearInterval(interId5);
}
}, 500);
2025-06-06 03:08:19 +08:00
}
}else{
2025-06-10 00:51:49 +08:00
if(res.data.step_text.status === 2){
this.step =7;
2025-06-06 03:08:19 +08:00
}
}
2025-06-10 00:51:49 +08:00
if(parseInt(res.data.step_text.status) !== 2){
const seconds = parseInt(res.data.step_text.remaining_seconds)-1;
2025-06-06 03:08:19 +08:00
const timerId = setTimeout(() => {
2025-06-10 00:51:49 +08:00
this.answer = this.detail.r;
const timerId1 = setTimeout(() => {
this.getDetails(id);
clearTimeout(timerId1);
}, 2500);
2025-06-06 03:08:19 +08:00
}, 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() 是必须的,用于执行查询
},
},
//页面隐藏
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;}
2025-06-10 00:51:49 +08:00
::v-deep uni-slider{margin: 16rpx 0rpx !important;}
2025-06-06 03:08:19 +08:00
::v-deep uni-slider .uni-slider-tap-area{padding: 4rpx 0rpx !important;}
2025-06-10 00:51:49 +08:00
::v-deep .uni-slider-handle{background: url('/static/images/setp.png'); background-size: 56rpx 58rpx}
2025-06-06 03:08:19 +08:00
2025-06-10 00:51:49 +08:00
.v2{ padding: 20rpx; width: 94%; margin: 0rpx auto; }
.v2 .title{font-weight: 600; font-size: 32rpx; color: #333;}
.w{background-color: #F8F8F8; border-radius: 20rpx; padding: 40rpx 20rpx;}
.w .t{text-align: center; margin-top: 20rpx; font-size: 28rpx;}
2025-06-06 03:08:19 +08:00
.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;}
2025-06-10 00:51:49 +08:00
.activite {color: #333;border-bottom: 4rpx solid #1D61E7;}
2025-06-06 03:08:19 +08:00
.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;
2025-06-10 00:51:49 +08:00
z-index: 2;
2025-06-06 03:08:19 +08:00
.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;
}
2025-06-10 00:51:49 +08:00
@keyframes bounce {
0%, 40%, 80%, 100% {
transform: translateY(0);
}
20%{
transform: translateY(-30rpx);
}
60% {
transform: translateY(20rpx);
}
90% {
transform: translateY(-10rpx);
}
}
.bounce-image {
animation: bounce 2s infinite;
}
2025-06-06 03:08:19 +08:00
</style>