hlm_pl_mall_h5/pages/member/MemberBase.vue

<template>
  <view class="div member-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
  } from 'vuex'
  import {
    cartQuantity
  } from '../../api/homecart'
  export default {
    name: 'MemberBase',
    data() {
      return {
        page: '',
        cartNumber: 0,
      }
    },
    props: {
      show: {
        type: Boolean,
        default: true
      }
    },
    computed: {
      ...mapState({
        user: state => state.member.info,
        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.user) {
        uni.navigateTo({
          url: '/pages/home/memberlogin/Login?clear=1'
        })
      }
      this.getCartCount()
    },
    methods: {
      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;
  }

  .member-base {
    /*  #ifndef  APP-PLUS-NVUE  */
    display: flex;
    /*  #endif  */
    flex-direction: column;
  }

  .content {
    flex: 1
  }

  .item-wrap {
    position: relative
  }

  .image {
    width: 1rem;
    height: 1rem;
    /*  #ifndef  APP-PLUS-NVUE  */
    display: block;
    margin-left: auto;
    margin-right: auto;
    /*  #endif  */
    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>