wxservice-web/src/views/isolations/HealthEducation.vue

<template>
  <window-size :showBackNav="false">

    <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">
        <van-grid-item>
          <van-image fit="fill" style="width: 240px; height: 240px"
                     :src="qrcodeUrl" />
          <span style="color: orangered; font-size: 12px; margin-top: 8px">长按二维码识别</span>
        </van-grid-item>
      </van-grid>
    </van-popup>

  </window-size>
</template>

<script setup>

import {onMounted, ref} from "vue";
import {getVideoUrls} from "../../api/isolations/health-education";
import {qrcanvas} from "qrcanvas";

const videoMap = ref({})
const showQr = ref(false)
const qrcodeUrl = ref(null)

const activeName = ref('')

function drawQrCode(url) {
  const canvas = qrcanvas({
    data: url,
    size: 164,
  })
  qrcodeUrl.value = canvas.toDataURL()
  showQr.value = true
}

onMounted(() => {
  getVideoUrls().then(res => {
    videoMap.value = res
  })
})

</script>

<style scoped>
:deep(.van-collapse-item__content) {
  padding: 0 0 0 14px;
}
</style>