feiYi/pages/index/huDongWenDa/huDongWenDa.vue

<template>
	<view class="body">
		<view class="header">
			<view class="tit">湖里文化遗产保护中心</view>
			<view class="thumbnail_1">
				<image style="width: 100%; height: 100%" src="/static/img/img_seal@2x.png"></image>
			</view>
		</view>
		<view class="box">
			<view class="box_tit">
				<image style="width: 100%; height: 100%" src="/static/img/img_tit.png"></image>
			</view>
			<view class="box_tit_2">
				<view class="">文物守护者</view>
				<view class="" style="margin: 0 30rpx 0 30rpx">保护文物</view>
				<view class="">留下历史</view>
			</view>
			<!-- 答题按钮 -->
			<view class="dati">
				<view class="dt">
					<image style="width: 100%; height: 100%" src="/static/img/img_left@2x.png"></image>
				</view>
				<view class="dt_box" @click="starBtn">开始答题</view>
				<view class="dt">
					<image style="width: 100%; height: 100%" src="/static/img/img_right@2x.png"></image>
				</view>
			</view>
			<!-- 昵称弹层 -->
			<view class="nc_box" v-if="starShow">
				<view class="">
					<view class="nc">请留下您的昵称</view>
					<input v-model.trim="iptVal" class="ipt" type="text" placeholder="请输入您的昵称" />
				</view>
				<view class="qr" @click="isOk">确认</view>
			</view>
			<!-- 排行榜 -->
			<view class="ph_box" v-if="rankinglShow">
				<view class="ph_box2">
					<view class="phb">排行榜</view>
					<view class="phb_box" v-for="item in rankingList" :key="item.name">
						<view class="phb_item">
							<view class="phb_pm">
								<image style="width: 100%; height: 100%" src="/static/img/img_no1@2x.png"></image>
							</view>
							<view class="phb_tx">
								<image style="width: 100%; height: 100%" src="/static/img/img_avatar@2x(1).png"></image>
							</view>
							<view class="phb_nc">{{ item.name }}</view>
						</view>
						<view style="display: flex; align-items: center">
							<view class="fenshu">{{ item.score }}分</view>
							<view class="shijian">{{ item.cost_time }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 开始答题弹层 -->

		<view class="star_box" v-if="answerShow">
			<view class="star_box2">
				<!-- 开始答题 -->
				<view class="" v-if="resultShow">
					<view class="tm_box">
						<view @click="answerShow = false" style="position: absolute; top: -36rpx; left: 10rpx" class="">
							<image style="width: 80rpx; height: 80rpx" src="/static/img/icon_back@2x.png"></image>
						</view>
						<view class="tihao">{{ i }}</view>
						<view class="wenti">{{ list.title }}</view>
					</view>

					<!-- 答案 -->
					<view class="daAn_box">
						<!-- -->
						<view @click="selectBtn(index)" v-for="(item, index) in list.optionList" :key="item.label" class="daAn_item" :class="{ active: index == selectTab2 }">
							{{ item.label }}
						</view>
					</view>
					<view class="tjDn">
						<view @click="completeBtn" v-if="abNiu" class="tjDn2">完成答题</view>
						<view v-else class="tjDn2" @click="nextBtn">下一题</view>
					</view>
				</view>
			</view>
			<!-- 答题结果 -->
			<view class="jieGuo" v-if="jieGuoShow">
				<view class="tm_box">
					<view class="dt_end">答题结束</view>
				</view>
				<view class="fraction">
					<text style="font-size: 38rpx">{{ recordNumber * 10 }}分</text>
				</view>
				<view class="txt_box">
					<view class="txt_">共计{{ anNiuList.length }}题，您答对了 {{ recordNumber }} 道题！</view>
					<view class="txt_">恭喜您！耗时 1分30秒 完成！</view>
				</view>
				<!-- 重新答题按钮 -->
				<view class="restart" @click="restartBtn">
					<view class="dt">
						<image style="width: 100%; height: 100%" src="/static/img/img_left@2x.png"></image>
					</view>
					<view class="dt_box">重新开始</view>
					<view class="dt">
						<image style="width: 100%; height: 100%" src="/static/img/img_right@2x.png"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 菜单按钮 -->
		<view class="caidan" @click="navBtn">
			<image class="img" src="../../../static/img/icon_menu@2x.png"></image>
			<view class="dh">导航</view>
		</view>
		<!-- 菜单弹层 -->
		<u-popup :show="show" @close="close" mode="left" bgColor="#f8efe1" customStyle="width:500rpx">
			<LeftNav></LeftNav>
		</u-popup>
	</view>
</template>

<script>
import { login } from '../../../config/api';
let that;
export default {
	data() {
		return {
			i: 0,
			recordNumber: 0 /* 记录对的题数 */,
			activeTab: '',
			selectTab: true,
			selectTab2: null,
			iptVal: '',
			show: false,
			starShow: false,
			answerShow: false,
			jieGuoShow: false,
			rankinglShow: false,
			resultShow: true,
			list: {},
			anNiuList: {},
			optionList: [] /* 答案选项 */,
			rankingList: [] /* 排行榜 */
		};
	},
	onLoad() {
		that = this;
	},
	computed: {
		abNiu() {
			return this.anNiuList.length == this.list.seq;
		},

		ceshi() {
			return this.activeTab == 'answer' ? true : false;
		}
	},
	methods: {
		navBtn() {
			this.show = true;
		},
		// 开始答题
		starBtn() {
			this.answerShow = true;
			this.$api.startChallenge({}, function (res) {
				that.anNiuList = res.data.question_data;
				console.log(that.anNiuList.length, '开始答题');
			});

			setTimeout(() => {
				that.nextBtn();
			}, 200);
		},

		// 下一题
		nextBtn() {
			if (this.selectTab) {
				this.i++;
			}

			if (!this.selectTab) {
				this.$common.normalToShow('还未选择答案');
				return false;
			}
			// 下一题

			this.$api.getNew({}, function (res) {
				// console.log(res, 11);
				that.list = res.data;
			});

			// 判断对错
			this.$api.submitAnswer({ answer: this.selectTab2 }, function (res) {
				// console.log(res, '提交');
				// 为对错答案添加样式
				// ceshi ? 'active2' : 'active3'
				// that.activeTab = res.data;
				// console.log(that.ceshi, 'activeTab');
				if (res.data == 'answer') {
					that.recordNumber++;
					console.log(that.recordNumber * 10, '对了');
				}
			});

			this.selectTab = null;
			this.selectTab2 = null;
		},
		// 选择答案
		selectBtn(i) {
			if (i !== '' && i !== undefined) {
				this.selectTab = true;
			} else {
				this.selectTab = false;
			}
			this.selectTab2 = i;
		},
		// 完成答题
		completeBtn() {
			// console.log(this.selectTab, '56565656');
			if (!this.selectTab) {
				this.$common.normalToShow('还未选择答案');
				return false;
			}
			this.answerShow = false;
			this.starShow = true;
			this.i = 0;
			if (this.iptVal !== '' && this.iptVal !== undefined) {
				this.starShow = false;
			}
			// 昵称
			this.$api.complete({ name: this.iptVal }, function (res) {
				console.log(res, 'name');
			});
		},
		// 昵称确认
		isOk() {
			if (this.iptVal == '' && this.iptVal.length <= 0) {
				this.$common.normalToShow('昵称不能为空');
			} else {
				setTimeout(() => {
					this.$common.successToShow('提交成功');
				}, 500);
				this.starShow = false;
				this.resultShow = true;

				// this.answerShow = true;
				this.rankinglShow = true;

				// this.jieGuoShow = true;
				this.$api.getTopList({}, function (res) {
					console.log(res, '排行');
					that.rankingList = res.data;
				});
			}
		},
		// 重新答题
		restartBtn() {
			this.starBtn();
			// this.nextBtn();
			// this.jieGuoShow = false;
			// this.resultShow = true;
		},

		close() {
			this.show = false;
			// console.log('close');
		}
	}
};
</script>

<style>
.active {
	background-image: linear-gradient(270deg, rgba(188, 95, 41, 1) 0, rgba(91, 60, 41, 1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	border: 1px solid #563530;
}
.active2 {
	border: 2px solid #5ac725 !important;
}
.active3 {
	border: 2px solid #f56c6c !important;
}
.body {
	padding-top: 100rpx;
	height: 1825rpx;
}
.header {
	margin-left: 10%;
	width: 960rpx;
	height: 96rpx;

	align-items: center;
	display: flex;
}
.jieGuo {
	position: absolute;
	top: 0;
	left: 15%;
}
.box {
	width: 1800rpx;
	height: 1180rpx;
	margin: auto;
	margin-top: 10rpx;
}
.box_tit {
	margin: auto;
	width: 1400rpx;
	height: 160rpx;
}
.box_tit_2 {
	width: 700rpx;
	display: flex;
	font-size: 38rpx;
	margin: auto;
	margin-top: 60rpx;
	color: #563530;
	letter-spacing: 0.2em;
}

.tit {
	background-image: linear-gradient(270deg, rgba(188, 95, 41, 1) 0, rgba(91, 60, 41, 1) 100%);

	height: 96rpx;
	font-size: 48rpx;
	letter-spacing: 0.3em;
	font-weight: NaN;
	text-align: left;
	white-space: nowrap;
	line-height: 100rpx;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.thumbnail_1 {
	width: 16rpx;
	height: 60rpx;
}
.caidan {
	margin-left: 10%;
	margin-top: 2%;
	display: flex;
	width: 180rpx;
	align-items: center;
}
.img {
	width: 80rpx;
	height: 80rpx;
}
.dh {
	margin-left: 10rpx;
	font-size: 36rpx;
	color: #563530;
}
.dati {
	display: flex;
	align-items: center;
	margin: auto;
	width: 200px;
	line-height: 18rpx;
	margin-top: 100rpx;
}
.restart {
	display: flex;
	align-items: center;
	margin: auto;
	width: 200px;
	line-height: 18rpx;
	margin-top: 260rpx;
}
.dt_box {
	width: 300rpx;
	height: 80rpx;
	font-size: 48rpx;
	text-align: center;
	line-height: 80rpx;
	margin: 0 20rpx 0 20rpx;
	background-image: linear-gradient(270deg, rgba(188, 95, 41, 1) 0, rgba(91, 60, 41, 1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	border: 1px solid #563530;
}
.dt {
	width: 60rpx;
	height: 16rpx;
}
.ph_box {
	margin: auto;
	margin-top: 50rpx;
	width: 1000rpx;
	height: 740rpx;
	border: 3px solid #563530;
}
.ph_box2 {
	width: 980rpx;
	height: 720rpx;
	margin: auto;
	margin-top: 10rpx;
	overflow: scroll;
	box-sizing: border-box;
	padding: 0 40rpx 0 40rpx;
	border: 1px solid #563530;
}

.phb {
	width: 160rpx;
	font-size: 48rpx;
	margin: auto;
	margin-top: 20rpx;
	background: linear-gradient(180deg, #bc5f29 0%, #5b3c29 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.phb_box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 30rpx;
}
.phb_pm {
	width: 84rpx;
	height: 84rpx;
}
.phb_tx {
	margin-left: 40rpx;
	width: 120rpx;
	height: 120rpx;
}
.phb_nc {
	margin-left: 20rpx;
	font-size: 40rpx;
	color: #563530;
	letter-spacing: 0.2em;
}
.fenshu {
	font-size: 48rpx;
	background: linear-gradient(270deg, #bc5f29 0%, #5b3c29 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.phb_item {
	display: flex;
	align-items: center;
}
.shijian {
	font-size: 36rpx;
	margin-left: 20rpx;
	color: #563530;
}
.star_box {
	position: absolute;
	top: 20%;
	left: 23%;
	width: 2000rpx;
	height: 1100rpx;
	border: 3px solid #563530;
}
.star_box2 {
	width: 1980rpx;
	height: 1080rpx;
	margin: auto;
	margin-top: 10rpx;
	border: 1px solid #563530;
	background-color: #f8efe1;
	padding: 60rpx;
	padding-top: 0;
	box-sizing: border-box;
}
.nc_box {
	position: absolute;
	display: flex;
	top: 27%;
	left: 33%;
	/* width: 900rpx;
	height: 240rpx; */
}
.nc {
	font-size: 36rpx;
	background: linear-gradient(180deg, #bc5f29 0%, #5b3c29 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	letter-spacing: 0.2em;
}
.qr {
	width: 100rpx;
	height: 90rpx;
	font-size: 42rpx;
	margin-top: 50rpx;
	text-align: center;
	line-height: 100rpx;

	border: #a65729 1px solid;
	background: linear-gradient(180deg, #bc5f29 0%, #5b3c29 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.ipt {
	width: 1200rpx;
	height: 100rpx;
	background-color: #fff9ec;
	border: none;
	color: #563530;
}
/deep/.uni-input-placeholder {
	color: #ccbeb4 !important;
	letter-spacing: 0.3em;
	text-indent: 1em;
	font-size: 42rpx;
}
.tm_box {
	display: flex;
	position: relative;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	margin-top: 60rpx;
	height: 260rpx;
	border-bottom: 1px solid #ddd0c4;
}
.tihao {
	width: 90rpx;
	height: 80rpx;
	position: absolute;
	left: 0;
	font-size: 36rpx;
	text-align: center;
	line-height: 80rpx;
	margin-right: 50rpx;
	color: #563530;
	border: 1px solid #563530;
}
.wenti {
	font-size: 36rpx;
	color: #563530;
	margin-left: 160rpx;
	letter-spacing: 0.2em;
}

.daAn_box {
	width: 80%;
	margin: auto;
	display: flex;
	align-items: center;
	flex-flow: wrap;
	justify-content: space-between;
}
.daAn_item {
	width: 520rpx;
	height: 120rpx;

	font-size: 36rpx;
	color: #563530;
	margin-top: 50rpx;
	border: 1px solid #563530;
	background-color: #fff9ec;
}
.tjDn2 {
	width: 280rpx;
	height: 90rpx;
	margin: auto;
	font-size: 40rpx;
	text-align: center;
	line-height: 90rpx;
	letter-spacing: 0.2em;
	background-image: linear-gradient(270deg, rgba(188, 95, 41, 1) 0, rgba(91, 60, 41, 1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	border: 1px solid #563530;
}
.tjDn {
	display: flex;
	width: 1000rpx;
	height: 110rpx;
	margin: auto;
	margin-top: 160rpx;
	padding-top: 10rpx;
}
.dt_end {
	font-size: 52rpx;
	letter-spacing: 0.3em;
	background-image: linear-gradient(270deg, rgba(188, 95, 41, 1) 0, rgba(91, 60, 41, 1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.fraction {
	margin: auto;
	margin-top: 60rpx;
	width: 200rpx;
	height: 80rpx;
	font-size: 56rpx;
	letter-spacing: 0.3em;
	background: linear-gradient(270deg, #bc5f29 0%, #5b3c29 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.txt_box {
	width: 1400rpx;
	height: 100rpx;
	margin: auto;
}
.txt_ {
	margin-top: 60rpx;
	font-size: 36rpx;
	color: #563530;
	height: 100rpx;
	line-height: 100rpx;
	letter-spacing: 0.3em;
	text-align: center;
	background-color: #efe6d8;
}
</style>