hlm_pl_mall_h5/pages/home/HomeBase.vue

<template>
  <view class="div home-base">
    <view class="status-holder"></view>
    <view class="content">
      <slot></slot>
    </view>
    <view v-if="show" class='div common-footer-wrap'>
      <view class="common-footer">
        <view class='item-wrap' :class="{'active':page.route=='pages/home/index/Index'}">
          <navigator url="/pages/home/index/Index" open-type="reLaunch" class='item'>
            <image mode="aspectFit" src="@/static/image/tab/icon_home_pre.png" class="img image"
              v-if="page.route=='pages/home/index/Index'">
              <image mode="aspectFit" v-else src="@/static/image/tab/icon_home_nor.png" class="img image" /><text
                class='span text'>首页</text>
          </navigator>
        </view>
        <view class='item-wrap' :class="{'active':page.route=='pages/home/goodsclass/Goodsclass'}">
          <navigator url="/pages/home/goodsclass/Goodsclass" class='item'>
            <image mode="aspectFit" src="@/static/image/tab/icon_classify_pre.png" class="img image"
              v-if="page.route=='pages/home/goodsclass/Goodsclass'">
              <image mode="aspectFit" v-else src="@/static/image/tab/icon_classify_nor.png" class="img image" /><text
                class='span text'>分类</text>
          </navigator>
        </view>
        <view class='item-wrap' :class="{'active':page.route=='pages/home/search/Search'}">
          <navigator url="/pages/home/search/Search" class='item'>
            <image mode="aspectFit" src="@/static/image/tab/icon_seek_pre.png" class="img image"
              v-if="page.route=='pages/home/search/Search'">
              <image mode="aspectFit" v-else src="@/static/image/tab/icon_seek_nor.png" class="img image" /><text
                class='span text'>搜索</text>
          </navigator>
        </view>
        <view class='item-wrap' :class="{'active':page.route=='pages/member/cart/Cart'}">
          <navigator url="/pages/member/cart/Cart" class='item'>
            <image mode="aspectFit" src="@/static/image/tab/icon_shopping_pre.png" class="img image"
              v-if="page.route=='pages/member/cart/Cart'">
              <image mode="aspectFit" v-else src="@/static/image/tab/icon_shopping_nor.png" class="img image" /><text
                class='span text'>购物车</text><text class="span icon" v-if="cartNumber > 0">{{ getCarCount }}</text>
          </navigator>
        </view>
        <view class='item-wrap' :class="{'active':page.route=='pages/member/index/Index'}">
          <navigator url="/pages/member/index/Index" open-type="reLaunch" class='item'>
            <image mode="aspectFit" src="@/static/image/tab/icon_mine_pre.png" class="img image"
              v-if="page.route=='pages/member/index/Index'">
              <image mode="aspectFit" v-else src="@/static/image/tab/icon_mine_nor.png" class="img image" /><text
                class='span text'>我的</text>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  import {
    cartQuantity
  } from '../../api/homecart'
  export default {
    name: 'HomeBase',
    data() {
      return {
        page: '',
        cartNumber: 0,
      }
    },
    props: {
      show: {
        type: Boolean,
        default: true
      }
    },
    computed: {
      ...mapState({
        isOnline: state => state.member.isOnline,
      }),
      getCarCount() {
        if (this.cartNumber > 0 && this.cartNumber < 100) {
          return this.cartNumber
        } else if (this.cartNumber >= 100) {
          return '99+'
        }
      }
    },
    mounted: function() {
      var pages = getCurrentPages()
      var page = pages[pages.length - 1]
      this.page = {
        route: page.route,
        options: page.options
      }
      if (this.page.options && this.page.options.inviter_id) {
        this.memberInviterId({
          inviterId: this.page.options.inviter_id
        })
      }
      this.getCartCount()
    },
    methods: {
      ...mapMutations({
        memberInviterId: 'memberInviterId'
      }),
      getCartCount() {
        if (this.isOnline) {
          cartQuantity().then(res => {
            if (res) {
              this.cartNumber = res.result.cart_count
            }
          })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .status-holder {
    background-color: #fff;
  }

  .home-base {
    display: flex;
    flex-direction: column;
  }

  .content {
    flex: 1
  }

  .item-wrap {
    position: relative
  }

  .image {
    width: 1rem;
    height: 1rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: .2rem;
    margin-bottom: .2rem;
  }

  .icon {
    position: absolute;
    right: 0.8rem;
    top: 0.2rem;
    font-size: $h6;
    line-height: 0.7rem;
    width: 0.9rem;
    height: 0.7rem;
    background: #ef3338;
    border-radius: 1rem;
    text-align: center;
    color: #ffffff;
  }
</style>