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.
157 lines
3.8 KiB
157 lines
3.8 KiB
<!--
|
|
* @Author: ch
|
|
* @Date: 2022-03-21 10:31:54
|
|
* @LastEditors: ch
|
|
* @LastEditTime: 2022-04-12 10:28:58
|
|
* @Description: file content
|
|
-->
|
|
<template>
|
|
<view>
|
|
<view class="header">
|
|
<UiPageHeader>
|
|
<u--input slot="custom" class="search--input" prefixIconStyle="font-size:48rpx;color:#ccc"
|
|
prefixIcon="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 : 10,
|
|
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;
|
|
}
|
|
.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> |