lanan-repair/pages/my/my.vue

<template>
	<view class="container">
		<view class="body">
			<VNavigationBar titleColor="rgba(0,0,0,0.9)" :leftTitle="true" backgroundColor="transparent" title=" ">
			</VNavigationBar>
			<view class="body-top">
				<image class="userBmg" src="../../static/images/image1.png" mode="widthFix"></image>
				<view class="userInfo">
					<image class="avatar" src="../../static/images/avatar.png" mode="aspectFit"></image>
					<text class="customInfo">{{customInfo.cusName}}</text>
				</view>

			</view>
			<view class="level">
				<image class="levelIcon" src="" mode="aspectFit"></image>
				<view class="levelInfo">
					<text class="levelNum">{{customInfo.levelName}}</text>
					<!-- <text class="levelQy">当前可享受4项权益</text> -->
				</view>
				<view class="showQyBtn" @click="showEquity">
					查看权益
					<image class="showQyBtnIcon" src="../../static/icons/icon1.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="menu1">
				<view @click="goToPage('/pages/myCar/myCar')" style="background: linear-gradient( 90deg, #DEE5FC 0%, #CAD6FA 100%);"
					class="menu1-item menu-myCar">
					<image class="menu1-item-icon" src="../../static/icons/myCar.png" mode="aspectFit"></image>
					<text style="flex: 1;">我的车辆</text>
					<image class="menu1-item-btnIcon" src="../../static/icons/icon2.png" mode=""></image>
					<image class="bmg" src="../../static/images/image2.png" mode="aspectFit"></image>
				</view>
				<view @click="goToPage('/pages/myReservation/myReservation')" style="background: linear-gradient( 90deg, #CFF3ED 0%, #9FE9DD 100%);"
					class="menu1-item menu-myOrder">
					<image class="menu1-item-icon" src="../../static/icons/myOrder.png" mode="aspectFit"></image>
					<text style="flex: 1;">我的预约</text>
					<image class="menu1-item-btnIcon" src="../../static/icons/icon3.png" mode=""></image>
					<image class="bmg" src="../../static/images/image2.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="menuCard">
				<view @click="goToPage(item.path)" v-for="(item, index) in menuCard1" :key="item.title" class="menu-item">
					<image class="menu-item-icon" :src="item.icon" mode="aspectFit"></image>
					<text class="menu-item-title">{{ item.title }}</text>
					<text class="messageNum" v-if="item.title === '消息中心'">
						{{ '12' }}
					</text>
					<image class="menu-item-more" src="../../static/icons/homeInfoMore.png" mode="widthFix"></image>
				</view>
			</view>

			<view class="menuCard">
				<view @click="goToPage(item.path)" v-for="(item, index) in menuCard2" :key="item.title" class="menu-item">
					<image class="menu-item-icon" :src="item.icon" mode="aspectFit"></image>
					<text class="menu-item-title">{{ item.title }}</text>
					<image class="menu-item-more" src="../../static/icons/homeInfoMore.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<tabBarVue msg="3"></tabBarVue>
	</view>
</template>

<script>
	import VNavigationBar from '@/components/VNavigationBar.vue'
	import tabBarVue from '@/components/tabBar/tabBar.vue'
	import request from "@/utils/request";
	export default {
		components: {
			tabBarVue,
			VNavigationBar
		},

		onLoad(data) {
			this.getServer()
		},
		data() {
			return {
				//用户信息
				customInfo:{},
				menuCard1: [
					{ title: '我的资料', icon: require('@/static/icons/my-menu-icon1.png'), path: '/pages/my/myInfo' },
					{ title: '我的卡券', icon: require('@/static/icons/my-menu-icon5.png'), path: "/pages/my/cardRoll" },
					{ title: '我的评价', icon: require('@/static/icons/my-menu-icon3.png'), path: '/pages/my/evaluate' },
				],
				menuCard2: [
					{ title: '消息中心', icon: require('@/static/icons/my-menu-icon2.png'), path: '/pages/my/message' },
					{ title: '客服中心', icon: require('@/static/icons/my-menu-icon4.png') },
					{ title: '操作指南', icon: require('@/static/icons/my-menu-icon5.png'), path: "/pages/guideList/guideList" },
				]
			}
		},
		methods: {
			goToPage(path) {
				uni.navigateTo({
					url: path
				})
			},
			showEquity() {
				uni.navigateTo({
					url: '/pages/my/myEquity'
				})
			},
			//获取当前登录用户信息
			async getServer() {
				const res = await request({
					url: "/userClient/customer/getUserCustomer",
					method: 'get',
					params:{}
				})
				this.customInfo = res.data
        uni.setStorageSync('customerInfo', JSON.stringify(this.customInfo))
        // JSON.parse(JSON.stringify(files))
        // const a = uni.getStorageSync('customerInfo')
        // console.log(JSON.parse(a),115)


      }
		}
	}
</script>

<style scoped lang="less">
	.container {
		height: 100%;
		background: #fff;
		background: linear-gradient(180deg, rgba(1, 116, 246, 0.3) 0%, rgba(1, 116, 246, 0) 100%);
		background-size: 100% 600rpx;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		color: #333333;

		.body {
			flex: 1;
			height: 0;
			padding-bottom: 30rpx;
			overflow: auto;
		}

		.body-top {
			position: relative;

			.userBmg {
				width: 750rpx;
			}

			.userInfo {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);

				.avatar {
					width: 140rpx;
					height: 140rpx;
					margin-bottom: 30rpx;
				}

				.userName {
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
				}
			}
		}

		.level {
			box-sizing: border-box;
			width: 686rpx;
			margin: 30rpx auto 0;
			background: linear-gradient(90deg, #0174F6 0%, #01BBF6 100%);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			display: flex;
			align-items: center;
			padding: 24rpx 30rpx;
			column-gap: 20rpx;

			.levelIcon {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.7);
			}

			.levelInfo {
				flex: 1;
				width: 0;
				display: flex;
				flex-direction: column;
				row-gap: 8rpx;

				.levelNum {
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.levelQy {
					font-weight: 500;
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.7);
				}
			}

			.showQyBtn {
				width: 156rpx;
				height: 48rpx;
				background: rgba(255, 255, 255, 0.7);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				column-gap: 2rpx;

				font-weight: 500;
				font-size: 24rpx;
				color: #0174F6;

				.showQyBtnIcon {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}

		.menu1 {
			box-sizing: border-box;
			width: 686rpx;
			margin: 30rpx auto 0;
			display: flex;
			align-items: center;
			column-gap: 22rpx;

			.menu1-item {
				flex: 1;
				width: 0;
				padding: 38rpx 28rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				position: relative;
				display: flex;
				align-items: center;
				column-gap: 18rpx;

				.bmg {
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
				}
			}
			.menu1-item-icon {
				width: 56rpx;
				height: 56rpx;
			}
			.menu1-item-btnIcon {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.menuCard {
			width: 686rpx;
			margin: 30rpx auto 0;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(10,54,104,0.1);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			.menu-item {
				padding: 40rpx 30rpx;
				display: flex;
				align-items: center;
				column-gap: 20rpx;
			}
			.menu-item-icon {
				width: 44rpx;
				height: 44rpx;
			}
			.menu-item-title {
				flex: 1;
				width: 0;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}
			.menu-item-more {
				width: 14rpx;
			}
			.messageNum {
				width: 36rpx;
				height: 36rpx;
				background: #D54941;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				font-weight: bold;
				font-size: 20rpx;
				color: #FFFFFF;
			}
		}
	}
</style>