ParkApp/pages/mine/mine-info/mine-info.vue

<template>
	<view>
		<button class="item bg-white btn" style="padding: 10rpx 20rpx;">
			<view class="flex align-center justify-center">
				<text style="font-size: 28rpx;font-weight: 500;">头像：</text>
			</view>
			<view class="flex padding-top-20 ">
				<u-avatar  size="88" :src="wxUserInfo.avatarUrl"></u-avatar>
				<text class="cuIcon-right padding-left-20 "></text>
			</view>
		</button>
		
		<button class="item btn" style="padding: 6rpx 20rpx;">
			<view class="flex align-center justify-center">
				<text style="font-size: 28rpx;font-weight: 500;">昵称：</text>
			</view>
			<view class="flex align-center justify-center">
				<text>{{wxUserInfo.nickName}}</text>
				<text class="cuIcon-right padding-left-20"></text>
			</view>
		</button>
		
		<view class="item" @click="sexShow=true">
			<view class="">
				<text>性别：</text>
			</view>
			<view class="" >
				<text v-text="wxUserInfo.gender==2?'女':'男'"></text>
				<text class="cuIcon-right padding-left-10"></text>
			</view>
		</view>
		
		<view class="item">
			<view class="">
				<text>手机号：</text>
			</view>
			<view class="">
				<text >{{phone}}</text>
				<text class="cuIcon-right padding-left-10"></text>
			</view>
		</view>
		
		<view v-if="!$isEmpty(phone)" @click="loginOut" class="flex bg-blue cu-btn round" style="margin: 80rpx 20rpx;padding: 40rpx 0;">
			退出登陆
		</view>
		<u-action-sheet :list="sexList" v-model="sexShow"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wxUserInfo:'',
				phone:'',
				sexList:[
					{
						text:'男',
						value:1
					},
					{
						text:'女',
						value:2
					},
				],
				sexShow:false
			}
		},
		onLoad() {
			this.wxUserInfo=this.$cache.get('userInfo')
			console.log(this.wxUserInfo);
			this.phone=this.$cache.get('phone')
		},
		methods: {
			loginOut(){
				try {
				     uni.clearStorageSync();
					 uni.showModal({
					 	showCancel:false,
						confirmText:"确认",
						content:"退出成功",
						success() {
							uni.reLaunch({
								url:"../../login/login"
							})
						}
					 })
				} catch (e) {
					uni.showToast({
						title:"退出失败",
						icon:"none"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.item{
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
		padding:26rpx 20rpx;
		border-bottom: 1rpx solid #f4f4f4;
	}
	
	.btn::after {
		border: none;
	}
</style>