健康宣教视频添加分类

src/views/isolations/HealthEducation.vue

@@ -1,6 +1,17 @@
 <template>
   <window-size :showBackNav="false">
-    <van-cell v-for="item in urls" :title="item.name" is-link @click="drawQrCode(item.url)"></van-cell>
+
+    <van-collapse v-model="activeName" accordion>
+      <van-collapse-item v-for="(val, key) in videoMap" :name="key">
+
+        <template #title>
+          <div style="color: green; font-weight: bold">{{key}}</div>
+        </template>
+
+        <van-cell v-for="item in val" :title="item.name" is-link @click="drawQrCode(item.url)"></van-cell>
+
+      </van-collapse-item>
+    </van-collapse>
 
     <van-popup v-model:show="showQr" closeable position="bottom" :style="{ height: '300px' }">
       <van-grid :border="false" :column-num="1">
@@ -21,10 +32,12 @@ import {onMounted, ref} from "vue";
 import {getVideoUrls} from "../../api/isolations/health-education";
 import {qrcanvas} from "qrcanvas";
 
-const urls = ref([])
+const videoMap = ref({})
 const showQr = ref(false)
 const qrcodeUrl = ref(null)
 
+const activeName = ref('')
+
 function drawQrCode(url) {
   const canvas = qrcanvas({
     data: url,
@@ -36,8 +49,14 @@ function drawQrCode(url) {
 
 onMounted(() => {
   getVideoUrls().then(res => {
-    urls.value = res
+    videoMap.value = res
   })
 })
 
-</script>
+</script>
+
+<style scoped>
+:deep(.van-collapse-item__content) {
+  padding: 0 0 0 14px;
+}
+</style>