<template>
|
<view>
|
<view class='searchGood'>
|
<view class='search acea-row row-between-wrapper'>
|
<view class='input acea-row row-between-wrapper'>
|
<text class='iconfont icon-sousuo2'></text>
|
<input type='text' :value='searchValue' :focus="focus" placeholder='点击搜索商品' placeholder-class='placeholder' @input="setValue"></input>
|
</view>
|
<view class='bnt' @tap='searchBut'>搜索</view>
|
</view>
|
<view class='title'>热门搜索</view>
|
<view class='list acea-row'>
|
<block v-for="(item,index) in hotSearchList" :key="index">
|
<view class='item' @tap='setHotSearchValue(item.title)'>{{item.title}}</view>
|
</block>
|
</view>
|
<view class='line'></view>
|
<view class="goodList" v-if="bastList.length > 0" :style="{'minHeight':height+'px'}">
|
<view class=" acea-row row-between-wrapper">
|
<GoodBlock v-for="item,index in bastList" :key="index" :size="'big'" :searchType="searchType" :searchValue="searchValue" :pageName="'商品搜索'" :moduleName="'搜索结果'" :careBeanRate="careBeanRate" :goodsInfo="item"></GoodBlock>
|
</view>
|
<view class='loadingicon acea-row row-center-wrapper' v-if="bastList.length > 0">
|
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
|
</view>
|
<view v-if="bastList.length > 0" style="height: 30rpx;"></view>
|
</view>
|
<!-- <goodList :searchType="searchType" :searchValue="searchValue" :bastList="bastList" v-if="bastList.length > 0"></goodList> -->
|
</view>
|
<view class='noCommodity' style="background-color: #f5f5f5;">
|
<view class='pictrue' v-if="bastList.length == 0 && isbastList">
|
<image src='https://ossacmall.bluedeer.com.cn/app/static/images/noSearch.png'></image>
|
</view>
|
<recommend :pageName="'商品搜索'" :hostProduct='hostProduct' v-if="bastList.length == 0"></recommend>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import GoodBlock from "@/pages/goods_block/index.vue";
|
import {
|
getSearchKeyword,
|
getProductslist,
|
getProductHot
|
} from '@/api/store.js';
|
import goodList from '@/components/goodList';
|
import recommend from '@/components/recommend';
|
export default {
|
components: {
|
GoodBlock,
|
goodList,
|
recommend
|
},
|
data() {
|
return {
|
hostProduct: [],
|
searchValue: '',
|
focus: true,
|
bastList: [],
|
hotSearchList: [],
|
first: 0,
|
limit: 8,
|
page: 1,
|
loading: false,
|
loadend: false,
|
loadTitle: '加载更多',
|
hotPage:1,
|
isScroll:true,
|
isbastList: false,
|
searchType:'',
|
careBeanRate:0,
|
height:100,
|
};
|
},
|
onShow: function() {
|
let that=this;
|
let pages = getCurrentPages(), currPage = pages[pages.length - 1];
|
console.log('------------------page onShow start-----------------');
|
console.log('route',currPage.route);
|
console.log('options',currPage.options);
|
console.log('------------------page onShow end-----------------');
|
this.getRoutineHotSearch();
|
this.getHostProduct();
|
},
|
onLoad:function(){
|
let that=this;
|
uni.getSystemInfo({
|
success: function(res) {
|
that.height = res.windowHeight - 350 / 750 * res.windowWidth;
|
},
|
});
|
|
if (!that.$store.getters.careBeanRate) {
|
console.log('has not get careBeanRate')
|
uni.$once('updateCareBeanRate', () => {
|
that.$nextTick(()=>{
|
that.$set(that,'careBeanRate',that.$store.getters.careBeanRate)
|
console.log('get updateCareBeanRate',that.$store.getters.careBeanRate,that.careBeanRate)
|
})
|
});
|
} else {
|
that.$nextTick(()=>{
|
that.$set(that,'careBeanRate',that.$store.getters.careBeanRate)
|
console.log('has updateCareBeanRate',that.careBeanRate)
|
})
|
}
|
},
|
onReachBottom: function() {
|
if(this.bastList.length>0){
|
this.getProductList();
|
}else{
|
this.getHostProduct();
|
}
|
|
},
|
methods: {
|
getRoutineHotSearch: function() {
|
let that = this;
|
getSearchKeyword().then(res => {
|
that.$set(that, 'hotSearchList', res.data);
|
});
|
},
|
getProductList: function(type) {
|
let that = this;
|
if (that.loadend) return;
|
if (that.loading) return;
|
that.loading = true;
|
that.loadTitle = '';
|
if(type){
|
that.searchType=type;
|
}
|
getProductslist({
|
keyword: that.searchValue,
|
page: that.page,
|
}).then(res => {
|
if(type){
|
that.addTrack('yy_searchResultSuccess',{
|
'searchType_var':type=='isInputSearch'?'输入搜索':'热门搜索',
|
'searchWord_var':that.searchValue,
|
'ifSearchResult_var':res.data.total>0?'是':'否',
|
'resultNumber_var':res.data.total
|
});
|
}
|
let list = res.data.list,
|
loadend = list.length < that.limit;
|
that.bastList = that.$util.SplitArray(list, that.bastList);
|
that.$set(that,'bastList',that.bastList);
|
that.loading = false;
|
that.loadend = loadend;
|
that.loadTitle = loadend ? "😕人家是有底线的~~" : "加载更多";
|
that.page = that.page + 1;
|
that.isbastList = true;
|
}).catch(err => {
|
that.loading = false,
|
that.loadTitle = '加载更多'
|
});
|
},
|
getHostProduct: function() {
|
let that = this;
|
if(!this.isScroll) return
|
getProductHot(that.hotPage,that.limit).then(res => {
|
that.isScroll = res.data.list.length>=that.limit
|
that.hostProduct = that.hostProduct.concat(res.data.list)
|
that.hotPage += 1;
|
});
|
},
|
setHotSearchValue: function(event) {
|
this.$set(this, 'searchValue', event);
|
this.page = 1;
|
this.loadend = false;
|
this.$set(this, 'bastList', []);
|
this.getProductList('isHotSearch');
|
},
|
setValue: function(event) {
|
this.$set(this, 'searchValue', event.detail.value);
|
},
|
searchBut: function() {
|
let that = this;
|
that.focus = false;
|
if (that.searchValue.length > 0) {
|
that.page = 1;
|
that.loadend = false;
|
that.$set(that, 'bastList', []);
|
uni.showLoading({
|
title: '正在搜索中'
|
});
|
that.getProductList('isInputSearch');
|
uni.hideLoading();
|
} else {
|
return this.$util.Tips({
|
title: '请输入要搜索的商品',
|
icon: 'none',
|
duration: 1000,
|
mask: true,
|
});
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
page {
|
margin-top: var(--status-bar-height);
|
background-color: #fff !important;
|
}
|
|
.searchGood .search {
|
padding-left: 30rpx;
|
background-color: #fff !important;
|
}
|
|
.searchGood .search {
|
padding-top: 20rpx;
|
}
|
|
.searchGood .search .input {
|
width: 598rpx;
|
background-color: #f7f7f7;
|
border-radius: 33rpx;
|
padding: 0 35rpx;
|
box-sizing: border-box;
|
height: 66rpx;
|
}
|
|
.searchGood .search .input input {
|
width: 472rpx;
|
font-size: 26rpx;
|
}
|
|
.searchGood .search .input .placeholder {
|
color: #bbb;
|
}
|
|
.searchGood .search .input .iconfont {
|
color: #000;
|
font-size: 35rpx;
|
}
|
|
.searchGood .search .bnt {
|
width: 120rpx;
|
text-align: center;
|
height: 66rpx;
|
line-height: 66rpx;
|
font-size: 30rpx;
|
color: #282828;
|
}
|
|
.searchGood .title {
|
font-size: 28rpx;
|
color: #999;
|
margin: 50rpx 30rpx 25rpx 30rpx;
|
}
|
|
.searchGood .list {
|
padding-left: 10rpx;
|
}
|
.goodList{
|
padding: 30rpx;
|
background-color: #f5f5f5;
|
}
|
.searchGood .list .item {
|
font-size: 26rpx;
|
color: #454545;
|
padding: 0 21rpx;
|
height: 60rpx;
|
border-radius: 30rpx;
|
line-height: 60rpx;
|
border: 1rpx solid #aaa;
|
margin: 0 0 20rpx 20rpx;
|
}
|
|
.searchGood .line {
|
border-bottom: 1rpx solid #eee;
|
margin: 20rpx 30rpx 0 30rpx;
|
}
|
</style>
|
