web/src/components/charge/CardPay.vue

<script setup lang="ts">
import insutypes from "@/assets/config/directory/insutypes.json";
import {getKey} from "@/utils/discrotyUtil.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) => {
  socialCard.value.lastUse = "cardPay"
  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 != "cardPay") {
    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 getInfoFor1101 = (params: any) => {
  post("social/person/getCustomSocialInfo", {data: params}).then((res: any) => {
    socialCard.value.data = res;
    socialCard.value.mdtrtCertType = res.mdtrtCertType;
    socialCard.value.mdtrtCertNo = res.mdtrtCertNo;
    socialCard.value.payInfo.selfpay_prop_type = res.insuinfo[0].insutype;
  }).finally(() => {
    isReading.value = false;
  })
}
onMounted(async () => {
  wsStore.setMessageCallback(reciceMessage)
  wsStore.setErrorCallback(errorCallBack)
});
onUnmounted(() => {
  wsStore.removeAllMessageCallback()
  wsStore.removeAllErrorCallback()
})
const errorCallBack = () => {
  ElMessage({
    message: '请连接设备',
    type: 'warning',
  });
  isReading.value = false;
}
</script>

<template>
  <div class="card-pay">
    <div class="title">
      <div class="left">医保信息</div>
      <el-button type="primary" v-if="socialCard.data != null" @click="socialCard.data=null">退出</el-button>
    </div>
    <div class="right">
      <div class="insuinfo" v-if="socialCard.data">
        <div class="line">
          <div class="label">姓名：</div>
          <div class="info">{{ socialCard.data.baseinfo?.psn_name }}</div>
        </div>
        <div class="line">
          <div class="label">险种：</div>
          <div class="info">
            <el-select style="width: 340px" v-model="socialCard.payInfo.selfpay_prop_type" placeholder="请选择">
              <el-option
                  v-for="(item) in socialCard.data.insuinfo"
                  :key="item.insutype"
                  :label="'账户余额'+getKey(insutypes, item.insutype)+'('+item.balc.toFixed(2)+')'"
                  :value="item.insutype"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="card-empty" v-else>
        <div class="tip" v-loading="isReading">暂无医保信息</div>
        <div class="btn-wrapper">
          <div class="btn" @click="ReadSocialCard('03')" tabindex="-1">医保卡</div>
          <div class="btn" @click="ReadSocialCard('01')" tabindex="-1">电子码</div>
          <div class="btn" @click="ReadSocialCard('02')" tabindex="-1">身份证</div>
          <div class="btn" @click="ReadSocialCard('04')" tabindex="-1">人脸识别</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.card-pay {
  width: 436px;
  background: #f9fafc;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  .title{
    display: flex;
    justify-content: space-between;
  }

  .left {
    font-weight: 800;
    font-size: 18px;
    color: #333333;
    font-style: normal;
  }

  .right {
    flex: 1;
    display: flex;
    font-weight: 500;
    font-size: 16px;
    color: #999999;
    font-style: normal;
    .line {
      position: relative;
      display: flex;
      height: 40px;
      box-sizing: border-box;
      padding-left: 10px;
      padding-right: 10px;
      line-height: 40px;
      .label {
        position: relative;
        width: 50px;
      }

      .info {
        flex: 1;
      }
    }

    .card-empty {
      width: 100%;
      height: 100%;
      overflow: hidden;

      .tip {
        position: relative;
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 40px;
      }

      .btn-wrapper {
        height: 38px;
        display: flex;
        justify-content: space-between;

        .btn {
          width: 91px;
          height: 38px;
          background: #ffffff;
          border-radius: 8px;
          border: 1px solid #4d6de4;
          font-weight: bold;
          font-size: 16px;
          color: #4d6de4;
          font-style: normal;
          text-align: center;
          line-height: 38px;

          &:hover {
            background: #4d6de4;
            color: #ffffff;
          }
        }
      }
    }

    .btn {
      text-align: center;
      line-height: 30px;
      outline: none;
      color: #409EFF;
      cursor: pointer;
    }
  }

}

.pay-right {
  width: 436px;
  background: #f9fafc;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;

  &-title {
    font-weight: 800;
    font-size: 18px;
    color: #333333;
    font-style: normal;
  }

  &-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    color: #999999;
    font-style: normal;
  }

  &-btns {
    height: 38px;
    display: flex;
    justify-content: space-between;

    &-btn {
      width: 91px;
      height: 38px;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #4d6de4;
      font-weight: bold;
      font-size: 16px;
      color: #4d6de4;
      font-style: normal;
      text-align: center;
      line-height: 38px;

      &:hover {
        background: #4d6de4;
        color: #ffffff;
      }
    }
  }
}
</style>