VAVABUY/components/passwordModal.vue

<template>
  <Popup isClose ref="popRef">
    <template #content>
      <Input type="number" :placeholder="t(placeholder)" :maxlength="maxlength" border="surround" @focus="handleInput"
        v-model="password" />
    </template>
    <template #footer>
      <view class="submit_btn" @click="submit">
        <trans _t="确认" />
      </view>
    </template>
  </Popup>
</template>

<script setup>
import { ref } from 'vue'
import { useVibrate } from '@/utils'
import Popup from './popup.vue';
import Input from "./input";

import { t } from "@/locale"

const popRef = ref(null);
const { vibrate } = useVibrate()

const props = defineProps({
  placeholder: { type: String, default: '请输入支付密码' },
  maxlength: { type: Number, default: 6 },
  errorMsg: { type: String, default: '密码错误，请重新输入' }
})

const emit = defineEmits(['complete', 'close'])
const password = ref('')
const showError = ref(false)

const open = () => {
  reset()
  popRef.value && popRef.value.open()
}

const close = () => {
  emit('close')
  popRef.value && popRef.value.close()
}

// 处理输入
const handleInput = (num) => {
  if (password.value.length >= props.maxlength) return
  vibrate()
  password.value += num
}

const submit = () => {
  if (password.value.length === props.maxlength) {
    emit('complete', password.value)
  }
}

// 重置输入
const reset = () => {
  password.value = ''
}

defineExpose({ open, close, reset })
</script>

<style lang="less" scoped>
@import url('@/style.less');

.submit_btn {
  height: 38px;
  padding: 16rpx 30rpx;
  background-color: var(--black);
  color: var(--light);
  .flex_center();
  border-radius: 16rpx;
  .size(24rpx);
}
</style>