You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-app/pages/goods/list/index.vue

157 lines
3.8 KiB

<!--
* @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>