|
|
@@ -1,58 +1,62 @@
|
|
|
<template>
|
|
|
- <div class="shop mobile-content">
|
|
|
- <div class="shop-top">
|
|
|
- <p><i class="iconfont icon-dianpu1"></i><span>{{list.totalElements || 0}}</span>家店铺</p>
|
|
|
- <span @click="onClick()">{{downName}} <i class="iconfont icon-arrow-down"></i></span>
|
|
|
- <ul class="supdown" v-if="down">
|
|
|
- <li @click="onDown('ORIGINAL_FACTORY-DISTRIBUTION-AGENCY-CONSIGNMENT')" v-show="downName !== '全部'">全部</li>
|
|
|
- <li @click="onDown('ORIGINAL_FACTORY')" v-show="downName !== '原厂'">原厂</li>
|
|
|
- <li @click="onDown('AGENCY')" v-show="downName !== '代理'">代理</li>
|
|
|
- <li @click="onDown('DISTRIBUTION')" v-show="downName !== '经销'">经销</li>
|
|
|
- <li @click="onDown('CONSIGNMENT')" v-show="downName !== '寄售'">寄售</li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div v-if="searchLists && searchLists.length">
|
|
|
- <div class="shop-list" v-for="item in searchLists" @click="goStoreDetail(item.uuid)">
|
|
|
- <h3>{{item.storeName}}</h3>
|
|
|
- <div class="list-item">
|
|
|
- <div class="item-img">
|
|
|
- <i :style="'background:url(' + isType(item.type) + ')no-repeat 0 0/.65rem .33rem;'"></i>
|
|
|
- <img :src="item.logoUrl || '/images/component/default.png'">
|
|
|
- </div>
|
|
|
- <div class="list-item-phone">
|
|
|
- <p>电话:<span>{{item.enterprise.enTel}}</span></p>
|
|
|
- <p>传真:<span>{{item.enterprise.enFax}}</span></p>
|
|
|
- <!--<p>商家介绍: <nuxt-link :to="'/mobile/merchantDescription/'+item.uuid">点击查看</nuxt-link></p>-->
|
|
|
- <p>联系商家:<a @click="selectStoreInfo(item, $event)">点击查看</a></p>
|
|
|
- <i class="iconfont icon-shoucang" :style="item.isFocus=='true'?'color:#ff7800':'color:#bbb'" @click="focusStore(item, $event)"></i>
|
|
|
+ <div>
|
|
|
+ <search-header @searchAction="onSearch" :placeholder="'可通过型号/品牌/类目/名称查找店铺'"></search-header>
|
|
|
+ <div class="shop mobile-content">
|
|
|
+ <div class="shop-top">
|
|
|
+ <p><i class="iconfont icon-dianpu1"></i><span>{{list.totalElements || 0}}</span>家店铺</p>
|
|
|
+ <span @click="onClick($event)">{{downName}} <i class="iconfont icon-arrow-down"></i></span>
|
|
|
+ <ul class="supdown" v-if="down">
|
|
|
+ <li @click="onDown('ORIGINAL_FACTORY-DISTRIBUTION-AGENCY-CONSIGNMENT', $event)" v-show="downName !== '全部'">全部</li>
|
|
|
+ <li @click="onDown('ORIGINAL_FACTORY', $event)" v-show="downName !== '原厂'">原厂</li>
|
|
|
+ <li @click="onDown('AGENCY', $event)" v-show="downName !== '代理'">代理</li>
|
|
|
+ <li @click="onDown('DISTRIBUTION', $event)" v-show="downName !== '经销'">经销</li>
|
|
|
+ <li @click="onDown('CONSIGNMENT', $event)" v-show="downName !== '寄售'">寄售</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div v-if="searchLists && searchLists.length">
|
|
|
+ <div class="shop-list" v-for="item in searchLists" @click="goStoreDetail(item.uuid)">
|
|
|
+ <h3>{{item.storeName}}</h3>
|
|
|
+ <div class="list-item">
|
|
|
+ <div class="item-img">
|
|
|
+ <i :style="'background:url(' + isType(item.type) + ')no-repeat 0 0/.65rem .33rem;'"></i>
|
|
|
+ <img :src="item.logoUrl || '/images/component/default.png'">
|
|
|
+ </div>
|
|
|
+ <div class="list-item-phone">
|
|
|
+ <p>电话:<span>{{item.enterprise.enTel}}</span></p>
|
|
|
+ <p>传真:<span>{{item.enterprise.enFax}}</span></p>
|
|
|
+ <!--<p>商家介绍: <nuxt-link :to="'/mobile/merchantDescription/'+item.uuid">点击查看</nuxt-link></p>-->
|
|
|
+ <p>联系商家:<a @click="selectStoreInfo(item, $event)">点击查看</a></p>
|
|
|
+ <i class="iconfont icon-shoucang" :style="item.isFocus=='true'?'color:#ff7800':'color:#bbb'" @click="focusStore(item, $event)"></i>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="com-none-state" v-else>
|
|
|
- <img src="/images/mobile/@2x/search-empty.png">
|
|
|
- <p>抱歉,暂无搜索结果</p>
|
|
|
- <nuxt-link to="/">返回首页</nuxt-link>
|
|
|
- </div>
|
|
|
- <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
|
|
|
- <loading v-show="isSearchingMore"></loading>
|
|
|
- <div class="mobile-modal" v-if="showStoreInfo">
|
|
|
- <div class="mobile-modal-box">
|
|
|
- <div class="mobile-modal-header">联系方式<i @click="showStoreInfo = false" class="icon-guanbi iconfont"></i></div>
|
|
|
- <div class="mobile-modal-content">
|
|
|
- <div v-if="checkInfo(enterpriseInfo.enAddress || enterpriseInfo.address)">商家地址:{{enterpriseInfo.enAddress || enterpriseInfo.address}}</div>
|
|
|
- <!--<div class="content-line link-url">在线咨询</div>-->
|
|
|
- <div v-if="checkInfo(enterpriseInfo.enTel)">致电:<a :href="'tel:' + enterpriseInfo.enTel" target="_blank" class="content-line link-url">{{enterpriseInfo.enTel}}</a></div>
|
|
|
- <div v-if="checkInfo(enterpriseInfo.enEmail)">邮件:<a :href="'mailto:' + enterpriseInfo.enEmail" target="_blank" class="content-line link-url">{{enterpriseInfo.enEmail}}</a></div>
|
|
|
+ <div class="com-none-state" v-else>
|
|
|
+ <img src="/images/mobile/@2x/search-empty.png">
|
|
|
+ <p>抱歉,暂无搜索结果</p>
|
|
|
+ <nuxt-link to="/">返回首页</nuxt-link>
|
|
|
+ </div>
|
|
|
+ <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
|
|
|
+ <loading v-show="isSearchingMore"></loading>
|
|
|
+ <div class="mobile-modal" v-if="showStoreInfo">
|
|
|
+ <div class="mobile-modal-box">
|
|
|
+ <div class="mobile-modal-header">联系方式<i @click="showStoreInfo = false" class="icon-guanbi iconfont"></i></div>
|
|
|
+ <div class="mobile-modal-content">
|
|
|
+ <div v-if="checkInfo(enterpriseInfo.enAddress || enterpriseInfo.address)">商家地址:{{enterpriseInfo.enAddress || enterpriseInfo.address}}</div>
|
|
|
+ <!--<div class="content-line link-url">在线咨询</div>-->
|
|
|
+ <div v-if="checkInfo(enterpriseInfo.enTel)">致电:<a :href="'tel:' + enterpriseInfo.enTel" target="_blank" class="content-line link-url">{{enterpriseInfo.enTel}}</a></div>
|
|
|
+ <div v-if="checkInfo(enterpriseInfo.enEmail)">邮件:<a :href="'mailto:' + enterpriseInfo.enEmail" target="_blank" class="content-line link-url">{{enterpriseInfo.enEmail}}</a></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <login-box @onLoginBoxClose="showLoginBox = false" v-if="showLoginBox" :url="url"></login-box>
|
|
|
</div>
|
|
|
- <login-box @onLoginBoxClose="showLoginBox = false" v-if="showLoginBox"></login-box>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {RemindBox, Loading, LoginBox} from '~components/mobile/common'
|
|
|
+ import {SearchHeader} from '~components/mobile/base'
|
|
|
export default {
|
|
|
layout: 'mobileNoHeader',
|
|
|
data () {
|
|
|
@@ -70,28 +74,31 @@
|
|
|
isChange: false,
|
|
|
showStoreInfo: false,
|
|
|
enterpriseInfo: {},
|
|
|
- showLoginBox: false
|
|
|
+ showLoginBox: false,
|
|
|
+ keyword: '',
|
|
|
+ url: ''
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
RemindBox,
|
|
|
Loading,
|
|
|
- LoginBox
|
|
|
- },
|
|
|
- watch: {
|
|
|
- '$route.query.keyword': {
|
|
|
- handler: function (val) {
|
|
|
- this.isChange = true
|
|
|
- this.page = 1
|
|
|
- this.type = 'ORIGINAL_FACTORY-DISTRIBUTION-AGENCY-CONSIGNMENT'
|
|
|
- this.$store.dispatch('provider/findStoreListInMobil', { page: this.page, count: this.count, types: this.types, keyword: this.$route.query.keyword || null })
|
|
|
- },
|
|
|
- immediate: false
|
|
|
- }
|
|
|
+ LoginBox,
|
|
|
+ SearchHeader
|
|
|
},
|
|
|
+// watch: {
|
|
|
+// '$route.query.keyword': {
|
|
|
+// handler: function (val) {
|
|
|
+// this.isChange = true
|
|
|
+// this.page = 1
|
|
|
+// this.type = 'ORIGINAL_FACTORY-DISTRIBUTION-AGENCY-CONSIGNMENT'
|
|
|
+// this.$store.dispatch('provider/findStoreListInMobil', { page: this.page, count: this.count, type: this.types, keyword: this.keyword || null })
|
|
|
+// },
|
|
|
+// immediate: false
|
|
|
+// }
|
|
|
+// },
|
|
|
fetch ({ store, query }) {
|
|
|
return Promise.all([
|
|
|
- store.dispatch('provider/findStoreListInMobil', { page: 1, count: 10, types: 'ORIGINAL_FACTORY-DISTRIBUTION-AGENCY-CONSIGNMENT', keyword: query.keyword || null })
|
|
|
+ store.dispatch('provider/findStoreListInMobil', { page: 1, count: 10, type: 'ORIGINAL_FACTORY-DISTRIBUTION-AGENCY-CONSIGNMENT' })
|
|
|
])
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -120,6 +127,9 @@
|
|
|
window.addEventListener('scroll', function () {
|
|
|
_this.scroll()
|
|
|
}, false)
|
|
|
+ document.body.onclick = () => {
|
|
|
+ this.down = false
|
|
|
+ }
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -133,7 +143,7 @@
|
|
|
if (!this.isSearchingMore) {
|
|
|
this.page++
|
|
|
this.isSearchingMore = true
|
|
|
- this.$store.dispatch('provider/findStoreListInMobil', { page: this.page, count: this.count, types: this.types, keyword: this.$route.query.keyword || null })
|
|
|
+ this.$store.dispatch('provider/findStoreListInMobil', { page: this.page, count: this.count, type: this.types, keyword: this.keyword || null })
|
|
|
}
|
|
|
},
|
|
|
isType (type) {
|
|
|
@@ -149,10 +159,16 @@
|
|
|
}
|
|
|
return bgurl
|
|
|
},
|
|
|
- onClick () {
|
|
|
+ onClick (e) {
|
|
|
+ if (e) {
|
|
|
+ e.stopPropagation()
|
|
|
+ }
|
|
|
this.down = !this.down
|
|
|
},
|
|
|
- onDown (type) {
|
|
|
+ onDown (type, e) {
|
|
|
+ if (e) {
|
|
|
+ e.stopPropagation()
|
|
|
+ }
|
|
|
this.isChange = true
|
|
|
this.down = !this.down
|
|
|
this.types = type
|
|
|
@@ -167,7 +183,7 @@
|
|
|
} else if (type === 'ORIGINAL_FACTORY-DISTRIBUTION-AGENCY-CONSIGNMENT') {
|
|
|
this.downName = '全部'
|
|
|
}
|
|
|
- this.$store.dispatch('provider/findStoreListInMobil', { page: 1, count: 10, types: type, keyword: this.$route.query.keyword || null })
|
|
|
+ this.$store.dispatch('provider/findStoreListInMobil', { page: 1, count: 10, type: type, keyword: this.keyword || null })
|
|
|
},
|
|
|
focusStore: function (item, $event) {
|
|
|
// item.isFocus = item.isFocus === 'false' ? 'true' : 'false'
|
|
|
@@ -189,6 +205,7 @@
|
|
|
})
|
|
|
}
|
|
|
} else {
|
|
|
+ this.url = this.$route.fullPath
|
|
|
this.showLoginBox = true
|
|
|
}
|
|
|
},
|
|
|
@@ -202,6 +219,11 @@
|
|
|
},
|
|
|
checkInfo: function (str) {
|
|
|
return str && str.trim() !== ''
|
|
|
+ },
|
|
|
+ onSearch: function (keyObj) {
|
|
|
+ this.keyword = keyObj.keyword
|
|
|
+ this.onDown('ORIGINAL_FACTORY-DISTRIBUTION-AGENCY-CONSIGNMENT')
|
|
|
+ this.down = false
|
|
|
}
|
|
|
}
|
|
|
}
|