From 39ec48fc2784a1a0a5e20853340cc36c3484e872 Mon Sep 17 00:00:00 2001 From: huangge1199 Date: Mon, 21 Jul 2025 16:34:40 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AD=94=E9=A2=98=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mbti-test-mini/src/app.config.ts | 3 +- mbti-test-mini/src/app.scss | 2 + mbti-test-mini/src/data/questions.json | 152 ++++++++++++++++++ .../src/pages/doQuestion/index.config.ts | 3 + .../src/pages/doQuestion/index.scss | 39 +++++ mbti-test-mini/src/pages/doQuestion/index.tsx | 100 ++++++++++++ mbti-test-mini/src/pages/index/index.scss | 2 - 7 files changed, 298 insertions(+), 3 deletions(-) create mode 100644 mbti-test-mini/src/data/questions.json create mode 100644 mbti-test-mini/src/pages/doQuestion/index.config.ts create mode 100644 mbti-test-mini/src/pages/doQuestion/index.scss create mode 100644 mbti-test-mini/src/pages/doQuestion/index.tsx diff --git a/mbti-test-mini/src/app.config.ts b/mbti-test-mini/src/app.config.ts index fc7614d..71ae772 100644 --- a/mbti-test-mini/src/app.config.ts +++ b/mbti-test-mini/src/app.config.ts @@ -1,6 +1,7 @@ export default defineAppConfig({ pages: [ - 'pages/index/index' + 'pages/index/index', + 'pages/doQuestion/index', ], window: { backgroundTextStyle: 'light', diff --git a/mbti-test-mini/src/app.scss b/mbti-test-mini/src/app.scss index e0c14b4..5d3ef5d 100644 --- a/mbti-test-mini/src/app.scss +++ b/mbti-test-mini/src/app.scss @@ -1,3 +1,5 @@ +@import "~taro-ui/dist/style/index.scss"; + .at-button--primary { background: #88619a !important; border-color: #88619a !important; diff --git a/mbti-test-mini/src/data/questions.json b/mbti-test-mini/src/data/questions.json new file mode 100644 index 0000000..22dc518 --- /dev/null +++ b/mbti-test-mini/src/data/questions.json @@ -0,0 +1,152 @@ +[ + { + "options": [ + { + "result": "I", + "value": "独自工作", + "key": "A" + }, + { + "result": "E", + "value": "与他人合作", + "key": "B" + } + ], + "title": "你通常更喜欢" + }, + { + "options": [ + { + "result": "J", + "value": "喜欢有明确的计划", + "key": "A" + }, + { + "result": "P", + "value": "更愿意随机应变", + "key": "B" + } + ], + "title": "当安排活动时" + }, + { + "options": [ + { + "result": "T", + "value": "认为应该严格遵守", + "key": "A" + }, + { + "result": "F", + "value": "认为应灵活运用", + "key": "B" + } + ], + "title": "你如何看待规则" + }, + { + "options": [ + { + "result": "E", + "value": "经常是说话的人", + "key": "A" + }, + { + "result": "I", + "value": "更倾向于倾听", + "key": "B" + } + ], + "title": "在社交场合中" + }, + { + "options": [ + { + "result": "J", + "value": "先研究再行动", + "key": "A" + }, + { + "result": "P", + "value": "边做边学习", + "key": "B" + } + ], + "title": "面对新的挑战" + }, + { + "options": [ + { + "result": "S", + "value": "注重细节和事实", + "key": "A" + }, + { + "result": "N", + "value": "注重概念和想象", + "key": "B" + } + ], + "title": "在日常生活中" + }, + { + "options": [ + { + "result": "T", + "value": "更多基于逻辑分析", + "key": "A" + }, + { + "result": "F", + "value": "更多基于个人情感", + "key": "B" + } + ], + "title": "做决定时" + }, + { + "options": [ + { + "result": "S", + "value": "喜欢有结构和常规", + "key": "A" + }, + { + "result": "N", + "value": "喜欢自由和灵活性", + "key": "B" + } + ], + "title": "对于日常安排" + }, + { + "options": [ + { + "result": "P", + "value": "首先考虑可能性", + "key": "A" + }, + { + "result": "J", + "value": "首先考虑后果", + "key": "B" + } + ], + "title": "当遇到问题时" + }, + { + "options": [ + { + "result": "T", + "value": "时间是一种宝贵的资源", + "key": "A" + }, + { + "result": "F", + "value": "时间是相对灵活的概念", + "key": "B" + } + ], + "title": "你如何看待时间" + } +] diff --git a/mbti-test-mini/src/pages/doQuestion/index.config.ts b/mbti-test-mini/src/pages/doQuestion/index.config.ts new file mode 100644 index 0000000..a9e9c4b --- /dev/null +++ b/mbti-test-mini/src/pages/doQuestion/index.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + // navigationBarTitleText: '' +}) diff --git a/mbti-test-mini/src/pages/doQuestion/index.scss b/mbti-test-mini/src/pages/doQuestion/index.scss new file mode 100644 index 0000000..fbd56e5 --- /dev/null +++ b/mbti-test-mini/src/pages/doQuestion/index.scss @@ -0,0 +1,39 @@ +.doQuestionPage { + background-image: url('../../assets/headerBg.jpg'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + min-height: 100vh; // 保证全屏 + padding: 20px; + + .title { + margin-bottom: 48px; + } + + .options-wrapper { + margin-bottom: 48px; + } + + .option { + margin-bottom: 16px; + } + + .controlBtn { + margin: 24px 48px; + min-width: 180px; + display: block; + margin: 20px auto; + text-align: center; + color: #fff; + border-radius: 999px; + background: #88619a; + border: none; + } +} + +.doQuestionPage .at-radio__option, +.doQuestionPage .at-radio__option .at-radio__option-container, +.doQuestionPage .at-radio__option::after { + background: transparent !important; + box-shadow: none !important; +} diff --git a/mbti-test-mini/src/pages/doQuestion/index.tsx b/mbti-test-mini/src/pages/doQuestion/index.tsx new file mode 100644 index 0000000..20983b1 --- /dev/null +++ b/mbti-test-mini/src/pages/doQuestion/index.tsx @@ -0,0 +1,100 @@ +import {View} from "@tarojs/components"; +import Taro from "@tarojs/taro"; +import {AtButton, AtRadio} from "taro-ui"; +import {useEffect, useState, useMemo} from "react"; +import GlobalFooter from "../../components/GlobalFooter"; +import questions from "../../data/questions.json"; +import "./index.scss"; + +/** + * 答题页面 + */ +export default () => { + // 当前题目序号（从 1 开始） + const [current, setCurrent] = useState(1); + // 当前题目 + const [currentQuestion, setCurrentQuestion] = useState(questions[0]); + // 当前回答 + const [currentAnswer, setCurrentAnswer] = useState(); + // 回答列表 + const [answerList] = useState([]); + + // radio 选项，去除勾选标识 + const radioOptions = useMemo(() => { + return currentQuestion.options.map((option) => { + return { + label: `${option.key}. ${option.value}`, + value: option.key, + }; + }); + }, [currentQuestion]); + + // 序号变化时，切换当前题目和当前回答 + useEffect(() => { + setCurrentQuestion(questions[current - 1]); + setCurrentAnswer(answerList[current - 1]); + }, [current]); + + return ( + + + {current}、{currentQuestion.title} + + + { + setCurrentAnswer(value); + // 记录回答 + answerList[current - 1] = value; + }} + /> + + {current < questions.length && ( + { + setCurrent(current + 1); + }} + > + 下一题 + + )} + {current >= questions.length && ( + { + Taro.navigateTo({ + url: "/pages/result/index", + }); + }} + > + 查看结果 + + )} + {current > 1 && ( + { + setCurrent(current - 1); + }} + > + 上一题 + + )} + + + ); +}; diff --git a/mbti-test-mini/src/pages/index/index.scss b/mbti-test-mini/src/pages/index/index.scss index 34e8775..40dd2ee 100644 --- a/mbti-test-mini/src/pages/index/index.scss +++ b/mbti-test-mini/src/pages/index/index.scss @@ -4,7 +4,6 @@ background-position: center; background-repeat: no-repeat; min-height: 100vh; // 保证全屏 - padding: 20px; .title { // color: #fff; @@ -26,6 +25,5 @@ text-align: center; color: #fff; border-radius: 999px; - padding: 20px 0; } }