mall-web-ssr/pages/mobile/center/user/collect/store.vue

<template>
  <div class="mobile-center">
    <div class="com-mobile-header mobile-center-header">
      <a @click="goBack()"><i class="iconfont icon-fanhui"></i></a>
      <p>店铺关注</p>
      <p class="en-name"><img :src="`/images/mobile/center/${user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}</p>
    </div>
    <div class="mobile-content">
      <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" v-if="item.storeInfo">
            <img :src="getBackground(item.storeInfo && item.storeInfo.type)" />
            <img :src="item.storeInfo.logoUrl || '/images/component/default.png'">
          </div>
          <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>
            <p @click.stop="" v-if="item.storeInfo.enterprise.enPhone">手机：<a :href="'tel:' + item.storeInfo.enterprise.enPhone" >{{item.storeInfo.enterprise.enPhone}}</a></p>
            <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.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>
            <template v-if="item.enterprise">
            <!--电话：<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>
            </template>
            <!--<i class="iconfont icon-shoucang"  :style="item.isFocus === 'true'?'color:#2d8cf0':'color:#bbb'"></i>-->
          </div>
        </div>
      </div>
      <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">
        <div class="mobile-modal-header">联系方式<i @click="showStoreInfo = false" class="icon-guanbi iconfont"></i></div>
        <div class="mobile-modal-content">
         <!-- <div>商家地址：{{storeInfo.enAddress || storeInfo.address || '-'}}</div>-->
          <!--<div class="content-line link-url">在线咨询</div>-->
          <div v-if="storeInfo.enTel">致电：<a :href="'tel:' + storeInfo.enTel" target="_blank" class="content-line link-url">{{storeInfo.enTel || '-'}}</a></div>
          <div v-else>暂无联系方式</div>
          <!--<div>邮件：<a :href="'mailto:' + storeInfo.enEmail" target="_blank" class="content-line link-url">{{storeInfo.enEmail || '-'}}</a></div>-->
        </div>
      </div>
    </div>
    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
    <pull-up :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>
  </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',
    data () {
      return {
        remindText: '',
        timeoutCount: 0,
        page: 1,
        count: 10,
        isChange: false,
        storeList: [],
        showStoreInfo: false,
        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.storeList
      },
      fetching () {
        return this.storeCollectList.fetching
      },
      allPage () {
        return Math.floor(this.storeCollectList.totalElements / this.storeCollectList.size) + Math.floor(this.storeCollectList.totalElements % this.storeCollectList.size > 0 ? 1 : 0)
      }
    },
    async asyncData() {
      let { data } = await axios.get(`/trade/storeFocus/page`, {params: { count: 10, page: 1 }})
      console.log(data)
      return {
        storeList: data
      }
    },
    components: {
      RemindBox,
      PullUp,
      EmptyStatus,
      SearchHeader
    },
    methods: {
      async goBack() {
        if (this.searchShow === true) {
          //这里 是测试语句
          this.searchShow = false
          this.keyword = ''
          let { data } = await this.$http.get(`/trade/storeFocus/page`, {params: { count: 10, page: 1 }})
          this.storeList = data
        } else {
          this.goLastPage()
        }
      },
      onSearch(keyObj) {
        if (keyObj.keyword === '') {
          this.onRemind('请输入搜索关键字')
          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(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 || '取消失败')
            })
        }
      },
      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' }})
          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.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++
        this.reloadList()
      },
      getBackground: function (type) {
        let url = ''
        if (type === 'AGENCY') {
          url += '/images/mobile/@2x/shop/agency.png'
        } else if (type === 'DISTRIBUTION') {
          url += '/images/mobile/@2x/shop/distribution.png'
        } else if (type === 'ORIGINAL_FACTORY') {
          url += '/images/mobile/@2x/shop/original_factory.png'
        } else if (type === 'CONSIGNMENT') {
          url = '/images/mobile/@2x/shop/consignment.png'
        }
        return url
      },
      goStoreDetail: function (uuid) {
        this.$router.push('/mobile/shop/' + uuid)
      },
      selectStoreInfo: function (store, event) {
        event.stopPropagation()
        this.storeInfo = store.storeInfo.enterprise || {}
        this.showStoreInfo = true
      },
      checkInfo: function (str) {
        return str && str.trim() !== ''
      }
    }
  }
  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;
    padding: .14rem 0 .14rem 0;
    &:first-child {
      border-top: .1rem solid #dfe2e4;
    }
    h3{
      font-size: .32rem;
      line-height: .4rem;
      margin: 0 0 0 .27rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-top: .1rem;
      position: relative;
      top: .1rem;
    }
    .list-item{
      width:6.77rem;
      margin-left:.39rem;
      .item-img{
        width:2.4rem;
        vertical-align: middle;
        display: inline-block;
        img{
          &:nth-child(2) {
            width:2.4rem;
            height:1.69rem;
            border: 1px solid #eee;
          }
          &:nth-child(1) {
            position:absolute;
            width:.65rem;
            height:.33rem;
          }
        }
      }
      .list-item-phone{
        width:3.95rem;
        padding:.18rem 0;
        position:relative;
        display: inline-block;
        vertical-align: middle;
        margin-left: .26rem;
        p{
          font-size:.28rem;
          line-height: .67rem;
          margin:0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 3.2rem;
        }
        i{
          display:block;
          position:absolute;
          top: -.06rem;
          right: -.18rem;
          font-size:.5rem;
          width: .6rem;
          height: .6rem;
          text-align: center;
          line-height: .6rem;
        }
        span.focus{
          position: absolute;
          top: .55rem;
          right: -.28rem;
          font-size: .28rem;
          color: #008bf7;
        }
      }
    }
    &:active {
      background: #e1e1e1;
    }
  }
</style>