ykt-team-wxapp/pages/archive/bind-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">
        您在"{{ corpName }}"医客通平台已存在档案，请选择档案绑定。
      </view>
      <scroll-view scroll-y="true" class="popup-content-scroll">
        <view class="px-15 py-12">
          <view v-for="customer in list" :key="customer._id" class="flex items-center p-10 mb-10 rounded-sm bg-gray"
            @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.maskName }}</view>
              </view>
            <!--  <view class="flex items-center">
                <view class="flex-shrink-0 min-w-60">性别：</view>
                <view>{{ customer.sex || '--' }}</view>
              </view> -->
              <view class="flex items-center">
                <view class="flex-shrink-0 min-w-60">手机号：</view>
                <view>{{ customer.mobile }}</view>
              </view>
            </view>
            <image class="check-icon" :src="`/static/form/${id === customer._id ? 'checked' : 'uncheck'}.svg`"></image>
          </view>
        </view>
      </scroll-view>
      <view class="footer-buttons">
        <button-footer hideden-shadow confirmText="确定" :showCancel="false" @confirm="confirm()" />
      </view>
	  <view class="flex justify-end px-15 pb-10">
	    <view class="mr-5 text-base text-dark">以上档案都不对，可以：</view>
	    <view class="px-10 text-base leading-normal text-primary border-auto rounded-sm" @click="close()">新增档案</view>
	  </view>
    </view>
  </uni-popup>
  <verify-name-popup 
    :visible="showVerifyPopup" 
    :customer="customer" 
    @close="onVerifyClose" 
    @confirm="onVerifyConfirm" 
  />
</template>

<script setup>
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({
  corpName: {
    type: String,
    default: ''
  },
  customers: {
    type: Array,
    default: () => []
  },
  visible: {
    type: Boolean,
    default: false
  }
})
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')
}

function confirm() {
  if (props.customers.some(i => i._id === id.value && 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();
	if(props.customers &&  props.customers.length === 1 && props.customers[0] && props.customers[0]._id){
		id.value = props.customers[0]._id
	}
  } else {
    popup.value && popup.value.close()
  }
})
</script>

<style lang="scss" scoped>
.min-w-60 {
  min-width: 120rpx;
}

.check-icon {
  width: 48rpx;
  height: 48rpx;
}

.popup-content-scroll {
  max-height: 50vh;
}
</style>