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">
				<template v-if="!finishStatus">
					<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>
				</template>
				<view v-else>
					{{ generatePersonality() }}
				</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 finishStatus = ref(false)
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{
		console.log('generatePersonality',generatePersonality())
		finishStatus.value = true
		// 完成答题
		uni.showToast({
			title:'提交成功！',
		})
	}
}
 // 生成性格描述的方法
const generatePersonality = () =>{
  if (chooseList.value.length !== 5) return "请完成所有问题";
  
  // 各维度得分计算
  const dimensionScores = {
	energy: 0,     // 精力来源 (外向/内向)
	decision: 0,   // 决策方式 (理性/感性)
	structure: 0,  // 结构化程度
	role: 0        // 团队角色倾向
  };
  
  // 第一题：社交倾向
  if (chooseList.value[0] === 'A' || chooseList.value[0] === 'B') dimensionScores.energy += 2;
  if (chooseList.value[0] === 'C') dimensionScores.energy += 1;
  
  // 第二题：决策方式
  if (chooseList.value[1] === 'A') dimensionScores.decision += 2;
  if (chooseList.value[1] === 'B') dimensionScores.decision += 1;
  
  // 第三题：结构化偏好
  if (chooseList.value[2] === 'A') dimensionScores.structure += 2;
  if (chooseList.value[2] === 'B' || chooseList.value[2] === 'D') dimensionScores.structure += 1;
  
  // 第四题：团队角色
  if (chooseList.value[3] === 'A' || chooseList.value[3] === 'D') dimensionScores.role += 2;
  if (chooseList.value[3] === 'B') dimensionScores.role += 1;
  
  // 第五题：社交补充
  if (chooseList.value[4] === 'B') dimensionScores.energy += 2;
  if (chooseList.value[4] === 'D') dimensionScores.energy += 1;

  // 性格类型判断
  const energyType = dimensionScores.energy >= 3 ? "E" : "I"; // 外向/内向
  const decisionType = dimensionScores.decision >= 2 ? "T" : "F"; // 理性/感性
  
  // 性格特征描述
  const personalities = {
	// 外向型组合
	"ET": { 
	  name: "开拓型领袖", 
	  desc: "你是个充满活力的决策者！善于社交并理性分析问题，天生的领导者，擅长在大型社交场合中主导方向，偏好结构化的工作环境" 
	},
	"EF": { 
	  name: "魅力型协调者", 
	  desc: "你是个热情洋溢的沟通专家！善于在社交中感知他人情绪，喜欢团队合作，在灵活的环境中能发挥创造力，是优秀的协调者" 
	},
	// 内向型组合
	"IT": { 
	  name: "分析型专家", 
	  desc: "你是个专注的思考者！偏好深度工作与理性分析，在小范围社交中表现出色，适合需要精密思考的结构化工作环境" 
	},
	"IF": { 
	  name: "关怀型创造者", 
	  desc: "你是个富有洞察力的创造者！重视内心感受和亲密关系，在自由环境中灵感迸发，常扮演团队中的创新者角色" 
	}
  };
  
  // 添加特质修饰词
  const traits = [];
  if (dimensionScores.structure >= 2) traits.push("有条理");
  if (chooseList.value[3] === 'C') traits.push("善于调解");
  if (chooseList.value[1] === 'D') traits.push("灵活应变");
  if (chooseList.value[4] === 'A') traits.push("思想深刻");
  
  const personalityKey = energyType + decisionType;
  const result = personalities[personalityKey] || { 
	name: "平衡型人才", 
	desc: "你具有适应多种环境的优秀能力！能在不同情境中灵活调整自己的行为模式" 
  };
  
  // 构建最终描述
  let finalDesc = `${result.name}：${result.desc}`;
  if (traits.length > 0) {
	finalDesc += `，特别具有${traits.join('、')}的特质`;
  }
  
  return finalDesc;
}

</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>