zhishifufei_uniapp/pages/store/goodsList.vue

<template>
	<BaseContainer class="search-page goods-list">
		<NavBar title="商品列表" />
		<view class="form">
			<view class="left flex-center-x">
				<i class="iconfont2 iconsousuo"></i>
				<input v-model.trim="search" confirm-type="search" @input="onSearch(search)" placeholder="搜索商品" />
				<i v-show="search" class="iconfont iconguanbi2" @click="search = ''"></i>
			</view>
		</view>
		<!-- <view class="filter-box flex">
			<view class="filter-item flex">综合</view>
			<view class="filter-item flex">
				型号 
				<text class="down"></text>
			</view>
			<view class="filter-item flex">
				价格
				<text class="down" style="top: 22rpx;"></text>
				<text class="up"></text>
			</view>
			<view class="filter-item flex">
				筛选
				<image src="@/static/images/filter.png" mode="aspectFill"></image>
			</view>
		</view> -->
		<view class="list">
		  <navigator hover-class="none" v-for="item in goodsList" :key="item.id" class="item"
		    :url="'/pages/store/detail?id=' + item.id">
		    <view class="image">
		      <image mode="aspectFit" class="img" :src="item.image" alt="" />
		    </view>
		    <view class="text">
		      <view class="title">{{ item.store_name }}</view>
					<view class="label flex">
						<view v-for="(label, k) in item.label">{{ label }}</view>
					</view>
		      <view class="group">
		        <view class="price">
		          ￥<span class="num">{{ item.price }}</span>
		        </view>
		        <image src="@/static/images/store/cart.png" mode="aspectFill" class="cart-image" @click.stop="joinCart(item)"></image>
		      </view>
		    </view>
		  </navigator>
		</view>
		<view v-if="goodsList.length && !loading" class="finished">{{ loadTitle }}</view>
		<view v-if="finished && !goodsList.length" class="empty">
		  <image mode="aspectFill" :src="getImgPath('/wap/first/zsff/images/empty.png')" alt="暂无商品" />
		  <view>暂无商品</view>
		</view>
	</BaseContainer>
</template>

<script>
	import { getGoodsList, joinCart } from "@/api/store";
	import { debounce } from 'lodash';
	
	export default {
		data() {
			return {
				search: '',
				categoryId: '',
				activeFilter: '',
				goodsList: [],
        page: 1,
        limit: 10,
        loading: false,
        finished: false,
			};
		},
		onLoad(options) {
			if(options.categoryId) {
				this.categoryId = options.categoryId;
			}
			this.getGoodsList();
		},
		onReachBottom() {
		  this.getGoodsList();
		},
		methods: {
			onSearch: debounce(function () {
				console.log(this.search);
				this.page = 1;
				this.finished = false;
				this.goodsList = [];
				this.getGoodsList();
			}, 500),
			async getGoodsList() {
				console.log(this.loading, this.finished);
			  if (this.loading || this.finished) {
			    return;
			  }
			  this.loadTitle = "";
			  this.loading = true;
			
			  try {
			    const { data } = await getGoodsList({
			      cId: this.categoryId,
			      page: this.page++,
			      limit: this.limit,
						keyword: this.search,
			    });
					
			    this.goodsList = this.goodsList.concat(data);
					console.log(this.goodsList);
			    this.finished = data.length < this.limit;
			    this.loadTitle = this.finished ? "已全部加载完" : "上拉加载更多";
			  } catch (err) {
					console.log(err);
				}
			
			  this.loading = false;
			},
			joinCart(item) {
				this.$util.checkLogin(async () => {
			    try {
			      const { code, data, msg } = await joinCart({
			        productId: item.id,
			        cartNum: 1,
			      });
			      if (code === 200) {
			        this.$util.showMsg('添加成功');
			      } else {
			        this.$util.showMsg(msg);
			      }
			    } catch (err) {
			      this.$util.showMsg(err.msg);
			    }
			  }, true);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.goods-list {
		background: #f6f6f6;
		// padding: 0 30rpx 40rpx;
		.form {
			padding: 20rpx 0 ;
			.left {
				background: #fff;
			}
		}
	}
	.filter-box {
		height: 88rpx;
		padding: 0 30rpx;
		align-items: center;
		.filter-item {
			flex: 1;
			color: #333;
			font-size: 28rpx;
			position: relative;
			&:not(:last-child) {
				padding-left: 28rpx;
			}
			&:last-child {
				justify-content: center;
				&:before {
					content: '';
					width: 1rpx;
					height: 31rpx;
					background: #333;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 0;
				}
			}
			image {
				width: 38rpx;
				height: 38rpx;
			}
			text {
				width: 0;
				height: 0;
				border: 10rpx solid;
				border-color: #000 transparent transparent transparent;
				vertical-align: top;
				position: absolute;
				left: 90rpx;
				top: 15rpx;
				&.up {
					border-color: transparent transparent #000 transparent;
					top: -1rpx;
				}
			}
		}
	}
	.list {
		width: 690rpx;
		margin: 0 auto;
	}
	
	.list .item {
	  margin-bottom: 30rpx;
	  padding: 26rpx 24rpx;
		background: #fff;
		display: flex;
		border-radius: 10rpx;
	}
	
	.list .image {
		width: 156rpx;
	  height: 184rpx;
		margin-right: 52rpx;
		flex-shrink: 0;;
	}
	
	.list .image .img {
	  width: 100%;
	  height: 100%;
	}
	
	.list .text {
		flex: 1;
	  display: flex;
	  flex-direction: column;
	  padding-top: 13rpx;
	}
	
	.list .title {
	  overflow: hidden;
	  font-size: 28rpx;
	  line-height: 35rpx;
		height: 70rpx;
	  color: #333;
	  -webkit-line-clamp: 2;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
		margin-bottom: 13rpx;
	}
	
	.list .label view {
		height: 38rpx;
		line-height: 38rpx;
		background: #e1feee;
		padding: 0 15rpx;
		margin-right: 10rpx;
		color: #28ce8f;
		font-size: 20rpx;
		&:nth-child(2) {
			color: #ff5c6b;
			background: #fee1e1;
		}
	}
	
	.list .group {
		margin-top: auto;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 0 6rpx;
	}
	
	.list .price {
	  font-size: 32rpx;
	  color: #f8473e;
	  font-weight: 600;
	}
	
	.list .price .num {
	  font-size: 32rpx;
	}
	
	.list .cart-image {
	  width: 52rpx;
		height: 52rpx;
	}
	
	.finished,
	.loading {
	  font-size: 28rpx;
	  line-height: 100rpx;
	  text-align: center;
	  color: #bbb;
	}
	.empty {
	  margin-top: 100rpx;
	  font-size: 28rpx;
	  text-align: center;
	  color: #bbb;
	}
	
	.empty image {
	  display: block;
	  width: 414rpx;
	  height: 305rpx;
	  margin: 0 auto;
	  pointer-events: none;
	}
</style>