medicine-xcx/pagesB/homeGridList/answerQuestionsPrize/detale/detale.vue

<template>
	<view>
		<!-- 视频 -->
		<view class="video_box">
			<!-- 富文本解析 -->
			<rich-text :nodes='top_detalt.article'></rich-text>
			<!-- <u-parse :html="items.article" ></u-parse> -->
		</view>
		<!-- 题目 -->
		<view class="topic_box">
			<view class="title_box">
				<text class="title">{{unm_index+1}}、{{list[unm_index].subject}}</text>
				<view class="topic_num">
					<text>({{unm_index+1}}/{{num_sum}})</text>
				</view>
			</view>
			<!-- 奖励多少 暂未修改 -->
			<!-- <text>奖励xx元兑购金</text> -->
			<view class="select_answer">

				<view :class="index == list[unm_index].select? 'item select_item ': 'item'" class="item"
					v-for="(item,index) in list[unm_index].answers" @click="select_option(index)">
					<text>{{item}}</text>
				</view>
			</view>
			<button v-if="unm_index+1 != num_sum" class="next" @click="next_">下一题</button>
			<button v-else class="submit next" @click="submit_">提交</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				unm_index: 0, //当前题目数
				num_sum: null, // 总题目数
				id: null,
				list: [],
				top_detalt: {},
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getAnswerDetale();
			this.getSubjectList();
		},
		methods: {
			getAnswerDetale(){
				this.$api('answerDetale',{anWerReqId: this.id}).then( res => {
					let { code, result, message} = res;
					if(code == 200) {
						console.log(result);
						this.top_detalt = result;
					}else{
						this.$Toast(err.message);
					}
				}).catch(err => {
					this.$Toast(err.message);
				})
			},
			getSubjectList(){
				this.$api('getSubjectList',{anWerReqId: this.id}).then( res => {
					let { code, result, message} = res;
					if(code == 200) {
						console.log(result);
						const list = result;
						list.forEach((item,index) =>{
							list[index].select = null;
							list[index].answers = item.answers.split("，")
						})
						console.log(list)
						this.list = list;
						this.num_sum = result.length;
					}else{
						this.$Toast(err.message);
					}
				}).catch(err => {
					this.$Toast(err.message);
				})
			},
			// 用户选择那个
			select_option(index) {
				// 将选择的项写入数据
				this.list[this.unm_index].select = index;
				console.log(this.list);
			},
			// 下一题
			next_() {
				// 判断当前题目有没有选择
				const isPass = this.isSelect();
				if (isPass == 0) return;
				
				// 已经做出选择
				
				this.unm_index += 1
			},
			// 判断当前题目有没有选择
			isSelect() {
				if (this.list[this.unm_index].select == null) {
					uni.showToast({
						title: "请做出您的选择！",
						icon: "none"
					})
					return 0
				}
				return 1
			},
			// 提交显示
			submit_() {
				// 判断当前题目有没有选择
				const isPass = this.isSelect();
				if (isPass == 0) return;
				//  提交
				const answer = [];
				const answerArray = ['A','B','C','D']
				this.list.forEach((item,index) =>{
					answer.push({
						id: item.id,
						name: answerArray[item.select]
					});
				})
				this.$api('getanswerGo',{json:JSON.stringify(answer),id:this.id}).then(res =>{
					let { code, result, message} = res;
					if(code == 200) {
						// num 对的数目   sum  总题目数  integer  兑购
						if(result.num ==0) {
							// 失败
							this.$tools.navigateTo({
								url: "../fail/fail"
							})
						}else {
							this.$tools.navigateTo({
								url: `../success/success?num=${result.num}&integer=${result.integer}`
							})
						}
						console.log(result)
					}else{
						this.$Toast(message)
					}
				}).catch(err => {
					this.$Toast(err.message)
				})
				// const math = Math.random();
				// console.log(math)
				// if(math>0.5) {
				// 	uni.navigateTo({
				// 		url: "pagesC/success/success"
				// 	})
				// }else {
				// 	uni.navigateTo({
				// 		url: "../fail/fail"
				// 	})
				// }
			},
		}
	}
</script>

<style lang="scss" scoped>
	.video_box {
		margin-top: 20rpx;
		display: flex;
		justify-content: center;

		.video_ {
			width: 690rpx;
		}
	}

	.topic_box {
		width: 710rpx;
		margin: 37rpx auto 0;
		padding-bottom: 16rpx;
		box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);

		.title_box {
			padding-top: 33rpx;
			margin-left: 37rpx;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;

			.title {
				font-weight: bold;
				color: #000;
			}

			.topic_num {
				color: #01AEEA;
				margin-right: 15rpx;
			}
		}

		.select_answer {
			.item {
				width: 536rpx;
				max-width: 600rpx;
				height: 76rpx;
				font-size: 30rpx;
				border: 3rpx solid #ECECEC;
				margin-top: 30rpx;
				margin-left: 43rpx;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				color: #707070;

				text {
					padding-left: 28rpx;
				}
			}

			.select_item {
				border-color: #01AEEA;
				color: #01AEEA;
			}
		}
	}
	.next,
	.submit{
		width: 463rpx;
		height: 94rpx;
		border-radius: 45rpx;
		margin-top: 30rpx;
		background-color: #01AEEA;
		font-size: 28rpx;
		font-weight: bold;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
</style>