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.
286 lines
8.7 KiB
286 lines
8.7 KiB
<template>
|
|
<view class="container">
|
|
<block v-if="isload">
|
|
<view class="search-container" :style="history_show?'height:100%;':''">
|
|
<view class="topsearch flex-y-center">
|
|
<view class="f1 flex-y-center">
|
|
<text class="iconfont icon-search"></text>
|
|
<input :value="keyword" placeholder="商品搜索..." placeholder-style="font-size:24rpx;color:#FFFFFF" @confirm="searchConfirm" @input="searchChange" />
|
|
</view>
|
|
<view class="search-btn" @tap="searchbtn">
|
|
<text class="iconfont icon-pailie" v-if="!history_show && productlisttype=='itemlist'"></text>
|
|
<text class="iconfont icon-shipailie" v-if="!history_show && productlisttype=='item2'"></text>
|
|
<text v-if="history_show">搜索</text>
|
|
</view>
|
|
</view>
|
|
<view class="search-history" v-show="history_show">
|
|
<view>
|
|
<text class="search-history-title">最近搜索</text>
|
|
<view class="delete-search-history" @tap="deleteSearchHistory">
|
|
<image :src="event_rul +'/static/img/static/img/del.png'" style="width:36rpx;height:36rpx"/>
|
|
</view>
|
|
</view>
|
|
<view class="search-history-list">
|
|
<view v-for="(item, index) in history_list" :key="index" class="search-history-item" :data-value="item" @tap="historyClick">{{item}}
|
|
</view>
|
|
<view v-if="!history_list || history_list.length==0" class="flex-y-center"><image :src="event_rul +'/static/img/static/img/tanhao.png'" style="width:36rpx;height:36rpx;margin-right:10rpx"/>暂无记录 </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="product-container">
|
|
<block v-if="datalist && datalist.length>0">
|
|
<dp-yuyue-item v-if="productlisttype=='item2'" :data="datalist"></dp-yuyue-item>
|
|
<dp-yuyue-itemlist v-if="productlisttype=='itemlist'" :data="datalist"></dp-yuyue-itemlist>
|
|
</block>
|
|
<nomore text="没有更多商品了" v-if="nomore"></nomore>
|
|
<nodata text="没有查找到相关商品" v-if="nodata"></nodata>
|
|
<loading v-if="loading"></loading>
|
|
</view>
|
|
</block>
|
|
<loading v-if="loading"></loading>
|
|
<dp-tabbar :opt="opt"></dp-tabbar>
|
|
<popmsg ref="popmsg"></popmsg>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var app = getApp();
|
|
export default {
|
|
data() {
|
|
return {
|
|
opt:{},
|
|
loading:false,
|
|
isload: true,
|
|
menuindex:-1,
|
|
|
|
nomore:false,
|
|
nodata:false,
|
|
keyword: '',
|
|
pagenum: 1,
|
|
datalist: [],
|
|
history_list: [],
|
|
history_show: true,
|
|
order: '',
|
|
field:'',
|
|
oldcid: "",
|
|
catchecid: "",
|
|
catchegid: "",
|
|
cid: "",
|
|
gid: '',
|
|
clist: [],
|
|
glist: [],
|
|
productlisttype: 'item2',
|
|
showfilter: "",
|
|
cpid:0,
|
|
|
|
event_rul: app.globalData.event_url,
|
|
};
|
|
},
|
|
onLoad: function (opt) {
|
|
this.opt = app.getopts(opt);
|
|
this.oldcid = this.opt.cid || '';
|
|
this.catchecid = this.opt.cid;
|
|
this.cid = this.opt.cid;
|
|
this.gid = this.opt.gid;
|
|
this.cpid = this.opt.cpid || 0;
|
|
this.keyword = this.opt.keyword || '';
|
|
if(this.cpid > 0){
|
|
uni.setNavigationBarTitle({
|
|
title: '可用商品列表'
|
|
});
|
|
}
|
|
var productlisttype = app.getCache('productlisttype');
|
|
if (productlisttype) this.productlisttype = productlisttype;
|
|
this.history_list = app.getCache('search_history_list');
|
|
this.getdata();
|
|
},
|
|
onPullDownRefresh: function () {
|
|
this.getdata();
|
|
},
|
|
onReachBottom: function () {
|
|
if (!this.nodata && !this.nomore) {
|
|
this.pagenum = this.pagenum + 1;
|
|
this.getprolist();
|
|
}
|
|
},
|
|
methods: {
|
|
getdata:function(){
|
|
var that = this;
|
|
that.pagenum = 1;
|
|
that.datalist = [];
|
|
var cid = that.opt.cid;
|
|
var gid = that.opt.gid;
|
|
app.get('ApiYuyue/prolist', {cid: cid,gid: gid}, function (res) {
|
|
that.clist = res.clist;
|
|
that.glist = res.glist;
|
|
that.loaded();
|
|
console.log(that.keyword)
|
|
if(that.keyword){
|
|
//that.getprolist();
|
|
}
|
|
});
|
|
},
|
|
getprolist: function () {
|
|
var that = this;
|
|
var pagenum = that.pagenum;
|
|
var keyword = that.keyword;
|
|
var order = that.order;
|
|
var field = that.field;
|
|
var gid = that.gid;
|
|
var cid = that.cid;
|
|
var cpid = that.cpid;
|
|
that.history_show = false;
|
|
that.loading = true;
|
|
that.nodata = false;
|
|
that.nomore = false;
|
|
app.post('ApiYuyue/getprolist',{pagenum: pagenum,keyword: keyword,field: field,order: order,gid: gid,cid: cid,cpid:cpid}, function (res) {
|
|
that.loading = false;
|
|
var data = res.data;
|
|
if (pagenum == 1) {
|
|
that.datalist = data;
|
|
if (data.length == 0) {
|
|
that.nodata = true;
|
|
}
|
|
}else{
|
|
if (data.length == 0) {
|
|
that.nomore = true;
|
|
} else {
|
|
var datalist = that.datalist;
|
|
var newdata = datalist.concat(data);
|
|
that.datalist = newdata;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 打开窗口
|
|
showDrawer(e) {
|
|
console.log(e)
|
|
this.$refs[e].open()
|
|
},
|
|
// 关闭窗口
|
|
closeDrawer(e) {
|
|
this.$refs[e].close()
|
|
},
|
|
// 抽屉状态发生变化触发
|
|
change(e, type) {
|
|
console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
|
|
this[type] = e
|
|
},
|
|
searchChange: function (e) {
|
|
this.keyword = e.detail.value;
|
|
if (e.detail.value == '') {
|
|
this.history_show = true;
|
|
this.datalist = [];
|
|
}
|
|
},
|
|
searchbtn: function () {
|
|
var that = this;
|
|
if (that.history_show) {
|
|
var keyword = that.keyword;
|
|
that.searchproduct();
|
|
} else {
|
|
if (that.productlisttype == 'itemlist') {
|
|
that.productlisttype = 'item2';
|
|
app.setCache('productlisttype', 'item2');
|
|
} else {
|
|
that.productlisttype = 'itemlist';
|
|
app.setCache('productlisttype', 'itemlist');
|
|
}
|
|
}
|
|
},
|
|
searchConfirm: function (e) {
|
|
var that = this;
|
|
var keyword = e.detail.value;
|
|
that.keyword = keyword
|
|
that.searchproduct();
|
|
},
|
|
searchproduct: function () {
|
|
var that = this;
|
|
that.pagenum = 1;
|
|
that.datalist = [];
|
|
that.addHistory();
|
|
that.getprolist();
|
|
},
|
|
sortClick: function (e) {
|
|
var that = this;
|
|
var t = e.currentTarget.dataset;
|
|
that.field = t.field;
|
|
that.order = t.order;
|
|
that.searchproduct();
|
|
},
|
|
groupClick: function (e) {
|
|
var that = this;
|
|
var gid = e.currentTarget.dataset.gid;
|
|
if(gid === true) gid = '';
|
|
that.catchegid = gid
|
|
},
|
|
cateClick: function (e) {
|
|
var that = this;
|
|
var cid = e.currentTarget.dataset.cid;
|
|
if(cid === true) cid = '';
|
|
that.catchecid = cid
|
|
},
|
|
filterConfirm(){
|
|
this.cid = this.catchecid;
|
|
this.gid = this.catchegid;
|
|
this.searchproduct();
|
|
this.$refs['showRight'].close()
|
|
},
|
|
filterReset(){
|
|
this.catchecid = this.oldcid;
|
|
this.catchegid = '';
|
|
},
|
|
filterClick: function () {
|
|
this.showfilter = !this.showfilter
|
|
},
|
|
addHistory: function () {
|
|
var that = this;
|
|
var keyword = that.keyword;
|
|
if (app.isNull(keyword)) return;
|
|
var historylist = app.getCache('search_history_list');
|
|
if (app.isNull(historylist)) historylist = [];
|
|
historylist.unshift(keyword);
|
|
var newhistorylist = [];
|
|
for (var i in historylist) {
|
|
if (historylist[i] != keyword || i == 0) {
|
|
newhistorylist.push(historylist[i]);
|
|
}
|
|
}
|
|
if (newhistorylist.length > 5) newhistorylist.splice(5, 1);
|
|
app.setCache('search_history_list', newhistorylist);
|
|
that.history_list = newhistorylist
|
|
},
|
|
historyClick: function (e){
|
|
var that = this;
|
|
var keyword = e.currentTarget.dataset.value;
|
|
if (keyword.length == 0) return;
|
|
that.keyword = keyword;
|
|
that.searchproduct();
|
|
},
|
|
deleteSearchHistory: function () {
|
|
var that = this;
|
|
that.history_list = null;
|
|
app.removeCache("search_history_list");
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.container {background: #F5F5F5;height: 100vh;}
|
|
.search-container {position: fixed;width: 100%;z-index:9;top:var(--window-top);background: #0A5D3B;}
|
|
.topsearch{width:100%;padding:16rpx 20rpx;}
|
|
.topsearch .f1{height: 80rpx;border-radius: 40rpx;border: 0;background: rgba(255,255,255,.3);flex:1;padding: 0 28rpx;}
|
|
.topsearch .f1 .icon-search{font-size: 40rpx;margin-right: 16rpx;color:#FFFFFF;}
|
|
.topsearch .f1 input{height: 100%;flex: 1;font-size: 28rpx;color:#FFFFFF;}
|
|
.topsearch .search-btn{
|
|
display:flex;align-items:center;color:#FFFFFF;text-align:center;margin-left:20rpx;
|
|
.iconfont {font-size:40rpx;}
|
|
}
|
|
.search-history {padding: 24rpx 34rpx;}
|
|
.search-history .search-history-title {color: #666;}
|
|
.search-history .delete-search-history {float: right;padding: 15rpx 20rpx;margin-top: -15rpx;}
|
|
.search-history-list {padding: 24rpx 0 0 0;}
|
|
.search-history-list .search-history-item {display: inline-block;height: 50rpx;line-height: 50rpx;padding: 0 20rpx;margin: 0 10rpx 10rpx 0;background: #ddd;border-radius: 10rpx;font-size: 26rpx;}
|
|
|
|
.product-container {width: 100%;font-size:26rpx;padding:145rpx 24rpx 0;}
|
|
</style>
|