wxapp_shuibei/components/pay-pop/pay-pop.vue

<template>
  <view class="szjp">
    <!--  -->
    <view v-if="show">
      <view class="mask" @tap="Close"></view>
      <view
        class="box"
        style="z-index: 10000"
        :class="AlertObj[AlertClass][AlertClassUp]"
      >
        <view class="bottom">
          <view class="bg">
            <image
              src="https://mp-ad17e5cd-05c1-4df9-b060-556e25dac130.cdn.bspapp.com/mini/payPop/bg.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="tle">
            <view class="tle_lft">
              <image
                src="https://mp-ad17e5cd-05c1-4df9-b060-556e25dac130.cdn.bspapp.com/mini/payPop/pwd.png"
                mode="widthFix"
              ></image>
              <view class="tle_1">{{ txt }}</view>
              <view class="tle_2">(长度{{ pwdlength }}位)</view>
            </view>
            <view class="tle_rgt" @tap.stop="is_vis = !is_vis">
              <!-- <block> -->
              <image
                v-show="is_vis"
                src="https://mp-ad17e5cd-05c1-4df9-b060-556e25dac130.cdn.bspapp.com/mini/payPop/yj2.png"
                mode="widthFix"
                :width="20"
                :height="20"
              ></image>
              <image
                v-show="!is_vis"
                src="https://mp-ad17e5cd-05c1-4df9-b060-556e25dac130.cdn.bspapp.com/mini/payPop/yj1.png"
                mode="widthFix"
                :width="20"
                :height="20"
              ></image>
              <!-- </block> -->
              <!-- <block v-show="!is_vis">
                                <image src="https://mp-ad17e5cd-05c1-4df9-b060-556e25dac130.cdn.bspapp.com/mini/payPop/yj1.png" mode="widthFix"></image>
                            </block> -->
            </view>
          </view>
          <view class="pwd_box" @click.stop>
            <view
              v-for="(v, k) in pwdlength"
              :key="k"
              class="pwd-text"
              :class="{ active: idx === k }"
            >
              {{ star_lis[k] === undefined ? "" : star_lis[k] }}
              <!-- {{is_vis?star_lis[k]:res_pwd[k]}} -->
            </view>
          </view>
          <view class="pwd_info">
            <!-- <view>可以放些提示信息</view> -->
          </view>
          <view class="solt" @click.stop>
            <view class="s_lft">
              <button
                v-for="(v, k) in 9"
                :key="k"
                class="s_li"
                type="primary"
                plain="true"
                @tap="click(k + 1)"
              >
                {{ k + 1 }}
              </button>
              <button
                class="s_li s_o"
                type="primary"
                plain="true"
                @tap="click(0)"
              >
                0
              </button>
              <button
                class="s_li s_sq"
                type="primary"
                plain="true"
                @tap="Close"
              >
                <image
                  src="https://mp-ad17e5cd-05c1-4df9-b060-556e25dac130.cdn.bspapp.com/mini/payPop/sq.png"
                  mode="widthFix"
                ></image>
              </button>
            </view>
            <view class="s_rgt">
              <view class="s_cx">
                <button class="s_li s_x" type="primary" plain="true" @tap="del">
                  <image
                    src="https://mp-ad17e5cd-05c1-4df9-b060-556e25dac130.cdn.bspapp.com/mini/payPop/ht.png"
                    mode="widthFix"
                  ></image>
                </button>
              </view>
              <view class="s_qd">
                <button
                  class="s_li s_s"
                  type="primary"
                  plain="true"
                  @tap="submit"
                >
                  确定
                </button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";

// 定义组件属性
const props = defineProps({
  txt: {
    type: String,
    default: "支付密码",
  },
  pwdlength: {
    type: [Number, String],
    default: 1,
  },
});

// 定义事件
const emit = defineEmits(["pwd_e", "close"]);

// 响应式数据
const Repeat = ref(true);
const show = ref(false);
const AlertObj = ref([["a-bounceinB", "a-bounceoutB"]]);
const AlertClass = ref(0);
const AlertClassUp = ref(0);
const res_pwd = ref([]);
const fa_par = ref("");
const is_vis = ref(true); // 密码是否可见

// 计算属性
const idx = computed(() => {
  return res_pwd.value.length;
});

const star_lis = computed(() => {
  if (is_vis.value) {
    return res_pwd.value;
  } else {
    const arr = [];
    res_pwd.value.forEach(() => {
      arr.push("*");
    });
    return arr;
  }
});

// 方法定义
const click = (e) => {
  if (res_pwd.value.length <= props.pwdlength - 1) {
    res_pwd.value.push(e);
    // #ifdef APP-PLUS
    plus.device.vibrate(50); // 震动
    // #endif
  } else {
    toast(`最大长度${props.pwdlength}位`);
  }
};

const del = () => {
  res_pwd.value.pop();
  // #ifdef APP-PLUS
  plus.device.vibrate(50); // 震动
  // #endif
};

const submit = () => {
  // #ifdef APP-PLUS
  plus.device.vibrate(50); // 震动
  // #endif
  if (res_pwd.value.length === props.pwdlength) {
    const res = res_pwd.value.join("");
    emit("pwd_e", res, fa_par.value); // 调用父组件方法

    Close();
  } else {
    toast(`长度未满足`);
  }
};

// 打开
const Open = (par) => {
  if (par) {
    console.log("父元素传参", par);
    fa_par.value = par; // 保存父元素传参
  }
  if (!Repeat.value) {
    return false;
  }
  res_pwd.value = [];
  Repeat.value = false;
  AlertClassUp.value = 0;
  show.value = true;
  setTimeout(() => {
    Repeat.value = true;
  }, 300);
};

// 关闭
const Close = () => {
  if (!Repeat.value) {
    return false;
  }

  Repeat.value = false;
  AlertClassUp.value = 1;
  setTimeout(() => {
    show.value = false;
    Repeat.value = true;
    // 触发关闭事件
    emit("close");
  }, 300);
};

const toast = (val) => {
  uni.showToast({
    title: val,
    icon: "error",
  });
};

// 暴露方法给父组件调用
defineExpose({
  Open,
  Close,
  submit,
});
</script>

<style lang="scss" scoped>
/*引入css文件*/
@import "./szjp.scss";
</style>