web/src/components/retail/CardPay.vue

<script setup lang="ts">

import {getKey} from "@/utils/discrotyUtil.ts";
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="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 = params.mdtrtCertType;
    socialCard.value.mdtrtCertNo = params.mdtrtCertNo;
    socialCard.value.payInfo.selfpay_prop_type = socialCard.value.data.insuinfo[0].insutype;
  }).finally(() => {
    isReading.value = false;
  })
}
onMounted(async () => {
  wsStore.setMessageCallback(reciceMessage)
});
onUnmounted(()=>{
  wsStore.removeAllMessageCallback()
})
</script>

<template>
  <div class="card-pay">
    <div class="left">医保<br/>信息</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 class="btn" @click="socialCard.data=null">退出</div>
        </div>
        <div class="line">
          <div class="label">险种</div>
          <div class="info">
            <el-select v-model="socialCard.payInfo.selfpay_prop_type" placeholder="请选择" style="width: 100%">
              <el-option
                  v-for="(item,index) 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 {
  position: relative;
  display: flex;

  .left {
    width: 100px;
    height: 100px;
    background: #DDD;
    text-align: center;
    line-height: 30px;
    font-size: 24px;
    color: #666;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px 0 0 10px;
  }

  .right {
    position: relative;
    flex: 1;
    background: #EEE;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 0 10px 10px 0;
    .line{
      position: relative;
      display: flex;
      height: 40px;
      box-sizing: border-box;
      padding-left: 10px;
      padding-right: 10px;
      line-height: 40px;
      .label{
        position: relative;
        width: 40px;
      }
      .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{
        position: relative;
        height: 30px;
        display: flex;
        .btn{
          flex: 1;
          margin-left: 5px;
          margin-right: 5px;
        }
      }
    }
    .btn{
      text-align: center;
      line-height: 30px;
      outline: none;
      color: #409EFF;
      cursor: pointer;
    }
  }

}
</style>