purchase-let/pages/my/my.vue

<style lang="scss">
	.rest {
		display: flex;
		justify-content: space-around;
		margin: 20rpx;

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

			.rest-item-num {
				font-size: 30rpx;
				margin-bottom: 16rpx;
			}

			.rest-item-txt {
				font-size: 28rpx;
			}
		}
	}
</style>
<template>
	<view>
		<up-navbar title="我的" :autoBack="true" bgColor="transparent" :fixed="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">
				<view style="display: flex;">
					<up-avatar :src="userInfo.avatar" size="56"></up-avatar>
					<view class="content">
						<view class="u-phone">{{userInfo.nickname}}</view>
						<view class="u-id">ID: {{userInfo.id}}</view>
					</view>
				</view>
				<view class="to-vip-btn" @click="navgo('/pageQuota/vipUser/index')">
					会员报备
				</view>
			</view>
		</view>

		<view class="rest">
			<view class="rest-item">
				<view class="rest-item-num">{{userInfo.now_money||"0.00"}}</view>
				<view class="rest-item-txt">余额</view>
			</view>
			<view class="rest-item">
				<view class="rest-item-num">{{userInfo.purchase_funds||'0.00'}}</view>
				<view class="rest-item-txt">采购款</view>
			</view>
			<view class="rest-item">
				<view class="rest-item-num">{{userInfo.return_money||'0.00'}}</view>
				<view class="rest-item-txt">返还金</view>
			</view>

			<view class="rest-item">
				<view class="rest-item-num">{{userInfo.integral ||"0.00"}}</view>
				<view class="rest-item-txt">礼品券</view>
			</view>
		</view>

		<!-- <view class="gift">
			<view style="font-weight: bold;">
				供销经营礼包
			</view>
			<view class='gift-buy' @click="navgo('/pages/gift/index')">
				立即购买
			</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="/static/icon/wait.jpg">
						</image>
						<view class="">待核销</view>
						<view class="badge" v-if="orderCount.waiting">{{orderCount.waiting}}</view>
					</view>

					<view class="list-item" @click="navTo(3)">
						<image src="/static/icon/done.jpg">
						</image>
						<view class="">已核销</view>
						<view class="badge" v-if="orderCount.receiving">{{orderCount.receiving}}</view>
					</view>

					<view class="list-item" @click="navTo(4)">
						<image src="/static/icon/back.jpg">
						</image>
						<view class="">售后/退款</view>
						<view class="badge" v-if="orderCount.applyRefund">{{orderCount.applyRefund}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="card">
			<up-cell-group>
				<up-cell title="我的地址" :isLink="true" url="/pagesOrder/addressList/addressList"></up-cell>
				<up-cell title="支付密码" :isLink="true" url="/pagesOrder/setPayPassword/index"></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 = ref({});

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

	// 返回下单 或者充值
	const handleBack = (e) => {
		if (e > 0) {
			uni.navigateTo({
				url: "/pages/charge/charge"
			})
		} else {
			uni.navigateBack()
		}
	}

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

	const navgo = (url) => {
		uni.navigateTo({
			url
		})

	}

	const logout = () => {
		userStore.setToken('');
		userStore.setUserInfo({});
		uni.removeStorageSync('SHARE_INFO');
		uni.setStorageSync("STORE_INFO", '')
		uni.reLaunch({
			url: '/pages/login/login'
		})
	}

	onShow(() => {
		userInfo.value = userStore.userInfo;
		getOrderCount();
	})
</script>

<style lang="scss">
	.user-info {
		overflow: hidden;
		position: relative;
		width: 750rpx;
		height: 350rpx;

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

		.u-card {
			box-sizing: border-box;
			padding: 50rpx 0 50rpx 50rpx;
			position: absolute;
			top: 150rpx;
			left: 0;
			z-index: 2;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;

			.to-vip-btn {
				color: white;
				padding: 10rpx 20rpx;
				background-color: #39BE40;
				border-radius: 30rpx;
				margin-right: 20rpx;
			}

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

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

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

			.u-card-level {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 40rpx;

				.u-level-item {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					&:not(:nth-last-child(1)) {
						margin-right: 100rpx;
					}

					.u-level-item-num {
						font-weight: 600;
						font-size: 32rpx;
						color: #333333;
						margin-bottom: 8rpx;
					}

					.u-level-item-txt {
						font-size: 26rpx;
						color: #444444;
					}
				}
			}
		}
	}

	.member {
		width: 710rpx;
		margin: 0 auto;
		background: linear-gradient(135deg, #FFF9E8 0%, #F3E7C0 100%);
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(113, 113, 113, 0.11);
		border-radius: 12rpx;
		padding: 0 18rpx 22rpx 22rpx;
		box-sizing: border-box;

		.member-wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 78rpx;
			margin-bottom: 20rpx;

			.member-left {
				display: flex;
				align-items: center;

				text {
					font-weight: bold;
					font-size: 26rpx;
					color: #060606;
				}

				view {
					font-size: 24rpx;
					color: #060606;
				}
			}

			.member-right {
				width: 136rpx;
				height: 56rpx;
				line-height: 56rpx;
				background: #FFFFFF;
				border-radius: 28rpx;
				font-weight: 600;
				font-size: 24rpx;
				color: #7D661E;
				text-align: center;
			}
		}

		.member-progress {
			&>view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10rpx;

				text {
					font-size: 22rpx;
					color: #A26341;
				}
			}
		}
	}

	.order-info-box {
		.order-info {
			width: 710rpx;
			background-color: #fff;
			border-radius: 14rpx;
			background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/a8863202404261349533191.png');
			background-size: 28% 100%;
			background-position: right;
			background-repeat: no-repeat;
			margin: 0 auto;
			padding: 28rpx 0 40rpx 0;

			.info-head {
				font-size: 32rpx;
				font-weight: bold;
				margin: 0 0 30rpx 30rpx;
			}

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


	.gift {
		width: 710rpx;
		margin: 20rpx;
		margin-bottom: 0;
		box-sizing: border-box;
		padding: 20rpx;
		align-items: center;
		height: 96rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		background-color: #FAF1D7;
		font-size: 26rpx;

		.gift-buy {
			font-size: 24rpx;
			width: 136rpx;
			height: 56rpx;
			background-color: white;
			border-radius: 28rpx;
			line-height: 56rpx;
			text-align: center;
			color: #7D661E;
		}
	}
</style>