VAVABUY/components/PinCodeModal.vue

<template>
  <!-- 遮罩层 -->
  <view
    class="pin-modal-overlay"
    v-if="visible"
    :class="{ 'fade-in': visible, 'fade-out': !visible }"
  >
    <!-- 弹框内容 -->
    <view class="pin-modal-container">
      <!-- 取消按钮 -->
      <view class="cancel-btn" @click="handleCancel">{{ t("取消") }}</view>

      <!-- 锁图标 -->
      <view class="lock-icon-wrapper">
        <view class="lock-icon-bg">
          <up-icon name="lock" color="#7B61FF" size="36"></up-icon>
        </view>
      </view>

      <!-- 标题 -->
      <view class="title">{{ t(title) }}</view>

      <!-- PIN 码输入指示器 -->
      <view class="pin-indicators">
        <view
          v-for="(dot, index) in 4"
          :key="index"
          class="pin-dot"
          :class="{ filled: pinCode.length > index }"
        ></view>
      </view>

      <!-- 数字键盘 -->
      <view class="number-pad">
        <view class="number-row" v-for="row in numberRows" :key="row.id">
          <view
            class="number-btn"
            v-for="num in row.numbers"
            :key="num"
            @click="handleNumberClick(num)"
          >
            <text class="number-text">{{ num }}</text>
          </view>
        </view>
        <view class="last-row">
          <view class="empty-cell"></view>
          <view class="number-btn zero-btn" @click="handleNumberClick(0)">
            <text class="number-text">0</text>
          </view>
          <view class="delete-btn" @click="handleDelete">
            <up-icon name="backspace" color="#FFFFFF" size="24"></up-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from "vue";
import { useTabbarStore } from "@/store";
import { t } from "@/locale";

const props = defineProps({
  title: {
    type: String,
    default: "输入PIN码进行验证",
  },
  visible: {
    type: Boolean,
    default: false,
  },
  isHome: {
    type: Boolean,
    default: false,
  },
});

const useTabbar = useTabbarStore();
// 定义组件事件
const emit = defineEmits(["close", "complete"]);

// PIN 码数据
const pinCode = ref("");

// 数字键盘布局
const numberRows = [
  { id: 1, numbers: [1, 2, 3] },
  { id: 2, numbers: [4, 5, 6] },
  { id: 3, numbers: [7, 8, 9] },
];

watch(
  () => pinCode.value.length,
  (length) => {
    if (length === 4) {
      emit("complete", pinCode.value);
      pinCode.value = "";
    }
  }
);

const handleNumberClick = (number) => {
  if (pinCode.value.length < 4) {
    pinCode.value += number.toString();
  }
};

const handleDelete = () => {
  pinCode.value = pinCode.value.slice(0, -1);
};

const handleCancel = () => {
  pinCode.value = "";
  if (props.isHome) {
    uni.switchTab({ url: "/pages/index/index" });
    useTabbar.getPageCur("index");
  }

  // 触发关闭事件
  emit("close");
};

watch(
  () => props.visible,
  (newVal) => {
    if (!newVal) {
      pinCode.value = "";
    }
  }
);
</script>

<style lang="scss" scoped>
.fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.fade-out {
  animation: fadeOut 0.3s ease-in forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

// 遮罩层
.pin-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #7b61ff;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

// 弹框容器
.pin-modal-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 60rpx 20rpx 20rpx;
  box-sizing: border-box;
}

// 取消按钮
.cancel-btn {
  align-self: flex-start;
  color: #ffffff;
  font-size: 28rpx;
  margin: 30rpx 0 60rpx 30rpx;
}

// 锁图标
.lock-icon-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 60rpx;
}

.lock-icon-bg {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

// 标题
.title {
  color: #ffffff;
  font-size: 36rpx;
  text-align: center;
  margin-bottom: 80rpx;
}

// PIN码指示器
.pin-indicators {
  display: flex;
  justify-content: center;
  gap: 30rpx;
  margin-bottom: 120rpx;
}

.pin-dot {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  border: 2rpx solid #ffffff;
  transition: all 0.2s ease;
}

.pin-dot.filled {
  background-color: #ffffff;
  transform: scale(1.2);
}

// 数字键盘
.number-pad {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30rpx;
  margin-top: auto;
  padding-bottom: 80rpx;
}

.number-row {
  display: flex;
  gap: 30rpx;
}

.number-btn {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  border: 2rpx solid #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 48rpx;
  font-weight: 500;
  transition: all 0.1s ease;
}

.number-btn:active {
  background-color: rgba(255, 255, 255, 0.2);
}

.number-text {
  user-select: none;
}

// 最后一行
.last-row {
  display: flex;
  gap: 30rpx;
  margin-top: 30rpx;
}

.empty-cell {
  width: 140rpx;
}

.zero-btn {
  width: 140rpx;
  height: 140rpx;
}

.delete-btn {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  border: 2rpx solid #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.1s ease;
}

.delete-btn:active {
  background-color: rgba(255, 255, 255, 0.2);
}
</style>