<script setup> import {liveStore} from "~/stores/live/index.js"; import { showMinWindow, hideMinWindow } from '@/components/liveMinWindow/createMinWindow.js' const {lastSnapshot,fullLive} = liveStore() const props = defineProps({ show: { type: Boolean, default: false }, price: { type: Number, default: 0 } }) const router = useRouter() const emit = defineEmits(['update:show']) const payStatus=ref(0) const changePayStatus=()=>{ payStatus.value=payStatus.value===0?1:0 } const close=()=>{ emit('update:show',false) } const confirm=()=>{ router.push('/signature/protocol') handleCapture() emit('update:show',false) } const captureVideoFrame = () => { try { const video = document.querySelector('#J_prismPlayer video') if (!video) { console.error('未找到视频元素') return null } const canvas = document.createElement('canvas') canvas.width = video.videoWidth canvas.height = video.videoHeight const ctx = canvas.getContext('2d') ctx.drawImage(video, 0, 0, canvas.width, canvas.height) return canvas.toDataURL('image/jpeg', 0.9) } catch (error) { console.error('获取视频截图失败:', error) return null } } const handleCapture = () => { const imageUrl = captureVideoFrame() if (imageUrl) { lastSnapshot.value=imageUrl showMinWindow(lastSnapshot.value,{ onClick:()=>{ router.replace('/') fullLive.value=true } }) } } </script> <template> <div> <van-dialog :show="show" show-cancel-button @cancel="close" @confirm="confirm"> <div class="flex flex-col pt-18px pb-13px justify-between items-center h-144px"> <template v-if="payStatus===0"> <div class="text-#000 text-16px font-600 ">{{ $t('live_room.all_pay') }}</div> <div class="text-#000 text-16px ">RMB 5,000</div> </template> <template v-if="payStatus===1"> <div class="text-#000 text-16px font-600 ">{{ $t('live_room.part_pay') }}</div> <input class="w-272px h-48px bg-#F3F3F3 px-11px text-16px" type="text" placeholder="最多RMB5,000"> </template> <div class="text-#2B53AC text-14px" @click="changePayStatus">{{payStatus===0 ? $t('live_room.part_pay') : $t('live_room.all_pay')}}</div> </div> </van-dialog> </div> </template> <style scoped lang="scss"> :deep(.van-hairline--top.van-dialog__footer){ &>.van-button{ border-top: 1px solid #E7E7E7; &.van-dialog__cancel{ border-right: 1px solid #E7E7E7; } } } </style>