safetyHome_wxapp/pages/mine/mine.vue

<template>
	<view>
		<view class="topBox">
			<image src="../../static/login_bgground@2x.png" style="width: 100%;height: 100%;"></image>
			<view class="headPhoto" @tap="seeMyInfo">
				
				<image :src="headImg?headImg:'../../static/qingShao.png'" style="width: 122rpx;height: 122rpx;border-radius: 50%;margin:18rpx;" ></image>
			</view>
			<view class="name" @tap="seeMyInfo">
				{{userName}}
			</view>
			<view class="phone" @tap="seeMyInfo">{{userPhone}}</view>
			<!-- 车辆数 -->
			<view class="carBox">
				<view class="leftCar" @tap="seeMyCar">
					<view class="num">{{carNum?carNum:0}}</view>
					<view class="text">汽车辆数</view>
				</view>
				<view class="rightCar" @tap="seeMyBike">
					<view class="num" style="width: 134rpx;">0</view>
					<view class="text" style="width: 134rpx;">电动车辆数</view>
				</view>
			</view>
		</view>
		<!-- 菜单栏 -->
		<view class="main">
			<view class="item" @tap="seeMyhouse">
				<view class="leftIcon">
					<image src="../../static/my_icon_house@2x.png" style="width: 38rpx;height: 40rpx;"></image>
				</view>
				<view style="display: flex;justify-content: space-between;margin-left: 32rpx;width: 100%;margin-top: 48rpx;">
					<view class="title">我的房屋</view>
					<image src="../../static/icon_more@2x.png" style="width:15rpx ;height: 28rpx;margin-top: 8rpx;"></image>
				</view>
			</view>
			<view class="item" @tap="visitorInfo">
				<view class="leftIcon">
					<image src="../../static/my_icon_information@2x.png" style="width:40rpx;height:35rpx;margin-top: 5rpx;"></image>
				</view>
				<view style="display: flex;justify-content: space-between;margin-left: 32rpx;width: 100%;margin-top: 48rpx;">
					<view class="title">访客信息</view>
					<image src="../../static/icon_more@2x.png" style="width:15rpx ;height: 28rpx;margin-top: 8rpx;"></image>
				</view>
			</view>
			<view class="item" @tap="changeFace">
				<view class="leftIcon">
					<image src="../../static/my_icon_formwork@2x.png" style="width: 38rpx;height: 40rpx;"></image>
				</view>
				<view style="display: flex;justify-content: space-between;margin-left: 32rpx;width: 100%;margin-top: 48rpx;">
					<view class="title">人脸模板</view>
					<image src="../../static/icon_more@2x.png" style="width:15rpx ;height: 28rpx;margin-top: 8rpx;"></image>
				</view>
			</view>
			<view class="item" @tap="seeMyFamily">
				<view class="leftIcon">
					<image src="../../static/my_icon_family@2x.png" style="width: 38rpx;height: 40rpx;"></image>
				</view>
				<view style="display: flex;justify-content: space-between;margin-left: 32rpx;width: 100%;margin-top: 48rpx;">
					<view class="title">我的家人</view>
					<image src="../../static/icon_more@2x.png" style="width:15rpx ;height: 28rpx;margin-top: 8rpx;"></image>
				</view>
			</view>
			<view class="item" @tap="seeMyMessage">
				<view class="leftIcon">
					<image src="../../static/myMessage.png" style="width: 38rpx;height: 40rpx;"></image>
				</view>
				<view style="display: flex;justify-content: space-between;margin-left: 32rpx;width: 100%;margin-top: 48rpx;">
					<view class="title">我的消息</view>
					<image src="../../static/icon_more@2x.png" style="width:15rpx ;height: 28rpx;margin-top: 8rpx;"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName:uni.getStorageSync('userName'),
				headImg:uni.getStorageSync('headImg'),
				userPhone:uni.getStorageSync('userPhone'),
				carNum: 0, //汽车数量
				bikeNum: 0, //自行车数量
				headPhoto:'',
			}
		},
		onShow() {
			this.getCarData()
			// this.getUserData()
		},
		onLoad() {

		},
		methods: {
			
			// 获取汽车车辆数
			getCarData() {
				uni.showLoading({
						title: '加载中',
						'icon': 'none'
					})
				this.http.httpRequest('/wxapplet/ownercar/list', 'get', {
					cardId: uni.getStorageSync('idNumber'),
					pageNum: 1,
					pageSize: 10
				}, true).then((res) => {
					uni.hideLoading()
					console.log(res)
					if (res.code == 0) {
						this.carNum = res.data.rows.length
					} else {
						uni.hideLoading()
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			// 查看电动车
			seeMyBike() {
				uni.navigateTo({
					url: './myBike'
				})
			},
			// 访客信息
			visitorInfo() {
				uni.navigateTo({
					url: "../visitor/historyList"
				})
			},
			// 查看个人资料
			seeMyInfo() {
				uni.navigateTo({
					url: "myInfo"
				})
			},
			// 查看我的汽车
			seeMyCar() {
				uni.navigateTo({
					url: "myCar"
				})
			},
			// 查看我的房屋
			seeMyhouse() {
				uni.navigateTo({
					url: "myHouse"
				})
			},
			//更换人脸模板
			changeFace() {
				uni.navigateTo({
					url: "./face"
				})
			},
			// 查看我的家人
			seeMyFamily() {
				uni.navigateTo({
					url: "./family"
				})
			},
			// 查看我的消息
			seeMyMessage() {
				uni.navigateTo({
					url: "./message"
				})
			}

		}
	}
</script>

<style>
	.leftIcon {
		width: 38rpx;
		height: 40rpx;
		margin-top: 48rpx;
	}

	.item {
		width: 650rpx;
		height: 140rpx;
		margin: 0 auto;
		border-bottom: 2rpx solid rgba(245, 245, 245, 1);
		display: flex;

	}

	.main {
		width: 100%;
		margin-top: 50rpx;
		overflow: hidden;
	}

	.carBox {
		width: 650rpx;
		height: 170rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 6rpx 20rpx rgba(0, 0, 0, 0.12);
		opacity: 1;
		border-radius: 86rpx;
		position: absolute;
		left: 50rpx;
		bottom: -54rpx;
		display: flex;
	}

	.leftCar {
		width: 218rpx;
		height: 90rpx;
		margin-left: 108rpx;
		border-right: 2px solid rgba(247, 247, 247, 1);
		;
		margin-top: 40rpx;
	}

	.rightCar {
		height: 90rpx;
		margin-top: 40rpx;
		margin-left: 96rpx;
	}

	.num {
		width: 108rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		line-height: 44rpx;
	}

	.text {
		height: 36rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.name {
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		position: absolute;
		bottom: 216rpx;
		left: 220rpx;

	}

	.phone {
		width: 168rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		position: absolute;
		bottom: 176rpx;
		left: 220rpx;
	}

	.topBox {
		width: 100%;
		height: 430rpx;
		position: relative;
	}

	.headPhoto {
		width: 160rpx;
		height: 160rpx;
		border: 2rpx solid rgba(255, 255, 255, 1);
		border-radius: 50%;
		opacity: 1;
		position: absolute;
		left: 50rpx;
		bottom: 142rpx;
		background: #000000;
	}
</style>