ZhHealth/pages/evaluation/index.vue

<!--
 * @Description:测评模块引入插件
 * @Author: Aimee·Zhang
 * @Date: 2022-01-13 13:52:19
 * @LastEditors: Aimee·Zhang
 * @LastEditTime: 2022-01-13 17:16:09
-->
<template>
	<view class="evaluation">
		<!-- 进度 -->
		<view class="percent">
			<u-icon
				name="arrow-left"
				:color="colorList[colorIndex]"
				size="14"
				label="上一题"
				:labelColor="colorList[colorIndex]"
				labelSize="14"
				:bold="true"
				space="3"
				v-if="page !== 1"
				@click="preQ"
			/>
			<u-line-progress class="pre-ico" :percentage="percent" height="10" :showText="false" :activeColor="colorList[colorIndex]" />
			<span :style="{ color: colorList[colorIndex] }">{{ percent }}%</span>
		</view>
		<!-- 标题 -->
		<view class="title">{{ page }}.{{ currentInfo.title }}</view>
		<!-- 题目列表 -->
		<view class="lists">
			<view class="list-item">
				<u-radio-group placement="column" @change="groupChange" iconPlacement="right" class="radio-g" :value="currentId">
					<u-radio
						class="radio-item"
						:customStyle="{ marginBottom: '8px' }"
						v-for="(item, index) in currentInfo.options"
						:key="index"
						:label="item.title"
						:name="item.option_id"
						:activeColor="colorList[colorIndex]"
					></u-radio>
				</u-radio-group>
			</view>
			<!-- 底部确认按钮 -->
			<view class="bottom-btn" :style="{ background: colorList[colorIndex] }" @click="next">下一步</view>
		</view>
	</view>
</template>
<script>
import { evaluationsQuestion, evaluationsAnswers } from '@/apis/interfaces/evaluation.js';
export default {
	components: {},
	data() {
		return {
			percent: 70,
			colorList: ['#34ce98', '#b6c29a', '#f4d000', '#8a977b', '#e58308', '#dc5712'],
			colorIndex: Math.floor(Math.random() * 6), // 基本案列数据
			currentInfo: {}, //当前题目的内容
			option_ids: [], // 答案id的数组
			has_more: false, // 是否有下一页
			page: 1,
			currentId: '' // 默认值
		};
	},
	onShow() {
		this.getList();
		uni.setNavigationBarColor({
			frontColor: '#ffffff', //文字颜色
			backgroundColor: `${this.colorList[this.colorIndex]}` //底部背景色
		});
	},
	methods: {
		getList() {
			evaluationsQuestion(this.$Route.query.id, this.page).then(res => {
				this.currentInfo = res.data[0];
				this.percent = Number(((res.page.current - 1) / res.page.total).toFixed(2)) * 100;
				this.has_more = res.page.has_more;
			});
		},
		groupChange(n) {
			this.currentId = n;
		},
		// 上一题
		preQ() {
			this.option_ids.pop();
			this.currentId = '';
			this.page = this.page - 1;
			this.getList();
		},
		//下一题
		next() {
			if (this.has_more) {
				if (this.currentId === '') {
					uni.showToast({ title: '请选择答案', icon: 'none' });
					return;
				}
				this.option_ids.push(this.currentId);
				this.currentId = '';
				this.page = this.page + 1;
				this.getList();
			} else {
				if(this.option_ids.length !== this.page){
					this.option_ids.push(this.currentId);
					this.currentId = '';
				}
				let data = {
					option_ids: this.option_ids.toString(),
					id: this.$Route.query.id
				};
				evaluationsAnswers(data)
					.then(res => {
						console.log(res);
						this.parent = 100;
						uni.showToast({
							title: '答题完成,立即查看结果',
							icon: 'none',
							mask: true
						});
						setTimeout(() => {
							uni.navigateTo({
								url: `/pages/evaluation/result?id=${this.$Route.query.id}`
							});
						}, 1000);
					})
					.catch(err => {
						uni.showToast({
							title:err.message
						})
					});
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.evaluation {
	padding: $padding $padding $padding * 4 $padding;
	.percent {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		font-size: $title-size - 2;
		.pre-ico {
			margin: $padding;
		}
	}
	.title {
		font-size: $title-size + 10;
		font-weight: bold;
		padding-top: $padding;
	}
	.lists {
		.radio-g {
			padding-top: $padding * 2;
			.radio-item {
				background: #f9f9f9;
				padding: $padding;
				border-radius: $radius;
				flex: 1;
			}
		}
		.bottom-btn {
			text-align: center;
			padding: 24rpx $padding;
			border-radius: $radius + 40;
			color: #fff;
			font-size: $title-size;
			position: fixed;
			bottom: $padding;
			width: calc(100% - 60rpx);
			box-sizing: border-box;
		}
	}
}
</style>