EIEI/wechat_wc
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refresh profile and settings pages

Browse Source
This commit is contained in:
broccoli
2026-08-07 17:21:05 +08:00
parent 8fb07f96c9
commit 2b6c74fc97
7 changed files with 63 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/address/index.scss
+11 -11
View File
@@ -40,7 +40,7 @@
.default-tag { .default-tag {
margin-left: 12px; margin-left: 12px;
background: var(--accent-pink); background: var(--accent-primary);
color: #fff; color: #fff;
font-size: 20px; font-size: 20px;
padding: 2px 10px; padding: 2px 10px;
@@ -58,16 +58,16 @@
justify-content: flex-end; justify-content: flex-end;
gap: 24px; gap: 24px;
padding-top: 16px; padding-top: 16px;
border-top: 1px dashed rgba(0,0,0,0.06); border-top: 1rpx solid var(--border);
} }
.address-act { .address-act {
font-size: 26px; font-size: 26px;
color: var(--accent-blue); color: var(--accent-secondary);
} }
.address-act.delete { .address-act.delete {
color: #ff6b6b; color: var(--danger);
} }
/* 表单弹窗 */ /* 表单弹窗 */
@@ -81,7 +81,7 @@
width: 100%; width: 100%;
height: 80px; height: 80px;
background: var(--bg-input); background: var(--bg-input);
border: 3px dashed var(--line-star); border: 1rpx solid var(--border);
border-radius: 16px; border-radius: 16px;
padding: 0 24px; padding: 0 24px;
font-size: 28px; font-size: 28px;
@@ -94,7 +94,7 @@
width: 100%; width: 100%;
height: 80px; height: 80px;
background: var(--bg-input); background: var(--bg-input);
border: 3px dashed var(--line-star); border: 1rpx solid var(--border);
border-radius: 16px; border-radius: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -128,13 +128,13 @@
.checkbox { .checkbox {
width: 44px; width: 44px;
height: 44px; height: 44px;
border: 3px dashed var(--line-star); border: 1rpx solid var(--border);
border-radius: 10px; border-radius: 10px;
} }
.checkbox.checked { .checkbox.checked {
background: var(--accent-pink); background: var(--accent-primary);
border-color: var(--accent-pink); border-color: var(--accent-primary);
} }
.form-actions { .form-actions {
@@ -142,8 +142,8 @@
gap: 20px; gap: 20px;
} }
.form-actions .btn-outline, .form-actions .btn-secondary,
.form-actions .btn-gradient { .form-actions .btn-primary {
flex: 1; flex: 1;
padding: 20px 0; padding: 20px 0;
text-align: center; text-align: center;
src/pages/address/index.tsx
+6 -8
View File
@@ -98,8 +98,7 @@ export default function AddressPage() {
<ThemedPageMeta /> <ThemedPageMeta />
<View className='address-page'> <View className='address-page'>
<View className='page-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}> <View className='page-header surface-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
<View className='star-badge' />
<View className='flex-between' style={{ width: '100%' }}> <View className='flex-between' style={{ width: '100%' }}>
<Text className='back-btn' onTap={() => Taro.navigateBack()}>←</Text> <Text className='back-btn' onTap={() => Taro.navigateBack()}>←</Text>
<Text className='page-title'>收货地址</Text> <Text className='page-title'>收货地址</Text>
@@ -110,7 +109,7 @@ export default function AddressPage() {
{/* 地址列表 */} {/* 地址列表 */}
<View className='address-list'> <View className='address-list'>
{list.map(item => ( {list.map(item => (
<View key={item.id} className='address-card dashed-card'> <View key={item.id} className='address-card surface-card'>
<View className='address-header'> <View className='address-header'>
<View className='address-user'> <View className='address-user'>
<Text className='address-name'>{item.name}</Text> <Text className='address-name'>{item.name}</Text>
@@ -144,7 +143,7 @@ export default function AddressPage() {
{/* 底部添加按钮 */} {/* 底部添加按钮 */}
<View className='action-bar'> <View className='action-bar'>
<View className='btn-gradient' onTap={openAdd}> <View className='btn-primary' onTap={openAdd}>
<Text>新增收货地址</Text> <Text>新增收货地址</Text>
</View> </View>
</View> </View>
@@ -152,8 +151,7 @@ export default function AddressPage() {
{/* 新增/编辑弹窗 */} {/* 新增/编辑弹窗 */}
{showForm && ( {showForm && (
<View className='modal-overlay'> <View className='modal-overlay'>
<View className='modal-card dashed-card address-form'> <View className='modal-card surface-card address-form'>
<View className='star-badge' />
<Text className='modal-title'>{editing ? '编辑地址' : '新增地址'}</Text> <Text className='modal-title'>{editing ? '编辑地址' : '新增地址'}</Text>
<Input className='form-input' placeholder='收货人姓名' <Input className='form-input' placeholder='收货人姓名'
@@ -178,10 +176,10 @@ export default function AddressPage() {
</View> </View>
<View className='form-actions'> <View className='form-actions'>
<View className='btn-outline' onTap={() => { setShowForm(false); resetForm() }}> <View className='btn-secondary' onTap={() => { setShowForm(false); resetForm() }}>
<Text>取消</Text> <Text>取消</Text>
</View> </View>
<View className='btn-gradient' onTap={handleSave}> <View className='btn-primary' onTap={handleSave}>
<Text>保存</Text> <Text>保存</Text>
</View> </View>
</View> </View>
src/pages/agreement/index.scss
+2 -3
View File
@@ -1,5 +1,5 @@
.agreement-page { .agreement-page {
padding: 0 24px 24px; padding: 0 32px 32px;
} }
.agreement-title { .agreement-title {
@@ -8,11 +8,10 @@
color: var(--text-primary); color: var(--text-primary);
display: block; display: block;
margin-bottom: 32px; margin-bottom: 32px;
padding-top: 24px;
} }
.agreement-content { .agreement-content {
padding: 40px 32px; padding: 40px 0;
line-height: 1.8; line-height: 1.8;
} }
src/pages/profile/index.scss
+10 -10
View File
@@ -19,7 +19,7 @@
width: 120px; width: 120px;
height: 120px; height: 120px;
border-radius: 50%; border-radius: 50%;
border: 4px dashed var(--line-star); border: 1rpx solid var(--border);
margin-right: 24px; margin-right: 24px;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -28,12 +28,12 @@
width: 120px; width: 120px;
height: 120px; height: 120px;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, var(--bg-card) 0%, rgba(91, 140, 255, 0.1) 100%); background: var(--bg-muted);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-right: 24px; margin-right: 24px;
border: 4px dashed var(--line-star); border: 1rpx solid var(--border);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -89,7 +89,7 @@
.status-num { .status-num {
font-size: 36px; font-size: 36px;
font-weight: 800; font-weight: 800;
color: var(--accent-pink); color: var(--accent-primary);
margin-bottom: 8px; margin-bottom: 8px;
} }
@@ -101,14 +101,14 @@
.status-divider { .status-divider {
width: 2px; width: 2px;
height: 48px; height: 48px;
background: var(--line-star); background: var(--border);
opacity: 0.25; opacity: 0.25;
flex-shrink: 0; flex-shrink: 0;
} }
.status-divider-h { .status-divider-h {
height: 2px; height: 2px;
background: var(--line-star); background: var(--border);
opacity: 0.15; opacity: 0.15;
margin: 0 16px; margin: 0 16px;
} }
@@ -240,7 +240,7 @@
border-radius: 50%; border-radius: 50%;
margin: 0 auto 24px; margin: 0 auto 24px;
background: var(--bg-input); background: var(--bg-input);
border: 3px dashed var(--line-star); border: 1rpx solid var(--border);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -265,7 +265,7 @@
width: 100%; width: 100%;
height: 80px; height: 80px;
background: var(--bg-input); background: var(--bg-input);
border: 3px dashed var(--line-star); border: 1rpx solid var(--border);
border-radius: 16px; border-radius: 16px;
padding: 0 24px; padding: 0 24px;
font-size: 28px; font-size: 28px;
@@ -280,8 +280,8 @@
gap: 20px; gap: 20px;
} }
.login-actions .btn-outline, .login-actions .btn-secondary,
.login-actions .btn-gradient { .login-actions .btn-primary {
flex: 1; flex: 1;
padding: 20px 0; padding: 20px 0;
text-align: center; text-align: center;
src/pages/profile/index.tsx
+16 -20
View File
@@ -73,7 +73,7 @@ export default function ProfilePage() {
const sync = () => { const sync = () => {
const info = getUserInfo() const info = getUserInfo()
if (info?.openid) { if (info && info.openid) {
setIsLoggedIn(true) setIsLoggedIn(true)
setUserInfoState({ nickName: info.nickName || '', avatarUrl: info.avatarUrl || '' }) setUserInfoState({ nickName: info.nickName || '', avatarUrl: info.avatarUrl || '' })
} else { } else {
@@ -134,7 +134,7 @@ export default function ProfilePage() {
console.log('[Profile] wx.login 成功，code=', wxLogin.code) console.log('[Profile] wx.login 成功，code=', wxLogin.code)
const result = await login(wxLogin.code) const result = await login(wxLogin.code)
console.log('[Profile] 后端 /auth/login 返回:', JSON.stringify(result)) console.log('[Profile] 后端 /auth/login 返回:', JSON.stringify(result))
if (!result?.accessToken) { if (!result || !result.accessToken) {
loginFail('登录失败，未拿到 token') loginFail('登录失败，未拿到 token')
return return
} }
@@ -142,7 +142,7 @@ export default function ProfilePage() {
let openid = '' let openid = ''
try { try {
const me = await getMe() const me = await getMe()
openid = me?.openid || '' openid = (me && me.openid) || ''
} catch { } catch {
openid = '' openid = ''
} }
@@ -168,7 +168,7 @@ export default function ProfilePage() {
loginFinish(result.accessToken, openid, result.nickname || '', result.avatar || '') loginFinish(result.accessToken, openid, result.nickname || '', result.avatar || '')
} catch (e) { } catch (e) {
console.error('[Profile] 登录流程出错:', e) console.error('[Profile] 登录流程出错:', e)
loginFail((e as Error)?.message || '后端连接失败，请检查网络') loginFail((e && (e as Error).message) || '后端连接失败，请检查网络')
} }
} }
@@ -186,7 +186,7 @@ export default function ProfilePage() {
let openid = '' let openid = ''
try { try {
const me = await getMe() const me = await getMe()
openid = me?.openid || '' openid = (me && me.openid) || ''
} catch { } catch {
openid = '' openid = ''
} }
@@ -196,14 +196,14 @@ export default function ProfilePage() {
} }
const stored = getUserInfo() const stored = getUserInfo()
loginFinish( loginFinish(
stored?.accessToken || getToken(), (stored && stored.accessToken) || getToken(),
openid, openid,
loginNickName, loginNickName,
loginAvatarUrl loginAvatarUrl
) )
} catch (e) { } catch (e) {
console.error('[Profile] 保存资料出错:', e) console.error('[Profile] 保存资料出错:', e)
loginFail((e as Error)?.message || '保存失败') loginFail((e && (e as Error).message) || '保存失败')
} }
} }
@@ -282,8 +282,7 @@ export default function ProfilePage() {
<View className='profile-page'> <View className='profile-page'>
{/* 用户信息头部 */} {/* 用户信息头部 */}
<View className='profile-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}> <View className='profile-header surface-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
<View className='star-badge' />
<View className='user-info'> <View className='user-info'>
{isLoggedIn && userInfo.avatarUrl ? ( {isLoggedIn && userInfo.avatarUrl ? (
<Image className='avatar' src={userInfo.avatarUrl} mode='aspectFill' /> <Image className='avatar' src={userInfo.avatarUrl} mode='aspectFill' />
@@ -337,8 +336,7 @@ export default function ProfilePage() {
<Text className='section-title'>常用功能</Text> <Text className='section-title'>常用功能</Text>
<View className='menu-grid'> <View className='menu-grid'>
{MENU_ITEMS.map((item, idx) => ( {MENU_ITEMS.map((item, idx) => (
<View key={idx} className='menu-card dashed-card' onTap={() => handleMenuClick(item.path, item.label)}> <View key={idx} className='menu-card surface-card' onTap={() => handleMenuClick(item.path, item.label)}>
<View className='star-badge' />
<Image className='menu-icon-img' src={ICON_MAP[item.label]} mode='aspectFit' /> <Image className='menu-icon-img' src={ICON_MAP[item.label]} mode='aspectFit' />
<Text className='menu-label'>{item.label}</Text> <Text className='menu-label'>{item.label}</Text>
</View> </View>
@@ -347,8 +345,7 @@ export default function ProfilePage() {
</View> </View>
{/* 企业定制入口 */} {/* 企业定制入口 */}
<View className='enterprise-section dashed-card mt-20'> <View className='enterprise-section surface-card mt-20'>
<View className='star-badge' />
<View className='flex-between'> <View className='flex-between'>
<View className='flex-column'> <View className='flex-column'>
<View className='flex-center'> <View className='flex-center'>
@@ -357,7 +354,7 @@ export default function ProfilePage() {
</View> </View>
<Text className='enterprise-desc'>年会礼品、入职纪念、团建伴手礼</Text> <Text className='enterprise-desc'>年会礼品、入职纪念、团建伴手礼</Text>
</View> </View>
<View className='btn-gradient enterprise-btn'> <View className='btn-primary enterprise-btn'>
<Text>立即咨询</Text> <Text>立即咨询</Text>
</View> </View>
</View> </View>
@@ -368,18 +365,17 @@ export default function ProfilePage() {
{/* 登录弹窗 */} {/* 登录弹窗 */}
{showLogin && ( {showLogin && (
<View className='modal-overlay'> <View className='modal-overlay'>
<View className='login-card dashed-card'> <View className='login-card surface-card'>
<View className='star-badge' />
<Text className='login-title'>登录智绘微刻</Text> <Text className='login-title'>登录智绘微刻</Text>
{loginStep === 'entry' ? ( {loginStep === 'entry' ? (
<> <>
<Text className='login-desc'>登录后同步您的设计清单和订单</Text> <Text className='login-desc'>登录后同步您的设计清单和订单</Text>
<View className='login-actions'> <View className='login-actions'>
<View className='btn-outline' onTap={handleCloseLogin}> <View className='btn-secondary' onTap={handleCloseLogin}>
<Text>取消</Text> <Text>取消</Text>
</View> </View>
<View className='btn-gradient' onTap={handleLogin}> <View className='btn-primary' onTap={handleLogin}>
<Text>微信登录</Text> <Text>微信登录</Text>
</View> </View>
</View> </View>
@@ -406,10 +402,10 @@ export default function ProfilePage() {
onInput={(e: any) => setLoginNickName(e.detail.value)} onInput={(e: any) => setLoginNickName(e.detail.value)}
/> />
<View className='login-actions'> <View className='login-actions'>
<View className='btn-outline' onTap={handleCloseLogin}> <View className='btn-secondary' onTap={handleCloseLogin}>
<Text>取消</Text> <Text>取消</Text>
</View> </View>
<View className='btn-gradient' onTap={handleSaveProfile}> <View className='btn-primary' onTap={handleSaveProfile}>
<Text>保存</Text> <Text>保存</Text>
</View> </View>
</View> </View>
src/pages/settings/index.scss
+9 -9
View File
@@ -13,7 +13,7 @@
width: 100px; width: 100px;
height: 100px; height: 100px;
border-radius: 50%; border-radius: 50%;
border: 3px dashed var(--line-star); border: 1rpx solid var(--border);
} }
.settings-avatar-placeholder { .settings-avatar-placeholder {
@@ -21,7 +21,7 @@
height: 100px; height: 100px;
border-radius: 50%; border-radius: 50%;
background: var(--bg-input); background: var(--bg-input);
border: 3px dashed var(--line-star); border: 1rpx solid var(--border);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -58,7 +58,7 @@
} }
.settings-item.bordered { .settings-item.bordered {
border-bottom: 1px dashed rgba(0,0,0,0.06); border-bottom: 1rpx solid var(--border);
} }
.settings-item-icon-img { .settings-item-icon-img {
@@ -78,8 +78,8 @@
.logout-btn { .logout-btn {
text-align: center; text-align: center;
padding: 24px 0; padding: 24px 0;
color: #ff6b6b; color: var(--danger);
border: 3px dashed #ff6b6b; border: 1rpx solid var(--danger);
} }
/* --- 主题选择 --- */ /* --- 主题选择 --- */
@@ -107,7 +107,7 @@
padding: 24px 16px; padding: 24px 16px;
border-radius: 20px; border-radius: 20px;
background: var(--bg-input); background: var(--bg-input);
border: 3px dashed transparent; border: 1rpx solid transparent;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -116,8 +116,8 @@
} }
.theme-option.active { .theme-option.active {
border-color: var(--accent-pink); border-color: var(--accent-primary);
background: rgba(255, 154, 158, 0.08); background: var(--accent-primary-soft);
} }
.theme-option-text { .theme-option-text {
@@ -130,7 +130,7 @@
width: 16px; width: 16px;
height: 16px; height: 16px;
border-radius: 50%; border-radius: 50%;
background: var(--accent-pink); background: var(--accent-primary);
} }
.theme-hint { .theme-hint {
src/pages/settings/index.tsx
+9 -9
View File
@@ -72,7 +72,7 @@ export default function SettingsPage() {
<View className='settings-page'> <View className='settings-page'>
<View className='settings-area'> <View className='settings-area'>
<View className='page-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}> <View className='page-header surface-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
<View className='flex-between' style={{ width: '100%' }}> <View className='flex-between' style={{ width: '100%' }}>
<Text className='back-btn' onTap={() => Taro.navigateBack()}>←</Text> <Text className='back-btn' onTap={() => Taro.navigateBack()}>←</Text>
<Text className='page-title'>设置</Text> <Text className='page-title'>设置</Text>
@@ -81,7 +81,7 @@ export default function SettingsPage() {
</View> </View>
{/* 用户卡片 */} {/* 用户卡片 */}
<View className='settings-user dashed-card mt-20'> <View className='settings-user surface-card mt-20'>
<View className='flex-between' onTap={() => setShowEdit(true)}> <View className='flex-between' onTap={() => setShowEdit(true)}>
<View className='flex-center'> <View className='flex-center'>
{user.avatarUrl ? ( {user.avatarUrl ? (
@@ -101,7 +101,7 @@ export default function SettingsPage() {
</View> </View>
{/* 主题设置 */} {/* 主题设置 */}
<View className='settings-section dashed-card mt-20'> <View className='settings-section surface-card mt-20'>
<Text className='section-label'>外观</Text> <Text className='section-label'>外观</Text>
<View className='theme-options'> <View className='theme-options'>
{THEME_OPTIONS.map(opt => ( {THEME_OPTIONS.map(opt => (
@@ -121,7 +121,7 @@ export default function SettingsPage() {
</View> </View>
{/* 菜单列表 */} {/* 菜单列表 */}
<View className='settings-list dashed-card mt-20'> <View className='settings-list surface-card mt-20'>
{MENU.map((item, idx) => ( {MENU.map((item, idx) => (
<View key={idx} className={`settings-item ${idx < MENU.length - 1 ? 'bordered' : ''}`} onTap={() => item.action({ setShowEdit })}> <View key={idx} className={`settings-item ${idx < MENU.length - 1 ? 'bordered' : ''}`} onTap={() => item.action({ setShowEdit })}>
<Image className='settings-item-icon-img' src={item.icon} mode='aspectFit' /> <Image className='settings-item-icon-img' src={item.icon} mode='aspectFit' />
@@ -132,9 +132,9 @@ export default function SettingsPage() {
</View> </View>
{/* 退出登录 */} {/* 退出登录 */}
{user?.openid && ( {user && user.openid && (
<View className='mt-20'> <View className='mt-20'>
<View className='btn-outline logout-btn' onTap={handleLogout}> <View className='btn-secondary logout-btn' onTap={handleLogout}>
<Text>退出登录</Text> <Text>退出登录</Text>
</View> </View>
</View> </View>
@@ -145,7 +145,7 @@ export default function SettingsPage() {
{/* 编辑弹窗 */} {/* 编辑弹窗 */}
{showEdit && ( {showEdit && (
<View className='modal-overlay'> <View className='modal-overlay'>
<View className='modal-card dashed-card'> <View className='modal-card surface-card'>
<Text className='modal-title'>修改信息</Text> <Text className='modal-title'>修改信息</Text>
<Button className='avatar-btn' openType='chooseAvatar' onChooseAvatar={onChooseAvatar}> <Button className='avatar-btn' openType='chooseAvatar' onChooseAvatar={onChooseAvatar}>
{editAvatar ? ( {editAvatar ? (
@@ -161,10 +161,10 @@ export default function SettingsPage() {
onInput={(e: any) => setEditName(e.detail.value)} onInput={(e: any) => setEditName(e.detail.value)}
/> />
<View className='form-actions'> <View className='form-actions'>
<View className='btn-outline' onTap={() => setShowEdit(false)}> <View className='btn-secondary' onTap={() => setShowEdit(false)}>
<Text>取消</Text> <Text>取消</Text>
</View> </View>
<View className='btn-gradient' onTap={handleSaveInfo}> <View className='btn-primary' onTap={handleSaveInfo}>
<Text>保存</Text> <Text>保存</Text>
</View> </View>
</View> </View>