methods: { openQrCode(index) { this.selectedCardIndex = index; // 打开二维码组件的代码 } } 换成vue3 setup（）怎么写

在 Vue3 中，使用 `setup()` 函数可以将组件的业务逻辑抽离到单独的函数中。对于上述的`openQrCode`方法，转换为 `setup()` 的写法如下：

<template>
  <div>
    <button @click="handleClick(index)" v-for="(card, index) in cards" :key="index">
      {{ card.title }}
      <span slot="suffix" v-if="selectedCardIndex === index">
        <qrcode :data="card.qrCodeData"></qrcode> <!-- 假设 qrcode 组件来自 quasar 或者其他库 -->
      </span>
    </button>
    <qrcode v-if="selectedCardIndex !== null" :data="currentQRCodeData" /> <!-- 可能需要的显式显示二维码部分 -->
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import Qrcode from '@quasar/extras/qrcode-reader'; // 假设 qrcode 组件已安装

const cards = ref([
  { title: '卡1', qrCodeData: 'https://example.com/qrcode1' },
  { title: '卡2', qrCodeData: 'https://example.com/qrcode2' },
  // ...更多卡片数据
]);

const selectedCardIndex = ref(null);
const currentQRCodeData = computed(() => {
  return cards.value[selectedCardIndex.value]?.qrCodeData || '';
});

function handleClick(index) {
  selectedCardIndex.value = index;
  if (selectedCardIndex.value !== null && window.QRCodeReader) {
    QRCodeReader扫码({
      data: currentQRCodeData.value,
      success: ({ type, result }) => {
        console.log(`扫描成功: ${result}`);
      },
      cancel: () => {
        console.log('取消扫描');
      },
      fail: () => {
        console.error('扫描失败');
      }
    });
  }
}

watch(selectedCardIndex, () => {
  if (selectedCardIndex.value !== null) {
    QRCodeReader.startScan();
  } else {
    QRCodeReader.stopScan();
  }
});

// 需要在组件挂载时启动扫描功能，因为此时 selectedCardIndex 可能已经设置了初始值
onMounted(() => {
  if (window.QRCodeReader) {
    QRCodeReader.startScan();
  }
});
</script>

这里我们使用了 `ref` 和 `computed` 来管理数据，`handleClick` 函数现在处理点击事件，`watch` 监听 `selectedCardIndex` 的变化来开启或关闭二维码扫描。`QRCodeReader` 是从外部库导入的，你需要确保已经安装并且在浏览器环境中可用。