liveh5-nuxt/app/pages/liveRoom/components/SideButton/index.vue

<script setup>
import { ref, computed } from "vue"
import lockClosed from "@/static/images/lockdfd@2x.png"
import lockOpen from "@/static/images/lock4@2x.png"
import { liveStore } from "@/stores/live/index.js"
import xButton from '@/components/x-button/index.vue'
import tangPopup from './tangPopup.vue'
import { goodStore } from "@/stores/goods/index.js"
import { authStore } from "~/stores/auth/index.js"
import {showMinWindow} from "~/components/liveMinWindow/createMinWindow.js";
import {hideMinWindow1, showMinWindow1} from "~/components/floatingBubble/floating.js";

const { quoteStatus, changeStatus, show, auctionData, getSocketData ,lastSnapshot,fullLive} = liveStore()
const { pageRef } = goodStore()
const { userInfo ,payment} = authStore()
const showTang = ref(false)
const router = useRouter()

const captureVideoFrame = () => {
  try {
    const video = document.querySelector('#J_prismPlayer video')
    if (!video) {
      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) {
    return null
  }
}

const handleCapture = () => {
  showMinWindow1({
    onClick:()=>{
      router.replace('/')
      fullLive.value=true
      hideMinWindow1()
    }
  })
}

const openOne = () => {
  showTang.value = true
}

const paySide = computed(() => {
  //当前是否已成交
  return auctionData.value.needPayBuys?.length>0
})

const goPay = () => {
  payment.value.leftCurrency=auctionData.value.needPayBuys?.[0]?.leftCurrency
  payment.value.leftPrice=auctionData.value.needPayBuys?.[0]?.leftCnyPrice
  payment.value.buyUid=auctionData.value.needPayBuys?.[0]?.uuid
  payment.value.auctionArtworkUuid=auctionData.value.needPayBuys?.[0]?.auctionArtworkUuid
  handleCapture()
  router.push('/signature/protocol')
}
</script>

<template>
  <div class="bg-white w-60px rounded-4px overflow-hidden">
    <!-- 拍品信息 -->
    <van-button
        class="w-60px !h-60px"
        @click.stop="openOne"
        style="border: none;border-radius: 0"
    >
      <div class="text-center flex flex-col justify-center items-center text-#7D7D7F text-12px">
        <div>{{ $t('live_room.lots') }}</div>
        <div>({{ auctionData?.artwork?.index }}/{{ pageRef.itemCount ?? 0 }})</div>
      </div>
    </van-button>

    <tangPopup v-model:show="showTang"></tangPopup>

    <!-- 出价开关 -->
    <van-button
        class="w-60px !h-60px"
        @click.stop="changeStatus"
        style="border-right: none;border-left: none;border-radius: 0;padding: 0"
    >
      <div class="text-center flex flex-col justify-center items-center">
        <div class="mb-4px">
          <img
              :src="quoteStatus ? lockClosed : lockOpen"
              class="w-16px h-21px"
              alt="锁图标"
          />
        </div>
        <div
            :class="quoteStatus ? 'text-gray-500' : 'text-blue-600'"
            class="text-10px transition-colors duration-200"
        >
          {{ quoteStatus ? $t('live_room.colse_bid') : $t('live_room.start_bid') }}
        </div>
      </div>
    </van-button>

    <!-- 支付 -->
    <van-button
        v-if="paySide"
        class="w-60px !h-60px"
        style="border: none;border-radius: 0"
        @click.stop="goPay"
    >
      <div class="text-center flex flex-col justify-center items-center text-yellow-600">
        <div class="text-10px">{{auctionData.needPayBuys?.[0]?.leftCurrency}}</div>
        <div class="text-12px">{{auctionData.needPayBuys?.[0]?.leftPrice}}</div>
        <div class="text-10px">{{ $t('art_detail_page.button') }}</div>
      </div>
    </van-button>
  </div>
</template>

<style scoped>
</style>