purchase-let/pages/my/my.vue

<template>
	<view>
		<up-navbar title="我的" bgColor="rgba(0,0,0,0)" :autoBack="true">
		</up-navbar>
		<view class="user-info">
			<image class="bg" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/e3a7b202404261113002322.webp"
				mode="widthFix"></image>
			<view class="u-card">
				<up-avatar :src="userInfo.avatar" size="80"></up-avatar>
				<view class="content">
					<view class="u-phone">{{userInfo.nickname}}</view>
					<view class="u-id">ID: {{userInfo.id}}</view>
				</view>
			</view>
		</view>

		<view class="order-info-box">
			<view class="order-info">
				<view class="info-head">我的订单</view>
				<view class="info-list">
					<view class="list-item" @click="navTo(1)">
						<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/f335a202404261401535608.png">
						</image>
						<view class="">待付款</view>
						<view class="badge" v-if="orderCount.no_pay">{{orderCount.no_pay}}</view>
					</view>
					<view class="list-item" @click="navTo(2)">
						<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/45241202404261403353935.png">
						</image>
						<view class="">待收货</view>
						<view class="badge" v-if="orderCount.receiving">{{orderCount.receiving}}</view>
					</view>
					<!-- <view class="list-item">
            <image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/96915202404261403582769.png"></image>
            <view class="">售后/退款</view>
          </view> -->
					<view class="list-item" @click="navTo()">
						<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/abdcd202404261406199643.png">
						</image>
						<view class="">全部订单</view>
					</view>
				</view>
			</view>
		</view>

		<view class="card">
			<up-cell-group>
				<up-cell title="我的地址" :isLink="true" url="/pagesOrder/addressList/addressList"></up-cell>
			</up-cell-group>
		</view>

		<view class="card">
			<up-cell-group>
				<up-cell title="意见反馈" :isLink="true" url="/pageQuota/feedBack/index"></up-cell>
				<up-cell title="关于我们" :isLink="true" url="/pageQuota/aboutUs/index"></up-cell>
				<up-cell title="退出登录" :isLink="true" @click="logout"></up-cell>
			</up-cell-group>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import useUserStore from "@/store/user";
	import {
		orderCountApi
	} from "@/api/order.js";
	import {
		onShow
	} from "@dcloudio/uni-app"

	const userStore = useUserStore();

	const userInfo = userStore.userInfo;

	const orderCount = ref({
		no_pay: 0,
		receiving: 0,
		waiting: 0
	})
	const getOrderCount = () => {
		orderCountApi().then(res => {
			orderCount.value = res.data;
		})
	}

	const navTo = (type = 0) => {
		uni.navigateTo({
			url: `/pagesOrder/order/order?type=${type}`
		})
	}

	const logout = () => {
		userStore.setToken('');
		userStore.setUserInfo({});
		uni.reLaunch({
			url: '/pages/login/login'
		})
	}

	onShow(() => {
		getOrderCount();
	})
</script>

<style lang="scss">
	.user-info {
		overflow: hidden;
		position: relative;
		width: 750rpx;
		height: 450rpx;
		/* #ifdef H5 */
		height: 350rpx;
		/* #endif */

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

		.u-card {
			box-sizing: border-box;
			padding: 50rpx 0 50rpx 50rpx;
			display: flex;
			position: absolute;
			bottom: 50rpx;
			left: 0;
			z-index: 2;

			.content {
				width: 500rpx;
				padding-left: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.u-phone {
					font-size: 32rpx;
					margin-bottom: 16rpx;
				}

				.u-id {
					font-size: 24rpx;
				}
			}
		}
	}

	.order-info-box {
		margin: 20rpx;
		height: 140rpx;
		position: relative;

		.order-info {
			height: 220rpx;
			width: 710rpx;
			background-color: #fff;
			border-radius: 14rpx;
			position: absolute;
			top: -80rpx;
			left: 0;
			z-index: 3;
			background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/a8863202404261349533191.png');
			background-size: 35% 100%;
			background-position: right;
			background-repeat: no-repeat;

			.info-head {
				margin-left: 20rpx;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				font-size: 32rpx;
			}

			.info-list {
				height: 110rpx;
				display: flex;
				font-size: 26rpx;

				.list-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					position: relative;

					image {
						width: 64rpx;
						height: 64rpx;
					}

					.badge {
						position: absolute;
						top: 0;
						right: 20%;
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
						text-align: center;
						line-height: 30rpx;
						font-size: 22rpx;
						color: #fff;
						background-color: #F55726;
					}
				}
			}
		}
	}

	.card {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 14rpx;
		overflow: hidden;
	}
</style>