zhywpt-sp/pages/user/user - back.vue

<template>
	<view class="wrapper">
		<image :src="`${$imgUrl}user/bg-user.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' : ''"
						mode="aspectFill"></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="user-id">
							<view class="phone">{{ mobile }}</view>
							<view @click="
                  $util.navTo('/subpackage/personal-center/setting/change-phone', true)
                " class="btn-change" style="display: none;">
								更换</view>
						</view>
					</view>
				</view>
				<view class="setting" @click="$util.navTo('/subpackage/personal-center/setting/setting', true)">
					<image :src="`${$imgUrl}user/icon-setting.png`" mode="aspectFill"></image>
					<text>设置</text>
				</view>
			</view>
			<view class="menu">
				<view class="item" style="display: none">
					<view class="item-tit">
						<image :src="`${$imgUrl}user/icon-cny.png`" class="icon icon-1" mode="aspectFill"></image>
						<text>账户余额</text>
					</view>
					<view class="amount">
						<text class="cny">￥</text>
						<text class="value">0.00</text>
						<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow" mode="aspectFill"></image>
					</view>
				</view>
				<view class="item" @click="navTo('/subpackage/personal-center/change-password', true)">
					<view class="item-tit">
						<image :src="`${$imgUrl}user/icon-lock.png`" class="icon icon-1"></image>
						<text>修改密码</text>
					</view>
					<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow" mode="aspectFill"></image>
				</view>
				<view class="item" @click="navTo('/subpackage/personal-center/progress-query/my-etc', true)"
					style="display: none">
					<view class="item-tit">
						<image :src="`${$imgUrl}user/icon-ETC.png`" class="icon icon-2" mode="aspectFill"></image>
						<text>我的ETC</text>
					</view>

					<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow" mode="aspectFill"></image>
				</view>
				<view class="item" @click="
            navTo(
              '/subpackage/personal-center/setting/personal-information/corrections',
              true
            )
          ">
					<view class="item-tit">
						<image :src="`${$imgUrl}user/icon-user.png`" class="icon icon-2" mode="aspectFill"></image>
						<text>用户信息管理</text>
					</view>
					<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
				</view>
				<view class="item" @click="
            navTo('/subpackage/personal-center/setting/car-information/corrections', true)
          ">
					<view class="item-tit">
						<image :src="`${$imgUrl}user/icon-car.png`" class="icon icon-2" mode="aspectFill"></image>
						<text>车辆信息管理</text>
					</view>
					<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow" mode="aspectFill"></image>
				</view>
				<view class="item" @click="navTo('/subpackage/personal-center/setting/addressManager', true)">
					<view class="item-tit">
						<image :src="`${$imgUrl}user/icon-address.png`" class="icon icon-2" mode="aspectFill"></image>
						<text>收货地址管理</text>
					</view>
					<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
				</view>

				<view class="item" @click="navTo('/subpackage/personal-center/setting/bank-card/bank-card', true)"
					style="display: none">
					<view class="item-tit">
						<image :src="`${$imgUrl}user/icon-card.png`" class="icon icon-2" mode="aspectFill"></image>
						<text>绑定银行卡</text>
					</view>
					<image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
				</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 { onLoad, onShow } from "@dcloudio/uni-app";
	const height = ref(null);
	const top = ref(null);
	const margin = ref(null);
	const mobile = ref(null);

	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");
	});
	onShow((option : any) => {
		state.data.opId = getItem(StorageKeys.OpenId);
	});
</script>

<style scoped>
	.unlogin {
		filter: grayscale(100%);
		opacity: 0.7;
	}

	page {
		background: #ffffff;
	}

	.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(255, 255, 255, 0.7);
		height: 60rpx;
		border-radius: 30rpx 0 0 30rpx;
		padding: 0 30rpx 0 20rpx;
		color: #00b38b;
	}

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

	.head .nickname {
		font-size: 42rpx;
		color: #ffffff;
	}

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

	.head .btn-change {
		font-size: 22rpx;
		height: 40rpx;
		padding: 0 20rpx;
		border: 1px solid #fff;
		box-sizing: border-box;
		border-radius: 20rpx;
		margin-left: 16rpx;
		line-height: 40rpx;
	}

	.menu {
		background: #ffffff;
		border-radius: 30rpx 30rpx 0 0;
		padding: 0 30rpx;
	}

	.menu .arrow {
		width: 18rpx;
		height: 32rpx;
	}

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

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

	.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>