aircraft-pilot/aircraft/server/my/my.vue

<template>
	<view class="aircraft-my">
		<view class="my-top">
			<u-image width="100%" :src="fileUrl+topBg" mode="widthFix" />
			<view class="my-identity">
				<u-image class="my-avatar" width="120rpx" height="120rpx" 
				src="/static/header.png" />
				<view class="my-self">
					<text>{{ userMessage.nickName || userMessage.username || '用户' }}</text>
					<text>欢迎来到爱尚云，愿您有个美好体验！</text>
				</view>
			</view>
		</view>
		<view class="function-list">
			<view class="functions">
				<view class="function-item" v-for="(item,index) in functions" :key="index">
					<view class="fi-left"><u-icon :name="fileUrl+item.icon" size="50" />{{ item.name }}</view>
					<u-icon name="arrow-right" color="#ccc" size="30" />
				</view>
			</view>
		</view>
		<view class="my-loginout" @click="loginout">
			退出登录
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import configService from '@/common/config.service.js';
export default {
	// #ifdef MP
	options: {
		styleIsolation: 'shared'
	},
	// #endif
	props: {
		topLevel:{
			type: Number,
			default: 0
		},
		isLogin: {
			type: String,
			default: ''
		}
	},
	data(){
		return{
			//我的页图标基础路径
			fileUrl: configService.fileUrl + 'aerocraft/my/',
			// 轮播图
			topBg: 'top-bg.png',
			// 用户信息
			// userMessage:{}
			userMessage: this.$store.state.vuex_token === ''?{}:JSON.parse(this.$store.state.user_message),
			// 功能列表
			functions: [{
				name: '历史订单',
				icon: 'history.png',
				url: ''
			},{
				name: '个人信息',
				icon: 'self.png',
				url: ''
			},{
				name: '修改密码',
				icon: 'password.png',
				url: ''
			}]
		}
	},
	computed:{
	},
	methods:{
		// 初始化
		init(){
			if(this.isLogin !== ''){
				this.userMessage = JSON.parse(this.$store.state.user_message);
			}else{
				this.userMessage = {};
			}
		},
		loginout(){
			let that = this;
			uni.showModal({
				title: '退出登录',
				content: '是否确认退出登录？',
				confirmColor: '#f7c04d',
				success: async(res) => {
					if (res.confirm) {
						await that.$api.logout();
						that.$u.vuex('vuex_token', '');
						that.$u.vuex('user_message', {});
						uni.reLaunch({
							url: '/aircraft/server/my/child_pages/login',
							complete() {
								setTimeout(()=>{
									uni.showToast({
										icon: 'none',title: '退出登录成功!'
									})
								},300);
							}
						})
					}
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
.aircraft-my{
	display: flex;
	flex-direction: column;
	height: 100%;
	.my-top{
		width: 100%;
		position: relative;
		.my-identity{
			position: absolute;
			top: 220rpx;
			width: 100%;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			.my-avatar{
				margin-right: 30rpx;
				&::v-deep .u-image__image{
					border: 2rpx solid #fff;
					border-radius: 100% !important;
				}
			}
			.my-self{
				display: flex;
				flex-direction: column;
				height: 100rpx;
				justify-content: space-between;
				text{
					&:nth-child(1){
						font-size: 36rpx;
						color: #000;
					}
					font-family: Source Han Sans SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #111;
				}
			}
		}
	}
	.function-list{
		margin-top: -200rpx;
		width: 100%;
		flex: 1;
		z-index: 1;
		background: #f5f5f5;
		border-radius: 20rpx;
		.functions{
			margin: 70rpx 30rpx 0;
			background-color: #FFFFFF;
			border-radius: 24rpx;
			padding: 20rpx 0;
			box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(202,202,182,0.5);
			.function-item{
				padding: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: Source Han Sans SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #111;
				.fi-left{
					line-height: 50rpx;
					display: flex;
					align-items: center;
					::v-deep .u-icon{
						margin-right: 16rpx;
					}
				}
				&:active{
					background-color: #f7f7f7;
				}
			}
		}
	}
	.my-loginout{
		margin: auto 40rpx 40rpx;
		border-radius: 12rpx;
		font-family: Source Han Sans SC;
		font-weight: bold;
		background-color: #fa4a43;
		font-size: 30rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
		&:active{
			margin: auto 50rpx 40rpx;
			padding: 28rpx 0;
			background-color: #fab6b6;
		}
	}
}
</style>