NDAid/pages/topic/common.vue

<template>
	<uv-toast ref="toast"></uv-toast>
	<view class="">
		<navbar :title="$t('scale_evaluation')" size="48" :backtext="$t('back')"  color="#fff"></navbar>
	</view>
	<view class="app_content">
		<view class='titlearea'>        
			<text class='title_2'>{{$t('completion_problem_for_valuating_people')}}</text>
			<text class='title_member'>{{$t('valuating_people')}}：{{selectuser.membername}}</text>
		</view>
		<view class="info_div">
			<view class="text_div">
				<view class="title1">{{stemitem.stem}}</view>
			</view>
			<view class="text_div">
				<view class="title2">{{stemitem.disstr}}</view>
			</view>
		</view>
		<view class="info_div">
			<view class="" v-if="1==stemitem.stemtype">
				<!-- 单选 -->
			</view>
			<view class="" v-if="2==stemitem.stemtype"> 
				<!-- 多选 -->
			</view>
			<!-- <uv-radio-group v-model="selectanswer" placement="column" @change="change" >
				<uv-radio 
					shape="square"
					iconSize="30"
					labelSize="30"
					size="30"
					:customStyle="{margin: '10px'}" 
					v-for="(item, index) in stemitem.alist" 
					:key="index" 
					:name="item">
					<slot name="default">
						<text class="select_label"> {{item.option}} 1</text>
					</slot>
				</uv-radio>
			</uv-radio-group> -->
			<radio-group @change="change" style="width: 90%;">
				<Radio :selectvalue="index" :label="item.option" v-for="(item, index) in stemitem.alist" :key="index" />
			</radio-group>
		</view>
		<view class="donext_div">
			<uv-button type="primary" :text="$t('next_step')" @click="donext" :customStyle="selectbutton2" :customTextStyle="selectbutton3"></uv-button>
		</view>
		<view v-if="sindex==11&&scaleid==4" class="completedis">
			<text class='pregresstext'>{{$t('completion_text_1')}}</text>
			<text class='pregresstext'>{{$t('completion_text_2')}}</text>
		</view>
		<view class="progressarea" v-if="surplusstems<9&&surplusstems>1">
			<text class='pregresstext'>{{surplusstems-1}}{{$t('questions_remaining')}}</text>
		</view>
		<view>
			<uv-popup ref="popup" mode="bottom" @maskClick="maskClick">
				<view  class="over_percent_div">
					<view class="content">
						<uv-text :text="stemitem.stem" align="center" size="25"></uv-text>
						<uv-text :text="$t('have')+percent" type="success" bold="true" align="center" size="30"></uv-text>
						<uv-text :text="$t('same_as_you')" align="center" size="25"></uv-text>
					</view>
				</view>
			</uv-popup>
		</view>
	</view>
</template>

<script>
	import nav from "@/components/navbar.vue"
	import {tohome,tostemlistnext} from "/common/js/common.js"
	import {subanswerbyuserid} from "/common/api/scale.js"
	import {querypercentagebystemid} from "/common/api/health.js"
	import {subcomstatus} from "/common/api/scale.js"
	import {addlog} from "@/common/api/system.js"
	import Radio from "@/components/radio.vue"
	
	export default{
		components:{
			Radio
		},
		data(){
			return {
				userinfo:{},
				selectuser:{},
				stemitem:{},
				scaleid:0,
				srid:0,
				sindex:0,
				stemindexlabel:1,
				selectanswer:'',
				answeroptionid:'',
				customStyle:{
					fontSize:'30px',
					width:'100%',
				},
				selectbutton2:{
					fontSize:'30px',
					width:'500rpx',
					background:'#3f73b3',
					border:"0px",
				},
				selectbutton3:{
					fontSize:"20px",
					fontWeight:"bold",
					letterSpacing: "0.5em",
				},
				percent:0,
				timer:false 
			}
		},
		computed:{
			surplusstems(){
				//剩余题目
				let stemlist = uni.getStorageSync('stemlist')
				let value = 1
				stemlist.map((item,index)=>{
					if(item.id == this.stemitem.id){
						value = stemlist.length - index
					}
				})
				return value
			},
			comstatus(){
				let stemlist = uni.getStorageSync('stemlist')
				let sindex = parseInt(this.sindex);
				let count = stemlist.length-2
				if(sindex+1 == count){
					return true
				}else{
					return false
				}
			}
		},
		methods:{
			init(){
				this.userinfo = uni.getStorageSync("userinfo")
				this.selectuser = uni.getStorageSync("selectuser")
				this.stemitem = uni.getStorageSync("stemitem")
			},
			change(e){
				//this.answeroptionid =e //old
				let value = e.detail.value
				let list = this.stemitem.alist
				this.selectanswer = list[value]
			},
			donext(){
				if(''==this.selectanswer){
					this.$refs.toast.show({
						type: 'error',
						message: this.$t('please_completion_problem')
					})
					return false
				}
				var answer = {
					userid: this.userinfo.id,
					fmemberid:this.selectuser.fmemberid,
					stemid: this.stemitem.id,
					answertype:1,
					answeroptionid: this.selectanswer.id,
					answeroption: this.selectanswer.option
				}
				let data={
					userid:this.userinfo.id,
					fmemberid:this.selectuser.fmemberid,
					srid: this.srid,
					scaleid: this.scaleid,
				}
				subanswerbyuserid(answer,data).then(res=>{
					res = res.data
					if(0==res.code){
						this.$refs.toast.show({
							type: 'error',
							message: res.errmsg
						})
						return false
					}
					if(200==res.code){
						uni.setStorage({
							key: 'srid',
							data: res.resultData,
						});
						let data= {
							stemid:this.stemitem.id,
							answeroptionid:this.selectanswer.id,
						}
						console.log(this.comstatus)
						if(this.comstatus){
							let srid = this.srid
							subcomstatus(srid).then()
							uni.removeStorage({
								key: 'stemitem',
							});
							uni.redirectTo({
								url: '/pages/report/report'
							});
						}else{
							querypercentagebystemid(data).then(res=>{
								res = res.data
								if(0==res.code){
									let result = tostemlistnext(this.sindex,1)
									if(!result){
										this.$refs.toast.show({
											type: 'error',
											message: this.$t('system_error')
										})
										return false
									}
								}
								if(200==res.code){
									this.percent = res.resultData+"%"
									this.showinfo()
									let that = this
									this.timer = setTimeout(function(){
										that.closeinfo()
									    tostemlistnext(that.sindex,1)
									}, 3000);
								}
							})
						}
						
					}
				})
			},
			showinfo(){
				this.$refs.popup.open();
			},
			closeinfo(){
				this.$refs.popup.close();
			},
			maskClick(){
				clearTimeout(this.timer)
				this.$refs.popup.close();
				tostemlistnext(this.sindex,1)
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.$t('scale_evaluation')
			});
			this.init()
		},
		onLoad: function (option) {
			this.scaleid=option.scaleid
			this.srid=option.srid
			this.sindex = option.sindex
		},
		onBackPress:function(option){
			tohome()
			return true
		}
	}
</script>

<style scop>
.titlearea{
	display:flex;
	flex-direction:column;
	justify-content: center;  
	align-items:center;
}
.title_2{
	margin-top:15rpx;
	font-size:36rpx;
	font-weight:400;
	color:#666666 
}
.title_member{
	margin-top:30rpx;
	font-size:36rpx;
	font-weight:400;
	color:#648EB8; 
}
.title_desstr{
	width:700rpx;
	margin-left:25rpx;
	margin-top:30rpx;
	font-size:30rpx;
	font-weight:300;
	color:#9C9C9C;
}
.info_div{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 20px;
	gap: 5px;
	margin-top: 20px;
}
.info_div .text_div{
	/* text-align: center; */
	letter-spacing: "0.5em";
	padding-left: 2em;
	padding-right: 2em;
}
.title1{
	color: #363636 ;
	font-size: 25px;
	font-weight: bold;
	text-align: center;
}
.title2{
	color: gray;
	font-size: 18px;
	text-align: left; 
}
.select_label{
	margin-left: 20px;
	font-size: 30px;
}
.over_percent_div{
	width: 100%;
	height: 600rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.over_percent_div .content{
	width: 80%;
	display: flex;
	flex-direction: column;
	align-items: center; 
	gap: 20px;
	justify-content: center;
}
.completedis{
  width:750rpx;
  margin-bottom:15rpx;
  display:flex; 
  flex-direction:column;
  align-items:center;
}
.pregresstext{
    
    width:100%;
    /*color:#fff;*/
    color:#648EB8;
    height:45;
    text-align:center;
    z-index:100;
}
.progressarea{
  width:750rpx;
  margin-bottom:5rpx;
  display:flex;
}
</style>