开始

获取验证码功能。点击获取验证码，变成倒计时60秒。60秒后又恢复获取验证码按钮的状态。
image.png
默认是0秒。
image.png

  1. codetime:0

image.png

  1. {{!codetime?'获取验证码':codetime}}

加一个倒计时的秒
image.png

  1. {{!codetime?'获取验证码':codetime+'s'}}

增加点击事件
image.png

  1. @tap="getCheckNum">

image.pngimage.png

image.png
image.png

可以把提示关闭，直接返回。
image.png

  1. // 获取验证码
  2.             getCheckNum() {
  3.                 if (this.codetime > 0) {
  4.                     return;
  5.                 }
  6.                 // 请求服务器，发送验证码
  7.                 // 发送成功，开启倒计时
  8.                 this.codetime = 10;
  9.                 let timer = setInterval(() => {
  10.                     this.codetime--;
  11.                     if (this.codetime < 1) {
  12.                         clearInterval(timer);
  13.                         this.codetime = 0;
  14.                     }
  15.                 }, 1000);
  16.             },

本节代码

  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" class="uni-input common-input" placeholder="昵称/手机号/邮箱" />
  17.                 </view>
  19.                 <view class="login-input-box">
  20.                     <view class="login-input-box">
  21.                         <input type="text" v-model="password" class="uni-input common-input forget-input"
  22.                             placeholder="请输入密码" />
  23.                         <view class="forget u-f-ajc login-font-color">忘记密码</view>
  24.                     </view>
  25.                 </view>
  26.             </template>
  28.             <template v-else>
  29.                 <view class="login-input-box">
  30.                     <view class="phone u-f-ajc">+86</view>
  31.                     <input type="text" v-model="phone" class="uni-input common-input phone-input" placeholder="手机号" />
  32.                 </view>
  34.                 <view class="login-input-box">
  35.                     <input type="text" v-model="checknum" class="uni-input common-input forget-input"
  36.                         placeholder="验证码" />
  37.                     <view class="forget u-f-ajc login-font-color yanzhengma" @tap="getCheckNum">
  38.                         <view class="u-f-ajc">
  39.                             {{!codetime?'获取验证码':codetime+'s'}}
  40.                         </view>
  41.                     </view>
  42.                 </view>
  43.             </template>
  46.             <button class="user-set-btn" :class="{'user-set-btn-disable':disabled}" :loading="loading" @tap="submit"
  47.                 type="primary" :disabled="disabled">登陆</button>
  48.         </view>
  49.         <!-- 登陆状态切换 -->
  50.         <view class="login-status u-f-ajc login-padding" @tap="changeStatus">
  51.             {{status?'账号密码登陆':'验证码登陆'}}
  52.             <view class="icon iconfont icon-jinru"></view>
  53.         </view>
  54.         <!-- 第三方登陆 -->
  55.         <view class="other-login-title u-f-ajc login-padding">第三方登陆</view>
  57.         <other-login></other-login>
  58.         <!-- 协议 -->
  59.         <view class="login-rule u-f-ajc login-padding login-font-color">
  60.             注册即代表您同意<view class="login-font-color">《XXXX协议》</view>
  61.         </view>
  62.     </view>
  63. </template>
  65. <script>
  66.     import otherLogin from '@/components/home/other-login.vue';
  67.     export default {
  68.         components: {
  69.             otherLogin
  70.         },
  71.         data() {
  72.             return {
  73.                 status: false, // false代表账号密码登陆， true手机验证码登陆
  74.                 disabled: true,
  75.                 loading: false,
  76.                 username: '',
  77.                 password: '',
  78.                 phone: '',
  79.                 checknum: '',
  80.                 codetime: 0
  81.             }
  82.         },
  83.         watch: {
  84.             username(val) {
  85.                 this.OnBtnChange();
  86.             },
  87.             password(val) {
  88.                 this.OnBtnChange();
  89.             },
  90.             phone(val) {
  91.                 this.OnBtnChange();
  92.             },
  93.             checknum(val) {
  94.                 this.OnBtnChange();
  95.             }
  96.         },
  97.         methods: {
  98.             // 获取验证码
  99.             getCheckNum() {
  100.                 if (this.codetime > 0) {
  101.                     return;
  102.                 }
  103.                 // 请求服务器，发送验证码
  104.                 // 发送成功，开启倒计时
  105.                 this.codetime = 10;
  106.                 let timer = setInterval(() => {
  107.                     this.codetime--;
  108.                     if (this.codetime < 1) {
  109.                         clearInterval(timer);
  110.                         this.codetime = 0;
  111.                     }
  112.                 }, 1000);
  113.             },
  114.             // 初始化表单
  115.             initInput() {
  116.                 this.username = '';
  117.                 this.password = '';
  118.                 this.phone = '';
  119.                 this.checknum = '';
  120.             },
  121.             // 改变按钮状态
  122.             OnBtnChange() {
  123.                 if ((this.username && this.password) || (this.phone && this.checknum)) {
  124.                     this.disabled = false;
  125.                     return;
  126.                 }
  127.                 this.disabled = true;
  128.             },
  129.             // 切换登陆状态
  130.             changeStatus() {
  131.                 this.initInput();
  132.                 this.status = !this.status;
  133.             },
  134.             back() {
  135.                 console.log('返回上一步');
  136.             },
  137.             submit() {
  138.                 console.log('提交登陆');
  139.             }
  140.         }
  141.     }
  142. </script>
  144. <style>
  145.     @import url('@/common/form.css');
  147.     .login-padding {
  148.         padding: 20upx;
  149.     }
  151.     .login-font-color {
  152.         color: #BBBBBB;
  153.     }
  155.     .loginhead {
  156.         width: 100%;
  157.         margin-top: -5upx;
  158.     }
  160.     .icon-guanbi {
  161.         position: fixed;
  162.         top: 60upx;
  163.         left: 30upx;
  164.         font-size: 40upx;
  165.         font-weight: bold;
  166.         color: #332F0A;
  167.         z-index: 100;
  168.     }
  170.     .other-login-title {
  171.         position: relative;
  172.     }
  174.     .other-login-title::before,
  175.     .other-login-title::after {
  176.         content: '';
  177.         position: absolute;
  178.         background: #CCCCCC;
  179.         height: 1upx;
  180.         width: 100upx;
  181.         top: 50%;
  182.     }
  184.     .other-login-title::before {
  185.         left: 25%;
  186.     }
  188.     .other-login-title::after {
  189.         right: 25%;
  190.     }
  192.     .login-input-box {
  193.         position: relative;
  194.     }
  196.     .login-input-box .forget-input {
  197.         padding-right: 150upx;
  198.     }
  200.     .login-input-box .forget {
  201.         position: absolute;
  202.         right: 0;
  203.         top: 0;
  204.         height: 100%;
  205.         width: 150upx;
  206.         /* background: yellow; */
  207.         z-index: 100;
  208.     }
  210.     .login-input-box .phone {
  211.         position: absolute;
  212.         left: 0;
  213.         top: 0;
  214.         height: 100%;
  215.         width: 100upx;
  216.         z-index: 100;
  217.         font-weight: bold;
  218.     }
  220.     .login-input-box .phone-input {
  221.         padding-left: 100upx;
  222.     }
  224.     .yanzhengma view {
  225.         background: #EEEEEE;
  226.         border-radius: 10upx;
  227.         font-size: 25upx;
  228.         width: 150upx;
  229.         padding: 10upx 0;
  230.     }
  231. </style>

结束