QianNiaoShop/pagesS/goods/xhplist.vue

<template>
	<view class="content">
		<view class="navbar">
			<view v-for="(item, index) in navlist" :key="index" class="nav-item"
				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.title }}</view>
		</view>
		<swiper :current="tabCurrentIndex" :style="{ height: height }" class="swiper-box" duration="300" disable-touch>
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navlist" :key="tabIndex">
				<scroll-view scroll-y="true" :style="{'height': height}" class="swiper-box" @scrolltolower="loadData"
					v-for="">
					<u-empty text="暂无数据" mode="list" v-if="tabItem.loaded && tabItem.list.length == 0"></u-empty>
					<view class="gq-list">
						<view class="gq-item" v-for="item in tabItem.list">
							<view class="gq-logo">
								<image :src="item.image" mode="" class=""></image>
							</view>
							<view class="info">
								<view class="info-tit">
									名称：
								</view>
								<view class="info-val">
									{{item.name}}
								</view>
							</view>
							<view class="info">
								<view class="info-tit">
									ID：
								</view>
								<view class="info-val">
									{{item.id}}
								</view>
							</view>
							<view class="info">
								<view class="info-tit">
									出仓时间：
								</view>
								<view class="info-val">
									{{$utils.formatDate(item.createTime).split(' ')[0]}}
								</view>
							</view>
							<view class="info">
								<view class="info-tit">
									门店：
								</view>
								<view class="info-val">
									{{item.shop_name}}
								</view>
							</view>
							<view class="info">
								<view class="info-tit">
									调拨人：
								</view>
								<view class="info-val">
									{{item.mobile}}
								</view>
							</view>
							<view class="info" v-if="tabCurrentIndex == 1">
								<view class="info-tit">
									核销人：
								</view>
								<view class="info-val">
									{{item.write_mobile}}
								</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="tabItem.loadingType" />
				</scroll-view>

			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCurrentIndex: 0,
				height: '',
				navlist: [{
						status: 1,
						title: '使用中',
						list: [],
						page: 1,
						pageSize: 10,
						loaded: false,
						loadingType: 'loadmore'
					},
					{
						status: 2,
						title: '已使用',
						list: [],
						page: 1,
						pageSize: 10,
						loaded: false,
						loadingType: 'loadmore'
					}
				]
			}
		},
		onLoad() {

		},
		onShow() {
			this.loadData()
		},
		onReachBottom() {

		},
		onReady() {
			var _this = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.swiper-box').boundingClientRect();
					query.exec(function(res) {
						_this.height = resu.windowHeight - res[0].top + 'px';
						console.log('打印页面的剩余高度', _this.height);
					});
				},
				fail: res => {}
			});
		},
		methods: {
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.loadData('tab');
			},
			loadData(type) {
				let that = this;
				let index = that.tabCurrentIndex;
				let item = that.navlist[index];
				if (type == 'reload') {
					item.loaded = false;
					item.loadingType = 'loadmore';
					item.page = 1;
					item.list = [];
					
				}
				if (type == 'tab' && item.loaded) {
					return;
				}
				if (item.loadingType == 'loading' || item.loadingType == 'nomore') {
					return;
				}

				item.loadingType = 'loading';
				that.$u.api.getXhpList({
					page: item.page, //分页页码，数字类型
					pageSize: item.pageSize,
					status: item.status, //状态 1正常0禁用
				}).then(({data})=> {
					console.log(data);
					item.list = item.list.concat(data);
					item.page++;
					if(data.length == item.pageSize) {
						item.loadingType = 'loadmore';
					}else {
						item.loadingType = 'nomore';
					}
					item.loaded = true;
				})

			},
		}
	}
</script>

<style lang="scss">
	.navbar {
		// margin-top: 20rpx;
		display: flex;
		height: 88rpx;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: #999999;
			position: relative;

			&.current {
				color: #000;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #fe5b38;
				}
			}
		}
	}

	.swiper-box {
		.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;
			// 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: 193rpx;
				height: 193rpx;
				background: #EEEFF1;
				border-radius: 15px;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 193rpx;
					height: 193rpx;
				}
			}

			.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>