web/src/components/registration/CardDefault.vue

<script setup lang="ts">

import {getKey} from "@/utils/discrotyUtil.ts";
import gends from "@/assets/config/directory/gends.json";
import natys from "@/assets/config/directory/antys.json";
import psnCertTypes from "@/assets/config/directory/psnCertTypes.json";
import insutypes from "@/assets/config/directory/insutypes.json";
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) => {
  socialCard.value.lastUse = "CardDefault"
  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 (socialCard.value.lastUse != "CardDefault") {
    return;
  }
  if (response.Code == 301) {
    let msg = response.Message;
    ElMessage({
      message: msg,
      type: 'warning',
    });
    isReading.value = 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 emit = defineEmits(['socialCardUpdate'])
const getInfoFor1101 = (params: any) => {
  post("social/person/getCustomSocialInfo", {data: params}).then((res: any) => {
    socialCard.value.data = res;
    socialCard.value.mdtrtCertType = params.mdtrtCertType;
    socialCard.value.mdtrtCertNo = params.mdtrtCertNo;
    emit('socialCardUpdate')
  }).finally(() => {
    isReading.value = false;
  })
}
onMounted(async () => {
  wsStore.setMessageCallback(reciceMessage)
});
onUnmounted(() => {
  wsStore.removeAllMessageCallback()
})
</script>

<template>
  <div class="card-default">
    <div class="info" v-if="socialCard.data">
      <el-descriptions title="医保卡信息" column="2" border>
        <el-descriptions-item label="姓名">{{ socialCard.data.baseinfo.psn_name }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ getKey(gends, socialCard.data.baseinfo.gend) }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ Math.floor(socialCard.data.baseinfo.age) }}</el-descriptions-item>
        <el-descriptions-item label="民族">{{ getKey(natys, socialCard.data.baseinfo.naty) }}</el-descriptions-item>
        <el-descriptions-item label="证件类型" span="2">{{
            getKey(psnCertTypes, socialCard.data.baseinfo.psn_cert_type)
          }}
        </el-descriptions-item>
        <el-descriptions-item label="证件号码" span="2">{{ socialCard.data.baseinfo.certno }}</el-descriptions-item>
      </el-descriptions>
      <div class="btn-wrapper">
        <el-button text bg @click="socialCard.data = null">退出医保卡</el-button>
      </div>
      <div class="insuinfo" v-if="socialCard.data.insuinfo">
        <el-scrollbar max-height="180">
          <div class="item" v-for="(item,index) in socialCard.data.insuinfo"><span
              class="name">账户余额({{ getKey(insutypes, item.insutype) }})</span><span
              class="value">{{ item.balc.toFixed(2) }}</span></div>
        </el-scrollbar>
      </div>
    </div>
    <div class="empty" v-else>
      <div class="tip" v-loading="isReading">
        <img style="width: 100%;height: 226px" src="/static/images/retail/null.png" alt="">
      </div>
      <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">
.card-default {
  position: relative;
  width: 100%;
  height: 100%;

  .insuinfo {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 10px;
    background: #EEE;
    max-height: 200px;

    .item {
      position: relative;
      width: 100%;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      color: #666;
      display: flex;

      .name {
        flex: 1;
      }

      .value {
        width: 80px;
        text-align: right;
      }
    }
  }

  .empty {
    padding: 0 24px;

    .tip {
      height: 100%;
      background: linear-gradient(157deg, #FAFCFF 0%, #F2F5FC 100%);
      border-radius: 8px 8px 8px 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-weight: 400;
      font-size: 12px;
      color: #AAAAAA;
      line-height: 17px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .btn-wrapper {
      height: 100%;
      display: flex;
      margin-top: 24px;

      .btn {
        flex: 1;
        height: 40px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #4D6DE4;
        cursor: pointer;
        font-weight: bold;
        font-size: 16px;
        color: #4D6DE4;
        font-style: normal;
        line-height: 40px;
        text-align: center;
        &:hover {
          background: #4D6DE4;
          color: #FFFFFF;

        }
        &:nth-child(2n) {
          margin:0 8px;
        }
        &:last-child{
          margin-right: 0;
        }
      }

    }

  }

  .top {
    margin: 20px 0 8px 0;
  }
}

.info {
  position: relative;
  width: 100%;
  height: 100%;

  .btn-wrapper {
    position: relative;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: right;
  }
}
</style>