psy_web_share/newScale/RuiWen/testPage.vue

<template>
	<view class="bg">
		<view class="question_box">
			<view style="overflow: hidden;"></view>
			<view class="process">
				<view class="process_bar" :style="{'width': percentage}"></view>
			</view>
			<view style="display: flex; justify-content: space-between;align-items: center; margin: 38rpx 0 0 80rpx;">
				<view class="question_num">
					<text class="num_front">出题{{currentIndex + 1}}</text><text class="num_behond">/{{maxLength}}</text>
				</view>
				<view class="tips">请选择你的答案进入下一题</view>
			</view>
			<view class="question_title">
				<image :src="questionImgList[currentIndex].imageUrl" mode="heightFix"></image>
			</view>
			<view class="answer_list">
				<view :class="['answer', checkActive(item)]" :style="{marginLeft: index % 4 == 0 ? 0 : '79rpx'}"
					v-for="(item, index) in questionImgList[currentIndex].answerList" @click="nextHandle(index+1)">
					<image :src="item" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="contral_box">
			<view class="prev_btn" v-if="currentIndex > 0" @click="prevHandle">
				上一题
			</view>
			<view class="prev_btn" v-if="userAnswerList.length >= questionImgList.length" @click="submitResult">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getResult,
		queryPromotionBySubjectId,
	} from "@/api/index.js";
	import ruiWenTaskList from "./ruiWenTaskData"
	export default {
		data() {
			return {
				isChecked: true,
				isShake: false,
				scaleDetail: {},
				questionList: [],
				currentQuestion: {},
				currentAnswerList: [],
				currentIndex: 0,
				userAnswerList: [],
				resultId: '',
				isLoading: false,
				isDisbale: false,
				maxLength: 0,
				userInfo: {},
				questionImgList: ruiWenTaskList,
				userSelectArr: [],
				canPrev: false,
				userScore: 0
			}
		},
		computed: {
			percentage() {
				return (this.userAnswerList.length / this.questionImgList.length) * 661 + 'rpx'
			}
		},
		created() {
			this.loadData();
			this.userInfo = uni.getStorageSync('user');
		},
		methods: {
			loadData() {
				this.$request
					.get({
						url: `scaleInfo/20210804162506`,
						loadingTip: "加载中...",
						data: {},
					}).then((res) => {
						this.questionList = JSON.parse(JSON.stringify(res.data));
						this.maxLength = this.questionImgList.length;
						this.currentQuestion = this.questionList[this.currentIndex];
						this.currentAnswerList = this.getAnswerItem(this.currentQuestion.checkItems);
					})
			},

			nextHandle(i) {
				if (this.isDisbale) {
					return;
				}
				this.isDisbale = true;
				let key = this.currentIndex + 1;
				let score = i == ruiWenTaskList[this.currentIndex].rightAnswer ? 1 : 0;
				this.userScore += score;
				this.userAnswerList.push({
					key: key,
					value: i,
					score: score,
					rightAnswer: ruiWenTaskList[this.currentIndex].rightAnswer
				})
				if (this.currentIndex >= ruiWenTaskList.length - 1) {
					this.isDisbale = false;
					this.submitResult();
				} else {
					setTimeout(() => {
						this.currentIndex++;
						this.isDisbale = false;
					}, 150)
				}
			},

			prevHandle() {
				if (this.canPrev || this.currentIndex == 0) {
					return;
				}
				this.canPrev = true;
				setTimeout(() => {
					this.canPrev = false;
					this.currentIndex--;
					this.currentQuestion = this.questionList[this.currentIndex];
					this.currentAnswerList = this.getAnswerItem(this.currentQuestion.checkItems);
				}, 300)
			},

			submitResult() {
				let _this = this;
				if (_this.isLoading) {
					return
				}
				_this.isLoading = true;
				let params = {
					testPlanId: "",
					data: _this.userAnswerList,
					userId: this.userInfo.id,
					userScore: this.userScore
				};

				uni.showLoading({
					title: "测试结果生成中",
				});

				_this.$request
					.post({
						url: `cognize/RIVEN`,
						loadingTip: "加载中...",
						data: params
					})
					.then((res) => {
						_this.isLoading = false;
						_this.resultId = res.data;
						uni.hideLoading();
						// 跳转支付页面
						uni.navigateTo({
							url: `/newScale/paymentPage/index?tName=RuiWen&resultId=${_this.resultId}`
						});
					})
					.catch((err) => {
						_this.isLoading = false;
						uni.showToast({
							icon: "none",
							title: "提交失败",
						});
						uni.hideLoading();
					});
			},

			// 获取支付金额
			async getQueryPromotionBySubjectId() {
				let _this = this;
				let urls = queryPromotionBySubjectId + "/20210804162506";
				await _this.$request
					.get({
						url: urls,
						loadingTip: "加载中...",
						data: {},
					})
					.then((res) => {
						console.log('量表支付信息', res.data);
						let data = res.data;
						if (data.price == 0) {
							uni.navigateTo({
								url: `/newScale/RuiWen/testResult?resultId=${_this.resultId}&messageShare=1`
							});
						} else {
							let params = {
								productId: 'RIVEN',
								userId: _this.userInfo?.id,
								resultId: _this.resultId,
								description: data.name,
								total: data.price,
								sceneType: uni.getSystemInfoSync().platform == "android" ?
									"Android" : "iOS",
							};
							uni.setStorageSync('orderInfo', params);
							uni.navigateTo({
								url: "/newScale/paymentPage/index?tName=RuiWen",
							});
						}
					});
			},

			checkActive(item) {
				return this.userAnswerList[this.currentIndex] && this.userAnswerList[this.currentIndex]
					.checkItems ==
					item ? 'active' : ''
			},

			getAnswerItem(arr) {
				return arr.split('；')
			}
		}
	}
</script>

<style scoped>
	.bg {
		width: 100%;
		min-height: 100vh;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/RuiWen/testPage_bg.png) no-repeat top;
		background-size: 100% auto;
		overflow: hidden;
	}

	.tips {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 24rpx;
		color: #999999;
		line-height: 60rpx;
		text-align: center;
		margin-right: 80rpx;
	}

	.question_box {
		box-sizing: border-box;
		width: 742rpx;
		height: 1053rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/RuiWen/question_box_bg.png) no-repeat top;
		background-size: cover;
		margin: 293rpx auto 0;
		position: relative;
	}

	.question_title {
		text-align: center;

		image {
			width: auto;
			height: 352rpx;
			margin: 0 auto;
		}
	}

	.answer_list {
		width: 633rpx;
		display: flex;
		margin: 52rpx auto 0;
		flex-wrap: wrap;
	}

	.answer {
		margin-top: 53rpx;

		image {
			width: 99rpx;
			height: 63rpx;
		}
	}

	.answer.active {
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/RuiWen/answer_bg_active.png) no-repeat center;
		background-size: cover;
		color: #FFFFFF;
	}


	.prev_btn {
		width: 288rpx;
		line-height: 71rpx;
		background: #fed23e;
		border: 2rpx solid #161616;
		border-radius: 36rpx;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 36rpx;
		color: #333333;
		text-align: center;
	}

	.process {
		box-sizing: border-box;
		width: 663rpx;
		height: 20rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		overflow: hidden;
		margin-left: 35rpx;
	}

	.process_bar {
		width: 124rpx;
		height: 16rpx;
		background: #FF1E00;
		border-radius: 8rpx;
		transition: width 200ms linear;
		margin-top: 1rpx;
	}

	.question_num {
		text-align: right;
	}

	.num_front {
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: bold;
		font-size: 48rpx;
		color: #FEFEFE;
		line-height: 55rpx;
		text-shadow: 2rpx 2rpx 5rpx rgba(146, 9, 0, 0.45);
	}

	.num_behond {
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: bold;
		font-size: 32rpx;
		color: #FEFEFE;
		line-height: 55rpx;
		text-shadow: 2rpx 2rpx 5rpx rgba(146, 9, 0, 0.45);
	}

	.contral_box {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 57rpx 0 100rpx 0;
	}

	.prev_btn {
		margin: 0 20rpx;
	}

	.prev_btn image {
		width: 304rpx;
	}

	.paperclip {
		width: 55rpx;
		position: absolute;
		top: -40rpx;
		left: 38rpx;
	}
</style>