jewelry-front/pages_order/mine/partner.vue

<!-- 合伙人页面 -->
<template>
	<view class="partner">
		<!-- 导航栏 -->
		<navbar title="合伙人" leftClick @leftClick="$utils.navigateBack" bgColor="#E3441A" color="#fff" />

		<!-- 合伙人信息 -->
		<view class="partner-info-bg">
			<view class="partner-info">
				<view class="profile-photo">
					<image :src="userInfo.headImage" mode="aspectFill" class="pro-img"></image>
				</view>

				<view class="performance-information">
					<view class="user-info-base">
						<view class="username">{{ userInfo.phone }}</view>
						<view class="user-tag">{{ userRole[userInfo.isPay] }}</view>
					</view>

					<view class="live-performance">
						<view class="live-performance-money">
							<view class="live-tag">
								直推及间推业绩
							</view>
							<view class="money">
								<text class="unit">￥</text>{{ riceInfo.canWithdraw }}
							</view>
						</view>
						<view class="withdraw">
							<view @click="$utils.navigateTo('/pages_order/mine/withdraw')" class="btn">
								去提现
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="tabs">
			<uv-tabs :activeStyle="{ color : '#DC2828' }" lineColor="#DC2828" :list="tabList"
				@click="handleTabEvent"></uv-tabs>
		</view>

		<!-- 列表 -->
		<view class="brokerage-list">
			<view v-for="item in list" :key="item.id" class="brokerage-item">
				<view class="brokerage-user">
					<image :src="item.headImage" mode="aspectFill" class="pro-img"></image>
					<view class="name-time">
						<view class="name">
							{{ item.nickName }}
						</view>
						<!-- <view class="time">
							已加入平台{{ daysBetweenDates(item.createTime,new Date().toString())}}天
						</view> -->
						<view class="time">
							加入时间{{ $dayjs(item.createTime).format('YYYY-MM-DD') }}
						</view>
						<view class="time">
							手机号：{{ item.phone }}
						</view>
					</view>
				</view>

				<view class="brokerage-money">
					<view class="order-money">
						下单量: <text>{{ item.orderNum }}</text>
					</view>
					|
					<view class="money">
						佣金:<text>{{ item.commission }}元</text>
					</view>
				</view>
			</view>
			
			<uv-empty mode="list" v-if="list.length == 0"></uv-empty>
		</view>

	</view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'
	import { mapState } from 'vuex'
	export default {
		name: "Partner",
		mixins: [mixinsList],
		data() {
			return {
				tabList: [{
						name: '直推用户'
					},
					{
						name: '间推用户'
					}
				],
				state: 0,
				userRole: ['用户', '会员', '渠道'],
				mixinsListApi: 'getHanHaiMemberUser',
			}
		},
		computed : {
			...mapState(['riceInfo']),
		},
		onLoad() {
			this.queryParams.state = this.state
		},
		onShow() {
			this.$store.commit('getRiceInfo')
		},
		methods: {
			//点击不同分类用户tab
			handleTabEvent(e) {
				this.state = e.index;
				this.queryParams.state = this.state
				this.getData();
			},

			//计算两个时间相差天数
			daysBetweenDates(dateString1, dateString2) {
				const date1 = new Date(dateString1.replace(/-/g, '/'));
				const date2 = new Date(dateString2.replace(/-/g, '/'));

				if (isNaN(date1) || isNaN(date2)) {
					throw new Error('Invalid date string');
				}
				const timeDifference = Math.abs(date2 - date1);
				const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));

				return daysDifference;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.partner {

		// 合伙人信息
		.partner-info-bg {
			background: $uni-color;
			padding: 60rpx 0rpx;

			.partner-info {
				display: flex;
				align-items: center;
				background: white;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 20rpx;
				width: calc(100% - 40rpx);
				margin: 0rpx auto;

				.profile-photo {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 25%;

					.pro-img {
						width: 170rpx;
						height: 170rpx;
						border-radius: 50%;
					}
				}

				.performance-information {
					width: 75%;
					padding: 0rpx 20rpx;
					box-sizing: border-box;

					.user-info-base {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						border-bottom: 2px dashed $uni-color;
						padding: 20rpx 0rpx;

						.username {
							font-size: 36rpx;
						}

						.user-tag {
							background: black;
							color: white;
							margin-left: 20rpx;
							border-radius: 20rpx;
							padding: 3rpx 20rpx;
							font-size: 28rpx;
						}
					}

					.live-performance {
						display: flex;
						flex-wrap: wrap;
						padding: 20rpx 0rpx;
						box-sizing: border-box;

						.live-performance-money {
							width: 50%;

							.live-tag {
								display: flex;
								align-items: center;
								justify-content: center;
								background: #F99F9F;
								color: #DC2828;
								border-radius: 40rpx;
								font-weight: bold;
								font-size: 28rpx;
								padding: 10rpx 0rpx;
							}

							.money {
								font-size: 45rpx;
								color: $uni-color;
								font-weight: bold;

								.unit {
									font-size: 32rpx;
								}
							}
						}

						.withdraw {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: flex-end;
							width: 50%;

							.btn {
								width: 90%;
								display: flex;
								align-items: center;
								justify-content: center;
								background: #DC2828;
								color: white;
								border-radius: 40rpx;
								padding: 20rpx 0rpx;
								font-weight: bold;
								font-size: 32rpx;
							}
						}
					}
				}
			}
		}

		.tabs {
			background: white;
		}

		// 佣金列表
		.brokerage-list {
			padding: 0rpx 20rpx;

			.brokerage-item {
				display: flex;
				align-items: center;
				background: white;
				margin: 20rpx 0rpx;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;

				.brokerage-user {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.pro-img {
						width: 100rpx;
						height: 100rpx;
					}

					.name-time {
						width: calc(100% - 100rpx);
						padding: 0rpx 20rpx;
						box-sizing: border-box;

						.name {
							font-size: 32rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.time {
							color: #999999;
							font-size: 26rpx;
						}
					}
				}

				.brokerage-money {
					width: 260rpx;
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					.order-money {
						text {
							margin-right: 5rpx;
						}
					}

					.money {
						text {
							color: #FEB814;
							margin-left: 5rpx;
						}
					}
				}
			}
		}
	}
</style>