Kirin_mp/pages/user/settings.vue

<template>
	<view>
		<view class="user_box">
			<view class="box_left">
				<image class="user_image"  :src="userInfo.userpic" ></image>
			</view>
			<view class="box_center">
				<view class="user_name">{{userInfo.username}}</view>
				<view class="user_info">{{userInfo.phone}}</view>
			</view>
			<view class="box_right">
				
			</view>
		</view>
		<view class="setting_list">
			<navigator class="setting_item" url="/pages/addr/index" >
				<text class="setting_title">收货地址</text>
				<view class="setting_icon"> &gt; </view>
			</navigator>
			<!-- <navigator class="setting_item" url="/pages/settings/settings" >
				<text class="setting_title">权限管理</text>
				<view class="setting_icon">&gt; </view>
			</navigator> -->
		</view>
		<view class="setting_list">
			<view class="setting_item" @click="outLogin()" >
				<text class="setting_title">退出登录</text>
				<view class="setting_icon">&gt; </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{
					username:"",
					userpic:"",
					phone:"",
					status:0,
					company_status:0,
				}
			}
		},
		onLoad() {
			this.$http.request('api/custom/get_info').then((re)=>{
				if( re.code == 'success' ){
					this.userInfo = re.data;
					if( !this.userInfo.userpic ) this.userInfo.userpic = "../../static/icon/doctor.png";
				}
			});
		},
		onShow() {
			
		},
		methods: {
			outLogin(){
				uni.showModal({
					title:"确认退出登录?",
					success(re) {
						if (re.confirm) {
							// 清空登录标识
							uni.setStorageSync('userLogin',null);
							// 清空用户信息
							uni.setStorageSync('userInfo',null);
							// 跳转到登录页
							uni.redirectTo({
								url:"/pages/login/index"
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.user_box{
		width: 680rpx;
		height: 180rpx;
		overflow: hidden;
		background: #FFFFFF;
		padding: 10rpx 35rpx;
		.box_left{
			float: left;
			display: block;
			width: 140rpx;
			height: 140rpx;
			.user_image{
				display: block;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin: 10rpx auto;
			}
		}
		.box_center{
			float: left;
			width: 300rpx;
			height: 140rpx;
			margin-left: 35rpx;
			.user_name{
				font-size: 30rpx;
				line-height: 80rpx;
			}
			.user_info{
				color: #999999;
				font-size: 24rpx;
				line-height: 60rpx;
			}
		}
		.box_right{
			float: right;
			width: 140rpx;
			height: 140rpx;
			font-size: 20rpx;
			.setting_page{
				width: 140rpx;
				height: 140rpx;
				display: block;
				overflow: hidden;
				.setting_icon{
					width: 60rpx;
					height: 60rpx;
					display: block;
					margin: 40rpx auto;
				}
			}
		}
	}
	.setting_list{
		overflow: hidden;
		margin: 10rpx auto;
		padding: 0rpx 0rpx;
		.setting_item{
			height: 80rpx;
			display: block;
			font-size: 26rpx;
			line-height: 80rpx;
			margin: 10rpx auto;
			padding: 0rpx 35rpx;
			background: #FFFFFF;
			.setting_title{
			}
			.setting_icon{
				float: right;
				color: #999999;
			}
		}
	}
	
</style>