源文件

jeepay-ui-uapp-agent/components/verification-code-style2/verification-code-style2.vue

@@ -0,0 +1,224 @@
+<template>
+  <view class="verification_code">
+    <view class="verification_code_continor">
+      <view
+        class="verification_code_item"
+        v-for="(item, index) in latticeNum"
+        :key="index"
+        :style="
+          blurShowLocal &&
+          (inputValues.length === index || (inputValues.length === latticeNum && index === latticeNum - 1))
+            ? borderCheckStyle
+            : borderStyle
+        "
+        @tap="latticeFoc(index)"
+      >
+        <block v-if="inputValues[index]">
+          <view v-if="ciphertextSty == 1" class="point"></view>
+          <block v-else>{{ ciphertextSty == 2 ? "*" : inputValues[index] }}5</block>
+        </block>
+      </view>
+    </view>
+    <input
+      type="number"
+      :type="inputType"
+      focus
+      :maxlength="lattice"
+      class="input_info"
+      v-model="text"
+      @input="inputVal"
+      @blur="blur"
+      @focus="focus"
+      ref="input"
+    />
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    // 输入框框框的个数
+    latticeNum: {
+      type: Number,
+      default: 4,
+    },
+    // 未选中样式
+    borderStyle: {
+      type: String,
+      default: "border:1rpx solid #DADEE6;border-radius: 12rpx;",
+    },
+    // 选中的样式
+    borderCheckStyle: {
+      type: String,
+      default: "border:2rpx solid #7737FE;border-radius: 12rpx;",
+    },
+    // input类型
+    inputType: {
+      type: String,
+      default: "number",
+    },
+    // 失去焦点后是否继续显示，当前所对焦的输入框（样式）
+    blurShow: {
+      type: Boolean,
+      default: false,
+    },
+    // 密文样式  1 圆点样式    2 星号 *  样式   默认为0   无密文
+    ciphertextSty: {
+      type: Number,
+      default: 2,
+    },
+    // 是否允许修改/填写某一个框框的值
+    updateOne: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      inputValues: [], //输入的值
+      blurShowLocal: true,
+      // cursor:null
+      lattice: 6,
+      keyCodeArr: [],
+      text: "",
+    }
+  },
+  mounted() {
+    this.blurShowLocal = this.blurShow
+    // if (this.updateOne) {
+    // 	let arr = [];
+    // 	for (let i = 0; i < this.latticeNum; i++) {
+    // 		arr.push(' ');
+    // 	}
+    // 	this.inputValues = arr;
+    // }
+  },
+  methods: {
+    /**
+     * 输入框的值
+     */
+
+    inputVal(e) {
+      //#ifdef MP-WEIXIN
+      let keyCode = e.detail.keyCode
+      if (this.inputValues.length < 6) {
+        if (keyCode === 8 && this.inputValues.length > 0) {
+          this.inputValues.pop()
+        } else {
+          if (keyCode < 48 || keyCode > 57) {
+            uni.showToast({
+              icon: "none",
+              title: "请输入数字",
+              duration: 1000,
+            })
+          } else {
+            this.keyCodeArr.push(keyCode)
+            if (this.keyCodeArr.length < 6) {
+              this.lattice += 1
+            } else if (this.keyCodeArr.length >= 6) {
+              this.keyCodeArr = []
+              this.lattice = 6
+            }
+
+            let codeObj = {
+              48: "0",
+              49: "1",
+              50: "2",
+              51: "3",
+              52: "4",
+              53: "5",
+              54: "6",
+              55: "7",
+              56: "8",
+              57: "9",
+            }
+
+            this.inputValues.push(codeObj[keyCode])
+            this.$emit("getInputVerification", this.inputValues.join(""))
+            // console.log(this.inputValues)
+          }
+        }
+      } else if (keyCode === 8 && this.inputValues.length > 0) {
+        this.inputValues.pop()
+        return
+      }
+
+      //#endif
+      //#ifdef APP || H5
+      this.inputValues = this.text
+      this.$emit("getInputVerification", this.inputValues)
+      //#endif
+    },
+    // 设置验证码的值
+    /**
+     * verificationCodeValue  数组
+     */
+    setVerificationCode(verificationCodeValue = []) {
+      this.inputValues = verificationCodeValue
+    },
+    /**
+     * 清空验证码的值
+     */
+    cleanVal() {
+      this.inputValues = []
+      this.text = ""
+    },
+    latticeFoc(index) {},
+    blur() {
+      !this.blurShow ? (this.blurShowLocal = false) : ""
+    },
+    focus() {
+      !this.blurShow ? (this.blurShowLocal = true) : ""
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.verification_code {
+  // width: 260rpx;
+  // margin: 20rpx auto;
+  position: relative;
+  overflow: hidden;
+
+  .verification_code_continor {
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    // background-color: beige;
+    .verification_code_item {
+      box-sizing: border-box;
+      width: 80rpx;
+      height: 80rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      display: flex;
+      background-color: #fff;
+      // border-radius: 12rpx;
+      margin-top: 6rpx;
+    }
+
+    .verification_code_item:not(:first-child) {
+      margin-left: 20rpx;
+    }
+    .point {
+      width: 20rpx;
+      height: 20rpx;
+      background-color: black;
+      border-radius: 200px;
+    }
+  }
+
+  .input_info {
+    width: 200%;
+    height: 100rpx;
+    border: 1px solid $primaryColor;
+    position: absolute;
+    opacity: 0;
+    -khtml-opacity: 0;
+    top: -10rpx;
+    left: -100%;
+  }
+}
+</style>