renli-pc/src/pages/eashier/service/passcode.vue

<template>
  <el-dialog :close-on-click-modal="false" v-dialogDrag title="提示" :visible.sync="paymentcodeDialog" width="500px" append-to-body :before-close="handleClose">
    <el-form :model="paymentform">
      <span v-if="sessionStorageList.memberPay == 0" style="font-size: 14px; margin-left: 10px; color: #999">本次支付需要验证支付密码</span>
      <span v-if="sessionStorageList.memberPay == 1" style="font-size: 14px; margin-left: 10px; color: #999">本次支付需要签字确认</span>
      <span v-if="sessionStorageList.memberPay == 2" style="font-size: 14px; margin-left: 10px; color: #999">本次支付需要验证支付密码和签字确认</span><br />
      <el-form-item v-if="
              this.sessionStorageList.memberPay == 0 || this.sessionStorageList.memberPay == 2
            " label="支付密码 : ">
        <el-input class="form-width-ms" v-model="pwdCover" ref="passId" type="text" name="pwd" id="pwd" placeholder="密码" autocomplete="off" @input="setPassword" @keydown="passKeydown"><i slot="prefix" class="el-icon-lock"></i></el-input>
      </el-form-item>
      <el-form-item v-if="
              this.sessionStorageList.memberPay == 1 || this.sessionStorageList.memberPay == 2
            " label="签字确认: ">
        <signature style="width: 400px; height: 300px" @imageValue="imageValue" ref="signature"></signature>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" plain @click="handleClose">取 消</el-button>
      <el-button size="mini" type="primary" @click="confirm()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { checkCashWord } from "@/api/eashier.js";
import signature from "@/pages/eashier/components/signature";
export default {
  components: { signature },
  data() {
    return {
      username: "",
      password: "",
      pwdCover: "",
      paymentcodeDialog: false,
      recColl: 1,
      sessionStorageList: JSON.parse(
        sessionStorage.getItem("sessionStorageData")
      ),
      file: null,
      imgvalue: "",
      paymentform: {},
      password: "",
    };
  },
  methods: {
    //关闭弹窗前的回调方法
    handleClose() {
      this.paymentcodeDialog = false;
      this.pwdCover = null;
      this.password = null;
      this.recColl = 1;
      this.imgvalue = null;
      this.file = null;
      this.paymentform = {};
    },
    setPassword(val) {
      console.log(val);
      let reg = /[0-9a-zA-Z]/g; // 只允许输入字母和数字
      let nDot = /[^●]/g; // 非圆点字符
      let index = -1; // 新输入的字符位置
      let lastChar = void 0; // 新输入的字符
      let realArr = this.password.split(""); // 真实密码数组
      let coverArr = val.split(""); // 文本框显示密码数组
      let coverLen = val.length; // 文本框字符串长度
      let realLen = this.password.length; // 真实密码长度
      // 找到新输入的字符及位置
      coverArr.forEach((el, idx) => {
        if (nDot.test(el)) {
          index = idx;
          lastChar = el;
        }
      });
      // 判断输入的字符是否符合规范，不符合的话去掉该字符
      if (lastChar && !reg.test(lastChar)) {
        coverArr.splice(index, 1);
        this.pwdCover = coverArr.join("");
        return;
      }
      if (realLen < coverLen) {
        // 新增字符
        realArr.splice(index, 0, lastChar);
      } else if (coverLen <= realLen && index !== -1) {
        // 替换字符（选取一个或多个字符直接替换）
        realArr.splice(index, realLen - (coverLen - 1), lastChar);
      } else {
        // 删除字符，因为 val 全是 ● ，没有办法匹配，不知道是从末尾还是中间删除的字符，删除了几个，不好对 password 处理，所以可以通过光标的位置和 val 的长度来判断
        let pos = document.getElementById("pwd").selectionEnd; // 获取光标位置
        realArr.splice(pos, realLen - coverLen);
      }
      // 将 pwdCover 替换成 ●
      this.pwdCover = val.replace(/\S/g, "●");
      this.password = realArr.join("");
      console.log(this.password);
    },

    passKeydown(e) {
      this.confirm();
      // let keyCode = e.keyCode;
      // if (keyCode === 8 || keyCode === 46) {
      //   //backspace 和delete
      //   let len = this.$refs.passId.value.length;
      //   if (len === 1) {
      //     this.$refs.passId.value = "";
      //     return false;
      //   }
      //   if (e.target.selectionStart === 0 && e.target.selectionEnd === len) {
      //     this.$refs.passId.value = "";
      //     return false;
      //   }
      // }
      // return true;
    },
    //组件传值
    show(form) {
      Object.assign(this.$data, this.$options.data.call(this));
      this.form = { ...form };
      this.paymentform.id = form.id;
      this.paymentcodeDialog = true;
      var that = this;
      setTimeout(() => {
        that.$refs.passId.focus();
        that.$refs.signature.show();
      }, 800);
    },
    imageValue(v) {
      this.file = v;
      this.imgvalue = v;
    },
    confirm() {
      this.paymentform.cashPassword = this.password;
      checkCashWord(this.paymentform).then((res) => {
        if (res.data == true) {
          this.$message.success({ message: "密码正确!" });
          this.$emit("passcodeData", this.file);
          console.log(this.file)
          this.paymentcodeDialog = false;
        } else {
          this.$alert("密码错误", "提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "error",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
  },
};
</script>

<style></style>