siji/pages/my/index.vue

<template>
	<view class="container">

		<view class="top-bg"></view>

		<view class="user-info ">
			<view class="avatar">

				<u--image :showLoading="true" :src="userInfo.head" width="100px" height="100px" shape="circle"
					v-if="userInfo.head"></u--image>

				<u-icon name="account-fill" color="#ffffff" size="80" v-else></u-icon>
			</view>

			<view class="user-details">

				<!-- <u-tag text="黄码" type="warning" class="tag" v-if="color==1"></u-tag>
				<u-tag text="绿码" type="success" class="tag" v-else-if="color == 2">></u-tag>
				<u-tag text="红码" type="error" class="tag" v-else></u-tag> -->

				<view class="user-name">{{userInfo.account}}</view>
				<view class="user-contact">
					<u-icon name="phone-fill" color="#1a6dcc" size="18"></u-icon>
					<span>{{userInfo.phone}}</span>
				</view>
				<!-- <view class="user-contact">
					<u-icon name="email-fill" color="#1a6dcc" size="18"></u-icon>
					<span>{{userInfo.email}}</span>
				</view> -->
				<u-button text="修改资料" class="updateInfoBtn" type="primary" size="small" shape="circle"
					@click="toDriverInfo(1)"></u-button>
			</view>

		</view>

		<view class="stats-cards animated">
			<view class="stat-card">
				<view class="stat-value">{{userInfo.mouth}}</view>
				<view class="stat-label">本月运单</view>
			</view>
			<view class="stat-card">
				<view class="stat-value">{{userInfo.lv}}</view>
				<view class="stat-label">完成率</view>
			</view>
			<view class="stat-card">
				<view class="stat-value">{{userInfo.onPassage}}</view>
				<view class="stat-label">在途中</view>
			</view>
		</view>


		<view class="menu-section">
			<view class="section-title">
				<view class="title_left">
					<u-icon name="list-dot" color="#1a6dcc" size="20" :bold="true"></u-icon>
					<span>功能模块</span>
				</view>
				<view>

				</view>

			</view>
			<view class="menu-grid">
				<view class="menu-item" @click="toNav('order/park')">
					<view class="menu-icon">
						<u-icon name="file-text" color="#1a6dcc" size="28"></u-icon>
					</view>
					<view class="menu-label">园区入园上报</view>
				</view>
				<view class="menu-item" @click="toNav('order/waybill')">
					<view class="menu-icon">
						<u-icon name="order" color="#1a6dcc" size="28"></u-icon>
					</view>
					<view class="menu-label">电子运单上报</view>
				</view>
				<view class="menu-item" @click="toNav('order/alarm')">
					<view class="menu-icon">
						<u-icon name="info-circle" color="#1a6dcc" size="28"></u-icon>
					</view>
					<view class="menu-label">车辆事故上报</view>
				</view>
				<view class="menu-item" @click="toMap">
					<view class="menu-icon">
						<u-icon name="map" color="#1a6dcc" size="28"></u-icon>
					</view>
					<view class="menu-label">路径导航</view>
				</view>
			</view>

			<view class="section-title">
				<view class="title_left">
					<u-icon name="setting" color="#1a6dcc" size="20" :bold="true"></u-icon>
					<span>账户设置</span>
				</view>
				<view>

				</view>
			</view>
			<view class="menu-grid">
				<view class="menu-item" @click="toDriverInfo(2)">
					<view class="menu-icon">
						<u-icon name="home" size="28" color="#1a6dcc"></u-icon>
					</view>
					<view class="menu-label">个人信息</view>
				</view>
				<view class="menu-item" @click="toNav('car/car')">
					<view class="menu-icon">
						<u-icon name="grid" size="28" color="#1a6dcc"></u-icon>
					</view>
					<view class="menu-label">车辆信息</view>
				</view>
				<view class="menu-item" @click="toNav('index/message')">
					<view class="menu-icon">
						<u-icon name="bell" size="28" color="#1a6dcc"></u-icon>
					</view>
					<view class="menu-label">报警信息接收</view>
				</view>
				<view class="menu-item" @click="toNav('index/notice')">
					<view class="menu-icon">
						<u-icon name="question-circle" size="28" color="#1a6dcc"></u-icon>
					</view>
					<view class="menu-label">帮助中心</view>
				</view>
			</view>

			<view style="margin-bottom: 20px;">
				<u-button type="primary" class="btn" text="退出登录" size="small" shape="circle" @click="logout"></u-button>
			</view>
		</view>

	</view>


</template>

<script>
	import config from '../../common/config';
	import {
		get,
		post
	} from '@/common/request.js'
	export default {
		data() {
			return {
				src: "./static/1752220647221.jpg",
				userInfo: {
					name: '张三',
					mobile: '158****888',
					email: '1'
				},
				color: 2
			};
		},
		onShow() {
			if (!config.driverInfo) {
				this.getDriverInfo()
			}
		},
		methods: {
			onPullDownRefresh() {
				setTimeout(() => {
					this.getDriverInfo()
					uni.stopPullDownRefresh();
				}, 500);
			},
			toNav2(nav, num) {
				uni.switchTab({
					url: '/pages/' + nav + '?type=' + num,
				});
			},
			toNav(nav) {
				uni.navigateTo({
					url: '/pages/' + nav,
				});
			},
			logout() {

				uni.showLoading({
					title: '退出中'
				})

				uni.removeStorageSync('token');

				setTimeout(() => {

					uni.hideLoading()
					uni.showToast({
						title: '退出成功',
						icon: "none"
					})

					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/my/login'
						})
					}, 1500)

				}, 1500)





			},
			toMap() {
				uni.showToast({
					title: '暂未开放',
					icon: 'none'
				})
			},
			async getDriverInfo() {
				await post('/myapi/api/yq_driver/getDriverInfo').then(res => {
						this.userInfo = res.data
						config.driverInfo = res.data
					
				})
			},
			toDriverInfo(type) {
				uni.navigateTo({
					url: '/pages/my/update?type=' + type
				})

			}

		}
	};
</script>

<style scoped lang="less">
	.container {

		.top-bg {
			height: 120px;

			background: linear-gradient(135deg, #1a6dcc, #0d4a9e);
			position: relative;
			overflow: hidden;

			&::before {
				content: "";
				position: absolute;
				top: -50%;
				left: -50%;
				width: 200%;
				height: 200%;
				background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
				transform: rotate(30deg);
			}
		}

		.user-info {
			position: relative;
			margin-top: -80px;
			padding: 25px 20px;
			display: flex;
			align-items: center;
			background: white;
			border-radius: 20px;
			margin: -80px 20px 0;
			box-shadow: 0 10px 30px rgba(0, 61, 165, 0.15);
			z-index: 10;
			transition: all 0.3s ease;
			// background: url('@/static/user-bg.jpg');
			// background-size: cover;

			.avatar {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				overflow: hidden;
				border: 4px solid white;
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
				background: linear-gradient(45deg, #4a90e2, #1a6dcc);
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				font-size: 40px;
				margin-right: 20px;

				.u-avatar__image--circle {
					width: 100%;
					height: 100%
				}
			}

			.user-details {
				flex: 1;

				.tag {
					width: 50px;
					position: absolute;
					right: 0px;
					top: 0px;
				}

				.user-name {
					font-size: 22px;
					font-weight: 700;
					color: #1a3a6d;
					margin-bottom: 5px;
				}

				.user-contact {
					display: flex;
					align-items: center;
					margin-bottom: 10px;
					color: #666;
					font-size: 15px;

					.u-icon {
						margin-right: 8px;
					}
				}

				.updateInfoBtn {
					background: linear-gradient(to right, #1a6dcca1, #0d4a9ecf);
					color: white;
					border: none;
					padding: 8px 20px;
					border-radius: 50px;
					font-weight: 600;
					cursor: pointer;
					transition: all 0.3s ease;
					font-size: 15px;
					box-shadow: 0 4px 15px rgba(26, 109, 204, 0.3);
					width: 120px;
				}

			}
		}


		.stats-cards {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 15px;
			padding: 25px 20px 15px;

			.stat-card {
				background: white;
				border-radius: 15px;
				padding: 15px 10px;
				text-align: center;
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
				transition: all 0.3s ease;
				border: 1px solid #eef2f7;

				.stat-value {
					font-size: 24px;
					font-weight: 700;
					color: #1a6dcc;
					margin-bottom: 5px;
				}

				.stat-label {
					font-size: 14px;
					color: #777;
				}
			}
		}

		.menu-section {
			padding: 0 20px;
			margin-top: 10px;

			.section-title {
				font-size: 18px;
				font-weight: 700;
				color: #1a3a6d;
				padding: 15px 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title_left {
					display: flex;
				}

				.u-icon {
					margin-right: 8px;
				}

				.btn {}
			}

			.menu-grid {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 10px;
				margin-bottom: 25px;

				.menu-item {
					background: white;
					border-radius: 15px;
					padding: 15px 10px;
					text-align: center;
					transition: all 0.3s ease;
					cursor: pointer;
					border: 1px solid #eef2f7;
					box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
					display: flex;
					flex-direction: column;
					align-items: center;

					.menu-label {
						font-size: 14px;
						color: #444;
						font-weight: 500;
						width: 100%;
					}

					.menu-icon {
						font-size: 24px;
						color: #1a6dcc;
						margin-bottom: 12px;
						width: 35px;
						height: 35px;
						line-height: 35px;
						background: rgba(26, 109, 204, 0.1);
						border-radius: 50%;
						margin: 0 auto 12px;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}

	.content {
		background-color: #f4f4f4;
		height: calc(100vh - 100px);
	}
</style>