userinfo.uvue

<template>
	<view class="uni-content">
		<view class="list">
			<view class="item">
				<text class="title">头像</text>
				<uni-id-pages-x-avatar ref="avatar" width="60px" height="60px" :border="false"></uni-id-pages-x-avatar>
			</view>
			<view class="item">
				<text class="title">昵称</text>
				<view @click="setNickname" class="content">
					<text class="unset" v-if="!isLogin">未登录</text>
					<text class="value"
						v-else-if="userInfo['nickname'] != null && userInfo['nickname'] != ''">{{userInfo['nickname']}}</text>
					<text class="unset" v-else>未设置</text>
					<uni-id-pages-x-icons v-if="isLogin" :size="16" type="right-arrow"
						class="link-icon"></uni-id-pages-x-icons>
				</view>
			</view>
			<view class="item">
				<text class="title">手机号码</text>
				<view @click="bindmobile" class="content">
					<text class="value" v-if="userInfo['mobile'] != null">{{userInfo['mobile']}}</text>
					<text class="unset" v-else>未绑定</text>
					<uni-id-pages-x-icons :size="16" type="right-arrow" class="link-icon"></uni-id-pages-x-icons>
				</view>
			</view>
		</view>
		<view class="list">
			<view @click="deactivate" class="item">
				<text class="title">注销账号</text>
				<uni-id-pages-x-icons :size="16" type="right-arrow" class="link-icon"></uni-id-pages-x-icons>
			</view>
			<view class="item"  v-if="isLogin && showLoginManage" @click="logout">
				<text class="title">退出登录</text>
				<uni-id-pages-x-icons :size="16" type="right-arrow" class="link-icon"></uni-id-pages-x-icons>
			</view>
			<view class="mask" v-if="!isLogin" @click="login"></view>
		</view>
		<view class="btn-list" v-if="showLoginManage">
			<!-- <button v-if="isLogin" @click="logout" class="logout">退出登录</button> -->
			<button v-if="!isLogin" @click="login" type="primary" class="login">去登录</button>
		</view>
		<!-- 弹出对话框组件 -->
		<uni-id-pages-x-popup-dialog ref="popup-dialog" />
	</view>
</template>

<script>
	import { state, mutations } from '@/uni_modules/uni-id-pages-x/store.uts';
	import { logout } from '@/uni_modules/uni-id-pages-x/common/common.uts';
	export default {
		data() {
			return {
			}
		},
		computed: {
			userInfo() : UTSJSONObject {
				return state.userInfo
			},
			isLogin() : boolean {
				return state.isLogin
			}
		},
		onShow() {
		},
		props: {
			showLoginManage: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			setNickname() {
				uni.navigateTo({
					"url": "/uni_modules/uni-id-pages-x/pages/userinfo/setNickname/setNickname"
				})
			},
			bindmobile() {
				uni.navigateTo({
					url: "/uni_modules/uni-id-pages-x/pages/userinfo/bindMobile/bindMobile",
					complete(_) {
						// console.log('e', e);
					}
				})
			},
			deactivate() {
				uni.navigateTo({
					url: "/uni_modules/uni-id-pages-x/pages/userinfo/deactivate/deactivate",
					complete(_) {
						// console.log('e', e);
					}
				})
			},
			logout() {
				logout()
			},
			login() {
				uni.navigateTo({
					url: "/uni_modules/uni-id-pages-x/pages/login/login",
					// complete(e){
					//   console.log('e',e);
					// }
				})
			}
		}
	}
</script>

<style>
	.uni-content {
		width: 750rpx;
		background-color: #f5f5f5;
		flex: 1;
	}

	.avatar {
		border: 1px solid #000;
		align-items: center;
	}

	.list {
		position: relative;
		background-color: #fff;
		margin-top: 15px;
	}

	.mask {
		position: absolute;
		width: 750rpx;
		height: 100%;
	}

	.list .item {
		border-bottom: 1px solid #f5f5f5;
		flex-direction: row;
		align-items: center;
		padding: 15px 15px;
	}

	.list .item.deactivate {
		margin-top: 20px;
		border-top: 0.1px solid #EEE;
	}

	.list .item .title {
		font-size: 14px;
		flex: 1;
		color: #333;
	}

	.list .item .content {
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.list .item .content .value {
		color: #999;
		font-size: 12px;
	}

	.list .item .content .unset {
		color: #aaa;
		font-size: 12px;
	}

	.link-icon {
		margin-left: 5px;
		width: 13px;
	}

	.btn-list {
		margin-top: 30px;
		padding: 30px 150rpx;
	}

	.logout {
		color: #888;
		border-style: none;
	}
</style>