web-app/pages/new-proxy/new-proxy.vue

<template>
	<view class="new-proxy">
		<view class="content">
			<view class="swiper-nav">
				<view v-for="(item, index) in typeList" :key="index" class="item" :class="{ active: MIXIN_ActiveIndex === index }" @tap="switchSwiper(index)">{{ item }}</view>
				<view class="moveBar" :style="{ left: MIXIN_MoveBarLeft + 'px', width: 100 / typeList.length + '%' }"><text></text></view>
			</view>
			<view class="swiper-area">
				<pulldown-refresher ref="pulldownRefresher" @pulldownRefresh="MIXIN_pulldownrefresh">
					<swiper class="swiper" :current="MIXIN_NowIndex" :duration="234" @transition="MIXIN_transition" @change="MIXIN_change" @animationfinish="MIXIN_animationfinish">
						<swiper-item v-for="(item, index) in typeList" :key="index">
							<scroll-view scroll-y :style="{ height: MIXIN_ScrollViewHeight + 'px' }" @scrolltolower="MIXIN_scrolltolower">
								<view class="team-item" v-for="(item, itemIndex) in lists[index]" :key="itemIndex" @tap="toPerson(item.id)">
									<view class="left">
										<image :src="item.avatar"></image>
										<text class="ellipsis name">{{ item.nickname }}</text>
										<view class="level-name"><text class="cuIcon-crownfill"></text>{{ item.level_name }}</view>
									</view>
									<view class="right">
										<view>查看详情</view>
										<text class="cuIcon-right"></text>
									</view>
								</view>
								<custom-reach-bottom v-if="lists[index].length" :nomore="page[index] === 0" />
								<swiper-status v-else :page="page[index]" unit="新增团队成员" />
							</scroll-view>
						</swiper-item>
					</swiper>
				</pulldown-refresher>
			</view>
		</view>
	</view>
</template>

<script>
	import MIXIN from '@/mixin/swiper-list.js'
	import swiperStatus from '@/components/public/swiper-status.vue'
	import pulldownRefresher from '@/components/public/pulldown-refresher.vue'
	import customReachBottom from '@/components/public/custom-reach-bottom.vue'
	import { _API_TeamNewList_Day, _API_TeamNewList_Month } from '@/apis/team.js'
	export default {
		mixins: [MIXIN],
		components: { swiperStatus, customReachBottom, pulldownRefresher },
		data() {
			return {
				page: [1, 1], // 每种类型的页数 当页数为 0 时表示当前类型没有更多了 -1 表示请求失败
				lists: { 0: [], 1: []}, // 数据
				typeList: ['今日新增（0）', '本月新增（0）'],
				apis: [_API_TeamNewList_Day, _API_TeamNewList_Month]
			};
		},
		onLoad({ type, day, month }) { // 发起请求
			this.typeList = [`今日新增（${day}）`, `本月新增（${month}）`]
			this.MIXIN_NowIndex = this.MIXIN_ActiveIndex = this.MIXIN_FinishedIndex = +type
			this.MIXIN_MoveBarLeft = this.MIXIN_NowIndex * (this.MIXIN_ScreenWidth / this.typeList.length)
			this.MIXIN_request()
		},
		methods: {
			toPerson(id) {
				uni.navigateTo({ url: `../person-card/person-card?id=${id}` })
			}
		}
	}
</script>

<style lang="scss">
	.new-proxy {
		@include page();
		.content {
			@include flex(column);
			.swiper-nav {
				text {
					width: 56rpx;
				}
				margin-bottom: 10rpx;
			}
			.swiper-area {
				scroll-view {
					.team-item {
						@include flex();
						height: 90rpx;
						background: #FFFFFF;
						padding: 0 30rpx;
						box-sizing: border-box;
						border-bottom: 1rpx solid $app-base-bg;
						.left {
							@include flex();
							flex: 1;
							justify-content: flex-start;
							height: 100%;
							image {
								width: 66rpx;
								height: 66rpx;
								border-radius: 50%;
							}
							.name {
								max-width: 268rpx;
								margin: 0 30rpx;
							}
						}
						.right {
							@include flex();
							height: 100%;
							color: #999999;
							justify-content: space-between;
							> view { font-size: 24rpx; }
							>text { font-size: 32rpx; }
						}
					}
				}
				margin-bottom: 10rpx;
			}
		}
	}
</style>