mall-web-ssr/pages/mobile/user/index.vue

<template>
  <div class="user-content">
    <div class="user-name">
      <img src="/images/component/default.png"/>
      <div class="user-info">
        <p>{{loadUserInfo.userName}}</p>
        <p>{{enterprise.enName}}</p>
      </div>
      <span @click="onclick()">{{listName}}<i class="iconfont icon-arrow-down"></i></span>
      <ul class="supdown" v-if="down">
        <li @click="onDown('1')" v-show="!isDevice || !isShop">全部收藏</li>
        <li @click="onDown('-1')" v-show="isDevice || !isShop">店铺关注</li>
        <li @click="onDown('0')" v-show="!isDevice || isShop">器件收藏</li>
      </ul>
    </div>
    <div class="collect-list-type" v-if="focusPage.totalElements > 0 && isShop">
      <p>店铺</p>
    </div>
    <div class="shop-list" v-if="isShop" v-for="item in focusPage.content" @click="goStoreDetail(item.storeInfo.uuid)">
      <h3>{{item.storeName}}</h3>
      <div class="list-item">
        <div class="item-img">
          <i :style="getBackground(item.storeInfo.type)"></i>
          <img :src="item.storeInfo.logoUrl || '/images/component/default.png'">
        </div>
        <div class="list-item-phone">
          <p>电话：<span>{{item.storeInfo.enterprise.enTel}}</span></p>
          <p>传真：<span>{{item.storeInfo.enterprise.enFax}}</span></p>
          <i class="iconfont icon-shoucang" @click="cancelFocus('store', item, $event)"></i>
        </div>
      </div>
    </div>
    <div class="collect-list-type" v-if="collectSave.totalElements > 0 && isDevice">
      <p>器件</p>
    </div>
    <div class="detail-brand" v-for="(item, index) in collectSave.content" v-if="isDevice" @click="goComponentDetail(item.componentinfo.uuid)">
      <a>
        <div class="brand-item">
          <p>型号：<span>{{item.componentinfo.code}}</span></p>
          <p>品牌：<span>{{item.componentinfo.brand.nameCn}}</span></p>
          <p>产品描述：<span>{{item.componentinfo.kind.nameCn}}</span></p>
          <i class="iconfont icon-shoucang" @click="cancelFocus('product', item, $event)"></i>
        </div>
      </a>
    </div>
    <div class="none-state" v-if="(collectSave.totalElements == 0 && !isShop) || (focusPage.totalElements == 0 && !isDevice) || (collectSave.totalElements == 0 && focusPage.totalElements == 0)">
      <img src="/images/mobile/@2x/empty-collect.png">
      <p v-text="getRemindText()"></p>
      <nuxt-link to="/">返回首页</nuxt-link>
    </div>
    <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
  </div>
</template>

<script>
  import RemindBox from '~components/mobile/common/RemindBox.vue'
  export default {
    layout: 'mobile',
    data () {
      return {
        userName: '',
        down: false,
        count: '',
        page: '',
        type: '',
        listName: '全部收藏',
        isShop: true,
        isDevice: true,
        collectResult: '取消成功',
        timeoutCount: 0
      }
    },
    components: {
      RemindBox
    },
    fetch ({ store }) {
      return Promise.all([
        store.dispatch('product/saveStores', { count: 100, page: 1, type: 'component' }),
        store.dispatch('loadUserInfo'),
        store.dispatch('shop/StoreFocusPage', { count: 100, page: 1 })
      ])
    },
    methods: {
      onclick () {
        this.down = !this.down
      },
      onDown (type) {
        if (type === '-1') {
          this.listName = '店铺关注'
          this.isShop = true
          this.isDevice = false
          this.down = false
        }
        if (type === '0') {
          this.listName = '器件收藏'
          this.isDevice = true
          this.isShop = false
          this.down = false
        }
        if (type === '1') {
          this.listName = '全部收藏'
          this.isDevice = true
          this.isShop = true
          this.down = false
        }
      },
      cancelFocus: function (type, item, event) {
        event.stopPropagation()
        if (type === 'store') {
          this.$http.post('/trade/storeFocus/delete/storeId', [item.storeid])
            .then(response => {
              this.$store.dispatch('shop/StoreFocusPage', { count: 100, page: 1 })
              this.timeoutCount++
            })
        } else {
          // /trade/collection/
          this.$http.delete('/trade/collection/' + item.id)
            .then(response => {
              this.$store.dispatch('product/saveStores', { count: 100, page: 1, type: 'component' })
              this.timeoutCount++
            })
        }
      },
      getBackground: function (type) {
        let style = 'background: url('
        if (type === 'AGENCY') {
          style += '/images/mobile/@2x/shop/daili@2x.png'
        } else if (type === 'DISTRIBUTION') {
          style += '/images/mobile/@2x/shop/jingxiao@2x.png'
        } else if (type === 'ORIGINAL_FACTORY') {
          style += '/images/mobile/@2x/shop/yuanchang@2x.png'
        }
        style += ')no-repeat; background-size: .65rem .33rem;'
        return style
      },
      goStoreDetail: function (uuid) {
        this.$router.push('/mobile/shop/' + uuid)
      },
      goComponentDetail: function (uuid) {
        this.$router.push('/mobile/brand/componentDetail/' + uuid)
      },
      getRemindText: function () {
        if (this.isDevice && !this.isShop) {
          return '抱歉，暂无器件收藏'
        } else if (!this.isDevice && this.isShop) {
          return '抱歉，暂无店铺关注'
        } else {
          return '抱歉，暂无收藏记录'
        }
      }
    },
    computed: {
      collectSave () {
        return this.$store.state.product.common.collectList.data
      },
      loadUserInfo () {
        return this.$store.state.option.user.data
      },
      enterprise () {
        let ens = this.loadUserInfo.enterprises
        if (ens && ens.length) {
          return ens.find(item => item.current) || {enName: this.user.data.userName + '（个人账户）'}
        } else {
          return {enName: this.user.data.userName + '（个人账户）'}
        }
      },
      focusPage () {
        return this.$store.state.shop.storeInfo.focusPage.data
      }
    }
  }
</script>

<style scoped lang="scss">
  .user-content{
    margin-bottom: .98rem;
    background: #dfe2e4;

    .none-state{
      text-align: center;
      padding:1.5rem 0;
      background: #fff;
      margin-top:.1rem;
      width:100%;
      img{
        margin:0 auto;
        width: 4.08rem;
        height: 2.62rem;
      }
      p {
        font-size: .32rem;
        color: #999;
        margin: 1.19rem 0 0 0;
      }
      a {
        display: block;
        font-size: .28rem;
        color: #fff;
        width: 1.88rem;
        height: .54rem;
        line-height: .54rem;
        background: #418bf6;
        margin: .7rem auto 0;
        border-radius: .05rem;
      }
    }
    .user-name{
      padding:.14rem 0 .2rem .34rem;
      background:#fff;
      width:100%;
      position:relative;
      border-bottom: .1rem solid #dfe2e4;
      .supdown{
        position:absolute;
        top:.8rem;
        right:.3rem;
        z-index:10;
        width:1.7rem;
        background:#616264;
        border-radius:.1rem;
        li{
          font-size: .28rem;
          color:#ffffff;
          height: .32rem;
          line-height: .32rem;
          margin: .4rem 0;
          text-align: center;
        }
      }
      img{
        display: inline-block;
        width:1.25rem;
        height:1.25rem;
        border:.04rem solid #c5dbfc;
        border-radius: .05rem;
        vertical-align: middle;
      }
      .user-info {
        margin-left:.25rem;
        display: inline-block;
        vertical-align: middle;
        p{
          font-size:.3rem;
          margin:0;
          font-weight: bold;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 3.92rem;
          &:nth-child(2) {
            font-weight: normal;
            margin-top: .3rem;
          }
        }
      }
      span{
        font-size:.28rem;
        color:#53a0f7;
        position: relative;
        bottom: .3rem;
      }
    }
    .shop-list {
      background:#fff;
      border-bottom: .1rem solid #dfe2e4;
      padding-bottom:.28rem;
      h3{
        font-size:.32rem;
        line-height: .8rem;
        margin:0;
        margin-left:.27rem;
        margin-bottom:.14rem;
      }
      .list-item{
        width:6.77rem;
        margin-left:.39rem;
        .item-img{
          width:2.4rem;
          vertical-align: middle;
          display: inline-block;
          i{
            display:block;
            position:absolute;
            width:.65rem;
            height:.33rem;
            background: url(/images/mobile/@2x/shop/daili@2x.png)no-repeat;
            background-size: .65rem .33rem;
          }
          img{
            width:2.4rem;
            height:1.69rem;
            border:.02rem solid #eee;
          }
        }
        .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: 0;
            right: -.1rem;
            font-size:.4rem;
            color:#ff7800;
          }
        }
      }
      &:active {
        background: #e1e1e1;
      }
    }
    .detail-brand{
      background: #fff;
      width:100%;
      min-height:1.5rem;
      padding:.2rem 0;
      border-bottom: .1rem solid #dfe2e4;
      &:nth-child(1) {
        margin-top:.1rem;
      }
      .brand-item{
        width:7rem;
        margin:0 auto;
        border-radius:.1rem;
        background: #fff;
        padding:.2rem;
        position:relative;
        &:active{
           background: #e1e1e1;
         }
        p{
          font-size:.28rem;
          line-height:.4rem;
          color:#333;
          margin:0;
        }
        i{
          display:block;
          position:absolute;
          top:.2rem;
          right:.1rem;
          font-size:.4rem;
          color:#ff7800;
        }
      }
      div.active{
        background: #d4d;
      }
    }
    .collect-list-type {
      background: #fff;
      border-bottom: .02rem solid #acacac;
      p {
        font-size: .32rem;
        margin: 0 0 0 .13rem;
        width: .92rem;
        text-align: center;
        line-height: .5rem;
        border-bottom: .06rem solid #418bf6;
      }
    }
  }
</style>