记录模块接口对接

2022-01-14 10:54:55 +08:00
parent f7b4468119 64ff207491
commit 356e8212d3
574 changed files with 7246 additions and 73458 deletions
--- a/pages/evaluation/index.vue
+++ b/pages/evaluation/index.vue
@@ -0,0 +1,177 @@
+<!--
+ * @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>