hlm_pl_mall_h5/pages/home/memberbind/Bind.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
	<home-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="div main-content">
		<view class="div topList">
		<view class="div list">
			<view
					class="div item"
					v-for="(item, index) in items"
					:key="index"
					v-on:click="onClickItem(index)"
			>
				<label
						class="title"
						v-bind:class="{
					active: index === currentIndex,
					normal: index !== currentIndex
				}"
				>{{ getTitle(item) }}</label
				>
			</view>
		</view>
	</view>
		<bind-new  v-if="currentIndex === 0" />
		<bind-old v-else-if="currentIndex === 1" />
	</view>
	</view></home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import HomeBase from '../HomeBase'
import BindNew from './BindNew'
import BindOld from './BindOld'
export default {
  name: 'Register',
  components:{
    TitleHeader,
    HomeBase,
    BindNew,
	  BindOld
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  data(){
    return {
      navHeight: 0,
      currentIndex: 0,
      items: [
        {
          id: 1,
          title: '新用户'
        },
        {
          id: 2,
          title: '已有用户'
        }

      ]
    }
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    isFirstTab () {
      if (this.currentIndex === 0) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {

    goBack () {
      uni.navigateBack({delta:1})
    },
    getTitle (item) {
      return item ? item.title : ''
    },
    isShowLine (index) {
      return index === this.currentIndex
    },
    onClickItem (index) {
      if (this.currentIndex !== index) {
        this.currentIndex = index
      }
    }
  }
}
</script>

<style scoped lang="scss">
.container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	//background-color: $primaryColor;
	.main-content{background: #fff;padding:1rem 0;}
}

.topList {
	height:2rem;
	padding:1rem $pageSpace;
	.list {
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-content: center;
		align-items: stretch;
		background-color: #fff;
	}
	.item {
		padding:0 .5rem;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.title {
		text-align: center;
		font-size:$h2;
		color: $formInputColor;
	}
	.active {
		color: $primaryColor;
		font-size:1.1rem;
	}
	.normal {
		color: #404245;
	}

}
</style>