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 style="flex-grow: 1;overflow-y: auto;">
		<view class="user-info"
			:style="{backgroundImage: [0].includes(userInfo.user_ship)?'url(https://lihai001.oss-cn-chengdu.aliyuncs.com/def/e3a7b202404261113002322.webp)':'url(https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/aace1202407021022357574.png)' }">
			<view class="u-card">
				<view style="display: flex;" @click="updataInfp">
					<up-image :src="userInfo.avatar" mode="aspectFill" width="112rpx" height="112rpx"
						shape="circle"></up-image>
					<view class="content">
						<view style="font-size: 32rpx;">{{userInfo.nickname}}</view>
						<view class="uid">
							<text>ID:</text>
							<view style="margin:0 20rpx;">
								{{userInfo.id}}
							</view>
							<view v-if="![0].includes(userInfo.user_ship)"
								style="display: flex;align-items: center;background-color: #F6EECD;padding: 4rpx 10rpx;border-radius: 20rpx;">
								<view style="margin-right: 10rpx;">
									<up-icon
										name="https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/e8621202406281618363287.png"></up-icon>
								</view>
								{{userInfo.vip_name}}会员
							</view>
						</view>
					</view>
				</view>
				<view class="to-vip-btn" @click="navgo('/pageQuota/vipUser/index')">
					会员报备
				</view>
			</view>
			<view class="balance" @click="navgo('/pageQuota/balanceDetail/index?type=2')">
				<view class="" style="font-size: 28rpx;transform: translateY(10rpx);">
					余额:
				</view>
				<view style="font-size: 50rpx;">
					{{userInfo.now_money||"0.00"}}<text style="font-size: 28rpx;"> (元)</text>
				</view>
			</view>
		</view>

		<view class="rest">
			<view class="rest-item" @click="navgo('/pageQuota/balanceDetail/index?type=1')">
				<view class="rest-item-num">{{userInfo.purchase_funds||'0.00'}}</view>
				<view class="rest-item-txt">采购款</view>
			</view>
			<view class="rest-item" @click="navgo('/pageQuota/balanceDetail/index?type=4')">
				<view class="rest-item-num">{{userInfo.return_money||'0.00'}}</view>
				<view class="rest-item-txt">返还金</view>
			</view>
			<view class="rest-item" @click="navgo('/pageQuota/balanceDetail/index?type=3')">
				<view class="rest-item-num">{{userInfo.GetNumber ||"0.00"}}</view>
				<view class="rest-item-txt">礼品券</view>
			</view>
			<view class="rest-item" @click="navgo('/pageQuota/balanceDetail/index?type=5')">
				<view class="rest-item-num">{{userInfo.number ||"0.00"}}</view>
				<view class="rest-item-txt">冻结券</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="/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 v-if="userInfo.user_ship==1" title="赠品区" :isLink="true" url="/pageQuota/Gifts/index"></up-cell> -->
				<!-- <up-cell title="我的资产" :isLink="true" url="/pageQuota/asset/index"></up-cell>
				<up-cell title="预约记录" :isLink="true" url="/pageQuota/asset/lists"></up-cell> -->
				<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>

	<up-popup :show="showPop" @close="showPop=false" @open="showPop=true">
		<view class="popContent" :style="{paddingBottom:isFoucs?'500rpx':'50rpx'}">
			<view style="text-align: center;font-size: 30rpx;font-weight: bold;">
				修改个人信息
			</view>
			<up-form labelPosition="left">
				<up-form-item label="呢称" prop="userInfo.name" borderBottom ref="item1" @tap="isFoucs=true">
					<up-input :adjustPosition="false" @blur="isFoucs=false" v-model="formData.nick_name" border="none"
						placeholder="请输入个人呢称"></up-input>
				</up-form-item>
				<up-form-item label="头像" prop="userInfo.sex" borderBottom ref="item1">
					<up-image :src="formData.avatar" width="80px" height="80px" @click="uploadAvatar"></up-image>
				</up-form-item>
			</up-form>
			<view style="display: flex;margin-top: 40rpx;justify-content: space-around;">
				<view style="width: 200rpx;">
					<up-button color="#20b128" @click="updataFn">保存</up-button>
				</view>
				<view style="width: 200rpx;">
					<up-button @click="showPop=false">取消</up-button>
				</view>
			</view>

			<!-- <button></button> -->
		</view>
	</up-popup>

</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import useUserStore from "@/store/user";
	import {
		orderCountApi
	} from "@/api/order.js";
	import {
		onLoad,
		onPullDownRefresh
	} from "@dcloudio/uni-app"
	import {
		userInfoApi,
		uploadImg,
		loginUpdateUserApi
	} from "@/api/user.js"
	import {
		config
	} from "@/config/app.js"

	let isFoucs = ref(false);
	const userStore = useUserStore();
	const userInfo = ref({});
	let token = uni.getStorageSync('token') || ''
	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 showPop = ref(false)

	const updataInfp = () => {
		showPop.value = true
	}

	const formData = reactive({
		nick_name: "",
		avatar: ""

	})

	const updataFn = () => {
		loginUpdateUserApi({
			nickname: formData.nick_name,
			avatar: formData.avatar
		}).then(res => {
			uni.$u.toast('修改成功');
			showPop.value = false
			userInfoApi().then(res => {
				userInfo.value = res.data;
			})
		})
	}

	const uploadAvatar = () => {
		uni.chooseImage({
			success: (chooseImageRes) => {
				uni.showLoading({
					title: '上传中...'
				});
				const tempFilePaths = chooseImageRes.tempFilePaths;
				console.log('ewser', config.HTTP_REQUEST_URL)
				uni.uploadFile({
					url: config.HTTP_REQUEST_URL + '/api/Upload/image', //仅为示例，非真实的接口地址
					filePath: tempFilePaths[0],
					name: 'file',
					header: {
						token: token,
					},
					success: (uploadFileRes) => {
						let data = JSON.parse(uploadFileRes.data)
						formData.avatar = data.data.uri
						uni.hideLoading()
					}
				});
			}
		});

	}


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

	onLoad(() => {
		userInfoApi().then(res => {
			userInfo.value = res.data;
			formData.avatar = res.data.avatar
			formData.nick_name = res.data.nickname
			if (![0].includes(res.data.user_ship)) {
				uni.setNavigationBarColor({
					frontColor: "#000000",
					backgroundColor: "#EAFFE1"
				})
			}
		})
		getOrderCount();
	})

	onPullDownRefresh(() => {
		userInfoApi().then(res => {
			userInfo.value = res.data;
			uni.stopPullDownRefresh()
		})
	})
</script>

<style lang="scss">
	.user-info {
		// background-color: red;
		width: 100vw;
		height: 300rpx;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding: 70rpx 50rpx 0 50rpx;
		position: relative;

		.u-card {
			display: flex;
			justify-content: space-between;
			align-items: center;

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

				.uid {
					margin-top: 15rpx;
					display: flex;
					align-items: center;
					font-size: 22rpx;
				}
			}

			.to-vip-btn {
				color: white;
				padding: 10rpx 20rpx;
				height: 34rpx;
				background-color: #39BE40;
				border-radius: 30rpx;
				z-index: 2;
			}
		}

		.logo {
			position: absolute;
			width: 236rpx;
			height: 236rpx;
			right: 20rpx;
			z-index: 1;
			opacity: 0.5
		}

		.balance {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 35rpx;
		}
	}

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

	.popContent {
		padding: 30rpx 20rpx 50rpx 20rpx;
	}

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