book-hi/pages/mine/index.vue

<template>
	<view class="mine-page">
		<!-- <u-navbar title="我的" bgColor="transparent" titleBold></u-navbar> -->
		<!-- 顶部用户信息 -->
		<view class="user-info">
			<view class="user-header" @tap="handleUpdateUserInfo">
				<view class="user-avatar">
					<image class="avatar" :src="userInfo.imgPath" mode="aspectFill" v-if="userInfo.imgPath"
						style="width: 100%; height: 100%; display: block"></image>
					<image class="avatar" src="https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/logo3.png"
						mode="heightFix" v-else style="width: 100%; height: 116rpx; display: block; border-radius: 10%">
					</image>
				</view>
				<view class="user-detail">
					<view class="nickname">{{ userInfo.nickName }}</view>
					<view class="user-tag" v-for="(tag, index) in userInfo.tags" :key="index">{{ tag }}</view>
				</view>
			</view>

			<!-- 用户数据 -->
			<view class="user-data">
				<view class="data-item" @click="navigateToTool('/pages-mine/pages/wallet')">
					<view class="amount">{{ userInfo.accountMoney || 0 }}</view>
					<view class="label">我的钱包</view>
				</view>
				<view class="data-item" @click="navigateToTool('/pages-car/pages/red-packet')">
					<view class="amount">{{ userInfo.unusedCouponNum || 0 }}</view>
					<view class="label">我的红包</view>
					<view class="badge" v-if="userInfo.couponNum">{{ userInfo.couponNum }}个可领</view>
				</view>
				<view class="data-item">
					<view class="amount">{{ userInfo.point || 0 }}</view>
					<view class="label">我的积分</view>
				</view>
			</view>
		</view>

		<!-- 我的订单 -->
		<view class="order-section">
			<view class="section-header">
				<text>买书订单</text>
				<view class="view-all" @click="navigateToOrder('/pages-car/pages/my-order')">
					<text>查看全部</text>
					<u-icon name="arrow-right" size="24" color="#999"></u-icon>
				</view>
			</view>
			<view class="order-types" style="padding: 0 20rpx">
				<view class="type-item flex-d flex-a-c" v-for="(item, index) in myOrderTypes" :key="index"
					@click="navigateToOrder(item.path)">
					<image class="type-icon" :src="item.icon" mode="aspectFit"></image>
					<text>{{ item.name }}</text>
					<view class="badge" v-if="item.badge">{{ item.badge }}</view>
				</view>
			</view>
		</view>

		<!-- 卖书订单 -->
		<view class="order-section" style="margin-top: 30rpx;">
			<view class="section-header">
				<text>卖书订单</text>
				<view class="view-all" @click="navigateToOrder('/pages-mine/pages/order-page')">
					<text>查看全部</text>
					<u-icon name="arrow-right" size="24" color="#999"></u-icon>
				</view>
			</view>
			<view class="order-types" style="padding: 0 20rpx">
				<view class="type-item flex-d flex-a-c" v-for="(item, index) in orderTypes" :key="index"
					@click="navigateToOrder(item.path)">
					<image class="type-icon" :src="item.icon" mode="aspectFit"></image>
					<text>{{ item.name }}</text>
					<view class="badge" v-if="item.badge">{{ item.badge }}</view>
				</view>
			</view>
		</view>



		<!-- 实用工具 -->
		<view class="tools-section">
			<view class="section-title">实用工具</view>
			<view class="tools-grid">
				<view class="tool-item flex-d flex-a-c" v-for="(tool, index) in tools" :key="index"
					@click="navigateToTool(tool.path)">
					<!-- #ifdef MP-ALIPAY -->
					<button class="link-service flex-d flex-a-c" v-if="tool.path == 'link-service'"
						@click="navigateToCustomerService">
						<image class="tool-icon" :src="tool.icon" mode="aspectFit"></image>
						<text>联系客服</text>
					</button>
					<!-- #endif -->
					<!-- #ifndef MP-ALIPAY -->
					<button class="link-service flex-d flex-a-c" open-type="contact" v-if="tool.path == 'link-service'">
						<image class="tool-icon" :src="tool.icon" mode="aspectFit"></image>
						<text>联系客服</text>
					</button>
					<!-- #endif -->

					<block v-else>
						<image class="tool-icon" :src="tool.icon" mode="aspectFit"></image>
						<text>{{ tool.name }}</text>
					</block>
				</view>
			</view>
		</view>

		<!-- 悬浮提现确认按钮 -->
		<withdrawal-confirm :visible="withdrawalOrder && withdrawalOrder.length > 0" :initialPosition="buttonPosition"
			@click="navigateToWithdrawal" @position-change="onPositionChange" />

		<!-- 活动悬浮按钮 -->
		<floating-activity :img="activityInfo.img" :visible="activityInfo.frequency && activityInfo.frequency == 3"
			:initialPosition="activityPosition" @click="contactCustomerService"
			@position-change="onActivityButtonPositionChange" />

		<!-- 提现进度弹窗 -->
		<withdrawal-progress :orderInfo="currentWithdrawalOrder" @confirm="confirmWithdrawal" ref="withdrawalRef" />
	</view>
</template>

<script>
	import WithdrawalProgress from './components/withdrawal-progress.vue';
	import WithdrawalConfirm from '../../components/withdrawal-confirm.vue';
	import floatingActivity from '../../components/floating-activity.vue';

	export default {
		components: {
			WithdrawalProgress,
			WithdrawalConfirm,
			floatingActivity
		},
		data() {
			return {
				userInfo: {
					userId: 0,
					openid: '',
					imgPath: '',
					nickName: '这里是昵称.',
					mobile: '',
					tags: [],
					accountMoney: 0,
					couponNum: 0,
					unusedCouponNum: 0,
					point: 0,
					firstAuditNum: 0,
					pickUpNum: 0,
					auditNum: 0,
					payNum: 0,
					refundNum: 0,
					shopWaitPayNum: 0,
					shopWaitSendNum: 0,
					shopWaitReceiptNum: 0,
					shopRefundNum: 0,
					shopFinishNum: 0
				},
				orderTypes: [
					{
						name: '待初审',
						icon: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/1.png',
						badge: 0,
						key: 'firstAuditNum',
						path: '/pages-mine/pages/order-page?status=2'
					},
					{
						name: '待取件',
						icon: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/2.png',
						badge: 0,
						key: 'pickUpNum',
						path: '/pages-mine/pages/order-page?status=3'
					},
					{
						name: '待审核',
						icon: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/3.png',
						badge: 0,
						key: 'auditNum',
						path: '/pages-mine/pages/order-page?status=8'
					},
					{
						name: '待到款',
						icon: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/4.png',
						badge: 0,
						key: 'payNum',
						path: '/pages-mine/pages/order-page?status=10'
					},
					{
						name: '申请退回',
						icon: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/5.png',
						badge: 0,
						key: 'refundNum',
						path: '/pages-mine/pages/apply-return'
					}
				],
				myOrderTypes: [
					{
						name: '待付款',
						icon: '/static/my-order/icon-1.png',
						badge: 0,
						key: 'shopWaitPayNum',
						path: '/pages-car/pages/my-order?status=1'
					},
					{
						name: '待发货',
						icon: '/static/my-order/icon-2.png',
						badge: 0,
						key: 'shopWaitSendNum',
						path: '/pages-car/pages/my-order?status=2'
					},
					{
						name: '待收货',
						icon: '/static/my-order/icon-3.png',
						badge: 0,
						key: 'shopWaitReceiptNum',
						path: '/pages-car/pages/my-order?status=3'
					},
					{
						name: '退款/售后',
						icon: '/static/my-order/icon-4.png',
						badge: 0,
						key: 'shopRefundNum',
						path: '/pages-car/pages/my-order?status=5'
					},
					{
						name: '已完成',
						icon: '/static/my-order/icon-5.png',
						badge: 0,
						key: 'shopFinishNum',
						path: '/pages-car/pages/my-order?status=4'
					}
				],
				tools: [
					{
						name: '消息通知',
						icon: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t1.png',
						path: '/pages-mine/pages/notice'
					},
					{
						name: '我的收藏',
						icon: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t2.png',
						path: '/pages-car/pages/my-fav'
					},
					{
						name: '我的足迹',
						icon: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t3.png',
						path: '/pages-car/pages/my-footprint'
					},
					{
						name: '我的地址',
						icon: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t4.png',
						path: '/pages-mine/pages/address/list'
					},
					{
						name: '我的红包',
						icon: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t5.png',
						path: '/pages-car/pages/red-packet'
					},
					{
						name: '联系客服',
						icon: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t6.png',
						path: 'link-service'
					},
					{
						name: '意见反馈',
						icon: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t7.png',
						path: '/pages-mine/pages/feedback'
					},
					{
						name: '到货提醒',
						icon: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t8.png',
						path: '/pages-car/pages/arrival-reminder'
					},
					{
						name: '合伙人计划',
						icon: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t9.png',
						path: '/pages-mine/pages/partner/partner-rule'
					},
					{
						name: '买卖答疑',
						icon: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t10.png',
						path: '/pages-mine/pages/rules-for-sellbooks'
					},
					{
						name: '关于书嗨',
						icon: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t11.png',
						path: '/pages-home/pages/about-us'
					},
					{
						name: '我的余额',
						icon: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t12.png',
						path: '/pages-mine/pages/wallet'
					},
					{
						name: '用户设置',
						icon: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t13.png',
						path: '/pages-mine/pages/setting'
					}
				],
				// 悬浮按钮位置
				buttonPosition: {
					left: 'auto',
					right: 0,
					bottom: '10%'
				},
				// 客服按钮位置
				activityPosition: {
					left: 'auto',
					right: 0,
					bottom: '25%'
				},
				withdrawalOrder: [],
				// 提现进度弹窗相关
				showWithdrawalModal: false,
				currentWithdrawalOrder: {},

				//活动弹窗信息
				activityInfo: {}
			};
		},
		methods: {
			//获取是否显示活动弹窗
			getActivityStatus() {
				uni.$u.http.post('/token/home/activity/dialog').then((res) => {
					if (res.code == 200) {
						this.activityInfo = res.data;
					}
				});
			},

			//获取是否存在待确认提现的订单
			getWithdrawalOrder() {
				uni.$u.http.get('/token/user/withdrawWindows').then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.withdrawalOrder = res.data;
					}
				});
			},

			//用户信息
			handleUpdateUserInfo() {
				uni.navigateTo({
					url: '/pages-mine/pages/setting'
				});
			},
			//查看全部订单
			viewAllOrders() {
				uni.navigateTo({
					url: '/pages-car/pages/my-order?status=-1'
				});
			},
			//跳转订单
			navigateToOrder(path) {
				uni.navigateTo({
					url: path
				});
			},
			//跳转工具
			navigateToTool(path) {
				if (path === 'link-service') return
				if (!path)
					return uni.showToast({
						title: '开发中...',
						icon: 'none'
					});

				if (path == '/pages-mine/pages/partner/partner-rule') {
					this.getPartnerStatus();
				} else {
					uni.navigateTo({
						url: path
					});
				}
			},
			// 导航到提现确认页面
			navigateToWithdrawal() {
				if (this.withdrawalOrder && this.withdrawalOrder.length > 0) {
					// 显示提现进度弹窗，使用第一个提现订单
					this.currentWithdrawalOrder = this.withdrawalOrder[0];
					this.$refs.withdrawalRef.openModal();
				} else {
					// 如果没有待确认的提现订单，直接跳转到钱包页面
					uni.navigateTo({
						url: '/pages-mine/pages/wallet'
					});
				}
			},
			//获取用户信息
			getUserInfo() {
				uni.$u.http.get('/token/user/detail').then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.userInfo = res.data;
						uni.setStorageSync('userInfo', this.userInfo);

						this.orderTypes.forEach((item) => {
							item.badge = this.userInfo[item.key];
						});
						
						this.myOrderTypes.forEach((item) => {
							item.badge = this.userInfo[item.key];
						});
					}
				});
			},
			//获取合伙人状态
			getPartnerStatus() {
				let item = this.tools.find((item) => item.name == '合伙人计划');
				uni.$u.get('/token/getUserPartnerInfo').then((res) => {
					if (res.code == 200) {
						let { status } = res.data;
						if (status == -1 || status == 4) {
							item.path = '/pages-mine/pages/partner/partner-rule';
						} else if (status == 1) {
							item.path = '/pages-mine/pages/partner/partner-home';
						} else {
							item.path = '/pages-mine/pages/partner/partner-status';
						}
					} else {
						item.path = '/pages-mine/pages/partner/partner-status';
					}

					uni.navigateTo({
						url: item.path
					});
				});
			},

			// 更新悬浮按钮位置
			onPositionChange(position) {
				this.buttonPosition = position;
			},

			// 更新活动按钮位置
			onActivityButtonPositionChange(position) {
				this.activityPosition = position;
			},

			// 联系客服
			contactCustomerService() {
				uni.navigateTo({
					url: this.activityInfo.jumpPage
				});
			},

			// 关闭提现进度弹窗
			closeWithdrawalModal() {
				this.$refs.withdrawalRef.handleClose();
			},

			confirmWithdrawal(item) {
				uni.$u.http
					.post('/token/user/withdrawConfirm', {
						orderNo: item.orderNo
					})
					.then((res) => {
						if (res.code === 200) {
							this.handleConfirmReceipt(res.data);
						}
					})
					.catch((err) => {
						uni.showToast({
							title: err.message || '确认失败',
							icon: 'none'
						});
					});
			},
			//执行微信确认收款操作
			handleConfirmReceipt(data) {
				if (wx.canIUse('requestMerchantTransfer')) {
					wx.requestMerchantTransfer({
						mchId: data.mchId,
						appId: data.appId,
						package: data.packageStr,
						success: (res) => {
							// res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
							uni.showToast({
								title: '确认收款成功',
								icon: 'none'
							});
							this.closeWithdrawalModal();
							// 刷新列表
							this.getWithdrawalOrder();
						},
						fail: (res) => {
							console.log('fail:', res);
						}
					});
				} else {
					wx.showModal({
						content: '你的微信版本过低，请更新至最新版本。',
						showCancel: false
					});
				}
			},
			navigateToCustomerService() {
				uni.navigateTo({
					url: '/pages-mine/pages/customer-service'
				});
			}
		},
		onReady() {
			// 获取屏幕宽度和高度
			uni.getSystemInfo({
				success: (res) => {
					this.screenWidth = res.windowWidth;
					this.screenHeight = res.windowHeight;
				}
			});

			this.getActivityStatus();
		},
		onShow() {
			this.$updateCartBadge();
			let token = uni.getStorageSync('token');
			if (token) {
				this.getUserInfo();
				this.getWithdrawalOrder();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.mine-page {
		min-height: 100vh;
		background-color: #f5f5f5;
		position: relative;

		.link-service {
			background: transparent;
			border: none;
			padding: 0;
			margin: 0;
			width: 100%;
			height: 100%;
			line-height: 36rpx;
		}

		.user-info {
			background: url('/static/img/bg.png') no-repeat center center;
			background-size: 100% 100%;
			position: absolute;
			top: 0;
			left: 0;
			padding: 20rpx 50rpx 120rpx;
			color: #fff;
			position: relative;
			padding-top: 160rpx;

			&::after {
				width: 140%;
				position: absolute;
				left: -20%;
				top: 0;
				z-index: -1;
				content: '';
				border-radius: 0 0 50% 50%;
				background: #fd6954;
			}

			.user-header {
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;

				.user-avatar {
					border-radius: 50%;
					margin-right: 20rpx;
					border: 4rpx solid #fff;
					width: 128rpx;
					height: 128rpx;
					overflow: hidden;
					flex-shrink: 0;
					background: #fff;

					.avatar {
						width: 100%;
						height: 100%;
						border-radius: 50%;
						object-fit: cover;
					}
				}

				.user-detail {
					.nickname {
						font-size: 32rpx;
						font-weight: 500;
						margin-bottom: 8rpx;
					}

					.user-tag {
						display: inline-block;
						font-size: 22rpx;
						padding: 4rpx 12rpx;
						background: linear-gradient(-90deg, #272321, #4b4542);
						border-radius: 4rpx;
						margin-top: 8rpx;
						margin-right: 10rpx;
					}
				}
			}

			.user-data {
				display: flex;
				justify-content: space-between;
				position: relative;
				z-index: 1;
				padding: 0 40rpx;

				.data-item {
					position: relative;
					text-align: center;

					.amount {
						font-size: 38rpx;
						font-weight: 500;
						margin-bottom: 8rpx;
					}

					.label {
						font-size: 24rpx;
						font-weight: 400;
						opacity: 0.9;
					}

					.badge {
						position: absolute;
						top: -15rpx;
						right: -120%;
						padding: 0 10rpx;
						font-size: 20rpx;
						line-height: 30rpx;
						height: 30rpx;
						background: #ff8400;
						border-radius: 15rpx 15rpx 15rpx 0rpx;
					}
				}
			}
		}

		.order-section {
			margin: -90rpx 30rpx 20rpx;
			background: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			position: relative;
			z-index: 2;

			.section-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;

				.view-all {
					display: flex;
					align-items: center;
					color: #999;
					font-size: 26rpx;
				}
			}

			.order-types {
				display: flex;
				justify-content: space-between;

				.type-item {
					text-align: center;
					position: relative;

					.badge {
						position: absolute;
						top: -15rpx;
						right: -6px;
						padding: 0 10rpx;
						font-size: 20rpx;
						line-height: 30rpx;
						height: 30rpx;
						background: #f56c6c;
						color: #fff;
						border-radius: 15rpx 15rpx 15rpx 0rpx;
					}

					.type-icon {
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 12rpx;
					}

					text {
						font-size: 26rpx;
						color: #333;
					}
				}
			}
		}

		.tools-section {
			margin: 30rpx;
			background: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			position: relative;
			z-index: 2;

			.section-title {
				font-size: 30rpx;
				font-weight: 500;
				margin-bottom: 30rpx;
			}

			.tools-grid {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 30rpx;

				.tool-item {
					text-align: center;

					.tool-icon {
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 12rpx;
					}

					text {
						font-size: 24rpx;
						color: #333;
					}
				}
			}
		}
	}
</style>