tbtools-注册、登录

htmldev/TBTools/src/views/modules/account/login.vue

@@ -41,10 +41,10 @@ export default {
   data () {
     return {
       dataForm: {
-        userPhone: '18768452697',
-        userPassword: '123456',
+        userPhone: '',
+        userPassword: '',
         uuid: '',
-        captcha: '123456'
+        captcha: ''
       },
       dataRule: {
         userPhone: [

htmldev/TBTools/src/views/modules/account/register.vue

@@ -6,27 +6,38 @@
           <span>注册</span>
         </h3>
         <el-form
-          :model="ruleForm2"
+          :model="dataForm"
           status-icon
-          :rules="rules2"
-          ref="ruleForm2"
+          :rules="rules"
+          ref="dataForm"
           label-width="0"
           class="demo-ruleForm">
           <el-form-item prop="tel">
-            <el-input v-model="ruleForm2.tel" auto-complete="off" placeholder="请输入手机号"></el-input>
+            <el-input v-model="dataForm.tel" auto-complete="off" placeholder="请输入手机号"></el-input>
+          </el-form-item>
+          <el-form-item prop="captcha">
+            <el-row :gutter="20">
+              <el-col :span="17">
+                <el-input v-model="dataForm.captcha" placeholder="图形验证码">
+                </el-input>
+              </el-col>
+              <el-col :span="7" class="login-captcha">
+                <img :src="captchaPath" @click="getCaptcha()" alt="">
+              </el-col>
+            </el-row>
           </el-form-item>
           <el-form-item prop="smscode" class="code">
-            <el-input v-model="ruleForm2.smscode" placeholder="验证码"></el-input>
-            <el-button type="primary" :disabled='isDisabled' @click="sendCode">{{ buttonText }}</el-button>
+            <el-input v-model="dataForm.smscode" placeholder="验证码"></el-input>
+            <el-button type="primary" :disabled='isDisabled' @click="sendCode('dataForm')">{{ buttonText }}</el-button>
           </el-form-item>
           <el-form-item prop="pass">
-            <el-input type="password" v-model="ruleForm2.pass" auto-complete="off" placeholder="输入密码"></el-input>
+            <el-input type="password" v-model="dataForm.pass" auto-complete="off" placeholder="输入密码"></el-input>
           </el-form-item>
           <el-form-item prop="checkPass">
-            <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="确认密码"></el-input>
+            <el-input type="password" v-model="dataForm.checkPass" auto-complete="off" placeholder="确认密码"></el-input>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="submitForm('ruleForm2')" style="width:100%;">注册</el-button>
+            <el-button type="primary" @click="submitForm('dataForm')" style="width:100%;">注册</el-button>
             <p class="login" @click="gotoLogin">已有账号？立即登录</p>
           </el-form-item>
         </el-form>
@@ -35,7 +46,8 @@
   </div>
 </template>
 <script>
-import { isMobile, isSmscode } from '@/utils/validate.js'
+import { isMobile, isSmscode } from '@/utils/validate'
+import { getUUID } from '@/utils'
 
 export default {
   name: 'Register',
@@ -65,8 +77,8 @@ export default {
       if (value === '') {
         callback(new Error('请输入密码'))
       } else {
-        if (this.ruleForm2.checkPass !== '') {
-          this.$refs.ruleForm2.validateField('checkPass')
+        if (this.dataForm.checkPass !== '') {
+          this.$refs.dataForm.validateField('checkPass')
         }
         callback()
       }
@@ -75,33 +87,44 @@ export default {
     let validatePass2 = (rule, value, callback) => {
       if (value === '') {
         callback(new Error('请再次输入密码'))
-      } else if (value !== this.ruleForm2.pass) {
+      } else if (value !== this.dataForm.pass) {
         callback(new Error('两次输入密码不一致!'))
       } else {
         callback()
       }
     }
     return {
-      ruleForm2: {
+      dataForm: {
+        uuid: '',
+        captcha: '',
         pass: '',
         checkPass: '',
         tel: '',
         smscode: ''
       },
-      rules2: {
+      rules: {
         pass: [{ validator: validatePass, trigger: 'change' }],
         checkPass: [{ validator: validatePass2, trigger: 'change' }],
         tel: [{ validator: checkTel, trigger: 'change' }],
-        smscode: [{ validator: checkSmscode, trigger: 'change' }]
+        smscode: [{ validator: checkSmscode, trigger: 'change' }],
+        captcha: [{ required: true, message: '请输入图形验证码', trigger: 'blur' }]
       },
       timer: null,
       numCount: 60,
       buttonText: '发送验证码',
       isDisabled: false, // 是否禁止点击发送验证码按钮
-      flag: true
+      captchaPath: ''
     }
   },
+  created () {
+    this.getCaptcha()
+  },
   methods: {
+    // 获取图形验证码
+    getCaptcha () {
+      this.dataForm.uuid = getUUID()
+      this.captchaPath = this.$http.adornUrl(`/api/captcha?uuid=${this.dataForm.uuid}`)
+    },
     funCutDown () {
       let numCount = this.numCount
       clearInterval(this.timer)
@@ -111,7 +134,6 @@ export default {
           this.numCount = 0
           this.buttonText = '重新获取'
           this.isDisabled = false
-          this.flag = true
           return
         }
         numCount--
@@ -120,28 +142,69 @@ export default {
       }, 1000)
     },
     // 发送验证码
-    sendCode () {
-      const { tel } = this.ruleForm2
-      if (!isMobile(tel)) {
-        this.$message('请输入正确的手机号码')
+    sendCode (dataForm) {
+      const { tel, captcha } = this.dataForm
+      let errList = []
+      this.$refs[dataForm].validateField(['tel', 'captcha'], (valid) => {
+        if (valid) {
+          errList.push(valid)
+        }
+      })
+      if (errList.length) {
         return
       }
-      this.buttonText = '已发送'
-      this.isDisabled = true
-      if (this.flag) {
-        this.flag = false
-        this.funCutDown()
+      if (this.isDisabled) {
+        return
       }
+      this.isDisabled = true
+      this.buttonText = '已发送'
+      this.funCutDown()
+      this.$http({
+        url: this.$http.adornUrl('/sendMsg'),
+        method: 'GET',
+        params: this.$http.adornParams({
+          'cellphone': tel,
+          'type': 0,
+          'captcha': captcha
+        })
+      }).then(({ data }) => {
+        if (data.status) {
+          this.$message.success('发送成功')
+          return
+        }
+        this.$message.error(data.msg)
+      }).catch(() => {
+        this.getCaptcha()
+        clearInterval(this.timer)
+        this.numCount = 0
+        this.buttonText = '重新获取'
+        this.isDisabled = false
+      })
     },
     // 提交注册
     submitForm (formName) {
       this.$refs[formName].validate(valid => {
         if (valid) {
-          setTimeout(() => {
-            alert('注册成功')
-          }, 400)
-        } else {
-          return false
+          this.$http({
+            url: this.$http.adornUrl('/user/register'),
+            method: 'post',
+            data: this.$http.adornData({
+              'cellphone': this.dataForm.tel,
+              'password': this.dataForm.pass,
+              'repeatPassword': this.dataForm.checkPass,
+              'code': this.dataForm.smscode,
+              'uuid': this.dataForm.uuid
+            })
+          }).then(({ data }) => {
+            if (data.status) {
+              this.$message.success(data.msg)
+              this.$router.replace({ name: 'login' })
+              return
+            }
+            this.$message.error(data.msg)
+          }).catch(() => {
+            this.getCaptcha()
+          })
         }
       })
     },
@@ -215,6 +278,18 @@ export default {
   width: 160px;
 }
 
+.login-captcha {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  overflow: hidden;
+
+  > img {
+    height: 36px;
+    cursor: pointer;
+  }
+}
+
 .code {
   /deep/ .el-form-item__content {
     display: flex;