<template>
|
<view class="settings-page">
|
<!-- 设置列表 -->
|
<view class="section" v-for="(section, index) in menuList" :key="index">
|
<view class="cell-group">
|
<u-cell-group :border="false">
|
<u-cell v-for="(item, i) in section" :key="i" :title="item.title" :icon="item.icon" isLink :value="item.value"
|
:border="true" @click="onItemClick(item)">
|
<u-icon slot="icon" size="32" :name="item.icon"></u-icon>
|
</u-cell>
|
</u-cell-group>
|
</view>
|
</view>
|
|
<!-- 底部操作 -->
|
<view class="bottom-actions">
|
<u-cell-group :border="false" class="cell-group">
|
<u-cell @click="onItemClick('switch')" :border="true">
|
<template #title>
|
<view class="center-cell-text">切换账号</view>
|
</template>
|
</u-cell>
|
|
<u-cell @click="onItemClick('logout')" :border="false">
|
<template #title>
|
<view class="center-cell-text">退出登录</view>
|
</template>
|
</u-cell>
|
</u-cell-group>
|
</view>
|
|
<view class="portotal-actions">
|
<view class="action-row">
|
<u--text size="20" :bold="true" text="《个人信息收集清单》" color="#38516E" />
|
<u--text size="20" :bold="true" text="《第三方信息共享清单》" color="#38516E" />
|
</view>
|
<view class="action-row">
|
<u--text size="20" :bold="true" text="《用户服务协议》" color="#38516E" />
|
<u--text size="20" :bold="true" text="《用户隐私政策》" color="#38516E" />
|
</view>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
menuList: [
|
[
|
{ 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' }
|
]
|
]
|
};
|
},
|
methods: {
|
onBack() {
|
uni.navigateBack();
|
},
|
onItemClick(item) {
|
uni.showToast({
|
title: `点击了 ${item.title}`,
|
icon: 'none'
|
});
|
},
|
onSwitchAccount() {
|
uni.showToast({
|
title: '切换账号',
|
icon: 'none'
|
});
|
},
|
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;
|
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>
|
