novelAD/pages/tools/quWeiCePing.vue

<template>
	<view class="content">
		<view :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="pdy-60 pdx-28 mgt-100 radio-20 bg-white w border-0_1 box">
					<view class="title mgb-50" >
						{{ curIndex + 1 }}、{{ QList[curIndex].title }}
					</view>
					<view class="Aitem flex" v-for="(a,key) in QList[curIndex].Alist" 
					@click="chooseA(key)" :class="chooseList[curIndex] == key ?'active':''">
						<view class="">{{ key }}、</view>
						<view class="">{{ a }}</view>
					</view>
					<view class="next_btn cursor" @click="nextFn">{{ curIndex == QList.length - 1 ? '显示结果' : '下一题'}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
var statusBarHeight = uni.getStorageSync('statusBarHeight')
const QList = ref([
	{ title:'你更喜欢哪种社交场合?',Alist:{'A':'大型会所','B':'小型会所','C':'与几位亲朋密友聚会','D':'独自一人'} },
	{ title:'你在做决定时更倾向于?',Alist:{'A':'依靠逻辑和事实','B':'依靠直觉和感觉','C':'参考别人的意见','D':'随机应变'} },
	{ title:'你更喜欢哪种工作环境?',Alist:{'A':'有条不紊的办公室','B':'灵活自由的环境','C':'家庭办公','D':'合作共享的空间'} },
	{ title:'在团队中，你通常扮演什么角色?',Alist:{'A':'领导者','B':'执行者','C':'协调者','D':'创新者'} },
	{ title:'你更喜欢哪种娱乐方式?',Alist:{'A':'阅读书籍','B':'参加派对','C':'看电影','D':'运动健身'} }
])

const curIndex = ref(0)
const curChoose = ref(null)
const chooseList = ref([]) // 选择的数组 AABCD
const chooseA = (key) =>{
	chooseList.value[curIndex.value] = key
}
const nextFn = ()=>{
	if(!chooseList.value[curIndex.value]){
		uni.showToast({
			title:'请先选择选项',
			icon:'none'
		})
		return
	}
	if(curIndex.value < QList.value.length - 1){
		curIndex.value += 1
	}else{
		// 完成答题
		uni.showToast({
			title:'提交成功！',
		})
	}
	
}
</script>

<style lang="scss" scoped>
	.content{
		height: 100vh;
		padding: 28rpx;
		background: linear-gradient(to bottom, #a9d4ff, #cce6ff);
	}
	.box{
		height: 75vh;
		border: 1rpx solid #000;
		position: relative;
		.Aitem{
			border: 1rpx solid #000;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 22rpx;
			margin-bottom: 20rpx;
			padding: 0 20rpx;
			cursor: pointer;
		}
		.next_btn{
			width: 320rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			color: #fff;
			background-color: #399bfc;
			border-radius: 20rpx;
			border: 1px solid #000;
			transform: translate(50%);
			position: absolute;
			bottom: 60rpx;
		}
		.active{
			border: 1px solid #399bfc;
			color: #399bfc;
		}
	}
</style>