初始化
This commit is contained in:
commit
5ca705b074
|
|
@ -0,0 +1,21 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<script>
|
||||||
|
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||||
|
CSS.supports('top: constant(a)'))
|
||||||
|
document.write(
|
||||||
|
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||||
|
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||||
|
</script>
|
||||||
|
<title></title>
|
||||||
|
<!--preload-links-->
|
||||||
|
<!--app-context-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"><!--app-html--></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,67 @@
|
||||||
|
{
|
||||||
|
"name": "uni-preset-vue",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"dev:custom": "uni -p",
|
||||||
|
"dev:h5": "uni",
|
||||||
|
"dev:h5:ssr": "uni --ssr",
|
||||||
|
"dev:mp-alipay": "uni -p mp-alipay",
|
||||||
|
"dev:mp-baidu": "uni -p mp-baidu",
|
||||||
|
"dev:mp-jd": "uni -p mp-jd",
|
||||||
|
"dev:mp-kuaishou": "uni -p mp-kuaishou",
|
||||||
|
"dev:mp-lark": "uni -p mp-lark",
|
||||||
|
"dev:mp-qq": "uni -p mp-qq",
|
||||||
|
"dev:mp-toutiao": "uni -p mp-toutiao",
|
||||||
|
"dev:mp-weixin": "uni -p mp-weixin",
|
||||||
|
"dev:mp-xhs": "uni -p mp-xhs",
|
||||||
|
"dev:quickapp-webview": "uni -p quickapp-webview",
|
||||||
|
"dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
|
||||||
|
"dev:quickapp-webview-union": "uni -p quickapp-webview-union",
|
||||||
|
"build:custom": "uni build -p",
|
||||||
|
"build:h5": "uni build",
|
||||||
|
"build:h5:ssr": "uni build --ssr",
|
||||||
|
"build:mp-alipay": "uni build -p mp-alipay",
|
||||||
|
"build:mp-baidu": "uni build -p mp-baidu",
|
||||||
|
"build:mp-jd": "uni build -p mp-jd",
|
||||||
|
"build:mp-kuaishou": "uni build -p mp-kuaishou",
|
||||||
|
"build:mp-lark": "uni build -p mp-lark",
|
||||||
|
"build:mp-qq": "uni build -p mp-qq",
|
||||||
|
"build:mp-toutiao": "uni build -p mp-toutiao",
|
||||||
|
"build:mp-weixin": "uni build -p mp-weixin",
|
||||||
|
"build:mp-xhs": "uni build -p mp-xhs",
|
||||||
|
"build:quickapp-webview": "uni build -p quickapp-webview",
|
||||||
|
"build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
|
||||||
|
"build:quickapp-webview-union": "uni build -p quickapp-webview-union"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@dcloudio/uni-app": "3.0.0-4040520250104002",
|
||||||
|
"@dcloudio/uni-app-harmony": "3.0.0-4040520250104002",
|
||||||
|
"@dcloudio/uni-app-plus": "3.0.0-4040520250104002",
|
||||||
|
"@dcloudio/uni-components": "3.0.0-4040520250104002",
|
||||||
|
"@dcloudio/uni-h5": "3.0.0-4040520250104002",
|
||||||
|
"@dcloudio/uni-mp-alipay": "3.0.0-4040520250104002",
|
||||||
|
"@dcloudio/uni-mp-baidu": "3.0.0-4040520250104002",
|
||||||
|
"@dcloudio/uni-mp-jd": "3.0.0-4040520250104002",
|
||||||
|
"@dcloudio/uni-mp-kuaishou": "3.0.0-4040520250104002",
|
||||||
|
"@dcloudio/uni-mp-lark": "3.0.0-4040520250104002",
|
||||||
|
"@dcloudio/uni-mp-qq": "3.0.0-4040520250104002",
|
||||||
|
"@dcloudio/uni-mp-toutiao": "3.0.0-4040520250104002",
|
||||||
|
"@dcloudio/uni-mp-weixin": "3.0.0-4040520250104002",
|
||||||
|
"@dcloudio/uni-mp-xhs": "3.0.0-4040520250104002",
|
||||||
|
"@dcloudio/uni-quickapp-webview": "3.0.0-4040520250104002",
|
||||||
|
"axios": "^1.8.4",
|
||||||
|
"vue": "^3.4.21",
|
||||||
|
"vue-i18n": "^9.1.9",
|
||||||
|
"vue-router": "^4.5.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@dcloudio/types": "^3.4.8",
|
||||||
|
"@dcloudio/uni-automator": "3.0.0-4040520250104002",
|
||||||
|
"@dcloudio/uni-cli-shared": "3.0.0-4040520250104002",
|
||||||
|
"@dcloudio/uni-stacktracey": "3.0.0-4040520250104002",
|
||||||
|
"@dcloudio/vite-plugin-uni": "3.0.0-4040520250104002",
|
||||||
|
"@dcloudio/vue-cli-plugin-uni": "^2.0.2-4040520250103001",
|
||||||
|
"@vue/runtime-core": "^3.4.21",
|
||||||
|
"vite": "5.2.8"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
/// <reference types='@dcloudio/types' />
|
||||||
|
import 'vue'
|
||||||
|
|
||||||
|
declare module '@vue/runtime-core' {
|
||||||
|
type Hooks = App.AppInstance & Page.PageInstance;
|
||||||
|
|
||||||
|
interface ComponentCustomOptions extends Hooks {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
onLaunch: function () {
|
||||||
|
console.log('App Launch')
|
||||||
|
},
|
||||||
|
onShow: function () {
|
||||||
|
console.log('App Show')
|
||||||
|
},
|
||||||
|
onHide: function () {
|
||||||
|
console.log('App Hide')
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/*每个页面公共css */
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import {
|
||||||
|
createSSRApp
|
||||||
|
} from "vue";
|
||||||
|
import App from "./App.vue";
|
||||||
|
export function createApp() {
|
||||||
|
const app = createSSRApp(App);
|
||||||
|
return {
|
||||||
|
app,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
{
|
||||||
|
"name" : "",
|
||||||
|
"appid" : "",
|
||||||
|
"description" : "",
|
||||||
|
"versionName" : "1.0.0",
|
||||||
|
"versionCode" : "100",
|
||||||
|
"transformPx" : false,
|
||||||
|
/* 5+App特有相关 */
|
||||||
|
"app-plus" : {
|
||||||
|
"usingComponents" : true,
|
||||||
|
"nvueStyleCompiler" : "uni-app",
|
||||||
|
"compilerVersion" : 3,
|
||||||
|
"splashscreen" : {
|
||||||
|
"alwaysShowBeforeRender" : true,
|
||||||
|
"waiting" : true,
|
||||||
|
"autoclose" : true,
|
||||||
|
"delay" : 0
|
||||||
|
},
|
||||||
|
/* 模块配置 */
|
||||||
|
"modules" : {},
|
||||||
|
/* 应用发布信息 */
|
||||||
|
"distribute" : {
|
||||||
|
/* android打包配置 */
|
||||||
|
"android" : {
|
||||||
|
"permissions" : [
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
/* ios打包配置 */
|
||||||
|
"ios" : {},
|
||||||
|
/* SDK配置 */
|
||||||
|
"sdkConfigs" : {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/* 快应用特有相关 */
|
||||||
|
"quickapp" : {},
|
||||||
|
/* 小程序特有相关 */
|
||||||
|
"mp-weixin" : {
|
||||||
|
"appid" : "",
|
||||||
|
"setting" : {
|
||||||
|
"urlCheck" : false
|
||||||
|
},
|
||||||
|
"usingComponents" : true
|
||||||
|
},
|
||||||
|
"mp-alipay" : {
|
||||||
|
"usingComponents" : true
|
||||||
|
},
|
||||||
|
"mp-baidu" : {
|
||||||
|
"usingComponents" : true
|
||||||
|
},
|
||||||
|
"mp-toutiao" : {
|
||||||
|
"usingComponents" : true
|
||||||
|
},
|
||||||
|
"uniStatistics": {
|
||||||
|
"enable": false
|
||||||
|
},
|
||||||
|
"vueVersion" : "3"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
{
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "pages/Homepage/Homepage",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": " "
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/Profession/profession",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "职业测试"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/protest/protest",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "职业开始测试"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/proresult/proresult",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "测试结果"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/index/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "MBTI性格测试"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/test/test",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "开始测试"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/result/result",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "测试结果"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"globalStyle": {
|
||||||
|
"navigationBarTextStyle": "black",
|
||||||
|
"navigationBarTitleText": "MBTI性格测试",
|
||||||
|
"navigationBarBackgroundColor": "#F8F8F8",
|
||||||
|
"backgroundColor": "#F8F8F8"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
<template>
|
||||||
|
<div class="button-container">
|
||||||
|
<button class="custom-button" @click="goToPersonalityTest">性格测试</button>
|
||||||
|
<button class="custom-button" @click="goToProfessionTest">职业测试</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
goToPersonalityTest() {
|
||||||
|
const targetUrl = '/pages/index/index'; // 目标路径
|
||||||
|
console.log('目标路径：', targetUrl); // 打印目标路径，确保路径正确
|
||||||
|
try {
|
||||||
|
// 使用 navigateTo 进行跳转
|
||||||
|
uni.navigateTo ({
|
||||||
|
url: targetUrl
|
||||||
|
});
|
||||||
|
console.log('跳转成功');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('跳转失败：', error);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('111');
|
||||||
|
},
|
||||||
|
goToProfessionTest() {
|
||||||
|
console.log('职业测试按钮被点击了'); // 打印调试信息
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/Profession/profession' // 跳转到职业测试页面
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.button-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-button {
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 18px 0; /* 适当增加上下内边距让按钮在垂直方向更饱满 */
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-image: url('../../static/homepage-background.jpg'); /* 使用示例图片，可替换为实际背景图URL */
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
color: white;
|
||||||
|
font-size: 20px; /* 增大字体大小 */
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
width: 80%; /* 增大按钮宽度，这里设置为容器宽度的80% */
|
||||||
|
max-width: 400px; /* 限制最大宽度，避免在大屏幕上过宽 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-button:hover {
|
||||||
|
transform: scale(1.05); /* 鼠标悬停时按钮稍微放大 */
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 鼠标悬停时添加阴影效果 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,138 @@
|
||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<view class="header">
|
||||||
|
<text class="title">职业倾向测试</text>
|
||||||
|
<text class="subtitle">探索适合你的职业方向</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="description">
|
||||||
|
<text>本职业倾向测试将帮助你了解自己适合的职业类型。本次测试共有60道题，约需15分钟，请选择开始测试：</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="test-options">
|
||||||
|
<view class="test-card" @click="startTest">
|
||||||
|
<text class="card-title">开始测试</text>
|
||||||
|
<text class="card-subtitle">60题 · 约15分钟</text>
|
||||||
|
<text class="card-description">全面了解你的职业倾向</text>
|
||||||
|
<button class="start-button primary">开始测试</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
title: '职业倾向测试'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
startTest() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/protest/protest`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 40rpx;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 48rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #666;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.test-options {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 30rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.test-card {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 40rpx;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-subtitle {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-description {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #888;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-button {
|
||||||
|
width: 80%;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
color: #333;
|
||||||
|
font-size: 28rpx;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-button.primary {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.test-card:hover {
|
||||||
|
transform: translateY(-2rpx);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,152 @@
|
||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<view class="header">
|
||||||
|
<text class="title">MBTI性格测试</text>
|
||||||
|
<text class="subtitle">了解你的性格类型</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="description">
|
||||||
|
<text>MBTI（迈尔斯-布里格斯类型指标）是一个帮助你了解自己性格特征的测试工具。请选择适合您的测试版本：</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="test-options">
|
||||||
|
<view class="test-card" @click="startTest('simple')">
|
||||||
|
<text class="card-title">简单版</text>
|
||||||
|
<text class="card-subtitle">40题 · 约10分钟</text>
|
||||||
|
<text class="card-description">适合快速了解自己的性格类型</text>
|
||||||
|
<button class="start-button primary">开始测试</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="test-card" @click="startTest('detailed')">
|
||||||
|
<text class="card-title">详细版</text>
|
||||||
|
<text class="card-subtitle">80题 · 约20分钟</text>
|
||||||
|
<text class="card-description">提供更准确的性格分析结果</text>
|
||||||
|
<button class="start-button">开始测试</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="test-card" @click="startTest('full')">
|
||||||
|
<text class="card-title">超详细版</text>
|
||||||
|
<text class="card-subtitle">120题 · 约30分钟</text>
|
||||||
|
<text class="card-description">最全面的性格测试体验</text>
|
||||||
|
<button class="start-button">开始测试</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
title: 'MBTI性格测试'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
startTest(type) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/test/test?type=${type}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 40rpx;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 48rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #666;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.test-options {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 30rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.test-card {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 40rpx;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-subtitle {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-description {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #888;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-button {
|
||||||
|
width: 80%;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
color: #333;
|
||||||
|
font-size: 28rpx;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-button.primary {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.test-card:hover {
|
||||||
|
transform: translateY(-2rpx);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,314 @@
|
||||||
|
<template>
|
||||||
|
<view class="result-container">
|
||||||
|
<view v-if="loading" class="loading">
|
||||||
|
<text>加载中...</text>
|
||||||
|
</view>
|
||||||
|
<view v-else class="result-content">
|
||||||
|
<view class="result-header">
|
||||||
|
<text class="result-title">您的职业类型是</text>
|
||||||
|
<text class="mbti-type">{{ result.primaryType.cateName }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="scores-section">
|
||||||
|
<view class="score-item" v-for="(score, category) in result.scores" :key="category">
|
||||||
|
<text class="category-label">{{ category }}：</text>
|
||||||
|
<text class="score-value">{{ score }} 分</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="report-section">
|
||||||
|
<text class="report-title">职业类型描述</text>
|
||||||
|
<rich-text :nodes="result.primaryType.typeDesc"></rich-text>
|
||||||
|
</view>
|
||||||
|
<view class="button-group">
|
||||||
|
<button class="share-button" @click="shareResult">分享结果</button>
|
||||||
|
<button class="export-button" @click="exportPDF">导出PDF</button>
|
||||||
|
<button class="restart-button" @click="restartTest">重新测试</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: true,
|
||||||
|
result: {
|
||||||
|
primaryType: {
|
||||||
|
cateName: '',
|
||||||
|
typeDesc: ''
|
||||||
|
},
|
||||||
|
scores: {}
|
||||||
|
},
|
||||||
|
answers: {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
formattedReport() {
|
||||||
|
return this.result.primaryType.typeDesc;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.answers) {
|
||||||
|
this.answers = JSON.parse(options.answers);
|
||||||
|
this.fetchResult();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onMounted() {
|
||||||
|
const loadScript = (src) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const script = document.createElement('script');
|
||||||
|
script.src = src;
|
||||||
|
script.onload = resolve;
|
||||||
|
script.onerror = reject;
|
||||||
|
document.head.appendChild(script);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
Promise.all([
|
||||||
|
loadScript('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js'),
|
||||||
|
loadScript('https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js')
|
||||||
|
]).catch((error) => {
|
||||||
|
console.error('加载CDN资源失败:', error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async fetchResult() {
|
||||||
|
try {
|
||||||
|
console.log("即将发送请求，answers:", this.answers);
|
||||||
|
const response = await uni.request({
|
||||||
|
url: `http://localhost:8080/api/results`,
|
||||||
|
method: 'POST',
|
||||||
|
data: { answers: this.answers },
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('响应状态码:', response.statusCode);
|
||||||
|
console.log('响应数据:', response.data);
|
||||||
|
|
||||||
|
if (response.statusCode === 200 && response.data.code === 0) {
|
||||||
|
this.result = response.data.data;
|
||||||
|
} else {
|
||||||
|
let errorMessage = '获取结果失败';
|
||||||
|
if (response.data && response.data.error) {
|
||||||
|
errorMessage = response.data.error;
|
||||||
|
}
|
||||||
|
throw new Error(errorMessage);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
uni.showToast({
|
||||||
|
title: `获取结果失败: ${error.message}`,
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
shareResult() {
|
||||||
|
uni.showToast({
|
||||||
|
title: '分享功能开发中',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
restartTest() {
|
||||||
|
uni.redirectTo({
|
||||||
|
url: '/pages/protest/protest'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async exportPDF() {
|
||||||
|
try {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '正在生成PDF...'
|
||||||
|
});
|
||||||
|
|
||||||
|
const element = document.querySelector('.result-content');
|
||||||
|
const canvas = await window.html2canvas(element, {
|
||||||
|
scale: 2,
|
||||||
|
useCORS: true,
|
||||||
|
logging: false
|
||||||
|
});
|
||||||
|
|
||||||
|
const { jsPDF } = window.jspdf;
|
||||||
|
const pdf = new jsPDF({
|
||||||
|
orientation: 'portrait',
|
||||||
|
unit: 'mm',
|
||||||
|
format: 'a4'
|
||||||
|
});
|
||||||
|
|
||||||
|
const imgWidth = 210;
|
||||||
|
const pageHeight = 297;
|
||||||
|
const imgHeight = canvas.height * imgWidth / canvas.width;
|
||||||
|
|
||||||
|
const imgData = canvas.toDataURL('image/jpeg', 1.0);
|
||||||
|
pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);
|
||||||
|
|
||||||
|
const fileName = `职业测试结果_${this.result.primaryType.cateName}_${new Date().toLocaleDateString()}.pdf`;
|
||||||
|
|
||||||
|
pdf.save(fileName);
|
||||||
|
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: 'PDF导出成功',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('PDF导出失败:', error);
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: 'PDF导出失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.result-container {
|
||||||
|
padding: 30rpx;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: rgba(255, 255, 255, 0.95);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-content {
|
||||||
|
max-width: 800rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 50rpx;
|
||||||
|
animation: fadeIn 0.8s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mbti-type {
|
||||||
|
font-size: 72rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #007AFF;
|
||||||
|
display: block;
|
||||||
|
letter-spacing: 4rpx;
|
||||||
|
text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scores-section {
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 40rpx;
|
||||||
|
margin: 40rpx 0;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||||
|
animation: slideUp 0.8s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-label {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-value {
|
||||||
|
color: #007AFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-section {
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 40rpx;
|
||||||
|
margin: 40rpx 0;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||||
|
animation: slideUp 1s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20rpx;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
animation: slideUp 1.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-button,
|
||||||
|
.restart-button,
|
||||||
|
.export-button {
|
||||||
|
width: 100%;
|
||||||
|
padding: 25rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
border: none;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-button {
|
||||||
|
background: linear-gradient(135deg, #007AFF, #0056b3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.restart-button {
|
||||||
|
background: linear-gradient(135deg, #34C759, #28a745);
|
||||||
|
}
|
||||||
|
|
||||||
|
.export-button {
|
||||||
|
background: linear-gradient(135deg, #9254de, #722ed1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-button:active,
|
||||||
|
.restart-button:active,
|
||||||
|
.export-button:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30rpx);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,305 @@
|
||||||
|
<template>
|
||||||
|
<view class="test-container">
|
||||||
|
<view class="progress-bar">
|
||||||
|
<view class="progress" :style="{ width: progress + '%' }"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="loading" class="loading">
|
||||||
|
<text>加载中...</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-else-if="questions.length === 0" class="no-questions">
|
||||||
|
<text>未获取到题目，请稍后重试。</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="question-card" v-else>
|
||||||
|
<text class="question-number">问题 {{ currentIndex + 1 }}/60</text>
|
||||||
|
<text class="question-text">{{ currentQuestion.title }}</text>
|
||||||
|
|
||||||
|
<view class="options">
|
||||||
|
<button
|
||||||
|
class="option-button"
|
||||||
|
@click="selectOption(true)"
|
||||||
|
:class="{ selected: answers[currentQuestion.cateKey] === true }"
|
||||||
|
>
|
||||||
|
是
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="option-button"
|
||||||
|
@click="selectOption(false)"
|
||||||
|
:class="{ selected: answers[currentQuestion.cateKey] === false }"
|
||||||
|
>
|
||||||
|
不是
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="navigation-buttons">
|
||||||
|
<button class="nav-button" @click="previousQuestion" :disabled="currentIndex === 0">上一题</button>
|
||||||
|
<button
|
||||||
|
v-if="currentIndex === 59"
|
||||||
|
class="nav-button submit"
|
||||||
|
@click="submitTest"
|
||||||
|
:disabled="!this.currentQuestion ||!this.answers[this.currentQuestion.cateKey]"
|
||||||
|
>提交测试</button>
|
||||||
|
<button
|
||||||
|
v-else
|
||||||
|
class="nav-button next"
|
||||||
|
@click="nextQuestion"
|
||||||
|
:disabled="!this.currentQuestion ||!this.answers[this.currentQuestion.cateKey]"
|
||||||
|
>下一题</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentIndex: 0,
|
||||||
|
answers: {},
|
||||||
|
questions: [],
|
||||||
|
loading: true,
|
||||||
|
_testStartTime: Date.now()
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
progress() {
|
||||||
|
return ((this.currentIndex + 1) / 60) * 100;
|
||||||
|
},
|
||||||
|
currentQuestion() {
|
||||||
|
if (this.questions.length > 0 && this.currentIndex < this.questions.length) {
|
||||||
|
return this.questions[this.currentIndex];
|
||||||
|
}
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.fetchQuestions();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async fetchQuestions() {
|
||||||
|
try {
|
||||||
|
const response = await uni.request({
|
||||||
|
url: 'http://localhost:8080/api/questionsH',
|
||||||
|
method: 'GET'
|
||||||
|
});
|
||||||
|
if (typeof response.data === 'object' && response.data!== null && Array.isArray(response.data.data)) {
|
||||||
|
this.questions = response.data.data.slice(0, 60);
|
||||||
|
const validQuestions = this.questions.filter(question => question.hasOwnProperty('cateKey'));
|
||||||
|
if (validQuestions.length!== this.questions.length) {
|
||||||
|
console.warn('部分问题缺少 cateKey 属性，已过滤无效问题');
|
||||||
|
}
|
||||||
|
this.questions = validQuestions;
|
||||||
|
|
||||||
|
this.questions.forEach(question => {
|
||||||
|
const cateKey = question.cateKey;
|
||||||
|
if (!this.answers[cateKey]) {
|
||||||
|
this.answers[cateKey] = 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
throw new Error(`获取题目失败: 数据格式不正确，response.data: ${JSON.stringify(response.data)}`);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取题目出错:', error);
|
||||||
|
this.handleError('获取题目失败', error);
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selectOption(value) {
|
||||||
|
const currentQuestion = this.currentQuestion;
|
||||||
|
if (currentQuestion && currentQuestion.hasOwnProperty('cateKey')) {
|
||||||
|
const cateKey = currentQuestion.cateKey;
|
||||||
|
if (value) {
|
||||||
|
this.answers[cateKey]++;
|
||||||
|
}
|
||||||
|
if (this.currentIndex < 59) {
|
||||||
|
this.nextQuestion();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
nextQuestion() {
|
||||||
|
if (this.currentIndex < 59) {
|
||||||
|
this.currentIndex++;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
previousQuestion() {
|
||||||
|
if (this.currentIndex > 0) {
|
||||||
|
this.currentIndex--;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async submitTest() {
|
||||||
|
try {
|
||||||
|
await this.showLoadingDialog();
|
||||||
|
const response = await this.submitAnswers();
|
||||||
|
await this.handleSubmitResponse(response);
|
||||||
|
} catch (error) {
|
||||||
|
this.handleError('提交失败', error);
|
||||||
|
} finally {
|
||||||
|
uni.hideLoading();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showLoadingDialog() {
|
||||||
|
return uni.showLoading({
|
||||||
|
title: 'AI正在深入分析您的答案\n请耐心等待（约1分钟）',
|
||||||
|
mask: true
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async submitAnswers() {
|
||||||
|
const requestData = {
|
||||||
|
answers: this.answers
|
||||||
|
};
|
||||||
|
const response = await uni.request({
|
||||||
|
url: 'http://localhost:8080/api/results',
|
||||||
|
method: 'POST',
|
||||||
|
timeout: 600000,
|
||||||
|
data: requestData,
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return response;
|
||||||
|
},
|
||||||
|
async handleSubmitResponse(response) {
|
||||||
|
if (response.statusCode === 200 && response.data?.code === 0) {
|
||||||
|
const { resultCode, scores, primaryType } = response.data.data;
|
||||||
|
// 这里可以根据需要对结果进行处理，例如存储到本地或跳转到结果页面
|
||||||
|
console.log('结果代码:', resultCode);
|
||||||
|
console.log('分数:', scores);
|
||||||
|
console.log('主要类型:', primaryType);
|
||||||
|
|
||||||
|
// 跳转到结果页面，将 answers 作为参数传递
|
||||||
|
await this.navigateToResult();
|
||||||
|
} else {
|
||||||
|
throw new Error(response.data?.message || '提交失败，未获取到有效结果');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async navigateToResult() {
|
||||||
|
try {
|
||||||
|
await uni.navigateTo({
|
||||||
|
url: `/pages/proresult/proresult?answers=${JSON.stringify(this.answers)}`
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
this.handleError('跳转结果页面失败', err);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleError(message, error) {
|
||||||
|
console.error(message, error);
|
||||||
|
uni.showToast({
|
||||||
|
title: message,
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.test-container {
|
||||||
|
padding: 20px;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
height: 4px;
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
height: 100%;
|
||||||
|
background-color: #4CAF50;
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-card {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-number {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-text {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-button {
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: none;
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
color: #333;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
min-width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-button.selected {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 40px;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 20px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button {
|
||||||
|
flex: 1;
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: none;
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
minimum-width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button:disabled {
|
||||||
|
background-color: #ccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button.submit {
|
||||||
|
background-color: #2196F3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
image: url('loading.gif');
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-questions {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,341 @@
|
||||||
|
<template>
|
||||||
|
<view class="result-container">
|
||||||
|
<view v-if="loading" class="loading">
|
||||||
|
<text>加载中...</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-else class="result-content">
|
||||||
|
<view class="result-header">
|
||||||
|
<text class="result-title">您的MBTI类型是</text>
|
||||||
|
<text class="mbti-type">{{ result.type }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="dimensions-section">
|
||||||
|
<view class="dimension-item" v-for="(dimension, index) in result.dimensions" :key="index">
|
||||||
|
<view class="dimension-labels">
|
||||||
|
<text class="dimension-label">{{dimension.left}}</text>
|
||||||
|
<text class="dimension-label">{{dimension.right}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="dimension-bar">
|
||||||
|
<view class="dimension-progress left" :style="{ width: dimension.rightValue + '%' }"></view>
|
||||||
|
<view class="dimension-progress right" :style="{ width: dimension.leftValue + '%' }"></view>
|
||||||
|
</view>
|
||||||
|
<view class="dimension-scores">
|
||||||
|
<text class="score-text">{{dimension.rightValue}}%</text>
|
||||||
|
<text class="score-text">{{dimension.leftValue}}%</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="report-section">
|
||||||
|
<rich-text :nodes="formattedReport"></rich-text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="button-group">
|
||||||
|
<button class="share-button" @click="shareResult">分享结果</button>
|
||||||
|
<button class="export-button" @click="exportPDF">导出PDF</button>
|
||||||
|
<button class="restart-button" @click="restartTest">重新测试</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: true,
|
||||||
|
result: {
|
||||||
|
type: '',
|
||||||
|
dimensions: [
|
||||||
|
{ left: 'E (外向)', right: 'I (内向)', leftValue: 0, rightValue: 0 },
|
||||||
|
{ left: 'S (感觉)', right: 'N (直觉)', leftValue: 0, rightValue: 0 },
|
||||||
|
{ left: 'T (思维)', right: 'F (情感)', leftValue: 0, rightValue: 0 },
|
||||||
|
{ left: 'J (判断)', right: 'P (知觉)', leftValue: 0, rightValue: 0 }
|
||||||
|
],
|
||||||
|
report: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
formattedReport() {
|
||||||
|
return this.result.report;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.id) {
|
||||||
|
this.fetchResult(options.id)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onMounted() {
|
||||||
|
const loadScript = (src) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const script = document.createElement('script')
|
||||||
|
script.src = src
|
||||||
|
script.onload = resolve
|
||||||
|
script.onerror = reject
|
||||||
|
document.head.appendChild(script)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
Promise.all([
|
||||||
|
loadScript('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js'),
|
||||||
|
loadScript('https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js')
|
||||||
|
]).catch(error => {
|
||||||
|
console.error('加载CDN资源失败:', error)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async fetchResult(resultId) {
|
||||||
|
try {
|
||||||
|
const response = await uni.request({
|
||||||
|
url: `http://localhost:8080/api/result/${resultId}`,
|
||||||
|
method: 'GET'
|
||||||
|
})
|
||||||
|
|
||||||
|
if (response.statusCode === 200) {
|
||||||
|
this.result = response.data
|
||||||
|
} else {
|
||||||
|
throw new Error('获取结果失败')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '获取结果失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
shareResult() {
|
||||||
|
uni.showToast({
|
||||||
|
title: '分享功能开发中',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
restartTest() {
|
||||||
|
uni.redirectTo({
|
||||||
|
url: '/pages/test/test'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
async exportPDF() {
|
||||||
|
try {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '正在生成PDF...'
|
||||||
|
});
|
||||||
|
|
||||||
|
const element = document.querySelector('.result-content');
|
||||||
|
const canvas = await window.html2canvas(element, {
|
||||||
|
scale: 2,
|
||||||
|
useCORS: true,
|
||||||
|
logging: false
|
||||||
|
});
|
||||||
|
|
||||||
|
const { jsPDF } = window.jspdf;
|
||||||
|
const pdf = new jsPDF({
|
||||||
|
orientation: 'portrait',
|
||||||
|
unit: 'mm',
|
||||||
|
format: 'a4'
|
||||||
|
});
|
||||||
|
|
||||||
|
const imgWidth = 210;
|
||||||
|
const pageHeight = 297;
|
||||||
|
const imgHeight = canvas.height * imgWidth / canvas.width;
|
||||||
|
|
||||||
|
const imgData = canvas.toDataURL('image/jpeg', 1.0);
|
||||||
|
pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);
|
||||||
|
|
||||||
|
const fileName = `MBTI测试结果_${this.result.type}_${new Date().toLocaleDateString()}.pdf`;
|
||||||
|
|
||||||
|
pdf.save(fileName);
|
||||||
|
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: 'PDF导出成功',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('PDF导出失败:', error);
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: 'PDF导出失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.result-container {
|
||||||
|
padding: 30rpx;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: rgba(255, 255, 255, 0.95);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-content {
|
||||||
|
max-width: 800rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 50rpx;
|
||||||
|
animation: fadeIn 0.8s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mbti-type {
|
||||||
|
font-size: 72rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #007AFF;
|
||||||
|
display: block;
|
||||||
|
letter-spacing: 4rpx;
|
||||||
|
text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dimensions-section {
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 40rpx;
|
||||||
|
margin: 40rpx 0;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||||
|
animation: slideUp 0.8s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dimension-item {
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dimension-labels {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dimension-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dimension-bar {
|
||||||
|
height: 24rpx;
|
||||||
|
background: #f0f0f0;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dimension-progress {
|
||||||
|
height: 100%;
|
||||||
|
transition: width 0.6s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dimension-progress.left {
|
||||||
|
background: linear-gradient(to right, #4CAF50, #81C784);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dimension-progress.right {
|
||||||
|
background: linear-gradient(to right, #2196F3, #64B5F6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dimension-scores {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-section {
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 40rpx;
|
||||||
|
margin: 40rpx 0;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||||
|
animation: slideUp 1s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20rpx;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
animation: slideUp 1.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-button,
|
||||||
|
.restart-button,
|
||||||
|
.export-button {
|
||||||
|
width: 100%;
|
||||||
|
padding: 25rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
border: none;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-button {
|
||||||
|
background: linear-gradient(135deg, #007AFF, #0056b3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.restart-button {
|
||||||
|
background: linear-gradient(135deg, #34C759, #28a745);
|
||||||
|
}
|
||||||
|
|
||||||
|
.export-button {
|
||||||
|
background: linear-gradient(135deg, #9254de, #722ed1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.share-button:active,
|
||||||
|
.restart-button:active,
|
||||||
|
.export-button:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30rpx);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,117 @@
|
||||||
|
.test-container {
|
||||||
|
padding: 30rpx;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 8rpx;
|
||||||
|
background-color: rgba(239, 239, 244, 0.9);
|
||||||
|
border-radius: 8rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
height: 100%;
|
||||||
|
background-color: #007AFF;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading text {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-card {
|
||||||
|
background-color: rgba(255, 255, 255, 0.9);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
-webkit-backdrop-filter: blur(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-number {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-text {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-button {
|
||||||
|
background-color: rgba(239, 239, 244, 0.9);
|
||||||
|
border: none;
|
||||||
|
padding: 24rpx 30rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 28rpx;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
|
||||||
|
width: 100%;
|
||||||
|
min-width: 500rpx;
|
||||||
|
max-width: 600rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-button.selected {
|
||||||
|
background-color: #2196F3;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-button:active {
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 20px;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 40rpx;
|
||||||
|
left: 30rpx;
|
||||||
|
right: 30rpx;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button {
|
||||||
|
padding: 20rpx 40rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
background-color: #007AFF;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
font-size: 28rpx;
|
||||||
|
box-shadow: 0 2rpx 6rpx rgba(0, 122, 255, 0.2);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button:disabled {
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,411 @@
|
||||||
|
<template>
|
||||||
|
<view class="test-container">
|
||||||
|
<view class="progress-bar">
|
||||||
|
<view class="progress" :style="{ width: progress + '%' }"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="loading" class="loading">
|
||||||
|
<text>加载中...</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="question-card" v-else-if="currentQuestion">
|
||||||
|
<text class="question-number">问题 {{ currentIndex + 1 }}/{{ totalQuestions }}</text>
|
||||||
|
<text class="question-text">{{ currentQuestion.text }}</text>
|
||||||
|
|
||||||
|
<view class="options">
|
||||||
|
<view class="option-labels">
|
||||||
|
<text class="extreme-label left">非常不符合</text>
|
||||||
|
<text class="extreme-label right">非常符合</text>
|
||||||
|
</view>
|
||||||
|
<view class="option-circles">
|
||||||
|
<view
|
||||||
|
class="option-circle"
|
||||||
|
v-for="value in 7"
|
||||||
|
:key="value"
|
||||||
|
@click="selectOption(value)"
|
||||||
|
:class="{ selected: answers[currentIndex] === value }"
|
||||||
|
:style="{ transform: `scale(${0.8 + value * 0.05})` }"
|
||||||
|
>
|
||||||
|
<text class="option-value">{{ value }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="option-description">
|
||||||
|
<text v-if="answers[currentIndex]">您的选择是：{{ getOptionLabel(answers[currentIndex]) }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="navigation-buttons">
|
||||||
|
<button class="nav-button" @click="previousQuestion" :disabled="currentIndex === 0">上一题</button>
|
||||||
|
<button
|
||||||
|
v-if="currentIndex === totalQuestions - 1"
|
||||||
|
class="nav-button submit"
|
||||||
|
@click="submitTest"
|
||||||
|
:disabled="answers[currentIndex] === undefined"
|
||||||
|
>提交测试</button>
|
||||||
|
<button
|
||||||
|
v-else
|
||||||
|
class="nav-button next"
|
||||||
|
@click="nextQuestion"
|
||||||
|
:disabled="answers[currentIndex] === undefined"
|
||||||
|
>下一题</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import './test.css';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentIndex: 0,
|
||||||
|
answers: [],
|
||||||
|
questions: [],
|
||||||
|
loading: true,
|
||||||
|
_testStartTime: Date.now()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
totalQuestions() {
|
||||||
|
return this.questions.length
|
||||||
|
},
|
||||||
|
currentQuestion() {
|
||||||
|
return this.questions[this.currentIndex]
|
||||||
|
},
|
||||||
|
progress() {
|
||||||
|
return (this.currentIndex / this.totalQuestions) * 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
this.testType = options.type || 'simple'
|
||||||
|
this.fetchQuestions()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async fetchQuestions() {
|
||||||
|
try {
|
||||||
|
const response = await uni.request({
|
||||||
|
url: 'http://localhost:8080/api/questions',
|
||||||
|
method: 'GET',
|
||||||
|
data: {
|
||||||
|
type: this.testType
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (response.statusCode === 200 && Array.isArray(response.data)) {
|
||||||
|
this.questions = this.formatQuestions(response.data)
|
||||||
|
this.initializeAnswers()
|
||||||
|
} else {
|
||||||
|
throw new Error(`获取题目失败: ${response.statusCode}`)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
this.handleError('获取题目失败', error)
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
formatQuestions(data) {
|
||||||
|
return data.map(question => ({
|
||||||
|
text: question.question || '',
|
||||||
|
dimension: question.dimension,
|
||||||
|
direction: question.direction
|
||||||
|
}))
|
||||||
|
},
|
||||||
|
getOptionLabel(value) {
|
||||||
|
switch(value) {
|
||||||
|
case 1: return '非常不符合'
|
||||||
|
case 2: return '较为不符合'
|
||||||
|
case 3: return '稍微不符合'
|
||||||
|
case 4: return '中立'
|
||||||
|
case 5: return '稍微符合'
|
||||||
|
case 6: return '较为符合'
|
||||||
|
case 7: return '非常符合'
|
||||||
|
default: return ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initializeAnswers() {
|
||||||
|
this.answers = new Array(this.totalQuestions).fill(undefined)
|
||||||
|
},
|
||||||
|
selectOption(value) {
|
||||||
|
try {
|
||||||
|
this.answers[this.currentIndex] = value
|
||||||
|
// 直接跳转到下一题，但不在最后一题时跳转
|
||||||
|
if (this.currentIndex < this.totalQuestions - 1) {
|
||||||
|
this.nextQuestion()
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('选择答案失败:', error)
|
||||||
|
uni.showToast({
|
||||||
|
title: '选择答案失败，请重试',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
nextQuestion() {
|
||||||
|
if (this.currentIndex < this.totalQuestions - 1) {
|
||||||
|
this.currentIndex++
|
||||||
|
}
|
||||||
|
},
|
||||||
|
previousQuestion() {
|
||||||
|
if (this.currentIndex > 0) {
|
||||||
|
this.currentIndex--
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async submitTest() {
|
||||||
|
try {
|
||||||
|
await this.showLoadingDialog()
|
||||||
|
const dimensions = this.calculateDimensions()
|
||||||
|
const response = await this.submitAnswers(dimensions)
|
||||||
|
await this.handleSubmitResponse(response)
|
||||||
|
} catch (error) {
|
||||||
|
this.handleError('提交失败', error)
|
||||||
|
} finally {
|
||||||
|
uni.hideLoading()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showLoadingDialog() {
|
||||||
|
return uni.showLoading({
|
||||||
|
title: 'AI正在深入分析您的答案\n请耐心等待（约1分钟）',
|
||||||
|
mask: true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
calculateDimensions() {
|
||||||
|
const dimensions = { EI: 0, SN: 0, TF: 0, JP: 0 }
|
||||||
|
const dimensionCounts = { EI: 0, SN: 0, TF: 0, JP: 0 }
|
||||||
|
|
||||||
|
// 计算每个维度的得分
|
||||||
|
this.answers.forEach((answer, index) => {
|
||||||
|
if (answer === undefined) return
|
||||||
|
|
||||||
|
const question = this.questions[index]
|
||||||
|
const dimensionKey = question.dimension
|
||||||
|
const direction = question.direction
|
||||||
|
|
||||||
|
let score = answer
|
||||||
|
if (direction < 0) {
|
||||||
|
score = 8 - score // 反向题目：7->1, 6->2, 5->3, 4->4, 3->5, 2->6, 1->7
|
||||||
|
} else {
|
||||||
|
score = score // 正向题目保持原始分数
|
||||||
|
}
|
||||||
|
score = ((score - 1) / 6.0) * 100 // 将1-7转换为0-100范围的百分比
|
||||||
|
|
||||||
|
dimensions[dimensionKey] += score
|
||||||
|
dimensionCounts[dimensionKey]++
|
||||||
|
})
|
||||||
|
|
||||||
|
// 计算每个维度的最终百分比
|
||||||
|
for (const key in dimensions) {
|
||||||
|
const totalQuestions = dimensionCounts[key]
|
||||||
|
if (totalQuestions === 0) continue
|
||||||
|
|
||||||
|
const averageScore = dimensions[key] / totalQuestions
|
||||||
|
|
||||||
|
dimensions[key] = {
|
||||||
|
leftValue: Math.round(averageScore),
|
||||||
|
rightValue: Math.round(100 - averageScore)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return dimensions
|
||||||
|
},
|
||||||
|
async submitAnswers(dimensions) {
|
||||||
|
return await uni.request({
|
||||||
|
url: 'http://localhost:8080/api/submit',
|
||||||
|
method: 'POST',
|
||||||
|
timeout: 600000,
|
||||||
|
data: {
|
||||||
|
answers: this.answers,
|
||||||
|
dimensions,
|
||||||
|
userInfo: {
|
||||||
|
testDate: new Date().toISOString(),
|
||||||
|
totalQuestions: this.totalQuestions,
|
||||||
|
completionTime: Date.now() - this._testStartTime
|
||||||
|
}
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
async handleSubmitResponse(response) {
|
||||||
|
if (response.statusCode === 200 && response.data?.resultId) {
|
||||||
|
await this.navigateToResult(response.data.resultId)
|
||||||
|
} else {
|
||||||
|
throw new Error('提交失败，未获取到结果ID')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async navigateToResult(resultId) {
|
||||||
|
try {
|
||||||
|
await uni.navigateTo({
|
||||||
|
url: `/pages/result/result?id=${resultId}`
|
||||||
|
})
|
||||||
|
} catch (err) {
|
||||||
|
this.handleError('跳转结果页面失败', err)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleError(message, error) {
|
||||||
|
console.error(message, error)
|
||||||
|
uni.showToast({
|
||||||
|
title: message,
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.test-container {
|
||||||
|
padding: 20px;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
height: 4px;
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
height: 100%;
|
||||||
|
background-color: #4CAF50;
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-card {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-number {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-text {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-labels {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.extreme-label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-circles {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 15px 20px;
|
||||||
|
background: linear-gradient(135deg, #f5f7fa 0%, #e3e6e8 100%);
|
||||||
|
border-radius: 12px;
|
||||||
|
margin: 10px 0;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-circle {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-circle:nth-child(1) { background: #FFD700; }
|
||||||
|
.option-circle:nth-child(2) { background: #FFB347; }
|
||||||
|
.option-circle:nth-child(3) { background: #FF8C00; }
|
||||||
|
.option-circle:nth-child(4) { background: #9370DB; }
|
||||||
|
.option-circle:nth-child(5) { background: #8A2BE2; }
|
||||||
|
.option-circle:nth-child(6) { background: #800080; }
|
||||||
|
.option-circle:nth-child(7) { background: #4B0082; }
|
||||||
|
|
||||||
|
.option-circle:hover {
|
||||||
|
transform: scale(1.15);
|
||||||
|
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-circle.selected {
|
||||||
|
transform: scale(1.1);
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||||||
|
filter: brightness(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-value {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-description {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
min-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-description text {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 40px;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 20px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button {
|
||||||
|
flex: 1;
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: none;
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
min-width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button:disabled {
|
||||||
|
background-color: #ccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button.submit {
|
||||||
|
background-color: #2196F3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
export {};
|
||||||
|
|
||||||
|
declare module "vue" {
|
||||||
|
type Hooks = App.AppInstance & Page.PageInstance;
|
||||||
|
interface ComponentCustomOptions extends Hooks {}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 601 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
|
|
@ -0,0 +1,76 @@
|
||||||
|
/**
|
||||||
|
* 这里是uni-app内置的常用样式变量
|
||||||
|
*
|
||||||
|
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||||
|
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||||
|
*
|
||||||
|
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* 颜色变量 */
|
||||||
|
|
||||||
|
/* 行为相关颜色 */
|
||||||
|
$uni-color-primary: #007aff;
|
||||||
|
$uni-color-success: #4cd964;
|
||||||
|
$uni-color-warning: #f0ad4e;
|
||||||
|
$uni-color-error: #dd524d;
|
||||||
|
|
||||||
|
/* 文字基本颜色 */
|
||||||
|
$uni-text-color: #333; // 基本色
|
||||||
|
$uni-text-color-inverse: #fff; // 反色
|
||||||
|
$uni-text-color-grey: #999; // 辅助灰色，如加载更多的提示信息
|
||||||
|
$uni-text-color-placeholder: #808080;
|
||||||
|
$uni-text-color-disable: #c0c0c0;
|
||||||
|
|
||||||
|
/* 背景颜色 */
|
||||||
|
$uni-bg-color: #fff;
|
||||||
|
$uni-bg-color-grey: #f8f8f8;
|
||||||
|
$uni-bg-color-hover: #f1f1f1; // 点击状态颜色
|
||||||
|
$uni-bg-color-mask: rgba(0, 0, 0, 0.4); // 遮罩颜色
|
||||||
|
|
||||||
|
/* 边框颜色 */
|
||||||
|
$uni-border-color: #c8c7cc;
|
||||||
|
|
||||||
|
/* 尺寸变量 */
|
||||||
|
|
||||||
|
/* 文字尺寸 */
|
||||||
|
$uni-font-size-sm: 12px;
|
||||||
|
$uni-font-size-base: 14px;
|
||||||
|
$uni-font-size-lg: 16;
|
||||||
|
|
||||||
|
/* 图片尺寸 */
|
||||||
|
$uni-img-size-sm: 20px;
|
||||||
|
$uni-img-size-base: 26px;
|
||||||
|
$uni-img-size-lg: 40px;
|
||||||
|
|
||||||
|
/* Border Radius */
|
||||||
|
$uni-border-radius-sm: 2px;
|
||||||
|
$uni-border-radius-base: 3px;
|
||||||
|
$uni-border-radius-lg: 6px;
|
||||||
|
$uni-border-radius-circle: 50%;
|
||||||
|
|
||||||
|
/* 水平间距 */
|
||||||
|
$uni-spacing-row-sm: 5px;
|
||||||
|
$uni-spacing-row-base: 10px;
|
||||||
|
$uni-spacing-row-lg: 15px;
|
||||||
|
|
||||||
|
/* 垂直间距 */
|
||||||
|
$uni-spacing-col-sm: 4px;
|
||||||
|
$uni-spacing-col-base: 8px;
|
||||||
|
$uni-spacing-col-lg: 12px;
|
||||||
|
|
||||||
|
/* 透明度 */
|
||||||
|
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||||
|
|
||||||
|
/* 文章场景相关 */
|
||||||
|
$uni-color-title: #2c405a; // 文章标题颜色
|
||||||
|
$uni-font-size-title: 20px;
|
||||||
|
$uni-color-subtitle: #555; // 二级标题颜色
|
||||||
|
$uni-font-size-subtitle: 18px;
|
||||||
|
$uni-color-paragraph: #3f536e; // 文章段落颜色
|
||||||
|
$uni-font-size-paragraph: 15px;
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import uni from '@dcloudio/vite-plugin-uni'
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
uni(),
|
||||||
|
],
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue