novelAD/pages/tools/quWeiCePing.vue

<template>
	<view class="content">
		<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>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
const QList = ref([
	{ title:'你更喜欢哪种社交场合1?',Alist:{'A':'大型会所1','B':'小型会所','C':'与几位亲朋密友聚会','D':'独自一人'} },
	{ title:'你更喜欢哪种社交场合2?',Alist:{'A':'大型会所2','B':'小型会所','C':'与几位亲朋密友聚会','D':'独自一人'} },
	{ title:'你更喜欢哪种社交场合3?',Alist:{'A':'大型会所3','B':'小型会所','C':'与几位亲朋密友聚会','D':'独自一人'} },
	{ title:'你更喜欢哪种社交场合4?',Alist:{'A':'大型会所4','B':'小型会所','C':'与几位亲朋密友聚会','D':'独自一人'} },
	{ title:'你更喜欢哪种社交场合5?',Alist:{'A':'大型会所5','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(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>