pifa/pages/invite/list.vue

<template>
	<view class="user">
		<view class="user-hd">
			邀请商家注册本商城，商家成功下单，即可获得流水返佣奖励。
		</view>
		<view class="user-bd">
			<view class="tab">
				<view class="item" :class="tabIndex == 0?'item-on':''" @click="tabItem(0)">申请已过<text v-if="adoption_num">{{adoption_num}}</text></view>
				<view class="item" :class="tabIndex == 1?'item-on':''" @click="tabItem(1)">申请未过<text v-if="refuse_num">{{refuse_num}}</text></view>
			</view>
			<view class="li" v-for="(a,i) in list" :key="i">
				<view class="l">
					<image v-if="a.avatarImg" :src="a.avatarImg"></image>
					<image v-else :src="$picUrl+'/static/news/avater.png'"></image>
				</view>
				<view class="m">
					<view class="n">{{a.username}}</view>
					<view class="t">{{a.create_time}}</view>
				</view>
			</view>
			<view v-if="total == 0" style="margin: 250rpx 0" >
				<u-empty text="暂无信息" mode="list"></u-empty>
			</view>
		</view>
		<addShuiyin />
	</view>
</template>

<script>
	import * as newFunApi from '@/api/newFun'
	export default {
		data() {
			return {
				list: [],
				total: 0,
				tabIndex: 0,
				refuse_num: 0,
				adoption_num: 0
			};
		},
		onLoad() {
			this.getList();
		},
		methods: {
			tabItem(i){
				this.tabIndex = i
				this.getList();
			},
			async getList() {
				uni.showLoading({
					title:"加载中"
				})
				const {status, data} = await newFunApi.inviteWholesalerList({status: this.tabIndex == 0?10:20});
				if(status == 200){
					uni.hideLoading();
					this.list = data.list;
					this.total = data.total;
					this.adoption_num = data.adoption_num;
					this.refuse_num = data.refuse_num;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.user{
	padding: 0 0 130rpx;
	overflow: hidden;
	background: #f7e5cb url(https://www.amiami.com.cn/static/news1/invite-bg-01.png) center -24rpx no-repeat;
	background-size: 100% auto;
	min-height: 100vh;
	&-hd{
		padding: 50rpx 60rpx 0;
		text-align: center;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFEFF;
		line-height: 65rpx;
	}
	&-bd{
		width: 700rpx;
		padding: 30rpx;
		background: #FAF4ED;
		border-radius: 10rpx;
		overflow: hidden;
		margin: 40rpx auto 0;
		.tab{
			display: flex;
			justify-content: space-between;
			overflow: hidden;
			.item{
				width: 306rpx;
				line-height: 80rpx;
				background: #FAF4ED;
				border-radius: 10rpx;
				border: 1px solid #CCCCCC;
				text-align: center;
				font-weight: 400;
				font-size: 30rpx;
				color: #666666;
				text{
					margin-left: 10rpx;
				}
				&-on{
					border-color: #9A372D;
					color: #9A372D;
				}
			}
		}
		.li{
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			padding: 35rpx 0;
			border-bottom: 1px solid #F2F2F2;
			.l{
				width: 86rpx;
				height: 86rpx;
				margin-right: 25rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.m{
				flex: 1;
				max-width: 400rpx;
				margin-right: 20rpx;
				.n{
					font-size: 28rpx;
					font-weight: 400;
					color: #545454;
				}
				.t{
					margin-top: 10rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #A7A7A7;
				}
			}
			.r{
				font-size: 28rpx;
				color: #FF4C4B;
				text{
					font-size: 36rpx;
				}
			}
		}
	}
}
</style>