liveh5-nuxt/app/pages/liveRoom/components/PaymentInput/index.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
    console.log('执行')
  }
    })
  }
}
</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>