zhywpt-sp/personal-center/setting/setting.vue

<template>
	<template v-for="(col,index) in list" :key="index">
		<view class="title">{{col.title}}</view>
		<u-cell-group>
			<u-cell-item :title="item.title"  v-for="(item,i) in col.columns" :key="i"  
			@click="itemClick(item)" :titleStyle="titleStyle"></u-cell-item>
		</u-cell-group>
	</template>
	
	<button class="action" @click="loginOut">退出登录</button>
</template>

<script setup lang="ts">
	import {useUserStore} from '@/stores/user';
	import { msg, navTo } from '@/utils/utils';
	
	const userStore = useUserStore();
	const {loginOut} = userStore;
	
	const titleStyle = {fontSize:'28rpx',color:'#333333'};
	const basePath = "/personal-center/setting/";
	const list = [
		{
			title:'个人信息管理',
			columns:[
				{title:'个人信息更正',path:'personal-information/corrections',login:true},
				{title:'个人信息删除',path:'information-deletion',login:true},
				{title:'权限管理',path:'permission-management',login:true},
				{title:'撤销权限管理',path:'revoke-permission',login:true}, //无 UI
				{title:'信息副本导出',path:'info-export',login:true}, //无 UI
				{title:'注销账户',path:'account-cancellation',login:true},
				{title:'车辆信息管理',path:'car-information/corrections',login:true}, //无 UI
				{title:'收货地址管理',path:'addressManager',login:true}, //有 UI 无界面
				{title:'银行卡',path:'bank-card/bank-card',login:true},//有 UI 无界面
			]
		},
		{
			title:'隐私',
			columns:[
				{title:'用户协议',path:'user-agreement',login:true},//无 UI
				{title:'隐私政策',path:'conceal-agreement',login:true},//无 UI
				{title:'风险提示告知书',path:'risk-agreement',login:true},//无 UI
				{title:'个人信息收集清单',path:'info_connect',login:true},//无 UI
				{title:'权限使用说明',path:'usage-instructions',login:true}//无 UI
			]
		},
	]
	
	/* item点击 */
	const itemClick = (item) => {
		if(!item.path){
			msg('找不到该界面哦！');
			return;
		}
		navTo(basePath + item.path,item.login);
	}
</script>

<style>
	page{
		background: #EEF7F7;
		padding-bottom: 100rpx;
	}
</style>
<style lang="scss" scoped>
	.title {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		height: 80rpx;
		padding-top: 30rpx;
		padding-left: 30rpx
	}
	
	.action {
		margin-top: 30rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 88rpx;
		height: 88rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(223,223,223,0.5);
	}
</style>