feat: 添加模式选择功能与页面更新
- 在 onboarding 页面中新增使用模式选择功能，用户可选择“戒烟打卡”或“记录抽烟”模式 - 更新个人资料页面以显示当前模式并允许用户切换模式 - 在 pages.json 中注册新的模式选择页面 - 优化首页和其他相关页面以适应新模式功能
This commit is contained in:
你çnepiedg
+122
-4
@@ -10,9 +10,25 @@
|
||||
</view>
|
||||
|
||||
<view class="content">
|
||||
<view class="mode-section">
|
||||
<text class="mode-section-label">使用模式</text>
|
||||
<view class="mode-switch">
|
||||
<view
|
||||
v-for="item in modeOptions"
|
||||
:key="item.value"
|
||||
class="mode-switch-item"
|
||||
:class="{ 'mode-switch-item-active': currentMode === item.value }"
|
||||
@tap="selectMode(item.value)"
|
||||
>
|
||||
<text class="mode-switch-title">{{ item.label }}</text>
|
||||
<text class="mode-switch-desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="step === 1" class="step">
|
||||
<text class="step-title">你每天抽多少支烟？</text>
|
||||
<text class="step-desc">这将帮助我们为你制定个性化的戒烟计划</text>
|
||||
<text class="step-desc">{{ baselineDesc }}</text>
|
||||
<view class="input-group">
|
||||
<view class="input-row">
|
||||
<view class="input-btn" @tap="decreaseCigs">-</view>
|
||||
@@ -40,8 +56,8 @@
|
||||
</view>
|
||||
|
||||
<view v-if="step === 3" class="step">
|
||||
<text class="step-title">你为什么想戒烟？</text>
|
||||
<text class="step-desc">选择对你最重要的原因（可多选）</text>
|
||||
<text class="step-title">{{ motivationTitle }}</text>
|
||||
<text class="step-desc">{{ motivationDesc }}</text>
|
||||
<view class="options options-wrap">
|
||||
<view
|
||||
v-for="option in quitMotivationOptions"
|
||||
@@ -96,7 +112,7 @@
|
||||
<view class="footer">
|
||||
<view v-if="step > 1" class="btn-secondary" @tap="prevStep">上一步</view>
|
||||
<view class="btn-primary" :class="{ 'btn-full': step === 1 }" @tap="nextStep">
|
||||
{{ step === 5 ? '开始戒烟之旅 🚀' : '下一步' }}
|
||||
{{ step === 5 ? finishButtonText + ' 🚀' : '下一步' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -106,16 +122,24 @@
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { onShareAppMessage } from '@dcloudio/uni-app'
|
||||
import { useProfileStore } from '@/stores/profile'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useLogin } from '@/hooks/useLogin'
|
||||
|
||||
const profileStore = useProfileStore()
|
||||
const userStore = useUserStore()
|
||||
const { waitForLogin } = useLogin()
|
||||
|
||||
const navBarHeight = ref(0)
|
||||
const step = ref(1)
|
||||
const totalSteps = 5
|
||||
const modeSaving = ref(false)
|
||||
const modeOptions = [
|
||||
{ value: 'quit', label: '戒烟打卡', desc: '按天记录今天没抽' },
|
||||
{ value: 'record', label: '记录抽烟', desc: '按支数记录变化' }
|
||||
]
|
||||
|
||||
const formData = ref({
|
||||
mode: 'record',
|
||||
baseline_cigs_per_day: 10,
|
||||
smoking_years: 5,
|
||||
quit_motivations: [],
|
||||
@@ -128,6 +152,12 @@ const formData = ref({
|
||||
const priceYuan = ref('25')
|
||||
|
||||
const progressWidth = computed(() => `${(step.value / totalSteps) * 100}%`)
|
||||
const currentMode = computed(() => formData.value.mode || userStore.mode || 'record')
|
||||
const isRecordMode = computed(() => currentMode.value === 'record')
|
||||
const baselineDesc = computed(() => isRecordMode.value ? '这会成为你后续记录和统计的基线' : '这将帮助我们为你制定更合适的戒烟节奏')
|
||||
const motivationTitle = computed(() => isRecordMode.value ? '你为什么想先开始记录抽烟？' : '你为什么想戒烟？')
|
||||
const motivationDesc = computed(() => isRecordMode.value ? '选择最符合你当前状态的原因（可多选）' : '选择对你最重要的原因（可多选）')
|
||||
const finishButtonText = computed(() => isRecordMode.value ? '开始记录之旅' : '开始戒烟之旅')
|
||||
|
||||
const smokingYearsOptions = [
|
||||
{ label: '少于1年', value: 1 },
|
||||
@@ -165,6 +195,20 @@ function toggleMotivation(option) {
|
||||
}
|
||||
}
|
||||
|
||||
async function selectMode(mode) {
|
||||
formData.value.mode = mode
|
||||
userStore.setMode(mode)
|
||||
if (!profileStore.exists || modeSaving.value) return
|
||||
modeSaving.value = true
|
||||
try {
|
||||
await profileStore.saveProfile({ mode })
|
||||
} catch (e) {
|
||||
console.error('saveModeInOnboarding error:', e)
|
||||
} finally {
|
||||
modeSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function onWakeTimeChange(e) {
|
||||
formData.value.wake_up_time = e.detail.value
|
||||
}
|
||||
@@ -191,6 +235,10 @@ async function nextStep() {
|
||||
uni.showLoading({ title: '保存中...' })
|
||||
await profileStore.saveProfile(formData.value)
|
||||
uni.hideLoading()
|
||||
if (!formData.value.mode) {
|
||||
uni.redirectTo({ url: '/pages/mode-select/index' })
|
||||
return
|
||||
}
|
||||
uni.switchTab({ url: '/pages/index/index' })
|
||||
} catch (e) {
|
||||
uni.hideLoading()
|
||||
@@ -208,6 +256,30 @@ onMounted(async () => {
|
||||
navBarHeight.value = statusBarH + 44
|
||||
}
|
||||
await waitForLogin()
|
||||
try {
|
||||
const profileData = await profileStore.fetchProfile()
|
||||
if (profileData?.profile) {
|
||||
const profile = profileData.profile
|
||||
formData.value = {
|
||||
...formData.value,
|
||||
mode: profile.mode || userStore.mode || formData.value.mode,
|
||||
baseline_cigs_per_day: profile.baseline_cigs_per_day || formData.value.baseline_cigs_per_day,
|
||||
smoking_years: profile.smoking_years || formData.value.smoking_years,
|
||||
quit_motivations: Array.isArray(profile.quit_motivations) ? profile.quit_motivations : formData.value.quit_motivations,
|
||||
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
|
||||
}
|
||||
if (profile.pack_price_cent) {
|
||||
priceYuan.value = String((profile.pack_price_cent / 100).toFixed(2)).replace(/\.00$/, '')
|
||||
}
|
||||
} else if (userStore.mode) {
|
||||
formData.value.mode = userStore.mode
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('loadProfileForOnboarding error:', e)
|
||||
}
|
||||
})
|
||||
|
||||
onShareAppMessage(() => {
|
||||
@@ -270,6 +342,52 @@ onShareAppMessage(() => {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mode-section {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.mode-section-label {
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
.mode-switch {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.mode-switch-item {
|
||||
padding: 24rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
border: 2rpx solid #d1fae5;
|
||||
box-shadow: 0 8rpx 20rpx rgba(16, 185, 129, 0.08);
|
||||
}
|
||||
|
||||
.mode-switch-item-active {
|
||||
background: #ecfdf5;
|
||||
border-color: #10b981;
|
||||
}
|
||||
|
||||
.mode-switch-title {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.mode-switch-desc {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.5;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.step {
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user