开始

image.png

  1. username:'',
  2.                 password:'',
  3.                 phone:'',
  4.                 checknum:''

双向绑定到菜单上
image.png

  1.  v-model="username"
  2. v-model="password"
  4. v-model="phone"
  6.  v-model="checknum"

写一个方法判断和改变按钮的状态。两个括号分别表示 账号密码登陆和手机验证码登陆。
image.png

image.png

image.png

  1. // 改变按钮状态
  2.             OnBtnChange(){
  3.                 if((this.username && this.password) || (this.phone && this.checknum)){
  4.                     this.disabled=false;
  5.                     return;
  6.                 }
  7.                 this.disabled=true;
  8.             },

起个监听。四个数值的变化都要调用这个方法。
image.png

  1. watch:{
  2.             username(val){
  3.                 this.OnBtnChange();
  4.             },
  5.             password(val){
  6.                 this.OnBtnChange();
  7.             },
  8.             phone(val){
  9.                 this.OnBtnChange();
  10.             },
  11.             checknum(val){
  12.                 this.OnBtnChange();
  13.             }
  14.         },

登陆状态的切换清除当前表单的值

image.png

  1. // 初始化表单
  2.             initInput(){
  3.                 this.username='';
  4.                 this.password='';
  5.                 this.phone='';
  6.                 this.checknum='';
  7.             },

每次变化的时候清空表单
image.png

  1. // 切换登陆状态
  2.             changeStatus() {
  3.                 this.initInput();
  4.                 this.status = !this.status;
  5.             },

image.png
删除后，按钮禁用
image.png

image.png

本节代码

  1. <template>
  2.     <view>
  3.         <!-- 状态栏 -->
  4.         <!-- <uni-status-bar></uni-status-bar> -->
  5.         <uni-nav-bar background-color="#FFE933" status-bar />
  6.         <!-- 关闭按钮 -->
  7.         <view class="icon iconfont icon-guanbi" @tap="back"></view>
  8.         <!-- 引入背景图 -->
  9.         <image class="loginhead" src="../../static/common/loginhead.png" mode="widthFix" lazy-load></image>
  11.         <view class="body">
  12.             <!-- 账号密码登陆 -->
  13.             <template v-if="!status">
  14.                 <view class="login-input-box">
  15.                     <!-- <view class="phone u-f-ajc">+86</view> -->
  16.                     <input type="text" v-model="username"
  17.                     class="uni-input common-input" placeholder="昵称/手机号/邮箱" />
  18.                 </view>
  20.                 <view class="login-input-box">
  21.                     <view class="login-input-box">
  22.                         <input type="text" v-model="password"
  23.                         class="uni-input common-input forget-input" placeholder="请输入密码" />
  24.                         <view class="forget u-f-ajc login-font-color">忘记密码</view>
  25.                     </view>
  26.                 </view>
  27.             </template>
  29.             <template v-else>
  30.                 <view class="login-input-box">
  31.                     <view class="phone u-f-ajc">+86</view>
  32.                     <input type="text" v-model="phone"
  33.                     class="uni-input common-input phone-input" placeholder="手机号" />
  34.                 </view>
  36.                 <view class="login-input-box">
  37.                     <input type="text" v-model="checknum"
  38.                     class="uni-input common-input forget-input" placeholder="验证码" />
  39.                     <view class="forget u-f-ajc login-font-color yanzhengma">
  40.                         <view class="u-f-ajc">
  41.                             获取验证码
  42.                         </view>
  43.                     </view>
  44.                 </view>
  45.             </template>
  48.             <button class="user-set-btn" :class="{'user-set-btn-disable':disabled}" :loading="loading" @tap="submit"
  49.                 type="primary" :disabled="disabled">登陆</button>
  50.         </view>
  51.         <!-- 登陆状态切换 -->
  52.         <view class="login-status u-f-ajc login-padding" @tap="changeStatus">
  53.             {{status?'账号密码登陆':'验证码登陆'}}
  54.             <view class="icon iconfont icon-jinru"></view>
  55.         </view>
  56.         <!-- 第三方登陆 -->
  57.         <view class="other-login-title u-f-ajc login-padding">第三方登陆</view>
  59.         <other-login></other-login>
  60.         <!-- 协议 -->
  61.         <view class="login-rule u-f-ajc login-padding login-font-color">
  62.             注册即代表您同意<view class="login-font-color">《XXXX协议》</view>
  63.         </view>
  64.     </view>
  65. </template>
  67. <script>
  68.     import otherLogin from '@/components/home/other-login.vue';
  69.     export default {
  70.         components: {
  71.             otherLogin
  72.         },
  73.         data() {
  74.             return {
  75.                 status: false, // false代表账号密码登陆， true手机验证码登陆
  76.                 disabled: true,
  77.                 loading: false,
  78.                 username:'',
  79.                 password:'',
  80.                 phone:'',
  81.                 checknum:''
  82.             }
  83.         },
  84.         watch:{
  85.             username(val){
  86.                 this.OnBtnChange();
  87.             },
  88.             password(val){
  89.                 this.OnBtnChange();
  90.             },
  91.             phone(val){
  92.                 this.OnBtnChange();
  93.             },
  94.             checknum(val){
  95.                 this.OnBtnChange();
  96.             }
  97.         },
  98.         methods: {
  99.             // 初始化表单
  100.             initInput(){
  101.                 this.username='';
  102.                 this.password='';
  103.                 this.phone='';
  104.                 this.checknum='';
  105.             },
  106.             // 改变按钮状态
  107.             OnBtnChange(){
  108.                 if((this.username && this.password) || (this.phone && this.checknum)){
  109.                     this.disabled=false;
  110.                     return;
  111.                 }
  112.                 this.disabled=true;
  113.             },
  114.             // 切换登陆状态
  115.             changeStatus() {
  116.                 this.initInput();
  117.                 this.status = !this.status;
  118.             },
  119.             back() {
  120.                 console.log('返回上一步');
  121.             },
  122.             submit() {
  123.                 console.log('提交登陆');
  124.             }
  125.         }
  126.     }
  127. </script>
  129. <style>
  130.     @import url('@/common/form.css');
  132.     .login-padding {
  133.         padding: 20upx;
  134.     }
  136.     .login-font-color {
  137.         color: #BBBBBB;
  138.     }
  140.     .loginhead {
  141.         width: 100%;
  142.         margin-top: -5upx;
  143.     }
  145.     .icon-guanbi {
  146.         position: fixed;
  147.         top: 60upx;
  148.         left: 30upx;
  149.         font-size: 40upx;
  150.         font-weight: bold;
  151.         color: #332F0A;
  152.         z-index: 100;
  153.     }
  155.     .other-login-title {
  156.         position: relative;
  157.     }
  159.     .other-login-title::before,
  160.     .other-login-title::after {
  161.         content: '';
  162.         position: absolute;
  163.         background: #CCCCCC;
  164.         height: 1upx;
  165.         width: 100upx;
  166.         top: 50%;
  167.     }
  169.     .other-login-title::before {
  170.         left: 25%;
  171.     }
  173.     .other-login-title::after {
  174.         right: 25%;
  175.     }
  177.     .login-input-box {
  178.         position: relative;
  179.     }
  181.     .login-input-box .forget-input {
  182.         padding-right: 150upx;
  183.     }
  185.     .login-input-box .forget {
  186.         position: absolute;
  187.         right: 0;
  188.         top: 0;
  189.         height: 100%;
  190.         width: 150upx;
  191.         /* background: yellow; */
  192.         z-index: 100;
  193.     }
  195.     .login-input-box .phone {
  196.         position: absolute;
  197.         left: 0;
  198.         top: 0;
  199.         height: 100%;
  200.         width: 100upx;
  201.         z-index: 100;
  202.         font-weight: bold;
  203.     }
  205.     .login-input-box .phone-input {
  206.         padding-left: 100upx;
  207.     }
  209.     .yanzhengma view {
  210.         background: #EEEEEE;
  211.         border-radius: 10upx;
  212.         font-size: 25upx;
  213.         width: 150upx;
  214.         padding: 10upx 0;
  215.     }
  216. </style>

结束