exam_mp/pages/user/settings.vue

<template>
	<Container
		title="设置"
		:scrollStyle="{
			padding: 0
		}"
		bgColor="#f8f8f8"
	>
	<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"></view> -->
		<view class="setting_list">
			<view class="setting_item_loginout" @click="outLogin()">
				<text class="setting_title_loginout">退出登录</text>
				<view class="setting_icon">&gt;</view>
			</view>
		</view>
	</view>
	</Container>
</template>

<script>
import Container from '../../components/Container/Container.vue';
import CustomerService from '@/components/CustomerService/CustomerService.vue';

export default {
	data() {
		return {
			userInfo: {
				username: '',
				userpic: '',
				phone: '',
				status: 0,
				company_status: 0
			}
		};
	},
	onLoad() {
		let userInfo = uni.getStorageSync('userInfo');
		this.userInfo = userInfo;
		if (!this.userInfo.userpic) this.userInfo.userpic = 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/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_loginout {
		height: 80rpx;
		display: block;
		font-size: 26rpx;
		line-height: 80rpx;
		margin: 10rpx 40rpx;
		padding: 0rpx 35rpx;
		background: #ffffff;
		background: #ffffff;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		text-align: center;
	}
	.setting_item {
		height: 80rpx;
		display: block;
		font-size: 26rpx;
		line-height: 80rpx;
		margin: 10rpx auto;
		padding: 0rpx 35rpx;
		background: #ffffff;
		.setting_title {
		}
		.setting_title_loginout{
			color: #999999;
		}
		.setting_icon {
			float: right;
			color: #999999;
		}
	}
}
</style>