deming/pageE/setting/Index.vue

<template>
	<view class="setting">
		<view class="list-item">
			<view>消息提醒</view>
			<view>
				<u-switch v-model="checked" active-color="#FF770F" inactive-color="#A9A7A7" size="35"></u-switch>
			</view>
		</view>
		<view v-for="(item, index) in settingList" :key="index" class="list-item" @click="toNextPage(item.link)">
			<view>{{ item.title }}</view>
			<image src="../static/mine/21.png"></image>
		</view>
		<view class="list-item" @click="sheetStatus=true">
			<view>退出登录</view>
			<image src="../static/mine/21.png"></image>
		</view>
		<u-action-sheet v-model="sheetStatus" :list="list" :tips="tips" :border-radius="20" @click="choiceOption">
		</u-action-sheet>
		<u-modal v-model="show" show-confirm-button show-cancel-button :content="content" @confirm="loginOut"></u-modal>
	</view>
</template>
<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				checked: false,
				tips: {
					text: '您可选择以下操作',
					color: '#999999',
					fontSize: 24
				},
				sheetStatus: false,
				list: [{
						text: '换个账号登录',
						color: '#FF780F',
						fontSize: 28
					},
					{
						text: '退出登录',
						color: '#FF780F',
						fontSize: 28
					}
				],
				settingList: [{
						title: '个人信息',
						link: '../mine/MineInfo'
					},
					{
						title: '收货地址',
						link: '../more/Address'
					},
					{
						title: '证件中心',
						link: '../mine/ArticleDetails?type=1'
					},
					{
						title: '屏蔽用户',
						link: './ShieldUsers'
					},
					{
						title: '关于我们',
						link: '../mine/ArticleDetails?type=2'
					},
					{
						title: '帮助与反馈',
						link: './feedback'
					},
				],
				content: "是否退出登录！",
				show: false
			}
		},
		methods: {
			...mapMutations(['logout']),
			// 退出登录选择 0：切换账号 | 1：退出登录
			choiceOption(index) {
				console.log(index);
				if (index == 1) {
					this.show = true;
				}
			},
			toNextPage(url, ...params) {
				uni.navigateTo({
					url: url
				});
			},
			loginOut() {
				this.logout();
				uni.redirectTo({
					url: "../../pageA/login/login",
				})
			}
		},
	};
</script>
<style lang="scss" scoped>
	.setting {
		min-height: calc(100vh - var(--window-top));
		background-color: #ECECEC;

		.list-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 98rpx;
			border-top: 2rpx solid #EBEBEB;
			background-color: #ffffff;
			padding: 0 30rpx;
			font-size: 30rpx;
			color: rgba(51, 51, 51, 1);

			>image {
				width: 14rpx;
				height: 24rpx;
			}
		}
	}
</style>