发送短信增加滑块验证码

config/index.js

@@ -13,7 +13,7 @@ module.exports = {
     proxyTable: {
       '/api': {
         // target: 'http://192.168.2.234:8096',//后端接口地址
-        target: 'http://122.14.50.6:8096',//后端接口地址
+        target: 'http://localhost:8096',//后端接口地址
         changeOrigin: true,//是否允许跨越
         pathRewrite: {
             '^/api': '',//重写,

package.json

@@ -14,10 +14,11 @@
   },
   "dependencies": {
     "ajv": "^6.5.3",
-    "axios": "^0.18.0",
+    "axios": "^0.18.1",
     "babel-preset-es2015": "^6.24.1",
     "blueimp-md5": "^2.10.0",
     "cnpm": "^6.0.0",
+    "crypto-js": "^4.0.0",
     "element-ui": "^2.10.1",
     "js-cookie": "^2.2.0",
     "less": "^3.9.0",

src/API.js

@@ -6,7 +6,7 @@ export function getHotWordAPI(params) {
         url: `${requestPath.common}/hotsw/list`,
         method: 'get',
         params
-    }) 
+    })
 }
 
 export function getAutocompleteAPI(params) {
@@ -999,11 +999,11 @@ export function getBulletin(params) {
     params
   })
 }
- 
+
 // 快捷登录获取验证码
 export function sendPhoneAPI(data) {
     return request({
-        url: `${requestPath.getPhoneCode}/permissions/sendPhoneMsg`,
+        url: `${requestPath.common}/permissions/sendPhoneMsg`,
         method: 'post',
         data
     })

src/components/verifition/Verify/VerifyCode.vue

+<template>
+    <div class="cerify-code-panel">
+        <div class="verify-code"
+             @click="setCode"
+             :style="{
+                    'width': width,
+                    'height': height,
+                    'line-height': height,
+                    'font-size': fontSize,
+                    'background-color': containerBackgroundColor,
+                    'color': containerColor
+                }">
+            <!-- 显示字符串 -->
+            <span :style="code.style" v-for="(code,index) in codeShow" :key="index">
+                {{code.char || code}}
+            </span>
+        </div>
+        <div class="verify-code-area" :style="{'width': width}">
+            <div class="verify-input-area">
+                <input type="text" v-model="inputValue" class="varify-input-code"/>
+            </div>
+            <div class="verify-change-area" @click="setCode"><a class="verify-change-code">换一张</a></div>
+        </div>
+    </div>
+</template>
+<script type="text/babel">
+    /**
+     * Code
+     * @description 常规的图片文字识别或者数字计算
+     * */
+    import {_code_chars, _code_color1, _code_color2} from './../utils/util'
+
+    export default {
+        name: 'VerifyCode',
+        props: {
+            type: {
+                type: String,
+                default: '1'
+            },
+            //位数，仅在type=2时生效
+            figure: {
+                type: Number,
+                default: 100
+            },
+            //算法，支持加减乘，0为随机，仅在type=2时生效
+            arith: {
+                type: Number,
+                default: 0
+            },
+            width: {
+                type: String,
+                default: '200px'
+            },
+            height: {
+                type: String,
+                default: '60px'
+            },
+            fontSize: {
+                type: String,
+                default: '30px'
+            },
+            codeLength: {
+                type: Number,
+                default: 6
+            }
+        },
+        data() {
+            return {
+                isEnd: false,
+                // 输入的值
+                inputValue: '',
+                // 颜色
+                containerBackgroundColor: '#fff',
+                containerColor: '#fff',
+
+                codeChose: '', // 应该输入的code
+                codeShow: [] // 显示用的
+            }
+        },
+        methods: {
+            init() {
+                this.setCode()
+
+                this.$parent.$emit('ready', this)
+            },
+
+            /**
+             * setCode
+             * @description 设置验证码
+             * */
+            setCode() {
+                if (this.isEnd == false) {
+
+                    this.containerBackgroundColor = _code_color1[Math.floor(Math.random() * 3)]
+                    this.containerColor = _code_color2[Math.floor(Math.random() * 5)]
+
+                    this.inputValue = ''
+
+                    this.codeShow = []
+                    this.codeChose = ''
+
+                    if (this.type === '1') {		//普通验证码 图片选择
+                        for (var i = 0; i < this.codeLength; i++) {
+                            var charNum = Math.floor(Math.random() * 52)
+                            var tmpStyle = (charNum % 2 == 0) ? "font-style:italic;margin-right: 10px" : "font-weight:bolder"
+                            tmpStyle += (Math.floor(Math.random() * 2) == 1) ? "font-weight:bolder" : ""
+
+                            this.codeChose += _code_chars[charNum]
+                            this.codeShow.push({
+                                style: tmpStyle,
+                                char: _code_chars[charNum]
+                            })
+                        }
+                    } else if (this.type === '2') {
+                        // 算法验证码
+                        var num1 = Math.floor(Math.random() * this.figure)
+                        var num2 = Math.floor(Math.random() * this.figure)
+
+                        let codeShow = ''
+
+                        if (this.arith == 0) {
+                            var tmparith = Math.floor(Math.random() * 3)
+                        }
+
+                        switch (tmparith) {
+                            case 1 :
+                                this.codeChose = parseInt(num1) + parseInt(num2)
+                                codeShow = num1 + ' + ' + num2 + ' = ?'
+                                break
+                            case 2 :
+                                if (parseInt(num1) < parseInt(num2)) {
+                                    var tmpnum = num1
+                                    num1 = num2
+                                    num2 = tmpnum
+                                }
+                                this.codeChose = parseInt(num1) - parseInt(num2)
+                                codeShow = num1 + ' - ' + num2 + ' = ?'
+                                break
+                            default :
+                                this.codeChose = parseInt(num1) * parseInt(num2)
+                                codeShow = num1 + ' × ' + num2 + ' = ?'
+                                break
+                        }
+
+                        this.codeShow = codeShow.split('') // 转数组
+                    }
+                }
+            },
+            /**
+             * checkCode
+             * @description 验证验证码
+             * */
+            checkCode() {
+                let inputValue
+                let codeChose
+                if (this.type === '1') {		//普通验证码
+                    inputValue = this.inputValue.toUpperCase()
+                    codeChose = this.codeChose.toUpperCase()
+                } else {
+                    inputValue = this.inputValue
+                    codeChose = this.codeChose
+                }
+
+                console.log(inputValue)
+                console.log(codeChose)
+                console.log(inputValue == codeChose)
+
+                if (inputValue == codeChose) {
+                    this.isEnd = true
+                    this.$parent.$emit('success', this)
+                } else {
+                    this.$parent.$emit('error', this)
+                    this.setCode()
+                }
+            },
+            /**
+             * refresh
+             * @description 刷新
+             * */
+            refresh() {
+                this.isEnd = false
+                this.inputValue = ''
+                this.setCode()
+            }
+        },
+        watch: {
+            // type变化则全面刷新
+            type: {
+                immediate: true,
+                handler() {
+                    this.init()
+                }
+            }
+        },
+        mounted() {
+            // 禁止拖拽
+            this.$el.onselectstart = function () {
+                return false
+            }
+        },
+        i18n: {
+            messages: {
+                'en-US': {},
+                'zh-CN': {}
+            }
+        }
+    }
+</script>
\ No newline at end of file

src/components/verifition/api/index.js

+/**
+ * 此处可直接引用自己项目封装好的 axios 配合后端联调
+ */
+//import request from '@/utils/request'
+import {requestPath,uploadUrl,uploadPath,order,common,myorder,uploadUrlFile} from '@/utils/global.js'
+ import request from "./../utils/axios"  //组件内部封装的axios
+// import request from "@/api/axios.js"       //调用项目封装的axios
+
+//获取验证图片  以及token
+export function reqGet(data) {
+	return  request({
+        url: `${requestPath.sysuser}/captcha/get`,
+        method: 'post',
+        data
+    })
+}
+
+//滑动或者点选验证
+export function reqCheck(data) {
+	return  request({
+        url: `${requestPath.sysuser}/captcha/check`,
+        method: 'post',
+        data
+    })
+}
+
+

src/components/verifition/utils/ase.js

+import CryptoJS from 'crypto-js'
+/**
+ * @word 要加密的内容
+ * @keyWord String  服务器随机返回的关键字
+ *  */
+export function aesEncrypt(word,keyWord="XwKsGlMcdPMEhR1B"){
+  var key = CryptoJS.enc.Utf8.parse(keyWord);
+  var srcs = CryptoJS.enc.Utf8.parse(word);
+  var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
+  return encrypted.toString();
+}

src/components/verifition/utils/axios.js

+import axios from 'axios';
+
+axios.defaults.baseURL = process.env.BASE_API;
+
+const service = axios.create({
+  timeout: 40000,
+  headers: {
+    'X-Requested-With': 'XMLHttpRequest',
+    'Content-Type': 'application/json; charset=UTF-8'
+  },
+})
+service.interceptors.request.use(
+  config => {
+    return config
+  },
+  error => {
+    Promise.reject(error)
+  }
+)
+
+// response interceptor
+service.interceptors.response.use(
+  response => {
+    const res = response.data;
+    return res
+  },
+  error => {
+  }
+)
+export default service

src/components/verifition/utils/util.js

+export function resetSize(vm) {
+    var img_width, img_height, bar_width, bar_height;	//图片的宽度、高度，移动条的宽度、高度
+
+    var parentWidth = vm.$el.parentNode.offsetWidth || window.offsetWidth
+    var parentHeight = vm.$el.parentNode.offsetHeight || window.offsetHeight
+
+    if (vm.imgSize.width.indexOf('%') != -1) {
+        img_width = parseInt(this.imgSize.width) / 100 * parentWidth + 'px'
+    } else {
+        img_width = this.imgSize.width;
+    }
+
+    if (vm.imgSize.height.indexOf('%') != -1) {
+        img_height = parseInt(this.imgSize.height) / 100 * parentHeight + 'px'
+    } else {
+        img_height = this.imgSize.height
+    }
+
+    if (vm.barSize.width.indexOf('%') != -1) {
+        bar_width = parseInt(this.barSize.width) / 100 * parentWidth + 'px'
+    } else {
+        bar_width = this.barSize.width
+    }
+
+    if (vm.barSize.height.indexOf('%') != -1) {
+        bar_height = parseInt(this.barSize.height) / 100 * parentHeight + 'px'
+    } else {
+        bar_height = this.barSize.height
+    }
+
+    return {imgWidth: img_width, imgHeight: img_height, barWidth: bar_width, barHeight: bar_height}
+}
+
+export const _code_chars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
+export const _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0']
+export const _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC']
\ No newline at end of file

src/utils/global.js

 export const requestPath = {
     common: '/sysuser/fg',
+    sysuser: '/sysuser',
     // common: '/bg',
     book: '/book/fg',
     stock: '/repertory/fg',

src/views/Index.vue

@@ -11,7 +11,7 @@
                 :src="'http://122.14.50.6:8097/file/' + item.picture">-->
                 <img :src="`${uploadUrl}${item.picture}`"></a>
             </li>
-          </ul> 
+          </ul>
           <ul id="icon_num" class="icon_num">
             <li :class="actIndex == index && 'active'" v-for="(item, index) in advertising" :key="index"
                 @mouseover="actIndex=index"></li>
@@ -248,6 +248,12 @@
         </ul>
       </div>
     </div>
+    <Verify
+      @success="getCodeSuccess"
+      :captchaType="'blockPuzzle'"
+      :imgSize="{width:'400px',height:'200px'}"
+      ref="verify"
+    ></Verify>
     <!-- 第三方登录绑定手机号弹框 -->
     <div class='bg_content' v-if='psdDialog' >
       <div class='bg_dialog' @click='dialogClick'>
@@ -322,6 +328,7 @@
   import {errorMsg, confirmBox} from "@/utils/errorMsg.js"
   import md5 from 'blueimp-md5'
   import { errorMsg1,successMsg,warningMsg,errorMsgLogin } from "@/utils/errorMsg"
+  import Verify from '@/components/verifition/Verify'
 
   export default {
     name: 'Index',
@@ -385,6 +392,9 @@
         },
       }
     },
+    components: {
+      Verify
+    },
     methods: {
       // 监听短信验证码框变化
       onCode(){
@@ -419,13 +429,21 @@
       dialogClick(){
         event.stopPropagation()
       },
-      // 获取短信验证码 
       getCode(){
         this.$validator.validate('psdBtnClick.psdDiaName').then(res=>{
           if(res){
+            this.$refs.verify.show();
+          }
+        })
+      },
+      // 获取短信验证码
+      getCodeSuccess(params){
+        this.$validator.validate('psdBtnClick.psdDiaName').then(res=>{
+          if(res){
             this.gettingCode = true
             this.countDown = 60
-            sendPhoneAPI(this.psdDiaName).then(res=>{
+            params.phone = this.psdDiaName
+            sendPhoneAPI(params).then(res=>{
               if( res.data.code == 0 ){
                 let timer = setInterval(() => {
                   if (this.countDown > 0) {
@@ -925,7 +943,7 @@
             }else{
               Cookies.set('loginName', res.data.data.account)
               this.$store.commit('increment',res.data.data.account)
-              this.username=res.data.data.account            
+              this.username=res.data.data.account
             }
 
             if (this.$route.query.redirect) {
@@ -940,7 +958,7 @@
         });
       },
       bindThridFunction(flag){
-         
+
          if( flag ){
            this.psdDialog = false
          } else {
@@ -960,7 +978,7 @@
       if( Cookies.get('havePW') === 'false' ){
         this.psdDialog22 = true
       }
-      
+
       if (this.thirdFlagCookie.get() == 'false' || this.thirdFlagCookie.get() == false) {
         this.psdDialog = true;
       }
@@ -1003,7 +1021,7 @@
                   }
                 })
               })
-            }            
+            }
             // 绑定用户手机号
             this.bindThridFunction(res.data.data.flag);
           }

src/views/login/login.vue

@@ -68,6 +68,14 @@
                 <span>温馨提示：QQ和微信登录商城为不同账号</span>
               </div>
             </div>
+
+            <Verify
+              @success="getCodeSuccess"
+              :captchaType="'blockPuzzle'"
+              :imgSize="{width:'400px',height:'200px'}"
+              ref="verify"
+            ></Verify>
+
             <div v-show='cur==1'>
               <div class='rapidBorder'></div>
               <div class="registerTS">
@@ -135,6 +143,7 @@
   import {routerLink} from 'vue-router'
   import {Message} from 'element-ui'
   import {errorMsgLogin} from "@/utils/errorMsg"
+  import Verify from '@/components/verifition/Verify'
 
   export default {
     data() {
@@ -161,6 +170,9 @@
         md5Pass:true
       }
     },
+    components: {
+      Verify
+    },
     created(){
       // 强制设置密码
       // if( Cookies.get('havePW') == true ){
@@ -242,13 +254,21 @@
       rapidLoginClick(){
         this.underlineMove = 340
       },
-      // 获取验证码
       getCode(){
         this.$validator.validate('rapidLogin.rapidUsername').then(res=>{
           if(res){
+            this.$refs.verify.show();
+          }
+        })
+      },
+      // 获取验证码
+      getCodeSuccess(params){
+        this.$validator.validate('rapidLogin.rapidUsername').then(res=>{
+          if(res){
             this.gettingCode = true
             this.countDown = 60
-            sendPhoneAPI(this.rapidUsername).then(res=>{
+            params.phone = this.rapidUsername
+            sendPhoneAPI(params).then(res=>{
               if( res.data.status ){
                 let timer = setInterval(() => {
                   if (this.countDown > 0) {
@@ -259,6 +279,7 @@
                   }
                 }, 1000)
               }else{
+                this.gettingCode = false
                 this.$message.error(res.data.msg)
               }
             })
@@ -418,7 +439,7 @@
        * 获取用户信息*/
       getContent() {
         getFgmembergetAccountAPI().then(res => {
-          if (res.data.code == 0) { 
+          if (res.data.code == 0) {
             if(res.data.data.name){
               Cookies.set('loginName', res.data.data.name)
               this.$store.commit('increment',res.data.data.name)

src/views/login/register.vue

 <template>
+
   <div class="login_cencer" id="logindlu">
+    <Verify
+      @success="getVertifyCodeSuccess"
+      :captchaType="'blockPuzzle'"
+      :imgSize="{width:'400px',height:'200px'}"
+      ref="verify"
+    ></Verify>
     <div class="login_cencer02">
       <div class="login_cencer03">
 
@@ -96,9 +103,10 @@
   import Cookies from 'js-cookie';
   import md5 from 'blueimp-md5';
   import userAgreement from '@/views/components/userAgreement.vue';
+  import Verify from '@/components/verifition/Verify'
 
   export default {
-    components: {userAgreement},
+    components: {userAgreement, Verify},
     data() {
       return {
         username: '',
@@ -180,9 +188,30 @@
         }
         this.$validator.validate('username').then(res => {
           if (res) {
+            this.$refs.verify.show();
+          }
+        })
+      },
+      getVertifyCodeSuccess(params) {
+        let type = 1
+        if (this.username.indexOf('@') >= 0) {
+          type = 2
+          this.email = this.username
+        } else {
+          this.phone = this.username
+        }
+        this.$validator.validate('username').then(res => {
+          if (res) {
             this.gettingCode = true
             this.countDown = 60
-            msgCaptchaAPI({type: type, smsEnum: 0, phone: this.phone, email: this.email}).then(res => {
+            let obj = {
+              type: type,
+              smsEnum: 0,
+              phone: this.phone,
+              email: this.email,
+              captchaVerification: params.captchaVerification
+            }
+            msgCaptchaAPI(obj).then(res => {
               if (res.status) {
                 let timer = setInterval(() => {
                   if (this.countDown > 0) {
@@ -211,7 +240,7 @@
   /*#YSF-BTN-HOLDER{
     !*z-index: -1 !important;*!
     display: none!important;
-  }*/ 
+  }*/
   .gettingCode {
     position: relative;
     top: -30px;

src/views/personal_center/accountSecurity.vue

@@ -74,7 +74,12 @@
       </div>
     </div>
     <!-- 密码弹框结束 -->
-
+    <Verify
+      @success="getPhonecodeSuccess"
+      :captchaType="'blockPuzzle'"
+      :imgSize="{width:'400px',height:'200px'}"
+      ref="verify"
+    ></Verify>
     <!-- 更换手机号弹框 -->
     <div class="xq_dzhi_tckjxyw ysd03" id="pord02"  v-if="phoshow">
       <div class="xq_dzhi_tckj_tit">
@@ -184,7 +189,7 @@
   .xyw .xq_dzhi_tckjxyw {
     width: 560px;
     position: fixed;
-    z-index: 1366;
+    z-index: 20;
     left: 50%;
     top: 50%;
     background-color: #FFF;
@@ -212,6 +217,7 @@
   import {Message} from 'element-ui'
   import md5 from 'blueimp-md5'
   import Cookies from 'js-cookie'
+  import Verify from '@/components/verifition/Verify'
 
   export default {
     data() {
@@ -244,7 +250,7 @@
         isShowPhone: false,
       }
     },
-
+    components: {Verify},
     created() {
       this.getContent()
     },
@@ -430,15 +436,21 @@
 
       },
 
-      // 获取手机验证码
       getPhonecode() {
         if (this.phoned.phoOne != '' && !this.isShowPhone) {
+          this.$refs.verify.show();
+        }
+      },
+      // 获取手机验证码
+      getPhonecodeSuccess(params) {
+        if (this.phoned.phoOne != '' && !this.isShowPhone) {
           this.getAuthCode()
 
           msgCaptchaAPI({
             type: 1,
             smsEnum: 1,
             phone: this.phoned.phoOne,
+            captchaVerification: params.captchaVerification
             /* email:'503142833@qq.com'*/
           }).then(res => {
             res.data.code == 0 ? this.$successMsg('验证码已发送'): errorMsg.apply(this, ["", "获取验证码"]);