feat: refresh mini program home and stats experience
This commit is contained in:
nepiedg
+88
-183
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="page-bg"></view>
|
||||
<view class="nav-placeholder" :style="{ height: navBarHeight + 'px' }"></view>
|
||||
|
||||
<view class="section">
|
||||
@@ -18,32 +19,6 @@
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<text class="section-label">使用模式</text>
|
||||
<view class="mode-card card">
|
||||
<view class="mode-card-header">
|
||||
<view class="menu-icon menu-icon-accent">
|
||||
<text class="menu-glyph">模</text>
|
||||
</view>
|
||||
<view class="menu-content">
|
||||
<text class="menu-label">打卡模式</text>
|
||||
<text class="menu-desc">直接切换成“戒烟打卡”或“记录抽烟”</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mode-switch">
|
||||
<view
|
||||
v-for="item in modeOptions"
|
||||
:key="item.value"
|
||||
class="mode-switch-item"
|
||||
:class="{ 'mode-switch-item-active': userStore.mode === item.value }"
|
||||
@tap="changeMode(item.value)"
|
||||
>
|
||||
<text class="mode-switch-title">{{ item.label }}</text>
|
||||
<text class="mode-switch-desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="mode-hint">当前：{{ modeText }}</text>
|
||||
</view>
|
||||
|
||||
<text class="section-label">常用操作</text>
|
||||
<view class="menu-list card">
|
||||
<view class="menu-item">
|
||||
@@ -56,11 +31,11 @@
|
||||
<view class="menu-actions">
|
||||
<text class="menu-action" @tap.stop="previewSharePage">预览分享页</text>
|
||||
<text class="menu-action-sep">·</text>
|
||||
<text class="menu-action" @tap.stop="handleRefreshShare">刷新分享链接</text>
|
||||
<text class="menu-action" @tap.stop="handleRefreshShare">刷新</text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="share-btn" open-type="share" :disabled="shareLoading || !shareToken">
|
||||
{{ shareLoading ? '生成中' : '分享' }}
|
||||
{{ shareLoading ? '生成中' : '去分享' }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
@@ -72,7 +47,7 @@
|
||||
</view>
|
||||
<view class="menu-content">
|
||||
<text class="menu-label">重新填写问卷</text>
|
||||
<text class="menu-desc">修改吸烟基线与个人信息</text>
|
||||
<text class="menu-desc">修改打卡模式、吸烟基线等个人信息</text>
|
||||
</view>
|
||||
<text class="menu-arrow">›</text>
|
||||
</view>
|
||||
@@ -88,7 +63,7 @@
|
||||
</view>
|
||||
<view class="menu-content">
|
||||
<text class="menu-label">清除缓存</text>
|
||||
<text class="menu-desc">仅清理本地缓存，不影响云端记录</text>
|
||||
<text class="menu-desc">仅清理本地缓存，不影响云端数据</text>
|
||||
</view>
|
||||
<text class="menu-arrow">›</text>
|
||||
</view>
|
||||
@@ -128,12 +103,7 @@ const { waitForLogin } = useLogin()
|
||||
const shareToken = ref('')
|
||||
const shareExpireAt = ref('')
|
||||
const shareLoading = ref(false)
|
||||
const modeSaving = ref(false)
|
||||
const navBarHeight = ref(0)
|
||||
const modeOptions = [
|
||||
{ value: 'quit', label: '戒烟打卡', desc: '按天记录今天没抽' },
|
||||
{ value: 'record', label: '记录抽烟', desc: '按支数记录变化' }
|
||||
]
|
||||
|
||||
const userName = computed(() => userStore.user?.nickname || '戒烟用户')
|
||||
const userAvatar = computed(() => userStore.user?.avatar_url || 'https://linghu-wmr.oss-cn-beijing.aliyuncs.com/smt/avatar.png')
|
||||
@@ -214,25 +184,6 @@ function previewSharePage() {
|
||||
})
|
||||
}
|
||||
|
||||
async function changeMode(nextMode) {
|
||||
if (!nextMode || nextMode === userStore.mode || modeSaving.value) return
|
||||
modeSaving.value = true
|
||||
try {
|
||||
uni.showLoading({ title: '切换中...' })
|
||||
await profileStore.saveProfile({ mode: nextMode })
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '模式已切换', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
uni.switchTab({ url: '/pages/index/index' })
|
||||
}, 250)
|
||||
} catch (e) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '切换失败', icon: 'none' })
|
||||
} finally {
|
||||
modeSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function goOnboarding() {
|
||||
uni.navigateTo({ url: '/pages/onboarding/index' })
|
||||
}
|
||||
@@ -285,11 +236,21 @@ onShow(async () => {
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
background: linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%);
|
||||
padding: 0 28rpx 0;
|
||||
background-color: #F5F7F6;
|
||||
padding: 0 32rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 500rpx;
|
||||
background: linear-gradient(180deg, #DDF3EB 0%, #F5F7F6 100%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.nav-placeholder,
|
||||
.section,
|
||||
.version {
|
||||
@@ -298,37 +259,36 @@ onShow(async () => {
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 20rpx;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
display: block;
|
||||
margin: 0 0 14rpx 6rpx;
|
||||
font-size: 26rpx;
|
||||
margin: 0 0 16rpx 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #1a5c45;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
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);
|
||||
background: #FFFFFF;
|
||||
border-radius: 32rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.user-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgba(52, 200, 160, 0.16);
|
||||
background-color: rgba(52, 200, 160, 0.06);
|
||||
background-color: #F0F4F2;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-copy {
|
||||
@@ -341,197 +301,137 @@ onShow(async () => {
|
||||
.user-name {
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #0D3D2E;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.user-desc {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 25rpx;
|
||||
line-height: 1.5;
|
||||
color: #52806E;
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.user-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14rpx;
|
||||
gap: 16rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.user-pill {
|
||||
padding: 14rpx 26rpx;
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(52, 200, 160, 0.12);
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.18);
|
||||
background: #E8F5F0;
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
color: #1a8c62;
|
||||
color: #10B981;
|
||||
}
|
||||
|
||||
.user-pill-muted {
|
||||
background: rgba(52, 200, 160, 0.06);
|
||||
color: #7aA898;
|
||||
}
|
||||
|
||||
.mode-card {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.mode-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
background: #F5F5F5;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding: 8rpx 32rpx;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
padding: 6rpx 0;
|
||||
gap: 24rpx;
|
||||
padding: 24rpx 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.menu-divider {
|
||||
margin: 16rpx 0;
|
||||
height: 2rpx;
|
||||
background: rgba(52, 200, 160, 0.12);
|
||||
height: 1px;
|
||||
background: #F0F0F0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 18rpx;
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1.5rpx solid rgba(52, 200, 160, 0.18);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.menu-icon-accent {
|
||||
background: rgba(52, 200, 160, 0.12);
|
||||
background: #E8F5F0;
|
||||
}
|
||||
|
||||
.menu-icon-muted {
|
||||
background: rgba(52, 200, 160, 0.06);
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.menu-glyph {
|
||||
font-size: 24rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #1a8c62;
|
||||
}
|
||||
|
||||
.menu-icon-accent .menu-glyph {
|
||||
color: #10B981;
|
||||
}
|
||||
|
||||
.menu-icon-muted .menu-glyph {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
gap: 6rpx;
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
font-size: 28rpx;
|
||||
color: #0D3D2E;
|
||||
font-size: 30rpx;
|
||||
color: #1A1A1A;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.menu-desc {
|
||||
font-size: 25rpx;
|
||||
line-height: 1.5;
|
||||
color: #52806E;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.4;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.menu-actions {
|
||||
margin-top: 6rpx;
|
||||
margin-top: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #1a8c62;
|
||||
gap: 12rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.menu-action {
|
||||
color: #1a8c62;
|
||||
color: #10B981;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.menu-action-sep {
|
||||
color: #7aA898;
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
font-size: 36rpx;
|
||||
color: #7aA898;
|
||||
}
|
||||
|
||||
.menu-value {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #1a8c62;
|
||||
}
|
||||
|
||||
.mode-switch {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.mode-switch-item {
|
||||
flex: 1;
|
||||
padding: 22rpx 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);
|
||||
}
|
||||
|
||||
.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-title {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #0D3D2E;
|
||||
}
|
||||
|
||||
.mode-switch-desc {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.5;
|
||||
color: #7aA898;
|
||||
}
|
||||
|
||||
.mode-hint {
|
||||
display: block;
|
||||
margin-top: 16rpx;
|
||||
font-size: 22rpx;
|
||||
color: #1a8c62;
|
||||
color: #D4D4D4;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
margin: 0;
|
||||
padding: 16rpx 28rpx;
|
||||
line-height: 1.4;
|
||||
font-size: 24rpx;
|
||||
padding: 12rpx 32rpx;
|
||||
line-height: 1.5;
|
||||
font-size: 26rpx;
|
||||
border: none;
|
||||
border-radius: 999rpx;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(180deg, #3DD9AE 0%, #34C8A0 100%);
|
||||
box-shadow: 0 12rpx 28rpx rgba(52, 200, 160, 0.28);
|
||||
background: #10B981;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.share-btn[disabled] {
|
||||
background: #9CC5B5;
|
||||
background: #A7F3D0;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
@@ -539,15 +439,20 @@ onShow(async () => {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
font-size: 36rpx;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
.version {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #7aA898;
|
||||
margin-top: 28rpx;
|
||||
font-size: 24rpx;
|
||||
color: #B0B0B0;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.bottom-safe {
|
||||
height: calc(32rpx + env(safe-area-inset-bottom));
|
||||
height: calc(40rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user