747 lines
17 KiB
Plaintext
747 lines
17 KiB
Plaintext
<!-- 设置页面 -->
|
||
<template>
|
||
<view class="settings-page">
|
||
<!-- 顶部栏 -->
|
||
<view class="settings-header">
|
||
<text class="back-btn" @click="goBack">‹</text>
|
||
<text class="header-title">设置</text>
|
||
</view>
|
||
|
||
<scroll-view class="settings-content" scroll-y>
|
||
<!-- 账户设置 -->
|
||
<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="{ bound: userInfo.phone }">
|
||
{{ 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="{ bound: userInfo.email }">
|
||
{{ 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 :checked="notifications.order" @change="toggleNotification('order')" />
|
||
</view>
|
||
<view class="list-item">
|
||
<text class="item-icon">🎁</text>
|
||
<text class="item-text">促销活动</text>
|
||
<switch :checked="notifications.promotion" @change="toggleNotification('promotion')" />
|
||
</view>
|
||
<view class="list-item">
|
||
<text class="item-icon">⭐</text>
|
||
<text class="item-text">评价提醒</text>
|
||
<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 :checked="privacy.hidePurchase" @change="togglePrivacy('hidePurchase')" />
|
||
</view>
|
||
<view class="list-item">
|
||
<text class="item-icon">🔍</text>
|
||
<text class="item-text">允许通过手机号找到我</text>
|
||
<switch :checked="privacy.allowSearchByPhone" @change="togglePrivacy('allowSearchByPhone')" />
|
||
</view>
|
||
<view class="list-item">
|
||
<text class="item-icon">💬</text>
|
||
<text class="item-text">接收商家消息</text>
|
||
<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="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 supa from '@/components/supadb/aksupainstance.uts'
|
||
|
||
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')
|
||
|
||
// 生命周期
|
||
onMounted(() => {
|
||
loadUserInfo()
|
||
loadSettings()
|
||
})
|
||
|
||
// 加载用户信息
|
||
const loadUserInfo = () => {
|
||
const userStore = uni.getStorageSync('userInfo')
|
||
if (userStore) {
|
||
userInfo.value = userStore
|
||
}
|
||
}
|
||
|
||
// 加载设置
|
||
const loadSettings = () => {
|
||
// 从本地存储加载设置
|
||
const savedNotifications = uni.getStorageSync('userNotifications')
|
||
if (savedNotifications) {
|
||
notifications.value = savedNotifications
|
||
}
|
||
|
||
const savedPrivacy = uni.getStorageSync('userPrivacy')
|
||
if (savedPrivacy) {
|
||
privacy.value = savedPrivacy
|
||
}
|
||
|
||
// 计算缓存大小
|
||
calculateCacheSize()
|
||
|
||
// 获取应用版本
|
||
// @ts-ignore
|
||
const appInfo = uni.getAppBaseInfo()
|
||
if (appInfo?.appVersion) {
|
||
appVersion.value = appInfo.appVersion
|
||
}
|
||
}
|
||
|
||
// 计算缓存大小
|
||
const calculateCacheSize = () => {
|
||
// 这里应该计算实际缓存大小，这里使用模拟数据
|
||
cacheSize.value = '12.5 MB'
|
||
}
|
||
|
||
// 跳转到个人资料
|
||
const goToProfile = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/mall/consumer/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: keyof NotificationType) => {
|
||
notifications.value[type] = !notifications.value[type]
|
||
uni.setStorageSync('userNotifications', notifications.value)
|
||
}
|
||
|
||
// 切换隐私设置
|
||
const togglePrivacy = (type: keyof PrivacyType) => {
|
||
privacy.value[type] = !privacy.value[type]
|
||
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 aboutUs = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/info/about'
|
||
})
|
||
}
|
||
|
||
// 用户协议
|
||
const userAgreement = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/user/terms'
|
||
})
|
||
}
|
||
|
||
// 隐私政策
|
||
const privacyPolicy = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/info/privacy'
|
||
})
|
||
}
|
||
|
||
// 检查更新
|
||
const checkUpdate = () => {
|
||
uni.showLoading({
|
||
title: '检查更新中...'
|
||
})
|
||
|
||
setTimeout(() => {
|
||
uni.hideLoading()
|
||
uni.showModal({
|
||
title: '检查更新',
|
||
content: '当前已是最新版本',
|
||
showCancel: false
|
||
})
|
||
}, 1000)
|
||
}
|
||
|
||
// 联系客服
|
||
const contactService = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/mall/service/chat'
|
||
})
|
||
}
|
||
|
||
// 意见反馈
|
||
const feedback = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/info/feedback'
|
||
})
|
||
}
|
||
|
||
// 给个好评
|
||
const rateApp = () => {
|
||
// 这里应该跳转到应用商店评分
|
||
uni.showModal({
|
||
title: '给个好评',
|
||
content: '如果喜欢我们的应用，请给个好评吧！',
|
||
confirmText: '去评分',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 跳转到应用商店
|
||
// @ts-ignore
|
||
uni.navigateToMiniProgram({
|
||
appId: 'wx1234567890', // 示例AppID
|
||
fail: () => {
|
||
uni.showToast({
|
||
title: '跳转失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 退出登录
|
||
const logout = () => {
|
||
uni.showModal({
|
||
title: '退出登录',
|
||
content: '确定要退出登录吗？',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
try {
|
||
// 调用登出接口
|
||
/*
|
||
const { error } = await supa.auth.signOut()
|
||
|
||
if (error !== null) {
|
||
console.error('登出失败:', error)
|
||
uni.showToast({
|
||
title: '登出失败',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
*/
|
||
|
||
// 清除本地存储
|
||
uni.removeStorageSync('userInfo')
|
||
uni.removeStorageSync('token')
|
||
uni.removeStorageSync('userSettings')
|
||
|
||
// 跳转到登录页
|
||
uni.reLaunch({
|
||
url: '/pages/user/login'
|
||
})
|
||
|
||
} catch (err) {
|
||
console.error('登出异常:', err)
|
||
uni.showToast({
|
||
title: '登出失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 注销账号
|
||
const deleteAccount = () => {
|
||
uni.showModal({
|
||
title: '注销账号',
|
||
content: '确定要注销账号吗？此操作不可恢复，所有数据将被删除！',
|
||
confirmText: '注销',
|
||
confirmColor: '#ff4757',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
uni.showLoading({
|
||
title: '处理中...'
|
||
})
|
||
|
||
try {
|
||
const userId = userInfo.value.id
|
||
|
||
// 这里应该调用注销账号的API
|
||
/*
|
||
const { error } = await supa
|
||
.from('users')
|
||
.update({ status: 0 }) // 标记为注销状态
|
||
.eq('id', userId)
|
||
|
||
if (error !== null) {
|
||
throw error
|
||
}
|
||
*/
|
||
|
||
// 清除本地存储
|
||
uni.removeStorageSync('userInfo')
|
||
uni.removeStorageSync('token')
|
||
|
||
// 提示并跳转
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '账号已注销',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
|
||
setTimeout(() => {
|
||
uni.reLaunch({
|
||
url: '/pages/user/login'
|
||
})
|
||
}, 1500)
|
||
|
||
} catch (err) {
|
||
uni.hideLoading()
|
||
console.error('注销账号失败:', err)
|
||
uni.showToast({
|
||
title: '注销失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 返回
|
||
const goBack = () => {
|
||
uni.navigateBack()
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 响应式布局优化 */
|
||
@media screen and (min-width: 768px) {
|
||
.settings-content {
|
||
padding: 20px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.settings-section {
|
||
border-radius: 8px;
|
||
margin-bottom: 20px;
|
||
max-width: 800px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
/* 电脑端横向排列部分内容 */
|
||
.section-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.logout-section, .delete-account-section {
|
||
max-width: 800px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1024px) {
|
||
.settings-page {
|
||
flex-direction: row; /* 大屏下改为横向布局，左侧导航，右侧内容 */
|
||
}
|
||
|
||
.settings-header {
|
||
display: none; /* 大屏下隐藏顶部栏，可能使用侧边栏或其他导航 */
|
||
}
|
||
|
||
/* 这里只是简单示例，实际可能需要更复杂的布局调整 */
|
||
.settings-content {
|
||
width: 100%;
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
.settings-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.settings-header {
|
||
background-color: #ffffff;
|
||
padding: 15px;
|
||
display: flex;
|
||
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;
|
||
}
|
||
|
||
.settings-section {
|
||
background-color: #ffffff;
|
||
margin-bottom: 10px;
|
||
padding: 15px;
|
||
}
|
||
|
||
.section-title {
|
||
display: block;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.section-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.list-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 15px 0;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
}
|
||
|
||
.list-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
</style> |