sct/pagesT/unit/officialT.vue

<template>
	<view :class="['qn-page-' + theme]" style="height: 100vh">
		<view class="content">
			<view class="navbar">
				<view v-for="(item, index) in navList" :key="index" class="nav-item"
					:class="[tabCurrentIndex === index ? 'current' : '']" @click="tabClick(item, index)">
					{{ item.text }}
					<view class="current-line primary-btn"></view>
				</view>
			</view>
			<swiper :current="tabCurrentIndex" class="swiper-box" duration="300">
				<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
					<scroll-view @scrolltolower="getOrderSelect" scroll-y="true" style="height:100%">
						<u-empty v-if="tabItem.list.length == 0" mode="list"></u-empty>
						<view class="gq-list">
							<view class="gq-item" v-for="item in tabItem.list" @click="gotoDetail(item)">
								<view class="gq-logo">
									<image :src="item.avatar" mode="" class=""></image>
								</view>
								<view class="store-name ellipsis">
									{{item.name }}
								</view>

								<view class="info">
									<view class="info-tit">
										职务：
									</view>
									<view class="info-val">
										{{item.duties}}
									</view>
								</view>
								<view class="info">
									<view class="info-tit">
										联系：
									</view>
									<view class="info-val">
										{{item.phone}}
									</view>
								</view>
								<view class="info">
									<view class="info-tit">
										地址：
									</view>
									<view class="info-val clamp">
										{{item.address}}
									</view>
								</view>

							</view>
						</view>
						<u-loadmore margin-top="20" v-if="!(tabItem.list.length === 0 && tabItem.loaded)"
							:status="loading_status" />
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList: [{
						state: 1,
						text: '加盟',
						loadingType: 'loadmore',
						page: 1,
						pageSize: 10,
						list: [],
						loaded: false
					},
					{
						state: 2,
						text: '连锁',
						loadingType: 'loadmore',
						page: 1,
						pageSize: 10,
						list: [],
						loaded: false
					}
				],
				tabCurrentIndex: 0,
			}
		},
		onLoad(opt) {
			this.tabCurrentIndex = +options.state;
		},
		onShow() {
			this.getOrderSelect();
		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			// 获取订单列表
			getOrderSelect(type) {
				let that = this
				let item = that.navList[that.tabCurrentIndex]
				if (type == 'reload') {
					item.loadingType = 'loadmore'
					item.list = []
					item.page = 1
				}
				if (type == 'tab' && item.loaded) {
					return
				}
				if (item.loadingType == 'loading' || item.loadingType == 'nomore') {
					return
				}
				item.loadingType = 'loading'
				that.$u.api.getOtherList({
					type: item.state,
					page: item.page,
					pageSize: item.pageSize,
					name: ''
				}).then(({
					data
				}) => {
					item.list = item.list.concat(data)
					item.page++
					if (item.pageSize == data.length) {
						item.loadingType = 'loadmore'
					} else {
						item.loadingType = 'nomore'
					}
					item.loaded = true
				})
			},
			tabClick(item, index) {
				this.tabCurrentIndex = index
				this.getOrderSelect('tab')
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background: $page-color-base;
		height: 100vh;
	}

	.swiper-box {
		height: calc(100% - 80upx);
	}

	.list-scroll-content {
		height: 100%;
	}

	.navbar {
		display: flex;
		height: 88upx;
		background: #fff;
		position: relative;
		z-index: 10;
		border-bottom: 1upx solid #eee;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 28upx;
			color: #666666;
			position: relative;
			font-weight: 300;

			&.current {
				font-weight: 500;

				.current-line {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 10upx;
					transform: translateX(-50%);
					width: 40upx;
					height: 6upx;
					background: $base-btn-bg;
					border-radius: 6upx;
					/*border-bottom: 2px solid #F53C28;*/
				}
			}
		}
	}

	.gq-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		// justify-content: space-between;
		padding: 20rpx 0 20rpx 20rpx;
	}

	.gq-item {
		margin: 0 0 20rpx 14rpx;
		width: 227rpx;
		min-height: 351rpx;
		background: #FFFFFF;
		box-shadow: 0px 5rpx 5rpx 0px rgba(35, 24, 21, 0.06);
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 14rpx 20rpx;

		.gq-logo {
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			border: 1px solid #262261;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 135rpx;
				height: 135rpx;
				background-color: #eee;
				border-radius: 50%;
			}
		}

		.store-name {
			padding-top: 10rpx;
			text-align: center;
			width: 100%;
			font-size: 26rpx;
			font-weight: 500;
			color: #262261;
			overflow: hidden;
		}

		.info {
			width: 100%;
			display: flex;
			padding: 5rpx 0;

			.info-tit {
				font-size: 18rpx;
				flex-shrink: 0;
			}

			.info-val {
				text-align: center;
				font-size: 20rpx;
				width: 140rpx;
				border-bottom: 1px #C7C7C7 solid;
			}
		}

	}
</style>