Procházet zdrojové kódy

添加测评页面

shmily1213 před 1 měsícem
rodič
revize
528523bad2

+ 8 - 0
src/common/routes.ts

@@ -129,10 +129,18 @@ export const routes = {
    * holland报告
    */
   pageHolland: '/pagesOther/pages/test-center/holland/holland',
+  /**
+   * holland测评
+   */
+  pageHollandTest: '/pagesOther/pages/test-center/holland/test',
   /**
    * mbti报告
    */
   pageMbti: '/pagesOther/pages/test-center/mbti/mbti',
+  /**
+   * mbti测评
+   */
+  pageMbtiTest: '/pagesOther/pages/test-center/mbti/test',
   /**
    * 登录
    */

+ 31 - 1
src/pages.json

@@ -154,7 +154,7 @@
           }
         },
         {
-          "path": "pages/test-center/holland/holland",
+          "path": "pages/test-center/holland/result",
           "style": {
             "navigationBarTitleText": ""
           }
@@ -164,6 +164,36 @@
           "style": {
             "navigationBarTitleText": ""
           }
+        },
+        {
+          "path": "pages/test-center/index/index",
+          "style": {
+            "navigationBarTitleText": ""
+          }
+        },
+        {
+          "path": "pages/test-center/holland/test",
+          "style": {
+            "navigationBarTitleText": ""
+          }
+        },
+        {
+          "path": "pages/test-center/holland/holland",
+          "style": {
+            "navigationBarTitleText": ""
+          }
+        },
+        {
+          "path": "pages/test-center/mbti/test",
+          "style": {
+            "navigationBarTitleText": ""
+          }
+        },
+        {
+          "path": "pages/test-center/mbti/result",
+          "style": {
+            "navigationBarTitleText": ""
+          }
         }
       ]
     },

+ 31 - 24
src/pagesOther/pages/test-center/holland/holland.vue

@@ -1,32 +1,39 @@
 <template>
-    <ie-page>
-        <ie-navbar title="霍兰德职业兴趣测评"/>
-        <interest-result :holl-info="hollandData" :series-data="chartData" />
-    </ie-page>
+  <ie-page bg-color="var(--back)">
+    <ie-navbar title="霍兰德职业兴趣测评" />
+    <view class="p-30">
+      <view class="text-28 indent-[2em]">霍兰德职业兴趣测评(self-Directed Search)是由美国职业指导专家霍兰德(John
+        Holland)根据他本人大量的职业咨询经验及其汁液类型理论编制的测评工具。他认为,个人职业兴趣特性与职业之间有一种内在的对应关系,根据系兴趣不同人格可分为以下六种,每个人的性格都是这六个维度的不同程度的组合。
+      </view>
+      <ie-image src="/pagesOther/static/image/holland-test.png" custom-class="w-full h-100 my-40" mode="heightFix" />
+      <view class="text-28 indent-[2em]">
+        职业兴趣测评,定位于高中的职业兴趣特征,从与职业和专业选择密切相关的6种兴趣类型入手,全面深入地了解个人的职业兴趣偏好,并提供应用测评结果指导生涯规划及大学的选则建议。
+      </view>
+    </view>
+    <ie-safe-toolbar :height="130" :shadow="false" bgColor="transparent">
+      <view class="px-40 py-30 flex flex-col gap-20">
+        <uv-button type="primary" shape="circle" @click="handleTest">开始测评</uv-button>
+        <uv-button type="primary" plain shape="circle" @click="handleResult">测评结果</uv-button>
+      </view>
+    </ie-safe-toolbar>
+  </ie-page>
 </template>
 
-<script setup lang="ts">
-import {useTransferPage} from "@/hooks/useTransferPage";
-import {hollDetail} from "@/api/modules/test-center";
-import {HollandEntity} from "@/types/test-center";
-import InterestResult from "@/pagesOther/pages/test-center/holland/components/interest-result.vue";
+<script lang="ts" setup>
+import { useTransferPage } from '@/hooks/useTransferPage';
+const { transferTo, routes } = useTransferPage();
 
-const {prevData} = useTransferPage()
-const hollandData = ref<HollandEntity>({} as HollandEntity)
-const chartData = ref<number[]>([])
+const handleTest = () => {
+  transferTo(routes.pageHollandTest);
+}
 
-onMounted(async () => {
-    if (prevData.value.code) {
-        const {data} = await hollDetail({code: prevData.value.code})
-        const {scorer, scorea, scorei, scores, scoree, scorec} = data
-        hollandData.value = data
-        chartData.value = [scorer, scorea, scorei, scores, scoree, scorec]
+const handleResult = () => {
+  transferTo(routes.testCenterList, {
+    data: {
+      type: 'holland'
     }
-})
-
-onPageScroll(() => {})
+  });
+}
 </script>
 
-<style lang="scss">
-
-</style>
+<style lang="scss" scoped></style>

+ 32 - 0
src/pagesOther/pages/test-center/holland/result.vue

@@ -0,0 +1,32 @@
+<template>
+    <ie-page>
+        <ie-navbar title="霍兰德职业兴趣测评"/>
+        <interest-result :holl-info="hollandData" :series-data="chartData" />
+    </ie-page>
+</template>
+
+<script setup lang="ts">
+import {useTransferPage} from "@/hooks/useTransferPage";
+import {hollDetail} from "@/api/modules/test-center";
+import {HollandEntity} from "@/types/test-center";
+import InterestResult from "@/pagesOther/pages/test-center/holland/components/interest-result.vue";
+
+const {prevData} = useTransferPage()
+const hollandData = ref<HollandEntity>({} as HollandEntity)
+const chartData = ref<number[]>([])
+
+onMounted(async () => {
+    if (prevData.value.code) {
+        const {data} = await hollDetail({code: prevData.value.code})
+        const {scorer, scorea, scorei, scores, scoree, scorec} = data
+        hollandData.value = data
+        chartData.value = [scorer, scorea, scorei, scores, scoree, scorec]
+    }
+})
+
+onPageScroll(() => {})
+</script>
+
+<style lang="scss">
+
+</style>

+ 13 - 0
src/pagesOther/pages/test-center/holland/test.vue

@@ -0,0 +1,13 @@
+<template>
+  <view>
+    
+  </view>
+</template>
+
+<script setup>
+  
+</script>
+
+<style lang="scss">
+
+</style>

+ 70 - 0
src/pagesOther/pages/test-center/index/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <ie-page bg-color="var(--back)">
+    <ie-navbar title="我的测评" />
+    <view class="p-30">
+      <view v-for="item in list" :key="item.type" class="item" :style="{ backgroundColor: item.bgColor }">
+        <view class="flex items-center gap-30 p-30">
+          <ie-image :src="item.image" custom-class="w-150 h-150 flex-shrink-0" />
+          <view>
+            <view class="text-28 font-medium text-fore-title">{{ item.title }}</view>
+            <view class="mt-10 text-24 text-fore-tip">{{ item.description }}</view>
+          </view>
+        </view>
+        <view class="bg-white px-20 py-20 flex items-center justify-between">
+          <view class="flex items-center text-primary text-26 gap-6" @click="handleHistory(item.type)">
+            <uv-icon name="list-dot" size="18" color="var(--primary-color)" />
+            <text>历史记录</text>
+          </view>
+          <view class="flex items-center text-primary text-26 gap-6" @click="handleTest(item.homePage)">
+            <text>点击测评</text>
+            <uv-icon name="arrow-right" size="14" color="var(--primary-color)" />
+          </view>
+        </view>
+      </view>
+    </view>
+  </ie-page>
+</template>
+
+<script lang="ts" setup>
+import IconHolland from '@/pagesOther/static/image/holland.png';
+import IconMbti from '@/pagesOther/static/image/mbti.png';
+import { useTransferPage } from '@/hooks/useTransferPage';
+const { transferTo, routes } = useTransferPage();
+
+const list = [
+  {
+    title: '专业倾向测评',
+    description: 'Holland测评是一种基于职业兴趣的测评工具,根据被测者对六种职业兴趣类型的倾向性,提供对应的职业建议。',
+    type: 'holland',
+    image: IconHolland,
+    bgColor: '#dcedfc',
+    homePage: routes.pageHolland
+  },
+  {
+    title: '职业性格测评',
+    description: 'MBTI测评是一种基于人格类型的测评工具,根据被测者对四种人格维度的偏好程度,判断其人格类型并提供相关建议。',
+    type: 'mbti',
+    image: IconMbti,
+    bgColor: '#dbe2fb',
+    homePage: routes.pageMbti
+  }
+]
+
+const handleHistory = (type: string) => {
+  transferTo(routes.testCenterList, {
+    data: {
+      type
+    }
+  });
+}
+
+const handleTest = (homePage: string) => {
+  transferTo(homePage);
+}
+</script>
+
+<style lang="scss" scoped>
+.item+.item {
+  margin-top: 30rpx;
+}
+</style>

+ 48 - 9
src/pagesOther/pages/test-center/mbti/mbti.vue

@@ -1,17 +1,56 @@
 <template>
-    <view>
-
+  <ie-page bg-color="var(--back)">
+    <ie-navbar title="MBTI职业性格测评" />
+    <view class="p-30">
+      <view class="text-28 indent-[2em]">MBTI(Myers-Briggs Type Indicator)是一种全球广泛应用的性格评估工具,根据荣格心理学理论,将人类性格分为16种类型。通过对
+        内外向(I/E)、感知/直觉(S/N)、思维/情感(T/F)、判断/感知(J/P) 四个维度的分析,MBTI 帮助你深刻认识自己的性格倾向和行为模式。
+      </view>
+      <view class="mt-50 mb-10 text-28 font-semibold">
+        为什么需要 MBTI 测评?
+      </view>
+      <view class="text-28 flex flex-col gap-20">
+        <view class="">
+          <text class="">发现你的天赋:</text>
+          <text class="text-fore-tip">了解自己的性格特点和潜在优势,找到适合的学习方法和职业领域。</text>
+        </view>
+        <view class="">
+          <text class="">规划职业未来:</text>
+          <text class="text-fore-tip">在面对专业选择、实习和就业时,更有方向感和信心。</text>
+        </view>
+        <view class="">
+          <text class="">提升沟通能力:</text>
+          <text class="text-fore-tip">更好地理解自己和他人的行为模式,提升人际交往与团队合作能力。</text>
+        </view>
+        <view class="">
+          <text class="">避开盲目选择:</text>
+          <text class="text-fore-tip">不再随波逐流,让你的每一步决策都符合自己的性格特点。</text>
+        </view>
+      </view>
     </view>
+    <ie-safe-toolbar :height="130" :shadow="false" bgColor="transparent">
+      <view class="px-40 py-30 flex flex-col gap-20">
+        <uv-button type="primary" shape="circle" @click="handleTest">开始测评</uv-button>
+        <uv-button type="primary" plain shape="circle" @click="handleResult">测评结果</uv-button>
+      </view>
+    </ie-safe-toolbar>
+  </ie-page>
 </template>
 
-<script>
-export default {
-    data() {
-        return {};
+<script lang="ts" setup>
+import { useTransferPage } from '@/hooks/useTransferPage';
+const { transferTo, routes } = useTransferPage();
+
+const handleTest = () => {
+  transferTo(routes.pageMbtiTest);
+}
+
+const handleResult = () => {
+  transferTo(routes.testCenterList, {
+    data: {
+      type: 'mbti'
     }
+  });
 }
 </script>
 
-<style lang="scss">
-
-</style>
+<style lang="scss" scoped></style>

+ 13 - 0
src/pagesOther/pages/test-center/mbti/result.vue

@@ -0,0 +1,13 @@
+<template>
+  <view>
+    
+  </view>
+</template>
+
+<script setup>
+  
+</script>
+
+<style lang="scss">
+
+</style>

+ 13 - 0
src/pagesOther/pages/test-center/mbti/test.vue

@@ -0,0 +1,13 @@
+<template>
+  <view>
+    
+  </view>
+</template>
+
+<script setup>
+  
+</script>
+
+<style lang="scss">
+
+</style>

binární
src/pagesOther/static/image/holland-test.png


binární
src/pagesOther/static/image/holland.png


binární
src/pagesOther/static/image/mbti.png


+ 1 - 1
src/uni_modules/uv-button/components/uv-button/uv-button.vue

@@ -341,7 +341,7 @@ $show-reset-button: 1;
 @import "./nvue.scss";
 /* #endif */
 
-$uv-button-uv-button-height: 40px !default;
+$uv-button-uv-button-height: 44px !default;
 $uv-button-text-font-size: 15px !default;
 $uv-button-loading-text-font-size: 15px !default;
 $uv-button-loading-text-margin-left: 4px !default;