<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'
|
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) {
|
uni.showToast({ title: '已退出登录', icon: 'success' })
|
}
|
}
|
})
|
}
|
</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>
|
|
