Browse Source

优化历史诊断页面交互

yanqiliang 2 days ago
parent
commit
8e3a7af789

+ 9 - 3
src/pages/entryWrite/page/Entry/diagnostic/addDiagnostic/addDiagnostic.vue

@@ -2,7 +2,7 @@
     <view>
         <!-- pages/diagnosticEntry/diagnostic/addDiagnostic/addDiagnostic.wxml -->
         <nav-bar :navbarData="navbarData"></nav-bar>
-        <view class="container" :style="'margin-top: ' + (height * 2 + 10) + 'rpx; height: calc(100vh - ' + (height * 2 + 10) + 'rpx)'">
+        <view class="add-diagnostic-page" :style="'top: ' + (height * 2 + 10) + 'rpx;'">
             <view class="diagnosticEntry plr20">
                 <view class="header-wrapper">
                     <view class="diagnosticheader">
@@ -158,9 +158,15 @@ export default {
 };
 </script>
 <style scoped>
-.container {
+.add-diagnostic-page {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     width: 100%;
-    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
     background: #f4f7fb;
 }
 

+ 43 - 1
src/pages/entryWrite/page/Entry/diagnostic/addDiagnostic/historicalDiagnosis/historicalDiagnosis.vue

@@ -38,7 +38,11 @@
             <!-- 右侧诊断列表 -->
             <view class="hd-right">
                 <scroll-view scroll-y class="hd-right-scroll">
-                    <view v-if="diagDetailList.length === 0" class="hd-empty">
+                    <view v-if="isHistoryDiagLoading" class="hd-loading">
+                        <view class="hd-loading__spinner"></view>
+                        <text>加载中...</text>
+                    </view>
+                    <view v-else-if="diagDetailList.length === 0" class="hd-empty">
                         <text>请选择左侧就诊记录</text>
                     </view>
                     <view v-else class="diag-list">
@@ -103,6 +107,8 @@ export default {
             diagDetailList: [],
             selectedArr: [],
             isLoading: false,
+            isHistoryDiagLoading: false,
+            historyDiagRequestId: 0,
             select: 0,
             descripts: '',
             listKey: 0
@@ -148,6 +154,10 @@ export default {
 
         getHistoryDiagList: function (admID) {
             var that = this;
+            const requestId = ++this.historyDiagRequestId;
+            this.isHistoryDiagLoading = true;
+            this.diagDetailList = [];
+            this.selectedArr = [];
             $http.post('urlDeault', this, {
                 code: '03050033',
                 data: {
@@ -161,12 +171,18 @@ export default {
                     ]
                 },
                 success: function (res) {
+                    if (requestId !== that.historyDiagRequestId) return;
                     if (res.errorCode === '0') {
                         var list = res.result && res.result.diagList || [];
                         that.diagDetailList = list;
                         that.selectedArr = [];
                         that.listKey = that.listKey + 1;
                     }
+                },
+                complete: function () {
+                    if (requestId === that.historyDiagRequestId) {
+                        that.isHistoryDiagLoading = false;
+                    }
                 }
             });
         },
@@ -563,6 +579,32 @@ export default {
     font-size: 26rpx;
 }
 
+.hd-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 200rpx;
+    gap: 16rpx;
+    color: #8b98a8;
+    font-size: 26rpx;
+}
+
+.hd-loading__spinner {
+    width: 36rpx;
+    height: 36rpx;
+    border: 4rpx solid #dbeafe;
+    border-top-color: #1687ff;
+    border-radius: 50%;
+    animation: hd-spinner-rotate 0.8s linear infinite;
+}
+
+@keyframes hd-spinner-rotate {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 /* 底部操作栏 */
 .hd-footer {
     flex-shrink: 0;