psy_web_share/newScale/Mbti/testPage.vue

<template>
	<view class="bg">
		<view class="question_box">
			<view style="overflow: hidden;"></view>
			<view class="question_title">
				<text>{{currentQuestion.answer}}</text>
			</view>
			<view style="display: flex;height: 100rpx;justify-content:center;align-items: center;">
				<view class="process">
					<view class="process_bar" :style="{'width': percentage}"></view>
				</view>
				<view class="question_num">
					<text class="num_front">{{currentIndex + 1}}</text><text class="num_behond">/ {{maxLength}}</text>
				</view>
			</view>
			<view class="answer_list">
				<view :class="['answer', checkActive(item)]" v-for="(item, index) in currentAnswerList"
					@click="nextHandle(item)">
					<text>
						{{item}}
					</text>
				</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 >= questionList.length" @click="submitResult">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getResult,
		queryPromotionBySubjectId,
	} from "@/api/index.js";
	export default {
		data() {
			return {
				isChecked: true,
				isShake: false,
				scaleDetail: {},
				questionList: [],
				currentQuestion: {},
				currentAnswerList: [],
				currentIndex: 0,
				userAnswerList: [],
				resultId: '',
				isLoading: false,
				isDisbale: false,
				maxLength: 0,
				userInfo: {},
				questionImgList: [{
						'qImg': 'https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/question1.png',
						'answerImglist': [
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/answer1-A.png',
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/answer1-B.png',
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/answer1-C.png'
						]
					},
					{
						'qImg': 'https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/question2.png',
						'answerImglist': [
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/answer2-A.png',
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/answer2-B.png',
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/answer2-C.png'
						]
					},
					{
						'qImg': 'https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/question3.png',
						'answerImglist': [
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/answer3-A.png',
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/answer3-B.png',
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/answer3-C.png'
						]
					},
					{
						'qImg': 'https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/question4.png',
						'answerImglist': [
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/answer4-A.png',
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/answer4-B.png',
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/answer4-C.png'
						]
					},
					{
						'qImg': 'https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/question5.png',
						'answerImglist': [
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/answer5-A.png',
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/answer5-B.png',
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/answer5-C.png'
						]
					},
				],
				userSelectArr: [],
				canPrev: false
			}
		},
		computed: {
			percentage() {
				return (this.userAnswerList.length / this.questionList.length) * 496 + 'rpx'
			}
		},
		created() {
			this.loadData();
			this.userInfo = uni.getStorageSync('user');
		},
		methods: {
			loadData() {
				this.$request
					.get({
						url: `scaleInfo/20211020113914`,
						loadingTip: "加载中...",
						data: {},
					}).then((res) => {
						this.questionList = JSON.parse(JSON.stringify(res.data));
						this.maxLength = this.questionList.length;
						this.currentQuestion = this.questionList[this.currentIndex];
						this.currentAnswerList = this.getAnswerItem(this.currentQuestion.checkItems);
					})
			},

			nextHandle(str) {
				if (this.isDisbale) {
					return;
				}
				this.isDisbale = true;
				this.userAnswerList[this.currentIndex] = JSON.parse(JSON.stringify(this.currentQuestion));
				this.userAnswerList[this.currentIndex].checkItems = str;
				if (this.currentIndex >= this.questionList.length - 1) {
					this.isDisbale = false;
					// this.submitResult();
				} else {
					setTimeout(() => {
						this.currentIndex++;
						this.currentQuestion = this.questionList[this.currentIndex];
						this.currentAnswerList = this.getAnswerItem(this.currentQuestion.checkItems);
						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: "",
					scale_result: _this.userAnswerList,
					userId: this.userInfo.id,
				};

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

			// 获取支付金额
			async getQueryPromotionBySubjectId() {
				let _this = this;
				let urls = queryPromotionBySubjectId + "/20211020113914";
				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/Mbti/testResult?resultId=${_this.resultId}&messageShare=1`
							});
						} else {
							let params = {
								productId: '20211020113914',
								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=Mbti"
							});
						}
					});
			},

			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/Mbti/testPage_bg.png) no-repeat top;
		background-size: 100% auto;
		overflow: hidden;
	}

	.tips {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
	}

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

	.question_title {
		padding-top: 55rpx;
		width: 75%;
		height: 131rpx;
		margin: 60rpx auto 0;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 36rpx;
		color: #333333;
		line-height: 46rpx;
	}

	.answer_list {
		width: 602rpx;
		height: 525rpx;
		margin: 100rpx auto 0;
	}

	.answer {
		display: flex;
		align-items: center;
		width: 74%;
		height: 132rpx;
		padding: 0 10% 4rpx 16%;
		margin: 33rpx 0;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 36rpx;
		color: #333333;
		cursor: pointer;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/answer_bg.png);
		background-size: cover;
		transition: background 200ms linear;
	}

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


	.prev_btn {
		width: 288rpx;
		line-height: 71rpx;
		background: #FFFFFF;
		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: 496rpx;
		height: 20rpx;
		padding: 2rpx;
		background: #0D216F;
		box-shadow: 0rpx 0rpx 3rpx 0rpx rgba(133, 14, 45, 0.5);
		border-radius: 12rpx;
		overflow: hidden;
		margin-right: 10rpx;
	}

	.process_bar {
		height: 14rpx;
		background: linear-gradient(91deg, #44FBA3 0%, #DAFA45 100%);
		border-radius: 10rpx;
		transition: width 200ms linear;
	}

	.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: 17rpx 0 100rpx 0;
	}

	.prev_btn {
		margin: 0 20rpx;
	}

	.prev_btn image {
		width: 304rpx;
	}

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