From 18bfa0edefdb57629647a908d949b044938c48bd Mon Sep 17 00:00:00 2001
From: mabo <mailmabo@126.com>
Date: Tue, 29 Jun 2021 14:58:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=BB=91=E5=9D=97=E9=AA=8C=E8=AF=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 buyer/src/App.vue                             |  2 +-
 buyer/src/components/verify/index.vue         | 36 +++++++++----------
 buyer/src/config/index.js                     | 16 ++++-----
 buyer/src/pages/Login.vue                     | 14 +++++---
 buyer/src/pages/SignUp.vue                    |  4 +--
 buyer/src/pages/forgetPassword.vue            |  8 +++--
 manager/src/views/login.vue                   |  6 ++--
 .../src/views/my-components/verify/index.vue  | 29 +++++++--------
 seller/src/views/login.vue                    |  4 +--
 .../src/views/my-components/verify/index.vue  | 30 ++++++++--------
 10 files changed, 77 insertions(+), 72 deletions(-)

diff --git a/buyer/src/App.vue b/buyer/src/App.vue
index 019eb1c1..56da9df3 100644
--- a/buyer/src/App.vue
+++ b/buyer/src/App.vue
@@ -31,7 +31,7 @@ export default {
 </script>
 <style lang="scss">
 #app{
-  min-height: 100%;
+  height: 100%;
   @include background_color($light_background_color);
 }
 </style>
diff --git a/buyer/src/components/verify/index.vue b/buyer/src/components/verify/index.vue
index 6dfa3be0..3004b32c 100644
--- a/buyer/src/components/verify/index.vue
+++ b/buyer/src/components/verify/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp">
+  <div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp" @click.stop>
     <div class="imgBox" :style="{width:data.originalWidth+'px',height:data.originalHeight + 'px'}">
       <img :src="data.backImage" style="width:100%;height:100%" alt="">
       <img class="slider" :src="data.slidingImage" :style="{left:distance+'px',top:data.randomY+'px'}" :width="data.sliderWidth" :height="data.sliderHeight" alt="">
@@ -38,16 +38,16 @@ export default {
       distance: 0, // 拼图移动距离
       flag: false, // 判断滑块是否按下
       downX: 0, // 鼠标按下位置
-      bgColor: 'aqua', // 滑动背景颜色
+      bgColor: '#04ad11', // 滑动背景颜色
       verifyText: '拖动滑块解锁' // 文字提示
     };
   },
   methods: {
-    mouseDown (e) { // 鼠标按下操作，
+    mouseDown (e) {
       this.downX = e.clientX;
       this.flag = true;
     },
-    mouseMove (e) { // 鼠标移动
+    mouseMove (e) {
       if (this.flag) {
         let offset = e.clientX - this.downX;
 
@@ -60,7 +60,7 @@ export default {
         }
       }
     },
-    mouseUp () { // 鼠标抬起
+    mouseUp () {
       if (!this.flag) return false;
       this.flag = false;
       let params = {
@@ -83,33 +83,31 @@ export default {
         }
       });
     },
-    refresh () { // 刷新验证图片
+    refresh () { // 刷新滑块
       this.flag = false;
       this.downX = 0;
       this.distance = 0;
-      this.bgColor = 'aqua';
+      this.bgColor = '#04ad11';
       this.verifyText = '拖动滑块解锁';
-      this.getImg();
+      this.init();
     },
-    getImg () { // 获取验证图片
+    init () { // 初始化数据
       getVerifyImg(this.type).then(res => {
-        this.data = res.result;
+        if (res.result) {
+          this.data = res.result;
+          this.show = true;
+        } else {
+          this.$Message.warning('请求失败请重试！')
+        }
       });
     }
   },
-  created () {
-    // this.getImg();
-  },
   watch: {
     verifyType: {
       immediate: true,
       handler: function (v) {
         this.type = v;
-        // this.refresh();
       }
-    },
-    show (v) {
-      if (v) this.refresh();
     }
   }
 };
@@ -143,7 +141,7 @@ export default {
   }
 }
 .handle {
-  border: 1px solid rgb(134, 134, 134);
+  border: 1px solid #e4dede;
   margin-top: 5px;
   height: 42px;
   background: #ddd;
@@ -156,7 +154,7 @@ export default {
     width: 40px;
     height: 40px;
     opacity: 0.5;
-    background: aqua;
+    background: #04ad11;
   }
 
   .swiper {
diff --git a/buyer/src/config/index.js b/buyer/src/config/index.js
index c3161388..e3011596 100644
--- a/buyer/src/config/index.js
+++ b/buyer/src/config/index.js
@@ -17,15 +17,15 @@ export default {
    * @description api请求基础路径
    */
   api_dev: {
-    common: 'http://192.168.0.100:8890',
-    buyer: 'http://192.168.0.100:8888',
-    seller: 'http://192.168.0.100:8889',
-    manager: 'http://192.168.0.100:8887'
+    // common: 'http://192.168.0.100:8890',
+    // buyer: 'http://192.168.0.100:8888',
+    // seller: 'http://192.168.0.100:8889',
+    // manager: 'http://192.168.0.100:8887'
 
-    // common: 'https://common-api.pickmall.cn',
-    // buyer: 'https://buyer-api.pickmall.cn',
-    // seller: 'https://store-api.pickmall.cn',
-    // manager: 'https://admin-api.pickmall.cn'
+    common: 'https://common-api.pickmall.cn',
+    buyer: 'https://buyer-api.pickmall.cn',
+    seller: 'https://store-api.pickmall.cn',
+    manager: 'https://admin-api.pickmall.cn'
   },
   api_prod: {
     common: 'https://common-api.pickmall.cn',
diff --git a/buyer/src/pages/Login.vue b/buyer/src/pages/Login.vue
index a078e266..66c65a86 100644
--- a/buyer/src/pages/Login.vue
+++ b/buyer/src/pages/Login.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="login" @keyup.enter="handleSubmit('formInline')">
     <!-- 顶部logo -->
-    <div class="top-content">
+    <div class="top-content" @click='$refs.verify.show = false'>
       <div class="logo-box">
         <img
           :src="logoImg"
@@ -15,7 +15,7 @@
       <!-- 轮播 -->
       <Carousel loop :autoplay-speed="5000" class="login-carousel" arrow="never">
         <CarouselItem>
-          <div class="demo-carousel">
+          <div class="demo-carousel" @click='$refs.verify.show = false'>
             <img
               src="https://wanmi-b2b.oss-cn-shanghai.aliyuncs.com/201811141632252680"
             />
@@ -23,7 +23,7 @@
         </CarouselItem>
       </Carousel>
       <!-- 登录模块 -->
-      <div class="form-box">
+      <div class="form-box" @click='$refs.verify.show = false'>
         <div class="account-number">
           <div class="tab-switch">
             <span>{{type?'账号登录':'验证码登录'}}</span>
@@ -37,6 +37,7 @@
           :model="formData"
           :rules="ruleInline"
           v-show="type === true"
+          @click.self='$refs.verify.show = false'
         >
           <FormItem prop="username">
             <i-input
@@ -72,6 +73,7 @@
           :model="formSms"
           :rules="ruleInline"
           v-show="type === false"
+          @click.self='$refs.verify.show = false'
         >
           <FormItem prop="mobile">
             <i-input
@@ -194,7 +196,7 @@ export default {
       this.$refs[name].validate((valid) => {
         if (valid) {
           if (this.type) {
-            this.$refs.verify.show = true;
+            this.$refs.verify.init();
           } else {
             let data = JSON.parse(JSON.stringify(this.formSms));
             apiLogin.smsLogin(data).then((res) => {
@@ -224,6 +226,7 @@ export default {
         }
       });
     },
+    // 发送手机验证码
     sendCode () {
       if (this.time === 60) {
         if (this.formSms.mobile === '') {
@@ -296,9 +299,10 @@ export default {
         this.$refs.verify.show = false;
       }
     },
+    // 开启滑块验证
     verifyBtnClick () {
       if (!this.verifyStatus) {
-        this.$refs.verify.show = true;
+        this.$refs.verify.init();
       }
     },
     handleWebLogin (type) { // 第三方登录
diff --git a/buyer/src/pages/SignUp.vue b/buyer/src/pages/SignUp.vue
index e68cde17..1abd7039 100644
--- a/buyer/src/pages/SignUp.vue
+++ b/buyer/src/pages/SignUp.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="login">
+  <div class="login" @click='$refs.verify.show = false'>
     <div style="height:50px;"></div>
     <div class="logo-box">
       <img
@@ -202,7 +202,7 @@ export default {
     },
     verifyBtnClick () {
       if (!this.verifyStatus) {
-        this.$refs.verify.show = true;
+        this.$refs.verify.init();
       }
     }
   },
diff --git a/buyer/src/pages/forgetPassword.vue b/buyer/src/pages/forgetPassword.vue
index 2de0d5a0..88dced4e 100644
--- a/buyer/src/pages/forgetPassword.vue
+++ b/buyer/src/pages/forgetPassword.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="login">
+  <div class="forget-password" @click='$refs.verify.show = false'>
     <div style="height:50px;"></div>
     <!-- 顶部logo -->
     <div class="logo-box">
@@ -236,7 +236,7 @@ export default {
     },
     verifyBtnClick () {
       if (!this.verifyStatus) {
-        this.$refs.verify.show = true;
+        this.$refs.verify.init();
       }
     }
   },
@@ -248,7 +248,11 @@ export default {
   }
 };
 </script>
+
 <style scoped lang="scss">
+.forget-password{
+  height: 100%;
+}
 .logo-box {
   width: 600px;
   height: 80px;
diff --git a/manager/src/views/login.vue b/manager/src/views/login.vue
index f428e847..46c80c11 100644
--- a/manager/src/views/login.vue
+++ b/manager/src/views/login.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="login">
+  <div class="login" @click='$refs.verify.show = false'>
     <Row @keydown.enter.native="submitLogin" class="flex">
       <Col style="width: 368px">
       <Header />
@@ -111,7 +111,7 @@ export default {
       // 登录操作
       this.$refs.usernameLoginForm.validate((valid) => {
         if (valid) {
-          this.$refs.verify.show = true;
+          this.$refs.verify.init();
         }
       });
     },
@@ -161,7 +161,7 @@ export default {
   }
   .verify-con {
     position: absolute;
-    top: 90px;
+    top: 150px;
     z-index: 10;
     left: 20px;
   }
diff --git a/manager/src/views/my-components/verify/index.vue b/manager/src/views/my-components/verify/index.vue
index 136c3160..3004b32c 100644
--- a/manager/src/views/my-components/verify/index.vue
+++ b/manager/src/views/my-components/verify/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp">
+  <div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp" @click.stop>
     <div class="imgBox" :style="{width:data.originalWidth+'px',height:data.originalHeight + 'px'}">
       <img :src="data.backImage" style="width:100%;height:100%" alt="">
       <img class="slider" :src="data.slidingImage" :style="{left:distance+'px',top:data.randomY+'px'}" :width="data.sliderWidth" :height="data.sliderHeight" alt="">
@@ -18,7 +18,7 @@
 import { getVerifyImg, postVerifyImg } from './verify.js';
 export default {
   props: {
-    verifyType: { // 验证方式，登录，注册等
+    verifyType: {
       defalut: 'LOGIN',
       type: String
     }
@@ -38,7 +38,7 @@ export default {
       distance: 0, // 拼图移动距离
       flag: false, // 判断滑块是否按下
       downX: 0, // 鼠标按下位置
-      bgColor: 'aqua', // 滑动背景颜色
+      bgColor: '#04ad11', // 滑动背景颜色
       verifyText: '拖动滑块解锁' // 文字提示
     };
   },
@@ -83,17 +83,22 @@ export default {
         }
       });
     },
-    refresh () {
+    refresh () { // 刷新滑块
       this.flag = false;
       this.downX = 0;
       this.distance = 0;
-      this.bgColor = 'aqua';
+      this.bgColor = '#04ad11';
       this.verifyText = '拖动滑块解锁';
-      this.getImg();
+      this.init();
     },
-    getImg () {
+    init () { // 初始化数据
       getVerifyImg(this.type).then(res => {
-        this.data = res.result;
+        if (res.result) {
+          this.data = res.result;
+          this.show = true;
+        } else {
+          this.$Message.warning('请求失败请重试！')
+        }
       });
     }
   },
@@ -102,11 +107,7 @@ export default {
       immediate: true,
       handler: function (v) {
         this.type = v;
-        // this.refresh();
       }
-    },
-    show (v) {
-      if (v) this.refresh();
     }
   }
 };
@@ -140,7 +141,7 @@ export default {
   }
 }
 .handle {
-  border: 1px solid rgb(134, 134, 134);
+  border: 1px solid #e4dede;
   margin-top: 5px;
   height: 42px;
   background: #ddd;
@@ -153,7 +154,7 @@ export default {
     width: 40px;
     height: 40px;
     opacity: 0.5;
-    background: aqua;
+    background: #04ad11;
   }
 
   .swiper {
diff --git a/seller/src/views/login.vue b/seller/src/views/login.vue
index a1bd088a..b5fb4c09 100644
--- a/seller/src/views/login.vue
+++ b/seller/src/views/login.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="login">
+  <div class="login" @click="$refs.verify.show = false">
     <Row type="flex" @keydown.enter.native="submitLogin">
       <Col style="width: 368px">
       <Header />
@@ -128,7 +128,7 @@ export default {
       // 登录提交
       this.$refs.usernameLoginForm.validate((valid) => {
         if (valid) {
-          this.$refs.verify.show = true;
+          this.$refs.verify.init();
         }
       });
     },
diff --git a/seller/src/views/my-components/verify/index.vue b/seller/src/views/my-components/verify/index.vue
index 34f07f36..7dfbff4f 100644
--- a/seller/src/views/my-components/verify/index.vue
+++ b/seller/src/views/my-components/verify/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp">
+  <div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp" @click.stop>
     <div class="imgBox" :style="{width:data.originalWidth+'px',height:data.originalHeight + 'px'}">
       <img :src="data.backImage" style="width:100%;height:100%" alt="">
       <img class="slider" :src="data.slidingImage" :style="{left:distance+'px',top:data.randomY+'px'}" :width="data.sliderWidth" :height="data.sliderHeight" alt="">
@@ -38,7 +38,7 @@ export default {
       distance: 0, // 拼图移动距离
       flag: false, // 判断滑块是否按下
       downX: 0, // 鼠标按下位置
-      bgColor: 'aqua', // 滑动背景颜色
+      bgColor: '#04ad11', // 滑动背景颜色
       verifyText: '拖动滑块解锁' // 文字提示
     };
   },
@@ -83,34 +83,32 @@ export default {
         }
       });
     },
-    refresh () {
+    refresh () { // 刷新滑块
       this.flag = false;
       this.downX = 0;
       this.distance = 0;
-      this.bgColor = 'aqua';
+      this.bgColor = '#04ad11';
       this.verifyText = '拖动滑块解锁';
-      this.getImg();
+      this.init();
     },
-    getImg () {
+    init () { // 初始化数据
       getVerifyImg(this.type).then(res => {
-        this.data = res.result;
+        if (res.result) {
+          this.data = res.result;
+          this.show = true;
+        } else {
+          this.$Message.warning('请求失败请重试！')
+        }
       });
     }
   },
-  created () {
-    // this.getImg();
-  },
   watch: {
     verifyType: {
       immediate: true,
       handler: function (v) {
         this.type = v;
-        // this.refresh();
       }
     },
-    show (v) {
-      if (v) this.refresh();
-    }
   }
 };
 </script>
@@ -143,7 +141,7 @@ export default {
   }
 }
 .handle {
-  border: 1px solid rgb(134, 134, 134);
+  border: 1px solid #e4dede;
   margin-top: 5px;
   height: 42px;
   background: #ddd;
@@ -156,7 +154,7 @@ export default {
     width: 40px;
     height: 40px;
     opacity: 0.5;
-    background: aqua;
+    background: #04ad11;
   }
 
   .swiper {