psy_web_share/newScale/Charm/testPage.vue

<template>
	<view class="bg">
		<view class="question_box">
			<view style="overflow: hidden;"></view>
			<image class="paperclip" src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/paperclip.png"
				mode="widthFix"></image>
			<view class="question_num">
				<text class="num_front">出题{{currentIndex + 1}}</text><text class="num_behond">/{{maxLength}}</text>
			</view>
			<view class="process">
				<view class="process_bar" :style="{'width': percentage}"></view>
			</view>
			<view class="question_box_wrap">
				<view class="question_title">
					<text>{{currentQuestion.answer}}</text>
				</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="tips">请选择你的答案进入下一题</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/Charm/prev_btn.png" mode="widthFix">
				</image>
			</view>
			<view class="prev_btn" v-if="userAnswerList.length >= 20" @click="submitResult">
				<image src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/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: {},
				questionImgList: [{
						'qImg': 'https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/question1.png',
						'answerImglist': [
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/answer1-A.png',
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/answer1-B.png',
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/answer1-C.png'
						]
					},
					{
						'qImg': 'https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/question2.png',
						'answerImglist': [
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/answer2-A.png',
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/answer2-B.png',
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/answer2-C.png'
						]
					},
					{
						'qImg': 'https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/question3.png',
						'answerImglist': [
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/answer3-A.png',
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/answer3-B.png',
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/answer3-C.png'
						]
					},
					{
						'qImg': 'https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/question4.png',
						'answerImglist': [
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/answer4-A.png',
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/answer4-B.png',
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/answer4-C.png'
						]
					},
					{
						'qImg': 'https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/question5.png',
						'answerImglist': [
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/answer5-A.png',
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/answer5-B.png',
							'https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/answer5-C.png'
						]
					},
				],
				userSelectArr: [],
				canPrev: false
			}
		},
		computed: {
			percentage() {
				return (this.userAnswerList.length / this.questionList.length) * 613 + 'rpx'
			}
		},
		created() {
			this.loadData();
			this.userInfo = uni.getStorageSync('user');
		},
		methods: {
			loadData() {
				this.$request
					.get({
						url: `scaleInfo/20210804164957`,
						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}/20210804164957`,
						loadingTip: "加载中...",
						data: params,
					})
					.then((res) => {
						_this.isLoading = false;
						_this.resultId = res.data;
						// _this.$request.post({
						// 	url: `scaleExternalSource/save`,
						// 	loadingTip: "加载中...",
						// 	data: {
						// 		currentUserId: _this.userInfo.id,
						// 		resultId: _this.resultId,
						// 		uid: _this.uid,
						// 		source: _this.source,
						// 		flag: _this.flag,
						// 	},
						// }).then(() => {})
						uni.hideLoading();
						// 答题结束获取支付
						_this.getQueryPromotionBySubjectId();
					})
					.catch(() => {
						_this.isLoading = false;
						uni.showToast({
							icon: "none",
							title: "提交失败",
						});
						uni.hideLoading();
					});
			},

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

			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/Charm/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: 702rpx;
		height: 1021rpx;
		background: linear-gradient(0deg, #EA1750 0%, #FF8189 100%);
		border-radius: 26rpx;
		padding: 0 15rpx;
		margin: 43rpx auto;
		position: relative;
	}

	.question_box_wrap {
		width: 668rpx;
		height: 830rpx;
		background: linear-gradient(0deg, #FFFFFF 76%, #FFEAEF 100%);
		box-shadow: 0rpx 0rpx 3rpx 0rpx rgba(133, 14, 45, 0.5);
		border-radius: 20rpx;
		border: 2px solid #FFFFFF;
	}

	.question_title {
		box-sizing: border-box;
		width: 100%;
		height: 160rpx;
		font-family: 'YanShiXieHeiTi';
		font-size: 40rpx;
		text-align: justify;
		color: #EA1750;
		padding: 16px 30rpx 0 30rpx;
	}

	.question_box text.qs_txt {
		padding-bottom: 4rpx;
		border-bottom: 4rpx solid #2E9AFF;
		line-height: 1.6;
	}

	.item00 {
		width: 262rpx;
		position: absolute;
		top: 115rpx;
		left: 16rpx;
	}

	.item01 {
		width: 341rpx;
		position: absolute;
		top: -16rpx;
		right: 6rpx;
	}

	.item02 {
		width: 362rpx;
		position: absolute;
		bottom: 36rpx;
		left: 203rpx;
	}


	.item10 {
		width: 294rpx;
		position: absolute;
		top: 44rpx;
		left: 26rpx;
	}

	.item11 {
		width: 266rpx;
		position: absolute;
		top: 83rpx;
		right: 49rpx;
	}

	.item12 {
		width: 303rpx;
		position: absolute;
		bottom: 50rpx;
		left: 177rpx;
	}

	.item20 {
		width: 275rpx;
		position: absolute;
		top: 32rpx;
		left: 210rpx;
	}

	.item21 {
		width: 272rpx;
		position: absolute;
		left: 59rpx;
		bottom: 132rpx;
	}

	.item22 {
		width: 248rpx;
		position: absolute;
		bottom: 71rpx;
		right: 32rpx;
	}

	.item30 {
		width: 362rpx;
		position: absolute;
		top: 21rpx;
		left: 0rpx;
	}

	.item31 {
		width: 358rpx;
		position: absolute;
		right: 7rpx;
		top: 116rpx;
	}

	.item32 {
		width: 386rpx;
		position: absolute;
		bottom: 0;
		left: 64rpx;
	}

	.item40 {
		width: 269rpx;
		position: absolute;
		top: 149rpx;
		left: 36rpx;
	}

	.item41 {
		width: 263rpx;
		position: absolute;
		right: 9rpx;
		top: 129rpx;
	}

	.item42 {
		width: 269rpx;
		position: absolute;
		right: 122rpx;
		bottom: 42rpx;
	}

	.answer_list {
		box-sizing: border-box;
		width: 100%;
		height: 725rpx;
		padding-top: 56rpx;
		position: relative;
	}

	.answer {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		width: 602rpx;
		height: 137rpx;
		padding: 0 6% 4rpx 14%;
		margin: 33rpx 0;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 32rpx;
		color: #333333;
		cursor: pointer;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/answer_bg.png);
		background-size: 100% 100%;
		transition: background 200ms linear;
		margin: 0 auto 45rpx;
	}

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


	.prev_btn {
		text-align: center;
	}

	.process {
		box-sizing: border-box;
		width: 613rpx;
		height: 16rpx;
		padding: 0;
		background: linear-gradient(0deg, #FFFFFF 0%, #FFEAEF 100%);
		box-shadow: 0rpx 0rpx 3rpx 0rpx rgba(133, 14, 45, 0.5);
		border-radius: 8rpx;
		border: 1px solid #FFFFFF;
		overflow: hidden;
		margin: 6rpx auto 14rpx;
	}

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

	.question_num {
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/question_num_bg.png) no-repeat;
		background-size: cover;
		text-align: right;
		margin: 14rpx 53rpx 0 0;
	}

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

	.prev_btn {
		margin: 0 20rpx;
	}

	.prev_btn image {
		width: 304rpx;
	}

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