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="shz">守护者 {{ bhVal }} 欢迎您</view>
			<!-- 答题按钮 -->
			<view class="dati" @click="starBtn">
				<view style="display: flex; align-items: center; margin-left: 700rpx; margin-top: -1200rpx">
					<view class="dt">
						<image style="width: 100%; height: 100%" src="/static/img/img_left@2x.png"></image>
					</view>
					<view class="dt_box" style="margin: auto">开始答题</view>
					<view class="dt">
						<image style="width: 100%; height: 100%" src="/static/img/img_right@2x.png"></image>
					</view>
				</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 class="bh">{{ bhVal }}</view>
				</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="ph_top">
						<view class="phb2">您的排名</view>
						<view class="phb_box">
							<view class="phb_item">
								<view class="phb_pm">
									<!-- <image style="width: 100%; height: 100%" src="/static/img/img_no1@2x.png"></image> -->
									<view class="paiming">
										{{ myPM }}
									</view>
								</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">{{ myBh }}</view>
							</view>
							<view style="display: flex; align-items: center">
								<view class="fenshu">{{ myss }}分</view>
								<view class="shijian">{{ mysj }}</view>
							</view>
						</view>
					</view>
					<view class="phb_box" v-for="(item, index) in rankingList" :key="item.index">
						<view class="phb_item">
							<view class="phb_pm">
								<!-- <image style="width: 100%; height: 100%" src="/static/img/img_no1@2x.png"></image> -->
								<view class="paiming">
									{{ index + 1 }}
								</view>
							</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" @click="answerShow = false">
						<view @click="answerShow = false" style="width: 500rpx; cursor: pointer; position: absolute; top: -36rpx; left: 10rpx" class="">
							<image style="width: 100rpx; height: 100rpx" 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.index" 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>
		<!-- 答题结果 -->
		<view class="jieGuo" v-if="jieGuoShow">
			<view class="tm_box2">
				<view class="dt_end">答题结束</view>
			</view>
			<view class="fraction">
				<text>{{ recordNumber * 10 }}分</text>
			</view>
			<view class="txt_box">
				<view class="txt_">共计{{ anNiuList.length }}题，您答对了 {{ recordNumber }} 道题！</view>
				<!-- <view class="txt_">恭喜您！耗时 {{ cost_time }} 完成！</view> -->
			</view>
			<!-- 查看排行榜按钮 -->
			<view class="restart">
				<view class="ck_box" @click="phbBtn">
					<view class="" style="margin: auto; display: flex; align-items: center">
						<view class="dt">
							<image style="width: 100%; height: 100%" src="/static/img/img_left@2x.png"></image>
						</view>
						<view class="dt_ck">查看排行榜</view>
						<view class="dt">
							<image style="width: 100%; height: 100%" src="/static/img/img_right@2x.png"></image>
						</view>
					</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:1000rpx">
			<view class="box_gb" @click="show = false">
				<view class="gb">X</view>
			</view>
			<LeftNav></LeftNav>
		</u-popup>
	</view>
</template>

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

		ceshi() {
			return this.activeTab == 'answer' ? true : false;
		}
	},
	methods: {
		bianHaoBtn() {
			this.bhVal = Math.floor(Math.random() * 900) + 100;
			console.log(this.bhVal, 456545);
		},
		navBtn() {
			this.show = true;
		},
		// 开始答题
		starBtn() {
			uni.setStorageSync('val', this.bhVal);
			// this.startTime = new Date().getTime(); // 记录开始时间戳
			console.log(that.bhVal, 'bhVal');
			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.bhVal, '5456+46545');
			if (!this.selectTab) {
				this.$common.normalToShow('还未选择答案');
				return false;
			}
			this.answerShow = false;
			// this.starShow = true;
			this.i = 0;
			this.resultShow = true;
			this.jieGuoShow = true;
			// 昵称
			this.$api.complete({ name: this.bhVal }, function (res) {
				console.log(res, 'name');
			});
			// const val = uni.getStorageSync('val');
			// this.bhVal = Number(val) + 1;
		},
		// 昵称确认
		isOk() {
			setTimeout(() => {
				this.$common.successToShow('提交成功');
			}, 500);
			this.starShow = false;
			this.resultShow = true;
			this.jieGuoShow = true;

			// if (this.iptVal == '' && this.iptVal.length <= 0) {
			// 	this.$common.normalToShow('昵称不能为空');
			// } else {
			// 	setTimeout(() => {
			// 		this.$common.successToShow('提交成功');
			// 	}, 500);
			// 	this.starShow = false;
			// 	this.resultShow = true;
			// 	this.jieGuoShow = true;

			// }
		},
		// 排行榜
		phbBtn() {
			this.$api.getTopList({}, function (res) {
				that.rankingList = res.data;
				console.log(that.rankingList, '排行');

				that.$nextTick(() => {
					that.rankingList.forEach((item, index) => {
						if (item.name == that.bhVal) {
							that.myPM = index + 1; /* 排名 */
							that.myBh = item.name; /* 编号 */
							that.myss = item.score; /* 分数 */
							that.mysj = item.cost_time; /* 时间 */
						}
					});
				});
			});
			this.jieGuoShow = false;
			this.rankinglShow = 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; */
	background-color: #e78a80 !important;
}
.shz {
	width: 600rpx;
	margin: auto;
	margin-top: 50rpx;
	font-size: 46rpx;
	color: #563530;
	letter-spacing: 0.1em;
}
.ck_box {
	display: flex;
	align-items: center;
	background-color: #fdd7c8;
	cursor: pointer;
	width: 1000rpx;
	height: 200rpx;
	margin: auto;
}
.active2 {
	border: 2px solid #5ac725 !important;
}
.active3 {
	border: 2px solid #f56c6c !important;
}
.body {
	padding-top: 100rpx;
	height: 1905rpx;
	box-sizing: border-box;
}
.header {
	margin-left: 10%;
	width: 960rpx;
	height: 96rpx;

	align-items: center;
	display: flex;
}
.bh {
	font-size: 38rpx;
	color: #563530;
	width: 1000rpx;
	height: 100rpx;
	line-height: 100rpx;
	text-indent: 1em;

	background-color: #efe6d8;
}
.jieGuo {
	position: absolute;
	top: 400rpx;
	left: 32%;
	height: 1000rpx;
	z-index: 2;
	background-color: #efe6d8;
}
.box {
	width: 1800rpx;
	height: 1180rpx;
	margin: auto;
	margin-top: 10rpx;
}
.box_tit {
	margin: auto;
	width: 1400rpx;
	height: 160rpx;
}
.box_tit_2 {
	width: 850rpx;
	display: flex;
	font-size: 46rpx;
	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: -300rpx;
	display: flex;
	width: 420rpx;
	height: 450rpx;
	cursor: pointer;
	align-items: center;
}
.box_gb {
	position: absolute;
	cursor: pointer;
	width: 1000rpx;
	height: 160rpx;
}
.gb {
	width: 80rpx;
	height: 80rpx;
	line-height: 80rpx;
	position: absolute;
	right: 100rpx;
	top: 30rpx;
	text-align: center;
	font-size: 52rpx;
	color: #563530;
	margin-left: 300rpx;
	border: #563530 1px solid;
}
.img {
	width: 100rpx;
	height: 100rpx;
}
.dh {
	margin-left: 10rpx;
	font-size: 42rpx;
	color: #563530;
}
.dati {
	display: flex;
	align-items: center;
	cursor: pointer;
	margin-left: -100rpx;
	width: 1400px;
	height: 1200rpx;
	line-height: 18rpx;
	margin-top: 100rpx;
	/* background-color: #5ac725; */
}
.restart {
	display: flex;
	align-items: center;
	line-height: 18rpx;
	margin-top: 260rpx;
}
.dt_box {
	cursor: pointer;
	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_ck {
	cursor: pointer;
	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 {
	position: absolute;
	top: 800rpx;
	left: 26%;
	width: 1600rpx;
	height: 940rpx;
	border: 3px solid #563530;
	background-color: #eeeadd;
}
.ph_box2 {
	width: 1580rpx;
	height: 920rpx;
	margin: auto;
	margin-top: 10rpx;
	overflow: scroll;
	box-sizing: border-box;
	padding: 0 40rpx 0 40rpx;
	border: 1px solid #563530;
}

.phb {
	width: 220rpx;
	font-size: 52rpx;
	margin: auto;
	margin-top: 20rpx;
	background: linear-gradient(180deg, #bc5f29 0%, #5b3c29 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.phb2 {
	width: 220rpx;
	font-size: 46rpx;
	margin: auto;
	margin-top: 20rpx;
	background: linear-gradient(180deg, #bc5f29 0%, #5b3c29 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.phb_box {
	height: 140rpx;
	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: 26%;
	left: 23%;
	width: 2200rpx;
	height: 1300rpx;
	z-index: 3;
	border: 3px solid #563530;
}
.star_box2 {
	width: 2180rpx;
	height: 1280rpx;
	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 {
	width: 500rpx;
	height: 60rpx;
	background-color: palegreen;
	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;
	cursor: pointer;
	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: 300rpx;
	cursor: pointer;
	border-bottom: 1px solid #ddd0c4;
}
.tm_box2 {
	display: flex;
	position: relative;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	margin-top: 60rpx;
	height: 160rpx;
	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;
}
.paiming {
	text-align: center;
	line-height: 80rpx;
	color: #563530;
	font-size: 36rpx;
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background-color: #e5c22c;
}
.paiming2 {
	display: flex;
	text-align: center;
	line-height: 80rpx;
	width: 80rpx;
	height: 80rpx;
	color: #563530;
	font-size: 36rpx;
	border-radius: 50%;
	background-color: #e5c22c;
}
.daAn_box {
	width: 100%;
	margin: auto;
	display: flex;
	align-items: center;
	flex-flow: wrap;
	justify-content: space-between;
}
.daAn_item {
	width: 820rpx;
	height: 220rpx;
	cursor: pointer;
	font-size: 36rpx;
	color: #563530;
	margin-top: 50rpx;
	text-align: center;
	padding-top: 20rpx;
	box-sizing: border-box;
	border: 1px solid #563530;
	background-color: #fff9ec;
}
.tjDn2 {
	width: 580rpx;
	height: 190rpx;
	margin: auto;
	font-size: 40rpx;
	text-align: center;
	cursor: pointer;
	line-height: 190rpx;
	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: 600rpx;
	height: 210rpx;
	margin: auto;
	margin-top: 100rpx;
	padding-top: 10rpx;
	background-color: antiquewhite;
}
.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;
}
.ph_top {
	position: sticky;
	top: 0;
	background-color: #f1bd92;
	z-index: 2;
}
</style>