dev

src/components/registration/CardDefault.vue

@@ -112,13 +112,8 @@ const close = () => {
 </script>
 
 <template>
-  <div class="card-default" style="padding:24px">
+  <div class="card-default">
-    <div class="info" v-if="socialCard.data">
+    <div v-loading="loading" class="empty">
-      <div class="btn-wrapper">
-        <el-button text bg @click="close">退出医保卡</el-button>
-      </div>
-    </div>
-    <div v-loading="loading" class="empty" v-else>
       <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>
@@ -130,113 +125,33 @@ const close = () => {
 </template>
 
 <style scoped lang="scss">
-.card-default {
+.btn-wrapper {
-  position: relative;
+  width: 200px;
-  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;
-      align-items: center;
-
-      .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 {
-      width: 100%;
-      height: 100%;
-
-      .btn {
-        height: 40px;
   background: #FFFFFF;
   border-radius: 8px;
-        cursor: pointer;
+  .btn {
-        font-weight: bold;
+    width: 100%;
+    height: 46px;
+    border-bottom: 1px solid #EAEAEC;
+    font-weight: 500;
     font-size: 16px;
     color: #4D6DE4;
     font-style: normal;
-        line-height: 40px;
+    display: flex;
-        text-align: center;
+    align-items: center;
-        padding: 0 24px;
+    justify-content: center;
-
     &:hover {
       background: #4D6DE4;
       color: #FFFFFF;
-
     }
-
+    :last-child {
-        &:nth-child(2n) {
+      border-bottom: none;
-          margin: 0 8px;
+      border-radius:0 0 8px 8px;
     }
-
+    :first-child {
-        &:last-child {
+      border-radius:8px 8px 0 0;
-          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>

src/components/registration/Edit.vue

@@ -1,6 +1,7 @@
 <template>
   <Mask :is-show="isShow" width="800" :height="500" title="挂号" @close="close" :show-footer="true">
-
+   <template #default>
+     <el-scrollbar>
        <div style="padding:0 24px 24px">
          <el-form
              :model="edit_data"
@@ -93,17 +94,45 @@
              </el-descriptions-item>
            </el-descriptions>
          </el-form>
+         <h5 v-if="!isShowCard" style="margin:24px 0;font-size: 16px">险种列表</h5>
+         <el-table
+             :data="tableData"
+             style="width: 100%"
+             v-if="!isShowCard"
+         >
+           <el-table-column label="险种类型" prop="insutype">
+             <template #default="scope">
+               {{ getKey(insutypes,scope.row.insutype) }}
+             </template>
+           </el-table-column>
+           <el-table-column label="剩余余额" prop="balc">
+             <template #default="scope">
+               ￥{{ scope.row.balc || 0 }}
+             </template>
+           </el-table-column>
+         </el-table>
        </div>
+     </el-scrollbar>
+   </template>
+
     <template #footer>
       <div class="bottom">
-        <el-dropdown placement="top-start">
+        <el-dropdown v-if="isShowCard" placement="top-start" @show="showCardBtn" @hide="hide">
-          <el-button type="primary" v-if="!isShowCard">读卡</el-button>
+          <div class="left">
-          <el-button text v-else>已读卡</el-button>
+            <span class="btnCard" type="primary">
+              <img class="image" src="/public/static/images/registration/card.png" alt="" srcset="">进行读卡
+              <img class="image1" :src="'/public/static/images/registration/'+(showBtn?2:1)+'.png'" alt="" srcset="">
+            </span>
+          </div>
           <template #dropdown>
             <CardDefault v-model="socialCard" @socialCardUpdate="socialCardUpdate"
                          @close="deleteCard"/>
           </template>
         </el-dropdown>
+        <div class="closeBtn" v-else @click="deleteCard">
+          <img class="image" src="/public/static/images/registration/card.png" alt="" srcset="">
+          退出医保
+        </div>
         <div class="bottom-right">
           <el-button type="primary" @click="save">保存</el-button>
           <el-button @click="close">取消</el-button>
@@ -118,9 +147,11 @@
 import {onMounted, ref} from 'vue'
 import {post} from '@/utils/request.ts'
 import CardDefault from '@/components/registration/CardDefault.vue'
-import {ElMessage} from "element-plus";
+import {ElMessage, ElMessageBox} from "element-plus";
 import Mask from "@/components/common/Mask.vue";
 import psnCertTypes from "@/assets/config/directory/psnCertTypes.json"
+import {getKey} from "@/utils/discrotyUtil.ts";
+import insutypes from "@/assets/config/directory/insutypes.json"
 
 // 定义医生选项的接口
 interface Doctor {
@@ -235,22 +266,41 @@ const init = () => {
     })
   }
 }
-const isShowCard = ref<any>(false)
+const isShowCard = ref<any>(true)
+const tableData = ref<any>([])
 const socialCardUpdate = (e: any) => {
+  console.log(e, "e")
   if (e) {
-    isShowCard.value = true
+    isShowCard.value = false
     edit_data.value = e.data.baseinfo
     edit_data.value.gender = e.data.baseinfo.gend
     edit_data.value.name = e.data.baseinfo.psn_name
     edit_data.value.certType = e.data.baseinfo.psn_cert_type
     edit_data.value.certNo = e.data.baseinfo.certno
     edit_data.value.age = Math.floor(e.data.baseinfo.age)
+    tableData.value = e.data.insuinfo
+    edit_data.value.organizationDoctorId = props.doctorId
   }
 
 }
 const deleteCard = () => {
-  isShowCard.value = false
+  ElMessageBox.confirm("退出识别", "提示", {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    callback: (action: any) => {
+      if (action == "confirm") {
+        isShowCard.value = true
         edit_data.value = {}
+      }
+    },
+  });
+}
+const showBtn = ref(false)
+const showCardBtn = () => {
+  showBtn.value = true
+}
+const hide = () => {
+  showBtn.value = false
 }
 defineExpose({init})
 </script>
@@ -270,4 +320,62 @@ defineExpose({init})
   align-items: center;
   padding: 0 24px;
 }
+
+.btnCard {
+  width: 200px;
+  height: 48px;
+  background: #FFFFFF;
+  border-radius: 8px;
+  border: 1px solid #4D6DE4;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 400;
+  font-size: 20px;
+  color: #4D6DE4;
+  font-style: normal;
+
+  .image {
+    width: 26px;
+    height: 22px;
+    margin-right: 10px;
+  }
+
+  .image1 {
+    width: 16px;
+    height: 8px;
+    margin-left: 20px;
+  }
+
+  &:hover {
+    cursor: pointer;
+    border: 1px solid #4D6DE4;
+  }
+}
+
+.closeBtn {
+  width: 200px;
+  height: 48px;
+  background: #FFFFFF;
+  border-radius: 8px;
+  border: 1px solid #4D6DE4;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 400;
+  font-size: 20px;
+  color: #4D6DE4;
+  font-style: normal;
+
+  .image {
+    width: 26px;
+    height: 22px;
+    margin-right: 10px;
+  }
+
+  &:hover {
+    cursor: pointer;
+    border: 1px solid #4D6DE4;
+  }
+}
 </style>