修复切换科室页面

src/pages/tabBar/personalcenter/locList/locList.vue

@@ -1,19 +1,21 @@
 <template>
     <view>
-        <!-- pages/tabBar/personalcenter/locList/locList.wxml -->
         <nav-bar :navbarData="navbarData"></nav-bar>
         <view class="locList" :style="'margin-top: ' + (height * 2 + 10) + 'rpx; height: calc(100vh - ' + (height * 2 + 10) + 'rpx)'">
-            <view class="row locItem" :data-item="item" @tap="changeLoc" v-for="(item, index) in locList" :key="index">
-                <view class="col-11">
+            <view class="locList-tip">
+                <text class="locList-tip-text">点击切换当前登录科室/角色</text>
+            </view>
+            <view class="locItem" :class="{ 'locItem-active': curLoc == index }" :data-item="item" :data-index="index" @tap="changeLoc" v-for="(item, index) in locList" :key="index" hover-class="locItem-hover" hover-stay-time="80">
+                <view class="locItem-main">
                     <view class="locInfo">{{ item.logonLocDesc }}</view>
-                    <view class="row locInfo">
-                        <view class="hospdesc">{{ item.logonHospDesc }}</view>
-                        <view class="hospdesc groupdesc">{{ item.logonGroupDesc }}</view>
+                    <view class="locMeta">
+                        <text class="hospdesc">{{ item.logonHospDesc }}</text>
+                        <text class="metaSep">·</text>
+                        <text class="hospdesc groupdesc">{{ item.logonGroupDesc }}</text>
                     </view>
                 </view>
-
-                <view class="col-1" v-if="curLoc == index">
-                    <mp-icon type="outline" icon="done" color="#48D1CC" :size="30"></mp-icon>
+                <view class="locItem-check" v-if="curLoc == index">
+                    <text class="checkIcon">✓</text>
                 </view>
             </view>
         </view>
@@ -120,62 +122,163 @@ export default {
          * 切换科室
          */
         changeLoc: function (event) {
-            let dataset = event.currentTarget.dataset;
+            const { item, index } = event.currentTarget.dataset;
+            if (this.curLoc === index || this._switching) {
+                return;
+            }
+            this._switching = true;
             let userData = Cache.get('userData');
-            userData.locID = dataset.item.logonLocID;
-            userData.locDesc = dataset.item.logonLocDesc;
-            userData.groupID = dataset.item.logonGroupID;
-            userData.groupDesc = dataset.item.logonGroupDesc;
-            userData.hospID = dataset.item.logonHospID;
-            userData.hospDesc = dataset.item.logonHospDesc;
-            userData.hospCode = dataset.item.logonHospCode;
+            userData.locID = item.logonLocID;
+            userData.locDesc = item.logonLocDesc;
+            userData.groupID = item.logonGroupID;
+            userData.groupDesc = item.logonGroupDesc;
+            userData.hospID = item.logonHospID;
+            userData.hospDesc = item.logonHospDesc;
+            userData.hospCode = item.logonHospCode;
             Cache.set('userData', userData);
-            let currentIndex = this.curLoc;
-            for (var i = 0; i < this.locList.length; i++) {
-                let locInfo = this.locList[i];
-                if (locInfo.logonLocID == userData.locID && locInfo.logonHospID == userData.hospID && locInfo.logonGroupID == userData.groupID) {
-                    currentIndex = i;
+
+            this.setData(
+                {
+                    curLoc: index
+                },
+                () => {
+                    this._switching = false;
                 }
-            }
-            this.setData({
-                curLoc: currentIndex
+            );
+
+            // 广播切换事件，供其他页面（如个人中心、问诊列表）刷新
+            uni.$emit && uni.$emit('locChanged', userData);
+
+            uni.showToast({
+                title: '已切换至 ' + item.logonLocDesc,
+                icon: 'success',
+                duration: 1200
             });
+
+            // 延迟返回上一页，让用户感知到切换结果
+            setTimeout(() => {
+                uni.navigateBack({ delta: 1 });
+            }, 600);
         }
     }
 };
 </script>
 <style>
-/* pages/tabBar/personalcenter/locList/locList.wxss */
 page {
-    background: #fff;
+    background: #f4f6fa;
 }
+
 .locList {
     box-sizing: border-box;
     height: 100%;
     width: 100%;
     overflow-y: auto;
-    padding-bottom: env(safe-area-inset-bottom);
+    padding: 8rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
+    background: #f4f6fa;
+}
+
+.locList-tip {
+    padding: 16rpx 8rpx 14rpx;
+}
+
+.locList-tip-text {
+    font-size: 24rpx;
+    color: #8b98a8;
+    line-height: 34rpx;
 }
 
 .locItem {
-    height: 80rpx;
-    padding: 10rpx 30rpx;
-    border-bottom: 2rpx solid #f2f2f2;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-height: 112rpx;
+    padding: 22rpx 28rpx;
+    margin-bottom: 16rpx;
+    background: #ffffff;
+    border-radius: 16rpx;
+    box-shadow: 0 6rpx 20rpx rgba(15, 23, 42, 0.05);
+    box-sizing: border-box;
+    transition: background 0.15s;
+}
+
+.locItem-hover {
+    background: #f7f9fc;
+}
+
+.locItem-active {
+    background: #eaf4ff;
+    box-shadow: 0 6rpx 20rpx rgba(22, 135, 255, 0.12);
+}
+
+.locItem-main {
+    flex: 1 1 0;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }
 
 .locInfo {
-    height: 40rpx;
-    line-height: 40rpx;
     font-size: 32rpx;
+    font-weight: 600;
+    color: #1f2329;
+    line-height: 44rpx;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.locItem-active .locInfo {
+    color: #1687ff;
+}
+
+.locMeta {
+    margin-top: 10rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    line-height: 36rpx;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .hospdesc {
-    float: left;
     font-size: 24rpx;
-    color: #a1a1a2;
+    color: #8b98a8;
+    line-height: 36rpx;
+}
+
+.metaSep {
+    margin: 0 10rpx;
+    color: #c8ced6;
+    font-size: 24rpx;
+    line-height: 36rpx;
 }
 
 .groupdesc {
-    padding-left: 20rpx;
+    color: #8b98a8;
+}
+
+.locItem-check {
+    flex: 0 0 auto;
+    width: 48rpx;
+    height: 48rpx;
+    margin-left: 16rpx;
+    border-radius: 50%;
+    background: #1687ff;
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+}
+
+.checkIcon {
+    color: #ffffff;
+    font-size: 30rpx;
+    line-height: 1;
+    font-weight: 700;
 }
 </style>