CarRental/pages/my.vue

<template>
	<view class="page">
		<view class="header">
			<view class="header-left">
				<image
					src="https://lxnapi.ccttiot.com/bike/img/static/u3giTY4VkWYpnGWRuFHF"
					class="avatar"
				/>
				<view class="userinfo">
					<view class="username">
						{{ formatName(userInfo.realName) }}
					</view>
					<view class="userphone">
						{{ userInfo.phonenumber }}
					</view>
				</view>
			</view>
			<view class="header-right" @click="topage(0)">
				<image
					src="https://lxnapi.ccttiot.com/bike/img/static/uyb0iFo50FJ0MZg3RKkV"
					class="code"
				/>
			</view>
		</view>
		<!-- <view class="tit">
			我的设备
		</view>
		<view class="device_card">
			<view class="car_item">
				<view class="car_item_left">
					<view class="car_name">
						朵VFLU-1376
					</view>
					<view class="car_status">
						车主
					</view>
				</view>
				<view class="car_item_right">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uB1F5aibooguILH8uB4F" class="car_img"/>
				</view>
				<view class="dian">

				</view>
			</view>
		</view> -->
		<view class="tit">
			管理与服务
		</view>
		<view class="content">
			<view class="item" @click="topage(1)">
				<image
					src="https://lxnapi.ccttiot.com/bike/img/static/uVEbrRDbZXvELwK73KAi"
				/>
				我的订单
			</view>
			<view class="item"  @click="topage(4)">
				<image
					src="https://lxnapi.ccttiot.com/bike/img/static/uO1ju1OpuA5jjMR7bLYh"
				/>
				帮助和客服
			</view>
			<view class="item"  @click="topage(5)">
				<image	src="https://lxnapi.ccttiot.com/bike/img/static/uHNMNwTRw89NhtgZUNXK"/>
				意见和反馈
			</view>
		
			<view class="item" v-if="userInfo.isAuthentication==false" @click="topage(3)">
				<image	src="https://lxnapi.ccttiot.com/bike/img/static/unrltNyYYRXUutaqtuJY"/>
				实名认证
			</view>
			
			<!-- <view class="item">
				<image	src="https://lxnapi.ccttiot.com/bike/img/static/u1SsqJYSQ8jTK9PkhFtF"/>
				设置
			</view> -->
			<view class="item" @click="topage(2)" v-if="userInfo.userType=='02'">
				<image	src="https://lxnapi.ccttiot.com/bike/img/static/u1SsqJYSQ8jTK9PkhFtF"/>
				商户端
			</view>
		</view>
		<view class=""  style="margin-left: -32rpx;">
			<tab-bar :indexs='1'></tab-bar>
		</view>
		
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			background: {
				backgroundColor: " ",
			},
			userInfo:{}
		}
	},
	onShow() {
		this.getUserInfo()
	},
	methods: {
		formatName(name) {
      if (!name) return '';
      // 只返回第一个字符，后面用*代替
			return name.charAt(0) + '*'.repeat(name.length - 1);
		},
		getUserInfo() {
			this.$u.get('/getInfo').then((res) => {
				if (res.code == 200) {
					this.userInfo = res.user
				}
			})
		},
		topage(num){
			if(num==0){
				uni.navigateTo({
					 url: '/page_user/QrBind'
				});
			}else if(num==1){
				uni.navigateTo({	
					url:'/page_user/OrderList'
				})
			}else if(num==2){
				uni.navigateTo({
					url:'/pages_store/storeIndex'
				})
			}else if(num==3){
				uni.navigateTo({
					url:'/pages_user/idTest'
				})
			}else if(num==4){
				uni.navigateTo({
					url: '/page_user/HelpCenter'
				})
			}else if(num==5){
				uni.navigateTo({
					url: '/page_user/feedback'
				})
			}
		}
	}
}
</script>

<style lang="scss">
page {
	overflow-y: auto;
	background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uYRs7Cv2Pbp95w3KjGO3');
	background-size: cover;
	/* 背景图片等比缩放以覆盖整个容器 */
	background-position: center;
	/* 背景图片居中显示 */
	background-repeat: no-repeat;
	/* 防止背景图片重复 */
	min-height: 100vh;
	/* 确保页面至少有 100% 的视窗高度，避免高度不足导致无法滚动 */

}

.page {
	padding-top: 200rpx;
	padding-left: 32rpx;
	padding-right: 32rpx;
	
	.device_card{
		margin-top: 24rpx;
		width: 688rpx;
		padding: 22rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		.car_item{
			
			position: relative;
			display: flex;
			flex-direction: row;
			background: #EEF2FD;
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			padding: 50rpx 38rpx 28rpx 	38rpx;
			.dian{
				position: absolute;
				left: 308rpx;
				bottom: 8rpx;
				width: 28rpx;
				height: 8rpx;
				background: #A2AFD4;
				border-radius: 7rpx 7rpx 7rpx 7rpx;	
			}
			.car_item_left{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 50rpx;
				.car_name{	
					font-weight: 700;
					font-size: 40rpx;
					color: #3D3D3D;
				}
				.car_status{
					margin-right: auto;
					margin-top: 26rpx;
					display: inline-block;  
					padding: 6rpx 30rpx;
					font-weight: 600;
					font-size: 28rpx;
					color: #4297F3;
					background: #D2E8FF;
					border-radius: 29rpx 29rpx 29rpx 29rpx;
				}
			}
			.car_item_right{
				.car_img{
					width: 232rpx;
					height: 180rpx;
				}
			}
		}
	}
	.content{
		margin-top: 24rpx;
		width: 688rpx;
		padding: 0 42rpx;
		// height: 456rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		.item:last-child{
			border-bottom: 0rpx solid #D8D8D8;
		}
		.item{
			width:100%;
			padding: 34rpx 0;
			display: flex;
			border-bottom: 1rpx solid #D8D8D8;
			font-weight: 400;
			font-size: 32rpx;
			color: #3D3D3D;
			image{
				margin-top: 4rpx;
				margin-right: 34rpx;
				width: 38rpx;
				height: 38rpx;
			}
			
		}
	}
	.tit{
		margin-top: 40rpx;
		font-weight: 700;
		font-size: 36rpx;
		color: #3D3D3D;
	}
	.header{
		
		display: flex;
		flex-direction: row;		
		justify-content: space-between;
		.header-left{
			display: flex;
			flex-direction: row;
			align-items: center;
			.avatar{
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;	
			}
			.userinfo{
				margin-left: 40rpx;
				.username{
					font-weight: 700;
					font-size: 36rpx;	
					color: #3D3D3D;
				}
				.userphone{
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
				}
			}
		}
		.header-right{
			display: flex;
			flex-direction: row;
			align-items: center;
			.code{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
}
</style>