usky-web-pad/src/components/oa-passBody/index.vue

<template>
  <view class="visit-box" v-if="show">
    <image class="visit-bg" src="./bg.png" mode="scaleToFill"></image>
    <!-- <view class="forget-pass" @tap="forgetpass">忘记密码</view> -->
    <image class="visit-close" src="./close1.png" @click="close"></image>
    <text class="visit-text">请输入密码</text>
    <view class="visit-list">
      <view class="visit-list-box" v-for="(item, index) in passselect" :key="index"
        :class="{ 'visit-list-box-last': index === passselect.length - 1 }" :style="{
          backgroundColor: index < selectIndex ? '#FFFFFF' : 'rgba(0,0,0,0)',
        }"></view>
    </view>
    <view class="visit-Nine-palaces">
      <view class="nine-row" v-for="(row, ri) in keyRows" :key="'row-' + ri"
        :class="{ 'nine-row-last': ri === keyRows.length - 1 }">
        <view class="visit-Nine-palaces-list" v-for="(item, ci) in row" :key="'cell-' + ri + '-' + ci"
          :class="{ 'visit-Nine-palaces-list-row-end': ci === 2 }" :style="{
            borderColor: styleClass(item.key),
            backgroundColor: keytype(item.key, ri * 3 + ci),
          }" @click="selectkey(item, ri * 3 + ci)">
          <text v-if="item.key !== 'backspace'" class="nine-key-text">{{
            item.key
            }}</text>
          <view class="qingchu-box" v-else>
            <image class="qingchu-img" src="./qingchu1.png" mode="aspectFit"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import sys from "@/plugins/device/sys.plugins.js";

export default {
  name: "visit-box",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    selectColor: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      passselect: new Array(6),
      Keylist: [
        { key: 1 },
        { key: 2 },
        { key: 3 },
        { key: 4 },
        { key: 5 },
        { key: 6 },
        { key: 7 },
        { key: 8 },
        { key: 9 },
        { key: "#" },
        { key: 0 },
        { key: "backspace" },
      ],
      key_index: null,
      select: [], //选择的时候,
      selectIndex: null,
      KeylistIndex: null,
    };
  },
  computed: {
    /** 一行三个键，避免 nvue 下 flex-wrap 表现不一致 */
    keyRows() {
      const list = this.Keylist;
      const rows = [];
      for (let i = 0; i < list.length; i += 3) {
        rows.push(list.slice(i, i + 3));
      }
      return rows;
    },
  },
  methods: {
    styleClass(type) {
      // return typeof type !== "number" ? "transparent" : "#ffffff";
      return "#ffffff";
    },
    keytype(type, index) {
      if (this.key_index === index && typeof type === "number") {
        type = this.selectColor;
      } else {
        type = "rgba(0,0,0,0)";
      }
      return type;
    },
    //选择事件
    selectkey(even, index) {
      sys.playClickSound();
      this.key_index = index;

      if (even.key !== "backspace" && this.selectIndex < 6) {
        this.select.push(even.key);
        this.selectIndex++;
        this.$forceUpdate();
      } else if (even.key === "backspace") {
        //点击清除的时候
        if (this.selectIndex > 0) {
          this.selectIndex--;
        }
        this.select.splice(this.selectIndex, 1);
        this.$forceUpdate();
      }

      if (this.selectIndex === 6) {
        // 延迟提交，避免弹层立刻关闭截断最后一声嘟
        setTimeout(() => {
          this.$emit("change", this.select.join(""));
        }, 150);
      }
    },
    forgetpass() {
      this.$emit("forgetpass");
    },
    //关闭按钮事件
    close() {
      sys.playClickSound();
      this.$emit("close", false);
    },
  },
  watch: {
    select: {
      handler(newName, oldName) {
        if (newName.length === 6) {
          this.$emit("select", newName.join(""));
        }
      },

      immediate: true,
    },
  },
};
</script>

<style scoped>
.qingchu-box {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.qingchu-img {
  width: 46px;
  height: 46px;
}

.visit-bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.visit-box {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
}

/* 预留：忘记密码 */
.visit-box .forget-pass {
  width: 72px;
  height: 28px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 14px 0px 0px 14px;
  font-size: 13px;
  font-weight: 400;
  line-height: 28px;
  color: #ffffff;
  opacity: 1;
  text-align: center;
  position: absolute;
  top: 10px;
  right: 0px;
}

.visit-close {
  position: absolute;
  top: 25rpx;
  right: 25rpx;
  width: 40px;
  height: 40px;
}

.visit-text {
  /* 不用百分比：直接用左右贴边铺满 */
  position: relative;
  left: 0px;
  right: 0px;
  font-size: 30px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  margin-top: 110rpx;
}

.visit-list {
  width: 200px;
  height: 25px;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-top: 18px;
  margin-bottom: 50px;
  justify-content: center;
  align-items: center;
}

.visit-list-box {
  width: 25px;
  height: 25px;
  border-radius: 15px;
  border-width: 2px;
  border-style: solid;
  border-color: #ffffff;
  margin-right: 10px;
}

.visit-list-box-last {
  margin-right: 0px;
}

.visit-Nine-palaces {
  width: 340px;
  flex-direction: column;
}

.nine-row {
  width: 340px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 18px;
}

.nine-row-last {
  margin-bottom: 0px;
}

.visit-Nine-palaces-list {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 45px;
  border-width: 3px;
  border-style: solid;
  border-color: #ffffff;
  opacity: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 35px;
}

.visit-Nine-palaces-list-row-end {
  margin-right: 0px;
}

.nine-key-text {
  font-size: 36px;
  font-weight: bold;
  line-height: 86px;
  color: #ffffff;
  text-align: center;
}
</style>