封装发送验证码倒计时

src/assets/css/sprite.less

@@ -4,5 +4,8 @@
 .icon-bg-navigation { width: 828px; height: 176px; background-position: -848px -206px; }
 .icon-bg-search { width: 828px; height: 186px; background-position: -848px 0px; }
 .icon-logo { width: 224px; height: 224px; background-position: -848px -402px; }
-.icon-user-question { width: 32px; height: 36px; background-position: -1192px -402px; }
-.icon-wechat { width: 80px; height: 78px; background-position: -1092px -402px; }
\ No newline at end of file
+.icon-user-question { width: 32px; height: 36px; background-position: -1360px -402px; }
+.icon-wechat { width: 80px; height: 78px; background-position: -1092px -402px; }
+.icon-user { width: 36px; height: 36px; background-position: -1192px -402px; }
+.icon-password { width: 36px; height: 36px; background-position: -1248px -402px; }
+.icon-verification { width: 36px; height: 36px; background-position: -1304px -402px; }
\ No newline at end of file

src/components/SendVerificationCode.vue

+<template>
+  <div>
+    <div class="sendCodeText" @click="sendCode" v-show="show">获取验证码</div>
+    <div class="coutdDownText" v-show="!show"><span class="second">{{time}}s</span>后重新获取</div>
+  </div>
+</template>
+<script>
+import utils from "@/utils/";
+export default {
+  name: 'SendVerificationCode',
+  props: {
+    coutDownNumber: {
+      type: Number,
+      default: 60
+    },
+    phone: {
+      type: [Number, String],
+    },
+    data: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      show: true,
+      time: 60
+    }
+  },
+  methods: {
+    // 发送验证码
+    sendCode() {
+      // 判断手机号不能为空
+      if (!this.phone) {
+        Toast('请输入手机号')
+        return
+      }
+
+      if (!utils.phoneRegCheck(this.phone)) {
+        Toast("请输入正确的手机号码！");
+        return
+      }
+
+      this.time = this.coutDownNumber
+      this.show = false // 显示倒计时
+      let timer = null;
+      if (timer) {
+        clearInterval(timer);
+      }
+      timer = setInterval(() => {
+        console.log(this.time)
+        if (this.time > 0 && this.time <= this.coutDownNumber) {
+
+          this.time--;
+        } else {
+          this.show = true
+          this.time = this.coutDownNumber
+          clearInterval(timer);
+          timer = null;
+        }
+      }, 1000);
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.sendCodeText {
+  color: #106abc;
+}
+.coutdDownText {
+  color: #9c9c9c;
+  font-size: 12px;
+  .second {
+    color: #106abc;
+    font-size: 16px;
+  }
+}
+</style>
\ No newline at end of file

src/components/UserCommon.vue

@@ -20,7 +20,7 @@ export default {
   background-image: url(../assets/icon/bg_login.png);
   background-repeat: no-repeat;
   background-size: 100%;
-  height: 450px;
+  height: 250px;
 }
 .logo {
   display: flex;

src/utils/index.js

@@ -12,6 +12,12 @@ const handlePromise = (promise) => {
     })
 }
 
-export {
-    handlePromise
+const phoneRegCheck = (phoneNo) => {
+    const mobileReg = /1[3-9]\d{9}/;
+    return mobileReg.test(phoneNo);
+  }
+
+export default {
+    handlePromise,
+    phoneRegCheck
 }
\ No newline at end of file

src/utils/vant-ui.js

@@ -16,7 +16,8 @@ import {
   ActionSheet,
   Button,
   Step,
-  Steps
+  Steps,
+  Checkbox
 } from 'vant'
 
 import NafmHeader from '@/components/NafmHeader'
@@ -26,7 +27,7 @@ import FooterBottom from '@/components/FooterBottom'
 [NafmHeader, FooterBottom].forEach(item => Vue.component(item.name, item));
 
 // 默认vant组件
-[Loading, Lazyload, Tab, Tabs, Toast, Dialog, Icon, Form, Field, Switch, Overlay, Cell, CellGroup, ActionSheet, Button, Step, Steps].forEach(item => Vue.use(item))
+[Loading, Lazyload, Tab, Tabs, Toast, Dialog, Icon, Form, Field, Switch, Overlay, Cell, CellGroup, ActionSheet, Button, Step, Steps, Checkbox].forEach(item => Vue.use(item))
 
 // 先预制，后期做统一调整
 Object.assign(window, {

src/views/user/login.vue

@@ -2,25 +2,62 @@
   <div class="login_container">
     <UserCommon>
       <template slot="top">
-        <NafmHeader :isBgImg="false" bgColor="transparent"/>
+        <NafmHeader :isBgImg="false" bgColor="transparent" />
       </template>
     </UserCommon>
+    <div class="login_content">
+      <van-tabs @click="switchTab" :border="false" class="login_tabs" v-model="tabActive" swipeable>
+        <van-tab title="手机号登录" :name="1">
+          <div class="login_form">
+            <van-field v-model="userName" clearable type="tel" maxlength="11" :left-icon="userNameIcon" placeholder="请输入手机号" />
+            <van-field v-model="password" clearable label="" maxlength="16" :left-icon="passwordIcon" placeholder="请输入6-16位密码">
+              <template #button>
+                <SendVerificationCode :phone="userName" />
+              </template>
+            </van-field>
+            <div></div>
+          </div>
+        </van-tab>
+        <van-tab title="账号密码登录" :name="2">
+          <div class="login_form">
+            <van-field v-model="userName" clearable type="tel" maxlength="11" :left-icon="userNameIcon" placeholder="请输入手机号" />
+            <van-field v-model="password" clearable label="" maxlength="16" :left-icon="passwordIcon" placeholder="请输入6-16位密码" />
+            <div class="form_second">
+              <van-checkbox v-model="checked" checked-color="#106abc" class="checkbox" shape="square" icon-size="12px">记住密码</van-checkbox>
+              <span class="forget">忘记密码</span>
+            </div>
+          </div>
+        </van-tab>
+      </van-tabs>
+    </div>
   </div>
 </template>
 <script>
 import UserCommon from '@/components/UserCommon'
+import SendVerificationCode from '@/components/SendVerificationCode'
 export default {
   name: 'Login',
-  components:{
-    UserCommon
+  components: {
+    UserCommon,
+    SendVerificationCode
   },
   data() {
-    return {}
+    return {
+      tabActive: 1,
+      userName: null,
+      password: "",
+      checked: false,
+      userNameIcon: require('@/assets/icon/user.png'),
+      passwordIcon: require('@/assets/icon/password.png'),
+    }
   },
   methods: {
-    handleBack(){
+    handleBack() {
       this.$router.back()
-    }
+    },
+    switchTab(name) {
+      this.tabActive = name
+    },
   }
 }
 </script>
@@ -30,4 +67,42 @@ export default {
   height: 100%;
   font-size: 40px;
 }
+.login_content {
+  margin-top: 40px;
+}
+/deep/ .van-tabs__nav--line {
+  width: 60%;
+  margin: 0 auto;
+}
+/deep/ .van-tab {
+  border-bottom: 1px solid #b8cfe5;
+}
+/deep/ .van-tabs__line {
+  bottom: 4px;
+}
+.login_form {
+  margin: 30px 42px 0 42px;
+}
+/deep/ .van-cell:not(:last-child)::after {
+  border-bottom: 1px solid #efefef;
+}
+.form_second {
+  margin-top: 10px;
+  display: flex;
+  justify-content: space-between;
+  color: #999;
+  .checkbox {
+    margin-left: 20px;
+    /deep/ .van-checkbox__label {
+      color: #999;
+    }
+  }
+  .forget {
+    text-decoration: underline;
+  }
+}
+
+// /deep/ .van-field__body input::-webkit-input-placeholder {
+//   color: #8F9196;
+// }
 </style>
\ No newline at end of file