shop-app/pages/goods/list/index.vue

<!--
 * @Author: ch
 * @Date: 2022-03-21 10:31:54
 * @LastEditors: ch
 * @LastEditTime: 2022-04-25 17:45:36
 * @Description: file content
-->
<template>
	<view>
		<view class="header">
			<UiPageHeader>
				<u--input slot="custom" class="search--input" suffixIconStyle="font-size:48rpx;color:#ccc"
					suffixIcon="search" placeholderClass="search--input__placeholder" clearable
					placeholder="请输入您想要搜索的商品名称" :value="$Route.query.search"   
					@focus="$Router.push('/search')"/>
			</UiPageHeader>
			<!-- 排序标签 -->
			<Sort @change="sortChange"></Sort>
		</view>
		<UiGoodsGroup v-if="listData.length" class="goods-group" :listData="listData"></UiGoodsGroup>
		<u-loadmore :status="loadingStatus" v-if="!showEmpty"/>
		
		<!-- 当前条件无数据时展示 -->
		<template v-if="showEmpty">
			<BsEmpty tips="没搜到您想要的相关商品">
				<UiButton slot="btn" @click="$Router.replace('/')">去逛逛</UiButton>
			</BsEmpty>
			<view class="title">为您精选</view>
			<BsChoiceGoods class="goods-group" ref="choiceGoods"></BsChoiceGoods>
		</template>
	</view>
</template>
<script>
import {ApiGetGoodsList} from '@/common/api/goods';
import BsChoiceGoods from "@/components/BsChoiceGoods.vue";
import Sort from "./components/Sort.vue";
import UiPageHeader from '@/components/UiPageHeader.vue';
import UiGoodsGroup from '../../../components/UiGoodsGroup.vue';
import BsEmpty from '../../../components/BsEmpty.vue';
import UiButton from '../../../components/UiButton.vue';
export default {
	components: { BsChoiceGoods, Sort, UiPageHeader, UiGoodsGroup, BsEmpty, UiButton },
	data() {
		return {
			sortType: "all", // 排序类型
			sortPrice: false, // 价格排序 (true高到低 false低到高)
			loadingStatus :  'loading',
			listData : [],
			params : {
				length : 15,
				pageIndex : 1,
				name : this.$Route.query.search,
				categoryId : this.$Route.query.categoryId,
				order : ''
			}
			
		};
	},
	computed:{
		showEmpty(){
			return !this.listData.length && this.params.pageIndex == 1 && this.loadingStatus != 'loading'
		}
	},
	onLoad(){
		this.getGoodsList();
	},
	onReachBottom(){
		if(this.showEmpty){
			this.$refs.choiceGoods.next();
		}else{
			this.next();
		}
		
	},
	methods:{
		sortChange(order){
			this.params.order = order.sort ? `${order.value}:${order.sort}` : order.value;
			this.params.pageIndex = 1;
			this.listData = [];
			this.getGoodsList();
		},
		/**
		 * 获取搜索的商品列表
		 */
		async getGoodsList(){
			this.loadingStatus = 'loading';
			const {error, result} = await ApiGetGoodsList(this.params);
			if(error){
				uni.$u.toast(error.message);
				return false;
			}
			this.listData = this.listData.concat(result.records);
			// 标记是否为最后一页
			if(result.records.length < this.params.length){
				this.loadingStatus = 'nomore';
			}
		},
		next(){
			if(this.loadingStatus === 'nomore'){
				return false
			}
			this.params.pageIndex++;
			this.getGoodsList();
			
		}
	}
};
</script>
<style lang="scss" scoped>
page {
	background: $color-grey1;
}
.header {
	position: sticky;
	top: var(--window-top);
	z-index: 99;
	background: $color-grey0;
}
.search--input{
	display: block;
	margin-left:20rpx;
	height: 70rpx;
	border:none;
	box-sizing: border-box;
	background: $color-grey1;
	&__placeholder{
		font-size: 26rpx;
		color: $color-grey5;
	}
}

.goods-group {
	padding-top: 30rpx;
}

.title{
	font-size: $font-size-lg;
	text-align: center;
	margin: 51rpx auto 30rpx auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 500rpx;
	&::after,&::before{
		display: inline-block;
		content: '';
		width: 160rpx;
		height: 2rpx;
		background: linear-gradient(90deg, $color-grey3 0%, rgba(204, 204, 204, 0) 100%);
		
	}
	&::before{
		
		background: linear-gradient(270deg, $color-grey3 0%, rgba(204, 204, 204, 0) 100%);
	}
}
</style>