<template>
  <web-view :src="webviewUrl" @onError="onWebviewError"></web-view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const webviewUrl = ref('')

// 底层图片地址，修改这里即可更换图片
const BOTTOM_IMAGE_URL = '/static/sucai/image-02.png'

onMounted(() => {
  // 指向 static 目录下的 HTML 文件，带上图片参数
  webviewUrl.value = `/static/html/tear-card.html?imageUrl=${encodeURIComponent(BOTTOM_IMAGE_URL)}`
})

function onWebviewError(e) {
  console.error('Webview error:', e)
}
</script>

<style scoped>
web-view {
  width: 100%;
  height: 100vh;
}
</style>