2024.08.16

- 完成GraphicVerificationCode获取图文码全局组件；
- 登录页和手机号管理页和隐私页和收款账户页发送验证码功能改为使用图文码全局组件；

src/api/account.js

@@ -52,3 +52,12 @@ export function getCode(data) {
     data
   })
 }
+
+//  获取验证码
+export function getVerificationImageCaptchaApi(params) {
+  return request({
+    url: '/captcha/get/verification/image',
+    method: 'get',
+    params
+  })
+}

src/components/GraphicVerificationCode/SliderCaptcha.vue

@@ -0,0 +1,483 @@
+<template>
+  <div class="slider-captcha-container">
+    <div v-if="dialogVisible" class="lang-dialog">
+      <div class="lang-dialog__header">
+        <div class="lang-dialog__title">
+          <slot name="title">{{ title }}</slot>
+        </div>
+        <div type="button" class="lang-dialog-header-btn" @click="close"> <i class="lang-icon-close"></i> </div>
+      </div>
+      <div class="lang-dialog__body">
+        <div v-show="failed" class="tips">
+          <slot name="errorText">{{ errorText }}</slot>
+        </div>
+        <div v-show="!failed" class="tips">
+          <slot name="tips">{{ tips }}</slot>
+        </div>
+        <div class="slider-body" :class="{ 'slider-shock': shock }">
+          <div v-show="mask" class="loading-transparent-mask"></div>
+          <div v-if="loading" class="loading-body">
+            <div class="loading slider-loading"></div>
+          </div>
+          <div
+            v-show="!loading" class="slider-bg slider-img"
+            :style="{ 'background-image': 'url(data:image/png;base64,' + shadeImage + ')' }"
+          >
+          </div>
+          <div
+            v-show="!loading" class="slider-draw slider-move-draw slider-img"
+            :style="{ 'background-image': 'url(data:image/png;base64,' + cutoutImage + ')', 'top': sliderY + 'px', 'left': sliderMoveDrawLeft }"
+            @touchstart.stop="sliderTouchStart" @touchmove.stop="sliderTouchMove" @touchend.stop="sliderEnd"
+            @mousedown="sliderDown"
+          >
+          </div>
+          <div class="slider-progress"></div>
+          <div v-show="success" class="slider-success">
+            <div class="slider-success-icon">
+              成功
+            </div>
+            <div class="slider-success-text">
+              <slot name="successText">{{ successText }}</slot>
+            </div>
+          </div>
+          <div
+            class="slider-btn slider-move-btn" :style="{ 'left': sliderMoveLeft }"
+            :class="{ 'slider-shock': shock }" @touchstart.stop="sliderTouchStart" @touchmove.stop="sliderTouchMove"
+            @touchend.stop="sliderEnd" @mousedown="sliderDown"
+          >
+            <i>&nbsp;</i>
+            <span style="width: 100%;color: #ffffff;">● ● ●</span>
+          </div>
+        </div>
+        <div style="position:relative;display: flex;align-items: center;width: 280px;margin: 0 auto;">
+          <div class="slider-refresh" @click.stop="questionMessage = !questionMessage">
+            说明
+          </div>
+          <div class="slider-refresh" @click.stop="refresh">
+            刷新
+          </div>
+        </div>
+        <div v-if="questionMessage">
+          <slot name="question">
+            <div v-if="question">{{ question }}</div>
+            <div v-else>无注意事项</div>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SliderCaptcha',
+  props:
+    {
+      value: {
+        type: Boolean,
+        defalut: false
+      },
+      loading: {
+        type: Boolean,
+        defalut: false
+      },
+      title: {
+        type: String,
+        default: '滑块安全验证'
+      },
+      tips: {
+        type: String,
+        default: '拖动下方滑块完成拼图'
+      },
+      successText: {
+        type: String,
+        default: '验证成功'
+      },
+      errorText: {
+        type: String,
+        default: '是不是太难了，咱换一个'
+      },
+      question: {
+        type: String,
+        default: ''
+      },
+      options: {
+        type: Object,
+        default() {
+          return {
+            cutoutImage: '',
+            shadeImage: '',
+            sliderKey: '',
+            sliderY: ''
+          }
+        }
+      }
+    },
+  data() {
+    return {
+      dialogVisible: false,
+      mask: false,
+      success: false,
+      failed: false,
+      cutoutImage: '',
+      shadeImage: '',
+      sliderKey: '',
+      sliderX: 26,
+      sliderY: '',
+      sliderMoveDrawLeft: '26px',
+      sliderMoveLeft: '20px',
+      shock: false,
+      tipEvents: {},
+      sliderMoveX: 0,
+      questionMessage: false
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.init(val)
+      },
+      immediate: true
+    },
+    options: {
+      handler(option) {
+        this.clear()
+        this.cutoutImage = option.cutoutImage
+        this.shadeImage = option.shadeImage
+        this.sliderKey = option.sliderKey
+        this.sliderY = option.sliderY
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    init(open) {
+      this.dialogVisible = open
+      if (open) {
+        this.clear()
+      }
+    },
+    clear() {
+      this.mask = false
+      this.success = false
+      this.failed = false
+      this.cutoutImage = ''
+      this.shadeImage = ''
+      this.sliderKey = ''
+      this.sliderX = 26
+      this.sliderMoveDrawLeft = '26px',
+      this.sliderMoveLeft = '20px',
+      this.sliderY = ''
+    },
+    check(sliderKey, sliderX) {
+      this.$emit('check', { sliderKey, sliderX, done: this.done, error: this.error })
+    },
+    done() {
+      this.success = true
+    },
+    error() {
+      this.failed = true
+      this.mask = true
+      this.shock = true
+      setTimeout(() => {
+        this.shock = false
+        this.$emit('error')
+      }, 1000)
+    },
+    close() {
+      this.dialogVisible = false
+      this.$emit('input', this.dialogVisible)
+      this.$emit('close')
+    },
+    refresh() {
+      this.$emit('refresh')
+    },
+    sliderTouchStart(e) {
+      // 移动触摸移动
+      const that = this
+      const slider = e.target
+      that.sliderMoveX = e.touches[0].clientX - slider.offsetLeft
+      console.log(e, e.touches[0].clientX, slider.offsetLeft)
+    },
+    sliderTouchMove(e) {
+      const that = this
+      const left = e.touches[0].clientX - that.sliderMoveX
+      if (left >= 20 && left <= 280) {
+        that.sliderMoveDrawLeft = 5 + left + 'px'
+        that.sliderMoveLeft = left + 'px'
+        that.sliderX = 5 + left
+      }
+    },
+    sliderEnd() {
+      this.check(this.sliderKey, this.sliderX)
+    },
+    sliderDown(e) {
+      console.log(e)
+      const that = this
+      const slider = e.target // 获取目标元素
+      // 算出鼠标相对元素的位置
+      that.sliderMoveX = e.clientX - slider.offsetLeft
+      document.onmousemove = (e) => {
+        const left = e.clientX - that.sliderMoveX
+        if (left >= 20 && left <= 280) {
+          //   slider.style.left = left + 'px'
+          that.sliderMoveDrawLeft = 5 + left + 'px'
+          that.sliderMoveLeft = left + 'px'
+          that.sliderX = 5 + left
+        }
+      }
+      document.onmouseup = () => {
+        document.onmousemove = null
+        document.onmouseup = null
+        this.check(this.sliderKey, this.sliderX)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.slider-captcha-container {
+	box-sizing: border-box;
+
+	.slider-shock {
+		animation-delay: 0s;
+		animation-name: shock;
+		animation-duration: .1s;
+		animation-iteration-count: 5;
+		animation-direction: normal;
+		animation-timing-function: linear;
+	}
+
+	@keyframes shock {
+		0% {
+			transform: translateX(2px);
+		}
+
+		100% {
+			transform: translateX(-2px);
+		}
+	}
+
+	/* 弹窗开始  */
+	.lang-dialog {
+		position: relative;
+		border-radius: 2px;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 30%);
+		box-sizing: border-box;
+		background: #FFF;
+	}
+
+	.lang-dialog__header {
+		padding: 20px 20px 10px;
+	}
+
+	.lang-dialog__title {
+		line-height: 20px;
+		font-size: 18px;
+		color: #525252;
+	}
+
+	.lang-dialog-header-btn {
+		position: absolute;
+		top: 20px;
+		right: 20px;
+		padding: 0;
+		background: 0 0;
+		border: none;
+		outline: 0;
+		cursor: pointer;
+		font-size: 16px
+	}
+
+	.lang-icon-close {
+		color: rgba(0, 0, 0, 0.68);
+		font-size: 20px;
+	}
+
+	.lang-icon-close:before {
+		content: '×';
+	}
+
+	.lang-icon-close:hover {
+		color: rgba(0, 0, 0, 0.88);
+	}
+
+	.lang-dialog__body {
+		padding: 0 0 6px;
+		color: #828282;
+		font-size: 14px;
+		text-align: center;
+		word-break: break-all;
+	}
+
+	.loading-transparent-mask {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: transparent;
+		z-index: 999;
+	}
+
+	/* 弹窗结束  */
+	/* loading start */
+	.loading-body {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: rgba(255, 255, 255, 0.6);
+		z-index: 999;
+	}
+
+	.loading {
+		position: relative;
+		display: inline-block;
+		width: 30px;
+		height: 30px;
+		border-radius: 50%;
+		border-top: 2px solid transparent;
+		border-bottom: 2px solid transparent;
+		border-left: 2px solid #409eff;
+		border-right: 2px solid #409eff;
+		animation: loading 1s infinite linear;
+	}
+
+	@keyframes loading {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.slider-loading {
+		position: absolute;
+		top: calc(50% - 15px);
+		left: calc(50% - 15px);
+		z-index: 999;
+	}
+
+	/* loading end */
+	.lang-dialog__header {
+		padding: 20px 10px 10px;
+	}
+
+	.tips {
+		color: #525252;
+		line-height: 36px;
+		font-size: 18px;
+	}
+
+	.slider-body {
+		position: relative;
+		width: 280px;
+		height: 230px;
+		margin: 0 auto;
+	}
+
+	.slider-bg {
+		position: relative;
+		width: 280px;
+		height: 171px;
+		overflow: hidden;
+		background-position: top left;
+		// background-size: cover;
+		background-size: auto auto;
+		background-repeat: no-repeat;
+	}
+
+	.slider-draw {
+		position: absolute;
+		z-index: 1;
+		left: 26px;
+		width: 50px;
+		height: 50px;
+		background-position: top left;
+		background-size: cover;
+		background-repeat: no-repeat;
+		cursor: pointer;
+		opacity: 1;
+		box-shadow: 0px 0px 10px 2px #000000;
+	}
+
+	.slider-progress {
+		position: relative;
+		z-index: 1;
+		width: 280px;
+		height: 16px;
+		margin-top: 22px;
+		background-color: #c8c8c8;
+		border-radius: 8px;
+		opacity: 1;
+	}
+
+	.slider-btn {
+		position: absolute;
+		top: 184px;
+		z-index: 1;
+		width: 65px;
+		height: 35px;
+		line-height: 35px;
+		background-color: rgb(0, 87, 212);
+		box-shadow: rgba(0, 87, 212, 50%) 0px 0px 5.05952px 0.505952px;
+		text-align: center;
+		border-radius: 999px;
+		cursor: pointer;
+		opacity: 1;
+		-moz-user-select: none;
+		/* 禁止双击节点被选中 */
+		-o-user-select: none;
+		-khtml-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+		-moz-user-drag: none;
+		/* 禁止被拖动 */
+		-webkit-user-drag: none;
+		/* 禁止被拖动 */
+		// pointer-events: none;
+		// display: inline-block;
+		// vertical-align: middle;
+	}
+
+	.slider-btn i {
+		display: inline-block;
+		width: 0;
+		vertical-align: middle;
+	}
+
+	.slider-success {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 4;
+		background: hsla(0, 0%, 100%, .8);
+	}
+
+	.slider-success .slider-success-icon {
+		width: 64px;
+		height: 64px;
+		margin: 15px auto 0;
+	}
+
+	.slider-success .slider-success-text {
+		color: #1bc300;
+		text-align: center;
+		margin-top: 16px;
+		font-size: 18px;
+	}
+
+	.slider-refresh {
+		margin: 0 16px 0 0;
+		cursor: pointer;
+		font-size: 18px;
+		height: 30px;
+		line-height: 30px;
+	}
+}
+</style>

src/components/GraphicVerificationCode/index copy.vue

@@ -0,0 +1,353 @@
+<template>
+  <div class="graphic-verification-code-container">
+    <div style="display: flex;align-items: center;justify-content: space-between;">
+      <el-input
+        :value="inputCode" maxlength="6" type="text" auto-complete="off"
+        style="width: 63%;"
+        placeholder="请输入验证码" @input="handleCodeInput" @keyup.enter.native="$emit('enter-down')"
+      >
+        <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+      </el-input>
+      <div>
+        <el-button type="primary" :loading="codeloading" @click="handleValidateImageInit">
+          <span v-if="!codeloading">获取验证码</span>
+          <span v-else>{{ count }} s</span>
+        </el-button>
+      </div>
+    </div>
+    <el-dialog
+      :visible.sync="verificationVisible" v-bind="{ closeOnClickModal: false, width: '600px', title: '滑动码验证' }"
+      append-to-body
+    >
+      <div>
+        <div class="comImageValidate rightValidate">
+          <div ref="imgBg_2" class="imgBg_2"></div>
+          <div ref="imgBg_3" class="imgBg_3"></div>
+          <div style="width: 100%; height: 30px;"></div>
+          <div ref="imgBg" class="imgBg" @mouseover="handleImgBgMouseover" @mouseleave="handleImgBgMouseleave">
+            <div ref="imgBtn" class="imgBtn">
+              <img ref="imgBtnImg" alt="" src="">
+            </div>
+            <span ref="refresh" class="refresh" @click="handleValidateImageInit">
+              <img alt="" src="">
+            </span>
+          </div>
+          <div
+            ref="hkinnerWrap" class="hkinnerWrap" style="height:30px; position: relative"
+            @mouseover="handleHkinnerWrapMouseover" @mouseleave="handleHkinnerWrapMouseleave"
+            @mousemove="handleHkinnerWrapMousemove" @mouseup="handleHkinnerWrapMouseup"
+          >
+            <span
+              ref="v_rightBtn" class="v_rightBtn " @mousedown="handleVRightBtnMousedown"
+              @mouseup="handleVRightBtnMouseup"
+            >
+              <em class="notSel">→</em>
+            </span>
+            <span
+              ref="huakuai" class="huakuai"
+              style="font-size: 12px;line-height: 33px;color: #A9A9A9;"
+            >
+              向右滑动滑块填充拼图完成验证
+            </span>
+            <input type="hidden" name="validX" />
+          </div>
+
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+const TIME_COUNT = 60 // 更改倒计时时间
+import { getCode, getVerificationImageCaptchaApi } from '@/api/account'
+
+export default {
+  name: 'GraphicVerificationCode',
+  props: {
+    phone: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  data() {
+    return {
+      inputCode: '',
+      codeloading: false,
+      count: '',
+      timer: null,
+      verificationVisible: false,
+      isOpenHkinnerWrapMouse: false,
+      dx: 0,
+      slideOptions: {
+        sliderKey: '',
+        sliderX: '',
+        sliderY: ''
+      }
+    }
+  },
+  mounted() { },
+  methods: {
+    handleCodeInput(e) {
+      console.log(e)
+      this.inputCode = e
+      this.$emit('input', this.inputCode)
+    },
+    // 获取验证码
+    async getVerificationCode() {
+      if (!this.phone) {
+        this.$message.error('请填写电话号码')
+        return
+      }
+      try {
+        const res = await getCode({ phone: this.phone, x: this.slideOptions.sliderX, y: this.slideOptions.sliderY })
+        this.$refs.hkinnerWrap && this.$refs.hkinnerWrap.$el.addClass('green')
+        this.$refs.hkinnerWrap && this.$refs.hkinnerWrap.$el.removeClass('red')
+        setTimeout(() => {
+          this.verificationVisible = false
+          this.$message({
+            message: '发送成功，请注意查看手机短信',
+            type: 'success'
+          })
+          if (!this.timer) {
+            this.codeloading = true
+            this.count = TIME_COUNT
+            this.timer = setInterval(() => {
+              if (this.count > 1 && this.count <= TIME_COUNT) {
+                this.count--
+              } else {
+                clearInterval(this.timer) // 清除定时器
+                this.timer = null
+                this.codeloading = false
+              }
+            }, 1000)
+          }
+        }, 1000)
+      } catch (e) {
+        this.$refs.hkinnerWrap && this.$refs.hkinnerWrap.$el.addClass('green')
+        this.$refs.hkinnerWrap && this.$refs.hkinnerWrap.$el.removeClass('red')
+        setTimeout(() => {
+          this.$refs.hkinnerWrap && this.$refs.hkinnerWrap.$el.removeClass('red')
+          this.$refs.hkinnerWrap && this.$refs.hkinnerWrap.$el.removeClass('green')
+          this.$refs.v_rightBtn.style.left = 0
+          this.$refs.imgBtn.style.left = 0
+          this.handleValidateImageInit()
+        }, 500)
+      }
+    },
+
+    handleHkinnerWrapMouseover() {
+      this.$refs.imgBg && (this.$refs.imgBg.style.display = 'block')
+      this.$refs.refresh && (this.$refs.imgBg.style.display = 'block')
+    },
+    handleHkinnerWrapMouseleave() {
+      this.$refs.imgBg && (this.$refs.imgBg.style.display = 'block')
+      this.$refs.refresh && (this.$refs.imgBg.style.display = 'block')
+    },
+    handleHkinnerWrapMousemove(e) {
+      if (this.isOpenHkinnerWrapMouse) {
+        const newLeft = e.pageX - this.dx
+        this.$refs.v_rightBtn.offsetLeft = newLeft
+        let newL = parseInt(this.$refs.v_rightBtn.style.left)
+        if (newL <= 0) {
+          newL = 0
+        } else if (newL >= 240) {
+          newL = 240
+        }
+        this.$refs.v_rightBtn.style.left = newL + 'px'
+        this.$refs.imgBtn.offsetLeft = newLeft
+        this.$refs.imgBtn.style.left = newL + 'px'
+      }
+    },
+    handleHkinnerWrapMouseup() {
+      if (this.isOpenHkinnerWrapMouse) {
+        this.isOpenHkinnerWrapMouse = false
+      }
+    },
+    handleImgBgMouseover() {
+      this.$refs.imgBg && (this.$refs.imgBg.style.display = 'block')
+      this.$refs.refresh && (this.$refs.imgBg.style.display = 'block')
+    },
+    handleImgBgMouseleave() {
+      this.$refs.imgBg && (this.$refs.imgBg.style.display = 'block')
+      this.$refs.refresh && (this.$refs.imgBg.style.display = 'block')
+    },
+    handleVRightBtnMousedown(e) {
+      this.$refs.huakuai && (this.$refs.huakuai.innerHTML = '')
+      this.$refs.hkinnerWrap && this.$refs.hkinnerWrap.$el.removeClass('red')
+      this.$refs.hkinnerWrap && this.$refs.hkinnerWrap.$el.removeClass('green')
+      this.dx = e.pageX - this.$refs.v_rightBtn.offsetLeft
+      this.$refs.hkinnerWrap && this.$refs.hkinnerWrap.$el.removeClass('green')
+      this.isOpenHkinnerWrapMouse = true
+    },
+    handleVRightBtnMouseup() {
+      this.isOpenHkinnerWrapMouse = false
+      this.slideOptions.sliderX = this.$refs.v_rightBtn.style.left.replace('px', '')
+      this.getVerificationCode()
+    },
+
+    async handleValidateImageInit() {
+      if (!this.phone) {
+        this.$message.error('请填写电话号码')
+        return
+      }
+      // try {
+      this.verificationVisible = true
+      // const res = await getVerificationImageCaptchaApi({ type: 'slide' })
+      const res = {
+        data: {
+          'type': 'slide',
+          'charImage': '',
+          'operationImage': '',
+          'originImage': '/Z',
+          'shadeImage': 'iVBmCC',
+          'cutoutImage': 'iVgg==',
+          'x': 0,
+          'y': 67
+        }
+      }
+      switch (res.data.type) {
+        case 'operation': this.initOperationVerificationCode(res.data); break
+        case 'char': this.initCharVerificationCode(res.data); break
+        case 'slide': this.initSlideVerificationCode(res.data); break
+        default: console.log('验证码错误'); break
+      }
+      // } catch (e) {
+      //   console.log(e)
+      // }
+    },
+    initOperationVerificationCode(data) {
+      this.$refs.imgBg_3 && (this.$refs.imgBg_3.style.background = '#fff url("data:image/jpg;base64,' + data.operationImage + '")')
+    },
+    initCharVerificationCode(data) {
+      this.$refs.imgBg_2 && (this.$refs.imgBg_2.style.background = '#fff url("data:image/jpg;base64,' + data.charImage + '")')
+      this.$refs.imgBg_3 && (this.$refs.imgBg_3.style.display = 'none')
+    },
+    initSlideVerificationCode(data) {
+      this.slideOptions.sliderY = data.y
+      this.$refs.huakuai && (this.$refs.huakuai.innerHTML = '向右滑动滑块填充拼图')
+      this.$refs.imgBg && (this.$refs.imgBg.style.background = '#fff url("data:image/jpg;base64,' + data.shadeImage + '")')
+      this.$refs.imgBtn && (this.$refs.imgBtn.style.top = data.y + 'px')
+      this.$refs.imgBtnImg && (this.$refs.imgBtnImg.src = 'data:image/png;base64,' + data.cutoutImage)
+      console.dir(this.$refs.hkinnerWrap)
+      this.$refs.hkinnerWrap && this.$refs.hkinnerWrap.$el.removeClass('red')
+      this.$refs.hkinnerWrap && this.$refs.hkinnerWrap.$el.removeClass('green')
+      this.$refs.v_rightBtn && (this.$refs.v_rightBtn.style.left = 0)
+      this.$refs.imgBtn && (this.$refs.imgBtn.style.left = 0)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.graphic-verification-code-container {
+	width: 100%;
+	box-sizing: border-box;
+
+	.rightValidate {
+		width: 280px;
+		margin: 0px auto;
+		position: relative;
+		line-height: 30px;
+		height: 30px;
+		text-align: center;
+		z-index: 99;
+		margin-top: 60px;
+	}
+
+	.v_rightBtn {
+		position: absolute;
+		left: 0;
+		top: 0;
+		height: 33px;
+		width: 40px;
+		background: #ddd;
+		cursor: pointer;
+	}
+
+	.imgBtn {
+		width: 44px;
+		height: 171px;
+		position: absolute;
+		left: 0;
+	}
+
+	.imgBtn img {
+		z-index: 99;
+		align: center;
+	}
+
+	.imgBg {
+		position: absolute;
+		bottom: 35px;
+		width: 280px;
+		height: 171px;
+		display: block;
+		z-index: 9;
+	}
+
+	.imgBg_2 {
+		position: absolute;
+		bottom: -80px;
+		bottom: 35px;
+		width: 150px;
+		height: 60px;
+		display: block;
+		z-index: 9;
+	}
+
+	.imgBg_3 {
+		position: absolute;
+		bottom: -80px;
+		bottom: 35px;
+		width: 170px;
+		height: 60px;
+		display: block;
+		z-index: 9;
+	}
+
+	.hkinnerWrap {
+		border: 1px solid #eee;
+		z-index: 9999
+	}
+
+	.green {
+		border-color: #34C6C2 !important;
+	}
+
+	.green .v_rightBtn {
+		background: #34C6C2;
+		color: #fff;
+	}
+
+	.red {
+		border-color: red !important;
+	}
+
+	.red .v_rightBtn {
+		background: red;
+		color: #fff;
+	}
+
+	.refresh {
+		position: absolute;
+		width: 30px;
+		height: 30px;
+		right: 4px;
+		top: 4px;
+		font-size: 12px;
+		color: #fff;
+		text-shadow: 0px 0px 9px #333;
+		cursor: pointer;
+		display: none;
+	}
+
+	.notSel {
+		user-select: none;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		-webkit-touch-callout: none;
+	}
+}
+</style>

src/components/GraphicVerificationCode/index.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="graphic-verification-code-container">
+    <div style="display: flex;align-items: center;">
+      <el-input
+        :value="inputCode" maxlength="6" type="text" auto-complete="off"
+        style="width: 63%;max-width: 200px;"
+        placeholder="请输入验证码" @input="handleCodeInput" @keyup.enter.native="$emit('enter-down')"
+      >
+        <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+      </el-input>
+      <div style="margin-left: 8px;">
+        <el-button type="primary" :loading="codeLoading" @click="handleGainVerify">
+          <span v-if="!codeLoading">获取验证码</span>
+          <span v-else>{{ codeCount }} s</span>
+        </el-button>
+      </div>
+    </div>
+    <el-dialog
+      :visible.sync="isShowGraphicVerificationDialog" v-bind="{ closeOnClickModal: false, width: '600px', title: '滑动码验证' }"
+      append-to-body
+    >
+      <div>
+        <div style="margin: 28rpx 0 0;">
+          <SliderCaptcha
+            v-model="slideVisible" :options="slideOptions" :loading="slideLoading"
+            @check="handleConfirmSlide" @close="isShowGraphicVerificationDialog = false" @refresh="getSliderOptions"
+            @error="getSliderOptions"
+          >
+            <template #title>安全验证</template>
+            <template #successText>验证通过</template>
+            <template #errorText>
+              <text style="color: #dc362e;">是不是太难了，换一个</text>
+            </template>
+            <template #tips>拖动下方滑块完成拼图</template>
+            <template #question>请尽快完成滑动自定义提示</template>
+          </SliderCaptcha>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import SliderCaptcha from './SliderCaptcha'
+import { getCode, getVerificationImageCaptchaApi } from '@/api/account'
+import { getUpdatePhoneCode, getPrivacyCode } from '@/api/privacy'
+
+export default {
+  name: 'GraphicVerificationCode',
+  components: {
+    SliderCaptcha
+  },
+  props: {
+    phone: {
+      type: [String, Number],
+      default: ''
+    },
+    apiType: {
+      type: [String, Number],
+      default: 'default' // default, update, privacy
+    }
+  },
+  data() {
+    return {
+      inputCode: '',
+      codeTimer: '',
+      codeLoading: false,
+      codeCount: '',
+
+      isShowGraphicVerificationDialog: false,
+      slideVisible: false,
+      slideLoading: false,
+      slideOptions: {
+        cutoutImage: '',
+        shadeImage: '',
+        sliderKey: '',
+        sliderY: ''
+      }
+    }
+  },
+  mounted() { },
+  methods: {
+    handleCodeInput(e) {
+      console.log(e)
+      this.inputCode = e
+      this.$emit('input', this.inputCode)
+    },
+    // 获取验证码
+    async getVerificationCode() {
+      if (!this.phone) {
+        this.$message.error('请填写电话号码')
+        return
+      }
+      try {
+        let _api
+        if (this.apiType === 'update') {
+          _api = getUpdatePhoneCode
+        } else if (this.apiType === 'privacy') {
+          _api = getPrivacyCode
+        } else {
+          _api = getCode
+        }
+        const res = await _api({ phone: this.phone, x: '0', y: '0' })
+        this.$message({
+          message: '发送成功，请注意查看手机短信',
+          type: 'success'
+        })
+        if (!this.codeTimer) {
+          this.codeLoading = true
+          this.codeTimer = setInterval(() => {
+            if (this.codeCount > 1 && this.codeCount <= 60) {
+              this.codeCount--
+            } else {
+              clearInterval(this.codeTimer) // 清除定时器
+              this.codeTimer = null
+              this.codeLoading = false
+            }
+          }, 1000)
+        }
+      } catch (e) {
+        console.log(e)
+      }
+    },
+
+    async handleGainVerify() {
+      if (!this.phone) {
+        this.$message.error('请填写电话号码')
+        return
+      } else if (!/^1[3-9]\d{9}$/.test(this.phone)) {
+        this.$message({
+          message: '请输入正确手机号',
+          type: 'warning'
+        })
+        return
+      }
+      this.isShowGraphicVerificationDialog = true
+      this.slideVisible = true
+      this.getSliderOptions()
+    },
+    getSliderOptions() {
+      this.slideLoading = true
+      getVerificationImageCaptchaApi({ type: 'slide' })
+        .then((res) => {
+          this.slideOptions = {
+            cutoutImage: res.data.cutoutImage,
+            shadeImage: res.data.shadeImage,
+            sliderKey: 'key',
+            sliderY: res.data.y
+          }
+          this.slideLoading = false
+        })
+    },
+    handleConfirmSlide({ sliderKey, sliderX, done, error }) {
+      this.slideLoading = true
+      console.log(sliderX, this.slideOptions.sliderY)
+      let _api
+      if (this.apiType === 'update') {
+        _api = getUpdatePhoneCode
+      } else if (this.apiType === 'privacy') {
+        _api = getPrivacyCode
+      } else {
+        _api = getCode
+      }
+      // _api({ phone: this.phone, x: sliderX, y: this.slideOptions.sliderY, xxx: sliderKey })
+      //   .then((res) => {
+      this.$emit('success-verify', true)
+      this.slideLoading = false
+      done()
+      if (!this.codeTimer) {
+        this.codeLoading = true
+        this.codeCount = 60
+        this.codeTimer = setInterval(() => {
+          if (this.codeCount > 1 && this.codeCount <= 60) {
+            this.codeCount--
+          } else {
+            clearInterval(this.codeTimer) // 清除定时器
+            this.codeTimer = null
+            this.codeLoading = false
+          }
+        }, 1000)
+      }
+      this.isShowGraphicVerificationDialog = false
+      this.$message({
+        message: '发送成功，请注意查看手机短信',
+        type: 'success'
+      })
+      // })
+      // .catch(() => {
+      //   this.slideLoading = false
+      //   error()
+      // })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.graphic-verification-code-container {
+	width: 100%;
+	box-sizing: border-box;
+}
+</style>

src/views/finance/account/components/EditModal.vue

@@ -41,16 +41,12 @@
       </el-form-item>
       <el-form-item label="注册手机号" prop="phone">
         <el-input v-model="formData.phone" maxlength="11" style="width: 120px;" />
-        <el-button style="margin-left: 10px;" type="primary" :loading="codeLoading" @click="handleSendCode(formData.phone)">
-          <span v-if="!codeLoading">获取验证码</span>
-          <span v-else>{{ codeCount }} s</span>
-        </el-button>
       </el-form-item>
       <el-form-item label="验证码" prop="code">
-        <el-input
-          v-model="formData.code" oninput="value=value.replace(/[^\d]/g,'')" maxlength="6"
-          style="width: 120px;"
-        />
+        <GraphicVerificationCode
+          :phone="formData.phone"
+          @input="(e) => formData.code = e"
+        ></GraphicVerificationCode>
       </el-form-item>
       <el-form-item v-if="formData.bankType === 1" label="开户行所在省市" prop="city">
         <el-cascader
@@ -79,13 +75,15 @@
 </template>
 
 <script>
-import { getSelect, getCode, bankUpdate, bankAdd } from '@/api/account'
+import GraphicVerificationCode from '@/components/GraphicVerificationCode/index.vue'
+import { getSelect, bankUpdate, bankAdd } from '@/api/account'
 import { searchParentId } from '@/api/threeSelection'
 import bankCodeData from '../bankCode.json'
 
 export default {
   name: 'EditModal',
   components: {
+    GraphicVerificationCode
   },
   data() {
     return {
@@ -132,9 +130,6 @@ export default {
       },
       cardNameReg: /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、' ']/g,
       bankList: [],
-      codeTimer: '',
-      codeLoading: false,
-      codeCount: '',
       regionArrDialog: [],
       regionProps: {
         lazy: true,
@@ -181,39 +176,6 @@ export default {
     handleClose() {
       this.visible = false
     },
-    // 获取验证码
-    async handleSendCode(phone) {
-      if (phone === '') {
-        this.$message.error('请填写电话号码')
-        return
-      } else if (!/^1[3-9]\d{9}$/.test(phone)) {
-        this.$message({
-          message: '请输入正确手机号',
-          type: 'warning'
-        })
-        return false
-      }
-      if (!this.codeTimer) {
-        const res = await getCode({ phone })
-        if (res.code === '') {
-          this.$message({
-            message: '发送成功，请注意查看手机短信',
-            type: 'success'
-          })
-        }
-        this.codeLoading = true
-        this.codeCount = 60
-        this.codeTimer = setInterval(() => {
-          if (this.codeCount > 0 && this.codeCount <= 60) {
-            this.codeCount--
-          } else {
-            clearInterval(this.codeTimer) // 清除定时器
-            this.codeTimer = null
-            this.codeLoading = false
-          }
-        }, 1000)
-      }
-    },
     async getBankList() {
       const res = await getSelect({ dictName: '所属银行' })
       this.bankList = res.data

src/views/finance/account/components/UnBindBank.vue

@@ -14,16 +14,12 @@
     >
       <el-form-item label="注册手机号" prop="phone">
         <el-input v-model="formData.phone" maxlength="11" placeholder="注册手机号" disabled style="width: 120px;" />
-        <el-button style="margin-left: 10px;" type="primary" :loading="codeLoading" @click="handleSendCode(formData.phone)">
-          <span v-if="!codeLoading">获取验证码</span>
-          <span v-else>{{ codeCount }} s</span>
-        </el-button>
       </el-form-item>
       <el-form-item label="验证码" prop="code">
-        <el-input
-          v-model="formData.code" oninput="value=value.replace(/[^\d]/g,'')" maxlength="6"
-          style="width: 120px;"
-        />
+        <GraphicVerificationCode
+          :phone="formData.phone"
+          @input="(e) => formData.code = e"
+        ></GraphicVerificationCode>
       </el-form-item>
     </el-form>
     <template #footer>
@@ -36,11 +32,13 @@
 </template>
 
 <script>
-import { getCode, bankDelete } from '@/api/account'
+import GraphicVerificationCode from '@/components/GraphicVerificationCode/index.vue'
+import { bankDelete } from '@/api/account'
 
 export default {
   name: 'UnBindBank',
   components: {
+    GraphicVerificationCode
   },
   data() {
     return {
@@ -57,49 +55,13 @@ export default {
       formRules: {
         phone: [ { required: true, message: '缺少注册手机号' } ],
         code: [ { required: true, message: '请输入验证码' } ]
-      },
-      codeTimer: '',
-      codeLoading: false,
-      codeCount: ''
+      }
     }
   },
   methods: {
     handleClose() {
       this.visible = false
     },
-    // 获取验证码
-    async handleSendCode(phone) {
-      if (phone === '') {
-        this.$message.error('请填写电话号码')
-        return
-      } else if (!/^1[3-9]\d{9}$/.test(phone)) {
-        this.$message({
-          message: '请输入正确手机号',
-          type: 'warning'
-        })
-        return false
-      }
-      if (!this.codeTimer) {
-        const res = await getCode({ phone })
-        if (res.code === '') {
-          this.$message({
-            message: '发送成功，请注意查看手机短信',
-            type: 'success'
-          })
-        }
-        this.codeLoading = true
-        this.codeCount = 60
-        this.codeTimer = setInterval(() => {
-          if (this.codeCount > 0 && this.codeCount <= 60) {
-            this.codeCount--
-          } else {
-            clearInterval(this.codeTimer) // 清除定时器
-            this.codeTimer = null
-            this.codeLoading = false
-          }
-        }, 1000)
-      }
-    },
     initList() {
     },
     handleOpen(params = {}) {

src/views/login/index.vue

@@ -71,19 +71,11 @@
               </el-input>
             </el-form-item>
             <el-form-item prop="code">
-              <el-input
-                v-model="anthorForm.code" maxlength="6" type="text" class="iptHeight"
-                auto-complete="off"
-                style="width: 63%" placeholder="请输入验证码" @keyup.enter.native="handlePhoneLogin"
-              >
-                <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-              </el-input>
-              <div class="login-code">
-                <el-button class="codeBtn" type="primary" :loading="codeloading" @click="getCode(anthorForm.username)">
-                  <span v-if="!codeloading">获取验证码</span>
-                  <span v-else>{{ count }} s</span>
-                </el-button>
-              </div>
+              <GraphicVerificationCode
+                :phone="anthorForm.username"
+                @input="(e) => anthorForm.code = e"
+                @enter-down="handlePhoneLogin"
+              ></GraphicVerificationCode>
             </el-form-item>
             <div class="boxBottom">
               <el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">自动登录</el-checkbox>
@@ -122,22 +114,11 @@
                 </el-input>
               </el-form-item>
               <el-form-item prop="code">
-                <el-input
-                  v-model="retrievePwdForm.code" maxlength="6" type="text" class="iptHeight"
-                  auto-complete="off"
-                  style="width: 63%" placeholder="请输入验证码" @keyup.enter.native="forgetPwdFn"
-                >
-                  <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-                </el-input>
-                <div class="login-code">
-                  <el-button
-                    class="codeBtn" type="primary" :loading="codeloading"
-                    @click="getCode(retrievePwdForm.username)"
-                  >
-                    <span v-if="!codeloading">获取验证码</span>
-                    <span v-else>{{ count }} s</span>
-                  </el-button>
-                </div>
+                <GraphicVerificationCode
+                  :phone="retrievePwdForm.username"
+                  @input="(e) => retrievePwdForm.code = e"
+                  @enter-down="handlePhoneLogin"
+                ></GraphicVerificationCode>
               </el-form-item>
               <el-form-item prop="newPassword">
                 <el-input
@@ -175,17 +156,19 @@
 </template>
 
 <script>
+import GraphicVerificationCode from '@/components/GraphicVerificationCode/index.vue'
 // import { validUsername } from '@/utils/validate'
 import { adminBuild, forgetPassword } from '@/api/user'
 import {
   getUserId
 } from '@/utils/auth' // get token from cookie
-const TIME_COUNT = 60 // 更改倒计时时间
 import Background from '@/assets/images/background.jpg'
-import { getCode } from '@/api/account'
 const JM = require('@/utils/rsaEncrypt.js')
 export default {
   name: 'Login',
+  components: {
+    GraphicVerificationCode
+  },
   data() {
     // const validateUsername = (rule, value, callback) => {
     //   if (!validUsername(value)) {
@@ -258,9 +241,6 @@ export default {
         code: [ { required: true, trigger: 'blur', message: '验证码不能为空' } ]
       },
       loading: false,
-      codeloading: false,
-      count: '',
-      timer: null,
       redirect: undefined,
       getPassword: true
     }
@@ -279,57 +259,6 @@ export default {
       console.log(index)
       this.tabIndex = index
     },
-    // 获取验证码
-    async getCode(phone) {
-      console.log(phone)
-      if (phone === '' || phone === undefined) {
-        this.$message.error('请填写电话号码')
-        return
-      }
-      const res = await getCode({ phone })
-      if (res.code === '') {
-        this.$message({
-          message: '发送成功，请注意查看手机短信',
-          type: 'success'
-        })
-        if (!this.timer) {
-          this.codeloading = true
-          this.count = TIME_COUNT
-          this.timer = setInterval(() => {
-            if (this.count > 1 && this.count <= TIME_COUNT) {
-              this.count--
-            } else {
-              clearInterval(this.timer) // 清除定时器
-              this.timer = null
-              this.codeloading = false
-            }
-          }, 1000)
-        }
-      }
-
-      // if (!this.timer) {
-      //   this.codeloading = true
-      //   this.count = TIME_COUNT
-      //   this.show = false
-      //   const res = await getCode({ phone })
-      //   if (res.code === '') {
-      //     this.$message({
-      //       message: '发送成功，请注意查看手机短信',
-      //       type: 'success'
-      //     })
-      //   }
-      //   this.timer = setInterval(() => {
-      //     if (this.count > 0 && this.count <= TIME_COUNT) {
-      //       this.count--
-      //     } else {
-      //       this.show = true
-      //       clearInterval(this.timer) // 清除定时器
-      //       this.timer = null
-      //       this.codeloading = false
-      //     }
-      //   }, 1000)
-      // }
-    },
     // 忘记密码
     runForgetPassord() {
       this.getPassword = false
@@ -527,49 +456,12 @@ export default {
 	}
 }
 
-.iptHeight {
-	height: 54px !important;
-
-	input {
-		height: 54px !important;
-	}
-
-	span {
-		display: flex;
-		align-items: center;
-	}
-
-	.input-icon {
-		width: 20px;
-		height: 20px;
-	}
-}
-
 .login-tip {
 	font-size: 13px;
 	text-align: center;
 	color: #bfbfbf;
 }
 
-.login-code {
-	float: right;
-
-	.codeBtn {
-		height: 54px;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		width: 100px;
-		background: #eeeeee;
-		color: #666666;
-		border: none;
-	}
-
-	img {
-		vertical-align: middle;
-	}
-}
-
 .box-card {
 	width: 100%;
 	height: 100%;

src/views/setup/phone/index.vue

@@ -13,11 +13,11 @@
           <el-input v-model="ruleForm.newPhone" maxlength="11" style="width: 70%" placeholder="请输入新手机号" />
         </el-form-item>
         <el-form-item label="验证码" prop="code">
-          <el-input v-model="ruleForm.code" maxlength="6" style="width: 40%; margin-right: 38px" placeholder="请输入验证码" />
-          <el-button class="codeBtn" type="primary" :loading="codeloading" @click="getCode(oldPhone)">
-            <span v-if="!codeloading">获取验证码</span>
-            <span v-else>{{ count }} s</span>
-          </el-button>
+          <GraphicVerificationCode
+            api-type="update"
+            :phone="ruleForm.newPhone"
+            @input="(e) => ruleForm.code = e"
+          ></GraphicVerificationCode>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="submint"> 确定 </el-button>
@@ -28,14 +28,17 @@
 </template>
 
 <script>
+import GraphicVerificationCode from '@/components/GraphicVerificationCode/index.vue'
 import {
   getAdminPhone,
-  getUpdatePhoneCode,
   updatePhone
 } from '@/api/privacy'
 const JM = require('@/utils/rsaEncrypt.js')
-const TIME_COUNT = 120 // 更改倒计时时间
 export default {
+  name: 'Phone',
+  components: {
+    GraphicVerificationCode
+  },
   data() {
     // 旧手机号
     const oldPhone = (rule, value, callback) => {
@@ -73,9 +76,6 @@ export default {
         newPhone: [ { required: true, validator: newPhone, trigger: 'blur' } ],
         code: [ { required: true, validator: code, trigger: 'blur' } ]
       },
-      codeloading: false,
-      count: '',
-      timer: null,
       privacyTime: 0
     }
   },
@@ -91,40 +91,6 @@ export default {
         this.oldPhone = res.data
       })
     },
-    // 获取验证码
-    async getCode(phone) {
-      console.log(phone)
-      if (phone === '' || phone === undefined) {
-        this.$message.error('请填写新手机号')
-        return
-      }
-      if (/^1[3456789]\d{9}$/.test(phone) === false) {
-        this.$message.error('请填写正确手机号')
-        return false
-      }
-      if (!this.timer) {
-        this.codeloading = true
-        this.count = TIME_COUNT
-        this.show = false
-        const res = await getUpdatePhoneCode({ phone })
-        if (res.code === '') {
-          this.$message({
-            message: '发送成功，请注意查看手机短信',
-            type: 'success'
-          })
-        }
-        this.timer = setInterval(() => {
-          if (this.count > 0 && this.count <= TIME_COUNT) {
-            this.count--
-          } else {
-            this.show = true
-            clearInterval(this.timer) // 清除定时器
-            this.timer = null
-            this.codeloading = false
-          }
-        }, 1000)
-      }
-    },
     submint() {
       if (this.ruleForm.newPhone === '' || this.ruleForm.newPhone === undefined) {
         this.$message.error('请填写新手机号')

src/views/setup/privacy/index.vue

@@ -13,11 +13,11 @@
           <el-input v-else v-model="ruleForm.newPhone" disabled style="width: 70%" placeholder="请输入管理员电话" />
         </el-form-item>
         <el-form-item label="验证码" prop="code">
-          <el-input v-model="ruleForm.code" maxlength="6" style="width: 40%; margin-right: 38px" placeholder="请输入验证码" />
-          <el-button class="codeBtn" type="primary" :loading="codeloading" @click="getCode(ruleForm.newPhone)">
-            <span v-if="!codeloading">获取验证码</span>
-            <span v-else>{{ count }} s</span>
-          </el-button>
+          <GraphicVerificationCode
+            api-type="update"
+            :phone="ruleForm.newPhone"
+            @input="(e) => ruleForm.code = e"
+          ></GraphicVerificationCode>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="submint(ruleForm.newPhone)">
@@ -32,10 +32,8 @@
 <script>
 import {
   getAdminPhone,
-  getPrivacyCode,
   verifyPrivacyCode
 } from '@/api/privacy'
-const TIME_COUNT = 120 // 更改倒计时时间
 const JM = require('@/utils/rsaEncrypt.js')
 export default {
   data() {
@@ -65,9 +63,6 @@ export default {
         newPhone: [ { required: true, validator: newPhone, trigger: 'blur' } ],
         code: [ { required: true, validator: code, trigger: 'blur' } ]
       },
-      codeloading: false,
-      count: '',
-      timer: null,
       privacyTime: '',
       now_time: ''
     }
@@ -98,44 +93,8 @@ export default {
         this.ruleForm.newPhone = res.data
       })
     },
-    // 获取验证码
-    async getCode(phone) {
-      console.log(phone)
-      if (phone === '' || phone === undefined) {
-        this.$message.error('请填写手机号')
-        return
-      }
-      if (/^1[3456789]\d{9}$/.test(phone) === false) {
-        this.$message.error('请填写正确手机号')
-        return false
-      }
-      if (!this.timer) {
-        this.codeloading = true
-        this.count = TIME_COUNT
-        this.show = false
-        const res = await getPrivacyCode({ phone })
-        if (res.code === '') {
-          this.$message({
-            message: '发送成功，请注意查看手机短信',
-            type: 'success'
-          })
-        }
-        this.timer = setInterval(() => {
-          if (this.count > 0 && this.count <= TIME_COUNT) {
-            this.count--
-          } else {
-            this.show = true
-            clearInterval(this.timer) // 清除定时器
-            this.timer = null
-            this.codeloading = false
-          }
-        }, 1000)
-      }
-    },
     // 确定
     async submint() {
-      this.timer = null
-      this.codeloading = false
       if (this.ruleForm.code === '' || this.ruleForm.code === undefined) {
         this.$message.error('请填写验证码')
         return