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>

	</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;
			}
		}
	}
</style>