bc_wx_applet/pages/user/user.vue

<template>
	<view class="pageBg">
		<view class="page-header">
			<view class="contain">
				<view class="page-header-content">
					<view class="page-header-content-left">
						<view class="" @click="onInfo">
							<u-avatar :src="getFilePath(userdata ? userdata.avatarUrl : null)" size="100"></u-avatar>
						</view>
					</view>
					<view class="page-header-content-center">
						<view>
							<view class="fz16px mt5px">{{userdata && userdata.phone ? userdata.phone : '22222'}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单 -->
			<view class="mt20px">
				<view class="contain">
					<view class="box">
						<u-row justify="center">
							<u-col span="8">
								<view class="">我的订单</view>
							</u-col>
							<u-col span="4">
								<view class="text-right" @click="openPage('/pages/order/myOrder/myOrder?type=0');">
									<text class="fz14px" style="color: #96989e;">全部订单</text>
									<view style="display: inline-block;">
										<u-icon name="arrow-right" color="#96989e" size="24"></u-icon>
									</view>
								</view>
							</u-col>
						</u-row>
						<view class="flex-box mt20px">
							<view class="flex-box-item" @click="openPage('/pages/order/myOrder/myOrder?type=1')">
								<u-icon name="rmb-circle" labelColor="#96989e" labelPos="bottom" labelSize="14px"
									label="待付款" size="40"></u-icon>
							</view>
							<view class="flex-box-item" @click="openPage('/pages/order/myOrder/myOrder?type=2')">
								<u-icon name="clock" labelColor="#96989e" label="待核销" labelSize="14px" labelPos="bottom"
									size="40"></u-icon>
							</view>
							<view class="flex-box-item" @click="openPage('/pages/order/myOrder/myOrder?type=3')">
								<u-icon name="close-circle" label="已取消" labelColor="#96989e" labelSize="14px" labelPos="bottom"
									size="40"></u-icon>
							</view>
							<view class="flex-box-item" @click="openPage('/pages/order/myOrder/myOrder?type=4')">
								<u-icon name="bag" label="已完成" labelColor="#96989e" labelSize="14px" labelPos="bottom"
									size="40"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mt20px">
			<view class="contain mt20px">
				<view class="box mt20px">
					<view class="mb10px">我的应用</view>
					<view class="flex-box mt20px">
						<view class="flex-box-item" @click="openPage('/pages/user/myInfo')">
							<u-icon name="account" labelColor="#96989e" labelPos="bottom" labelSize="14px"
								label="个人信息" size="40"></u-icon>
						</view>
						<view class="flex-box-item" @click="openPage('/pages/classify/classify')">
							<u-icon name="car" labelColor="#96989e" label="餐车信息" labelSize="14px" labelPos="bottom"
								size="40"></u-icon>
						</view>
						<view class="flex-box-item">
							<u-icon name="kefu-ermai" label="客服电话" labelColor="#96989e" labelSize="14px" labelPos="bottom"
								size="40"></u-icon>
						</view>
					</view>
				</view>
				<!-- <u-button type="error" @click="exitMP()">退出登录</u-button> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userdata:{
					avatarUrl:'',
					phone:''
				}
			}
		},
		methods: {
			openPage(path) {
				this.$u.route({
					url: path
				})
			},
			onInfo() {
				uni.navigateTo({
					url: `/pages/user/myInfo`
				});
			}
		}
	}
</script>

<style lang="scss">
	.page-header {
		width: 100%;
		display: inline-block;
		padding-top: 60rpx;
		background-size: cover;
		background-position: left;
		background-repeat: no-repeat;
		background-image: linear-gradient(to bottom, #FBBD69, #F97023);
		height: 35vh;

		&-content {
			display: flex;
			flex-direction: column; // 设置 Flex 方向为垂直
			align-items: center; // 水平居中子元素
			justify-content: center; // 垂直居中子元素

			&-left {
				margin-right: 20rpx;

				.avator {
					display: inline-block;
					border: 2px solid #fff;
					border-radius: 50%;
				}
			}

			&-center {
				flex: 1;
				color: #fff;
			}

			&-right {
				width: 60rpx;
			}
		}
	}

	.box {
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.flex-box {
		display: flex;
		text-align: center;
		background-color: #F1F3F8;
		border-radius: 10rpx;

		&-item {
			flex: 1;
			margin: 10px;
			position: relative;

			.line {
				height: 70%;
				width: 1px;
				background-color: #ebebeb;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
	.pageBg {
		background-color: #EFF2F7
	}
</style>