dati/pages/my/wrongQuestion/detail.vue

<template>
	<view :class="{'yejian': if_theme_dark}">
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left" @tap="$navigateBack">
					<view class="iconfont icon-zuojiantou"></view>
				</view>
				<view class="kaoshi-head-m">
					错题详情
				</view>
				<view class="kaoshi-head-right">
					<view class="iconfont iconfont icon-shezhi1" @tap="show_change_moshi=true"></view>
				</view>
			</view>
		</view>
		<view scroll-y style="height: 100%;">
			<view style="height: 10px;"></view>
			<view class="questionBankAnswer" v-if="current_timu && current_timu.id">
				<question-type :current_timu="current_timu" :timu_order="timu_order" :total_num="total_num">
				</question-type>
			</view>
			<view class="questionBankAnswer-content" v-if="current_timu && current_timu.answers">
				<question-title :node="current_timu.question_name"></question-title>
				<block v-for="(item, index) in current_timu.answers" :key="index">
					<question-option :ref="'questionOption_' + index" :type="type" :item="item" :index="index"
						:current_timu="current_timu" :timu_index="timu_order - 1" @post_answer_req="post_answer_req"
						@set_sub_button_style="set_sub_button_style"></question-option>
				</block>
				<template v-if="current_timu.type == 4">
					<view style="height: 12px;"></view>
				</template>
				<template v-else-if="current_timu.type == 5">
					<view style="height: 12px;"></view>
				</template>
				<question-pre-next v-if="timu_list.length > 0" :total_num="total_num" :timu_order="timu_order"
					:timu_list="timu_list" @choice_timu_by_id="choice_timu_by_id" @tap_handler="tap_handler"
					class="questionBankAnswer-contentbtnbox"></question-pre-next>
			</view>
			<question-answer ref="questionAnswer" v-if="current_timu" :timu_order="timu_order"
				:current_timu="current_timu" :timu_list="timu_list"></question-answer>
			<view style="height: 50px;"></view>
		</view>
		<view class="order-pay">
			<question-remove class="questionBankAnswer-bottom-flex" @removeError="removeError"></question-remove>
			<question-fav class="questionBankAnswer-bottom-flex" :current_timu="current_timu" @collect_opt="collect_opt"
				:type="type"></question-fav>
			<question-note class="questionBankAnswer-bottom-flex" :current_timu="current_timu"></question-note>
			<question-jiucuo class="questionBankAnswer-bottom-flex" :current_timu="current_timu"></question-jiucuo>
			<question-answer-sheet class="questionBankAnswer-bottom-flex"
				@show_choice_timu_list="show_choice_timu_list = true"></question-answer-sheet>
		</view>
		<question-answer-sheet-1 :show_remove="false" @removeError="removeError" :current_timu="current_timu"
			:type="type" @collect_opt="collect_opt" v-if="show_choice_timu_list"
			@show_choice_timu_list="show_choice_timu_list = false" :timu_order="timu_order" :timu_list="timu_list"
			:total_num="total_num" @choice_timu_by_id="choice_timu_by_id"></question-answer-sheet-1>
		<question-set :show_change_moshi="show_change_moshi" :if_theme_dark="if_theme_dark"
			@set_if_theme_dark="set_if_theme_dark" @hide_change_moshi="show_change_moshi = false"></question-set>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				type: 0, //1 章节练习错题  2 历年真题错题
				total_num: 0,
				// 当前题目
				current_timu: {},
				// 页面参数
				pages_params: {},
				// 显示答题卡
				show_choice_timu_list: false,
				// 答题卡
				timu_list: [],
				// 字号大小
				show_change_moshi: false,
				if_theme_dark: false, // 黑夜模式
				// 错题每次都从第一题开始
				timu_order: 1,
			};
		},
		computed: {
			...mapState(['subject', 'userinfo']),
			static_media() {
				return {
					img01: this.$myConfig.localMedia + '/static/img/dui.png',
				}
			},
		},
		onLoad(opts) {
			this.pages_params = opts;
			this.type = this.pages_params.from_type
			this.get_timu_list();
		},
		onReady() {},
		methods: {
			// 移除错题
			async removeError() {
				let url = ''
				// 1：章节练习  2：历年真题
				if (this.type == 1) {
					// 1：章节练习
					url = this.$myHttp.urlMap.unit_remove_error
				} else if (this.type == 2) {
					// 2：历年真题
					url = this.$myHttp.urlMap.library_remove_error
				}
				let res = await this.$myHttp.post({
					url: url,
					data: {
						id: this.current_timu.id
					},
					needLogin: true
				});
				if (res.code == 1) {
					uni.showToast({
						icon: 'none',
						title: '操作成功'
					});
				}
			},
			// 获取答题卡
			async get_timu_list() {
				let url = '';
				let data = {};
				if (this.type == '1') {
					data['unit_id'] = this.pages_params.id;
					url = this.$myHttp.urlMap.unit_errorCard;
				} else if (this.type == '2') {
					data['library_id'] = this.pages_params.id;
					url = this.$myHttp.urlMap.library_errorCard;
				}

				let res = await this.$myHttp.post({
					url: url,
					data: data,
					needLogin: true
				});
				//2020年2月1日修改——本次答题对错记录
				if (res.code == 1) {
					this.timu_list = res.data;
					this.total_num = this.timu_list.length;
					for (let i = 0, leng = this.timu_list.length; i < leng; i++) {
						//将所有题目状态设置为未答
						this.$set(this.timu_list[i], 'state', 3)
					}
					//获取第一题详情
					this.get_timu_info();
				}
			},
			// 根据答题卡获取题目
			choice_timu_by_id(index) {
				this.timu_order = index + 1
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});
				this.get_timu_info()
			},
			// 获取当前题目
			async get_timu_info() {
				let id = this.timu_list[this.timu_order - 1].id;
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.timu_details,
					data: {
						id: id
					},
					needLogin: true
				});
				if (res.code == 1) {
					if (res.data != []) {
						let timu = this.set_right_flg(res.data);
						this.current_timu = timu;
						this.setAnswerStyle(this.current_timu)
					} else {
						this.current_timu = null;
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			//单选多选判断，选项正确错误
			setAnswerStyle(timu) {
				this.$nextTick(() => {
					timu.answers.forEach((item, index) => {
						this.$refs['questionOption_' + index][0].setAnswerStyle(this.copy_user_answer);
					})
				})
			},
			// 设置正确答案的标记
			set_right_flg(timu) {
				if (timu) {
					if (timu.answers) {
						for (let i = 0, leng = timu.answers.length; i < leng; i++) {
							if (timu.right_answer.toString().toLowerCase().replace(/\s/g, '').indexOf(timu.answers[i]
									.answer_code.toString().toLowerCase().replace(/\s/g, '')) !== -1) {
								timu.answers[i]['right_flg'] = true
							}
						}
					}
				}
				return timu
			},
			// 收藏
			collect_opt(type) {
				this.$set(this.current_timu, 'is_fav', type)
			},
			// 设置是否黑夜模式
			set_if_theme_dark(data) {
				this.if_theme_dark = data
			},
			tap_handler(type) {
				uni.navigateBack();
			}
		}
	};
</script>

<style>
	@import "~@/static/css/tiku.css";
</style>