hlm_pl_mall_store/pages/home/HomeBase.vue

<template>
  <view class="div seller-base">
    <page-meta
        :root-font-size="fontSize+'px'"
      >
    </page-meta>
    <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/seller/goods/Goodsonline'}">
          <navigator url="/pages/seller/goods/Goodsonline" class='item'>
            <image mode="aspectFit" src="@/static/image/seller/icon_home_seller_pre.png" class="image"
              v-if="page.route=='pages/seller/goods/Goodsonline'">
              <image mode="aspectFit" v-else src="@/static/image/seller/icon_home_seller_nor.png" class="image" />
              <text class='span text'>商品管理</text>
          </navigator>
        </view>
        <view class='item-wrap' :class="{'active':page.route=='pages/seller/order/OrderList'}" id='seller_order'>
          <navigator url="/pages/seller/order/OrderList" class='item'>
            <image mode="aspectFit" src="@/static/image/seller/icon_list_seller_pre.png" class="image"
              v-if="page.route=='pages/seller/order/OrderList'">
              <image mode="aspectFit" v-else src="@/static/image/seller/icon_list_seller_nor.png" class="image" />
              <text class='span text'>订单管理</text>
          </navigator>
        </view>
        <view class='item-wrap' :class="{'active':page.route=='pages/seller/index/Index'}" id='seller_index'>
          <navigator url="/pages/seller/index/Index" class='item'>
            <image mode="aspectFit" src="@/static/image/seller/icon_mine_seller_pre.png" class="image"
              v-if="page.route=='pages/seller/index/Index'">
              <image mode="aspectFit" v-else src="@/static/image/seller/icon_mine_seller_nor.png" class="image" />
              <text class='span text'>店铺中心</text>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getFontSize
  } from '@/util/common'
  export default {
    name: 'SellerBase',
    data() {
      return {
        page: '',
      }
    },
    props: {
      show: {
        type: Boolean,
        default: true
      }
    },
    computed: {
      fontSize(){
        return getFontSize()
      },
    },
    mounted: function() {
      var pages = getCurrentPages()
      var page = pages[pages.length - 1]
      this.page = {
        route: page.route,
        options: page.options
      }
    }
  }
</script>
<style lang="scss" scoped>
  .status-holder {
    background-color: #fff;
  }

  .seller-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>