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 v-if="''==customInfo.avatar || null == customInfo.avatar" class="avatar" src="../../static/images/avatar.png" mode="aspectFit"></image>
					<image v-else class="avatar" :src="imgUrlPrex+customInfo.avatar" mode="scaleToFill"></image>
					<text class="customInfo">{{customInfo.nickname}}</text>
				</view>

			</view>
<!--			<view class="level">-->
<!--				<image class="levelIcon" src="" mode="aspectFit"></image>-->
<!--				<view class="levelInfo">-->
<!--					<text class="levelNum">{{customInfo.levelName}}</text>-->
<!--					&lt;!&ndash; <text class="levelQy">当前可享受4项权益</text> &ndash;&gt;-->
<!--				</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";
  import config from '@/config'
	import {getToken,getUserInfo} from '@/utils/auth'
	export default {
		components: {
			tabBarVue,
			VNavigationBar
		},
		onShow(data) {
			if(!getToken()){
        uni.reLaunch({
          url: '/pages/login/login'
        })
			}else{
			  console.log("已登录")
        //直接取缓存中的用户信息
        this.customInfo = JSON.parse(getUserInfo())
      }
		},
		data() {
			return {
				//用户信息
				customInfo:{},
        imgUrlPrex:config.baseImageUrl,
				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-order/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'
				})
			},
		}
	}
</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;
          border-radius: 50%;
					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>