<template>
|
<view class="settings-page">
|
<!-- 设置列表 -->
|
<view class="section" v-for="(section, index) in menuList" :key="index">
|
<view class="cell-group">
|
<up-cell-group :border="false">
|
<up-cell
|
v-for="(item, i) in section"
|
:key="i"
|
:title="item.title"
|
:isLink="true"
|
:value="item.value"
|
:border="true"
|
@click="() => onItemClick(item)"
|
>
|
<template #icon>
|
<up-icon size="32rpx" :name="item.icon" v-if="!item.icon?.includes('.png')" />
|
<image v-else :src="item.icon" style="width: 32rpx; height: 32rpx;" />
|
</template>
|
</up-cell>
|
</up-cell-group>
|
</view>
|
</view>
|
|
<!-- 底部操作 -->
|
<view class="bottom-actions">
|
<up-cell-group :border="false" class="cell-group">
|
<!-- <up-cell :border="true" @click="onSwitchAccount">-->
|
<!-- <template #title>-->
|
<!-- <view class="center-cell-text">切换账号</view>-->
|
<!-- </template>-->
|
<!-- </up-cell>-->
|
<up-cell :border="true" @click="onLogout">
|
<template #title>
|
<view class="center-cell-text">退出登录</view>
|
</template>
|
</up-cell>
|
</up-cell-group>
|
</view>
|
|
<!-- 法律文案 -->
|
<!-- <view class="portotal-actions">-->
|
<!-- <view class="action-row">-->
|
<!-- <up-text size="10" :bold="true" text="《个人信息收集清单》" @click="toPortotalUni('个人信息收集清单')" color="#38516E" />-->
|
<!-- <up-text size="10" :bold="true" text="《第三方信息共享清单》" @click="toPortotalUni('个人信息收集清单')" color="#38516E" />-->
|
<!-- </view>-->
|
<!-- <view class="action-row">-->
|
<!-- <up-text size="10" :bold="true" text="《用户服务协议》" @click="toPortotalUni('用户协议')" color="#38516E" />-->
|
<!-- <up-text size="10" :bold="true" text="《用户隐私政策》" @click="toPortotalUni('隐私政策')" color="#38516E" />-->
|
<!-- </view>-->
|
<!-- </view>-->
|
</view>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from 'vue'
|
import { useNavigator } from '@/composables/useNavigator'
|
import { useUserStore } from '@/store/user'
|
const userStore = useUserStore()
|
const { toProtocol } = useNavigator()
|
|
|
const toPortotalUni = (title:string) => {
|
toProtocol(title)
|
}
|
|
// 菜单项类型定义
|
interface MenuItem {
|
title: string
|
icon: string
|
value?: string
|
}
|
|
// 设置菜单
|
const menuList = ref<Array<Array<MenuItem>>>([
|
// [
|
// { title: '账号与安全', icon: 'account' },
|
// { title: '通用设置', icon: 'setting' },
|
// { title: '通知设置', icon: 'bell' },
|
// { title: '隐私设置', icon: 'lock' }
|
// ],
|
// [
|
// { title: '存储空间', icon: 'trash', value: '1.12 GB' },
|
// { title: '内容偏好调节', icon: 'file-text' },
|
// { title: '收货地址', icon: 'map' },
|
// { title: '添加小组件', icon: 'grid' },
|
// { title: '未成年人模式', icon: '/static/common/umbrella.png', value: '未开启' }
|
// ],
|
// [
|
// { title: '帮助与客服', icon: 'kefu-ermai' },
|
// { title: '关于小红书', icon: 'info-circle' }
|
// ]
|
])
|
|
// 点击菜单项
|
function onItemClick(item: MenuItem | string) {
|
const title = typeof item === 'string' ? item : item.title
|
uni.showToast({
|
title: `点击了 ${title}`,
|
icon: 'none'
|
})
|
}
|
|
// 切换账号
|
function onSwitchAccount() {
|
uni.showToast({
|
title: '切换账号',
|
icon: 'none'
|
})
|
}
|
|
// 退出登录
|
function onLogout() {
|
uni.showModal({
|
title: '退出登录',
|
content: '确定要退出登录吗？',
|
success: (res) => {
|
if (res.confirm) {
|
try {
|
// 显示加载状态
|
uni.showLoading({ title: '正在退出...', mask: true })
|
|
// 1. 调用登出逻辑（如果有后端API）
|
// const result = await http.request('post', '/api/logout')
|
// if (result.code !== 0) throw new Error(result.msg)
|
|
// 2. 清除本地用户状态
|
userStore.$reset() // 重置整个store
|
|
// 3. 清除本地存储
|
uni.removeStorageSync('token')
|
uni.removeStorageSync('userInfo')
|
|
// 4. 显示成功提示
|
uni.showToast({
|
title: '已退出登录',
|
icon: 'success',
|
duration: 1500
|
})
|
|
// 5. 跳转到登录页
|
setTimeout(() => {
|
uni.reLaunch({
|
url: '/pages/login/login' // 根据实际路由调整
|
})
|
}, 1500)
|
|
} catch (error) {
|
uni.showToast({
|
title: '退出登录失败',
|
icon: 'none'
|
})
|
console.error('退出登录失败:', error)
|
} finally {
|
uni.hideLoading()
|
}
|
}
|
}
|
})
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.settings-page {
|
min-height: 100vh;
|
margin: 10rpx;
|
|
.section {
|
margin-top: 20rpx;
|
|
.cell-group {
|
background-color: #fff;
|
border-radius: 10px;
|
overflow: hidden;
|
}
|
}
|
|
.bottom-actions {
|
margin-top: 30rpx;
|
background-color: #fff;
|
display: flex;
|
flex-direction: column;
|
gap: 20rpx;
|
border-radius: 10px;
|
overflow: hidden;
|
}
|
|
.center-cell-text {
|
width: 100%;
|
text-align: center;
|
font-size: 30rpx;
|
color: #333;
|
}
|
|
.portotal-actions {
|
margin-top: 30rpx;
|
margin-bottom: 200rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
gap: 20rpx;
|
|
}
|
|
.action-row {
|
display: flex;
|
justify-content: center;
|
gap: 40rpx;
|
flex-wrap: nowrap;
|
white-space: nowrap;
|
}
|
}
|
</style>
|
|
