point-app/pagesMy/account/index.vue

<template>
	<mobile-frame>
		<view class="main">
			<view class="one" @click="toCommon('/pagesMy/account/upPassword')">
				<view class="other">
					<view class="title">{{passLogin.name}}</view>
					<view class="titles">{{passLogin.content}}</view>
				</view>
				<view class="btn">
					<text class="iconfont icon-dayufuhao"></text>
				</view>
			</view>
			<view class="one" @click="toCommon('/pagesMy/account/bindEmail')">
				<view class="other">
					<view class="title">{{email.name}}</view>
					<view class="titles">{{email.content}}</view>
				</view>
				<view class="btn">
					<text class="iconfont icon-dayufuhao"></text>
				</view>
			</view>
			<view class="one" @click="toCommon('/pagesMy/account/upBasic')">
				<view class="other">
					<view class="title">{{info.name}}</view>
					<view class="titles">{{info.content}}</view>
				</view>
				<view class="btn">
					<text class="iconfont icon-dayufuhao"></text>
				</view>
			</view>
			<view class="two">
				<button type="default" size="mini" @click="toOut()">退出当前登录</button>
			</view>
		</view>
	</mobile-frame>
</template>

<script>
	export default {
		data() {
			return {
				passLogin: {
					name: '登录密码',
					content: '建议定期修改密码以保护账号安全'
				},
				phone: {
					name: '绑定手机',
					content: '如若您已更换手机号，请及时绑定',
					phone: '137****0000'
				},
				email: {
					name: '绑定邮箱',
					content: '未绑定邮箱，请及时绑定'
				},
				info: {
					name: '修改个人信息',
					content: '修改个人信息'
				},

			};
		},
		onShow: function() {},
		methods: {
			// 跳转
			toCommon(route, e) {
				uni.navigateTo({
					url: `${route}`
				})
			},
			// 退出登录
			toOut(e) {
				try {
					uni.clearStorage();
					uni.redirectTo({
						url: '/pages/index/index'
					})
				} catch (e) {}
			}
		}
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			border-bottom: 1px var(--fcColor) solid;
			margin: 1vw 3vw;
			display: flex;
			flex-direction: row;
			padding: 1vw 0;

			.other {
				flex-grow: 1;

				.title {
					margin: 2vw 0;
					font-size: var(--font16Size);
				}

				.titles {
					font-size: var(--font14Size);
					color: var(--f85Color);
					margin: 2vw 0;
				}
			}

			.btn {
				text-align: right;
				font-size: 20px;
			}
		}

		.two {
			margin: 5vw 3vw;
			text-align: center;

			button {
				border-radius: 20px;
				border: 2px solid var(--ff0Color);
				color: var(--ff0Color);
			}
		}
	}
</style>