登陆类型切换效果实现

<template>
	<view>
		<!-- 状态栏, 手机状态栏 -->
		<uniStatusBar bgcolor="#ffe933"></uniStatusBar>
		<!-- 关闭按钮 -->
		<view class="icon iconfont icon-guanbi" @tap="back"></view>
		<!-- 引入背景图 -->
		<image class="loginhead" src="../../static/common/loginhead.png" lazy-load mode="widthFix"></image>


		<!-- 登录 -->
		<view class="body">
			<!-- 账号密码登录 -->
			<template v-if="!status">
				<input type="text" class="uni-input common-input" placeholder="昵称/手机号/邮箱">
				<view class="login-input-box">
					<input type="text" class="uni-input common-input" placeholder="请输入密码">
					<view class="forget u-f-ajc">忘记密码</view>
				</view>
			</template>

			<!-- 手机号登录 -->
			<template v-else>
				<view class="login-input-box">
					<view class="phone u-f-ajc">+86</view>
					<input type="text" class="uni-input common-input phone-input" placeholder="手机号">
				</view>
				<view class="login-input-box">
					<input type="text" class="uni-input common-input" placeholder="请输入验证码">
					<view class="forget u-f-ajc yanzhengma">
						<view class="u-f-ajc">获取验证码</view>
					</view> 
				</view>
			</template>


			<button class="user-set-btn " :loading="loading" :class="{'user-set-btn-disable':disabled}" type="primary" @tap="submit"
			 :disabled="disabled">登录</button>
		</view>

		<!-- 登录状态切换 -->
		<view class="login-status u-f-ajc login-padding" @tap="changeStatus">
			{{status?'账号密码登录':'验证码登录'}}
			<view class="icon iconfont icon-jinru login-font-color"></view>
		</view>

		<!-- 第三方登录 -->
		<view class="other-login-title u-f-ajc login-padding login-font-color">第三方登录</view>
		<otherLogin></otherLogin>

		<!-- 协议 -->
		<view class="login-rule u-f-ajc login-padding login-font-color">
			注册即代表您同意 <view>《星城百科协议》</view>
		</view>
	</view>
</template>

<script>
	import uniStatusBar from '../../components/uni-status-bar/uni-status-bar.vue'
	import otherLogin from '../../components/home/other-login.vue'
	export default {
		components: {
			uniStatusBar,
			otherLogin
		},
		data() {
			return {
				status: false, // false代表账号密码登录 true代表验证码登录
				disabled: true,
				loading: false
			}
		},
		methods: {
			// 登录状态切换
			changeStatus() {
				this.status = !this.status
			}
		}
	}
</script>