web/src/components/registration/CardDefault.vue

<script setup lang="ts">
import {onMounted, onUnmounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {post} from "@/utils/request.ts";
import type {Request, Response} from "@/utils/ws.ts";
import {useWsStore} from "@/stores/wsStore.ts";

const wsStore = useWsStore();
const isReading = ref(false)
const socialCard: any = defineModel();
const ReadSocialCard = async (readType: string) => {
  emit("changeLoading", true)
  isReading.value = true;
  let config_db: any = await post('common/config/getall');
  let config: any = {}
  config.ACCESS_KEY = config_db.social_ACCESS_KEY;
  config.SECRETKEY = config_db.social_SECRETKEY;
  config.IP = config_db.social_IP;
  config.PORT = config_db.social_PORT;
  config.ORGID = config_db.social_fixmedinsCode;
  config.EC_URL = config_db.social_EC_URL;
  let data: any = {}
  data.officeId = "1"
  data.officeName = "内科";
  data.operatorId = "1";
  data.operatorName = "陈庭荣";
  data.readType = readType;
  let request: Request = {
    type: "ReadCard",
    config: config,
    data: data
  }
  wsStore.sendMessage(request);
};

const reciceMessage = (response: Response) => {
  if (response.Code == 301) {
    let msg = response.Message;
    ElMessage({
      message: msg,
      type: 'warning',
    });
    isReading.value = false;
    emit('changeLoading', false)
    return;
  }
  let readType = response.Data.readType;
  if (!readType) {
    return
  }

  const params = {
    mdtrtCertType: readType,
    mdtrtCertNo: response.Data.mdtrt_cert_no,
    certno: response.Data.certno,
    psnName: response.Data.psn_name,
    psnCertType: "01",
    cardSn: response.Data.card_sn ? response.Data.card_sn : "",
  }
  getInfoFor1101(params)
}
const errorCallback = () => {
  emit('changeLoading', false)
}

const emit = defineEmits(['socialCardUpdate', 'close', 'changeLoading'])
const getInfoFor1101 = (params: any) => {
  emit('changeLoading', true)
  ElMessage({
    message: "正在读取中,请稍后......",
    duration: 500,
    type: 'info',
  });
  post("social/person/getCustomSocialInfo", {data: params}, {catch_error: true}).then((res: any) => {
    emit('changeLoading', false)
    socialCard.value.data = res;
    socialCard.value.mdtrtCertType = params.mdtrtCertType;
    socialCard.value.mdtrtCertNo = params.mdtrtCertNo;
    ElMessage({
      message: "读取成功",
      type: 'success',
      duration: 1000,
    });
    emit('socialCardUpdate', socialCard.value)

  }).catch(() => {
    isReading.value = false;
    emit('changeLoading', false)
    ElMessage({
      message: "读取失败",
      duration: 1000,
      type: 'error',
    });
  })
}

onMounted(async () => {
  wsStore.setMessageCallback(reciceMessage)
  wsStore.setErrorCallback(errorCallback)
});
onUnmounted(() => {
  emit('changeLoading', false)
  wsStore.removeAllMessageCallback()
  wsStore.removeAllErrorCallback()

})
const close = () => {
  socialCard.value = null
}
defineExpose({close})
</script>

<template>
  <div class="card-default">
    <div
        class="empty">
      <div class="btn-wrapper">
        <div class="btn" @click="ReadSocialCard('03')" @keydown.enter.prevent tabindex="-1">医保卡</div>
        <div class="btn" @click="ReadSocialCard('01')" @keydown.enter.prevent tabindex="-1">电子凭证</div>
        <div class="btn" @click="ReadSocialCard('02')" @keydown.enter.prevent tabindex="-1">身份证</div>
        <div class="btn" @click="ReadSocialCard('04')" @keydown.enter.prevent tabindex="-1">人脸识别</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.btn-wrapper {
  width: 150px;
  height: 100%;
  background: #FFFFFF;
  border-radius: 8px;

  .btn {
    width: 100%;
    height: 46px;
    border-bottom: 1px solid #EAEAEC;
    font-weight: 400;
    font-size: 15px;
    color: #4D6DE4;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &:hover {
      background: #4D6DE4;
      color: #FFFFFF;
    }

    :last-child {
      border-bottom: none;
      border-radius: 0 0 8px 8px;
    }

    :first-child {
      border-radius: 8px 8px 0 0;
    }
  }
}
</style>