renshou/product/sort/sort.vue

<template>
	<view>
		<view class="search-box">
			<view class="search ddflex" @click="search()">
				<image src="../../static/images/ssico.png"></image>
				<input class="fflex" placeholder="搜索产品名称或标签" v-model="searchVal" @input="search" @confirm="search"/>
			</view>
		</view>
		<scroll-view scroll-X="true" class="tab">
			<view :class="'li ' + (currents == -1 ? 'active' : '')" @tap="cateTabs(-1,'')" >全部</view>
			<block v-for="(item, index) in cates" :key="index">
				<view :class="'li ' + (currents == index ? 'active' : '')" @tap="cateTabs(index,item.id)">{{item.title}}</view>
			</block>
		</scroll-view>
		<view style="height: 190rpx;"></view>
		<view class="sort">
			<block v-for="(item, index) in pageList" :key="index">
				<view class="li dflex" @tap="toDetail(item.id)">
					<view class="proimgs">
						<image :src="item.pic" mode="aspectFill" class="proimg"
							lazy-load="true"></image>
						<image src="../../static/pages/images/shouqing.png" class="shouqing" v-if="item.stock < 1">
						</image>
					</view>
					<view class="flex">
						<view class="proname tovers" style="font-weight: bold;font-size: 32rpx;line-height: 38rpx;">{{item.title}}</view>
						<view class="pronames tovers">
							{{item.brief?item.brief:''}}
						</view>
						<view class="operate dflex">
							<view class="ddflex fflex">
								<block v-if="item.label">
									<view class="tag" v-for="it,idx in item.label.split(',')" :key="idx">{{it}}</view>
								</block>
							</view>
							<!-- <view class="price">
								已售：<text>{{item.salePrice}}件</text>
							</view> -->
							<!-- <view class="add-cart">
								<image src="../static/product/image/you.png">
								</image>
							</view> -->
						</view>
					</view>
				</view>
			</block>
			<view class="nodata nosp bgfff" v-if="show">
				<image :src="picUrlss+'empty_sp.png'"></image>
				<text>暂无产品</text>
			</view>
		</view>
	</view>
</template>

<script>
	// pages/sort/sort.js
	//获取应用实例
	const app = getApp();
	const req = require("../../utils/request.js");
	let scrollDdirection = 0; // 用来计算滚动的方向

	export default {
		data() {
			return {
				picUrlss: req.public.picUrls,
				cates: [],//产品一级分类列表
				currents: -1,
				page: 1,
				limit:10,
				isload: false,
				isUpdate: false // 是否更新消息
					,
				pageList: [],
				cateid: '',
				searchVal:''
			};
		},

		components: {},
		props: {},
		onLoad: async function(options) {
			this.category();
		},

		onShow() {
			this.setData({
				isUpdate: !this.isUpdate
			});
		},

		onReachBottom() {
			this.page++;
			if (this.currents > -1) {
				this.getList(this.cateid);
			} else {
				this.getList(this.id);
			}
		},

		methods: {

			category() {
				//产品分类
				let that = this;
				// console.log(id, dataName, listId);
				let from = {
					page: 1,
					size: 1000
				};
				req.getRequest('/api/v1/category/list', from, res => {
					this.cates = res
					this.getList();
				});
			},
			cateTabs(index,id) {
				if(this.currents == index) return false
				this.setData({
					currents: index,
					page: 1,
					cateid: id
				});
				this.getList();
			},

			getList() {
				// console.log("====================")
				//产品列表
				let that = this;
				let from = {
					page: that.page,
					limit: that.limit,
					categoryId: that.cateid
				};
				if(this.searchVal) from.searchTitle = this.searchVal
				req.getRequest('/api/v1/product/list', from, res => {
					if(that.page==1) that.pageList = []
					if (res && res.length >= that.limit) that.isLoad = true;
					if (that.page > 1) res = that.pageList.concat(res);
					if (res.length <= 0) {
						that.setData({
							show: true
						})
					} else {
						that.setData({
							show: false
						})
					}
					that.setData({
						pageList: res
					});
				});
			},
			toDetail(id) {
				app.globalData.openPage("product/detail/detail?id=" + id);
			},
			search() {
				this.page = 1
				this.getList();
			}
		}
	};
</script>
<style>
	@import "./sort.css";
</style>