lipin/pages/product/index.vue

<template>
	<view>
		<view class='header acea-row row-center-wrapper'>
			<scroll-view scroll-x="true" show-scrollbar="false" class="sort">
				<view v-for="(item,index) in sort" :key="index" :class='index==tab?"on":""' @click='change(index,item.type)'>
					{{item.name}}
				</view>
			</scroll-view>
		</view>
		<view class='aside'>
			<view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""' v-for="(item,index) in warehouse"
			 :key="index" @click='tap(index,item.id)'><text>{{item.name}}</text></view>
		</view>
		<view class='conter'>			
			<scroll-view scroll-y="true" show-scrollbar="false">
				<view class="list">
					<block v-for="(item , index) in productList" :key="index">
						<navigator class="product" :url="'/pages/product/detail?id='+item.id" hover-class='none'>
							<image :src="item.img"></image>
							<view class="info">									
								<view>{{item.title}}</view>
								<view class="price">￥{{item.price}}</view>
								<view class="text">
									<view>{{item.wget}}kg/件</view>
									<view>库存{{item.count}}</view>
								</view>
							</view>
						</navigator>
					</block>					
					<view class='loadingicon acea-row row-center-wrapper' v-if='productList.length > 0'>
						<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
					</view>
				</view>				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getWarehouse,
		productList
	} from '@/api/api.js';
	export default {
		data() {
			return {
				sort: [
					{
						'name': '综合排序',
						'type': 'all'
					},
					{
						'name': '价格',
						'type': 'price'
					},
					{
						'name': '重量',
						'type': 'wget'
					}
				],
				warehouse: [
					{
						'name': '全部',
						'id': 0
					}
				],
				productList: [],
				tab: 0,				
				navActive: 0,
				height: 0,
				where: {
					type: 'all',
					warehouse: 0,
					page: 1,
					limit: 20
				},
				loadend: false,
				loading: false,
				loadTitle: '加载更多'
			}
		},
		mounted() {
		    let that = this
		    uni.getSystemInfo({
				success: function (res) {
					that.height = (res.windowHeight) * (750 / res.windowWidth) - 80;
				}
		    })
		},
		onLoad() {
			this.getWarehouse();
			this.getProductList();
		},
		methods: {
			change: function(index, type) {
				let that = this;
				that.tab = index;
				that.$set(that.where, 'type', type)
				that.$set(that.where, 'page', 1);
				that.$set(that, 'productList', []);
				that.loadend = false;
				that.getProductList();
			},
			tap: function(index, id) {
				let that = this;
				that.navActive = index;
				that.$set(that.where, 'warehouse', id)
				that.$set(that.where, 'page', 1);
				that.$set(that, 'productList', []);
				that.loadend = false;
				that.getProductList();
			},
			getWarehouse: function() {
				let that = this;
				getWarehouse().then(res => {
					that.warehouse = that.warehouse.concat(res.data);
				})
			},
			getProductList: function() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = '';
				productList(that.where).then(res => {
					let list = res.data.list;
					let productList = that.productList.concat(list);
					let loadend = list.length < that.where.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? '已全部加载' : '加载更多';
					that.$set(that, 'productList', productList);
					that.$set(that.where, 'page', that.where.page + 1);
				}).catch(err => {
					that.loading = false;
					that.loadTitle = '加载更多';
				});
			},
			onReachBottom() {
				this.getProductList();
			}
		}
	}
</script>

<style scoped lang="scss">
	.header {
		width: 570rpx;
		height: 80rpx;
		background-color: #fff;
		position: fixed;
		left: 180rpx;
		right: 0;
		top: 0;
		z-index: 9;
		border-bottom: 1rpx solid #f5f5f5;
	}
	.sort view{
		display: inline-block;
		width:33.3%;
		text-align: center;
	}
	.sort view.on{color: #ff5c00;}

	.aside {
		position: fixed;
		width: 180rpx;
		left: 0;
		bottom: 0;
		top:0;
		background-color: #f7f7f7;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.aside .item {
		width: 100%;
		font-size: 26rpx;
		color: #424242;
		padding: 30rpx 10rpx;
	}

	.aside .item.on {
		background-color: #fff;
		border-left: 4rpx solid #ff5c00;
		width: 100%;
		text-align: center;
		color: #ff5c00;
		font-weight: bold;
	}

	.conter {
		margin: 80rpx 0 0 180rpx;
		padding: 0 20rpx;
		background-color: #fff;
	}
	
	.conter .list .product{
		display: flex;
		padding: 20rpx 0;
		border-top: 1rpx solid #f5f5f5;
	}
	.conter .list .product:nth-of-type(1){
		border-top: none;
	}
	
	.conter .list .product image{
		width:160rpx;
		height:160rpx;
	}
	
	.conter .list .product .info{
		padding-left: 20rpx;
	}
	
	.price{
		color: #f5222d;
		font-size: 32rpx;
		font-weight: bold;
		margin-top: 40rpx;
	}
	
	.text{
		width:350rpx;
		display: flex;
		justify-content:space-between;
		font-size: 24rpx;
		color:#666;
	}
</style>