feat(nsti): add nicotine personality test flow (#36)
* fix: polish logs filter and stats money display * fix: align floating tabs on logs and stats * feat: enhance user profile and achievement features - Add functionality for users to update their profile picture and nickname - Implement achievement theme selection in onboarding - Update API integration for profile updates and achievement themes - Refine UI elements for better user interaction and experience * feat: 梦想清单页与戒烟相关 API - 梦想清单：系统导航栏、浮动添加、图标来自后台预设 - dream-presets API、pages.json 导航样式 Made-with: Cursor * feat(nsti): add nicotine personality test flow
This commit is contained in:
hello-dd-code
@@ -0,0 +1,55 @@
|
||||
# NSTI 戒烟人格测试
|
||||
|
||||
## 概览
|
||||
|
||||
`NSTI` 是为 `smt` 小程序新增的一组轻量娱乐化测试页面，用 10 道题和 16 种抽象人格帮助用户以更低心理压力进入戒烟主题。
|
||||
|
||||
当前实现为纯前端方案，不依赖后端接口：
|
||||
|
||||
- 题库和人格画像：`src/utils/nsti-data.js`
|
||||
- 结果算法与本地存储：`src/utils/nsti.js`
|
||||
- 测试首页：`src/pages/nsti/index.vue`
|
||||
- 答题页：`src/pages/nsti/test.vue`
|
||||
- 结果页：`src/pages/nsti/result.vue`
|
||||
- 入口位置：`src/pages/profile/index.vue`
|
||||
|
||||
## 页面流转
|
||||
|
||||
1. 用户从“我的”页进入 `NSTI 戒烟人格测试`
|
||||
2. 在 `pages/nsti/index` 查看测试说明和最近结果
|
||||
3. 进入 `pages/nsti/test` 完成 10 道题
|
||||
4. 本地计算结果后跳转 `pages/nsti/result`
|
||||
5. 结果页可重新测试、分享文案、进入戒烟主流程
|
||||
|
||||
## 数据与存储
|
||||
|
||||
使用本地缓存保存测试结果和草稿：
|
||||
|
||||
- `nsti_latest_result`：最近一次结果
|
||||
- `nsti_history`：历史结果列表，最多保留 12 条
|
||||
- `nsti_draft`：中途退出后的答题草稿
|
||||
|
||||
对应常量定义在 `src/utils/storage.js`。
|
||||
|
||||
## 结果算法
|
||||
|
||||
当前算法采用“维度计数 + 人格权重”的混合方案：
|
||||
|
||||
1. 每道题的 A/B/C/D 选项分别代表一种行为维度
|
||||
2. 每个选项同时会给 1-2 个具体人格加权
|
||||
3. 提交后先统计维度分布，再统计人格得分
|
||||
4. 根据前两高维度组合给对应人格一个额外加权
|
||||
5. 取最终得分最高的人格作为结果，若分数相同则优先更抽象的人格
|
||||
|
||||
这种做法兼顾了：
|
||||
|
||||
- 题目抽象风格和直觉作答体验
|
||||
- 16 型人格的差异化结果
|
||||
- 后续扩展为后台配置时的可维护性
|
||||
|
||||
## 后续可扩展方向
|
||||
|
||||
- 把题库和人格画像迁移到后台配置
|
||||
- 记录测试完成率、分享率、人格分布
|
||||
- 把人格结果与首页激励文案、AI 建议、戒烟计划联动
|
||||
- 增加人格历史对比和“再次测试看变化”
|
||||
@@ -2,6 +2,7 @@ import { request } from './request'
|
||||
import { MINI_PROGRAM_ID } from '@/config'
|
||||
import pinia, { useUserStore } from '@/stores'
|
||||
import { storage, SESSION_KEY, USER_KEY, USER_MODE_KEY } from '@/utils/storage'
|
||||
import { BASE_URL } from '@/config'
|
||||
|
||||
const H5_DEBUG_SESSION_KEY = 'FxLFPHHBw49loODmRSvqdg=='
|
||||
|
||||
@@ -62,3 +63,83 @@ export function logout() {
|
||||
storage.remove(SESSION_KEY)
|
||||
storage.remove(USER_KEY)
|
||||
}
|
||||
|
||||
export async function updateUserProfile(data) {
|
||||
const res = await request.put('/auth/profile', data)
|
||||
const user = storage.get(USER_KEY)
|
||||
if (user && res.data) {
|
||||
if (res.data.nickname) user.nickname = res.data.nickname
|
||||
if (res.data.avatar_url) user.avatar_url = res.data.avatar_url
|
||||
storage.set(USER_KEY, user)
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
export { updateUserProfile as updateProfile }
|
||||
|
||||
export function getUploadToken(filename) {
|
||||
return request.post('/common/upload/oss/token', { filename })
|
||||
}
|
||||
|
||||
export function downloadMiniProgramTestCode(params = {}) {
|
||||
const sessionKey = storage.get(SESSION_KEY)
|
||||
const path = encodeURIComponent(params.path || 'pages/nsti/test?resume=0')
|
||||
const width = params.width || 280
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.downloadFile({
|
||||
url: `${BASE_URL}/auth/mini-program-test-code?path=${path}&width=${width}`,
|
||||
header: {
|
||||
Authorization: sessionKey ? `Bearer ${sessionKey}` : ''
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200 && res.tempFilePath) {
|
||||
resolve(res.tempFilePath)
|
||||
return
|
||||
}
|
||||
reject(new Error(`下载小程序码失败: ${res.statusCode || 'unknown'}`))
|
||||
},
|
||||
fail: (err) => reject(err)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export async function uploadFile(filePath) {
|
||||
const ext = filePath.split('.').pop() || 'jpg'
|
||||
const tokenRes = await getUploadToken(`avatar.${ext}`)
|
||||
const data = tokenRes.data
|
||||
|
||||
let uploadUrl = (data.upload_url || '').replace(/\/$/, '')
|
||||
if (!uploadUrl || uploadUrl.indexOf('aliyuncs.com') === -1) {
|
||||
uploadUrl = (data.cdn_domain || '').replace(/\/$/, '')
|
||||
if (uploadUrl && uploadUrl.indexOf('http') !== 0) {
|
||||
uploadUrl = 'https://' + uploadUrl
|
||||
}
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: uploadUrl,
|
||||
filePath,
|
||||
name: 'file',
|
||||
formData: {
|
||||
key: data.key,
|
||||
OSSAccessKeyId: data.oss_access_key_id,
|
||||
policy: data.oss_policy,
|
||||
Signature: data.oss_signature
|
||||
},
|
||||
success: (res) => {
|
||||
const code = res.statusCode || 0
|
||||
if (code === 200 || code === 204 || (code >= 200 && code < 300)) {
|
||||
const cdnDomain = (data.cdn_domain || '').replace(/\/$/, '')
|
||||
const fileUrl = cdnDomain.startsWith('http')
|
||||
? `${cdnDomain}/${data.key}`
|
||||
: `https://${cdnDomain}/${data.key}`
|
||||
resolve({ url: fileUrl, key: data.key })
|
||||
} else {
|
||||
reject(new Error('上传失败: ' + (res.data || code)))
|
||||
}
|
||||
},
|
||||
fail: (err) => reject(new Error(err.errMsg || '上传失败'))
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
+1
-1
@@ -1,3 +1,3 @@
|
||||
export * from './auth'
|
||||
export * from './smoke'
|
||||
export * from './profile'
|
||||
export { getProfile as getSmokeProfile, updateProfile as updateSmokeProfile } from './profile'
|
||||
|
||||
+2
-2
@@ -13,12 +13,12 @@ function isInvalidToken(res) {
|
||||
export const request = {
|
||||
async request(options) {
|
||||
const sessionKey = storage.get(SESSION_KEY)
|
||||
// 测试
|
||||
const isRetryAfter401 = options._retryAfter401 === true
|
||||
const baseUrl = options.baseUrl || BASE_URL
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
url: BASE_URL + options.url,
|
||||
url: baseUrl + options.url,
|
||||
method: options.method || 'GET',
|
||||
data: options.data,
|
||||
header: {
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
import { request } from './request'
|
||||
import { BASE_URL } from '@/config'
|
||||
|
||||
const BASE_URL_V2 = BASE_URL.replace('/v1', '/v2')
|
||||
|
||||
export function getDashboard(params = {}) {
|
||||
return request.get('/smoke/dashboard', params)
|
||||
@@ -88,3 +91,44 @@ export function getQuitPlanDays(planId) {
|
||||
export function resetQuitPlan() {
|
||||
return request.post('/smoke/quit-plan/reset')
|
||||
}
|
||||
|
||||
// 成就系统 API
|
||||
export function getAchievementThemes() {
|
||||
return request.get('/smoke/achievement/themes')
|
||||
}
|
||||
|
||||
export function getAchievement() {
|
||||
return request.get('/smoke/achievement')
|
||||
}
|
||||
|
||||
// V2 戒烟打卡 API
|
||||
export function getQuitCheckinHome() {
|
||||
return request.request({ url: '/checkin/home', method: 'GET', baseUrl: BASE_URL_V2 })
|
||||
}
|
||||
|
||||
export function quitCheckin(data = {}) {
|
||||
return request.request({ url: '/checkin/check', method: 'POST', data, baseUrl: BASE_URL_V2 })
|
||||
}
|
||||
|
||||
export function upsertQuitCheckinProfile(data) {
|
||||
return request.request({ url: '/profile', method: 'POST', data, baseUrl: BASE_URL_V2 })
|
||||
}
|
||||
|
||||
// 预设梦想目标
|
||||
export function listDreamPresets() {
|
||||
return request.request({ url: '/dream-presets', method: 'GET', baseUrl: BASE_URL_V2 })
|
||||
}
|
||||
|
||||
// 梦想目标 API
|
||||
export function listRewardGoals(status = 'all') {
|
||||
return request.request({ url: '/reward-goals', method: 'GET', data: { status }, baseUrl: BASE_URL_V2 })
|
||||
}
|
||||
|
||||
export function createRewardGoal(data) {
|
||||
return request.request({ url: '/reward-goals', method: 'POST', data, baseUrl: BASE_URL_V2 })
|
||||
}
|
||||
|
||||
export function updateRewardGoal(id, data) {
|
||||
return request.request({ url: `/reward-goals/${id}`, method: 'PUT', data, baseUrl: BASE_URL_V2 })
|
||||
}
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@ const ENV = {
|
||||
},
|
||||
production: {
|
||||
BASE_URL: 'https://wx.nepiedg.top/api/v1',
|
||||
// BASE_URL: 'http://192.168.31.73:8080/api/v1',
|
||||
MINI_PROGRAM_ID: 2
|
||||
}
|
||||
}
|
||||
|
||||
@@ -54,6 +54,24 @@
|
||||
"navigationBarTitleText": "戒烟分享"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/nsti/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "赛博尼古丁测试"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/nsti/test",
|
||||
"style": {
|
||||
"navigationBarTitleText": "人格测试"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/nsti/result",
|
||||
"style": {
|
||||
"navigationBarTitleText": "测试结果"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/profile/index",
|
||||
"style": {
|
||||
@@ -71,6 +89,13 @@
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/dream-goals/index",
|
||||
"style": {
|
||||
"navigationStyle": "default",
|
||||
"navigationBarTitleText": "梦想清单"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
||||
@@ -0,0 +1,626 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="saved-banner">
|
||||
<view class="saved-banner-inner">
|
||||
<text class="saved-label">戒烟已省下</text>
|
||||
<view class="saved-amount-row">
|
||||
<text class="saved-unit">¥</text>
|
||||
<text class="saved-amount">{{ savedMoneyYuan }}</text>
|
||||
</view>
|
||||
<text class="saved-hint">每天省下的钱，离梦想更近一步</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tab-bar">
|
||||
<text class="tab-item" :class="{ 'tab-active': currentTab === 'active' }" @tap="currentTab = 'active'">进行中</text>
|
||||
<text class="tab-item" :class="{ 'tab-active': currentTab === 'completed' }" @tap="currentTab = 'completed'">已实现</text>
|
||||
</view>
|
||||
|
||||
<view v-if="loading" class="loading-wrap">
|
||||
<view class="sk-card-placeholder"></view>
|
||||
<view class="sk-card-placeholder"></view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="filteredGoals.length === 0" class="empty-state">
|
||||
<text class="empty-icon">🎯</text>
|
||||
<text class="empty-text">{{ currentTab === 'active' ? '还没有梦想目标' : '还没有已实现的目标' }}</text>
|
||||
<text v-if="currentTab === 'active'" class="empty-action" @tap="openCreate">添加一个</text>
|
||||
</view>
|
||||
|
||||
<view v-else class="goal-list">
|
||||
<view v-for="goal in filteredGoals" :key="goal.id" class="goal-card">
|
||||
<view class="goal-cover">
|
||||
<image v-if="goal.cover_image && !goal.cover_image.startsWith('icon:')" :src="goal.cover_image" mode="aspectFill" class="goal-cover-img" />
|
||||
<text v-else-if="goal.cover_image && goal.cover_image.startsWith('icon:')" class="goal-cover-emoji">{{ goal.cover_image.replace('icon:', '') }}</text>
|
||||
<text v-else class="goal-cover-emoji">🎁</text>
|
||||
</view>
|
||||
<view class="goal-info">
|
||||
<text class="goal-title">{{ goal.title }}</text>
|
||||
<text class="goal-price">¥{{ (goal.target_amount_cent / 100).toFixed(0) }}</text>
|
||||
<view v-if="goal.status === 'active'" class="goal-progress-area">
|
||||
<view class="goal-bar">
|
||||
<view class="goal-fill" :style="{ width: goal.progress_percent + '%' }"></view>
|
||||
</view>
|
||||
<text class="goal-eta">{{ getEtaText(goal) }}</text>
|
||||
</view>
|
||||
<view v-else class="goal-done-badge">
|
||||
<text class="goal-done-text">✓ 已实现</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="goal.status === 'active'" class="goal-actions">
|
||||
<text class="goal-action-btn goal-action-complete" @tap="markCompleted(goal)">已买到</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 浮动添加按钮 -->
|
||||
<view class="fab" @tap="openCreate">
|
||||
<text class="fab-icon">+</text>
|
||||
</view>
|
||||
|
||||
<!-- 创建弹窗 -->
|
||||
<view v-if="showForm" class="modal-mask" @tap="closeForm">
|
||||
<view class="modal-body" @tap.stop>
|
||||
<text class="modal-title">添加梦想目标</text>
|
||||
|
||||
<view class="form-group">
|
||||
<text class="form-label">我想买</text>
|
||||
<input class="form-input" v-model="form.title" placeholder="例如：AirPods Pro" maxlength="30" />
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<text class="form-label">价格（元）</text>
|
||||
<input class="form-input" v-model="form.priceYuan" type="digit" placeholder="输入价格" />
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<text class="form-label">选择图标</text>
|
||||
<view v-if="iconsLoading" class="icons-loading">
|
||||
<text class="icons-loading-text">加载中...</text>
|
||||
</view>
|
||||
<view v-else-if="iconList.length === 0" class="icons-empty">
|
||||
<text class="icons-empty-text">暂无图标</text>
|
||||
</view>
|
||||
<view v-else class="icon-grid">
|
||||
<view
|
||||
v-for="icon in iconList"
|
||||
:key="icon.id"
|
||||
class="icon-item"
|
||||
:class="{ 'icon-item-active': form.coverImage === icon.cover_image }"
|
||||
@tap.stop="form.coverImage = icon.cover_image"
|
||||
>
|
||||
<image v-if="icon.cover_image && !icon.cover_image.startsWith('icon:')" :src="icon.cover_image" mode="aspectFill" class="icon-img" />
|
||||
<text v-else class="icon-emoji">{{ (icon.cover_image || '').replace('icon:', '') || '🎁' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="modal-actions">
|
||||
<text class="modal-btn modal-btn-cancel" @tap.stop="closeForm">取消</text>
|
||||
<text class="modal-btn modal-btn-confirm" @tap.stop="submitGoal">确定</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import * as api from '@/api'
|
||||
|
||||
const loading = ref(true)
|
||||
const goals = ref([])
|
||||
const currentTab = ref('active')
|
||||
const showForm = ref(false)
|
||||
const savedMoneyCent = ref(0)
|
||||
const dailySaveCent = ref(0)
|
||||
const iconList = ref([])
|
||||
const iconsLoading = ref(false)
|
||||
|
||||
const form = ref({ title: '', priceYuan: '', coverImage: '' })
|
||||
|
||||
const savedMoneyYuan = computed(() => Math.round(savedMoneyCent.value / 100))
|
||||
|
||||
const filteredGoals = computed(() => {
|
||||
return goals.value.filter(g => {
|
||||
if (currentTab.value === 'active') return g.status === 'active'
|
||||
return g.status === 'completed'
|
||||
})
|
||||
})
|
||||
|
||||
function getEtaText(goal) {
|
||||
if (goal.progress_percent >= 100) return '已攒够！'
|
||||
if (dailySaveCent.value <= 0) return '坚持打卡积攒'
|
||||
const remaining = goal.target_amount_cent - (goal.current_amount_cent || 0)
|
||||
const daysNeeded = Math.ceil(remaining / dailySaveCent.value)
|
||||
if (daysNeeded <= 0) return '已攒够！'
|
||||
if (daysNeeded > 365) return `约 ${Math.round(daysNeeded / 30)} 个月`
|
||||
return `约 ${daysNeeded} 天可达成`
|
||||
}
|
||||
|
||||
async function openCreate() {
|
||||
form.value = { title: '', priceYuan: '', coverImage: '' }
|
||||
showForm.value = true
|
||||
if (iconList.value.length === 0) {
|
||||
iconsLoading.value = true
|
||||
try {
|
||||
const res = await api.listDreamPresets()
|
||||
iconList.value = res.data?.items || []
|
||||
} catch (e) {
|
||||
console.error('fetch icons error:', e)
|
||||
} finally {
|
||||
iconsLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function closeForm() {
|
||||
showForm.value = false
|
||||
}
|
||||
|
||||
async function submitGoal() {
|
||||
const title = form.value.title.trim()
|
||||
if (!title) {
|
||||
uni.showToast({ title: '请输入名称', icon: 'none' })
|
||||
return
|
||||
}
|
||||
const price = parseFloat(form.value.priceYuan)
|
||||
if (!price || price <= 0) {
|
||||
uni.showToast({ title: '请输入有效价格', icon: 'none' })
|
||||
return
|
||||
}
|
||||
try {
|
||||
await api.createRewardGoal({
|
||||
title,
|
||||
target_amount_cent: Math.round(price * 100),
|
||||
cover_image: form.value.coverImage || ''
|
||||
})
|
||||
showForm.value = false
|
||||
uni.showToast({ title: '添加成功', icon: 'success' })
|
||||
await fetchGoals()
|
||||
} catch (e) {
|
||||
console.error('create goal error:', e)
|
||||
uni.showToast({ title: '添加失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
async function markCompleted(goal) {
|
||||
uni.showModal({
|
||||
title: '确认已买到？',
|
||||
content: `确定已经购买了「${goal.title}」吗？`,
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return
|
||||
try {
|
||||
await api.updateRewardGoal(goal.id, { status: 'completed' })
|
||||
uni.showToast({ title: '恭喜实现梦想！', icon: 'success' })
|
||||
await fetchGoals()
|
||||
} catch (e) {
|
||||
console.error('mark completed error:', e)
|
||||
uni.showToast({ title: '操作失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function fetchGoals() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await api.listRewardGoals('all')
|
||||
goals.value = res.data?.items || []
|
||||
} catch (e) {
|
||||
console.error('fetch goals error:', e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchSavedMoney() {
|
||||
try {
|
||||
const res = await api.getQuitCheckinHome()
|
||||
const summary = res.data?.summary || {}
|
||||
savedMoneyCent.value = summary.saved_money_cent || 0
|
||||
const streakDays = summary.current_streak_days || 0
|
||||
if (streakDays > 0) {
|
||||
dailySaveCent.value = Math.round(savedMoneyCent.value / streakDays)
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('fetch saved money error:', e)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([fetchGoals(), fetchSavedMoney()])
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #F8FAFB;
|
||||
padding-bottom: 140rpx;
|
||||
}
|
||||
|
||||
.saved-banner {
|
||||
margin-top: 20rpx;
|
||||
margin: 0 24rpx 20rpx;
|
||||
border-radius: 28rpx;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #14936d 0%, #10B981 50%, #34D399 100%);
|
||||
box-shadow: 0 16rpx 36rpx rgba(20, 147, 109, 0.25);
|
||||
}
|
||||
|
||||
.saved-banner-inner {
|
||||
padding: 32rpx 28rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.saved-label {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.saved-amount-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
gap: 4rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.saved-unit {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.saved-amount {
|
||||
font-size: 72rpx;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
font-family: 'DIN Alternate', -apple-system, sans-serif;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.saved-hint {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
margin: 0 24rpx 20rpx;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 20rpx;
|
||||
padding: 6rpx;
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 16rpx 0;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #9ca3af;
|
||||
border-radius: 16rpx;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tab-active {
|
||||
background: #fff;
|
||||
color: #14936d;
|
||||
box-shadow: 0 4rpx 12rpx rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.loading-wrap {
|
||||
padding: 0 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.sk-card-placeholder {
|
||||
height: 180rpx;
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 100rpx 0;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.empty-action {
|
||||
margin-top: 20rpx;
|
||||
padding: 14rpx 40rpx;
|
||||
background: linear-gradient(135deg, #14936d, #10B981);
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
border-radius: 999rpx;
|
||||
box-shadow: 0 8rpx 20rpx rgba(20, 147, 109, 0.25);
|
||||
}
|
||||
|
||||
.goal-list {
|
||||
padding: 0 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.goal-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
padding: 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.06);
|
||||
box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.goal-cover {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 20rpx;
|
||||
background: linear-gradient(135deg, #f0fdf9 0%, #ecfdf5 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goal-cover-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.goal-cover-emoji {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.goal-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.goal-title {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.goal-price {
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
font-size: 24rpx;
|
||||
color: #6b7280;
|
||||
font-family: 'DIN Alternate', -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
.goal-progress-area {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.goal-bar {
|
||||
height: 8rpx;
|
||||
background: rgba(16, 185, 129, 0.12);
|
||||
border-radius: 999rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goal-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #10B981, #34D399);
|
||||
border-radius: 999rpx;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
.goal-eta {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: 20rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.goal-done-badge {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.goal-done-text {
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
color: #14936d;
|
||||
}
|
||||
|
||||
.goal-actions {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.goal-action-btn {
|
||||
padding: 12rpx 24rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.goal-action-complete {
|
||||
background: linear-gradient(135deg, #14936d, #10B981);
|
||||
color: #fff;
|
||||
box-shadow: 0 6rpx 16rpx rgba(20, 147, 109, 0.2);
|
||||
}
|
||||
|
||||
/* 弹窗 */
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
padding: 36rpx 32rpx calc(env(safe-area-inset-bottom) + 36rpx);
|
||||
max-height: 85vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
text-align: center;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
height: 84rpx;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #f9fafb;
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.08);
|
||||
font-size: 28rpx;
|
||||
color: #111827;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.icons-loading, .icons-empty {
|
||||
padding: 24rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icons-loading-text, .icons-empty-text {
|
||||
font-size: 24rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.icon-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 16rpx;
|
||||
background: #f9fafb;
|
||||
border: 2rpx solid transparent;
|
||||
overflow: hidden;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.icon-item-active {
|
||||
background: #ecfdf5;
|
||||
border-color: #14936d;
|
||||
}
|
||||
|
||||
.icon-emoji {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.icon-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 22rpx 0;
|
||||
border-radius: 999rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-btn-cancel {
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.modal-btn-confirm {
|
||||
background: linear-gradient(135deg, #14936d, #10B981);
|
||||
color: #fff;
|
||||
box-shadow: 0 8rpx 20rpx rgba(20, 147, 109, 0.2);
|
||||
}
|
||||
|
||||
.fab {
|
||||
position: fixed;
|
||||
right: 40rpx;
|
||||
bottom: calc(env(safe-area-inset-bottom) + 60rpx);
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #14936d, #10B981);
|
||||
box-shadow: 0 12rpx 30rpx rgba(20, 147, 109, 0.35);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.fab-icon {
|
||||
font-size: 48rpx;
|
||||
color: #fff;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
+496
-111
@@ -21,8 +21,7 @@
|
||||
<view class="quit-hero-top">
|
||||
<view class="quit-hero-copy">
|
||||
<text class="quit-hero-eyebrow">无烟旅程</text>
|
||||
<text class="quit-hero-title">今天也在慢慢变好</text>
|
||||
<text class="quit-hero-subtitle">{{ quitEncouragement }}</text>
|
||||
<text class="quit-hero-title">{{ quitEncouragement }}</text>
|
||||
</view>
|
||||
<text class="quit-hero-chip">{{ todayChecked ? '今日已完成' : '等待打卡' }}</text>
|
||||
</view>
|
||||
@@ -53,6 +52,25 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="achievementData" class="quit-ach-inline">
|
||||
<view class="quit-ach-left">
|
||||
<text class="quit-ach-icon">{{ achievementData.theme_icon }}</text>
|
||||
<view class="quit-ach-info">
|
||||
<text class="quit-ach-rank">{{ achievementData.current?.name || '--' }}</text>
|
||||
<text class="quit-ach-theme">{{ achievementData.theme_name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="quit-ach-right">
|
||||
<view v-if="achievementData.next" class="quit-ach-progress-area">
|
||||
<view class="quit-ach-bar">
|
||||
<view class="quit-ach-fill" :style="{ width: (achievementData.progress * 100) + '%' }"></view>
|
||||
</view>
|
||||
<text class="quit-ach-hint">距「{{ achievementData.next.name }}」还需 {{ achievementData.next.required_days - achievementData.days }} 天</text>
|
||||
</view>
|
||||
<text v-else class="quit-ach-max">已达最高等级</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
@@ -78,30 +96,47 @@
|
||||
<view class="quit-health-card">
|
||||
<view class="quit-health-header">
|
||||
<view>
|
||||
<text class="quit-health-title">健康恢复</text>
|
||||
<text class="quit-health-subtitle">身体正在按自己的节奏修复</text>
|
||||
<text class="quit-health-title">健康恢复里程碑</text>
|
||||
</view>
|
||||
<text class="quit-health-value">{{ healthProgress }}%</text>
|
||||
<view class="quit-health-badge" :class="{ 'quit-health-badge-done': healthProgress >= 100 }">
|
||||
{{ healthProgress >= 100 ? '已达成' : `${healthProgress}%` }}
|
||||
</view>
|
||||
<view class="quit-health-bar">
|
||||
<view class="quit-health-bar-fill" :style="{ width: healthProgress + '%' }"></view>
|
||||
</view>
|
||||
<view class="quit-health-milestones">
|
||||
<view class="quit-milestone-list">
|
||||
<view
|
||||
v-for="(milestone, index) in healthMilestones"
|
||||
v-for="(ms, index) in healthMilestoneItems"
|
||||
:key="index"
|
||||
class="quit-milestone-item"
|
||||
:class="{ 'quit-milestone-done': quitDays >= milestone.days }"
|
||||
class="quit-ms-item"
|
||||
>
|
||||
<view class="quit-milestone-dot"></view>
|
||||
<text class="quit-milestone-text">{{ milestone.label }}</text>
|
||||
<view class="quit-ms-top">
|
||||
<text class="quit-ms-name">{{ ms.name }}</text>
|
||||
<text class="quit-ms-pct" :class="{ 'quit-ms-pct-done': ms.percent >= 100 }">{{ ms.percent }}%</text>
|
||||
</view>
|
||||
<view class="quit-ms-bar">
|
||||
<view
|
||||
class="quit-ms-fill"
|
||||
:class="ms.percent >= 100 ? 'quit-ms-fill-done' : 'quit-ms-fill-pending'"
|
||||
:style="{ width: ms.percent + '%' }"
|
||||
></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="quit-motivation-card">
|
||||
<text class="quit-motivation-label">今日提醒</text>
|
||||
<text class="quit-motivation-text">{{ healthTip }}</text>
|
||||
<view class="quit-dream-entry" @tap="gotoDreamGoals">
|
||||
<view class="quit-dream-left">
|
||||
<text class="quit-dream-icon">🎯</text>
|
||||
<view class="quit-dream-info">
|
||||
<text class="quit-dream-title">梦想清单</text>
|
||||
<text class="quit-dream-desc">{{ activeGoalText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="quit-dream-arrow">›</text>
|
||||
</view>
|
||||
|
||||
<view class="quit-tip-bar">
|
||||
<text class="quit-tip-icon">💡</text>
|
||||
<text class="quit-tip-text">{{ healthTip }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -212,6 +247,28 @@
|
||||
<text class="health-tip-icon">💡</text>
|
||||
<text class="health-tip-text">{{ recordHealthTip }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="achievementData" class="record-achievement-card">
|
||||
<view class="ach-header">
|
||||
<text class="ach-title">{{ achievementData.theme_icon }} 成就称号</text>
|
||||
<text class="ach-theme-name">{{ achievementData.theme_name }}</text>
|
||||
</view>
|
||||
<view class="ach-body">
|
||||
<view class="ach-current">
|
||||
<text class="ach-rank">{{ achievementData.current?.name || '--' }}</text>
|
||||
<text class="ach-days">第 {{ achievementData.days }} 天</text>
|
||||
</view>
|
||||
<view v-if="achievementData.next" class="ach-progress-wrap">
|
||||
<view class="ach-progress-bar">
|
||||
<view class="ach-progress-fill" :style="{ width: (achievementData.progress * 100) + '%' }"></view>
|
||||
</view>
|
||||
<text class="ach-next-hint">距下一级「{{ achievementData.next.name }}」还需 {{ achievementData.next.required_days - achievementData.days }} 天</text>
|
||||
</view>
|
||||
<view v-else class="ach-max">
|
||||
<text class="ach-max-text">已达最高等级</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -244,6 +301,8 @@ const showDialog = ref(false)
|
||||
const dialogType = ref('smoke')
|
||||
const homeData = ref(null)
|
||||
const pageReady = ref(false)
|
||||
const achievementData = ref(null)
|
||||
const quitHomeData = ref(null)
|
||||
const quitState = ref(defaultQuitState())
|
||||
|
||||
let timerInterval = null
|
||||
@@ -288,35 +347,59 @@ const nextSmokeTimeText = computed(() => {
|
||||
return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
|
||||
})
|
||||
|
||||
// 戒烟模式计算
|
||||
// 戒烟模式计算 — 优先使用 V2 API 数据
|
||||
const quitSummary = computed(() => quitHomeData.value?.summary || {})
|
||||
const quitDailyStatus = computed(() => quitHomeData.value?.daily_status || {})
|
||||
|
||||
const baselineCigsPerDay = computed(() => profileStore.profile?.baseline_cigs_per_day || 10)
|
||||
const packPriceYuan = computed(() => (profileStore.profile?.pack_price_cent || 2500) / 100)
|
||||
|
||||
const quitDays = computed(() => {
|
||||
if (quitSummary.value.current_streak_days !== undefined) {
|
||||
return quitSummary.value.current_streak_days
|
||||
}
|
||||
if (!quitState.value.lastCheckinDate) return 0
|
||||
const gap = diffDays(quitState.value.lastCheckinDate, formatDate(new Date()))
|
||||
if (gap > 1) return 0
|
||||
return Number(quitState.value.streakDays || 0)
|
||||
})
|
||||
|
||||
const todayChecked = computed(() => quitState.value.lastCheckinDate === formatDate(new Date()))
|
||||
const todayCheckinTime = computed(() => formatClock(quitState.value.lastCheckinAt))
|
||||
const todayChecked = computed(() => {
|
||||
if (quitDailyStatus.value.status) {
|
||||
return quitDailyStatus.value.status === 'checked_in'
|
||||
}
|
||||
return quitState.value.lastCheckinDate === formatDate(new Date())
|
||||
})
|
||||
|
||||
const todayCheckinTime = computed(() => {
|
||||
if (quitDailyStatus.value.checkin_at) {
|
||||
return formatClock(quitDailyStatus.value.checkin_at)
|
||||
}
|
||||
return formatClock(quitState.value.lastCheckinAt)
|
||||
})
|
||||
|
||||
const savedMoney = computed(() => {
|
||||
const total = (quitDays.value * baselineCigsPerDay.value / 20) * packPriceYuan.value
|
||||
return Math.round(total)
|
||||
if (quitSummary.value.saved_money_cent !== undefined) {
|
||||
return Math.round(quitSummary.value.saved_money_cent / 100)
|
||||
}
|
||||
return Math.round((quitDays.value * baselineCigsPerDay.value / 20) * packPriceYuan.value)
|
||||
})
|
||||
|
||||
const avoidedCigs = computed(() => {
|
||||
if (quitSummary.value.avoided_cigs !== undefined) {
|
||||
return quitSummary.value.avoided_cigs
|
||||
}
|
||||
return quitDays.value * baselineCigsPerDay.value
|
||||
})
|
||||
|
||||
const lifeSaved = computed(() => {
|
||||
// 每支烟减少约11分钟生命，换算成小时
|
||||
return Math.round(quitDays.value * baselineCigsPerDay.value * 11 / 60)
|
||||
return Math.round(avoidedCigs.value * 11 / 60)
|
||||
})
|
||||
|
||||
const healthProgress = computed(() => {
|
||||
if (quitSummary.value.health_recovery_percent !== undefined) {
|
||||
return quitSummary.value.health_recovery_percent
|
||||
}
|
||||
if (quitDays.value >= 365) return 100
|
||||
if (quitDays.value >= 180) return 85
|
||||
if (quitDays.value >= 90) return 70
|
||||
@@ -361,6 +444,30 @@ const healthMilestones = computed(() => [
|
||||
{ days: 365, label: '1年' }
|
||||
])
|
||||
|
||||
const healthMilestoneItems = computed(() => {
|
||||
const milestones = [
|
||||
{ name: '血压心率恢复', minutes: 20 },
|
||||
{ name: '一氧化碳排出', minutes: 480 },
|
||||
{ name: '尼古丁代谢完', minutes: 4320 },
|
||||
{ name: '味觉嗅觉恢复', minutes: 43200 },
|
||||
{ name: '血液循环改善', minutes: 129600 },
|
||||
{ name: '肺功能提升', minutes: 525600 },
|
||||
]
|
||||
const minutes = quitDays.value * 1440
|
||||
return milestones.map(m => ({
|
||||
name: m.name,
|
||||
percent: Math.min(Math.round((minutes / m.minutes) * 100), 100)
|
||||
}))
|
||||
})
|
||||
|
||||
const activeGoalText = computed(() => {
|
||||
const goal = quitHomeData.value?.goal
|
||||
if (!goal) return '设定一个小目标，攒钱实现它'
|
||||
const remaining = goal.target_amount_cent - (goal.current_amount_cent || 0)
|
||||
if (remaining <= 0) return `「${goal.title}」已攒够！`
|
||||
return `「${goal.title}」还差 ¥${Math.round(remaining / 100)}`
|
||||
})
|
||||
|
||||
const todayCountPercent = computed(() => {
|
||||
if (!dailyTarget.value || dailyTarget.value <= 0) return todayCount.value > 0 ? 100 : 0
|
||||
const percent = Math.round((todayCount.value / dailyTarget.value) * 100)
|
||||
@@ -518,21 +625,73 @@ async function handleSubmit(submitData) {
|
||||
}
|
||||
}
|
||||
|
||||
function handleQuitCheckin() {
|
||||
async function handleQuitCheckin() {
|
||||
if (todayChecked.value) {
|
||||
uni.showToast({ title: '今天已经打过卡', icon: 'none' })
|
||||
return
|
||||
}
|
||||
try {
|
||||
const today = formatDate(new Date())
|
||||
const previousDate = quitState.value.lastCheckinDate
|
||||
let streakDays = 1
|
||||
if (previousDate) {
|
||||
const gap = diffDays(previousDate, today)
|
||||
if (gap === 1) streakDays = Number(quitState.value.streakDays || 0) + 1
|
||||
else if (gap === 0) streakDays = Number(quitState.value.streakDays || 0)
|
||||
}
|
||||
saveQuitState({ lastCheckinDate: today, lastCheckinAt: new Date().toISOString(), streakDays })
|
||||
const res = await api.quitCheckin({ date: today })
|
||||
applyQuitHomeData(res.data)
|
||||
saveQuitState({
|
||||
lastCheckinDate: today,
|
||||
lastCheckinAt: new Date().toISOString(),
|
||||
streakDays: res.data?.summary?.current_streak_days || 0
|
||||
})
|
||||
uni.showToast({ title: '打卡成功', icon: 'success' })
|
||||
} catch (e) {
|
||||
console.error('handleQuitCheckin error:', e)
|
||||
uni.showToast({ title: '打卡失败，请重试', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
function gotoDreamGoals() {
|
||||
uni.navigateTo({ url: '/pages/dream-goals/index' })
|
||||
}
|
||||
|
||||
function applyQuitHomeData(data) {
|
||||
if (!data) return
|
||||
quitHomeData.value = data
|
||||
if (data.daily_status?.status === 'checked_in' && data.daily_status?.checkin_at) {
|
||||
saveQuitState({
|
||||
lastCheckinDate: data.daily_status.date,
|
||||
lastCheckinAt: data.daily_status.checkin_at,
|
||||
streakDays: data.summary?.current_streak_days || 0
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchQuitHomeData() {
|
||||
try {
|
||||
const res = await api.getQuitCheckinHome()
|
||||
applyQuitHomeData(res.data)
|
||||
} catch (e) {
|
||||
const msg = e?.message || ''
|
||||
if (msg.includes('基础资料')) {
|
||||
await ensureQuitProfile()
|
||||
try {
|
||||
const res = await api.getQuitCheckinHome()
|
||||
applyQuitHomeData(res.data)
|
||||
} catch (retryErr) {
|
||||
console.error('fetchQuitHomeData retry error:', retryErr)
|
||||
loadQuitState()
|
||||
}
|
||||
} else {
|
||||
console.error('fetchQuitHomeData error:', e)
|
||||
loadQuitState()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function ensureQuitProfile() {
|
||||
const profile = profileStore.profile
|
||||
if (!profile) return
|
||||
await api.upsertQuitCheckinProfile({
|
||||
quit_start_date: formatDate(new Date()),
|
||||
pack_price_cent: profile.pack_price_cent || 2500,
|
||||
baseline_cigs_per_day: profile.baseline_cigs_per_day || 10
|
||||
})
|
||||
}
|
||||
|
||||
async function ensureProfileReady() {
|
||||
@@ -548,13 +707,23 @@ async function ensureProfileReady() {
|
||||
return true
|
||||
}
|
||||
|
||||
async function fetchAchievement() {
|
||||
try {
|
||||
const res = await api.getAchievement()
|
||||
achievementData.value = res.data?.achievement || null
|
||||
} catch (e) {
|
||||
console.error('fetchAchievement error:', e)
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshCurrentMode() {
|
||||
if (!userStore.mode) return
|
||||
const profileReady = await ensureProfileReady()
|
||||
if (!profileReady) return
|
||||
fetchAchievement()
|
||||
if (isQuitMode.value) {
|
||||
stopTimer()
|
||||
loadQuitState()
|
||||
await fetchQuitHomeData()
|
||||
return
|
||||
}
|
||||
await fetchRecordHomeData()
|
||||
@@ -698,8 +867,7 @@ onShareAppMessage(() => ({
|
||||
|
||||
.quit-hero-card,
|
||||
.quit-checkin-card,
|
||||
.quit-health-card,
|
||||
.quit-motivation-card {
|
||||
.quit-health-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 253, 252, 0.94) 100%);
|
||||
@@ -714,8 +882,7 @@ onShareAppMessage(() => ({
|
||||
}
|
||||
|
||||
.quit-hero-card::before,
|
||||
.quit-health-card::before,
|
||||
.quit-motivation-card::before {
|
||||
.quit-health-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 240rpx;
|
||||
@@ -744,7 +911,7 @@ onShareAppMessage(() => ({
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 26rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.quit-hero-copy {
|
||||
@@ -765,20 +932,12 @@ onShareAppMessage(() => ({
|
||||
}
|
||||
|
||||
.quit-hero-title {
|
||||
display: block;
|
||||
margin-top: 16rpx;
|
||||
font-size: 42rpx;
|
||||
line-height: 1.2;
|
||||
font-weight: 800;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.quit-hero-subtitle {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.6;
|
||||
color: #6b7280;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.5;
|
||||
font-weight: 700;
|
||||
color: #14936d;
|
||||
}
|
||||
|
||||
.quit-hero-chip {
|
||||
@@ -966,10 +1125,10 @@ onShareAppMessage(() => ({
|
||||
|
||||
.quit-health-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 18rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.quit-health-title {
|
||||
@@ -979,101 +1138,238 @@ onShareAppMessage(() => ({
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.quit-health-subtitle {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.5;
|
||||
color: #6b7280;
|
||||
.quit-health-badge {
|
||||
font-size: 21rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(240, 252, 248, 0.94);
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.05);
|
||||
color: #14936d;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.quit-health-value {
|
||||
font-size: 34rpx;
|
||||
font-weight: 800;
|
||||
.quit-health-badge-done {
|
||||
background: linear-gradient(135deg, #10B981, #14936d);
|
||||
color: #fff;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.quit-milestone-list {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.quit-ms-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.quit-ms-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.quit-ms-name {
|
||||
font-size: 24rpx;
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.quit-ms-pct {
|
||||
font-size: 22rpx;
|
||||
color: #9ca3af;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.quit-ms-pct-done {
|
||||
color: #14936d;
|
||||
}
|
||||
|
||||
.quit-health-bar {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 14rpx;
|
||||
.quit-ms-bar {
|
||||
height: 10rpx;
|
||||
background: rgba(15, 23, 42, 0.06);
|
||||
border-radius: 999rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.quit-health-bar-fill {
|
||||
.quit-ms-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #31c18b 0%, #14936d 100%);
|
||||
border-radius: 999rpx;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
.quit-health-milestones {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8rpx;
|
||||
margin-top: 22rpx;
|
||||
.quit-ms-fill-done {
|
||||
background: linear-gradient(90deg, #31c18b, #14936d);
|
||||
}
|
||||
|
||||
.quit-milestone-item {
|
||||
.quit-ms-fill-pending {
|
||||
background: rgba(52, 200, 160, 0.3);
|
||||
}
|
||||
|
||||
.quit-ach-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
margin-top: 20rpx;
|
||||
padding: 18rpx 20rpx;
|
||||
border-radius: 22rpx;
|
||||
background: linear-gradient(180deg, #f5fbf9 0%, #eef6f2 100%);
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.05);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.quit-ach-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.quit-ach-icon {
|
||||
font-size: 36rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.quit-ach-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.quit-milestone-dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(15, 23, 42, 0.08);
|
||||
border: 2rpx solid rgba(15, 23, 42, 0.1);
|
||||
.quit-ach-rank {
|
||||
font-size: 28rpx;
|
||||
font-weight: 800;
|
||||
color: #14936d;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.quit-milestone-done .quit-milestone-dot {
|
||||
background: #31c18b;
|
||||
border-color: #14936d;
|
||||
}
|
||||
|
||||
.quit-milestone-text {
|
||||
.quit-ach-theme {
|
||||
font-size: 20rpx;
|
||||
color: #9ca3af;
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
|
||||
.quit-milestone-done .quit-milestone-text {
|
||||
.quit-ach-right {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.quit-ach-progress-area {
|
||||
width: 100%;
|
||||
max-width: 280rpx;
|
||||
}
|
||||
|
||||
.quit-ach-bar {
|
||||
height: 8rpx;
|
||||
background: rgba(16, 185, 129, 0.12);
|
||||
border-radius: 999rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.quit-ach-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #10B981, #34D399);
|
||||
border-radius: 999rpx;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
.quit-ach-hint {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: 20rpx;
|
||||
color: #9ca3af;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.quit-ach-max {
|
||||
font-size: 20rpx;
|
||||
color: #14936d;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.quit-motivation-card {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.quit-motivation-label {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
.quit-dream-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(240, 252, 248, 0.94);
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.05);
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
justify-content: space-between;
|
||||
padding: 22rpx 24rpx;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 253, 252, 0.94) 100%);
|
||||
border-radius: 24rpx;
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.06);
|
||||
box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.quit-motivation-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
.quit-dream-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.quit-dream-icon {
|
||||
font-size: 36rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.quit-dream-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.quit-dream-title {
|
||||
display: block;
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.7;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.quit-dream-desc {
|
||||
display: block;
|
||||
margin-top: 4rpx;
|
||||
font-size: 22rpx;
|
||||
color: #9ca3af;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.quit-dream-arrow {
|
||||
font-size: 36rpx;
|
||||
color: #d1d5db;
|
||||
flex-shrink: 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.quit-tip-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
padding: 14rpx 18rpx;
|
||||
border-radius: 16rpx;
|
||||
background: rgba(240, 252, 248, 0.6);
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.03);
|
||||
}
|
||||
|
||||
.quit-tip-icon {
|
||||
font-size: 22rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.quit-tip-text {
|
||||
font-size: 20rpx;
|
||||
line-height: 1.5;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
/* ===== 记录模式 ===== */
|
||||
@@ -1497,4 +1793,93 @@ onShareAppMessage(() => ({
|
||||
color: #4b5563;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.record-achievement-card {
|
||||
margin-top: 20rpx;
|
||||
padding: 24rpx;
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 249, 0.94) 100%);
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.06);
|
||||
box-shadow: 0 6rpx 14rpx rgba(15, 23, 42, 0.03);
|
||||
}
|
||||
|
||||
.ach-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.ach-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.ach-theme-name {
|
||||
font-size: 22rpx;
|
||||
color: #6b7280;
|
||||
padding: 6rpx 14rpx;
|
||||
background: rgba(240, 252, 248, 0.94);
|
||||
border-radius: 999rpx;
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.05);
|
||||
}
|
||||
|
||||
.ach-body {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ach-current {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.ach-rank {
|
||||
font-size: 40rpx;
|
||||
font-weight: 800;
|
||||
color: #14936d;
|
||||
font-family: 'DIN Alternate', -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
.ach-days {
|
||||
font-size: 24rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.ach-progress-wrap {
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.ach-progress-bar {
|
||||
height: 12rpx;
|
||||
background: rgba(16, 185, 129, 0.12);
|
||||
border-radius: 6rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.ach-progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #10B981, #34D399);
|
||||
border-radius: 6rpx;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
.ach-next-hint {
|
||||
font-size: 22rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.ach-max {
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.ach-max-text {
|
||||
font-size: 22rpx;
|
||||
color: #14936d;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
+76
-166
@@ -1,27 +1,7 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="hero-card card">
|
||||
<text class="hero-title">记录历史</text>
|
||||
<text class="hero-subtitle">按时间查看抽烟和忍住记录，随时回看自己的变化轨迹。</text>
|
||||
<view class="hero-stats">
|
||||
<view class="hero-stat">
|
||||
<text class="hero-stat-value">{{ filteredLogs.length }}</text>
|
||||
<text class="hero-stat-label">当前筛选</text>
|
||||
</view>
|
||||
<view class="hero-stat">
|
||||
<text class="hero-stat-value">{{ smokeCount }}</text>
|
||||
<text class="hero-stat-label">抽烟</text>
|
||||
</view>
|
||||
<view class="hero-stat">
|
||||
<text class="hero-stat-value">{{ resistedCount }}</text>
|
||||
<text class="hero-stat-label">忍住</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<text class="section-label">筛选记录</text>
|
||||
<view class="filters card">
|
||||
<view class="filters-sticky">
|
||||
<view class="filters">
|
||||
<view class="tabs">
|
||||
<view
|
||||
v-for="tab in tabs"
|
||||
@@ -169,9 +149,6 @@ const filteredLogs = computed(() => {
|
||||
return logs.filter(log => log.type === currentTab.value)
|
||||
})
|
||||
|
||||
const smokeCount = computed(() => filteredLogs.value.filter(log => log.type === 'smoke').length)
|
||||
const resistedCount = computed(() => filteredLogs.value.filter(log => log.type === 'resisted').length)
|
||||
|
||||
// 按日期分组
|
||||
const groupedLogs = computed(() => {
|
||||
return filteredLogs.value.reduce((groups, log) => {
|
||||
@@ -320,120 +297,63 @@ onShareAppMessage(() => {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%);
|
||||
padding: 24rpx 28rpx 0;
|
||||
background-color: #F5F7F6;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hero-card,
|
||||
.section,
|
||||
.filters,
|
||||
.scroll-container,
|
||||
.fab {
|
||||
.filters-sticky {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
border-radius: 24rpx;
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.14);
|
||||
box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
display: block;
|
||||
font-size: 38rpx;
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
color: #0D3D2E;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
font-size: 25rpx;
|
||||
line-height: 1.5;
|
||||
color: #52806E;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.hero-stat {
|
||||
flex: 1;
|
||||
background: rgba(52, 200, 160, 0.06);
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.1);
|
||||
border-radius: 20rpx;
|
||||
padding: 18rpx 14rpx;
|
||||
}
|
||||
|
||||
.hero-stat-value {
|
||||
display: block;
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #0D3D2E;
|
||||
}
|
||||
|
||||
.hero-stat-label {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #7aA898;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
display: block;
|
||||
margin: 0 0 14rpx 6rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #1a5c45;
|
||||
height: 120rpx;
|
||||
flex-shrink: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.filters {
|
||||
padding: 24rpx;
|
||||
position: fixed;
|
||||
left: 32rpx;
|
||||
right: 32rpx;
|
||||
z-index: 50;
|
||||
margin: 12rpx 0 0;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
border-radius: 22rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 6rpx;
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.14);
|
||||
box-shadow: 0 4rpx 16rpx rgba(52, 200, 160, 0.07);
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 14rpx 0;
|
||||
border-radius: 16rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 16rpx 0;
|
||||
border-radius: 20rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #7aA898;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.tab-active {
|
||||
background: #FFFFFF;
|
||||
color: #0D3D2E;
|
||||
box-shadow: 0 4rpx 12rpx rgba(52, 200, 160, 0.12);
|
||||
background: #10B981;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
display: block;
|
||||
margin: 0 0 18rpx 6rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -452,7 +372,7 @@ onShareAppMessage(() => {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 18rpx;
|
||||
background: linear-gradient(90deg, rgba(52, 200, 160, 0.08) 25%, rgba(52, 200, 160, 0.18) 50%, rgba(52, 200, 160, 0.08) 75%);
|
||||
background: linear-gradient(90deg, #EEEEEE 25%, #F5F5F5 50%, #EEEEEE 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
flex-shrink: 0;
|
||||
@@ -460,16 +380,15 @@ onShareAppMessage(() => {
|
||||
|
||||
.skeleton-card {
|
||||
flex: 1;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.14);
|
||||
box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.skeleton-line {
|
||||
height: 24rpx;
|
||||
background: linear-gradient(90deg, rgba(52, 200, 160, 0.08) 25%, rgba(52, 200, 160, 0.18) 50%, rgba(52, 200, 160, 0.08) 75%);
|
||||
background: linear-gradient(90deg, #EEEEEE 25%, #F5F5F5 50%, #EEEEEE 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
border-radius: 8rpx;
|
||||
@@ -508,42 +427,40 @@ onShareAppMessage(() => {
|
||||
.group-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #0D3D2E;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.group-count {
|
||||
font-size: 22rpx;
|
||||
color: #7aA898;
|
||||
background-color: rgba(52, 200, 160, 0.06);
|
||||
color: #999999;
|
||||
background-color: #F0F0F0;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.14);
|
||||
}
|
||||
|
||||
.group-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.log-card {
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx 24rpx 20rpx 24rpx;
|
||||
box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
overflow: hidden;
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.14);
|
||||
}
|
||||
|
||||
.log-card-resisted {
|
||||
background: linear-gradient(135deg, rgba(245, 255, 251, 0.96), rgba(255, 255, 255, 0.88));
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.log-card-smoke {
|
||||
background: linear-gradient(135deg, rgba(255, 250, 244, 0.96), rgba(255, 255, 255, 0.88));
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.log-bar {
|
||||
@@ -552,11 +469,11 @@ onShareAppMessage(() => {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 8rpx;
|
||||
background-color: #34C8A0;
|
||||
background-color: #10B981;
|
||||
}
|
||||
|
||||
.log-card-smoke .log-bar {
|
||||
background-color: #B45309;
|
||||
background-color: #F59E0B;
|
||||
}
|
||||
|
||||
.log-icon {
|
||||
@@ -572,13 +489,13 @@ onShareAppMessage(() => {
|
||||
}
|
||||
|
||||
.icon-resisted {
|
||||
background-color: rgba(52, 200, 160, 0.12);
|
||||
color: #1a8c62;
|
||||
background-color: #E8F5F0;
|
||||
color: #10B981;
|
||||
}
|
||||
|
||||
.icon-smoke {
|
||||
background-color: rgba(251, 191, 36, 0.14);
|
||||
color: #B45309;
|
||||
background-color: #FEF3C7;
|
||||
color: #D97706;
|
||||
}
|
||||
|
||||
.log-main {
|
||||
@@ -603,7 +520,7 @@ onShareAppMessage(() => {
|
||||
.log-time {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #0D3D2E;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.log-tag {
|
||||
@@ -614,13 +531,13 @@ onShareAppMessage(() => {
|
||||
}
|
||||
|
||||
.tag-smoke {
|
||||
background-color: rgba(251, 191, 36, 0.14);
|
||||
color: #B45309;
|
||||
background-color: #FEF3C7;
|
||||
color: #D97706;
|
||||
}
|
||||
|
||||
.tag-resisted {
|
||||
background-color: rgba(52, 200, 160, 0.12);
|
||||
color: #1a8c62;
|
||||
background-color: #E8F5F0;
|
||||
color: #10B981;
|
||||
}
|
||||
|
||||
.log-right {
|
||||
@@ -632,8 +549,8 @@ onShareAppMessage(() => {
|
||||
|
||||
.count-pill {
|
||||
font-size: 22rpx;
|
||||
color: #B45309;
|
||||
background-color: rgba(251, 191, 36, 0.14);
|
||||
color: #D97706;
|
||||
background-color: #FEF3C7;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
font-weight: 600;
|
||||
@@ -641,15 +558,15 @@ onShareAppMessage(() => {
|
||||
|
||||
.thumb-pill {
|
||||
font-size: 24rpx;
|
||||
background-color: rgba(52, 200, 160, 0.12);
|
||||
color: #1a8c62;
|
||||
background-color: #E8F5F0;
|
||||
color: #10B981;
|
||||
padding: 8rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
|
||||
.log-desc {
|
||||
font-size: 25rpx;
|
||||
color: #52806E;
|
||||
color: #666666;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
@@ -669,11 +586,10 @@ onShareAppMessage(() => {
|
||||
|
||||
.log-interval {
|
||||
font-size: 22rpx;
|
||||
color: #7aA898;
|
||||
background-color: rgba(52, 200, 160, 0.06);
|
||||
color: #999999;
|
||||
background-color: #F5F5F5;
|
||||
padding: 6rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.12);
|
||||
}
|
||||
|
||||
.log-actions {
|
||||
@@ -687,29 +603,24 @@ onShareAppMessage(() => {
|
||||
font-size: 22rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.18);
|
||||
color: #7aA898;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
color: #2563EB;
|
||||
border-color: rgba(37, 99, 235, 0.18);
|
||||
background-color: rgba(37, 99, 235, 0.08);
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
color: #DC2626;
|
||||
border-color: rgba(220, 38, 38, 0.16);
|
||||
background-color: rgba(220, 38, 38, 0.08);
|
||||
background-color: rgba(220, 38, 38, 0.06);
|
||||
}
|
||||
|
||||
.level-unknown {
|
||||
color: #7aA898;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.level-1 {
|
||||
color: #1a8c62;
|
||||
color: #10B981;
|
||||
}
|
||||
|
||||
.level-2 {
|
||||
@@ -734,36 +645,35 @@ onShareAppMessage(() => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 32rpx;
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx dashed rgba(52, 200, 160, 0.2);
|
||||
background: transparent;
|
||||
border-radius: 32rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 36rpx;
|
||||
background: rgba(52, 200, 160, 0.06);
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.14);
|
||||
background: #E8F5F0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #7aA898;
|
||||
color: #10B981;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 32rpx;
|
||||
color: #0D3D2E;
|
||||
color: #1A1A1A;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: 24rpx;
|
||||
color: #7aA898;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.loading-more, .no-more {
|
||||
@@ -773,7 +683,7 @@ onShareAppMessage(() => {
|
||||
|
||||
.loading-text, .no-more-text {
|
||||
font-size: 24rpx;
|
||||
color: #7aA898;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.fab {
|
||||
@@ -782,12 +692,12 @@ onShareAppMessage(() => {
|
||||
bottom: 140rpx;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
background: linear-gradient(180deg, #3DD9AE 0%, #34C8A0 100%);
|
||||
background: #10B981;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 12rpx 28rpx rgba(52, 200, 160, 0.28);
|
||||
box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.25);
|
||||
transition: all 0.3s;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,417 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="hero">
|
||||
<view class="hero-noise hero-noise-left"></view>
|
||||
<view class="hero-noise hero-noise-right"></view>
|
||||
<text class="hero-badge">赛博尼古丁测试</text>
|
||||
<text class="hero-title">10 道题，测出你的抽象戒烟人格</text>
|
||||
<text class="hero-desc">
|
||||
不是说教，也不是审判。我们用一点抽象和一点幽默，把戒烟这件事先聊轻一点。
|
||||
</text>
|
||||
<view class="hero-actions">
|
||||
<button class="cta cta-primary" @tap="startTest(false)">
|
||||
{{ draftExists ? '重新开始测试' : '立即开始测试' }}
|
||||
</button>
|
||||
<button v-if="draftExists" class="cta cta-secondary" @tap="startTest(true)">继续上次答题</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="panel latest-card" v-if="latestResult">
|
||||
<view class="panel-head">
|
||||
<text class="panel-label">你最近一次测出</text>
|
||||
<text class="panel-time">{{ latestTime }}</text>
|
||||
</view>
|
||||
<view class="latest-body">
|
||||
<view class="latest-avatar" :style="{ background: latestResult.color }">
|
||||
<text class="latest-emoji">{{ latestResult.emoji }}</text>
|
||||
</view>
|
||||
<view class="latest-copy">
|
||||
<text class="latest-name">{{ latestResult.name }}</text>
|
||||
<text class="latest-quote">“{{ latestResult.catchphrase }}”</text>
|
||||
<text class="latest-tag">{{ latestResult.difficultyText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="cta cta-dark" @tap="viewLatestResult">查看上次结果</button>
|
||||
</view>
|
||||
|
||||
<view class="panel">
|
||||
<text class="panel-title">你会看到什么</text>
|
||||
<view class="feature-list">
|
||||
<view class="feature-item">
|
||||
<text class="feature-index">01</text>
|
||||
<view class="feature-copy">
|
||||
<text class="feature-name">抽象人格结果</text>
|
||||
<text class="feature-desc">16 种戒烟人格画像，结果页可直接分享。</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="feature-item">
|
||||
<text class="feature-index">02</text>
|
||||
<view class="feature-copy">
|
||||
<text class="feature-name">个性化建议</text>
|
||||
<text class="feature-desc">每种人格都给你一套更贴合状态的起步动作。</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="feature-item">
|
||||
<text class="feature-index">03</text>
|
||||
<view class="feature-copy">
|
||||
<text class="feature-name">宽容失败的语气</text>
|
||||
<text class="feature-desc">不把复吸当羞耻，而是把它看成下一次优化的线索。</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="panel">
|
||||
<view class="panel-head">
|
||||
<text class="panel-title">部分人格预览</text>
|
||||
<text class="panel-subtitle">完整测试共 16 型</text>
|
||||
</view>
|
||||
<view class="type-grid">
|
||||
<view
|
||||
v-for="item in featuredTypes"
|
||||
:key="item.code"
|
||||
class="type-card"
|
||||
:style="{ borderColor: item.color }"
|
||||
>
|
||||
<text class="type-emoji">{{ item.emoji }}</text>
|
||||
<text class="type-name">{{ item.name }}</text>
|
||||
<text class="type-quote">“{{ item.catchphrase }}”</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="panel disclaimer">
|
||||
<text class="panel-title">说明</text>
|
||||
<text class="disclaimer-text">
|
||||
本测试偏娱乐和行为洞察，不构成医疗建议。真正想开始戒烟时，我们也会把你带回到实际可执行的打卡和计划里。
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad, onShareAppMessage, onShareTimeline, onShow } from '@dcloudio/uni-app'
|
||||
import { formatNSTITime, getLatestNSTIResult, getNSTIDraft, getNSTIPersonalityTypes, clearNSTIDraft } from '@/utils/nsti'
|
||||
|
||||
const latestResult = ref(null)
|
||||
const draftExists = ref(false)
|
||||
const featuredTypes = ref([])
|
||||
|
||||
const featuredOrder = ['N01', 'N02', 'N09', 'N16']
|
||||
|
||||
const latestTime = computed(() => formatNSTITime(latestResult.value?.completedAt))
|
||||
|
||||
function refreshState() {
|
||||
latestResult.value = getLatestNSTIResult()
|
||||
draftExists.value = !!getNSTIDraft()
|
||||
const allTypes = getNSTIPersonalityTypes()
|
||||
featuredTypes.value = featuredOrder.map((code) => allTypes[code]).filter(Boolean)
|
||||
}
|
||||
|
||||
function startTest(resume = false) {
|
||||
if (!resume) {
|
||||
clearNSTIDraft()
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: `/pages/nsti/test?resume=${resume ? '1' : '0'}`
|
||||
})
|
||||
}
|
||||
|
||||
function viewLatestResult() {
|
||||
if (!latestResult.value) {
|
||||
uni.showToast({ title: '还没有测试结果', icon: 'none' })
|
||||
return
|
||||
}
|
||||
uni.navigateTo({ url: `/pages/nsti/result?id=${latestResult.value.id}` })
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
refreshState()
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
refreshState()
|
||||
})
|
||||
|
||||
onShareAppMessage(() => ({
|
||||
title: '测测你的赛博尼古丁测试结果',
|
||||
path: '/pages/nsti/index'
|
||||
}))
|
||||
|
||||
onShareTimeline(() => ({
|
||||
title: '赛博尼古丁测试，看看你属于哪一型'
|
||||
}))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
padding: 32rpx 28rpx 48rpx;
|
||||
box-sizing: border-box;
|
||||
background:
|
||||
radial-gradient(circle at 12% 8%, rgba(255, 20, 147, 0.18), transparent 26%),
|
||||
radial-gradient(circle at 88% 0%, rgba(57, 255, 20, 0.16), transparent 28%),
|
||||
linear-gradient(180deg, #101322 0%, #1A1130 34%, #0F172A 100%);
|
||||
color: #F8FAFC;
|
||||
}
|
||||
|
||||
.hero,
|
||||
.panel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 36rpx;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 44rpx 36rpx;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 20, 147, 0.92) 0%, rgba(255, 107, 107, 0.92) 40%, rgba(57, 255, 20, 0.82) 100%);
|
||||
box-shadow: 0 28rpx 60rpx rgba(255, 20, 147, 0.2);
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(15, 23, 42, 0.18);
|
||||
backdrop-filter: blur(12rpx);
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
display: block;
|
||||
margin-top: 22rpx;
|
||||
font-size: 54rpx;
|
||||
line-height: 1.08;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
display: block;
|
||||
margin-top: 18rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.7;
|
||||
max-width: 620rpx;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18rpx;
|
||||
margin-top: 34rpx;
|
||||
}
|
||||
|
||||
.hero-noise {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(2rpx);
|
||||
opacity: 0.78;
|
||||
}
|
||||
|
||||
.hero-noise-left {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
right: -30rpx;
|
||||
top: -18rpx;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
.hero-noise-right {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
right: 40rpx;
|
||||
bottom: -120rpx;
|
||||
background: rgba(15, 23, 42, 0.18);
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin-top: 28rpx;
|
||||
padding: 32rpx 28rpx;
|
||||
background: rgba(10, 16, 33, 0.74);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 18rpx 42rpx rgba(0, 0, 0, 0.18);
|
||||
backdrop-filter: blur(18rpx);
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.panel-label,
|
||||
.panel-subtitle,
|
||||
.panel-time {
|
||||
font-size: 22rpx;
|
||||
color: rgba(226, 232, 240, 0.72);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
display: block;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.latest-card {
|
||||
background:
|
||||
linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(91, 33, 182, 0.14) 100%),
|
||||
rgba(10, 16, 33, 0.82);
|
||||
}
|
||||
|
||||
.latest-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
margin-top: 24rpx;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.latest-avatar {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
.latest-emoji {
|
||||
font-size: 52rpx;
|
||||
}
|
||||
|
||||
.latest-copy {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.latest-name {
|
||||
font-size: 38rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.latest-quote,
|
||||
.latest-tag,
|
||||
.feature-desc,
|
||||
.disclaimer-text,
|
||||
.type-quote {
|
||||
font-size: 24rpx;
|
||||
line-height: 1.65;
|
||||
color: rgba(226, 232, 240, 0.84);
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 22rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.feature-index {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 18rpx;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #39FF14;
|
||||
font-size: 24rpx;
|
||||
font-weight: 800;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.feature-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.feature-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.type-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 18rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.type-card {
|
||||
padding: 24rpx 22rpx;
|
||||
border-radius: 28rpx;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
|
||||
rgba(15, 23, 42, 0.88);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.16);
|
||||
min-height: 214rpx;
|
||||
}
|
||||
|
||||
.type-emoji {
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.type-name {
|
||||
display: block;
|
||||
margin-top: 14rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.type-quote {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.cta {
|
||||
width: 100%;
|
||||
min-height: 94rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 800;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cta::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cta-primary {
|
||||
color: #0F172A;
|
||||
background: linear-gradient(135deg, #39FF14 0%, #B5FF5A 100%);
|
||||
box-shadow: 0 20rpx 30rpx rgba(57, 255, 20, 0.24);
|
||||
}
|
||||
|
||||
.cta-secondary {
|
||||
background: rgba(15, 23, 42, 0.16);
|
||||
color: #FFFFFF;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.24);
|
||||
}
|
||||
|
||||
.cta-dark {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #FFFFFF;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.disclaimer-text {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,768 @@
|
||||
<template>
|
||||
<view class="page" v-if="result">
|
||||
<canvas
|
||||
canvas-id="nstiPosterCanvas"
|
||||
class="poster-canvas"
|
||||
disable-scroll
|
||||
></canvas>
|
||||
<view class="hero-card" :style="heroCardStyle">
|
||||
<view class="hero-logo-shell" v-if="result.logoUrl">
|
||||
<image class="hero-logo" :src="result.logoUrl" mode="widthFix"></image>
|
||||
</view>
|
||||
<text class="hero-badge">赛博尼古丁测试结果</text>
|
||||
<text class="hero-emoji">{{ result.emoji }} {{ result.name }}</text>
|
||||
<text class="hero-quote">“{{ result.catchphrase }}”</text>
|
||||
<view class="hero-stats">
|
||||
<view class="stat-pill">
|
||||
<text class="stat-label">戒烟难度</text>
|
||||
<text class="stat-value">{{ difficultyStars }}</text>
|
||||
</view>
|
||||
<view class="stat-pill">
|
||||
<text class="stat-label">同类人群</text>
|
||||
<text class="stat-value">{{ result.peerCount }} 人</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="panel">
|
||||
<text class="panel-title">人格画像</text>
|
||||
<text class="panel-body">{{ result.description }}</text>
|
||||
<view class="tag-list">
|
||||
<text v-for="tag in result.tags" :key="tag" class="tag-chip">{{ tag }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="panel">
|
||||
<view class="panel-head">
|
||||
<text class="panel-title">你的戒烟驱动</text>
|
||||
<text class="panel-time">{{ completedTime }}</text>
|
||||
</view>
|
||||
<view class="dimension-list">
|
||||
<view v-for="item in result.dimensionBreakdown" :key="item.key" class="dimension-item">
|
||||
<view class="dimension-labels">
|
||||
<text class="dimension-name">{{ item.key }} · {{ item.label }}</text>
|
||||
<text class="dimension-percent">{{ item.percentage }}%</text>
|
||||
</view>
|
||||
<view class="dimension-track">
|
||||
<view class="dimension-fill" :style="{ width: item.percentage + '%', background: item.color }"></view>
|
||||
</view>
|
||||
<text class="dimension-desc">{{ item.description }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="panel">
|
||||
<text class="panel-title">专属建议</text>
|
||||
<view class="advice-list">
|
||||
<view v-for="(item, index) in result.suggestions" :key="item" class="advice-item">
|
||||
<text class="advice-index">{{ index + 1 }}</text>
|
||||
<text class="advice-text">{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="panel">
|
||||
<text class="panel-title">现在就能开始的 3 步</text>
|
||||
<view class="action-list">
|
||||
<view v-for="item in result.actionPlan" :key="item" class="action-item">
|
||||
<text class="action-dot"></text>
|
||||
<text class="action-text">{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="panel">
|
||||
<text class="panel-title">和你最像的另外两型</text>
|
||||
<view class="match-list">
|
||||
<view v-for="item in secondaryMatches" :key="item.code" class="match-item">
|
||||
<view class="match-main">
|
||||
<view class="match-info">
|
||||
<image v-if="item.logoUrl" class="match-logo" :src="item.logoUrl" mode="aspectFit"></image>
|
||||
<view class="match-copy">
|
||||
<text class="match-name">{{ item.emoji }} {{ item.name }}</text>
|
||||
<text class="match-quote">{{ item.catchphrase }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="match-score">{{ item.percentage }}%</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cta-group">
|
||||
<button class="cta-primary" @tap="goToQuitJourney">开始我的戒烟之路</button>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button class="cta-secondary" @tap="handleSavePoster">分享我的抽象人格</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<button class="cta-secondary" @tap="handleShareFallback">复制分享文案</button>
|
||||
<!-- #endif -->
|
||||
<button class="cta-ghost" @tap="retakeTest">重测一次</button>
|
||||
</view>
|
||||
|
||||
<text class="disclaimer">本测试仅供娱乐与行为洞察，不构成医疗建议。如需专业戒烟支持，请咨询医生。</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, getCurrentInstance, ref } from 'vue'
|
||||
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
|
||||
import { useProfileStore } from '@/stores/profile'
|
||||
import { buildNSTIShareText, formatNSTITime, getLatestNSTIResult, renderDifficultyStars } from '@/utils/nsti'
|
||||
import { downloadMiniProgramTestCode } from '@/api/auth'
|
||||
|
||||
const profileStore = useProfileStore()
|
||||
const result = ref(null)
|
||||
const posterSaving = ref(false)
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
const difficultyStars = computed(() => renderDifficultyStars(result.value?.difficulty || 0))
|
||||
const completedTime = computed(() => formatNSTITime(result.value?.completedAt))
|
||||
const secondaryMatches = computed(() => (result.value?.topMatches || []).slice(1))
|
||||
const heroCardStyle = computed(() => ({
|
||||
background: `linear-gradient(135deg, ${result.value?.color || '#39FF14'} 0%, #0F172A 100%)`
|
||||
}))
|
||||
const shareTitle = computed(() => {
|
||||
if (!result.value) return '测测你的赛博尼古丁测试结果'
|
||||
return `我测出了「${result.value.name}」人格！`
|
||||
})
|
||||
|
||||
function loadResult() {
|
||||
const latest = getLatestNSTIResult()
|
||||
if (!latest) {
|
||||
uni.showToast({ title: '还没有测试结果', icon: 'none' })
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({ url: '/pages/nsti/index' })
|
||||
}, 600)
|
||||
return
|
||||
}
|
||||
result.value = latest
|
||||
}
|
||||
|
||||
function retakeTest() {
|
||||
uni.redirectTo({ url: '/pages/nsti/test?resume=0' })
|
||||
}
|
||||
|
||||
function goToQuitJourney() {
|
||||
if (profileStore.needOnboarding) {
|
||||
uni.navigateTo({ url: '/pages/onboarding/index' })
|
||||
return
|
||||
}
|
||||
uni.switchTab({ url: '/pages/index/index' })
|
||||
}
|
||||
|
||||
function handleShareFallback() {
|
||||
if (!result.value) return
|
||||
uni.setClipboardData({
|
||||
data: buildNSTIShareText(result.value),
|
||||
success: () => {
|
||||
uni.showToast({ title: '分享文案已复制', icon: 'success' })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function wrapText(ctx, text, x, y, maxWidth, lineHeight, maxLines = 2) {
|
||||
if (!text) return y
|
||||
let line = ''
|
||||
let lines = 0
|
||||
for (let i = 0; i < text.length; i += 1) {
|
||||
const testLine = line + text[i]
|
||||
if (ctx.measureText(testLine).width > maxWidth && line) {
|
||||
ctx.fillText(lines === maxLines - 1 ? `${line.slice(0, -1)}…` : line, x, y)
|
||||
y += lineHeight
|
||||
line = text[i]
|
||||
lines += 1
|
||||
if (lines >= maxLines) {
|
||||
return y
|
||||
}
|
||||
continue
|
||||
}
|
||||
line = testLine
|
||||
}
|
||||
if (line && lines < maxLines) {
|
||||
ctx.fillText(line, x, y)
|
||||
y += lineHeight
|
||||
}
|
||||
return y
|
||||
}
|
||||
|
||||
function splitTextLines(ctx, text, maxWidth, maxLines = 2) {
|
||||
if (!text) return []
|
||||
const lines = []
|
||||
let line = ''
|
||||
for (let i = 0; i < text.length; i += 1) {
|
||||
const testLine = line + text[i]
|
||||
if (ctx.measureText(testLine).width > maxWidth && line) {
|
||||
lines.push(line)
|
||||
line = text[i]
|
||||
if (lines.length >= maxLines) {
|
||||
break
|
||||
}
|
||||
continue
|
||||
}
|
||||
line = testLine
|
||||
}
|
||||
if (lines.length < maxLines && line) {
|
||||
lines.push(line)
|
||||
}
|
||||
if (lines.length > maxLines) {
|
||||
lines.length = maxLines
|
||||
}
|
||||
if (lines.length === maxLines) {
|
||||
const lastIndex = lines.length - 1
|
||||
let lastLine = lines[lastIndex]
|
||||
while (ctx.measureText(`${lastLine}…`).width > maxWidth && lastLine.length > 1) {
|
||||
lastLine = lastLine.slice(0, -1)
|
||||
}
|
||||
lines[lastIndex] = `${lastLine}…`
|
||||
}
|
||||
return lines
|
||||
}
|
||||
|
||||
function drawTextLines(ctx, lines, x, startY, lineHeight) {
|
||||
let y = startY
|
||||
lines.forEach((line) => {
|
||||
ctx.fillText(line, x, y)
|
||||
y += lineHeight
|
||||
})
|
||||
return y
|
||||
}
|
||||
|
||||
function roundRect(ctx, x, y, width, height, radius, fillStyle) {
|
||||
ctx.save()
|
||||
ctx.beginPath()
|
||||
ctx.setFillStyle(fillStyle)
|
||||
ctx.moveTo(x + radius, y)
|
||||
ctx.lineTo(x + width - radius, y)
|
||||
ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
|
||||
ctx.lineTo(x + width, y + height - radius)
|
||||
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
|
||||
ctx.lineTo(x + radius, y + height)
|
||||
ctx.quadraticCurveTo(x, y + height, x, y + height - radius)
|
||||
ctx.lineTo(x, y + radius)
|
||||
ctx.quadraticCurveTo(x, y, x + radius, y)
|
||||
ctx.closePath()
|
||||
ctx.fill()
|
||||
ctx.restore()
|
||||
}
|
||||
|
||||
function drawPoster(resultData, logoPath, qrPath) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const canvasId = 'nstiPosterCanvas'
|
||||
const ctx = uni.createCanvasContext(canvasId, proxy)
|
||||
const width = 750
|
||||
const height = 1660
|
||||
const cardX = 28
|
||||
const cardY = 34
|
||||
const cardWidth = 694
|
||||
const cardHeight = 1592
|
||||
const heroX = 56
|
||||
const heroY = 64
|
||||
const heroWidth = 638
|
||||
const heroHeight = 592
|
||||
|
||||
ctx.setFillStyle('#F6F3EC')
|
||||
ctx.fillRect(0, 0, width, height)
|
||||
|
||||
ctx.setFillStyle('#131A2C')
|
||||
ctx.fillRect(0, 0, width, 342)
|
||||
|
||||
roundRect(ctx, cardX, cardY, cardWidth, cardHeight, 36, '#FFFDF9')
|
||||
roundRect(ctx, heroX, heroY, heroWidth, heroHeight, 30, resultData.color || '#54D2B1')
|
||||
|
||||
ctx.setFillStyle('#FFFFFF')
|
||||
ctx.setFontSize(24)
|
||||
ctx.fillText('赛博尼古丁测试结果', 88, 112)
|
||||
|
||||
roundRect(ctx, 88, 146, 574, 232, 24, 'rgba(255,255,255,0.14)')
|
||||
if (logoPath) {
|
||||
ctx.drawImage(logoPath, 104, 162, 542, 200)
|
||||
}
|
||||
|
||||
ctx.setFillStyle('#FFFFFF')
|
||||
ctx.setFontSize(38)
|
||||
ctx.fillText(`${resultData.emoji} ${resultData.name}`, 88, 432)
|
||||
ctx.setFontSize(26)
|
||||
const quoteLines = splitTextLines(ctx, `“${resultData.catchphrase}”`, 540, 3)
|
||||
const heroQuoteEndY = drawTextLines(ctx, quoteLines, 88, 478, 38)
|
||||
|
||||
ctx.setFillStyle('rgba(255,255,255,0.9)')
|
||||
ctx.setFontSize(22)
|
||||
const pillY = Math.max(548, heroQuoteEndY + 18)
|
||||
roundRect(ctx, 88, pillY - 32, 238, 54, 18, 'rgba(255,255,255,0.16)')
|
||||
roundRect(ctx, 350, pillY - 32, 238, 54, 18, 'rgba(255,255,255,0.16)')
|
||||
ctx.fillText(`戒烟难度：${difficultyStars.value}`, 106, pillY)
|
||||
ctx.fillText(`同类人群：${resultData.peerCount} 人`, 368, pillY)
|
||||
|
||||
const adviceCardY = heroY + heroHeight + 26
|
||||
const adviceCardHeight = 372
|
||||
const actionsCardY = adviceCardY + adviceCardHeight + 26
|
||||
const actionsCardHeight = 304
|
||||
const qrCardY = actionsCardY + actionsCardHeight + 26
|
||||
const qrCardHeight = 254
|
||||
|
||||
roundRect(ctx, 56, adviceCardY, 638, adviceCardHeight, 28, '#FFF4EA')
|
||||
roundRect(ctx, 56, actionsCardY, 638, actionsCardHeight, 28, '#F7F8FC')
|
||||
roundRect(ctx, 56, qrCardY, 638, qrCardHeight, 28, '#FFF4EA')
|
||||
|
||||
ctx.setFillStyle('#111827')
|
||||
ctx.setFontSize(32)
|
||||
ctx.fillText('你的专属建议', 88, adviceCardY + 56)
|
||||
|
||||
ctx.setFontSize(24)
|
||||
ctx.setFillStyle('#475467')
|
||||
let currentY = adviceCardY + 116
|
||||
;(resultData.suggestions || []).slice(0, 3).forEach((item, index) => {
|
||||
ctx.setFillStyle('#F59E0B')
|
||||
ctx.beginPath()
|
||||
ctx.arc(96, currentY - 8, 8, 0, Math.PI * 2)
|
||||
ctx.fill()
|
||||
ctx.setFillStyle('#334155')
|
||||
const adviceLines = splitTextLines(ctx, `${index + 1}. ${item}`, 520, 3)
|
||||
currentY = drawTextLines(ctx, adviceLines, 118, currentY, 34) + 12
|
||||
})
|
||||
|
||||
ctx.setFillStyle('#111827')
|
||||
ctx.setFontSize(32)
|
||||
ctx.fillText('现在就能开始的 3 步', 88, actionsCardY + 56)
|
||||
ctx.setFillStyle('#475467')
|
||||
ctx.setFontSize(24)
|
||||
currentY = actionsCardY + 114
|
||||
;(resultData.actionPlan || []).slice(0, 3).forEach((item, index) => {
|
||||
ctx.setFillStyle('#FF8E53')
|
||||
ctx.beginPath()
|
||||
ctx.arc(98, currentY - 10, 10, 0, Math.PI * 2)
|
||||
ctx.fill()
|
||||
ctx.setFillStyle('#334155')
|
||||
const actionLines = splitTextLines(ctx, `${index + 1}. ${item}`, 520, 2)
|
||||
currentY = drawTextLines(ctx, actionLines, 130, currentY, 34) + 12
|
||||
})
|
||||
|
||||
ctx.setFillStyle('#111827')
|
||||
ctx.setFontSize(28)
|
||||
ctx.fillText('扫码直接进入测试', 88, qrCardY + 58)
|
||||
ctx.setFillStyle('#667085')
|
||||
ctx.setFontSize(22)
|
||||
const qrLines = splitTextLines(ctx, '保存到相册后，发给朋友扫一扫就能直接进入赛博尼古丁测试。', 336, 3)
|
||||
drawTextLines(ctx, qrLines, 88, qrCardY + 102, 32)
|
||||
|
||||
if (qrPath) {
|
||||
roundRect(ctx, 500, qrCardY + 32, 152, 152, 20, '#FFFFFF')
|
||||
ctx.drawImage(qrPath, 512, qrCardY + 44, 128, 128)
|
||||
}
|
||||
|
||||
ctx.setFillStyle('#98A2B3')
|
||||
ctx.setFontSize(20)
|
||||
ctx.fillText('本测试仅供娱乐与行为洞察，不构成医疗建议。', 88, cardY + cardHeight - 42)
|
||||
|
||||
ctx.draw(false, () => {
|
||||
uni.canvasToTempFilePath(
|
||||
{
|
||||
canvasId,
|
||||
x: 0,
|
||||
y: 0,
|
||||
width,
|
||||
height,
|
||||
destWidth: width * 2,
|
||||
destHeight: height * 2,
|
||||
fileType: 'png',
|
||||
quality: 1,
|
||||
success: (res) => resolve(res.tempFilePath),
|
||||
fail: (err) => reject(err)
|
||||
},
|
||||
proxy
|
||||
)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function downloadImage(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!url) {
|
||||
resolve('')
|
||||
return
|
||||
}
|
||||
uni.downloadFile({
|
||||
url,
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200 && res.tempFilePath) {
|
||||
resolve(res.tempFilePath)
|
||||
return
|
||||
}
|
||||
reject(new Error(`下载图片失败: ${res.statusCode || 'unknown'}`))
|
||||
},
|
||||
fail: (err) => reject(err)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function savePosterToAlbum(filePath) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath,
|
||||
success: resolve,
|
||||
fail: reject
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
async function handleSavePoster() {
|
||||
if (!result.value || posterSaving.value) return
|
||||
posterSaving.value = true
|
||||
uni.showLoading({ title: '生成海报中...', mask: true })
|
||||
try {
|
||||
const [logoPath, qrPath] = await Promise.all([
|
||||
downloadImage(result.value.logoUrl),
|
||||
downloadMiniProgramTestCode({ path: 'pages/nsti/test?resume=0', width: 280 })
|
||||
])
|
||||
const posterPath = await drawPoster(result.value, logoPath, qrPath)
|
||||
await savePosterToAlbum(posterPath)
|
||||
uni.showToast({ title: '已保存到相册', icon: 'success' })
|
||||
} catch (error) {
|
||||
console.error('save poster error:', error)
|
||||
const message = error?.errMsg || error?.message || ''
|
||||
if (message.includes('auth deny') || message.includes('authorize')) {
|
||||
uni.showModal({
|
||||
title: '需要相册权限',
|
||||
content: '请允许保存到相册，这样才能把分享海报存到本地。',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.openSetting()
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({ title: '海报生成失败', icon: 'none' })
|
||||
}
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
posterSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
loadResult()
|
||||
})
|
||||
|
||||
onShareAppMessage(() => ({
|
||||
title: shareTitle.value,
|
||||
path: `/pages/nsti/index?from=share&type=${result.value?.typeCode || ''}`
|
||||
}))
|
||||
|
||||
onShareTimeline(() => ({
|
||||
title: `${shareTitle.value} ${result.value?.emoji || ''}`
|
||||
}))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
padding: 28rpx 24rpx 48rpx;
|
||||
box-sizing: border-box;
|
||||
background:
|
||||
radial-gradient(circle at 12% 4%, rgba(57, 255, 20, 0.14), transparent 28%),
|
||||
radial-gradient(circle at 88% 10%, rgba(255, 20, 147, 0.18), transparent 30%),
|
||||
linear-gradient(180deg, #0F172A 0%, #111827 36%, #1E293B 100%);
|
||||
color: #F8FAFC;
|
||||
}
|
||||
|
||||
.poster-canvas {
|
||||
position: fixed;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
width: 750rpx;
|
||||
height: 1660rpx;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-card,
|
||||
.panel {
|
||||
border-radius: 34rpx;
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
padding: 40rpx 30rpx;
|
||||
box-shadow: 0 28rpx 60rpx rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.hero-logo-shell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 18rpx 18rpx 28rpx;
|
||||
margin-bottom: 10rpx;
|
||||
border-radius: 30rpx;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.hero-logo {
|
||||
width: 100%;
|
||||
max-width: 560rpx;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
padding: 10rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hero-emoji {
|
||||
display: block;
|
||||
margin-top: 22rpx;
|
||||
font-size: 36rpx;
|
||||
line-height: 1.08;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.hero-quote {
|
||||
display: block;
|
||||
margin-top: 14rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.7;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16rpx;
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
|
||||
.stat-pill {
|
||||
padding: 20rpx;
|
||||
border-radius: 24rpx;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.stat-label,
|
||||
.panel-time,
|
||||
.dimension-desc,
|
||||
.match-quote,
|
||||
.disclaimer {
|
||||
font-size: 22rpx;
|
||||
color: rgba(226, 232, 240, 0.76);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 800;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin-top: 24rpx;
|
||||
padding: 30rpx 26rpx;
|
||||
background: rgba(15, 23, 42, 0.72);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 16rpx 36rpx rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(18rpx);
|
||||
}
|
||||
|
||||
.panel-head,
|
||||
.match-main,
|
||||
.dimension-labels {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 18rpx;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
display: block;
|
||||
font-size: 34rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
display: block;
|
||||
margin-top: 18rpx;
|
||||
font-size: 27rpx;
|
||||
line-height: 1.8;
|
||||
color: rgba(248, 250, 252, 0.92);
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
padding: 10rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.dimension-list,
|
||||
.advice-list,
|
||||
.action-list,
|
||||
.match-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18rpx;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.dimension-track {
|
||||
height: 14rpx;
|
||||
margin-top: 10rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dimension-fill {
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.dimension-name,
|
||||
.match-name,
|
||||
.action-text,
|
||||
.advice-text {
|
||||
font-size: 26rpx;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.dimension-name,
|
||||
.match-name {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.dimension-percent,
|
||||
.match-score {
|
||||
font-size: 24rpx;
|
||||
font-weight: 800;
|
||||
color: #39FF14;
|
||||
}
|
||||
|
||||
.dimension-desc {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.advice-item,
|
||||
.action-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.advice-index {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 14rpx;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(57, 255, 20, 0.14);
|
||||
color: #39FF14;
|
||||
font-size: 22rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.action-dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
margin-top: 12rpx;
|
||||
border-radius: 50%;
|
||||
background: #FF1493;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.match-item {
|
||||
padding: 22rpx 20rpx;
|
||||
border-radius: 24rpx;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.match-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.match-copy {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.match-logo {
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
border-radius: 18rpx;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.match-quote {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.cta-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
|
||||
.cta-primary,
|
||||
.cta-secondary,
|
||||
.cta-ghost {
|
||||
width: 100%;
|
||||
min-height: 94rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 800;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cta-primary::after,
|
||||
.cta-secondary::after,
|
||||
.cta-ghost::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cta-primary {
|
||||
background: linear-gradient(135deg, #39FF14 0%, #89FF62 100%);
|
||||
color: #0F172A;
|
||||
}
|
||||
|
||||
.cta-secondary {
|
||||
background: linear-gradient(135deg, #FF1493 0%, #FF6B6B 100%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.cta-ghost {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #FFFFFF;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.disclaimer {
|
||||
display: block;
|
||||
margin-top: 24rpx;
|
||||
padding: 0 6rpx;
|
||||
line-height: 1.7;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,367 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="topbar">
|
||||
<view class="topbar-head">
|
||||
<text class="topbar-kicker">赛博尼古丁测试</text>
|
||||
<text class="topbar-progress">已完成 {{ answeredCount }}/{{ questions.length }}</text>
|
||||
</view>
|
||||
<view class="progress-track">
|
||||
<view class="progress-fill" :style="{ width: progress + '%' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="question-card" v-if="currentQuestion">
|
||||
<view class="question-meta">
|
||||
<text class="question-count">第 {{ currentIndex + 1 }} / {{ questions.length }} 题</text>
|
||||
<text class="question-tip">{{ currentQuestion.subtitle }}</text>
|
||||
</view>
|
||||
<text class="question-title">{{ currentQuestion.title }}</text>
|
||||
|
||||
<view class="option-list">
|
||||
<view
|
||||
v-for="(option, index) in currentQuestion.options"
|
||||
:key="option.key"
|
||||
class="option-card"
|
||||
:class="{ active: selectedIndex === index }"
|
||||
@tap="selectOption(option, index)"
|
||||
>
|
||||
<view class="option-badge">{{ option.key }}</view>
|
||||
<view class="option-copy">
|
||||
<text class="option-text">{{ option.text }}</text>
|
||||
</view>
|
||||
<text class="option-check">{{ selectedIndex === index ? '已选' : '选择' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="helper-card">
|
||||
<text class="helper-title">作答建议</text>
|
||||
<text class="helper-text">按第一直觉选就好，不用追求“正确”。这个测试更想看你平时最真实的惯性。</text>
|
||||
</view>
|
||||
|
||||
<view class="footer-actions">
|
||||
<button class="ghost-btn" :disabled="currentIndex === 0" @tap="prevQuestion">上一题</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { calculateNSTIResult, clearNSTIDraft, getNSTIDraft, getNSTIQuestions, saveNSTIDraft, saveNSTIResult } from '@/utils/nsti'
|
||||
|
||||
const questions = ref(getNSTIQuestions())
|
||||
const currentIndex = ref(0)
|
||||
const answers = ref([])
|
||||
const autoAdvancing = ref(false)
|
||||
|
||||
const currentQuestion = computed(() => questions.value[currentIndex.value] || null)
|
||||
const selectedIndex = computed(() => answers.value[currentIndex.value]?.selectedIndex ?? null)
|
||||
const answeredCount = computed(() => answers.value.filter(Boolean).length)
|
||||
const progress = computed(() => Math.round(((currentIndex.value + 1) / questions.value.length) * 100))
|
||||
|
||||
function initialAnswers() {
|
||||
return Array.from({ length: questions.value.length }, () => null)
|
||||
}
|
||||
|
||||
function persistDraft() {
|
||||
saveNSTIDraft({
|
||||
currentIndex: currentIndex.value,
|
||||
answers: answers.value,
|
||||
updatedAt: new Date().toISOString()
|
||||
})
|
||||
}
|
||||
|
||||
function loadDraft() {
|
||||
const draft = getNSTIDraft()
|
||||
if (!draft || !Array.isArray(draft.answers)) {
|
||||
answers.value = initialAnswers()
|
||||
currentIndex.value = 0
|
||||
return
|
||||
}
|
||||
answers.value = draft.answers.concat(initialAnswers()).slice(0, questions.value.length)
|
||||
currentIndex.value = Math.min(Number(draft.currentIndex || 0), questions.value.length - 1)
|
||||
}
|
||||
|
||||
function startFresh() {
|
||||
clearNSTIDraft()
|
||||
answers.value = initialAnswers()
|
||||
currentIndex.value = 0
|
||||
}
|
||||
|
||||
function selectOption(option, selectedOptionIndex) {
|
||||
answers.value[currentIndex.value] = {
|
||||
questionId: currentQuestion.value.id,
|
||||
selectedIndex: selectedOptionIndex,
|
||||
dimension: option.key,
|
||||
text: option.text,
|
||||
weights: option.weights
|
||||
}
|
||||
persistDraft()
|
||||
|
||||
if (autoAdvancing.value) return
|
||||
autoAdvancing.value = true
|
||||
|
||||
setTimeout(() => {
|
||||
if (currentIndex.value >= questions.value.length - 1) {
|
||||
submitTest()
|
||||
} else {
|
||||
currentIndex.value += 1
|
||||
persistDraft()
|
||||
uni.pageScrollTo({ scrollTop: 0, duration: 250 })
|
||||
}
|
||||
autoAdvancing.value = false
|
||||
}, 180)
|
||||
}
|
||||
|
||||
function ensureSelected() {
|
||||
if (selectedIndex.value !== null) return true
|
||||
uni.showToast({ title: '先选一个更像你的答案', icon: 'none' })
|
||||
return false
|
||||
}
|
||||
|
||||
function nextQuestion() {
|
||||
if (!ensureSelected()) return
|
||||
if (currentIndex.value < questions.value.length - 1) {
|
||||
currentIndex.value += 1
|
||||
persistDraft()
|
||||
uni.pageScrollTo({ scrollTop: 0, duration: 250 })
|
||||
}
|
||||
}
|
||||
|
||||
function prevQuestion() {
|
||||
if (autoAdvancing.value) return
|
||||
if (currentIndex.value === 0) return
|
||||
currentIndex.value -= 1
|
||||
persistDraft()
|
||||
uni.pageScrollTo({ scrollTop: 0, duration: 250 })
|
||||
}
|
||||
|
||||
function submitTest() {
|
||||
if (!ensureSelected()) return
|
||||
if (answers.value.some((item) => !item)) {
|
||||
uni.showToast({ title: '还有题目没答完', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
uni.showLoading({ title: '生成人格中...', mask: true })
|
||||
const result = calculateNSTIResult(answers.value)
|
||||
saveNSTIResult(result)
|
||||
uni.redirectTo({ url: `/pages/nsti/result?id=${result.id}` })
|
||||
} catch (error) {
|
||||
console.error('calculate NSTI result error:', error)
|
||||
uni.showToast({ title: '生成结果失败', icon: 'none' })
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options?.resume === '1') {
|
||||
loadDraft()
|
||||
return
|
||||
}
|
||||
startFresh()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
padding: 28rpx 26rpx 42rpx;
|
||||
box-sizing: border-box;
|
||||
background:
|
||||
radial-gradient(circle at 0% 0%, rgba(255, 159, 28, 0.18), transparent 32%),
|
||||
radial-gradient(circle at 100% 10%, rgba(58, 134, 255, 0.14), transparent 30%),
|
||||
linear-gradient(180deg, #FFF7ED 0%, #FFF3F0 36%, #F8FAFC 100%);
|
||||
}
|
||||
|
||||
.topbar,
|
||||
.question-card,
|
||||
.helper-card {
|
||||
border-radius: 32rpx;
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
box-shadow: 0 18rpx 40rpx rgba(15, 23, 42, 0.08);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.72);
|
||||
backdrop-filter: blur(18rpx);
|
||||
}
|
||||
|
||||
.topbar {
|
||||
padding: 26rpx 24rpx;
|
||||
}
|
||||
|
||||
.topbar-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18rpx;
|
||||
}
|
||||
|
||||
.topbar-kicker,
|
||||
.topbar-progress,
|
||||
.question-count,
|
||||
.question-tip,
|
||||
.helper-title {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.topbar-kicker {
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.topbar-progress,
|
||||
.question-tip {
|
||||
color: #667085;
|
||||
}
|
||||
|
||||
.progress-track {
|
||||
height: 14rpx;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(148, 163, 184, 0.18);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #FF7A59 0%, #FFB36A 100%);
|
||||
}
|
||||
|
||||
.question-card {
|
||||
margin-top: 24rpx;
|
||||
padding: 36rpx 28rpx;
|
||||
}
|
||||
|
||||
.question-meta {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 18rpx;
|
||||
}
|
||||
|
||||
.question-count {
|
||||
font-weight: 800;
|
||||
color: #FF1493;
|
||||
}
|
||||
|
||||
.question-title {
|
||||
display: block;
|
||||
margin-top: 22rpx;
|
||||
font-size: 46rpx;
|
||||
line-height: 1.25;
|
||||
font-weight: 800;
|
||||
color: #101828;
|
||||
}
|
||||
|
||||
.option-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18rpx;
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
|
||||
.option-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18rpx;
|
||||
padding: 24rpx 22rpx;
|
||||
border-radius: 28rpx;
|
||||
background: #FFFFFF;
|
||||
border: 2rpx solid rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.option-card.active {
|
||||
border-color: rgba(255, 20, 147, 0.42);
|
||||
box-shadow: 0 16rpx 30rpx rgba(255, 20, 147, 0.12);
|
||||
transform: translateY(-2rpx);
|
||||
}
|
||||
|
||||
.option-badge {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 22rpx;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #111827 0%, #475467 100%);
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.option-copy {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.option-text {
|
||||
font-size: 30rpx;
|
||||
line-height: 1.5;
|
||||
color: #101828;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.option-check {
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: #FF1493;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.helper-card {
|
||||
margin-top: 24rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 20, 147, 0.08), rgba(57, 255, 20, 0.08)),
|
||||
rgba(255, 255, 255, 0.82);
|
||||
}
|
||||
|
||||
.helper-title {
|
||||
display: block;
|
||||
font-weight: 800;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.helper-text {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.7;
|
||||
color: #475467;
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
display: flex;
|
||||
margin-top: 28rpx;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.ghost-btn {
|
||||
width: 100%;
|
||||
min-height: 94rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 800;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ghost-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ghost-btn {
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
color: #111827;
|
||||
border: 2rpx solid rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.ghost-btn[disabled] {
|
||||
opacity: 0.42;
|
||||
}
|
||||
</style>
|
||||
+190
-70
@@ -17,13 +17,20 @@
|
||||
:class="{ 'mode-switch-item-active': formData.mode === item.value }"
|
||||
@tap="selectMode(item.value)"
|
||||
>
|
||||
<text class="mode-switch-icon">{{ item.icon }}</text>
|
||||
<text class="mode-switch-title">{{ item.label }}</text>
|
||||
<text class="mode-switch-desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 戒烟日期（戒烟模式可见） -->
|
||||
<view v-if="formData.mode === 'quit'" class="form-section">
|
||||
<text class="section-label">戒烟开始日期</text>
|
||||
<picker mode="date" :value="formData.quit_date" @change="onQuitDateChange">
|
||||
<view class="time-picker">{{ formData.quit_date || '请选择日期' }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<!-- 每天抽烟数量 -->
|
||||
<view class="form-section">
|
||||
<view class="section-row">
|
||||
@@ -99,13 +106,40 @@
|
||||
v-model="priceYuan"
|
||||
class="inline-field"
|
||||
placeholder="25"
|
||||
placeholder-style="color: #9CC5B5"
|
||||
placeholder-style="color: #CCCCCC"
|
||||
/>
|
||||
<text class="inline-unit">元/包</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 成就风格 -->
|
||||
<view v-if="achievementThemes.length > 0" class="form-section">
|
||||
<text class="section-label">成就称号风格</text>
|
||||
<text class="section-hint">打卡越久，称号越高</text>
|
||||
<view class="theme-list">
|
||||
<view
|
||||
v-for="theme in achievementThemes"
|
||||
:key="theme.id"
|
||||
class="theme-card"
|
||||
:class="{ 'theme-card-active': formData.achievement_theme_id === theme.id }"
|
||||
@tap="formData.achievement_theme_id = theme.id"
|
||||
>
|
||||
<view class="theme-header">
|
||||
<text class="theme-icon">{{ theme.icon }}</text>
|
||||
<text class="theme-name">{{ theme.name }}</text>
|
||||
</view>
|
||||
<view class="theme-levels">
|
||||
<text
|
||||
v-for="(level, idx) in theme.levels"
|
||||
:key="level.id"
|
||||
class="theme-level"
|
||||
>{{ level.name }}<text v-if="idx < theme.levels.length - 1" class="theme-arrow"> → </text></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom-space"></view>
|
||||
</scroll-view>
|
||||
|
||||
@@ -123,6 +157,7 @@ import { onShareAppMessage } from '@dcloudio/uni-app'
|
||||
import { useProfileStore } from '@/stores/profile'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useLogin } from '@/hooks/useLogin'
|
||||
import * as api from '@/api'
|
||||
|
||||
const profileStore = useProfileStore()
|
||||
const userStore = useUserStore()
|
||||
@@ -130,12 +165,18 @@ const { waitForLogin } = useLogin()
|
||||
|
||||
const navBarHeight = ref(0)
|
||||
const modeSaving = ref(false)
|
||||
const achievementThemes = ref([])
|
||||
|
||||
const modeOptions = [
|
||||
{ value: 'quit', label: '戒烟打卡', desc: '按天打卡，坚持戒烟', icon: '🌿' },
|
||||
{ value: 'record', label: '记录抽烟', desc: '按支数记录变化趋势', icon: '📊' }
|
||||
{ value: 'quit', label: '戒烟打卡', desc: '按天打卡，坚持戒烟' },
|
||||
{ value: 'record', label: '记录抽烟', desc: '按支数记录变化趋势' }
|
||||
]
|
||||
|
||||
function todayStr() {
|
||||
const d = new Date()
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
const formData = ref({
|
||||
mode: 'record',
|
||||
baseline_cigs_per_day: 10,
|
||||
@@ -144,7 +185,9 @@ const formData = ref({
|
||||
smoke_motivations: [],
|
||||
wake_up_time: '07:30',
|
||||
sleep_time: '23:00',
|
||||
pack_price_cent: 2500
|
||||
pack_price_cent: 2500,
|
||||
quit_date: todayStr(),
|
||||
achievement_theme_id: null
|
||||
})
|
||||
|
||||
const priceYuan = ref('25')
|
||||
@@ -201,6 +244,10 @@ async function selectMode(mode) {
|
||||
}
|
||||
}
|
||||
|
||||
function onQuitDateChange(e) {
|
||||
formData.value.quit_date = e.detail.value
|
||||
}
|
||||
|
||||
function onWakeTimeChange(e) {
|
||||
formData.value.wake_up_time = e.detail.value
|
||||
}
|
||||
@@ -238,6 +285,17 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
await waitForLogin()
|
||||
|
||||
try {
|
||||
const res = await api.getAchievementThemes()
|
||||
achievementThemes.value = res.data?.themes || []
|
||||
if (achievementThemes.value.length > 0 && !formData.value.achievement_theme_id) {
|
||||
formData.value.achievement_theme_id = achievementThemes.value[0].id
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('loadAchievementThemes error:', e)
|
||||
}
|
||||
|
||||
try {
|
||||
const profileData = await profileStore.fetchProfile()
|
||||
if (profileData?.profile) {
|
||||
@@ -253,7 +311,9 @@ onMounted(async () => {
|
||||
smoke_motivations: Array.isArray(profile.smoke_motivations) ? profile.smoke_motivations : formData.value.smoke_motivations,
|
||||
wake_up_time: profile.wake_up_time || formData.value.wake_up_time,
|
||||
sleep_time: profile.sleep_time || formData.value.sleep_time,
|
||||
pack_price_cent: profile.pack_price_cent || formData.value.pack_price_cent
|
||||
pack_price_cent: profile.pack_price_cent || formData.value.pack_price_cent,
|
||||
quit_date: profile.quit_date ? profile.quit_date.split('T')[0] : formData.value.quit_date,
|
||||
achievement_theme_id: profile.achievement_theme_id || formData.value.achievement_theme_id
|
||||
}
|
||||
if (profile.pack_price_cent) {
|
||||
priceYuan.value = String((profile.pack_price_cent / 100).toFixed(2)).replace(/\.00$/, '')
|
||||
@@ -275,56 +335,58 @@ onShareAppMessage(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ── 页面基础 ── */
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%);
|
||||
background-color: #F5F7F6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-area {
|
||||
padding: 20rpx 32rpx 16rpx;
|
||||
background: transparent;
|
||||
background: linear-gradient(180deg, #DDF3EB 0%, #F5F7F6 100%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
display: block;
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #0D3D2E;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.nav-subtitle {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: 24rpx;
|
||||
color: #52806E;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* ── 滚动区 ── */
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 0 28rpx;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ── 卡片式表单区块 ── */
|
||||
.form-section {
|
||||
margin-bottom: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
border-radius: 24rpx;
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.14);
|
||||
box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
|
||||
background: #FFFFFF;
|
||||
border-radius: 32rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
display: block;
|
||||
margin-bottom: 18rpx;
|
||||
font-size: 26rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #1a5c45;
|
||||
letter-spacing: 0.4rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.section-row {
|
||||
@@ -333,58 +395,54 @@ onShareAppMessage(() => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ── 模式选择 ── */
|
||||
.section-row .section-label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mode-switch {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.mode-switch-item {
|
||||
padding: 28rpx 20rpx;
|
||||
flex: 1;
|
||||
padding: 24rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border: 2rpx solid rgba(52, 200, 160, 0.1);
|
||||
box-shadow: 0 2rpx 10rpx rgba(52, 200, 160, 0.04);
|
||||
background: #F9FBFA;
|
||||
border: 2rpx solid #F0F0F0;
|
||||
transition: all 0.2s;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mode-switch-item-active {
|
||||
background: rgba(52, 200, 160, 0.09);
|
||||
border-color: rgba(52, 200, 160, 0.45);
|
||||
box-shadow: 0 4rpx 16rpx rgba(52, 200, 160, 0.14);
|
||||
}
|
||||
|
||||
.mode-switch-icon {
|
||||
display: block;
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 10rpx;
|
||||
background: #E8F5F0;
|
||||
border-color: #10B981;
|
||||
}
|
||||
|
||||
.mode-switch-title {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #0D3D2E;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.mode-switch-item-active .mode-switch-title {
|
||||
color: #1a8c62;
|
||||
color: #10B981;
|
||||
}
|
||||
|
||||
.mode-switch-desc {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: 21rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.5;
|
||||
color: #7aA898;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.mode-switch-item-active .mode-switch-desc {
|
||||
color: #3a9e78;
|
||||
color: #10B981;
|
||||
}
|
||||
|
||||
/* ── 数字步进器 ── */
|
||||
.inline-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -395,41 +453,38 @@ onShareAppMessage(() => {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(52, 200, 160, 0.1);
|
||||
background: #E8F5F0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 38rpx;
|
||||
color: #34C8A0;
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.25);
|
||||
color: #10B981;
|
||||
}
|
||||
|
||||
.inline-value {
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #0D3D2E;
|
||||
color: #1A1A1A;
|
||||
min-width: 52rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inline-unit {
|
||||
font-size: 24rpx;
|
||||
color: #7aA898;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.inline-field {
|
||||
width: 100rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #0D3D2E;
|
||||
color: #1A1A1A;
|
||||
text-align: center;
|
||||
background: rgba(52, 200, 160, 0.06);
|
||||
background: #F5F7F6;
|
||||
padding: 10rpx 14rpx;
|
||||
border-radius: 12rpx;
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.2);
|
||||
}
|
||||
|
||||
/* ── 标签选择 ── */
|
||||
.options-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -439,20 +494,17 @@ onShareAppMessage(() => {
|
||||
.option-tag {
|
||||
padding: 14rpx 26rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
font-size: 25rpx;
|
||||
color: #4a7a66;
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.18);
|
||||
background: #F5F5F5;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.option-tag-active {
|
||||
background: rgba(52, 200, 160, 0.12);
|
||||
border-color: rgba(52, 200, 160, 0.45);
|
||||
color: #1a7f61;
|
||||
background: #E8F5F0;
|
||||
color: #10B981;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── 作息时间 ── */
|
||||
.time-row {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
@@ -464,23 +516,91 @@ onShareAppMessage(() => {
|
||||
|
||||
.time-label {
|
||||
font-size: 22rpx;
|
||||
color: #7aA898;
|
||||
color: #999999;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.time-picker {
|
||||
background: rgba(52, 200, 160, 0.06);
|
||||
background: #F5F7F6;
|
||||
padding: 18rpx 20rpx;
|
||||
border-radius: 14rpx;
|
||||
border-radius: 16rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #0D3D2E;
|
||||
color: #1A1A1A;
|
||||
text-align: center;
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.2);
|
||||
}
|
||||
|
||||
/* ── 底部空白 + 按钮 ── */
|
||||
.section-hint {
|
||||
display: block;
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
margin-top: -10rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.theme-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.theme-card {
|
||||
padding: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #F9FBFA;
|
||||
border: 2rpx solid #F0F0F0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.theme-card-active {
|
||||
background: #E8F5F0;
|
||||
border-color: #10B981;
|
||||
}
|
||||
|
||||
.theme-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.theme-icon {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.theme-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.theme-card-active .theme-name {
|
||||
color: #10B981;
|
||||
}
|
||||
|
||||
.theme-levels {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.theme-level {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.theme-card-active .theme-level {
|
||||
color: #10B981;
|
||||
}
|
||||
|
||||
.theme-arrow {
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
.theme-card-active .theme-arrow {
|
||||
color: #6EE7B7;
|
||||
}
|
||||
|
||||
.bottom-space {
|
||||
height: 160rpx;
|
||||
}
|
||||
@@ -490,19 +610,19 @@ onShareAppMessage(() => {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 20rpx 28rpx;
|
||||
padding: 20rpx 32rpx;
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
background: linear-gradient(180deg, transparent 0%, rgba(240, 251, 247, 0.97) 35%);
|
||||
background: linear-gradient(180deg, transparent 0%, rgba(245, 247, 246, 0.97) 35%);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
height: 96rpx;
|
||||
background: linear-gradient(180deg, #3DD9AE 0%, #34C8A0 100%);
|
||||
background: #10B981;
|
||||
border-radius: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 12rpx 28rpx rgba(52, 200, 160, 0.28);
|
||||
box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.25);
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
|
||||
+137
-3
@@ -6,10 +6,28 @@
|
||||
<view class="section">
|
||||
<text class="section-label">当前账号</text>
|
||||
<view class="user-section card">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
||||
<image class="avatar" :src="userAvatar" mode="aspectFill"></image>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<image class="avatar" :src="userAvatar" mode="aspectFill" @tap="onChooseAvatarH5"></image>
|
||||
<!-- #endif -->
|
||||
<view class="user-copy">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<input
|
||||
type="nickname"
|
||||
class="nickname-input"
|
||||
:value="userStore.user?.nickname || ''"
|
||||
placeholder="点击设置昵称"
|
||||
@blur="onNicknameChange"
|
||||
/>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<text class="user-name">{{ userName }}</text>
|
||||
<text class="user-desc">已连接戒烟记录与统计数据</text>
|
||||
<!-- #endif -->
|
||||
<text class="user-desc">点击头像或昵称可修改</text>
|
||||
<view class="user-meta">
|
||||
<text class="user-pill">{{ modeText }}</text>
|
||||
<text class="user-pill user-pill-muted">{{ shareToken ? '分享已启用' : '分享未生成' }}</text>
|
||||
@@ -41,6 +59,19 @@
|
||||
|
||||
<view class="menu-divider"></view>
|
||||
|
||||
<view class="menu-item" @tap="goNSTI">
|
||||
<view class="menu-icon menu-icon-nsti">
|
||||
<text class="menu-glyph">测</text>
|
||||
</view>
|
||||
<view class="menu-content">
|
||||
<text class="menu-label">赛博尼古丁测试</text>
|
||||
<text class="menu-desc">{{ nstiDesc }}</text>
|
||||
</view>
|
||||
<text class="menu-arrow">›</text>
|
||||
</view>
|
||||
|
||||
<view class="menu-divider"></view>
|
||||
|
||||
<view class="menu-item" @tap="goOnboarding">
|
||||
<view class="menu-icon menu-icon-accent">
|
||||
<text class="menu-glyph">问</text>
|
||||
@@ -91,10 +122,12 @@
|
||||
<script setup>
|
||||
import { computed, ref, onMounted } from 'vue'
|
||||
import { onShareAppMessage, onShow } from '@dcloudio/uni-app'
|
||||
import * as api from '@/api'
|
||||
import { useProfileStore } from '@/stores/profile'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useLogin } from '@/hooks/useLogin'
|
||||
import { createShare } from '@/api/smoke'
|
||||
import { updateUserProfile, uploadFile } from '@/api/auth'
|
||||
import { getLatestNSTIResult } from '@/utils/nsti'
|
||||
|
||||
const profileStore = useProfileStore()
|
||||
const userStore = useUserStore()
|
||||
@@ -104,6 +137,7 @@ const shareToken = ref('')
|
||||
const shareExpireAt = ref('')
|
||||
const shareLoading = ref(false)
|
||||
const navBarHeight = ref(0)
|
||||
const latestNSTIResult = ref(null)
|
||||
|
||||
const userName = computed(() => userStore.user?.nickname || '戒烟用户')
|
||||
const userAvatar = computed(() => userStore.user?.avatar_url || 'https://linghu-wmr.oss-cn-beijing.aliyuncs.com/smt/avatar.png')
|
||||
@@ -112,6 +146,9 @@ const modeText = computed(() => {
|
||||
if (userStore.mode === 'record') return '记录抽烟'
|
||||
return '未选择'
|
||||
})
|
||||
const nstiDesc = computed(() => latestNSTIResult.value
|
||||
? `你上次测出：${latestNSTIResult.value.name}`
|
||||
: '10 道题，测测你是哪一种抽象戒烟人格')
|
||||
|
||||
const shareDesc = computed(() => {
|
||||
if (!shareToken.value) {
|
||||
@@ -154,7 +191,7 @@ async function prepareShareToken(showToast = false) {
|
||||
if (shareLoading.value) return
|
||||
shareLoading.value = true
|
||||
try {
|
||||
const res = await api.createShare({ days: 7 })
|
||||
const res = await createShare({ days: 7 })
|
||||
shareToken.value = res.data?.share_token || ''
|
||||
shareExpireAt.value = res.data?.expire_at || ''
|
||||
if (showToast) {
|
||||
@@ -184,10 +221,71 @@ function previewSharePage() {
|
||||
})
|
||||
}
|
||||
|
||||
async function onChooseAvatar(e) {
|
||||
const avatarUrl = e.detail.avatarUrl
|
||||
if (!avatarUrl) return
|
||||
try {
|
||||
uni.showLoading({ title: '上传头像...' })
|
||||
const uploadRes = await uploadFile(avatarUrl)
|
||||
await doUpdateProfile({ avatar_url: uploadRes.url })
|
||||
} catch (err) {
|
||||
console.error('头像上传失败:', err)
|
||||
uni.showToast({ title: '头像更新失败', icon: 'none' })
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
|
||||
function onChooseAvatarH5() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album'],
|
||||
success: async (res) => {
|
||||
const tempPath = res.tempFilePaths[0]
|
||||
try {
|
||||
uni.showLoading({ title: '上传头像...' })
|
||||
const uploadRes = await uploadFile(tempPath)
|
||||
await doUpdateProfile({ avatar_url: uploadRes.url })
|
||||
} catch (err) {
|
||||
console.error('头像上传失败:', err)
|
||||
uni.showToast({ title: '头像更新失败', icon: 'none' })
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function onNicknameChange(e) {
|
||||
const nickname = (e.detail.value || '').trim()
|
||||
if (!nickname || nickname === userStore.user?.nickname) return
|
||||
try {
|
||||
await doUpdateProfile({ nickname })
|
||||
} catch (err) {
|
||||
uni.showToast({ title: '昵称更新失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
async function doUpdateProfile(data) {
|
||||
try {
|
||||
const res = await updateUserProfile(data)
|
||||
userStore.updateUser(res.data)
|
||||
uni.showToast({ title: '修改成功', icon: 'success' })
|
||||
} catch (e) {
|
||||
console.error('doUpdateProfile error:', e)
|
||||
uni.showToast({ title: '修改失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
function goOnboarding() {
|
||||
uni.navigateTo({ url: '/pages/onboarding/index' })
|
||||
}
|
||||
|
||||
function goNSTI() {
|
||||
uni.navigateTo({ url: '/pages/nsti/index' })
|
||||
}
|
||||
|
||||
function clearCache() {
|
||||
uni.showModal({
|
||||
title: '清除缓存',
|
||||
@@ -229,6 +327,7 @@ onShow(async () => {
|
||||
await waitForLogin()
|
||||
await profileStore.fetchProfile()
|
||||
await prepareShareToken(false)
|
||||
latestNSTIResult.value = getLatestNSTIResult()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -283,6 +382,21 @@ onShow(async () => {
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.avatar-btn {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
line-height: 1;
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
@@ -298,6 +412,18 @@ onShow(async () => {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.nickname-input {
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #1A1A1A;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
@@ -368,6 +494,10 @@ onShow(async () => {
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.menu-icon-nsti {
|
||||
background: linear-gradient(135deg, #FFE0F1 0%, #E6FFDE 100%);
|
||||
}
|
||||
|
||||
.menu-glyph {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
@@ -377,6 +507,10 @@ onShow(async () => {
|
||||
color: #10B981;
|
||||
}
|
||||
|
||||
.menu-icon-nsti .menu-glyph {
|
||||
color: #C2187A;
|
||||
}
|
||||
|
||||
.menu-icon-muted .menu-glyph {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
@@ -288,91 +288,43 @@ function addDays(date, offset) {
|
||||
<style scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 52%, #E9F0EC 100%);
|
||||
padding: 20rpx;
|
||||
background-color: #F5F7F6;
|
||||
padding: 24rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.page-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 8rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 255, 255, 0.68);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.72);
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
display: block;
|
||||
margin-top: 2rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.5;
|
||||
color: #52806E;
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 253, 252, 0.94) 100%);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
backdrop-filter: blur(20px);
|
||||
background: #FFFFFF;
|
||||
border-radius: 32rpx;
|
||||
padding: 22rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.06);
|
||||
box-shadow:
|
||||
0 20rpx 44rpx rgba(15, 23, 42, 0.06),
|
||||
0 6rpx 14rpx rgba(15, 23, 42, 0.03),
|
||||
inset 0 1rpx 0 rgba(255, 255, 255, 0.88);
|
||||
}
|
||||
|
||||
.card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
left: -72rpx;
|
||||
top: -72rpx;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(52, 200, 160, 0.14) 0%, rgba(52, 200, 160, 0) 72%);
|
||||
pointer-events: none;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.month-bar {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.month-arrow {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 18rpx;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
|
||||
border: 2rpx solid rgba(15, 23, 42, 0.06);
|
||||
box-shadow: 0 14rpx 28rpx rgba(15, 23, 42, 0.07);
|
||||
font-size: 40rpx;
|
||||
color: #1a8c62;
|
||||
background: #F5F7F6;
|
||||
font-size: 36rpx;
|
||||
color: #1A1A1A;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.month-arrow-disabled {
|
||||
opacity: 0.4;
|
||||
box-shadow: none;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.month-copy {
|
||||
@@ -382,76 +334,69 @@ function addDays(date, offset) {
|
||||
|
||||
.month-title {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
font-weight: 800;
|
||||
color: #111827;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.month-subtitle {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
margin-top: 4rpx;
|
||||
font-size: 22rpx;
|
||||
color: #6b7280;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.summary-row {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 14rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.summary-chip {
|
||||
flex: 1;
|
||||
padding: 16rpx 14rpx;
|
||||
border-radius: 22rpx;
|
||||
background: linear-gradient(180deg, rgba(240, 252, 248, 0.96) 0%, rgba(247, 251, 249, 0.96) 100%);
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.05);
|
||||
box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
|
||||
border-radius: 16rpx;
|
||||
background: #F5F7F6;
|
||||
}
|
||||
|
||||
.summary-chip-soft {
|
||||
background: linear-gradient(180deg, #fbfcfc 0%, #f7faf8 100%);
|
||||
background: #F5F7F6;
|
||||
}
|
||||
|
||||
.summary-chip-label {
|
||||
display: block;
|
||||
font-size: 20rpx;
|
||||
color: #7aA898;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.summary-chip-value-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6rpx;
|
||||
gap: 4rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.summary-chip-value {
|
||||
font-size: 34rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
color: #111827;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.summary-chip-unit {
|
||||
font-size: 20rpx;
|
||||
color: #6b7280;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.calendar-legend {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 14rpx;
|
||||
margin-bottom: 14rpx;
|
||||
padding: 12rpx 14rpx;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 14rpx 16rpx;
|
||||
border-radius: 16rpx;
|
||||
background: linear-gradient(180deg, #fafcfb 0%, #f5f8f6 100%);
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.05);
|
||||
background: #F9FBFA;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
@@ -467,124 +412,107 @@ function addDays(date, offset) {
|
||||
}
|
||||
|
||||
.legend-dot-smoke {
|
||||
background: #1a8c62;
|
||||
background: #10B981;
|
||||
}
|
||||
|
||||
.legend-dot-resisted {
|
||||
background: #a7d9c6;
|
||||
background: #A7F3D0;
|
||||
}
|
||||
|
||||
.legend-text {
|
||||
font-size: 21rpx;
|
||||
color: #4b5563;
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.legend-tip {
|
||||
margin-left: auto;
|
||||
font-size: 20rpx;
|
||||
color: #9ca3af;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
.weekday-row {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
margin-bottom: 12rpx;
|
||||
padding: 0 4rpx;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.weekday-item {
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
color: #7aA898;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.calendar-grid {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
gap: 10rpx;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.calendar-cell {
|
||||
min-height: 138rpx;
|
||||
padding: 14rpx 10rpx 12rpx;
|
||||
border-radius: 22rpx;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
|
||||
border: 1rpx solid rgba(15, 23, 42, 0.05);
|
||||
aspect-ratio: 1 / 1.15;
|
||||
padding: 10rpx 6rpx 8rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #F9FBFA;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
box-shadow:
|
||||
inset 0 1rpx 0 rgba(255, 255, 255, 0.92),
|
||||
0 8rpx 18rpx rgba(15, 23, 42, 0.04);
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.calendar-cell-selected {
|
||||
background: linear-gradient(180deg, rgba(240, 252, 248, 0.98) 0%, rgba(247, 252, 249, 0.96) 100%);
|
||||
border-color: rgba(52, 200, 160, 0.24);
|
||||
box-shadow:
|
||||
inset 0 1rpx 0 rgba(255, 255, 255, 0.96),
|
||||
0 12rpx 22rpx rgba(29, 163, 111, 0.08);
|
||||
background: #E8F5F0;
|
||||
border: 2rpx solid #10B981;
|
||||
}
|
||||
|
||||
.calendar-cell-today {
|
||||
box-shadow:
|
||||
inset 0 0 0 2rpx rgba(26, 140, 98, 0.16),
|
||||
0 10rpx 20rpx rgba(15, 23, 42, 0.04);
|
||||
background: #E8F5F0;
|
||||
}
|
||||
|
||||
.calendar-cell-muted {
|
||||
opacity: 0.42;
|
||||
box-shadow: none;
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.calendar-cell-disabled {
|
||||
opacity: 0.3;
|
||||
box-shadow: none;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.calendar-cell-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.calendar-day {
|
||||
font-size: 24rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
color: #123329;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.calendar-today-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 50%;
|
||||
color: #1a8c62;
|
||||
background: #1a8c62;
|
||||
background: #10B981;
|
||||
}
|
||||
|
||||
.calendar-count-wrap {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4rpx;
|
||||
gap: 2rpx;
|
||||
}
|
||||
|
||||
.calendar-count-value {
|
||||
font-size: 34rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
font-weight: 800;
|
||||
color: #14936d;
|
||||
color: #10B981;
|
||||
}
|
||||
|
||||
.calendar-count-unit {
|
||||
font-size: 18rpx;
|
||||
font-size: 16rpx;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.bottom-safe {
|
||||
|
||||
+43
-12
@@ -283,6 +283,12 @@ const weeklyTrendItems = computed(() => {
|
||||
})
|
||||
})
|
||||
|
||||
function safeNumber(value) {
|
||||
if (value === undefined || value === null || value === '') return 0
|
||||
const num = Number(value)
|
||||
return Number.isNaN(num) ? 0 : num
|
||||
}
|
||||
|
||||
function calDotClass(count) {
|
||||
if (count === 0) return 'cal-dot-zero'
|
||||
if (count <= 3) return 'cal-dot-low'
|
||||
@@ -290,10 +296,15 @@ function calDotClass(count) {
|
||||
return 'cal-dot-high'
|
||||
}
|
||||
|
||||
const savedMoneyText = computed(() => {
|
||||
const savedMoneyCent = computed(() => {
|
||||
const money = statsData.value?.money
|
||||
if (!money || !money.available) return '--'
|
||||
return `¥${(money.saved_cent / 100).toFixed(2)}`
|
||||
if (!money || !money.available) return 0
|
||||
return safeNumber(money.saved_cent)
|
||||
})
|
||||
|
||||
const savedMoneyText = computed(() => {
|
||||
if (!moneyAvailable.value) return '--'
|
||||
return `¥${(savedMoneyCent.value / 100).toFixed(2)}`
|
||||
})
|
||||
|
||||
const moneyAvailable = computed(() => !!statsData.value?.money?.available)
|
||||
@@ -301,13 +312,13 @@ const moneyAvailable = computed(() => !!statsData.value?.money?.available)
|
||||
const moneyExpectedTotal = computed(() => {
|
||||
const money = statsData.value?.money
|
||||
if (!money || !money.available) return 0
|
||||
return Number(money.expected_total) || 0
|
||||
return safeNumber(money.expected_total)
|
||||
})
|
||||
|
||||
const moneyActualTotal = computed(() => {
|
||||
const money = statsData.value?.money
|
||||
if (!money || !money.available) return 0
|
||||
return Number(money.actual_total) || 0
|
||||
return safeNumber(money.actual_total)
|
||||
})
|
||||
|
||||
const moneySubtitle = computed(() => {
|
||||
@@ -318,16 +329,17 @@ const moneySubtitle = computed(() => {
|
||||
const moneyTargetCent = computed(() => {
|
||||
const money = statsData.value?.money
|
||||
if (!money || !money.available) return 0
|
||||
const { expected_total, pack_price_cent, cigs_per_pack } = money
|
||||
if (!expected_total || !pack_price_cent || !cigs_per_pack) return 0
|
||||
return Math.round((expected_total / cigs_per_pack) * pack_price_cent)
|
||||
const expectedTotal = safeNumber(money.expected_total)
|
||||
const packPriceCent = safeNumber(money.pack_price_cent)
|
||||
const cigsPerPack = safeNumber(money.cigs_per_pack)
|
||||
if (expectedTotal <= 0 || packPriceCent <= 0 || cigsPerPack <= 0) return 0
|
||||
return Math.round((expectedTotal / cigsPerPack) * packPriceCent)
|
||||
})
|
||||
|
||||
const moneyPercent = computed(() => {
|
||||
const money = statsData.value?.money
|
||||
const target = moneyTargetCent.value
|
||||
if (!money || !money.available || target <= 0) return 0
|
||||
const percent = Math.round((money.saved_cent / target) * 100)
|
||||
if (!moneyAvailable.value || target <= 0) return 0
|
||||
const percent = Math.round((savedMoneyCent.value / target) * 100)
|
||||
return Math.min(Math.max(percent, 0), 100)
|
||||
})
|
||||
|
||||
@@ -486,10 +498,17 @@ onShareAppMessage(() => {
|
||||
|
||||
/* ── Tab 切换 ── */
|
||||
.segment-wrap {
|
||||
padding: 8rpx 0 20rpx;
|
||||
position: relative;
|
||||
height: 148rpx;
|
||||
flex-shrink: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.segment {
|
||||
position: fixed;
|
||||
left: 28rpx;
|
||||
right: 28rpx;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
padding: 6rpx;
|
||||
@@ -497,6 +516,18 @@ onShareAppMessage(() => {
|
||||
gap: 6rpx;
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.14);
|
||||
box-shadow: 0 4rpx 16rpx rgba(52, 200, 160, 0.07);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.segment::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -12rpx -8rpx -10rpx;
|
||||
border-radius: 34rpx;
|
||||
background: linear-gradient(180deg, rgba(230, 247, 242, 0.96) 0%, rgba(240, 251, 247, 0.88) 72%, rgba(240, 251, 247, 0) 100%);
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.segment-item {
|
||||
|
||||
@@ -23,6 +23,11 @@ export const useUserStore = defineStore('user', {
|
||||
storage.set(USER_MODE_KEY, mode)
|
||||
},
|
||||
|
||||
updateUser(fields) {
|
||||
this.user = { ...this.user, ...fields }
|
||||
storage.set(USER_KEY, this.user)
|
||||
},
|
||||
|
||||
logout() {
|
||||
this.user = null
|
||||
this.sessionKey = null
|
||||
|
||||
@@ -0,0 +1,565 @@
|
||||
export const NSTI_DIMENSIONS = {
|
||||
A: {
|
||||
key: 'A',
|
||||
name: '外部驱动',
|
||||
label: '社交/外部归因',
|
||||
description: '容易被场景、人情和外部压力牵着走',
|
||||
color: '#FF5D73'
|
||||
},
|
||||
B: {
|
||||
key: 'B',
|
||||
name: '情绪拉扯',
|
||||
label: '情绪/矛盾',
|
||||
description: '容易在焦虑、愤怒和自我矛盾中反复横跳',
|
||||
color: '#FF9F1C'
|
||||
},
|
||||
C: {
|
||||
key: 'C',
|
||||
name: '习惯黑洞',
|
||||
label: '习惯/逃避',
|
||||
description: '容易被惯性、空虚感和逃避机制拖住',
|
||||
color: '#7A5CFA'
|
||||
},
|
||||
D: {
|
||||
key: 'D',
|
||||
name: '行动模式',
|
||||
label: '行动/自律',
|
||||
description: '更容易靠执行力、计划和目标感推动自己',
|
||||
color: '#00C48C'
|
||||
}
|
||||
}
|
||||
|
||||
export const NSTI_PERSONALITY_TYPES = {
|
||||
N01: {
|
||||
code: 'N01',
|
||||
name: '赛博戒烟菩萨',
|
||||
emoji: '🧘',
|
||||
catchphrase: '施主，这根抽完贫僧就真的戒了',
|
||||
description: '嘴上说着戒烟，手却依然很诚实。每次抽烟都有愧疚感，但下一根总能找到理由。',
|
||||
difficulty: 3,
|
||||
difficultyText: '嘴上戒了，手没戒',
|
||||
peerCount: 12847,
|
||||
color: '#54D2B1',
|
||||
abstractRank: 92,
|
||||
tags: ['嘴硬体软', '赛博自律', '口头戒烟'],
|
||||
suggestions: [
|
||||
'把“我在戒烟”设成手机壁纸，每天看见一次就提醒一次。',
|
||||
'下次想点烟时先延迟 3 分钟，让冲动先过峰值。',
|
||||
'把“最后一根”换成“下一根先不抽”，减少自我欺骗。',
|
||||
'用 App 记录抽烟次数，用数据给自己拆台。'
|
||||
],
|
||||
actionPlan: [
|
||||
'今天开始只做一件事：把下一根往后拖 3 分钟。',
|
||||
'把最常抽烟的一个场景换掉，比如先离开工位或阳台。',
|
||||
'今晚回顾一次记录，别评价自己，只看事实。'
|
||||
],
|
||||
shareTemplate: '我是赛博戒烟菩萨🧘，嘴上戒了，手还没戒。'
|
||||
},
|
||||
N02: {
|
||||
code: 'N02',
|
||||
name: '传奇耐戒王',
|
||||
emoji: '👑',
|
||||
catchphrase: '戒了100次，成功率0%，但嘴还是硬的',
|
||||
description: '戒烟次数比大多数人努力的次数还多。总会复吸，但也总会重新开局，是嘴硬也是韧性。',
|
||||
difficulty: 5,
|
||||
difficultyText: '反复戒烟，永不成功',
|
||||
peerCount: 10432,
|
||||
color: '#F59E0B',
|
||||
abstractRank: 88,
|
||||
tags: ['反复横跳', '高韧性', '不服输'],
|
||||
suggestions: [
|
||||
'别只盯连续天数，开始记录“复吸间隔”有没有拉长。',
|
||||
'每次复吸都记一句原因，找出最常见的触发场景。',
|
||||
'把目标改成“比上次多撑半天”，不要一口吃成狠人。',
|
||||
'你不是失败太多，而是尝试次数已经领先大多数人。'
|
||||
],
|
||||
actionPlan: [
|
||||
'回想最近一次复吸，写下当时的地点、情绪和人。',
|
||||
'给自己设一个小目标：这周只比上周少抽 5 根。',
|
||||
'把“又失败了”改成“我找到一个新漏洞”。'
|
||||
],
|
||||
shareTemplate: '我是传奇耐戒王👑，戒了很多次，但我还没打算认输。'
|
||||
},
|
||||
N03: {
|
||||
code: 'N03',
|
||||
name: '小丑皇',
|
||||
emoji: '🃏',
|
||||
catchphrase: '最后一根说了100遍',
|
||||
description: 'flag 立得快，倒得也快。擅长在“就这一根”和“我真要戒了”之间来回表演。',
|
||||
difficulty: 4,
|
||||
difficultyText: '经典 flag 制造机',
|
||||
peerCount: 9271,
|
||||
color: '#FF4D6D',
|
||||
abstractRank: 96,
|
||||
tags: ['经典打脸', 'flag王者', '自我欺骗'],
|
||||
suggestions: [
|
||||
'下次别说“最后一根”，只做“下一根不点”。',
|
||||
'每说一次狠话，就往储蓄罐里放 10 块钱。',
|
||||
'发朋友圈前先把手边那包烟移走，降低秒打脸概率。',
|
||||
'别靠情绪发誓，靠环境设计来帮你。'
|
||||
],
|
||||
actionPlan: [
|
||||
'今天取消所有狠话，只执行一个动作：烟别放手边。',
|
||||
'最容易打脸的时间段先准备替代动作，比如喝水或嚼口香糖。',
|
||||
'今晚统计一次你今天没说出口的 flag。'
|
||||
],
|
||||
shareTemplate: '我是小丑皇🃏，最后一根说了100遍，这次想少说一句。'
|
||||
},
|
||||
N04: {
|
||||
code: 'N04',
|
||||
name: '朋友圈影帝',
|
||||
emoji: '🎭',
|
||||
catchphrase: '我的戒烟是演给别人看的',
|
||||
description: '在别人的目光里很能忍，一到没人看时就恢复原形。你其实很会控，只是还没把观众从外部换成自己。',
|
||||
difficulty: 3,
|
||||
difficultyText: '发圈时戒，私下猛抽',
|
||||
peerCount: 8619,
|
||||
color: '#9B5DE5',
|
||||
abstractRank: 84,
|
||||
tags: ['表演型', '外部评价', '在意人设'],
|
||||
suggestions: [
|
||||
'既然在别人面前能忍，就试着把“别人面前”延长到全天。',
|
||||
'把表演冲动转成打卡冲动，让结果替你说话。',
|
||||
'选择一个最信任的人，只向他汇报真实进度。',
|
||||
'这次别为了观众而戒，为了自己的肺演全套。'
|
||||
],
|
||||
actionPlan: [
|
||||
'今天只对一个人说实话：你最容易在哪个场景破功。',
|
||||
'给自己建一个低调打卡，记录真实抽烟数量。',
|
||||
'明天试一次“没人看也不抽”的一小时练习。'
|
||||
],
|
||||
shareTemplate: '我是朋友圈影帝🎭，这次想把“演给别人看”改成“为自己认真做”。'
|
||||
},
|
||||
N05: {
|
||||
code: 'N05',
|
||||
name: '社交老烟枪',
|
||||
emoji: '🤝',
|
||||
catchphrase: '递烟必接，面子大于健康',
|
||||
description: '一个人时未必抽，见到熟人烟瘾自动上线。你不是缺意志力，是太难拒绝人情场。',
|
||||
difficulty: 4,
|
||||
difficultyText: '社交驱动型烟民',
|
||||
peerCount: 11903,
|
||||
color: '#FF7A59',
|
||||
abstractRank: 72,
|
||||
tags: ['面子优先', '递烟必接', '人情压力'],
|
||||
suggestions: [
|
||||
'提前准备拒绝话术，比如“戒了，你抽你的”。',
|
||||
'社交时手里拿杯水或口香糖，减少条件反射。',
|
||||
'真正的朋友不会因为你不接烟就跟你翻脸。',
|
||||
'你需要练的不是戒烟，是说“不”。'
|
||||
],
|
||||
actionPlan: [
|
||||
'先挑一个最熟的人练习拒绝，降低心理门槛。',
|
||||
'把下一次饭局定义成“只拒一根烟”的实验。',
|
||||
'结束后复盘：别人真的介意了吗？'
|
||||
],
|
||||
shareTemplate: '我是社交老烟枪🤝，面子很大，肺想先请个假。'
|
||||
},
|
||||
N06: {
|
||||
code: 'N06',
|
||||
name: '焦虑制造者',
|
||||
emoji: '😤',
|
||||
catchphrase: '一焦虑就想抽，越抽越焦虑',
|
||||
description: '烟像情绪止痛片，但药效一过，烦躁和担心又回来。你最难的不是烟，是情绪出口太单一。',
|
||||
difficulty: 5,
|
||||
difficultyText: '情绪驱动型',
|
||||
peerCount: 9984,
|
||||
color: '#FF8C42',
|
||||
abstractRank: 68,
|
||||
tags: ['焦虑循环', '情绪依赖', '高压模式'],
|
||||
suggestions: [
|
||||
'想抽时先做 10 次慢呼吸，让身体从应激里退半步。',
|
||||
'准备一个替代减压动作：快走、捏泡泡纸、写两行字都行。',
|
||||
'把“我想抽烟”翻译成“我现在很烦/很怕/很空”。',
|
||||
'烟不是解药，更像短时麻醉。'
|
||||
],
|
||||
actionPlan: [
|
||||
'今天先记下三次最想抽烟的情绪时刻。',
|
||||
'选一个替代动作，只在今天试一次，不要求完美。',
|
||||
'睡前看一遍记录，找出最常见的情绪词。'
|
||||
],
|
||||
shareTemplate: '我是焦虑制造者😤，烟像止痛片，但我想找真正的出口。'
|
||||
},
|
||||
N07: {
|
||||
code: 'N07',
|
||||
name: '丧尸模式',
|
||||
emoji: '💀',
|
||||
catchphrase: '完全无意识，手自己找烟',
|
||||
description: '很多时候不是你决定要抽，是身体直接执行了老程序。抽完才回神，是你最典型的日常。',
|
||||
difficulty: 4,
|
||||
difficultyText: '习惯性烟民',
|
||||
peerCount: 9356,
|
||||
color: '#6B7280',
|
||||
abstractRank: 64,
|
||||
tags: ['无意识', '条件反射', '惯性'],
|
||||
suggestions: [
|
||||
'把烟和打火机挪远，增加获取阻力。',
|
||||
'换掉最习惯抽烟的位置，让身体先卡壳。',
|
||||
'准备口香糖或吸管，让手和嘴都有替代动作。',
|
||||
'你不是没有意志力，只是习惯太自动。'
|
||||
],
|
||||
actionPlan: [
|
||||
'先清掉一个高频抽烟点位的烟具。',
|
||||
'今天设三个整点提醒，问自己“我现在在干嘛”。',
|
||||
'把第一根无意识烟拖延 5 分钟。'
|
||||
],
|
||||
shareTemplate: '我是丧尸模式💀，手比脑子快一步，正在把控制权夺回来。'
|
||||
},
|
||||
N08: {
|
||||
code: 'N08',
|
||||
name: '拖延大师',
|
||||
emoji: '📅',
|
||||
catchphrase: '明天开始戒，永远明天',
|
||||
description: '你不是没准备好，是太擅长用“准备”代替行动。明天很完美，但永远不在今天发生。',
|
||||
difficulty: 3,
|
||||
difficultyText: '日期幻觉症患者',
|
||||
peerCount: 11308,
|
||||
color: '#3A86FF',
|
||||
abstractRank: 70,
|
||||
tags: ['明天再说', '无限准备', '行动延迟'],
|
||||
suggestions: [
|
||||
'别设“明天开始”，直接从下一根不抽开始。',
|
||||
'把目标从“彻底戒掉”缩成“先撑 24 小时”。',
|
||||
'给自己一个立刻可执行的动作，比如先不买下一包。',
|
||||
'你已经准备够了，差的是开机键。'
|
||||
],
|
||||
actionPlan: [
|
||||
'今天只做一个动作：别提前补货。',
|
||||
'设一个 24 小时倒计时，看自己能不能撑到明天同一时间。',
|
||||
'把“以后再说”换成“现在先做一格”。'
|
||||
],
|
||||
shareTemplate: '我是拖延大师📅，明天太远，所以这次从今天先动一格。'
|
||||
},
|
||||
N09: {
|
||||
code: 'N09',
|
||||
name: '真正狠人',
|
||||
emoji: '🚀',
|
||||
catchphrase: '说戒就戒，绝不回头',
|
||||
description: '一旦下决心就很能执行，目标感强，耐痛阈值也高。你是最接近“立即行动派”的那一类。',
|
||||
difficulty: 1,
|
||||
difficultyText: '戒烟界传说',
|
||||
peerCount: 4239,
|
||||
color: '#00C48C',
|
||||
abstractRank: 38,
|
||||
tags: ['行动派', '意志力强', '说到做到'],
|
||||
suggestions: [
|
||||
'继续保持，但别在最自信的时候低估复吸风险。',
|
||||
'把经验沉淀成自己的流程，以后更稳。',
|
||||
'可以带一个戒烟搭子，你很适合做榜样。',
|
||||
'狠不只在开始，更在长期维持。'
|
||||
],
|
||||
actionPlan: [
|
||||
'把你的戒烟规则写成 3 条最小原则。',
|
||||
'提前准备一个“高风险场景应对脚本”。',
|
||||
'达成一周目标后，奖励自己一个真正喜欢的东西。'
|
||||
],
|
||||
shareTemplate: '我是正确狠人🚀，这次不靠口号，靠执行。'
|
||||
},
|
||||
N10: {
|
||||
code: 'N10',
|
||||
name: '愤怒的小鸟',
|
||||
emoji: '🔥',
|
||||
catchphrase: '抽完更烦躁，越烦越想抽',
|
||||
description: '情绪像火，烟像汽油。你以为在灭火，其实常常把烦躁烧得更旺。',
|
||||
difficulty: 4,
|
||||
difficultyText: '负面循环型',
|
||||
peerCount: 7812,
|
||||
color: '#FF4E50',
|
||||
abstractRank: 74,
|
||||
tags: ['烦躁升级', '负面循环', '情绪宣泄'],
|
||||
suggestions: [
|
||||
'愤怒时先离开现场，别让烟变成默认出口。',
|
||||
'跑步、拍打枕头、冷水洗脸，都比点烟更像灭火器。',
|
||||
'识别“我烦”和“我想抽”是不是被你绑在一起了。',
|
||||
'烟不是灭火器，更像助燃剂。'
|
||||
],
|
||||
actionPlan: [
|
||||
'今天给自己准备一个物理泄压动作。',
|
||||
'下次烦躁时先等 90 秒再决定要不要抽。',
|
||||
'把最常点火的那件事写下来，先处理源头。'
|
||||
],
|
||||
shareTemplate: '我是愤怒的小鸟🔥，不想再拿汽油给自己灭火。'
|
||||
},
|
||||
N11: {
|
||||
code: 'N11',
|
||||
name: '养生矛盾体',
|
||||
emoji: '🍵',
|
||||
catchphrase: '一边抽烟一边喝茶养生',
|
||||
description: '很会给自己找平衡感：抽烟可以，等会儿喝点热茶补回来。你不是不懂，只是太会自我安慰。',
|
||||
difficulty: 3,
|
||||
difficultyText: '自我安慰大师',
|
||||
peerCount: 6537,
|
||||
color: '#7BC96F',
|
||||
abstractRank: 82,
|
||||
tags: ['平衡幻觉', '自我安慰', '矛盾体'],
|
||||
suggestions: [
|
||||
'茶是好东西，但真的不能和烟打平。',
|
||||
'先承认“补一补”只是安慰，不是解法。',
|
||||
'把养生心态变真一点，从少抽一根开始。',
|
||||
'真正的养生，是别再让肺替你背锅。'
|
||||
],
|
||||
actionPlan: [
|
||||
'今天保留喝茶，但删掉其中一支烟。',
|
||||
'把“我在平衡”改成“我在找借口”提醒自己一次。',
|
||||
'选一个最想养生的理由，写在便签上。'
|
||||
],
|
||||
shareTemplate: '我是养生矛盾体🍵，枸杞和烟不该再同框了。'
|
||||
},
|
||||
N12: {
|
||||
code: 'N12',
|
||||
name: '表演艺术家',
|
||||
emoji: '🎪',
|
||||
catchphrase: '抽烟姿态优雅，烟是道具',
|
||||
description: '你抽的不只是烟，也是氛围、姿态和一种角色感。很多时候你留恋的是“感觉”，不是尼古丁本身。',
|
||||
difficulty: 2,
|
||||
difficultyText: '形式大于内容',
|
||||
peerCount: 5089,
|
||||
color: '#F15BB5',
|
||||
abstractRank: 86,
|
||||
tags: ['氛围感', '道具流', '文艺烟感'],
|
||||
suggestions: [
|
||||
'把“抽烟仪式”迁移到别的媒介上，比如咖啡、散步或拍照。',
|
||||
'保留氛围感，不必保留那根烟。',
|
||||
'给自己找一个新的“道具”，让角色感脱离香烟。',
|
||||
'真正的酷，不靠烟雾完成。'
|
||||
],
|
||||
actionPlan: [
|
||||
'今天挑一个最讲氛围的场景，试着不用烟完成它。',
|
||||
'准备一个替代道具，比如薄荷糖、咖啡杯、纸笔。',
|
||||
'记录一次“没抽也有感觉”的瞬间。'
|
||||
],
|
||||
shareTemplate: '我是表演艺术家🎪，烟只是道具，但我想演一个更酷的自己。'
|
||||
},
|
||||
N13: {
|
||||
code: 'N13',
|
||||
name: '隐形成员',
|
||||
emoji: '👻',
|
||||
catchphrase: '没人知道我抽烟',
|
||||
description: '习惯偷偷抽、躲着抽，抽烟和羞耻感绑定得很深。你承受的不只是烟瘾，还有秘密本身的压力。',
|
||||
difficulty: 3,
|
||||
difficultyText: '偷偷摸摸型',
|
||||
peerCount: 6120,
|
||||
color: '#5C677D',
|
||||
abstractRank: 66,
|
||||
tags: ['隐形烟民', '偷偷摸摸', '双重生活'],
|
||||
suggestions: [
|
||||
'既然别人都不知道，那你其实很适合悄悄开始戒。',
|
||||
'找一个可信的人做搭子，不用一个人扛。',
|
||||
'隐藏带来的压力，本身也会推着你继续抽。',
|
||||
'承认是第一步，不一定要对全世界承认。'
|
||||
],
|
||||
actionPlan: [
|
||||
'先对一个安全的人说出你的真实情况。',
|
||||
'把最常偷抽的地方变得不那么方便。',
|
||||
'今天试一次“想抽但先不躲着去”的停顿。'
|
||||
],
|
||||
shareTemplate: '我是隐形成员👻，这次想把秘密变成一次小小的改变。'
|
||||
},
|
||||
N14: {
|
||||
code: 'N14',
|
||||
name: '卷王型戒烟者',
|
||||
emoji: '💪',
|
||||
catchphrase: '连续打卡，目标必达成',
|
||||
description: '你对目标、数据和进度条很敏感，越看得到进展越来劲。只要方向对，你是最容易持续的人之一。',
|
||||
difficulty: 2,
|
||||
difficultyText: '行动派',
|
||||
peerCount: 7444,
|
||||
color: '#06D6A0',
|
||||
abstractRank: 42,
|
||||
tags: ['数据控', '自律驱动', '目标型'],
|
||||
suggestions: [
|
||||
'把戒烟拆成可量化目标，你会更有状态。',
|
||||
'设置每周里程碑，用奖励巩固正反馈。',
|
||||
'找一个搭子互相卷，效率会更高。',
|
||||
'继续用数据说话，你本来就擅长这个。'
|
||||
],
|
||||
actionPlan: [
|
||||
'给自己定一个这周的可量化指标。',
|
||||
'设立 3 个奖励节点，别只盯终点。',
|
||||
'每天同一时间打一次卡，让行动变自动。'
|
||||
],
|
||||
shareTemplate: '我是卷王型戒烟者💪，进度条一旦开了就不想让它断。'
|
||||
},
|
||||
N15: {
|
||||
code: 'N15',
|
||||
name: '深夜哲学家',
|
||||
emoji: '🌙',
|
||||
catchphrase: '只有深夜才抽烟思考',
|
||||
description: '抽烟和深夜、独处、灵感绑定得很深。你最怕戒掉烟之后，那些自以为重要的思考氛围也一起消失。',
|
||||
difficulty: 3,
|
||||
difficultyText: '烟是灵感来源',
|
||||
peerCount: 5821,
|
||||
color: '#6C63FF',
|
||||
abstractRank: 79,
|
||||
tags: ['深夜档', '灵感型', '仪式依赖'],
|
||||
suggestions: [
|
||||
'把“抽烟时间”替换成“深夜散步”或“写两行字”的时间。',
|
||||
'你依赖的更多是场景感，不一定是烟本身。',
|
||||
'灵感可以配茶、配风、配纸笔，不必配烟。',
|
||||
'保留思考，不必保留烟雾。'
|
||||
],
|
||||
actionPlan: [
|
||||
'今晚先试一次不抽烟的深夜时段。',
|
||||
'准备一本小本子，想到什么先记下来。',
|
||||
'找出一个你最珍惜的深夜 ritual，用别的东西替代烟。'
|
||||
],
|
||||
shareTemplate: '我是深夜哲学家🌙，想把灵感留住，把烟雾删掉。'
|
||||
},
|
||||
N16: {
|
||||
code: 'N16',
|
||||
name: '终极摆烂王',
|
||||
emoji: '🏳️',
|
||||
catchphrase: '反正戒不掉，不如享受',
|
||||
description: '表面看像放弃治疗，底层其实是怕再次失败。你不是不想变好，是不想再失望。',
|
||||
difficulty: 5,
|
||||
difficultyText: '放弃治疗型',
|
||||
peerCount: 8897,
|
||||
color: '#94A3B8',
|
||||
abstractRank: 90,
|
||||
tags: ['摆烂', '防御性悲观', '先投降'],
|
||||
suggestions: [
|
||||
'先别谈全戒，从少抽一根开始也算赢。',
|
||||
'允许自己失败，但把复吸间隔拉长一点点。',
|
||||
'给自己设一个很小的目标，比如这周少抽 5 根。',
|
||||
'摆烂不是唯一选择，你只是还没找到顺手的方法。'
|
||||
],
|
||||
actionPlan: [
|
||||
'今天只争取少抽一根，不要求完美。',
|
||||
'把最近一次“摆烂”的真实原因写下来。',
|
||||
'给下周设一个小到不丢人的目标。'
|
||||
],
|
||||
shareTemplate: '我是终极摆烂王🏳️，但今天想试试不摆烂一小会儿。'
|
||||
}
|
||||
}
|
||||
|
||||
export const NSTI_DIMENSION_PAIR_MAP = {
|
||||
AA: 'N05',
|
||||
AB: 'N01',
|
||||
AC: 'N04',
|
||||
AD: 'N12',
|
||||
BA: 'N03',
|
||||
BB: 'N06',
|
||||
BC: 'N10',
|
||||
BD: 'N02',
|
||||
CA: 'N13',
|
||||
CB: 'N16',
|
||||
CC: 'N07',
|
||||
CD: 'N08',
|
||||
DA: 'N14',
|
||||
DB: 'N11',
|
||||
DC: 'N15',
|
||||
DD: 'N09'
|
||||
}
|
||||
|
||||
export const NSTI_QUESTIONS = [
|
||||
{
|
||||
id: 1,
|
||||
title: '你上次说“戒烟”是什么时候？',
|
||||
subtitle: '测试你的戒烟承诺频率和可信度',
|
||||
options: [
|
||||
{ key: 'A', text: '今天早上刚说过 ⏰', weights: { N01: 3, N03: 1 } },
|
||||
{ key: 'B', text: '昨天，说完就抽了 🔄', weights: { N02: 3, N03: 1 } },
|
||||
{ key: 'C', text: '上周/上月，记不清了 📅', weights: { N08: 3, N07: 1 } },
|
||||
{ key: 'D', text: '说得太多了，当口头禅了 💬', weights: { N01: 2, N02: 2 } }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '朋友递烟给你，你会？',
|
||||
subtitle: '测试你的社交压力和自控力',
|
||||
options: [
|
||||
{ key: 'A', text: '直接接，面子第一 🤝', weights: { N05: 3, N12: 1 } },
|
||||
{ key: 'B', text: '嘴上说戒了，手很诚实 ✋', weights: { N01: 3, N03: 1 } },
|
||||
{ key: 'C', text: '拒绝，然后偷偷自己抽一根 🤫', weights: { N13: 3, N04: 1 } },
|
||||
{ key: 'D', text: '坚决不接，然后被孤立 😢', weights: { N09: 2, N14: 2 } }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '你戒烟失败的最奇葩理由是？',
|
||||
subtitle: '测试你的借口制造能力和自我欺骗程度',
|
||||
options: [
|
||||
{ key: 'A', text: '“今天压力大”（每天都压力大）😰', weights: { N06: 2, N10: 2 } },
|
||||
{ key: 'B', text: '“明天开始戒”（永远明天）📅', weights: { N08: 3, N16: 1 } },
|
||||
{ key: 'C', text: '“朋友递的，不接不给面子” 🙇', weights: { N05: 3, N04: 1 } },
|
||||
{ key: 'D', text: '“就抽一根，没事的”（经典flag）🚩', weights: { N03: 3, N02: 1 } }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '你抽烟时的精神状态是？',
|
||||
subtitle: '测试你抽烟的心理动机',
|
||||
options: [
|
||||
{ key: 'A', text: '🧘 冥想大师，享受每一口', weights: { N15: 2, N12: 2 } },
|
||||
{ key: 'B', text: '😤 愤怒的小鸟，越抽越烦躁', weights: { N10: 3, N06: 1 } },
|
||||
{ key: 'C', text: '🎭 演技派，其实不想抽但停不下来', weights: { N11: 2, N04: 2 } },
|
||||
{ key: 'D', text: '💀 丧尸模式，完全无意识', weights: { N07: 3, N16: 1 } }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '你的理想戒烟场景是？',
|
||||
subtitle: '测试你对戒烟的想象和期望',
|
||||
options: [
|
||||
{ key: 'A', text: '赛博空间（数字戒烟）🤖', weights: { N01: 2, N14: 2 } },
|
||||
{ key: 'B', text: '修仙洞府（闭关修炼）🧙', weights: { N15: 2, N13: 2 } },
|
||||
{ key: 'C', text: '监狱（物理强制）🚔', weights: { N16: 2, N07: 2 } },
|
||||
{ key: 'D', text: '外太空（没氧气自然戒）🚀', weights: { N12: 2, N03: 2 } }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: '你戒烟时最怕什么？',
|
||||
subtitle: '测试你戒烟的最大障碍',
|
||||
options: [
|
||||
{ key: 'A', text: '朋友递烟时张嘴了（物理惯性）😨', weights: { N05: 2, N07: 2 } },
|
||||
{ key: 'B', text: '打火机太好看了不用可惜（颜控）🔥', weights: { N12: 2, N11: 2 } },
|
||||
{ key: 'C', text: '无聊到怀疑人生（精神支柱）😴', weights: { N16: 2, N15: 2 } },
|
||||
{ key: 'D', text: '失去抽烟这个“思考时间”🤔', weights: { N15: 3, N11: 1 } }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: '你发朋友圈说戒烟后发生了什么？',
|
||||
subtitle: '测试你的公开承诺与实际行动的差距',
|
||||
options: [
|
||||
{ key: 'A', text: '打脸了，当天就抽了 🤦', weights: { N03: 3, N02: 1 } },
|
||||
{ key: 'B', text: '没人信，都是看热闹的 👀', weights: { N04: 2, N02: 2 } },
|
||||
{ key: 'C', text: '真戒了一段时间，然后复吸了 📉', weights: { N02: 3, N14: 1 } },
|
||||
{ key: 'D', text: '从来没发过，太丢人了 😶', weights: { N13: 3, N15: 1 } }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: '如果戒烟成功，你最想做什么？',
|
||||
subtitle: '测试你的戒烟动机和动力来源',
|
||||
options: [
|
||||
{ key: 'A', text: '发朋友圈炫耀 📱', weights: { N04: 2, N12: 2 } },
|
||||
{ key: 'B', text: '省下的钱买个大件 💰', weights: { N14: 2, N11: 2 } },
|
||||
{ key: 'C', text: '告诉家人“我做到了” 👨👩👧', weights: { N09: 2, N14: 2 } },
|
||||
{ key: 'D', text: '感觉人生少了点什么 😶🌫️', weights: { N16: 2, N07: 2 } }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: '你觉得戒烟最难的是？',
|
||||
subtitle: '测试你对戒烟难度的认知',
|
||||
options: [
|
||||
{ key: 'A', text: '戒断反应（身体折磨）😰', weights: { N02: 2, N09: 2 } },
|
||||
{ key: 'B', text: '社交场合（递烟必接）🍻', weights: { N05: 3, N04: 1 } },
|
||||
{ key: 'C', text: '无聊时光（手没地方放）👐', weights: { N07: 3, N16: 1 } },
|
||||
{ key: 'D', text: '情绪波动（焦虑就抽）😤', weights: { N06: 2, N10: 2 } }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: '如果用一个词形容你的戒烟史？',
|
||||
subtitle: '综合测试你的戒烟人格画像',
|
||||
options: [
|
||||
{ key: 'A', text: '“反复横跳” 🔄', weights: { N02: 3, N11: 1 } },
|
||||
{ key: 'B', text: '“嘴硬体软” 🗣️', weights: { N01: 3, N03: 1 } },
|
||||
{ key: 'C', text: '“表演艺术” 🎭', weights: { N12: 2, N04: 2 } },
|
||||
{ key: 'D', text: '“明日复明日” 📅', weights: { N08: 3, N16: 1 } }
|
||||
]
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,183 @@
|
||||
import { storage, NSTI_RESULT_KEY, NSTI_HISTORY_KEY, NSTI_DRAFT_KEY } from './storage'
|
||||
import { NSTI_DIMENSIONS, NSTI_DIMENSION_PAIR_MAP, NSTI_PERSONALITY_TYPES, NSTI_QUESTIONS } from './nsti-data'
|
||||
|
||||
const HISTORY_LIMIT = 12
|
||||
const DIMENSION_TIE_PRIORITY = { B: 4, A: 3, C: 2, D: 1 }
|
||||
const NSTI_LOGO_BASE_URL = 'https://linghu-wmr.oss-cn-beijing.aliyuncs.com/sbti/Camera%20Roll'
|
||||
|
||||
function clone(data) {
|
||||
return JSON.parse(JSON.stringify(data))
|
||||
}
|
||||
|
||||
export function getNSTIQuestions() {
|
||||
return clone(NSTI_QUESTIONS)
|
||||
}
|
||||
|
||||
export function getNSTIPersonalityTypes() {
|
||||
return clone(NSTI_PERSONALITY_TYPES)
|
||||
}
|
||||
|
||||
export function getNSTILogoUrl(code) {
|
||||
if (!code || !/^N\d{2}$/.test(code)) return ''
|
||||
const index = Number(code.slice(1))
|
||||
if (!index || index < 1 || index > 16) return ''
|
||||
return `${NSTI_LOGO_BASE_URL}/${index}.png`
|
||||
}
|
||||
|
||||
export function getNSTIDimensions() {
|
||||
return clone(NSTI_DIMENSIONS)
|
||||
}
|
||||
|
||||
export function getNSTIResultByCode(code) {
|
||||
return NSTI_PERSONALITY_TYPES[code] ? clone(NSTI_PERSONALITY_TYPES[code]) : null
|
||||
}
|
||||
|
||||
export function getLatestNSTIResult() {
|
||||
return storage.get(NSTI_RESULT_KEY)
|
||||
}
|
||||
|
||||
export function getNSTIHistory() {
|
||||
return storage.get(NSTI_HISTORY_KEY, [])
|
||||
}
|
||||
|
||||
export function getNSTIDraft() {
|
||||
return storage.get(NSTI_DRAFT_KEY)
|
||||
}
|
||||
|
||||
export function saveNSTIDraft(draft) {
|
||||
storage.set(NSTI_DRAFT_KEY, draft)
|
||||
}
|
||||
|
||||
export function clearNSTIDraft() {
|
||||
storage.remove(NSTI_DRAFT_KEY)
|
||||
}
|
||||
|
||||
export function saveNSTIResult(result) {
|
||||
storage.set(NSTI_RESULT_KEY, result)
|
||||
const history = getNSTIHistory().filter((item) => item.id !== result.id)
|
||||
history.unshift(result)
|
||||
storage.set(NSTI_HISTORY_KEY, history.slice(0, HISTORY_LIMIT))
|
||||
clearNSTIDraft()
|
||||
}
|
||||
|
||||
function rankDimensions(dimensionScores) {
|
||||
return Object.entries(dimensionScores).sort((a, b) => {
|
||||
if (b[1] !== a[1]) return b[1] - a[1]
|
||||
return (DIMENSION_TIE_PRIORITY[b[0]] || 0) - (DIMENSION_TIE_PRIORITY[a[0]] || 0)
|
||||
})
|
||||
}
|
||||
|
||||
function resolveTopMatches(typeScores) {
|
||||
return Object.keys(typeScores)
|
||||
.map((code) => ({
|
||||
code,
|
||||
score: typeScores[code],
|
||||
...NSTI_PERSONALITY_TYPES[code]
|
||||
}))
|
||||
.sort((a, b) => {
|
||||
if (b.score !== a.score) return b.score - a.score
|
||||
return (b.abstractRank || 0) - (a.abstractRank || 0)
|
||||
})
|
||||
}
|
||||
|
||||
export function calculateNSTIResult(answerRecords) {
|
||||
if (!Array.isArray(answerRecords) || answerRecords.length !== NSTI_QUESTIONS.length) {
|
||||
throw new Error('answers incomplete')
|
||||
}
|
||||
|
||||
const dimensionScores = { A: 0, B: 0, C: 0, D: 0 }
|
||||
const typeScores = {}
|
||||
Object.keys(NSTI_PERSONALITY_TYPES).forEach((code) => {
|
||||
typeScores[code] = 0
|
||||
})
|
||||
|
||||
answerRecords.forEach((answer) => {
|
||||
if (!answer || !answer.dimension) {
|
||||
throw new Error('invalid answer')
|
||||
}
|
||||
dimensionScores[answer.dimension] += 1
|
||||
Object.entries(answer.weights || {}).forEach(([code, weight]) => {
|
||||
typeScores[code] = (typeScores[code] || 0) + Number(weight || 0)
|
||||
})
|
||||
})
|
||||
|
||||
const rankedDimensions = rankDimensions(dimensionScores)
|
||||
const topPair = `${rankedDimensions[0][0]}${rankedDimensions[1][0]}`
|
||||
const boostedType = NSTI_DIMENSION_PAIR_MAP[topPair]
|
||||
if (boostedType) {
|
||||
typeScores[boostedType] += 1.25
|
||||
}
|
||||
|
||||
if (dimensionScores.D >= 7) {
|
||||
typeScores.N09 += 1.5
|
||||
}
|
||||
if (dimensionScores.B >= 5 && dimensionScores.C >= 3) {
|
||||
typeScores.N10 += 1
|
||||
}
|
||||
if (dimensionScores.A >= 5 && dimensionScores.B >= 3) {
|
||||
typeScores.N05 += 0.75
|
||||
typeScores.N01 += 0.5
|
||||
}
|
||||
if (dimensionScores.C >= 5 && dimensionScores.D <= 1) {
|
||||
typeScores.N16 += 1
|
||||
}
|
||||
|
||||
const topMatches = resolveTopMatches(typeScores)
|
||||
const resultType = topMatches[0]
|
||||
const totalAnswers = answerRecords.length
|
||||
|
||||
const dimensionBreakdown = rankedDimensions.map(([key, score]) => ({
|
||||
key,
|
||||
score,
|
||||
percentage: Math.round((score / totalAnswers) * 100),
|
||||
...NSTI_DIMENSIONS[key]
|
||||
}))
|
||||
|
||||
const completedAt = new Date().toISOString()
|
||||
const result = {
|
||||
id: `${resultType.code}-${Date.now()}`,
|
||||
typeCode: resultType.code,
|
||||
completedAt,
|
||||
totalAnswers,
|
||||
primaryDimension: dimensionBreakdown[0],
|
||||
secondaryDimension: dimensionBreakdown[1],
|
||||
dimensionScores,
|
||||
dimensionBreakdown,
|
||||
topMatches: topMatches.slice(0, 3).map((item) => ({
|
||||
code: item.code,
|
||||
name: item.name,
|
||||
emoji: item.emoji,
|
||||
catchphrase: item.catchphrase,
|
||||
logoUrl: getNSTILogoUrl(item.code),
|
||||
score: item.score,
|
||||
color: item.color,
|
||||
percentage: topMatches[0].score > 0 ? Math.round((item.score / topMatches[0].score) * 100) : 0
|
||||
})),
|
||||
answers: answerRecords,
|
||||
logoUrl: getNSTILogoUrl(resultType.code),
|
||||
...NSTI_PERSONALITY_TYPES[resultType.code]
|
||||
}
|
||||
|
||||
result.shareText = buildNSTIShareText(result)
|
||||
return result
|
||||
}
|
||||
|
||||
export function buildNSTIShareText(result) {
|
||||
if (!result) return '测测你的赛博尼古丁测试结果'
|
||||
return `我是${result.name}${result.emoji}\n“${result.catchphrase}”\n戒烟难度：${renderDifficultyStars(result.difficulty)}\n来测测你的赛博尼古丁测试结果`
|
||||
}
|
||||
|
||||
export function renderDifficultyStars(level = 0) {
|
||||
return '★'.repeat(level) + '☆'.repeat(Math.max(0, 5 - level))
|
||||
}
|
||||
|
||||
export function formatNSTITime(value) {
|
||||
if (!value) return ''
|
||||
const date = new Date(value)
|
||||
if (Number.isNaN(date.getTime())) return ''
|
||||
const month = `${date.getMonth() + 1}`.padStart(2, '0')
|
||||
const day = `${date.getDate()}`.padStart(2, '0')
|
||||
const hour = `${date.getHours()}`.padStart(2, '0')
|
||||
const minute = `${date.getMinutes()}`.padStart(2, '0')
|
||||
return `${month}.${day} ${hour}:${minute}`
|
||||
}
|
||||
@@ -41,3 +41,6 @@ export const USER_KEY = 'user'
|
||||
export const PROFILE_KEY = 'profile'
|
||||
export const USER_MODE_KEY = 'user_mode'
|
||||
export const QUIT_CHECKIN_KEY = 'quit_checkin'
|
||||
export const NSTI_RESULT_KEY = 'nsti_latest_result'
|
||||
export const NSTI_HISTORY_KEY = 'nsti_history'
|
||||
export const NSTI_DRAFT_KEY = 'nsti_draft'
|
||||
|
||||
+2
-1
@@ -11,7 +11,8 @@ export default defineConfig({
|
||||
proxy: {
|
||||
'/api/v1': {
|
||||
// target: 'http://localhost:8080',
|
||||
target: 'http://nas.quitsmok.top:8300',
|
||||
target: 'http://192.168.31.73:8080',
|
||||
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user