massage-front/pages_order/mine/partner.vue

<template>
	<view class="page">
		
		<view class="bg"></view>

		<view class="header">
			<!-- 导航栏 -->
			<navbar title="我的团队" leftClick @leftClick="$utils.navigateBack" bgColor="transparent" 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 || 0 }}</view>
							<view class="count-desc">推广佣金</view>
						</view>
						<button plain class="btn" @click="$utils.navigateTo('/pages_order/mine/withdraw')">去提现</button>
					</view>
				</view>
			</view>
		</view>

		<view class="list">
			<view class="list-header">
				<view class="list-header-title">
					<text>直推用户<text class="sub">{{ `（${total}人）` }}</text></text>
					<view class="list-header-title-line"></view>
				</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: check -->
								<view class="row">{{ `${item.shopName}：${item.price}元` }}</view>
							</view>
						</view>
						<!-- todo: check -->
						<view class="commission">{{ `+${item.integerPrice}` }}</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 {
				mixinsListApi: 'queryRecommendUserList',
			}
		},
		computed : {
			...mapState(['riceInfo']),
		},
		onLoad() {
			// todo
			// this.$store.commit('getRiceInfo')
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F5F5F5;
		min-height: 100vh;
		position: relative;
  }
	
	.bg {
		width: 100vw;
		height: 465rpx;
		background-image: linear-gradient(#84A73F, #D8FF8F);
	}

	.header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
	}

	.info {
		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 46rpx 0;
		}

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

		.account {
			margin-top: 21rpx;
			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>