hlm_pl_mall_h5/pages/member/favorite/Favorite.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <member-base :show="false"><view class="div container">
        <view class="div common-header-wrap">
            <view :style="'height:'+navHeight+'px'"></view>
            <view class="common-header-holder"></view>
            <view class="common-header-fixed">
            <title-header />
            <uni-nav-bar title="我的收藏" class="common-header" left-icon="back" @clickLeft="goBack">
            </uni-nav-bar>
        </view>
        </view>
		<view class="tab-wrapper">
			<view class="tab-item" @click="onClickItem(0)" v-bind:class="{'active':selected == 0}">收藏店铺<text class="icon"></text></view>
			<view class="tab-item" @click="onClickItem(1)" v-bind:class="{'active':selected == 1}">收藏商品<text class="icon"></text></view>
		 </view>
		 <favorite-store v-if="selected==0"></favorite-store>
		 <favorite-goods v-if="selected==1"></favorite-goods>
    </view></member-base>
</template>
<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import MemberBase from '../MemberBase'
import FavoriteGoods from './FavoriteGoods'
import FavoriteStore from './FavoriteStore'
export default {
  components:{
    TitleHeader,
    MemberBase,
    FavoriteGoods,
    FavoriteStore
  },
  name:'MemberFavorite',
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
      navHeight: 0,
      selected: 0
    }
  },
  methods: {
			onClickItem(e) {
				if (this.selected !== e.currentIndex) {
					this.selected = e
				}
			},
    goBack () {
      uni.navigateBack({delta:1})
    }
  }
}
</script>
<style scoped lang="scss">
.container .tab-wrapper{margin-bottom:.5rem;height: 3rem;background: #fff;margin-top: .3rem;display: flex;align-items: center;}
.container .tab-wrapper .tab-item{width: 50%;display: flex;justify-content: center;font-size: .8rem;position: relative;}
.container .tab-wrapper .tab-item.active{color: $primaryColor;}
.container .tab-wrapper .tab-item.active .icon{position: absolute;width: 1rem;height: .2rem;background: $primaryColor;border-radius: 0.5rem;bottom: -.3rem;}
</style>