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

<template>
  <div class="mobile-center">
    <div class="com-mobile-header mobile-center-header">
      <a @click="goLastPage"><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-fix-content mobile-centerfix-content">
      <div class="seek-banner block-wrap">
        <img src="/images/mobile/center/user/adv.jpg" alt="">
      </div>
      <div class="block-wrap seek-operation">
        <p><i></i>我的求购</p>
        <ul>
          <nuxt-link to="/mobile/center/user/applyPurchase" tag="li">
            <img src="/images/mobile/center/user/pub.png" alt="">
            <p>发布求购</p>
          </nuxt-link>
          <nuxt-link to="/mobile/center/user/seek?seekType=wait" tag="li">
            <img src="/images/mobile/center/user/wait.png" alt="">
            <p>待报价</p>
          </nuxt-link>
          <nuxt-link to="/mobile/center/user/seek?seekType=done" tag="li">
            <img src="/images/mobile/center/user/done.png" alt="">
            <p>已报价</p>
          </nuxt-link>
        </ul>
      </div>

      <div class="block-wrap seek-operation">
        <p><i></i>更多服务</p>
        <ul>
          <nuxt-link tag="li" to="/mobile/order?type=buyer" class="content-line">
            <img src="/images/mobile/center/user/order.jpg" alt="">
            <p>采购订单</p>
          </nuxt-link>
          <nuxt-link tag="li" to="/mobile/center/user/cart" class="content-line">
            <img src="/images/mobile/center/user/cart.jpg" alt="">
            <p>购物车<span class="text" v-if="carCount > 0">{{carCount && carCount >= 99 ? 99 : carCount || 0}}</span></p>
          </nuxt-link>
          <nuxt-link tag="li" to="/mobile/center/user/invoice/waitinvoice" class="content-line">
            <img src="/images/mobile/center/user/invoice_icon.png" alt="">
            <p>发票管理</p>
          </nuxt-link>
          <nuxt-link tag="li" to="/mobile/center/user/collect/component" class="content-line">
            <img src="/images/mobile/center/user/comp-collect2.png" alt="">
            <p>器件收藏<span class="text" v-if="compCount.data > 0">{{compCount.data && compCount.data >= 99 ? 99 : compCount.data || 0}}</span></p>
          </nuxt-link>
          <nuxt-link tag="li" to="/mobile/center/user/collect/store" class="content-line">
            <img src="/images/mobile/center/user/store-focus.png" alt="">
            <p>店铺关注<span class="text" v-if="storeCount.data > 0">{{storeCount.data && storeCount.data >= 99 ? 99 : storeCount.data || 0}}</span></p>
          </nuxt-link>
          <nuxt-link tag="li" to="/mobile/center/user/payCenter" class="content-line">
            <img src="/images/mobile/center/user/payfor_icon.png" alt="">
            <p>应付对账</p>
          </nuxt-link>
          <nuxt-link tag="li" to="/mobile/center/user/collect/message" class="content-line" v-if="user.data.enterprise.uu">
            <img src="/images/mobile/center/user/message.png" alt="">
            <p>消息中心<span class="text" v-if="messageCount.count > 0">{{messageCount.count && messageCount.count >= 99 ? 99 : messageCount.count || 0}}</span></p>
          </nuxt-link>
        </ul>
      </div>

    </div>
    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
  </div>
</template>
<script>
  import { RemindBox } from '~components/mobile/common'
  export default {
    layout: 'mobileNoHeader',
    middleware: 'authenticated',
    data () {
      return {
        remindText: '',
        timeoutCount: 0,
        carCount: 0
      }
    },
    fetch ({store}) {
     let user = store.state.option.user.data
      let promises = [
        store.dispatch('product/loadCompCollectInfo'),
        store.dispatch('shop/loadStoreCollectInfo')
      ]
     if (user.enterprise.uu) {
       promises.push(store.dispatch('messageShow/loadMessageCount', {receiverUu: user.userUU, receiverEnuu: user.enterprise.uu, consumerApp: 'MALL', isRead: 0}))
     }
      return Promise.all(promises)
    },
    components: {
      RemindBox
    },
    computed: {
      compCount () {
        return this.$store.state.product.component.collectCount.data
      },
      storeCount () {
        return this.$store.state.shop.storeInfo.collectCount.data
      },
      messageCount () {
        // console.log(this.$store.state.messageShow.messageCount.count.data)
        if (this.user.data.enterprise.uu) {
          return this.$store.state.messageShow.messageCount.count.data
        }
      }
    },
    created () {
      this.$http.get('/trade/cart/count').then(res => {
        this.carCount = res.data.count || 0
      })
    },
    methods: {
      onRemind: function (str) {
        this.remindText = str
        this.timeoutCount++
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '~assets/scss/mobileCenter';
</style>