huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成consumer端同步

Browse Source
This commit is contained in:
huangzhenbao
2026-05-14 15:28:09 +08:00
parent 612fb3d360
commit 0ffbc53902
197 changed files with 92657 additions and 7564 deletions
Download Patch File Download Diff File Expand all files Collapse all files

832
.consumer-sync-backup/20260514-093851/pages/mall/consumer/settings.uvue Normal file
View File

@@ -0,0 +1,832 @@
<!-- 设置页面 -->
<template>
<view class="settings-page">
<!-- 顶部栏 -->
<!--<view class="settings-header" :style="{ paddingTop: statusBarHeight + 'px' }">
<text class="back-btn" @click="goBack">❮</text>
<text class="header-title">设置</text>
</view>-->
<scroll-view class="settings-content" direction="vertical">
<!-- 账户设置 -->
<view class="settings-section">
<text class="section-title">账户设置</text>
<view class="section-list">
<view class="list-item" @click="goToProfile">
<text class="item-icon">👤</text>
<text class="item-text">个人资料</text>
<text class="item-arrow">›</text>
</view>
<view class="list-item" @click="goToAddressList">
<text class="item-icon">📍</text>
<text class="item-text">收货地址</text>
<text class="item-arrow">›</text>
</view>
<view class="list-item" @click="changePassword">
<text class="item-icon">🔒</text>
<text class="item-text">修改密码</text>
<text class="item-arrow">›</text>
</view>
<view class="list-item" @click="bindPhone">
<text class="item-icon">📱</text>
<text class="item-text">手机绑定</text>
<view class="item-right">
<text class="item-status" :class="userInfo.phone != null && userInfo.phone != '' ? 'bound' : ''">
{{ userInfo.phone != null && userInfo.phone != '' ? '已绑定' : '未绑定' }}
</text>
<text class="item-arrow">›</text>
</view>
</view>
<view class="list-item" @click="bindEmail">
<text class="item-icon">📧</text>
<text class="item-text">邮箱绑定</text>
<view class="item-right">
<text class="item-status" :class="userInfo.email != null && userInfo.email != '' ? 'bound' : ''">
{{ userInfo.email != null && userInfo.email != '' ? '已绑定' : '未绑定' }}
</text>
<text class="item-arrow">›</text>
</view>
</view>
</view>
</view>
<!-- 消息通知 -->
<view class="settings-section">
<text class="section-title">消息通知</text>
<view class="section-list">
<view class="list-item">
<text class="item-icon">🔔</text>
<text class="item-text">订单消息</text>
<switch class="settings-switch" :checked="notifications.order" @change="toggleNotification('order')" />
</view>
<view class="list-item">
<text class="item-icon">🎁</text>
<text class="item-text">促销活动</text>
<switch class="settings-switch" :checked="notifications.promotion" @change="toggleNotification('promotion')" />
</view>
<view class="list-item">
<text class="item-icon">⭐</text>
<text class="item-text">评价提醒</text>
<switch class="settings-switch" :checked="notifications.review" @change="toggleNotification('review')" />
</view>
</view>
</view>
<!-- 隐私设置 -->
<view class="settings-section">
<text class="section-title">隐私设置</text>
<view class="section-list">
<view class="list-item">
<text class="item-icon">👁️</text>
<text class="item-text">隐藏购物记录</text>
<switch class="settings-switch" :checked="privacy.hidePurchase" @change="togglePrivacy('hidePurchase')" />
</view>
<view class="list-item">
<text class="item-icon">🔍</text>
<text class="item-text">允许通过手机号找到我</text>
<switch class="settings-switch" :checked="privacy.allowSearchByPhone" @change="togglePrivacy('allowSearchByPhone')" />
</view>
<view class="list-item">
<text class="item-icon">💬</text>
<text class="item-text">接收商家消息</text>
<switch class="settings-switch" :checked="privacy.receiveMerchantMsg" @change="togglePrivacy('receiveMerchantMsg')" />
</view>
</view>
</view>
<!-- 通用设置 -->
<view class="settings-section">
<text class="section-title">通用设置</text>
<view class="section-list">
<view class="list-item" @click="clearCache">
<text class="item-icon">🗑️</text>
<text class="item-text">清除缓存</text>
<view class="item-right">
<text class="item-cache">{{ cacheSize }}</text>
<text class="item-arrow">›</text>
</view>
</view>
<view class="list-item" @click="changeLanguage">
<text class="item-icon">🌐</text>
<text class="item-text">语言设置</text>
<view class="item-right">
<text class="item-status">{{ currentLanguage }}</text>
<text class="item-arrow">›</text>
</view>
</view>
<view class="list-item" @click="changeTheme">
<text class="item-icon">🎨</text>
<text class="item-text">主题设置</text>
<view class="item-right">
<text class="item-status">{{ currentTheme }}</text>
<text class="item-arrow">›</text>
</view>
</view>
</view>
</view>
<!-- 我的服务 -->
<view class="settings-section">
<text class="section-title">我的服务</text>
<view class="section-list">
<view class="list-item" @click="goToMyReviews">
<text class="item-icon">📝</text>
<text class="item-text">我的评价</text>
<text class="item-arrow">›</text>
</view>
</view>
</view>
<!-- 关于我们 -->
<view class="settings-section">
<text class="section-title">关于我们</text>
<view class="section-list">
<view class="list-item" @click="aboutUs">
<text class="item-icon">ℹ️</text>
<text class="item-text">关于商城</text>
<text class="item-arrow">›</text>
</view>
<view class="list-item" @click="userAgreement">
<text class="item-icon">📜</text>
<text class="item-text">用户协议</text>
<text class="item-arrow">›</text>
</view>
<view class="list-item" @click="privacyPolicy">
<text class="item-icon">🛡️</text>
<text class="item-text">隐私政策</text>
<text class="item-arrow">›</text>
</view>
<view class="list-item" @click="checkUpdate">
<text class="item-icon">🔄</text>
<text class="item-text">检查更新</text>
<view class="item-right">
<text class="item-status">{{ appVersion }}</text>
<text class="item-arrow">›</text>
</view>
</view>
</view>
</view>
<!-- 客服与反馈 -->
<view class="settings-section">
<text class="section-title">客服与反馈</text>
<view class="section-list">
<view class="list-item" @click="contactService">
<text class="item-icon">💬</text>
<text class="item-text">联系客服</text>
<text class="item-arrow">›</text>
</view>
<view class="list-item" @click="feedback">
<text class="item-icon">📝</text>
<text class="item-text">意见反馈</text>
<text class="item-arrow">›</text>
</view>
<view class="list-item" @click="rateApp">
<text class="item-icon">⭐</text>
<text class="item-text">给个好评</text>
<text class="item-arrow">›</text>
</view>
</view>
</view>
<!-- 退出登录 -->
<view class="logout-section">
<button class="logout-btn" @click="logout">退出登录</button>
</view>
<!-- 账号注销 -->
<view class="delete-account-section">
<text class="delete-account" @click="deleteAccount">注销账号</text>
</view>
</scroll-view>
</view>
</template>
<script setup lang="uts">
import { ref, onMounted } from 'vue'
import { onBackPress } from '@dcloudio/uni-app'
import supa from '@/components/supadb/aksupainstance.uts'
// 拦截返回事件，强制跳转到个人中心页
onBackPress((options) => {
// 无论是什么触发的返回（系统返回键或导航栏返回按钮），都跳转到profile
// 注意：onBackPress 只能在 page 中使用，component 中无效
uni.switchTab({
url: '/pages/main/profile'
})
// 返回 true 表示阻止默认返回行为
return true
})
type UserType = {
id: string
phone: string | null
email: string | null
nickname: string | null
avatar_url: string | null
}
type NotificationType = {
order: boolean
promotion: boolean
review: boolean
}
type PrivacyType = {
hidePurchase: boolean
allowSearchByPhone: boolean
receiveMerchantMsg: boolean
}
const userInfo = ref<UserType>({
id: '',
phone: null,
email: null,
nickname: null,
avatar_url: null
})
const notifications = ref<NotificationType>({
order: true,
promotion: true,
review: true
})
const privacy = ref<PrivacyType>({
hidePurchase: false,
allowSearchByPhone: true,
receiveMerchantMsg: true
})
const cacheSize = ref<string>('0.0 MB')
const currentLanguage = ref<string>('简体中文')
const currentTheme = ref<string>('自动')
const appVersion = ref<string>('1.0.0')
const statusBarHeight = ref<number>(0)
const loadUserInfo = () => {
const userStore = uni.getStorageSync('userInfo')
if (userStore != null) {
const storeObj = userStore as UTSJSONObject
const user: UserType = {
id: storeObj.getString('id') ?? '',
phone: storeObj.getString('phone'),
email: storeObj.getString('email'),
nickname: storeObj.getString('nickname'),
avatar_url: storeObj.getString('avatar_url')
} as UserType
userInfo.value = user
}
}
const loadSettings = () => {
const savedNotifications = uni.getStorageSync('userNotifications')
if (savedNotifications != null) {
const notifObj = savedNotifications as UTSJSONObject
const notif: NotificationType = {
order: notifObj.getBoolean('order') ?? true,
promotion: notifObj.getBoolean('promotion') ?? true,
review: notifObj.getBoolean('review') ?? true
} as NotificationType
notifications.value = notif
}
const savedPrivacy = uni.getStorageSync('userPrivacy')
if (savedPrivacy != null) {
const privacyObj = savedPrivacy as UTSJSONObject
const priv: PrivacyType = {
hidePurchase: privacyObj.getBoolean('hidePurchase') ?? false,
allowSearchByPhone: privacyObj.getBoolean('allowSearchByPhone') ?? true,
receiveMerchantMsg: privacyObj.getBoolean('receiveMerchantMsg') ?? true
} as PrivacyType
privacy.value = priv
}
cacheSize.value = '12.5 MB'
const appInfo = uni.getAppBaseInfo()
if (appInfo != null) {
const infoObj = appInfo as UTSJSONObject
const version = infoObj.getString('appVersion')
if (version != null) {
appVersion.value = version
}
}
}
onMounted(() => {
const systemInfo = uni.getSystemInfoSync()
statusBarHeight.value = systemInfo.statusBarHeight ?? 0
loadUserInfo()
loadSettings()
})
// 跳转到个人资料
const goToProfile = () => {
uni.navigateTo({
url: '/pages/user/profile'
})
}
// 跳转到地址管理
const goToAddressList = () => {
uni.navigateTo({
url: '/pages/mall/consumer/address-list'
})
}
// 修改密码
const changePassword = () => {
uni.navigateTo({
url: '/pages/user/change-password'
})
}
// 绑定手机
const bindPhone = () => {
uni.navigateTo({
url: '/pages/user/bind-phone'
})
}
// 绑定邮箱
const bindEmail = () => {
uni.navigateTo({
url: '/pages/user/bind-email'
})
}
// 切换通知设置
const toggleNotification = (type: string) => {
if (type === 'order') {
notifications.value.order = notifications.value.order === false
} else if (type === 'promotion') {
notifications.value.promotion = notifications.value.promotion === false
} else if (type === 'review') {
notifications.value.review = notifications.value.review === false
}
uni.setStorageSync('userNotifications', notifications.value)
}
// 切换隐私设置
const togglePrivacy = (type: string) => {
if (type === 'hidePurchase') {
privacy.value.hidePurchase = privacy.value.hidePurchase === false
} else if (type === 'allowSearchByPhone') {
privacy.value.allowSearchByPhone = privacy.value.allowSearchByPhone === false
} else if (type === 'receiveMerchantMsg') {
privacy.value.receiveMerchantMsg = privacy.value.receiveMerchantMsg === false
}
uni.setStorageSync('userPrivacy', privacy.value)
}
// 清除缓存
const clearCache = () => {
uni.showModal({
title: '清除缓存',
content: `确定要清除 ${cacheSize.value} 缓存吗？`,
success: (res) => {
if (res.confirm) {
// 这里应该清除实际缓存
uni.showLoading({
title: '清除中...'
})
setTimeout(() => {
cacheSize.value = '0.0 MB'
uni.hideLoading()
uni.showToast({
title: '缓存已清除',
icon: 'success'
})
}, 1000)
}
}
})
}
// 切换语言
const changeLanguage = () => {
uni.showActionSheet({
itemList: ['简体中文', 'English', '日本語'],
success: (res) => {
const languages = ['简体中文', 'English', '日本語']
currentLanguage.value = languages[res.tapIndex]
uni.setStorageSync('appLanguage', currentLanguage.value)
uni.showToast({
title: '语言已切换',
icon: 'success'
})
}
})
}
// 切换主题
const changeTheme = () => {
uni.showActionSheet({
itemList: ['自动', '浅色模式', '深色模式'],
success: (res) => {
const themes = ['自动', '浅色模式', '深色模式']
currentTheme.value = themes[res.tapIndex]
uni.setStorageSync('appTheme', currentTheme.value)
uni.showToast({
title: '主题已切换',
icon: 'success'
})
}
})
}
// 我的评价
const goToMyReviews = () => {
// 跳转到订单列表的已完成或者是评价相关的页面
uni.navigateTo({
url: '/pages/mall/consumer/orders?status=completed'
})
}
// 关于我们
const aboutUs = () => {
uni.navigateTo({
url: '/pages/user/terms?type=about'
})
}
// 用户协议
const userAgreement = () => {
uni.navigateTo({
url: '/pages/user/terms?type=agreement'
})
}
// 隐私政策
const privacyPolicy = () => {
uni.navigateTo({
url: '/pages/user/terms?type=privacy'
})
}
// 检查更新
const checkUpdate = () => {
uni.showLoading({
title: '检查更新中...'
})
setTimeout(() => {
uni.hideLoading()
uni.showModal({
title: '检查更新',
content: '当前已是最新版本',
showCancel: false
})
}, 1000)
}
// 联系客服
const contactService = () => {
uni.navigateTo({
url: '/pages/mall/consumer/chat'
})
}
// 意见反馈
const feedback = () => {
uni.navigateTo({
url: '/pages/info/feedback'
})
}
const rateApp = () => {
uni.showModal({
title: '给个好评',
content: '如果喜欢我们的应用，请给个好评吧！感谢您的支持！',
confirmText: '好的',
showCancel: false
})
}
// 退出登录
const logout = () => {
uni.showModal({
title: '退出登录',
content: '确定要退出登录吗？',
success: (res) => {
if (res.confirm) {
uni.showLoading({
title: '正在退出...'
})
uni.removeStorageSync('userInfo')
uni.removeStorageSync('user_id')
uni.removeStorageSync('access_token')
uni.hideLoading()
uni.showToast({
title: '已退出登录',
icon: 'success'
})
setTimeout(() => {
uni.reLaunch({
url: '/pages/user/login'
})
}, 1000)
}
}
})
}
const deleteAccount = () => {
uni.showModal({
title: '注销账号',
content: '确定要注销账号吗？此操作不可恢复，所有数据将被删除！',
confirmText: '注销',
confirmColor: '#ff4757',
success: (res) => {
if (res.confirm) {
uni.showLoading({
title: '注销中...'
})
let userId: string | null = userInfo.value.id
if (userId == null || userId === '') {
const storageId = uni.getStorageSync('user_id')
userId = (storageId != null) ? storageId as string : null
}
if (userId != null) {
const updateObj: UTSJSONObject = new UTSJSONObject()
updateObj.set('status', 3)
supa
.from('ml_user_profiles')
.update(updateObj)
.eq('user_id', userId)
.execute()
}
uni.removeStorageSync('userInfo')
uni.removeStorageSync('user_id')
uni.removeStorageSync('access_token')
uni.hideLoading()
uni.showToast({
title: '账号已注销',
icon: 'success',
duration: 2000
})
setTimeout(() => {
uni.reLaunch({
url: '/pages/user/login'
})
}, 1500)
}
}
})
}
</script>
<style scoped>
/* 响应式布局优化 */
.section-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.list-item {
display: flex;
align-items: center;
padding: 15px;
border-bottom: 1px solid #f5f5f5;
background-color: #ffffff;
/* 手机端每行显示4个，自适应排到下一行 */
width: 25%;
flex-direction: column; /* 内容改为垂直排列，图标在上文字在下 */
justify-content: center;
text-align: center;
box-sizing: border-box;
border-right: 1px solid #f5f5f5; /* 添加右边框分隔 */
}
.item-icon {
font-size: 24px;
margin-right: 0; /* 移除右侧间距 */
margin-bottom: 5px; /* 添加底部间距 */
}
.item-text {
font-size: 12px;
color: #333333;
/* 文字太长可能需要处理，这里暂时不做截断 */
}
.item-arrow {
display: none; /* 网格模式下通常不需要箭头 */
}
.item-right {
display: none; /* 简化显示，隐藏右侧状态/箭头等复杂内容 */
}
/* 针对 switch 组件的特殊处理，如果需要显示开关，可能需要调整布局 */
.settings-switch {
transform: scale(0.7);
margin-top: 5px;
}
/* 屏幕宽度大于 480px (大屏手机/平板/PC) 时，启用更宽的网格布局或列表布局 */
@media screen and (min-width: 480px) {
.list-item {
width: 47%; /* width: calc(50% - 10px); REPLACED */
margin: 5px;
border: 1px solid #f0f0f0;
border-radius: 8px;
border-bottom: 1px solid #f0f0f0;
flex-direction: row; /* 恢复水平排列 */
text-align: left;
justify-content: flex-start;
}
.item-icon {
margin-right: 15px;
margin-bottom: 0;
}
.item-text {
font-size: 14px;
}
.item-arrow, .item-right {
display: flex; /* 恢复显示 */
margin-left: auto; /* 推到右侧 */
}
}
/* 增加针对手机横屏的媒体查询 */
@media screen and (orientation: landscape) and (max-height: 500px) {
.list-item {
width: 22%; /* width: calc(25% - 10px); REPLACED */
margin: 5px;
border: 1px solid #f0f0f0;
border-radius: 8px;
flex-direction: column;
}
}
/* 屏幕宽度大于 1024px (大屏PC) 时 */
@media screen and (min-width: 1024px) {
.settings-page {
flex-direction: row; /* 整体左右布局 */
}
.settings-header {
display: none;
}
.settings-content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.list-item {
width: 31%; /* width: calc(33.33% - 10px); REPLACED */
flex-direction: row; /* PC端保持水平排列 */
justify-content: flex-start;
text-align: left;
}
.item-icon {
margin-right: 15px;
margin-bottom: 0;
}
.item-arrow, .item-right {
display: flex;
margin-left: auto;
}
}
.settings-page {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background-color: #f5f5f5;
}
.settings-header {
background-color: #ffffff;
padding: 15px;
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid #e5e5e5;
}
.back-btn {
font-size: 24px;
color: #333333;
padding: 5px;
margin-right: 15px;
}
.header-title {
font-size: 18px;
font-weight: bold;
color: #333333;
}
.settings-content {
flex: 1;
width: 100%;
height: 100px;
}
.settings-section {
background-color: #ffffff;
margin-bottom: 10px;
padding: 15px;
}
.section-title {
font-size: 16px;
font-weight: bold;
color: #333333;
margin-bottom: 15px;
}
/* 删除多余的 .section-list 定义 */
/* 删除多余的 .list-item 定义 */
/* 删除多余的 .list-item:last-child 定义 */
.item-icon {
font-size: 20px;
margin-right: 15px;
}
.item-text {
flex: 1;
font-size: 14px;
color: #333333;
}
.item-arrow {
color: #999999;
font-size: 16px;
margin-left: 10px;
}
.item-right {
display: flex;
align-items: center;
}
.item-status {
font-size: 12px;
color: #999999;
margin-right: 10px;
}
.item-status.bound {
color: #4caf50;
}
.item-cache {
font-size: 12px;
color: #999999;
margin-right: 10px;
}
.logout-section {
background-color: #ffffff;
margin-top: 10px;
padding: 15px;
}
.logout-btn {
background-color: #ffffff;
color: #ff4757;
height: 45px;
border: 1px solid #ff4757;
border-radius: 22.5px;
font-size: 16px;
font-weight: bold;
}
.delete-account-section {
background-color: #ffffff;
padding: 20px 15px;
text-align: center;
}
.delete-account {
color: #999999;
font-size: 14px;
}/* text-decoration: underline; REMOVED */
</style>