|
|
@@ -6,14 +6,19 @@
|
|
|
<p class="en-name"><img :src="`/images/mobile/center/${user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}</p>
|
|
|
</div>
|
|
|
<div class="mobile-content">
|
|
|
- <div v-if="storeList.length" class="shop-list" v-bind:key="item.id" v-for="item in storeList" @click="goStoreDetail(item.storeInfo.uuid)">
|
|
|
+ <search-header :expandClass="'outClass'" @searchAction="onSearch" :useMatchRule="false" :outerKeyword="keyword" :placeholder="'店铺名/品牌/物料名称/型号'"></search-header>
|
|
|
+ <div v-if="storeList.content.length" class="shop-list" v-bind:key="item.id" v-for="item in storeList.content" @click.prevent="goStoreDetail(item.uuid || item.storeInfo.uuid)">
|
|
|
<h3>{{item.storeName}}</h3>
|
|
|
<div class="list-item">
|
|
|
- <div class="item-img">
|
|
|
- <img :src="getBackground(item.storeInfo.type)" />
|
|
|
+ <div class="item-img" v-if="item.storeInfo">
|
|
|
+ <img :src="getBackground(item.storeInfo && item.storeInfo.type)" />
|
|
|
<img :src="item.storeInfo.logoUrl || '/images/component/default.png'">
|
|
|
</div>
|
|
|
- <div class="list-item-phone">
|
|
|
+ <div class="item-img" v-else>
|
|
|
+ <img :src="getBackground(item.item)" />
|
|
|
+ <img :src="item.logoUrl || '/images/component/default.png'">
|
|
|
+ </div>
|
|
|
+ <div class="list-item-phone" v-if="item.storeInfo">
|
|
|
<!--电话：<a :href="'tel:' + item.enterprise.enTel" >{{item.enterprise.enTel}}</a>-->
|
|
|
<p @click.stop="" v-if="item.storeInfo.enterprise.enTel">电话：<a :href="'tel:' + item.storeInfo.enterprise.enTel" >{{item.storeInfo.enterprise.enTel}}</a></p>
|
|
|
<p v-else>电话：<span>{{item.storeInfo.enterprise.enTel || '-'}}</span></p>
|
|
|
@@ -21,11 +26,30 @@
|
|
|
<p v-else>手机：<span>{{item.storeInfo.enterprise.enPhone || '-'}}</span></p>
|
|
|
<p>传真：<span>{{item.storeInfo.enterprise.enFax || '-'}}</span></p>
|
|
|
<!--<p>联系商家：<a @click="selectStoreInfo(item, $event)">点击查看</a></p>-->
|
|
|
- <i class="iconfont icon-shoucang" @click="cancelFocus(item, $event)"></i>
|
|
|
+ <!--<i class="iconfont icon-shoucang" @click.stop="cancelFocus(item, $event)" style="color:#2d8cf0">-->
|
|
|
+ <span @click.stop="cancelFocus(item, $event)">
|
|
|
+ <i class="iconfont icon-shoucang1" style="color:#2d8cf0"></i>
|
|
|
+ <span class="focus">已关注</span>
|
|
|
+ </span>
|
|
|
+ <!--</i>-->
|
|
|
+ </div>
|
|
|
+ <div class="list-item-phone" v-else>
|
|
|
+ <!--电话：<a :href="'tel:' + item.enterprise.enTel" >{{item.enterprise.enTel}}</a>-->
|
|
|
+ <p @click.stop="" v-if="item.enterprise.enTel">电话：<a :href="'tel:' + item.enterprise.enTel" >{{item.enterprise.enTel}}</a></p>
|
|
|
+ <p v-else>电话：<span>{{item.enterprise.enTel || '-'}}</span></p>
|
|
|
+ <p @click.stop="" v-if="item.enterprise.enPhone">手机：<a :href="'tel:' + item.enterprise.enPhone" >{{item.enterprise.enPhone}}</a></p>
|
|
|
+ <p v-else>手机：<span>{{item.enterprise.enPhone || '-'}}</span></p>
|
|
|
+ <p>传真：<span>{{item.enterprise.enFax || '-'}}</span></p>
|
|
|
+ <!--<p>联系商家：<a @click="selectStoreInfo(item, $event)">点击查看</a></p>-->
|
|
|
+ <span @click.stop="cancelFocus(item, $event, 'choose')">
|
|
|
+ <i class="iconfont icon-shoucang1" :class="item.isFocus == 'true' ? 'icon-shoucang1' : 'icon-shoucang2'" :style="item.isFocus === 'true'?'color:#2d8cf0':''"></i>
|
|
|
+ <span class="focus" v-text="item.isFocus == 'true' ? '已关注' : '未关注'" :class="item.isFocus == 'true' ? '' : 'right01'" >已关注</span>
|
|
|
+ </span>
|
|
|
+ <!--<i class="iconfont icon-shoucang" :style="item.isFocus === 'true'?'color:#2d8cf0':'color:#bbb'"></i>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <empty-status v-if="!storeList.length" :type="'collect'" :showLink="true" :text="'抱歉，暂无店铺关注'"></empty-status>
|
|
|
+ <empty-status v-if="!storeList.content.length" :type="'collect'" :showLink="true" :text="'抱歉，暂无店铺关注'"></empty-status>
|
|
|
</div>
|
|
|
<div class="mobile-modal" v-if="showStoreInfo" @touchmove="preventTouchMove($event)">
|
|
|
<div class="mobile-modal-box mobile-link-en">
|
|
|
@@ -44,7 +68,9 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+ import {SearchHeader} from '~components/mobile/base'
|
|
|
import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
|
|
|
+ import axios from '~plugins/axios'
|
|
|
export default {
|
|
|
middleware: 'authenticated',
|
|
|
layout: 'mobileNoHeader',
|
|
|
@@ -57,63 +83,124 @@
|
|
|
isChange: false,
|
|
|
storeList: [],
|
|
|
showStoreInfo: false,
|
|
|
- storeInfo: {}
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- 'storeCollectList.data': {
|
|
|
- handler: function (val) {
|
|
|
- if (this.isChange) {
|
|
|
- this.storeList = val.content
|
|
|
- this.isChange = false
|
|
|
- } else {
|
|
|
- this.storeList = [...this.storeList, ...val.content]
|
|
|
- }
|
|
|
- },
|
|
|
- immediate: true
|
|
|
+ storeInfo: {},
|
|
|
+ keyword: '',
|
|
|
+ field: '',
|
|
|
+ searchShow: false
|
|
|
}
|
|
|
},
|
|
|
+ // watch: {
|
|
|
+ // 'storeCollectList.data': {
|
|
|
+ // handler: function (val) {
|
|
|
+ // if (this.isChange) {
|
|
|
+ // this.storeList = val.content
|
|
|
+ // this.isChange = false
|
|
|
+ // } else {
|
|
|
+ // this.storeList = [...this.storeList, ...val.content]
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // immediate: true
|
|
|
+ // }
|
|
|
+ // },
|
|
|
computed: {
|
|
|
storeCollectList () {
|
|
|
- return this.$store.state.shop.storeInfo.focusPage
|
|
|
+ return this.storeList
|
|
|
},
|
|
|
fetching () {
|
|
|
return this.storeCollectList.fetching
|
|
|
},
|
|
|
allPage () {
|
|
|
- return Math.floor(this.storeCollectList.data.totalElements / this.storeCollectList.data.size) + Math.floor(this.storeCollectList.data.totalElements % this.storeCollectList.data.size > 0 ? 1 : 0)
|
|
|
+ return Math.floor(this.storeCollectList.totalElements / this.storeCollectList.size) + Math.floor(this.storeCollectList.totalElements % this.storeCollectList.size > 0 ? 1 : 0)
|
|
|
}
|
|
|
},
|
|
|
- fetch ({ store }) {
|
|
|
- return Promise.all([
|
|
|
- // 获取店铺关注列表
|
|
|
- store.dispatch('shop/StoreFocusPage', { count: 10, page: 1 })
|
|
|
- ])
|
|
|
+ async asyncData() {
|
|
|
+ let { data } = await axios.get(`/trade/storeFocus/page`, {params: { count: 10, page: 1 }})
|
|
|
+ return {
|
|
|
+ storeList: data
|
|
|
+ }
|
|
|
},
|
|
|
components: {
|
|
|
RemindBox,
|
|
|
PullUp,
|
|
|
- EmptyStatus
|
|
|
+ EmptyStatus,
|
|
|
+ SearchHeader
|
|
|
},
|
|
|
methods: {
|
|
|
+ onSearch(keyObj) {
|
|
|
+ console.log(keyObj.keyword)
|
|
|
+ if (keyObj.keyword === '') {
|
|
|
+ if (this.searchShow === true) {
|
|
|
+ this.searchShow = false
|
|
|
+ this.page = 1
|
|
|
+ this.reloadList()
|
|
|
+ }
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.searchShow = true
|
|
|
+ this.keyword = keyObj.keyword
|
|
|
+ this.field = keyObj.type && keyObj.type !== 'store' ? keyObj.type : ''
|
|
|
+ this.isChange = true
|
|
|
+ this.down = false
|
|
|
+ this.page = 1
|
|
|
+ this.reloadData()
|
|
|
+ },
|
|
|
+ async reloadData () {
|
|
|
+ let { data } = await this.$http.get('/api/store-service/stores', {params: { page: this.page, count: this.count, type: 'ORIGINAL_FACTORY-DISTRIBUTION-AGENCY-CONSIGNMENT', keyword: this.keyword || null, field: this.field, op: 'similar' }})
|
|
|
+ let _pull = []
|
|
|
+ for (let i = 0; i < data.content.length; i++) {
|
|
|
+ _pull.push(findStoreFocusInMobil({id: data.content[i].id}))
|
|
|
+ }
|
|
|
+ Promise.all(_pull)
|
|
|
+ .then(result => {
|
|
|
+ if (result) {
|
|
|
+ for (let i = 0; i < result.length; i++) {
|
|
|
+ this.$set(data.content[i], 'isFocus', result[i] ? result[i].data : 'false')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.storeList = data
|
|
|
+ },
|
|
|
onRemind: function (str) {
|
|
|
this.remindText = str
|
|
|
this.timeoutCount++
|
|
|
},
|
|
|
- cancelFocus: function (item, event) {
|
|
|
- event.stopPropagation()
|
|
|
- this.$http.post('/trade/storeFocus/delete/storeId', [item.storeid])
|
|
|
- .then(response => {
|
|
|
- this.onRemind('取消成功')
|
|
|
- this.isChange = true
|
|
|
- this.page = 1
|
|
|
- this.reloadList()
|
|
|
- }, err => {
|
|
|
- this.onRemind(err.response.data || '取消失败')
|
|
|
- })
|
|
|
+ cancelFocus(item, event, _tp) {
|
|
|
+ if (_tp) {
|
|
|
+ if (item.isFocus === 'false') {
|
|
|
+ this.$http.post('/trade/storeFocus/save', {storeName: item.storeName, storeid: item.id})
|
|
|
+ .then(response => {
|
|
|
+ item.isFocus = 'true'
|
|
|
+ this.onRemind('关注成功')
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$http.post('/trade/storeFocus/delete/storeId', [item.id])
|
|
|
+ .then(response => {
|
|
|
+ item.isFocus = 'false'
|
|
|
+ this.onRemind('取消成功')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ event.stopPropagation()
|
|
|
+ this.$http.post('/trade/storeFocus/delete/storeId', [item.storeid])
|
|
|
+ .then(response => {
|
|
|
+ this.onRemind('取消成功')
|
|
|
+ this.isChange = true
|
|
|
+ axios.get(`/trade/storeFocus/page`, {params: { count: 10, page: 1 }}).then(res => {
|
|
|
+ this.storeList = res.data
|
|
|
+ })
|
|
|
+ }, err => {
|
|
|
+ this.onRemind(err.response.data || '取消失败')
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
- reloadList: function () {
|
|
|
- this.$store.dispatch('shop/StoreFocusPage', { count: this.count, page: this.page })
|
|
|
+ async reloadList() {
|
|
|
+ if (this.searchShow) {
|
|
|
+ let { data } = await this.$http.get('/api/store-service/stores', {params: { page: this.page, count: this.count, type: 'ORIGINAL_FACTORY-DISTRIBUTION-AGENCY-CONSIGNMENT', keyword: this.keyword || null, field: this.field, op: 'similar' }})
|
|
|
+ this.storeList.content = [...this.storeList.content, ...data.content]
|
|
|
+ } else {
|
|
|
+ let { data } = await axios.get(`/trade/storeFocus/page`, {params: {count: 10, page: this.page}})
|
|
|
+ this.storeList.content = [...this.storeList.content, ...data.content]
|
|
|
+ }
|
|
|
},
|
|
|
onPullUpAction: function () {
|
|
|
this.page++
|
|
|
@@ -145,11 +232,23 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ function findStoreFocusInMobil (store) {
|
|
|
+ return axios.get('/trade/storeFocus/ifFocus?storeid=' + store.id)
|
|
|
+ }
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.mobile-content {
|
|
|
padding-top: 1.26rem !important;
|
|
|
}
|
|
|
+ .mobile-content .com-mobile-header {
|
|
|
+ position: relative;
|
|
|
+ background: #fff;
|
|
|
+ border-bottom: .1rem solid #dfe2e4;
|
|
|
+ height: auto;
|
|
|
+ padding: 0.25rem 0;
|
|
|
+ line-height: normal;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
.shop-list {
|
|
|
background:#fff;
|
|
|
border-bottom: .1rem solid #dfe2e4;
|
|
|
@@ -210,12 +309,18 @@
|
|
|
top: -.06rem;
|
|
|
right: -.18rem;
|
|
|
font-size:.5rem;
|
|
|
- color:#ff7800;
|
|
|
width: .6rem;
|
|
|
height: .6rem;
|
|
|
text-align: center;
|
|
|
line-height: .6rem;
|
|
|
}
|
|
|
+ span.focus{
|
|
|
+ position: absolute;
|
|
|
+ top: .55rem;
|
|
|
+ right: -.28rem;
|
|
|
+ font-size: .28rem;
|
|
|
+ color: #008bf7;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
&:active {
|
wangcz
