hlm_pl_mall_h5/pages/home/memberregister/Register.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(item.id)"
					>
						<label
								class="title"
								v-bind:class="{
					active: item.id === currentIndex,
					normal: item.id !== currentIndex
				}"
						>{{ getTitle(item) }}</label
						>
					</view>
				</view>
			</view>
			<flex-line v-if="inviter" :show-border="true"><text class="span line-name">推荐人</text><text class="span" slot="right">{{inviter.member_name}}</text></flex-line>
			<view class="div" v-if="items.length">
				<register-by-email  v-if="currentIndex === 1" />
				<register-by-mobile v-else-if="currentIndex === 2" />
			</view>
		</view>
	</view></home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import HomeBase from '../HomeBase'
import RegisterByMobile from './RegisterByMobile'
import RegisterByEmail from './RegisterByEmail'
import { mapState, mapMutations, mapActions } from 'vuex'
import { getInviterInfo } from '../../../api/memberRegister'
import flexLine from '../../flexLine'
export default {
  name: 'Register',
  components:{
    TitleHeader,
    HomeBase,
    flexLine,
    RegisterByMobile,
    RegisterByEmail
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  data(){
    return {
    	navHeight: 0,
    	inviter:false,
      currentIndex: 0,
      items: []
    }
  },
  created: function () {
	  this.fetchConfig({}).then(
			  res => {
			  	var config=res.result.config_list
				  if(config.member_normal_register==1){
				  	this.items.push({id:1,title:'普通注册'})
					  if(!this.currentIndex){
						  this.currentIndex=1
					  }
				  }
				  if(config.sms_register==1){
					  this.items.push({id:2,title:'手机注册'})
					  if(!this.currentIndex){
						  this.currentIndex=2
					  }
				  }
			  },
			  error => {
				  uni.showToast({icon:'none',title: error.message})
			  }
	  )
    if (this.inviter_id) {
      getInviterInfo(this.inviter_id).then(res => {
        this.inviter = res.result.member
      })
    }
  },
  computed:{
	  fontSize(){
	    return getFontSize()
	  },
	  ...mapState({
		  inviter_id: state => state.member.inviterId,
		  config: state => state.config.config
	  }),
    isFirstTab () {
      if (this.currentIndex === 0) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
	  ...mapActions({
		  fetchConfig: 'fetchConfig'
	  }),
    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>