详情 折叠面板 调整

src/assets/icons/residentWX/doc-down.svg

+<svg width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.99999 3.78145L8.29999 0.481445L9.24266 1.42411L4.99999 5.66678L0.757324 1.42411L1.69999 0.481445L4.99999 3.78145Z"/>
+</svg>

src/residentWX/screening/detail/FirstDetail.vue

@@ -24,10 +24,26 @@
         </div>
         <div class="p-3 grow cont-box">
             <div class="p-3 h-full cont-inner">
-                <div class="flex justify-between">
-                    <span>全部内容</span>
-                    <span>展开全部</span>
+                <div class="flex justify-between collapse-head">
+                    <span class="text-16">全部内容</span>
+                    <span @click="toggleAll">
+                        <span v-if="!collapseAll">展开全部</span>
+                        <span v-else>展开收起</span>
+                        <span :class="['ml-2 icon-down', { 'icon-down-expanded': collapseAll }]">
+                            <doc-icon type="doc-down" />
+                        </span>
+                    </span>
                 </div>
+
+                <van-collapse v-model="activeCollapse" ref="collapse" class="doc-collapse"
+                    @change="collapseChange">
+                    <van-collapse-item v-for="item in collapseList" :key="item.name"
+                        :title="item.title" :name="item.name">
+                        <template #right-icon>
+                            <doc-icon type="doc-down" />
+                        </template>
+                    </van-collapse-item>
+                </van-collapse>
             </div>
         </div>
         <!-- <div class="py-4 border-bottom">
@@ -101,6 +117,14 @@ import { showNotify } from 'vant'
 export default {
     data() {
         return {
+            activeCollapse: [],
+            collapseList: [
+                { title: '居民信息', name: '1' },
+                { title: '筛查信息', name: '2' },
+                { title: '筛查机构', name: '3' }
+            ],
+            // 全部展开、收起
+            collapseAll: false,
             info: {},
             columnsBase: [
                 { title: '姓名', key: 'residentName' },
@@ -157,6 +181,23 @@ export default {
         },
         onBack() {
             this.$router.back()
+        },
+        // 折叠面板切换
+        collapseChange(val) {
+            if (val && val.length === this.collapseList.length) {
+                this.collapseAll = true
+            } else {
+                this.collapseAll = false
+            }
+        },
+        // 全部展开、收起
+        toggleAll() {
+            if (this.collapseAll) {
+                this.activeCollapse = []
+            } else {
+                this.activeCollapse = this.collapseList.map(e => e.name)
+            }
+            this.collapseAll = !this.collapseAll
         }
     }
 }
@@ -184,6 +225,22 @@ export default {
     }
 }
 
+.collapse-head {
+    .icon-down {
+        vertical-align: middle;
+        font-size: .12rem;
+        .svg-icon {
+            transition: all .2s;
+        }
+    }
+    .icon-down-expanded {
+        .svg-icon {
+            transform: rotate(-180deg);
+        }
+    }
+}
+
+
 table {
     text-align: left;
     border-bottom: 1px solid var(--van-cell-border-color);

src/residentWX/utils/common.less

@@ -23,4 +23,35 @@
         top: 50%;
         transform: translateY(-50%);
     }
+}
+
+// 折叠面板
+:deep(.doc-collapse) {
+    margin-top: .1rem;
+    &::after {
+        display: none;
+    }
+    .van-cell {
+        padding: .1rem 0;
+        color: #595959;
+        background: transparent;
+        &::after {
+            display: none;
+        }
+    }
+    .svg-icon {
+        font-size: .12rem;
+        transition: all .2s;
+    }
+    .van-collapse-item {
+        &::after {
+            display: none;
+        }
+    }
+    // 展开
+    .van-collapse-item__title--expanded {
+        .svg-icon {
+            transform: rotate(-180deg);
+        }
+    }
 }
\ No newline at end of file