|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <div class="search-content com-mobile-header">
|
|
|
|
|
|
|
+ <div class="search-content com-mobile-header mobile-search-header" :class="expandClass">
|
|
|
<a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
|
|
<a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
|
|
|
<input type="text" v-model="keyword" @input="onKeywordInput()" :placeholder="placeholder" @keyup.13="onSearch()">
|
|
<input type="text" v-model="keyword" @input="onKeywordInput()" :placeholder="placeholder" @keyup.13="onSearch()">
|
|
|
<span @click="onSearch()"><i class="iconfont icon-sousuo"></i></span>
|
|
<span @click="onSearch()"><i class="iconfont icon-sousuo"></i></span>
|
|
@@ -20,15 +20,15 @@
|
|
|
<ul v-if="emptyStatus && type == 'default' && keyword && keyword !== '' && showSimilarWord">
|
|
<ul v-if="emptyStatus && type == 'default' && keyword && keyword !== '' && showSimilarWord">
|
|
|
<template v-if="similarList.brand && similarList.brand.length && (similarType == 'all' || similarType == 'brand')">
|
|
<template v-if="similarList.brand && similarList.brand.length && (similarType == 'all' || similarType == 'brand')">
|
|
|
<li class="title text-ellipse" v-if="similarType == 'all'">品牌</li>
|
|
<li class="title text-ellipse" v-if="similarType == 'all'">品牌</li>
|
|
|
- <li class="text-ellipse" v-for="brand in similarList.brand.slice(0, 4)" @click="onSearch(brand.nameEn, 'brand', $event)">{{brand.nameEn}}</li>
|
|
|
|
|
|
|
+ <li class="text-ellipse" v-for="brand in similarList.brand.slice(0, 8)" @click="onSearch(brand.nameEn, 'brand', $event)">{{brand.nameEn}}</li>
|
|
|
</template>
|
|
</template>
|
|
|
<template v-if="similarList.kind && similarList.kind.length && (similarType == 'all' || similarType == 'kind')">
|
|
<template v-if="similarList.kind && similarList.kind.length && (similarType == 'all' || similarType == 'kind')">
|
|
|
<li class="title text-ellipse" v-if="similarType == 'all'">物料名称</li>
|
|
<li class="title text-ellipse" v-if="similarType == 'all'">物料名称</li>
|
|
|
- <li class="text-ellipse" v-for="kind in similarList.kind.slice(0, 4)" @click="onSearch(kind.nameCn, 'kind', $event)">{{kind.nameCn}}</li>
|
|
|
|
|
|
|
+ <li class="text-ellipse" v-for="kind in similarList.kind.slice(0, 8)" @click="onSearch(kind.nameCn, 'kind', $event)">{{kind.nameCn}}</li>
|
|
|
</template>
|
|
</template>
|
|
|
<template v-if="similarList.component && similarList.component.length && (similarType == 'all' || similarType == 'code')">
|
|
<template v-if="similarList.component && similarList.component.length && (similarType == 'all' || similarType == 'code')">
|
|
|
<li class="title text-ellipse" v-if="similarType == 'all'">型号</li>
|
|
<li class="title text-ellipse" v-if="similarType == 'all'">型号</li>
|
|
|
- <li class="text-ellipse" v-for="code in similarList.component.slice(0, 4)" @click="onSearch(code.code, 'code', $event)">{{code.code}}</li>
|
|
|
|
|
|
|
+ <li class="text-ellipse" v-for="code in similarList.component.slice(0, 8)" @click="onSearch(code.code, 'code', $event)">{{code.code}}</li>
|
|
|
</template>
|
|
</template>
|
|
|
</ul>
|
|
</ul>
|
|
|
</div>
|
|
</div>
|
|
@@ -64,6 +64,10 @@
|
|
|
useMatchRule: { // 使用既定的匹配规则
|
|
useMatchRule: { // 使用既定的匹配规则
|
|
|
type: Boolean,
|
|
type: Boolean,
|
|
|
default: true
|
|
default: true
|
|
|
|
|
+ },
|
|
|
|
|
+ expandClass: {
|
|
|
|
|
+ type: String,
|
|
|
|
|
+ default: ''
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
data () {
|
|
data () {
|
|
@@ -196,34 +200,53 @@
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
- .search-content {
|
|
|
|
|
- color: #333;
|
|
|
|
|
- input {
|
|
|
|
|
- margin: 0 0 0 .5rem;
|
|
|
|
|
- line-height: normal;
|
|
|
|
|
- }
|
|
|
|
|
- ul {
|
|
|
|
|
- width: 6.48rem;
|
|
|
|
|
- background: #fff;
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- left: .6rem;
|
|
|
|
|
- top: .72rem;
|
|
|
|
|
- border: 1px solid #ccc;
|
|
|
|
|
- border-radius: .05rem;
|
|
|
|
|
- max-height: 4.5rem;
|
|
|
|
|
- overflow-y: auto;
|
|
|
|
|
- li {
|
|
|
|
|
- height: .6rem;
|
|
|
|
|
- line-height: .6rem;
|
|
|
|
|
- padding: 0 .1rem;
|
|
|
|
|
- font-size: .26rem;
|
|
|
|
|
- &.title {
|
|
|
|
|
- color: #666;
|
|
|
|
|
- border-bottom: 1px solid #ddd;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- background: #f6f5f5;
|
|
|
|
|
|
|
+ .mobile-search-header {
|
|
|
|
|
+ &.search-content {
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ input {
|
|
|
|
|
+ margin: 0 0 0 .5rem;
|
|
|
|
|
+ line-height: normal;
|
|
|
|
|
+ }
|
|
|
|
|
+ ul {
|
|
|
|
|
+ width: 6.48rem;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: .6rem;
|
|
|
|
|
+ top: .72rem;
|
|
|
|
|
+ border: 1px solid #ccc;
|
|
|
|
|
+ border-radius: .05rem;
|
|
|
|
|
+ max-height: 4.9rem;
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+ li {
|
|
|
|
|
+ height: .6rem;
|
|
|
|
|
+ line-height: .6rem;
|
|
|
|
|
+ padding: 0 .1rem;
|
|
|
|
|
+ font-size: .26rem;
|
|
|
|
|
+ &.title {
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ border-bottom: 1px solid #ddd;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ background: #f6f5f5;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+ &.normal {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ background: #f1f3f6;
|
|
|
|
|
+ z-index: 1;
|
|
|
|
|
+ input {
|
|
|
|
|
+ border: 1px solid #3f84f6;
|
|
|
|
|
+ width: 7.1rem;
|
|
|
|
|
+ margin: 0 0 0 .1rem;
|
|
|
|
|
+ }
|
|
|
|
|
+ > a {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ }
|
|
|
|
|
+ ul {
|
|
|
|
|
+ width: 7.1rem;
|
|
|
|
|
+ left: .19rem;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|