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>
			<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>
			<view class="rights box">
				<view class="right-head">
					<view class="tit">本月通行</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>
			<view class="menu">
				<view class="item" @click="navTo('/personal-center/setting/bank-card/bank-card', 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: 18rpx;
		height: 32rpx;
	}

	.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: 30rpx;
		color: #808080;
		align-items: center;
	}

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

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

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

	.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: 18rpx;
		height: 32rpx;
	}

	.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: 30rpx;
		color: #333;
	}

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

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

	.amount {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.amount .cny {
		font-size: 28rpx;
	}

	.amount .value {
		font-size: 32rpx;
		color: #333;
		padding-right: 24rpx;
	}
</style>