增加验证码

assets/css/base.css

@@ -22,6 +22,15 @@ textarea {
   border-radius: 0;
   font: inherit;
 }
+::placeholder {
+  color: #999;
+}
+.line-clamp {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
 .main-layout {
   max-width: 750px;
   min-height: 100vh;

components/ApplyForm.vue

@@ -10,13 +10,20 @@
       </div>
       <div class="form-item">
         <select class="form-select" placeholder="请选择项目" v-model="ruleForm.project_id">
+          <option value="" disabled selected>请选择项目</option>
           <option v-for="(item, index) in projectList" :value="item.value" :key="index">{{ item.label }}</option>
         </select>
       </div>
-      <!-- <div class="form-item">
-        <input type="text" class="form-input" placeholder="请输入短信验证码" maxlength="4" v-model="ruleForm.code" />
-        <input type="button" value="获取验证码" class="form-button" />
-      </div> -->
+      <div class="form-item">
+        <input type="text" class="form-input" placeholder="请输入短信验证码" maxlength="4" v-model="phoneCode" />
+        <input
+          type="button"
+          class="form-button"
+          :disabled="codeButtonDisabled"
+          :value="buttonText"
+          @click="onSendCode"
+        />
+      </div>
       <div class="form-item">
         <input type="button" value="立即预约" class="form-button" @click="onSbumit" />
       </div>
@@ -38,12 +45,15 @@ export default {
         { label: '教育学硕士', value: '1005' },
         { label: '中国未来金融领袖计划', value: '1007' }
       ],
-      timer: null
+      phoneCode: '',
+      codeButtonDisabled: false,
+      timer: null,
+      disabledTime: 60
     }
   },
   computed: {
     buttonText() {
-      return ''
+      return this.codeButtonDisabled ? `${this.disabledTime}秒后重发` : '获取验证码'
     }
   },
   methods: {
@@ -56,11 +66,11 @@ export default {
         this.$notify('请输入正确的手机号')
         return
       }
-      // if (!this.ruleForm.code) {
-      //   this.$notify('请输入短信验证码')
-      //   return
-      // }
-      this.handleSubmit()
+      if (!this.phoneCode) {
+        this.$notify('请输入短信验证码')
+        return
+      }
+      this.checkPhoneCode().then(this.handleSubmit)
     },
     handleSubmit() {
       api.submit(this.ruleForm).then(response => {
@@ -71,15 +81,40 @@ export default {
       })
     },
     // 校验短信验证码
-    checkPhoneCode() {},
+    checkPhoneCode() {
+      return api.checkCode({ account: this.ruleForm.phone, code: this.phoneCode })
+    },
+    onSendCode() {
+      if (!this.ruleForm.phone || !/^1[3-9]\d{9}$/.test(this.ruleForm.phone)) {
+        this.$notify('请输入正确的手机号')
+        return
+      }
+      this.sendCode()
+    },
     // 发送验证码
     sendCode() {
       this.setTimer()
+      api
+        .sendCode({ account: this.ruleForm.phone })
+        .then(() => {
+          this.$notify({ type: 'success', message: '验证码发送成功，注意查收' })
+        })
+        .catch(() => {
+          this.clearTimer()
+        })
     },
     setTimer() {
-      this.timer = setInterval(() => {}, 1000)
+      this.codeButtonDisabled = true
+      this.disabledTime = 60
+      this.timer = setInterval(() => {
+        this.disabledTime--
+        if (this.disabledTime <= 0) {
+          this.clearTimer()
+        }
+      }, 1000)
     },
     clearTimer() {
+      this.codeButtonDisabled = false
       this.timer && clearInterval(this.timer)
     }
   },
@@ -113,10 +148,13 @@ export default {
   border: none;
 }
 .form-select {
+  position: relative;
   padding: 0 10px;
   width: 100%;
   height: 38px;
-  background-color: #fff;
+  background: #fff url('https://webapp-pub.ezijing.com/www/h5/images/icon_arrows.png') no-repeat;
+  background-position: right 0.7em top 50%, 0 0;
+  background-size: 30px 30px;
   box-sizing: border-box;
   border: none;
 }

components/RightAside.vue

@@ -32,8 +32,6 @@
 </template>
 <script>
 import ApplyForm from '@/components/ApplyForm'
-// import { sendCode, checkCode, postNes } from '../plugins/api'
-const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
 export default {
   components: { ApplyForm },
   data() {

utils/httpRequest.js

 import axios from 'axios'
 import qs from 'qs'
+import { Notify } from 'vant'
 
 const httpRequest = axios.create({
   baseURL: 'https://project-api.ezijing.com',
@@ -34,33 +35,19 @@ httpRequest.interceptors.request.use(
 httpRequest.interceptors.response.use(
   function(response) {
     const { data } = response
-    if (data.msg) {
-      if (data.msg === '请先登录') {
-        window.location.href = `${webConf.others.loginUrl}?rd=${encodeURIComponent(window.location.href)}`
-      }
-    }
-    if (parseInt(data.code) === 1) {
-      return Message.error(data.msg)
-    }
-    if (data.code) {
-      if (data.code === 4001) {
-        window.location.href = `${webConf.others.loginUrl}?rd=${encodeURIComponent(window.location.href)}`
-      }
-      return data.message ? Message.error(data.message) : Message.error(data.msg)
+    if (parseInt(data.code)) {
+      Notify(data.msg)
+      return Promise.reject(data)
     }
     return data
   },
   function(error) {
     if (error.response) {
-      const { status, message } = error.response.data
-      // 未登录
-      if (status === 403) {
-        window.location.href = `${webConf.others.loginUrl}?rd=${encodeURIComponent(window.location.href)}`
-      }
-      Message.error(message || error.response.data)
+      const { message } = error.response.data
+      Notify(message || error.response.data)
       return Promise.reject(error.response)
     } else {
-      Message.error(error)
+      Notify(error)
     }
     return Promise.reject(error)
   }