psy_web_share/newScale/Mental/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 class="question_num">
				<text class="num_front">出题{{currentIndex + 1}}</text><text class="num_behond">/ {{maxLength}}</text>
				<text class="tips">请选择你的答案进入下一题</text>
			</view>
			<view class="question_title">
				<text>{{currentQuestion.answer}}</text>
			</view>
			<view class="answer_list">
				<view v-if="currentQuestion.questionType == 5">
					<picker-view v-if="true" :value="pickValue" @change="bindChange" indicator-class="indicatorClass"
						class="picker-view">
						<picker-view-column>
							<view class="picker_item"
								v-for="(item, index) in getQuestionParam(currentQuestion.questionParam)" :key="index">
								{{item.name}}
							</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view v-else :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">
				<image src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Mental/prev_btn.png"
					mode="widthFix"></image>
			</view>
			<view class="prev_btn"
				v-if="(userAnswerList.length < this.questionList.length - 1) && currentQuestion.questionType == 5"
				@click="nextHandle()">
				下一题
			</view>
			<view class="prev_btn" v-if="userAnswerList.length >= questionList.length" @click="submitResult">
				<image src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Mental/submit_btn.png"
					mode="widthFix"></image>
			</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: {},
				userSelectArr: [],
				pickValue: [3],
				canPrev: false
			}
		},
		computed: {
			percentage() {
				return (this.userAnswerList.length / this.questionList.length) * 515 + 'rpx'
			}
		},
		created() {
			this.loadData();
			this.userInfo = uni.getStorageSync('user');
		},
		methods: {
			loadData() {
				this.$request
					.get({
						url: `scaleInfo/20210616235331`,
						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);
					})
			},

			bindChange(item) {
				console.log(item);
			},

			nextHandle(str) {
				if (this.isDisbale) {
					return;
				}
				this.isDisbale = true;
				this.userAnswerList[this.currentIndex] = JSON.parse(JSON.stringify(this.currentQuestion));
				if (this.currentQuestion.questionType == 5) {
					let pickItems = this.getQuestionParam(this.currentQuestion.questionParam);
					this.userAnswerList[this.currentIndex].checkItems = pickItems[this.pickValue[0]].label;
					this.pickValue = [3];
				} else {
					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}/20210616235331`,
						loadingTip: "加载中...",
						data: params,
					})
					.then((res) => {
						_this.isLoading = false;
						_this.resultId = res.data;
						uni.hideLoading();
						// 跳转支付页面
						uni.navigateTo({
							url: `/newScale/paymentPage/index?tName=Mental&resultId=${_this.resultId}`
						});
					})
					.catch((err) => {
						_this.isLoading = false;
						uni.showToast({
							icon: "none",
							title: "提交失败",
						});
						uni.hideLoading();
					});
			},

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

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

			getAnswerItem(arr) {
				return arr.split('；')
			},
			getQuestionParam(str) {
				return JSON.parse(str)
			}
		}
	}
</script>

<style scoped>
	.bg {
		width: 750rpx;
		min-height: 100vh;
		background: #000000;
		overflow: hidden;
	}

	.tips {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 24rpx;
		color: #666666;
		line-height: 60rpx;
		text-align: center;
		position: absolute;
		right: 49rpx;
		top: 4rpx;
	}

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

	.question_title {
		width: 80%;
		margin: 40rpx auto 40rpx;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 36rpx;
		color: #333333;
		line-height: 46rpx;
	}

	.answer_list {
		width: 602rpx;
		height: 600rpx;
		margin-left: 41rpx;
	}

	.answer {
		display: flex;
		align-items: center;
		width: 498rpx;
		line-height: 88rpx;
		padding-left: 94rpx;
		margin-bottom: 36rpx;
		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/Mental/answer_bg.png);
		background-size: 100% 100%;
		transition: background 200ms linear;
	}

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

	.prev_btn image {
		width: 288rpx;
	}

	.process {
		box-sizing: border-box;
		width: 521rpx;
		height: 20rpx;
		padding: 2rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 3rpx 0rpx rgba(133, 14, 45, 0.5);
		border-radius: 12rpx;
		overflow: hidden;
		margin: 20rpx 0 0 57rpx;
	}

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

	.question_num {
		margin: 30rpx 0 0 28rpx;
		position: relative;
	}

	.num_front {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: bold;
		font-size: 48rpx;
		color: #471705;
		line-height: 55rpx;
	}

	.num_behond {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 32rpx;
		color: #471705;
		line-height: 55rpx;
	}

	.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;
	}


	.picker-view {
		width: 100%;
		height: 400rpx;
	}

	/deep/ .indicatorClass {
		height: 104rpx;
		border-top: 1px solid #5269FF;
		border-bottom: 1px solid #5269FF;
	}

	.picker_item {
		height: 104rpx;
		line-height: 104rpx;
		text-align: center;
	}
</style>