src/components/registration/CardDefault.vue

@@ -112,8 +112,13 @@ const close = () => {
 </script>
 
 <template>
-  <div class="card-default">
+  <div class="card-default" style="padding:24px">
-    <div v-loading="loading" class="empty">
+    <div class="info" v-if="socialCard.data">
+      <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>
@@ -125,33 +130,113 @@ const close = () => {
 </template>
 
 <style scoped lang="scss">
-.btn-wrapper {
+.card-default {
-  width: 200px;
+  position: relative;
+  width: 100%;
   height: 100%;
-  background: #FFFFFF;
+
-  border-radius: 8px;
+  .insuinfo {
-  .btn {
+    position: relative;
     width: 100%;
-    height: 46px;
+    box-sizing: border-box;
-    border-bottom: 1px solid #EAEAEC;
+    border-radius: 5px;
-    font-weight: 500;
+    padding: 10px;
-    font-size: 16px;
+    background: #EEE;
-    color: #4D6DE4;
+    max-height: 200px;
-    font-style: normal;
+
-    display: flex;
+    .item {
-    align-items: center;
+      position: relative;
-    justify-content: center;
+      width: 100%;
-    &:hover {
+      height: 30px;
-      background: #4D6DE4;
+      line-height: 30px;
-      color: #FFFFFF;
+      font-size: 14px;
+      color: #666;
+      display: flex;
+      align-items: center;
+
+      .name {
+        flex: 1;
+      }
+
+      .value {
+        width: 80px;
+        text-align: right;
+      }
     }
-    :last-child {
+  }
-      border-bottom: none;
+
-      border-radius:0 0 8px 8px;
+  .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;
     }
-    :first-child {
+
-      border-radius:8px 8px 0 0;
+    .btn-wrapper {
+      width: 100%;
+      height: 100%;
+
+      .btn {
+        height: 40px;
+        background: #FFFFFF;
+        border-radius: 8px;
+        cursor: pointer;
+        font-weight: bold;
+        font-size: 16px;
+        color: #4D6DE4;
+        font-style: normal;
+        line-height: 40px;
+        text-align: center;
+        padding: 0 24px;
+
+        &: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>

src/components/registration/Edit.vue

@@ -1,138 +1,109 @@
 <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"
-             label-width="auto"
-             :rules="rules"
-             ref="form"
-         >
-           <el-descriptions
-               border
-               direction="vertical"
-               label-width="100"
-               :column="4"
-               style="margin-top: 20px"
-           >
-             <!--          <el-descriptions-item label="结算方式">-->
-             <!--            <el-form-item prop="gender">-->
-             <!--              <el-radio-group v-model="edit_data.type">-->
-             <!--                <el-radio value="1">医保</el-radio>-->
-             <!--                <el-radio value="2">自费</el-radio>-->
-             <!--              </el-radio-group>-->
-             <!--            </el-form-item>-->
-             <!--          </el-descriptions-item>-->
-             <el-descriptions-item label="名称">
-               <el-form-item prop="name">
-                 <el-input v-model="edit_data.name" placeholder="请输入名称" clearable></el-input>
-               </el-form-item>
-             </el-descriptions-item>
-             <el-descriptions-item label="性别">
-               <el-form-item prop="gender">
-                 <el-radio-group v-model="edit_data.gender">
-                   <el-radio value="1">男</el-radio>
-                   <el-radio value="2">女</el-radio>
-                 </el-radio-group>
-               </el-form-item>
-             </el-descriptions-item>
-             <el-descriptions-item label="年龄">
-               <el-form-item prop="age">
-                 <el-input v-model.number="edit_data.age" placeholder="请输入年龄"></el-input>
-               </el-form-item>
-             </el-descriptions-item>
-             <el-descriptions-item label="医生">
-               <el-form-item prop="organizationDoctorId">
-                 <el-select
-                     v-model="edit_data.organizationDoctorId"
-                     placeholder="请选择医生"
-                 >
-                   <el-option
-                       v-for="item in props.doctorList"
-                       :key="item.id"
-                       :label="item.name"
-                       :value="item.id"
-                   >
-                   </el-option>
-                 </el-select>
-               </el-form-item>
-             </el-descriptions-item>
-             <el-descriptions-item label="证件类型">
-               <el-form-item prop="certType">
-                 <el-select v-model="edit_data.certType" placeholder="证件类型">
-                   <el-option
-                       v-for="item in certTypeList"
-                       :key="item.id"
-                       :label="item.name"
-                       :value="item.id"
-                   ></el-option>
-                 </el-select>
-               </el-form-item>
-             </el-descriptions-item>
-             <el-descriptions-item label="证件码">
-               <el-form-item prop="certNo">
-                 <el-input v-model="edit_data.certNo" placeholder="请输入证件码"></el-input>
-               </el-form-item>
-             </el-descriptions-item>
 
-             <el-descriptions-item label="手机号">
+    <div style="padding:0 24px 24px">
-               <el-form-item prop="phone">
+      <el-form
-                 <el-input v-model="edit_data.phone" placeholder="手机号"></el-input>
+          :model="edit_data"
-               </el-form-item>
+          label-width="auto"
-             </el-descriptions-item>
+          :rules="rules"
-             <el-descriptions-item label="就诊类型">
+          ref="form"
-               <el-form-item prop="visitType">
+      >
-                 <el-select v-model="edit_data.visitType" placeholder="就诊类型">
+        <el-descriptions
-                   <el-option label="初诊" :value="0"></el-option>
+            border
-                   <el-option label="复诊" :value="1"></el-option>
+            direction="vertical"
-                 </el-select>
+            label-width="100"
-               </el-form-item>
+            :column="4"
-             </el-descriptions-item>
+            style="margin-top: 20px"
-             <el-descriptions-item label="备注">
+        >
-               <el-input v-model="edit_data.memo" placeholder="备注"></el-input>
+          <!--          <el-descriptions-item label="结算方式">-->
-             </el-descriptions-item>
+          <!--            <el-form-item prop="gender">-->
-           </el-descriptions>
+          <!--              <el-radio-group v-model="edit_data.type">-->
-         </el-form>
+          <!--                <el-radio value="1">医保</el-radio>-->
-         <h5 v-if="!isShowCard" style="margin:24px 0;font-size: 16px">险种列表</h5>
+          <!--                <el-radio value="2">自费</el-radio>-->
-         <el-table
+          <!--              </el-radio-group>-->
-             :data="tableData"
+          <!--            </el-form-item>-->
-             style="width: 100%"
+          <!--          </el-descriptions-item>-->
-             v-if="!isShowCard"
+          <el-descriptions-item label="名称">
-         >
+            <el-form-item prop="name">
-           <el-table-column label="险种类型" prop="insutype">
+              <el-input v-model="edit_data.name" placeholder="请输入名称" clearable></el-input>
-             <template #default="scope">
+            </el-form-item>
-               {{ getKey(insutypes,scope.row.insutype) }}
+          </el-descriptions-item>
-             </template>
+          <el-descriptions-item label="性别">
-           </el-table-column>
+            <el-form-item prop="gender">
-           <el-table-column label="剩余余额" prop="balc">
+              <el-radio-group v-model="edit_data.gender">
-             <template #default="scope">
+                <el-radio value="1">男</el-radio>
-               ￥{{ scope.row.balc || 0 }}
+                <el-radio value="2">女</el-radio>
-             </template>
+              </el-radio-group>
-           </el-table-column>
+            </el-form-item>
-         </el-table>
+          </el-descriptions-item>
-       </div>
+          <el-descriptions-item label="年龄">
-     </el-scrollbar>
+            <el-form-item prop="age">
-   </template>
+              <el-input v-model.number="edit_data.age" placeholder="请输入年龄"></el-input>
+            </el-form-item>
+          </el-descriptions-item>
+          <el-descriptions-item label="医生">
+            <el-form-item prop="organizationDoctorId">
+              <el-select
+                  v-model="edit_data.organizationDoctorId"
+                  placeholder="请选择医生"
+              >
+                <el-option
+                    v-for="item in props.doctorList"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-descriptions-item>
+          <el-descriptions-item label="证件类型">
+            <el-form-item prop="certType">
+              <el-select v-model="edit_data.certType" placeholder="证件类型">
+                <el-option
+                    v-for="item in certTypeList"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-descriptions-item>
+          <el-descriptions-item label="证件码">
+            <el-form-item prop="certNo">
+              <el-input v-model="edit_data.certNo" placeholder="请输入证件码"></el-input>
+            </el-form-item>
+          </el-descriptions-item>
 
+          <el-descriptions-item label="手机号">
+            <el-form-item prop="phone">
+              <el-input v-model="edit_data.phone" placeholder="手机号"></el-input>
+            </el-form-item>
+          </el-descriptions-item>
+          <el-descriptions-item label="就诊类型">
+            <el-form-item prop="visitType">
+              <el-select v-model="edit_data.visitType" placeholder="就诊类型">
+                <el-option label="初诊" :value="0"></el-option>
+                <el-option label="复诊" :value="1"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-descriptions-item>
+          <el-descriptions-item label="备注">
+            <el-input v-model="edit_data.memo" placeholder="备注"></el-input>
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-form>
+    </div>
     <template #footer>
       <div class="bottom">
-        <el-dropdown v-if="isShowCard" placement="top-start" @show="showCardBtn" @hide="hide">
+        <el-dropdown placement="top-start">
-          <div class="left">
+          <el-button type="primary" v-if="!isShowCard">读卡</el-button>
-            <span class="btnCard" type="primary">
+          <el-button text v-else>已读卡</el-button>
-              <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>
@@ -147,11 +118,9 @@
 import {onMounted, ref} from 'vue'
 import {post} from '@/utils/request.ts'
 import CardDefault from '@/components/registration/CardDefault.vue'
-import {ElMessage, ElMessageBox} from "element-plus";
+import {ElMessage} 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 {
@@ -266,41 +235,22 @@ const init = () => {
     })
   }
 }
-const isShowCard = ref<any>(true)
+const isShowCard = ref<any>(false)
-const tableData = ref<any>([])
 const socialCardUpdate = (e: any) => {
-  console.log(e, "e")
   if (e) {
-    isShowCard.value = false
+    isShowCard.value = true
     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 = () => {
-  ElMessageBox.confirm("退出识别", "提示", {
+  isShowCard.value = false
-    confirmButtonText: '确定',
+  edit_data.value = {}
-    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>
@@ -320,62 +270,4 @@ 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>