massage-front/pages_order/mine/partner.vue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<navbar title="我的团队" leftClick @leftClick="$utils.navigateBack" color="#fff" />
	
		<view class="card flex info">
			<image class="avatar" :src="userInfo.headImage" mode="aspectFill"></image>
			<view class="right">
				<view class="phone">{{ userInfo.phone }}</view>
				<view class="flex account">
					<view class="count">
						<view><text class="count-unit">¥</text>{{ riceInfo.canWithdraw }}</view>
						<view class="count-desc">推广佣金</view>
					</view>
					<button plain class="btn" @click="$utils.navigateTo('/pages_order/mine/withdraw')">去提现</button>
				</view>
			</view>
		</view>

		<view class="list">
			<view class="list-header">
				<!-- todo: check -->
				<view class="list-header-title">
					<text>直推用户<text class="sub">（1人）</text></text>
					<view class="list-header-title-line"></view>
				</view>
				<!-- <view class="tabs">
					<uv-tabs :activeStyle="{ color : '#DC2828' }" lineColor="#DC2828" :list="tabList"
						@click="handleTabEvent"></uv-tabs>
				</view> -->
			</view>
			<view class="list-content">
				<template v-if="list.length">
					<view class="card flex list-item" v-for="item in list" :key="item.id">
						<view class="left flex">
							<image class="avatar" :src="item.headImage" mode="aspectFill"></image>
							<view class="detail">
								<view class="row name">{{ item.nickName }}</view>
								<view class="row">{{ `下单时间：${item.createTime}` }}</view>
								<!-- todo: 对接接口字段 -->
								<view class="row">{{ `${item.projectNmae}：${item.projectPrice}` }}</view>
							</view>
						</view>
						<view class="commission">{{ `+${item.commission}` }}</view>
					</view>
				</template>
				<template v-else>
					<uv-empty mode="list"></uv-empty>
				</template>
			</view>
		</view>

		<template v-if="false">

			<!-- 列表 -->
			<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">
								加入时间{{ item.createTime }}天
							</view>
						</view>
					</view>

					<view class="brokerage-money">
						<view class="order-money">
							下单量: <text>{{ item.orderNum }}</text>
						</view>
						<text>|</text>
						<view class="money">
							佣金:<text>{{ item.commission }}元</text>
						</view>
					</view>
				</view>
				
			</view>
		</template>

	</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>
	.page {
		background-color: #F5F5F5;
		min-height: 100vh;
		position: relative;
    		
		/deep/ .nav-bar__view {
			padding-bottom: 324rpx;
			background-image: linear-gradient(#84A73F, #D8FF8F);
		}
  }

	.info {
		position: absolute;
		z-index: 999;
    transform: translateY(calc(-100% - 27rpx));

		box-sizing: border-box;
		width: calc(100% - 13rpx*2);
		padding: 0 33rpx 0 20rpx;
		margin: 0 13rpx;
		align-items: flex-start;

		.avatar {
			width: 145rpx;
			height: 145rpx;
			margin: 46rpx 20rpx 26rpx 0;
		}

		.phone {
			color: #000000;
			font-size: 28rpx;
		}

		.account {
			border-top: 1rpx dashed #707070;
			align-items: flex-start;
			justify-content: space-between;
			padding: 23rpx 7rpx 15rpx 26rpx;

			.count {
				color: #FF2A2A;
				font-size: 32rpx;
				font-weight: 700;
				
				&-unit {
					font-size: 15rpx;
				}

				&-desc {
					color: #666666;
					font-size: 22rpx;
					margin-top: 9rpx;
					margin-left: 2rpx;
				}
			}

			.btn {
				display: inline-block;
				padding: 14rpx 47rpx;
				color: $uni-text-color-inverse;
				font-size: 28rpx;
				line-height: 40rpx;
				border-radius: 34rpx;
				border: none;
				background-image: linear-gradient(to right, #84A73F, #D8FF8F);
			}
		}

		.right {
			flex: 1;
			padding-top: 52rpx;
		}
	}

	.list {
		&-header {
			background-color: $uni-fg-color;
			padding: 0 48rpx;

			&-title {
				color: #000000;
				font-size: 28rpx;
				padding: 33rpx 0 17rpx 0;

				position: relative;

				.sub {
					color: #84A73F;
					font-size: 22rpx;
				}
				
				&-line {
					position: absolute;
					left: 6rpx;
					bottom: 0;

					width: 92rpx;
					height: 5rpx;
					border-radius: 3rpx;
					background-image: linear-gradient(to right, #84A73F, #D8FF8F);
				}
			}
		}
		
		&-content {
			padding: 7rpx 13rpx;

			.left {
				flex: 1;
			}
		}

		&-item {
			margin-top: 8rpx;
			padding: 0 40rpx 0 18rpx;

			.avatar {
				width: 82rpx;
				height: 82rpx;
				border-radius: 50%;
			}
			
			.detail {
				flex: 1;
				margin: 9rpx 0 7rpx 13rpx;
				color: #999999;
				font-size: 18rpx;
			}

			.row + .row {
				margin-top: 4rpx;
			}

			.name {
				color: #000000;
				font-size: 26rpx;
			}

			.commission {
				color: #FF2A2A;
				font-size: 22rpx;
			}
		}
	}
	
	.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;
				flex-wrap: wrap;
				background: white;
				margin: 20rpx 0rpx;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;

				.brokerage-user {
					width: 50%;
					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: 50%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.order-money {
						text {
							margin-left: 10rpx;
						}
					}

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