91 lines
2.5 KiB
Vue
91 lines
2.5 KiB
Vue
<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> |