zd2.0/pages/set/set.vue

<template>
	<view class="container">

		<view class="listBox">
			<view class="row flex" @click="navTo('/pages/set/userinfo')">
				<text class="tit">头像</text>
				<view>
					<image class="background-img" v-model="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill">
					</image>
				</view>
			</view>
			<view class="list">
				<view class="flex listItem" @click="navTo('/pages/set/userinfo')">
					<view class="flex titleBox">
						<text class="title">昵称</text>
					</view>
					<view class="right flex">
						<text>{{userInfo.nickname}}</text>
						<image class="img" src="../../static/icon/next1.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="flex listItem" @click="navTo('/pages/set/phone')">
					<view class="flex titleBox">
						<text class="title">手机号</text>
					</view>
					<view class="right flex">
						<text>{{userInfo.phone}}</text>
						<image class="img" src="../../static/icon/next1.png" mode="widthFix"></image>
					</view>
				</view>
				<!-- <view class="flex listItem" @click="navTo('/pages/user/realName/realNameAuthentication')">
					<view class="flex titleBox">
						<text class="title">实名认证</text>
					</view>
					<view class="right flex">
						<text></text>
						<image class="img" src="../../static/icon/next1.png" mode="widthFix"></image>
					</view>
				</view> -->
				<view class="flex listItem" @click="navTo('/pages/set/password')">
					<view class="flex titleBox">
						<text class="title">修改密码</text>
					</view>
					<view class="right flex">
						<text></text>
						<image class="img" src="../../static/icon/next1.png" mode="widthFix"></image>
					</view>
				</view>
				<!-- #ifdef APP -->
				<view class="flex listItem" @click="$refs.inputDialog.open()">
					<view class="flex titleBox">
						<text class="title">注销账号</text>
					</view>
					<view class="right flex">
						<text></text>
						<image class="img" src="../../static/icon/next1.png" mode="widthFix"></image>
					</view>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<view class="base-buttom" @click="toLogout">
			退出账号
		</view>
		<!-- #ifdef APP -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="注销账号" value="" placeholder="请输入账号密码"
				@confirm="outAccount"></uni-popup-dialog>
		</uni-popup>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		uploads
	} from '@/api/user.js';
	import {
		logout
	} from '@/api/set.js';
	import {
		mapMutations,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {

			};
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		methods: {
			...mapMutations('user', ['logout']),
			// #ifdef APP
			outAccount() {
				uni.showModal({
					title: '警告',
					content: '注销后账号不可恢复是否注销？',
					cancelText: '取消',
					confirmText: '立即注销',
					success: res => {
						if (res.confirm) {
							uni.showModal({
								title: '提示',
								content: '已提交注销申请！请等待处理结果',
								showCancel: false,
							});
						}
					},
				});
			},
			// #endif
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			//退出登录
			toLogout() {
				let obj = this;
				uni.showModal({
					content: '确定要退出登录么',
					success: (e) => {
						if (e.confirm) {
							logout({}).then((e) => {
								uni.navigateBack();
							}).catch((e) => {
								console.log(e);
							})
							obj.logout();
						}
					}
				});
			}
		}
	}
</script>

<style lang='scss'>
	.container {
		padding-top: 30rpx;
	}

	.listBox {
		margin: 0 $page-row-spacing;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.list {
		.listItem {
			padding: 35rpx 40rpx;
			border-bottom: 1px solid $page-color-light;
		}

		.listIconImg {
			width: 36rpx;
		}

		.right {
			color: $font-color-light;
			font-size: $font-base;
			flex-grow: 1;
			justify-content: flex-end;

			.img {
				width: 26rpx;
			}
		}

		.titleBox {
			.title {
				color: $font-color-base;
				font-size: $font-base;
			}
		}
	}

	.row {
		display: flex;
		align-items: center;
		padding: 35rpx 40rpx;
		background: #fff;
		border-bottom: 1px solid $page-color-light;

		.background-img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background: #f2f2f2;
		}

		.tit {
			flex-shrink: 0;
			width: 120upx;
			font-size: $font-base;
			color: $font-color-base;
		}

		.input {
			flex: 1;
			text-align: right;
			font-size: $font-base;
			color: $color-gray;
		}
	}
</style>