镜像脚本更新

buyer/docker.sh

@@ -1 +1 @@
-docker build -t registry.cn-beijing.aliyuncs.com/lili-images/buyer-ui-1.0.1:0.0.4 .
+docker build -t registry.cn-beijing.aliyuncs.com/lili-images/buyer-ui-4.2.0:0.0.2 .

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>

buyer/src/components/goodsDetail/ShowGoodsDetail.vue

@@ -92,7 +92,7 @@
                   <td>{{param.paramName}}</td><td>{{param.paramValue}}</td>
                 </tr>
               </table>
-              <!-- <div v-else>暂无商品参数</div> -->
+              <div v-else>暂无商品参数</div>
             </TabPane>
           </Tabs>
         </div>

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="">
@@ -18,6 +18,7 @@
 import { getVerifyImg, postVerifyImg } from './verify.js';
 export default {
   props: {
+    // 传入数据，判断是登录、注册、修改密码
     verifyType: {
       defalut: 'LOGIN',
       type: String
@@ -38,16 +39,18 @@ 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 +63,8 @@ export default {
         }
       }
     },
-    mouseUp () { // 鼠标抬起
+    // 鼠标抬起事件，验证是否正确
+    mouseUp () {
       if (!this.flag) return false;
       this.flag = false;
       let params = {
@@ -83,33 +87,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 +145,7 @@ export default {
   }
 }
 .handle {
-  border: 1px solid rgb(134, 134, 134);
+  border: 1px solid #e4dede;
   margin-top: 5px;
   height: 42px;
   background: #ddd;
@@ -156,7 +158,7 @@ export default {
     width: 40px;
     height: 40px;
     opacity: 0.5;
-    background: aqua;
+    background: #04ad11;
   }
 
   .swiper {

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',

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) { // 第三方登录

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();
       }
     }
   },

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;

docker-push.sh

@@ -1,5 +1,5 @@
-docker push registry.cn-beijing.aliyuncs.com/lili-images/buyer-ui-1.0.1:0.0.4
-docker push registry.cn-beijing.aliyuncs.com/lili-images/wap-ui-1.0.1:0.0.4
-docker push registry.cn-beijing.aliyuncs.com/lili-images/seller-ui-1.0.1:0.0.4
-docker push registry.cn-beijing.aliyuncs.com/lili-images/manager-ui-1.0.1:0.0.4
+docker push registry.cn-beijing.aliyuncs.com/lili-images/buyer-ui-4.2.0:0.0.2
+docker push registry.cn-beijing.aliyuncs.com/lili-images/wap-ui-4.2.0:0.0.2
+docker push registry.cn-beijing.aliyuncs.com/lili-images/seller-ui-4.2.0:0.0.2
+docker push registry.cn-beijing.aliyuncs.com/lili-images/manager-ui-4.2.0:0.0.2
 

manager/docker.sh

@@ -1 +1 @@
-docker build -t registry.cn-beijing.aliyuncs.com/lili-images/manager-ui-1.0.1:0.0.4 .
+docker build -t registry.cn-beijing.aliyuncs.com/lili-images/manager-ui-4.2.0:0.0.2 .

manager/src/views/goods/goods-info/goods.vue

@@ -200,9 +200,9 @@ export default {
           width: 100,
           render: (h, params) => {
             if (params.row.marketEnable == "DOWN") {
-              return h("Tag", {props: {color: "green"},},"上架");
+              return h("Tag", {props: {color: "volcano"},},"下架");
             } else if (params.row.marketEnable == "UPPER") {
-              return h("Tag", {props: {color: "volcano",},},"下架");
+              return h("Tag", {props: {color: "green",},},"上架");
             }
           },
         },

manager/src/views/goods/goods-manage/category.vue

@@ -2,13 +2,8 @@
   <div class="wrapper">
     <div class="operation">
       <Button @click="addParent" icon="md-add">添加一级分类</Button>
-      选择分类:
-      <Select @on-change="changeSortCate" v-model="sortCate" style="width:200px">
-        <Option v-for="item in sortCateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-      </Select>
-
     </div>
-    <tree-table ref="treeTable" size="default" :loading="loading" :data="tableData" :columns="columns" :border="true" :show-index="false" :is-fold="true" :expand-type="false" primary-key="id">
+    <Table size="default" :load-data="handleLoadData" row-key="id" :loading="loading" :data="tableData" :columns="columns">
 
       <template slot="action" slot-scope="scope">
         <Dropdown v-show="scope.row.level == 2" transfer="true" trigger="click">
@@ -53,7 +48,7 @@
           <Badge text="禁用" status="error"></Badge>
         </div>
       </template>
-    </tree-table>
+    </Table>
 
     <Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="500">
       <Form ref="form" :model="formAdd" :label-width="100" :rules="formValidate">
@@ -132,19 +127,17 @@ import {
   saveCategorySpec,
   getCategoryTree,
 } from "@/api/goods";
-import TreeTable from "@/views/my-components/tree-table/Table/Table";
+
 import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
 
 export default {
   name: "lili-components",
   components: {
-    TreeTable,
     uploadPicInput,
   },
   data() {
     return {
       categoryList: [], // 分类列表
-      sortCateList: [], //筛选出分类第一级
       sortCate: "", //筛选的数据
       loading: false, // 加载状态
       selectCount: 0, // 选择数量
@@ -184,47 +177,44 @@ export default {
         {
           title: "分类名称",
           key: "name",
-          minWidth: "120px",
+          tree: true,
         },
         {
           title: "状态",
           key: "deleteFlag",
-          headerAlign: "center",
-          type: "template",
-          template: "deleteFlag",
+
+          slot: "deleteFlag",
         },
         {
-          title: "佣金(%)",
+          title: "佣金",
           key: "commissionRate",
-          headerAlign: "center",
-          type: "template",
-          template: "commissionRate",
+
+          slot: "commissionRate",
         },
         {
           fixed: "right",
           title: "操作",
           key: "action",
-          align: "left",
-          headerAlign: "center",
-          type: "template",
-          template: "action",
+
+          slot: "action",
         },
       ],
       tableData: [],
       categoryIndex: 0,
+      checkedCategoryChildren: "", //选中的分类子级
     };
   },
   methods: {
-    changeSortCate(val) {
-      let way = this.categoryList.find((item, index) => {
-        if (item.name == val) {
-          this.categoryIndex = index;
-          console.log((this.categoryIndex = index));
-          return item.name == val;
-        }
-      });
-      this.tableData = [way];
-    },
+    // changeSortCate(val) {
+    //   let way = this.categoryList.find((item, index) => {
+    //     if (item.name == val) {
+    //       this.categoryIndex = index;
+    //       console.log((this.categoryIndex = index));
+    //       return item.name == val;
+    //     }
+    //   });
+    //   this.tableData = [way];
+    // },
     init() {
       this.getAllList(0);
       this.getBrandList();
@@ -240,7 +230,6 @@ export default {
     getSpecList() {
       getSpecificationList().then((res) => {
         if (res.length != 0) {
-
           this.specifications = res;
         }
       });
@@ -379,26 +368,64 @@ export default {
         },
       });
     },
+
+    // 异步手动加载分类名称
+    handleLoadData(item, callback) {
+      console.warn(item);
+      if (item.level == 0) {
+        let categoryList = JSON.parse(JSON.stringify(this.categoryList));
+        categoryList.forEach((val) => {
+          if (val.id == item.id) {
+            val.children.map((child) => {
+              child._loading = false;
+              child.children = [];
+            });
+            // 模拟加载
+            setTimeout(() => {
+              callback(val.children);
+            }, 1000);
+          }
+        });
+      } else {
+        this.deepCategoryChildren(item.id, this.categoryList);
+        console.log(this.checkedCategoryChildren);
+        setTimeout(() => {
+          callback(this.checkedCategoryChildren);
+        }, 1000);
+      }
+    },
+
+    // 通过递归children来实现手动加载数据
+    deepCategoryChildren(id, list) {
+      if (id != "0" && list.length != 0) {
+        for (let i = 0; i < list.length; i++) {
+          let item = list[i];
+          if (item.id == id) {
+            this.checkedCategoryChildren = item.children;
+            return;
+          } else {
+            this.deepCategoryChildren(id, item.children);
+          }
+        }
+      }
+    },
+
     getAllList(parent_id) {
-      this.sortCateList = [];
       this.loading = true;
       getCategoryTree(parent_id).then((res) => {
         this.loading = false;
         if (res.success) {
           localStorage.setItem("category", JSON.stringify(res.result));
-          res.result.forEach((e, index, arr) => {
-            this.sortCateList.push({
-              label: e.name,
-              value: e.name,
-            });
-            this.sortCate = arr[0].name;
+          this.categoryList = JSON.parse(JSON.stringify(res.result));
+          this.tableData = res.result.map((item) => {
+            if (item.children.length != 0) {
+              item.children = [];
+              item._loading = false;
+            }
+            return item;
           });
 
-          this.categoryList = res.result;
-
-          this.$nextTick(() => {
-            this.$set(this, "tableData", [res.result[this.categoryIndex]]);
-          });
+          console.log(this.tableData);
         }
       });
     },

manager/src/views/goods/goods-review/index.vue

@@ -28,7 +28,7 @@
               size="small" show-total show-elevator show-sizer></Page>
       </Row>
     </Card>
-
+    <!-- 评价详情 -->
     <Modal v-model="infoFlag" width="800" :title="infoTitle">
 
       <div class="info-list" style="overflow: hidden">
@@ -58,12 +58,15 @@
                 <ListItemMeta :avatar="infoData.memberProfile" :title="infoData.memberName"
                               :description="infoData.content"/>
               </ListItem>
-              <div class="" v-if="infoData.haveImage == 1">
+              <div class="" v-if="infoData.haveImage">
                 评价图
                 <div style="margin-left: 40px">
-                  <img style="width: 100px;height: 110px;margin-left: 2px"
-                       v-for="(img,index) in infoData.image.split(',')" v-if="infoData.image.length !=0" :src="img"
+                  <template v-if="infoData.images && infoData.images.length">
+                    <img style="width: 100px;height: 110px;margin-left: 2px"
+                       v-for="(img,index) in infoData.images.split(',')"  :src="img"
                        alt="" :key="index"/>
+                  </template>
+                  
                 </div>
               </div>
             </List>
@@ -74,10 +77,13 @@
                 <div style="float: left"> 商家回复：</div>
                 <div style="margin-left: 60px">{{ infoData.reply }}</div>
               </div>
-              <div v-if="infoData.haveReplyImage == 1">
+              <div v-if="infoData.haveReplyImage">
                 <div style="margin-left: 60px">
-                  <img style="width: 100px;height: 110px" v-for="(img,index) in infoData.replyImage.split(',')" :key="index"
-                       v-if="infoData.replyImage.length !=0" :src="img" alt=""/>
+                  <template  v-if="infoData.replyImage && infoData.replyImage.length">
+                    <img style="width: 100px;height: 110px" v-for="(img,index) in infoData.replyImage.split(',')" :key="index"
+                       :src="img" alt=""/>
+                  </template>
+                  
                 </div>
               </div>
             </div>

manager/src/views/lili-dialog/template/pages.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="wrapper">
-    <div class="list">
+    <!-- TODO 目前数据少暂且不用 -->
+    <!-- <div class="list">
       <div class="list-item active">
         文章页
       </div>
-    </div>
+    </div> -->
     <div class="content">
       <Article @callbacked="callbackArticle" :selected="true" />
     </div>
@@ -36,8 +37,8 @@ export default {
   height: 414px;
   overflow: auto;
 }
-.ivu-table-wrapper ivu-table-wrapper-with-border{
-  height: 300px  !important;
+.ivu-table-wrapper ivu-table-wrapper-with-border {
+  height: 300px !important;
 }
 .list {
   margin: 0 1.5%;

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;
   }

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,8 @@
 import { getVerifyImg, postVerifyImg } from './verify.js';
 export default {
   props: {
-    verifyType: { // 验证方式，登录，注册等
+    // 传入数据，判断是登录、注册、修改密码
+    verifyType: {
       defalut: 'LOGIN',
       type: String
     }
@@ -38,15 +39,17 @@ export default {
       distance: 0, // 拼图移动距离
       flag: false, // 判断滑块是否按下
       downX: 0, // 鼠标按下位置
-      bgColor: 'aqua', // 滑动背景颜色
+      bgColor: '#04ad11', // 滑动背景颜色
       verifyText: '拖动滑块解锁' // 文字提示
     };
   },
   methods: {
+    // 鼠标按下事件，开始拖动滑块
     mouseDown (e) {
       this.downX = e.clientX;
       this.flag = true;
     },
+    // 鼠标移动事件，计算距离
     mouseMove (e) {
       if (this.flag) {
         let offset = e.clientX - this.downX;
@@ -60,6 +63,7 @@ export default {
         }
       }
     },
+    // 鼠标抬起事件，验证是否正确
     mouseUp () {
       if (!this.flag) return false;
       this.flag = false;
@@ -83,17 +87,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 +111,7 @@ export default {
       immediate: true,
       handler: function (v) {
         this.type = v;
-        // this.refresh();
       }
-    },
-    show (v) {
-      if (v) this.refresh();
     }
   }
 };
@@ -140,7 +145,7 @@ export default {
   }
 }
 .handle {
-  border: 1px solid rgb(134, 134, 134);
+  border: 1px solid #e4dede;
   margin-top: 5px;
   height: 42px;
   background: #ddd;
@@ -153,7 +158,7 @@ export default {
     width: 40px;
     height: 40px;
     opacity: 0.5;
-    background: aqua;
+    background: #04ad11;
   }
 
   .swiper {

seller/docker.sh

@@ -1 +1 @@
-docker build -t registry.cn-beijing.aliyuncs.com/lili-images/seller-ui-1.0.1:0.0.4 .
+docker build -t registry.cn-beijing.aliyuncs.com/lili-images/seller-ui-4.2.0:0.0.2 .

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();
         }
       });
     },

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="">
@@ -18,6 +18,7 @@
 import { getVerifyImg, postVerifyImg } from './verify.js';
 export default {
   props: {
+    // 传入数据，判断是登录、注册、修改密码
     verifyType: {
       defalut: 'LOGIN',
       type: String
@@ -38,15 +39,17 @@ export default {
       distance: 0, // 拼图移动距离
       flag: false, // 判断滑块是否按下
       downX: 0, // 鼠标按下位置
-      bgColor: 'aqua', // 滑动背景颜色
+      bgColor: '#04ad11', // 滑动背景颜色
       verifyText: '拖动滑块解锁' // 文字提示
     };
   },
   methods: {
+    // 鼠标按下事件，开始拖动滑块
     mouseDown (e) {
       this.downX = e.clientX;
       this.flag = true;
     },
+    // 鼠标移动事件，计算距离
     mouseMove (e) {
       if (this.flag) {
         let offset = e.clientX - this.downX;
@@ -60,6 +63,7 @@ export default {
         }
       }
     },
+    // 鼠标抬起事件，验证是否正确
     mouseUp () {
       if (!this.flag) return false;
       this.flag = false;
@@ -83,33 +87,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 +145,7 @@ export default {
   }
 }
 .handle {
-  border: 1px solid rgb(134, 134, 134);
+  border: 1px solid #e4dede;
   margin-top: 5px;
   height: 42px;
   background: #ddd;
@@ -156,7 +158,7 @@ export default {
     width: 40px;
     height: 40px;
     opacity: 0.5;
-    background: aqua;
+    background: #04ad11;
   }
 
   .swiper {