|
|
@@ -1,7 +1,33 @@
|
|
|
<template>
|
|
|
<div class="home">
|
|
|
<div v-if="!showMainSearch">
|
|
|
+ <ul class="associate-list" v-show="associate.show" @click="associate.show = false">
|
|
|
+ <li @click.stop="onAssociateClick(similar)" v-for="similar in similarKeywords.result">
|
|
|
+ <i class="icon-sousuo iconfont"></i>
|
|
|
+ <span>{{Getsimilar(similar)}}</span>
|
|
|
+ <!--<span v-if="ChooseTop === 'component'">{{similar.code}}</span>-->
|
|
|
+ <!--<span v-else-if="ChooseTop === 'product'">{{similar}}</span>-->
|
|
|
+ <!--<span v-else-if="ChooseTop === 'store'">{{similar}}</span>-->
|
|
|
+ <!--<span v-else-if="ChooseTop === 'brand'">{{similar.nameEn}}</span>-->
|
|
|
+ </li>
|
|
|
+ <li @click.stop="onSearch(keyword)">查找“{{baseUtils.filterStringEllipsis(keyword, 30)}}”</li>
|
|
|
+ </ul>
|
|
|
<div class="header">
|
|
|
+ <div class="search-content" @touchmove="preventTouchMove($event)">
|
|
|
+ <div class="main-search-header-controll clearfix">
|
|
|
+ <div style="display: flex;align-items: center;justify-content: space-between;width:100%;">
|
|
|
+ <div :class="ChooseTop === 'component' ? 'active' : ''" @click="setChangelistHander('component')"><a>型号</a></div>
|
|
|
+ <div :class="ChooseTop === 'kind' ? 'active' : ''" @click="setChangelistHander('kind')"><a>物料名称</a></div>
|
|
|
+ <div :class="ChooseTop === 'store' ? 'active' : ''" @click="setChangelistHander('store')"><a>卖家</a></div>
|
|
|
+ <div :class="ChooseTop === 'brand' ? 'active' : ''" @click="setChangelistHander('brand')"><a>品牌</a></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <input type="text" v-model="keyword" id="search-box" @keyup.13="onSearch()" :placeholder="placeholder">
|
|
|
+ <span @click="onSearch()">
|
|
|
+ <i class="iconfont icon-sousuo"></i>
|
|
|
+ </span>
|
|
|
+ <img src="/images/mobile/@2x/applyPurchase/home/phone.png" alt="" @click="showStoreInfo = true">
|
|
|
+ </div>
|
|
|
<div v-swiper:mySwiper="swiperOption">
|
|
|
<div class="swiper-wrapper">
|
|
|
<div class="swiper-slide">
|
|
|
@@ -16,13 +42,6 @@
|
|
|
</div>
|
|
|
<div class="swiper-pagination swiper-pagination-bullets"></div>
|
|
|
</div>
|
|
|
- <div class="search-content">
|
|
|
- <input type="text" placeholder="请输入您要查找的型号、品牌或店铺" @click="onHomeSearchClick()">
|
|
|
- <span>
|
|
|
- <i class="iconfont icon-sousuo"></i>
|
|
|
- </span>
|
|
|
- <img src="/images/mobile/@2x/applyPurchase/home/phone.png" alt="" @click="showStoreInfo = true">
|
|
|
- </div>
|
|
|
</div>
|
|
|
<ul class="link-list">
|
|
|
<li>
|
|
|
@@ -113,7 +132,12 @@
|
|
|
isChange: false,
|
|
|
isDataChange: false,
|
|
|
url: '',
|
|
|
- isValid: true
|
|
|
+ isValid: true,
|
|
|
+ ChooseTop: 'component',
|
|
|
+ keyword: '',
|
|
|
+ associate: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
@@ -147,6 +171,12 @@
|
|
|
}
|
|
|
},
|
|
|
immediate: true
|
|
|
+ },
|
|
|
+ 'keyword': function (val, oldVal) {
|
|
|
+ let keywords = this.similarKeywords.data
|
|
|
+ if (!keywords || !keywords.length) {
|
|
|
+ this.onChange()
|
|
|
+ }
|
|
|
}
|
|
|
// $route: {
|
|
|
// handler: function (val) {
|
|
|
@@ -155,6 +185,20 @@
|
|
|
// }
|
|
|
},
|
|
|
computed: {
|
|
|
+ similarKeywords () {
|
|
|
+ return this.$store.state.search.keywords.data
|
|
|
+ },
|
|
|
+ placeholder() {
|
|
|
+ if (this.ChooseTop === 'component') {
|
|
|
+ return '请输入您要搜索的型号'
|
|
|
+ } else if (this.ChooseTop === 'kind') {
|
|
|
+ return '请输入您要搜索的物料名称'
|
|
|
+ } else if (this.ChooseTop === 'store') {
|
|
|
+ return '请输入您要搜索的卖家名称'
|
|
|
+ } else if (this.ChooseTop === 'brand') {
|
|
|
+ return '请输入您要搜索的品牌'
|
|
|
+ }
|
|
|
+ },
|
|
|
purchaseManList () {
|
|
|
return this.$store.state.applyPurchase.purchaseManList.purchaseHomeList.data
|
|
|
},
|
|
|
@@ -166,6 +210,58 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ onSearch (item) {
|
|
|
+ if (item) {
|
|
|
+ this.keyword = item
|
|
|
+ }
|
|
|
+ if (this.keyword) {
|
|
|
+ this.$router.push(`/mobile/search/newkeycode?choosetype=${this.ChooseTop}&keyword=${encodeURIComponent(this.keyword)}`)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onChange () {
|
|
|
+ if (!this.keyword) {
|
|
|
+ this.associate.show = false
|
|
|
+ this.$store.dispatch('resetSearchKeywords')
|
|
|
+ } else {
|
|
|
+ this.searchKeywords()
|
|
|
+ }
|
|
|
+ if (this.click_flag) {
|
|
|
+ this.associate.show = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setChangelistHander(str) {
|
|
|
+ this.ChooseTop = str
|
|
|
+ if (!this.keyword) return
|
|
|
+ this.$store.dispatch('searchKeywords', {keyword: this.keyword, type: this.ChooseTop})
|
|
|
+ this.associate.show = true
|
|
|
+ },
|
|
|
+ searchKeywords () {
|
|
|
+ this.$store.dispatch('searchKeywords', {keyword: this.keyword, type: this.ChooseTop})
|
|
|
+ this.associate.show = true
|
|
|
+ },
|
|
|
+ onAssociateClick (word) {
|
|
|
+ if (this.ChooseTop === 'component') {
|
|
|
+ this.keyword = word.code
|
|
|
+ } else if (this.ChooseTop === 'kind') {
|
|
|
+ this.keyword = word.nameCn
|
|
|
+ } else if (this.ChooseTop === 'store') {
|
|
|
+ this.keyword = word.name
|
|
|
+ } else if (this.ChooseTop === 'brand') {
|
|
|
+ this.keyword = word.nameEn
|
|
|
+ }
|
|
|
+ this.onSearch()
|
|
|
+ },
|
|
|
+ Getsimilar(word) {
|
|
|
+ if (this.ChooseTop === 'component') {
|
|
|
+ return word.code
|
|
|
+ } else if (this.ChooseTop === 'kind') {
|
|
|
+ return word.nameCn
|
|
|
+ } else if (this.ChooseTop === 'store') {
|
|
|
+ return word.name
|
|
|
+ } else if (this.ChooseTop === 'brand') {
|
|
|
+ return word.nameEn
|
|
|
+ }
|
|
|
+ },
|
|
|
// scroll: function () {
|
|
|
// let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
|
|
|
// if (Math.ceil(scrolled + window.screen.availHeight) >= document.body.scrollHeight && !this.isSearchSearchingMore && this.page < this.allPage) {
|
|
|
@@ -224,28 +320,118 @@
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
+ @mixin overFlowHidden {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ @mixin lineHeight($value) {
|
|
|
+ height: $value;
|
|
|
+ line-height: $value;
|
|
|
+ }
|
|
|
@import '~assets/scss/mobileCommon';
|
|
|
+ .swiper-slide1 {
|
|
|
+ background: url('/images/mobile/@2x/applyPurchase/home/app-banner_01.jpg');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
.home {
|
|
|
padding-bottom: 1rem;
|
|
|
background: #f3f3f7;
|
|
|
- .header {
|
|
|
- height: 3.26rem;
|
|
|
- position: relative;
|
|
|
- .home-bg {
|
|
|
- height: 3.26rem;
|
|
|
- width: 100%;
|
|
|
+ .search-content {
|
|
|
+ padding: 0.15rem 0;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 11;
|
|
|
+ width: 100%;
|
|
|
+ input {
|
|
|
+ margin-top: -0.02rem;
|
|
|
+ outline: 0;
|
|
|
+ border: 0;
|
|
|
}
|
|
|
- .search-content {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
+ }
|
|
|
+ .main-search-header-controll {
|
|
|
+ width: 5.48rem;
|
|
|
+ margin-left: 0.21rem;
|
|
|
+ transform: translateY(1px);
|
|
|
+ div {
|
|
|
+ div {
|
|
|
+ font-size: 0.28rem;
|
|
|
+ color: #fff;
|
|
|
+ margin: 0;
|
|
|
+ border-radius: 0;
|
|
|
+ padding: 0.1rem 0.1rem;
|
|
|
+ a {
|
|
|
+ font-size: .26rem;
|
|
|
+ color: #f1f1f1;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ background: #fff;
|
|
|
+ border-top-left-radius: 0.05rem;
|
|
|
+ border-top-right-radius: 0.05rem;
|
|
|
+ }
|
|
|
+ &.active a {
|
|
|
+ color: #40b6fc;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+ .associate-list {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ top: 1.25rem;
|
|
|
+ border: 1px solid #dcdcdc;
|
|
|
+ z-index: 100;
|
|
|
+ height: 100%;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ overflow-y: auto;
|
|
|
+ li {
|
|
|
+ height: 0.7rem;
|
|
|
+ line-height: .9rem;
|
|
|
+ margin: 0 .45rem;
|
|
|
+ border-bottom: .04rem solid #f1f0f0;
|
|
|
+ @include overFlowHidden();
|
|
|
+ i {
|
|
|
+ font-size: .36rem;
|
|
|
+ margin-right: .24rem;
|
|
|
+ color: #ddd;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: #999;
|
|
|
+ font-size: .28rem;
|
|
|
+ line-height: .58rem;
|
|
|
+ height: .58rem;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ &:active, &:hover {
|
|
|
+ background: #eee;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ text-align: center;
|
|
|
+ font-size: .3rem;
|
|
|
+ color: #3976f4;
|
|
|
+ border-bottom: none;
|
|
|
+ &:active, &:hover {
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .header {
|
|
|
+ position: relative;
|
|
|
+ height: 4.08rem;
|
|
|
+ overflow: hidden;
|
|
|
.swiper-container {
|
|
|
- height: 3.26rem;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
width: 100%;
|
|
|
z-index: 0;
|
|
|
+ height: 4.08rem;
|
|
|
+ overflow: hidden;
|
|
|
+ img {
|
|
|
+ max-width: 100%;
|
|
|
+ /*height: 4.08rem;*/
|
|
|
+ }
|
|
|
}
|
|
|
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
|
|
|
bottom: .1rem !important;
|
shenjj
