<template>
<view>
<view class="searchGood">
<u-list @scrolltolower="scrolltolower">
<view class="">
<view style="padding: 3px 10px;box-sizing: border-box;">
<u-search placeholder="模糊搜索:商品名|拼音|货号|厂家" borderColor="#ccc" v-model="search" height="35"
@search="toSearch()" @custom="toSearch()" @change="change"></u-search>
</view>
<!-- <view style="padding: 20px;">
<u--form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="100px">
<u-form-item label="产品名称" prop="storeName" borderBottom>
<u--input v-model="form.storeName" shape="circle" placeholder="产品名称"
@confirm="toSearch()"></u--input>
</u-form-item>
<u-form-item label="拼音" prop="pinyin" borderBottom>
<u--input v-model="form.pinyin" shape="circle" placeholder="商品名拼音简写字母"
@confirm="toSearch()"></u--input>
</u-form-item>
<u-form-item label="厂家" prop="factoryName" borderBottom>
<u--input v-model="form.factoryName" shape="circle" placeholder="厂家"
@confirm="toSearch()"></u--input>
</u-form-item>
<u-form-item label="货号" prop="goodsNo" borderBottom>
<u--input v-model="form.goodsNo" shape="circle" placeholder="货号" @confirm="toSearch()">
</u--input>
</u-form-item>
</u--form>
<u-button type="primary" @click="toSearch()">确认</u-button>
</view> -->
<view v-if="keywords.length">
<view class="title">热门搜索</view>
<view class="list acea-row" style="padding: 15px;">
<u-tag v-for="(keyword ,idx) in keywords" plain :text="keyworde(keyword)" type="warning"
closable @click="addObjSearch(keyword)" @close="closeTag(idx)">
<!-- <text slot="text">cds </text> -->
</u-tag>
</view>
</view>
</view>
<u-list-item v-for="(item, index) in keywordObj" :key="index">
<u-cell :title="item.keyword" @click="addObjSearch(item)">->
</u-cell>
</u-list-item>
</u-list>
<view class="line"></view>
</view>
</view>
</template>
<script>
import {
getSearchKeyword,
getkeywords
} from "@/api/store";
import {
trim
} from "@/utils";
import localStorage from "@/utils/store/localStorage.js";
export default {
name: "GoodSearch",
components: {},
props: {},
computed: {
keywordObj() {
var obj = {}
this.keywordList.filter(res => {
obj[res.keyword] = res
})
return obj
}
},
data: function() {
return {
sm: 1,
isInput: false,
m: 0,
keywordList: [],
keywords: [],
search: "",
cacheKey: "goodsSearchKeywords",
showSex: false,
form: {
factoryName: "",
goodsNo: "",
pinyin: "",
storeName: ""
},
rules: {
},
radio: '',
switchVal: false
};
},
onLoad: function(e) {
if (e.keyword) {
this.search = e.keyword
}
// console.log(e)
},
onShow: function() {
this.getData();
},
methods: {
keyworde(keyword) {
// console.log(keyword)
var val = ""
for (var k in keyword) {
val = val + " " + keyword[k]
}
if (val.length > 20) {
val = val.slice(0, 16) + "..."
}
return val
},
change(e) {
this.isInput = true
// var that = this
this.m = 0
var that = this
// var m =this.m
clearInterval(this.sm)
this.sm = setInterval(() => {
that.m = that.m + 1
if (that.m == 6 && that.isInput) {
that.isInput = false
clearInterval(that.sm)
that.getList()
}
// console.log(that.m)
}, 100)
},
getList() {
// console.log("触发")
if (this.search) {
getkeywords({
keyword: this.search
}).then(res => {
this.keywordList = res.data
// console.log(res)
})
}
},
scrolltolower(e) {
console.log(e)
},
closeTag(idx) {
this.keywords = this.keywords.filter((item, index) => {
if (idx != index) {
return item
}
})
this.restCache(this.keywords)
},
restCache(value) {
localStorage.set(this.cacheKey, value)
},
addSearch(search) {
this.search = search;
this.toSearch();
},
addObjSearch(obj) {
// console.log(obj)
var form = {}
for (var k in obj) {
if (k == "keyword" || k == "storeName") {
this.search = obj[k]
form.storeName = obj[k]
}else if (k == "keyword") {
this.search == obj[k]
}
// if (k == "factoryName") {
// form[k]=obj[k]
// }
// if (k == "pinyin") {
// form[k]=obj[k]
// }
// if (k == "goodsNo") {
// form[k]=obj[k]
// }
}
this.form = form
this.toSearch();
},
addCache(val) {
var has = this.keywords.find(e => {
if (JSON.stringify(e) == JSON.stringify(val) || e.s == val.storeName) {
return true
}
})
// console.log(has)
if (!has) {
this.keywords.push(val)
this.restCache(this.keywords)
}
},
hasParams() {
var obj = this.form
for (var k in obj) {
if (obj[k]) {
return true
}
}
return false
},
toSearch() {
var form = this.form
if (!this.hasParams()) {
if (!this.search) {
return
}
form.s = this.search
} else {
form.s = ""
}
// console.log(form)
this.addCache(form)
this.$yrouter.replace({
path: "/pages/shop/GoodsList/index",
query: form
});
},
getData() {
var data = localStorage.get(this.cacheKey)
// console.log(data)
if (typeof data != "object") {
data = []
}
if (data) {
this.keywords = data
this.restCache(this.keywords)
} else {
getSearchKeyword().then(res => {
this.keywords = res.data;
this.restCache(this.keywords)
});
}
}
}
};
</script>
<style>
.noCommodity {
border-top: 0.05*100rpx solid #f5f5f5;
}
</style>
网友评论