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-jiantouyou"></text>
				</view>
			</view>
			<view class="one" @click="toCommon('/pagesMy/account/bindPhone')">
				<view class="other">
					<view class="title">{{phone.name}} <text>{{phone.phone?phone.phone:'未绑定'}}</text> </view>
					<view class="titles">{{phone.content}}</view>
				</view>
				<view class="btn">
					<text class="iconfont icon-jiantouyou"></text>
				</view>
			</view>
			<view class="one" @click="toCommon('/pagesMy/account/bindEmail')">
				<view class="other">
					<view class="title">{{email.name}}<text>{{email.email?email.email:'未绑定'}}</text></view>
					<view class="titles">{{email.content}}</view>
				</view>
				<view class="btn">
					<text class="iconfont icon-jiantouyou"></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-jiantouyou"></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: ''
				},
				email: {
					name: '绑定邮箱',
					// content: '未绑定邮箱，请及时绑定', 
					email: ''
				},
				info: {
					name: '修改个人信息',
					content: '修改个人信息'
				},

			};
		},
		onShow: function() {
			const that = this;
			that.watchLogin();
		},
		methods: {
			watchLogin() {
				const that = this;
				uni.getStorage({
					key: 'token',
					success: async (res) => {
						let user = that.$jwt(res.data);
						if (user) {
							const arr = await that.$api(`/user/${user.id}`, 'GET');
							if (arr.errcode == '0') {
								let data=arr.data;
								if (data && data.phone) {
									var phone = data.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
									that.$set(that.phone, `phone`, phone)
								}
								if (data && data.email) {
									that.$set(that.email, `email`, arr.data.email)
								}
							} else {
								uni.showToast({
									title: arr.errmsg,
									icon: 'none',
								});
							}
						}
					},
					fail: (err) => {}
				})
			},
			// 跳转
			toCommon(route, e) {
				uni.navigateTo({
					url: `${route}`
				})
			},
			// 退出登录
			toOut(e) {
				try {
					uni.clearStorage();
					uni.reLaunch({
						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);

					text {
						margin: 0 0 0 2vw;
						color: var(--fFB1Color);
						font-size: var(--font12Size);
					}
				}

				.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(--fFB1Color);
				color: var(--fFB1Color);
			}
		}
	}
</style>