ykt-team-wxapp/pages/archive/verify-name-popup.vue

<template>
  <uni-popup ref="popup" type="center" :mask-click="false">
    <view class="bg-white rounded overflow-hidden" style="width: 690rpx;">
      <view class="flex items-center justify-between px-15 py-12 border-b">
        <view class="text-lg font-semibold text-dark">校验姓名</view>
        <uni-icons type="closeempty" :size="24" color="#999" @click="close"></uni-icons>
      </view>
      <view class="px-15 pt-15 text-base text-dark">
        请输入所选档案的姓名进行验证
      </view>
      <view class="px-15 py-12 flex items-center justify-center">
        <view class="text-xl font-semibold text-dark">{{ nameSet.pre }}</view>
        <view v-if="nameSet.middle" class="text-xl font-semibold text-dark">{{ nameSet.middle }}</view>
        <!-- <view class="input-name border rounded-sm text-xl font-semibold text-dark text-center">
          {{ firstInputName }} -->
          <input v-model="inputName" :focus="focus" class="input-name text-xl font-semibold text-dark"
            placeholder-class="text-lg font-semibold placeholder-class" />
        <!-- </view> -->

      </view>
      <view class="pb-15">
        <button-footer hideden-shadow confirmText="确定" @cancel="close" @confirm="confirm()" />
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { computed, ref, watch, nextTick } from 'vue';
import { toast } from '@/utils/widget';

import ButtonFooter from '@/components/button-footer.vue';

const emits = defineEmits(['close', 'confirm'])
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  customer: {
    type: Object,
    default: () => ({})
  }
})

const popup = ref()
const inputName = ref('')
const focus = ref(false)
const firstInputName = computed(() => inputName.value.trim()[0] || '')
const placeholder = computed(() => '请输入姓名' + (props.customer.maskName ? `(${props.customer.maskName})` : ''));
const nameSet = computed(() => {
  const name = props.customer && typeof props.customer.name === 'string' ? props.customer.name.trim() : ''
  const pre = name.slice(0, -1);
  const middle = pre.slice(4);
  const last = name.slice(-1);
  return { pre, middle: middle ? '*' : '', last: last ? '*' : '', last }
})

function close() {
  emits('close')
}

function confirm() {
  const trimmedName = inputName.value.trim()
  if (!trimmedName) {
    toast('请输入姓名最后一个字')
    return
  }
  if (trimmedName && trimmedName === nameSet.value.last) {
    emits('confirm')
    close()
  } else {
    toast('姓名不一致，请重新输入')
  }
}

watch(() => props.visible, n => {
  if (n) {
    inputName.value = ''
    popup.value && popup.value.open();
    nextTick(() => {
      focus.value = true
    })
  } else {
    popup.value && popup.value.close()
    focus.value = false

  }
})
</script>

<style lang="scss" scoped>
.input-name {
  position: relative;
  border: 1px solid #eee;
  border-radius: 8rpx;
  margin-left: 8rpx;
  width: 64rpx;
  height: 64rpx;
  line-height: 60rpx;
  text-align: center;
}

.input-name-enter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.placeholder-class {
  color: #999;
}

.btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 8rpx;
  font-size: 30rpx;
}

.btn-cancel {
  margin-right: 20rpx;
  color: #666;
  background-color: #f5f5f5;
}

.btn-confirm {
  color: #fff;
  background-color: #1890ff;
}

.leading-1 {
  line-height: 1em;
}
</style>