psy_web_share/newScale/MarriageQuality/testPage.vue

<template>
	<view class="bg">
		<view class="question_box">
			<view class="process">
				<view class="process_bar" :style="{'width': percentage}"></view>
			</view>
			<view style="display: flex; justify-content: space-between;align-items: center;">
				<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="qs_txt">{{currentQuestion.answer}}</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 >= maxLength" @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: {},
				canPrev: false
			}
		},
		computed: {
			percentage() {
				return ((this.userAnswerList.length / this.maxLength) * 645) + 'rpx'
			}
		},
		created() {
			this.loadData();
			this.userInfo = uni.getStorageSync('user');
		},
		methods: {
			loadData() {
				this.$request
					.get({
						url: `scaleInfo/20220124203027`,
						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: uni.getStorageSync('user').id
				};

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

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

			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: #E53700 url(https://test.jue-ming.com:8849/api/show?filePath=./webo/MarriageQuality/testPage_bg.png) no-repeat top;
		background-size: 100% auto;
		overflow: hidden;
	}

	.tips {
		width: 50%;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 24rpx;
		color: #666666;
		line-height: 55rpx;
	}

	.question_box {
		box-sizing: border-box;
		width: 712rpx;
		height: 967rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/MarriageQuality/question_bg.png);
		background-size: 100% 100%;
		margin: 290rpx auto 20rpx;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 40rpx;
		color: #333333;
		padding: 107rpx 40rpx 0 40rpx;
		position: relative;
	}

	.question_box .qs_txt {
		width: 632rpx;
		min-height: 120rpx;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: bold;
		font-size: 40rpx;
		color: #333333;
		margin: 0 auto 10rpx;
		text-align: justify;
	}

	.question_box image {
		width: 43rpx;
		margin: 0 10rpx;
	}

	.answer {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 632rpx;
		padding-left: 100rpx;
		margin: 0 auto;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/MarriageQuality/answer_bg.png) no-repeat;
		background-size: 100% 100%;
		transition: background 200ms linear;
		margin: 0 auto 9rpx;
	}

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

	.answer text {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 36rpx;
		color: #333333;
		line-height: 110rpx;
		letter-spacing: 2rpx;
	}

	.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: 627rpx;
		height: 20rpx;
		padding: 1rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 10rpx;
	}

	.process_bar {
		height: 18rpx;
		background: #FF1E00;
		border-radius: 10rpx;
		transition: width 200ms linear;
	}

	.question_num {
		width: 238rpx;
		line-height: 70rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/MarriageQuality/question_num_bg.png) no-repeat;
		background-size: cover;
	}

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

	.num_behond {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		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: 54rpx 0 100rpx 0;
	}

	.prev_btn {
		margin: 0 20rpx;
	}

	.prev_btn image {
		width: 304rpx;
	}
</style>