zhywpt-sp/pages/user/user.vue

<template>
	<navBar title="九州ETC" :scrollTop="scrollTop" :isBack="isBack"></navBar>
	<view class="wrapper">
		<image :src="`${$imgUrl}user/bg-user-2.png`" class="bg-head" mode="widthFix"></image>
		<!-- <view class="bar" :style="{ top: top, height: height, lineHeight: height }">我的-九州ETC</view> -->
		<view class="content" :style="{ top: margin + 'px' }">
			<view class="head" :style="{ marinTop: margin + 'px' }">
				<view class="avatar">
					<image :src="`${$imgUrl}user/icon-avatar.png`" :class="!state.data.opId ? 'unlogin' : ''"></image>

					<view v-if="!state.data.opId" class="name" @click="$util.navTo('/login/login')">
						<view class="nickname">登录/注册</view>
					</view>
					<view v-else class="name">
						<view class="nickname">林晨曦</view>
						<view class="user-id">
							<view class="phone">15885137270</view>
							<view @click="$util.navTo('/personal-center/setting/change-phone', true)"
								class="btn-change">已关联</view>
						</view>
					</view>
				</view>
				<view class="setting" @click="$util.navTo('/personal-center/setting/setting', true)">
					<!-- <image :src="`${$imgUrl}user/icon-setting.png`"></image> -->
					<text>签到</text>
				</view>
			</view>
			<view class="panel-box">
				<view class="panel">
					<view class="panel-item">
						<view class="panel-text"><text class="num">2</text><text class="txt">辆</text></view>
						<text class="type">车辆</text>
					</view>
					<view class="panel-item">
						<text class="num">5</text>
						<text class="type">待办</text>
					</view>
					<view class="panel-item">
						<view class="panel-text"><text class="num">2</text><text class="txt">张</text></view>
						<text class="type">卡券</text>
					</view>
					<view class="panel-item">
						<view class="panel-text"><text class="num">2555</text><text class="txt">分</text></view>
						<text class="type">积分</text>
					</view>
				</view>
				<view class="notice">
					<image :src="`${$imgUrl}user/icon-tips.png`" class="icon-notice"></image>
					<view class="notice-content">您有一笔成功交易，点击查看详情</view>
				</view>
			</view>
			<view class="rights box">
				<view class="right-head">
					<view class="tit">我的权益</view>
					<view class="more">
						<text class="more-text">查看全部</text>
						<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
					</view>
				</view>
				<view class="rights-items">
					<view class="item">
						<image :src="`${$imgUrl}user/icon-car-2.png`" class="icon"></image>
						<text class="tit">我的通行</text>
						<text class="sub-tit">查询账单、轨迹</text>
					</view>
					<view class="item">
						<image :src="`${$imgUrl}user/icon-door.png`" class="icon"></image>
						<text class="tit">上门服务</text>
						<text class="sub-tit">8折优惠</text>
					</view>
					<view class="item">
						<image :src="`${$imgUrl}user/icon-obu.png`" class="icon"></image>
						<text class="tit">设备险</text>
						<text class="sub-tit">享50元更换</text>
					</view>
					<view class="item">
						<image :src="`${$imgUrl}user/icon-bao.png`" class="icon"></image>
						<text class="tit">微保驾乘险</text>
						<text class="sub-tit">最高享20万</text>
					</view>
				</view>
			</view>
			<view class="order box">
				<view class="right-head">
					<view class="tit">我的订单</view>
					<view class="more">
						<text class="more-text">查看全部</text>
						<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
					</view>
				</view>
				<view class="order-items">
					<view class="item">
						<image :src="`${$imgUrl}user/icon-daifahuo.png`" class="icon"></image>
						<text class="tit">待发货</text>
					</view>
					<view class="item">
						<image :src="`${$imgUrl}user/icon-daishouhuo.png`" class="icon"></image>
						<text class="tit">待收货</text>
					</view>
					<view class="item">
						<image :src="`${$imgUrl}user/icon-daijihuo.png`" class="icon"></image>
						<text class="tit">待激活</text>
					</view>
					<view class="item">
						<image :src="`${$imgUrl}user/icon-tuihuanhuo.png`" class="icon"></image>
						<text class="tit">退换货/退款</text>
					</view>
				</view>
			</view>
			<view class="go-through box">
				<view class="right-head">
					<view class="tit">本月通行</view>
				</view>
				<view class="pass">
					<view class="total m-top">
						<text>总消费</text>
						<text>总充值</text>
					</view>
					<view class="amount m-top">
						<text>¥ 501,220.00</text>
						<text>¥ 620,227.00</text>
					</view>
					<view class="line m-top">
						<view class="line1" style="width: 75%;"></view>
						<view class="line2"></view>
					</view>
					<view class="mileage">
						<view class="txt">
							<text class="tit">通行里程</text>
							<text class="val">81880km</text>
						</view>
						<view class="txt">
							<text class="tit">通行时长</text>
							<text class="val">21小时30分钟</text>
						</view>
						<view class="txt">
							<text class="tit ">通行次数</text>
							<text class="val">103次</text>
						</view>
					</view>
					<view class="detail">查看通行轨迹</view>
				</view>
			</view>
			<view class="cars box">
				<view class="right-head">
					<view class="tit">我的车辆</view>
					<view class="more">
						<text class="more-text">查看全部</text>
						<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
					</view>
				</view>
				<view class="car-item">
					<image :src="`${$imgUrl}user/icon-car.png`" class="car-pic"></image>
					<view class="car-info">
						<view class="car-no"><text class="no">贵ZSC122</text><text class="color">蓝色</text></view>
						<view class="card-no">卡号：52011328220202006876</view>
						<view class="card-no">签号：5202192509222195</view>
					</view>
					<view class="btn-unbind">解除绑定</view>
				</view>
				<view class="sub-bind">
					<view class="item-tit">
						<image :src="`${$imgUrl}user/icon-car-3.png`" class="icon icon-2"></image>
						<text>我要关联车辆</text>
					</view>
					<view class="right-arrow">
						<view class="sub-tit">增加未关联车辆</view>
						<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
					</view>
				</view>
			</view>
			<view class="menu">
				<view class="item" @click="$util.navTo('/personal-center/setting/setting', true)">
					<view class="item-tit">
						<image :src="`${$imgUrl}user/icon-setting.png`" class="icon icon-2"></image>
						<text>设置与资料管理</text>
					</view>
					<view class="right-arrow">
						<view class="sub-tit">隐私、密码管理</view>
						<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from "vue";
	import { msg, navTo } from "@/utils/utils";
	import { onMounted, ref } from "vue";
	import { getItem, StorageKeys } from "@/utils/storage";
	import navBar from "../../components/nav-bar/nav-bar2.vue";
	import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";

	const height = ref(null);
	const top = ref(null);
	const margin = ref(null);
	const mobile = ref(null);
	const scrollTop = ref(0);
	const isBack = ref(false);
	const state = reactive({
		data: {
			opId: "",
		},
	});
	onMounted(() => {
		const res = uni.getMenuButtonBoundingClientRect();
		height.value = res.height + "px";
		top.value = res.top + "px";
		margin.value = res.height + res.top;
	});

	onLoad((option : any) => {
		state.data.opId = getItem(StorageKeys.OpenId);
		mobile.value = getItem("mobile");
	});
	//监听页面滚动
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
	onShow((option : any) => {
		state.data.opId = getItem(StorageKeys.OpenId);
	});
</script>
<style>
	page {
		background: #eef7f7;
	}
</style>
<style scoped>
	.unlogin {
		filter: grayscale(100%);
		opacity: 0.7;
	}



	.wrapper {
		position: relative;
		background: #fff;
	}

	.bar {
		width: 100%;
		position: fixed;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
	}

	.bg-head {
		width: 100%;
		position: absolute;
		z-index: -99;
		top: 0;
		left: 0;
	}

	.content {
		position: absolute;
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx 0 46rpx;
	}

	.head .avatar {
		display: flex;
		align-items: center;
	}

	.head .avatar image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 80rpx;
		border: 12rpx solid rgba(255, 255, 255, 0.5);
		margin: 0 20rpx 0 30rpx;
	}

	.head .setting {
		display: flex;
		align-items: center;
		background: rgba(0, 179, 139, .1);
		border: 1px solid #fff;
		height: 60rpx;
		border-radius: 30rpx;
		padding: 0 34rpx;
		color: #fff;
		font-size: 28rpx;
		margin-right: 30rpx;
	}

	.head .setting image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 6rpx;
	}

	.head .nickname {
		font-size: 36rpx;
		color: #000000;
	}

	.head .user-id {
		font-size: 26rpx;
		color: #000000;
		padding-top: 30rpx;
		display: flex;
		align-items: center;
	}

	.head .btn-change {
		font-size: 22rpx;
		height: 40rpx;
		padding: 0 20rpx;
		border: 1px solid #fff;
		color: #fff;
		box-sizing: border-box;
		border-radius: 20rpx;
		margin-left: 16rpx;
		background: rgba(0, 179, 139, .1);
	}

	.panel-box {
		display: flex;
		flex-direction: column;
		background: #fff;
		margin: 0 30rpx 30rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
		border-radius: 20rpx;
		padding: 30rpx 0;
	}

	.panel {
		display: flex;
		justify-content: space-evenly;
		padding: 30rpx 0;
	}

	.panel-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
	}

	.panel-item .num {
		font-weight: bold;
		color: #454545;
	}

	.panel-item .txt {
		font-size: 26rpx;
	}

	.panel-item .type {
		color: #999;
		font-size: 26rpx;
		padding: 14rpx 0;
	}

	.panel-box .icon-notice {
		width: 48rpx;
		height: 48rpx;
	}

	.panel-box .notice {
		display: flex;
		font-size: 32rpx;
		margin: 0 30rpx;
		align-items: center;
		background: #f3f3f3;
		border-radius: 10rpx;
		padding: 0 14rpx;
	}

	.panel-box .notice .notice-content {
		height: 68rpx;
		line-height: 68rpx;
		padding: 0 12rpx;
		font-size: 28rpx;
	}

	.box .arrow {
		width: 14rpx;
		height: 26rpx;
	}

	.box {
		background: #ffffff;
		margin: 0 30rpx 30rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
	}

	.box .more {
		display: flex;
		font-size: 26rpx;
		color: #808080;
		align-items: center;
	}

	.box .more .more-text {
		padding-right: 12rpx;
	}

	.box .right-head {
		display: flex;
		justify-content: space-between;
	}

	.box .right-head .tit {
		font-size: 32rpx;
		/* font-weight: bold; */
	}

	.rights .rights-items {
		display: flex;
		justify-content: space-evenly;
		padding: 30rpx 0;
	}

	.rights .item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.rights .item .tit {
		font-size: 26rpx;
		color: #333;
		padding: 20rpx 0 10rpx 0;
	}

	.rights .item .sub-tit {
		font-size: 22rpx;
		color: #999;
	}

	.order .order-items {
		display: flex;
		justify-content: space-evenly;
		padding: 30rpx 0;
	}

	.order .item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.order .item .tit {
		font-size: 26rpx;
		color: #333;
		padding: 20rpx 0 10rpx 0;
	}

	.box .icon {
		width: 56rpx;
		height: 56rpx;
	}

	.go-through .pass {
		display: flex;
		flex-direction: column;
	}

	.go-through .total {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		color: #999;
	}

	.go-through .amount {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #333;
	}

	.go-through .line {
		display: flex;
	}

	.go-through .line1 {
		height: 8rpx;
		background: #00B38B;
		border-radius: 4rpx;
	}

	.go-through .line2 {
		height: 8rpx;
		background: #F1F1F1;
		border-radius: 0 4rpx 4rpx 0;
		flex: 1;
	}

	.go-through .mileage {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		text-align: center;
		margin: 32rpx 0;
	}

	.go-through .mileage .txt {
		display: flex;
		flex-direction: column;
	}

	.go-through .mileage .tit {
		font-size: 26rpx;
		color: #999;
	}

	.go-through .mileage .val {
		font-size: 28rpx;
		color: #333;
		margin-top: 16rpx;
	}

	.go-through .m-top {
		margin-top: 16rpx;
	}

	.go-through .detail {
		width: 100%;
		text-align: center;
		color: #00B38B;
		font-size: 24rpx;
		border-top: 1px solid #DCDCDC;
		padding-top: 24rpx;
	}

	.cars .car-item {
		display: flex;
		align-items: center;
		padding: 36rpx 0;
	}

	.cars .car-item .btn-unbind {
		border: 1px solid #00B38B;
		border-radius: 30rpx;
		height: 60rpx;
		box-sizing: border-box;
		line-height: 60rpx;
		font-size: 24rpx;
		padding: 0 20rpx;
		background: rgba(0, 179, 139, .1);
		color: #00B38B;
	}

	.cars .car-pic {
		width: 120rpx;
		height: 120rpx;
		margin-right: 12rpx;
	}

	.cars .car-info {
		display: flex;
		flex-direction: column;
		flex: 1;
		color: #999;
		font-size: 22rpx;
	}

	.cars .car-no {
		font-size: 30rpx;
		color: #333;
	}

	.cars .card-no {
		margin-top: 14rpx;
	}

	.cars .sub-bind {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid #F1F1F1;
		padding-top: 20rpx;
	}

	.cars .sub-bind .item-tit {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #333;
	}

	.cars .sub-bind .right-arrow {
		font-size: 22rpx;
		color: #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cars .sub-bind .sub-tit {
		padding-right: 20rpx;
	}

	.menu {
		background: #ffffff;
		/* border-radius: 30rpx 30rpx 0 0; */
		padding: 0 30rpx;
		margin: 0 30rpx 30rpx;
		border-radius: 20rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
	}

	.menu .arrow {
		width: 14rpx;
		height: 26rpx;
	}

	.menu .icon {
		width: 48rpx;
		height: 48rpx;
		margin-right: 10rpx;
	}

	.menu .item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* border-bottom: 1px solid #dcdcdc; */
		padding: 20rpx 0;
	}

	.menu .item:first-child {
		margin-top: 10rpx;
	}

	.menu .item-tit {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #333;
	}

	.menu .right-arrow {
		font-size: 22rpx;
		color: #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.menu .sub-tit {
		padding-right: 20rpx;
	}
</style>