hire-wx-houxuanren/pagesD/invite-list.vue

<template>
	<view class="web_box">
		<view class="top hflex acenter jbetween">
			<view class="top_item vflex acenter jcenter">
				<view class="num">{{total}}</view>
				<view class="text">已邀好友</view>
			</view>
			<view class="top_item vflex acenter jcenter">
				<view class="num">￥{{sum || 0.0}}</view>
				<view class="hflex acenter">
					<view class="text">已获佣金</view>
					<u-icon name="question-circle" color="#fff" size="28" @click="show = true"></u-icon>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="tabs hflex acenter jbetween">
				<view class="tabs_item" :class="tab_active == index ? 'tab_active' : ''" v-for="(item,index) in tabs"
					:key="index" @click="changetab(index)">{{item.name}}</view>
			</view>
			<view class="table">
				<view class="head hflex acenter jbetween">
					<view class="text" style="width: 20%;">头像</view>
					<view class="text" style="width: 20%;">昵称</view>
					<view class="text" style="width: 50%;">时间</view>
				</view>
				<view class="item hflex acenter jbetween" v-for="(item,index) in list" :key="index">
					<view class="text hflex acenter jcenter" style="width: 20%;">
						<image :src="item.avatar" mode="aspectFill" class="avatar"></image>
					</view>
					<view class="text" style="width: 30%;">{{item.username}}</view>
					<view class="text" style="width: 40%;">{{item.createtime}}</view>
				</view>
			</view>

		</view>
		<u-popup v-model="show" mode="bottom" :closeable="false" border-radius="20">
			<view class="popu">
				<view class="title">佣金说明</view>
				<view class="content">{{content}}</view>
				<button class="btn" @click="show = false">我知道了</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		invite_list,
		get_agreement_detail,
		parent_info
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
				page: 1,
				total: 0,
				list: [],
				sum: '',
				tabs: [{
						id: '1',
						name: '我的邀请人'
					},
					{
						id: '2',
						name: '上级邀请人'
					}
				],
				tab_active: 0,
				content: '',
				show: false
			}
		},
		onLoad(options) {
			this.sum = Number(options.money).toFixed(1)
			this.getlist()
			this.getconfig()
		},
		onReachBottom() {
			if (this.total != this.list.length) {
				this.page++
				this.getlist()
			}
		},
		methods: {
			getlist() {
				invite_list({
					page: this.page
				}).then((res) => {
					this.list = this.list.concat(res.data.data)
					this.total = res.data.total
				})
			},
			getdata() {
				parent_info().then((res) => {
					this.list = []
					this.list.push(res.data)
				})
			},
			getconfig() {
				get_agreement_detail({
					code: 'commission_balance'
				}).then((res) => {
					this.content = res.data.content
				})
			},
			changetab(index) {
				this.tab_active = index
				if (index == '0') {
					this.page = 1
					this.getlist()
				} else {
					this.getdata()
				}
			}
		}
	}
</script>

<style lang="scss">
	.web_box {
		padding: 18rpx 30rpx;

		.top {
			background: url('/pagesD/static/images/invite-bg.png') no-repeat;
			background-size: 100%;
			padding: 50rpx;

			.top_item {
				width: 50%;

				.num {
					font-size: 36rpx;
					font-family: JDZhengHT, JDZhengHT;
					font-weight: 400;
					color: #FFFFFF;
					padding: 0 0 28rpx;
				}

				.text {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.top_item:nth-child(1) {
				border-right: 1rpx solid rgba(255, 255, 255, .2);
			}
		}

		.list {
			margin: 18rpx 0;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 20rpx;

			.tabs {
				padding: 24rpx 0;

				.tabs_item {
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #444444;
					margin: 0 56rpx;
				}

				.tab_active {
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #141414;
					position: relative;
				}

				.tab_active::before {
					content: '';
					position: absolute;
					width: 44rpx;
					height: 8rpx;
					background: linear-gradient(270deg, #0C66C2 0%, #FFFFFF 100%);
					border-radius: 4rpx;
					bottom: 0;
					right: 0;
					opacity: 0.6;
				}
			}

			.table {
				.head {
					background: #F3F3F3;
					border-radius: 12rpx;
					padding: 16rpx 0;

					.text {
						font-size: 26rpx;
						font-family: PingFangTC, PingFangTC;
						font-weight: 400;
						color: #222222;
						text-align: center;
					}
				}

				.item {
					padding: 32rpx 0;
					border-bottom: 1px solid #F4F5F9;

					.text {
						font-size: 26rpx;
						font-family: PingFangTC, PingFangTC;
						font-weight: 400;
						color: #222222;
						word-wrap: break-word;
					}
				}

				.avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
			}
		}

		.popu {
			padding: 0 32rpx;

			.title {
				font-size: 36rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #222222;
				text-align: center;
				padding: 40rpx 0 28rpx;
			}

			.content {
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #444444;
			}

			.btn {
				margin: 58rpx 0;
				width: 686rpx;
				height: 92rpx;
				background: #0C66C2;
				border-radius: 20rpx;
				font-size: 36rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 92rpx;
			}
		}
	}
</style>