我的页静态界面

aircraft/server/my/my.vue

@@ -1,11 +1,33 @@
 <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: {
@@ -24,14 +46,27 @@ export default {
 	},
 	data(){
 		return{
-			// #ifdef MP
-			// 微信小程序自定义导航栏参数
-			StatusBar: this.StatusBar || 0,
-			CustomBarHeight: this.Custom.height+(this.Custom.top-this.StatusBar)*2 || 0,
-			// #endif
+			//我的页图标基础路径
+			fileUrl: configService.fileUrl + 'aerocraft/my/',
+			// 轮播图
+			topBg: 'top-bg.png',
 			// 用户信息
-			userMessage:{}
-			// userMessage: this.$store.state.vuex_token === ''?{}:JSON.parse(this.$store.state.user_message),
+			// 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:{
@@ -44,6 +79,13 @@ export default {
 			}else{
 				this.userMessage = {};
 			}
+		},
+		loginout(){
+			uni.showModal({
+				title: '退出登录',
+				content: '是否确认退出登录？',
+				confirmColor: '#f7c04d'
+			})
 		}
 	}
 }
@@ -51,5 +93,97 @@ export default {
 
 <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>