feat: 绑定档案新增姓名校验

pages/archive/bind-popup.vue

@@ -6,16 +6,16 @@
         <uni-icons type="closeempty" :size="24" color="#999" @click="close"></uni-icons>
       </view>
       <view class="px-15 pt-15 text-base text-dark">
-        您在“{{ corpName }}”医客通平台已存在档案，请选择档案绑定。
+        您在"{{ corpName }}"医客通平台已存在档案，请选择档案绑定。
       </view>
       <scroll-view scroll-y="true" class="popup-content-scroll">
         <view class="px-15 py-12">
-          <view v-for="customer in customers" :key="customer._id"
+          <view v-for="customer in list" :key="customer._id" class="flex items-center p-10 mb-10 rounded-sm bg-gray"
-            class="flex items-center p-10 mb-10 rounded-sm bg-gray" @click="id = customer._id">
+            @click="id = customer._id">
             <view class="flex-grow w-0 mr-5 text-base leading-normal text-dark">
               <view class="flex items-center">
                 <view class="flex-shrink-0 min-w-60">姓名：</view>
-                <view>{{ customer.name }}</view>
+                <view>{{ customer.maskName }}</view>
               </view>
               <view class="flex items-center">
                 <view class="flex-shrink-0 min-w-60">性别：</view>
@@ -39,13 +39,20 @@
       </view>
     </view>
   </uni-popup>
+  <verify-name-popup 
+    :visible="showVerifyPopup" 
+    :customer="customer" 
+    @close="onVerifyClose" 
+    @confirm="onVerifyConfirm" 
+  />
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { toast } from '@/utils/widget';
 
 import ButtonFooter from '@/components/button-footer.vue';
+import VerifyNamePopup from './verify-name-popup.vue';
 
 const emits = defineEmits(['close', 'confirm'])
 const props = defineProps({
@@ -64,6 +71,20 @@ const props = defineProps({
 })
 const popup = ref()
 const id = ref('')
+const showVerifyPopup = ref(false)
+const list = computed(() => props.customers.map(i => {
+  const name = typeof i.name === 'string' ? i.name.trim() : '';
+  const maskName = name.length > 1 ? name.slice(0, 1) + '*'.repeat(name.length - 1) : '*';
+  return {
+    ...i,
+    maskName
+  }
+}))
+
+const customer = computed(() => {
+  const selected = list.value.find(i => i._id === id.value)
+  return selected ? selected : {}
+})
 
 function close() {
   emits('close')
@@ -71,12 +92,20 @@ function close() {
 
 function confirm() {
   if (props.customers.some(i => i._id === id.value && id.value)) {
-    emits('confirm', id.value)
+    showVerifyPopup.value = true
   } else {
     toast('请选择档案')
   }
 }
 
+function onVerifyClose() {
+  showVerifyPopup.value = false
+}
+
+function onVerifyConfirm() {
+  emits('confirm', id.value)
+}
+
 watch(() => props.visible, n => {
   if (n) {
     popup.value && popup.value.open()
@@ -95,7 +124,8 @@ watch(() => props.visible, n => {
   width: 48rpx;
   height: 48rpx;
 }
-.popup-content-scroll{
+
+.popup-content-scroll {
   max-height: 65vh;
 }
 </style>

pages/archive/verify-name-popup.vue

@@ -0,0 +1,106 @@
+<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">
+        <input v-model="inputName" class="input-name" :placeholder="placeholder" placeholder-class="placeholder-class"
+          maxlength="20" />
+      </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 } 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 placeholder = computed(() => '请输入姓名' + (props.customer.maskName ? `(${props.customer.maskName})` : ''))
+
+function close() {
+  emits('close')
+}
+
+function confirm() {
+  const trimmedName = inputName.value.trim()
+  if (!trimmedName) {
+    toast('请输入姓名')
+    return
+  }
+  if (trimmedName && trimmedName === props.customer.name) {
+    emits('confirm')
+    close()
+  } else {
+    toast('姓名不一致，请重新输入')
+  }
+}
+
+watch(() => props.visible, n => {
+  if (n) {
+    inputName.value = ''
+    popup.value && popup.value.open()
+  } else {
+    popup.value && popup.value.close()
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.input-name {
+  width: 100%;
+  height: 88rpx;
+  padding: 0 20rpx;
+  border: 1px solid #e5e5e5;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+  box-sizing: border-box;
+}
+
+.placeholder-class {
+  color: #999;
+}
+
+.btn {
+  flex: 1;
+  height: 80rpx;
+  line-height: 80rpx;
+  text-align: center;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+}
+
+.btn-cancel {
+  margin-right: 20rpx;
+  color: #666;
+  background-color: #f5f5f5;
+}
+
+.btn-confirm {
+  color: #fff;
+  background-color: #1890ff;
+}
+</style>