<script setup> import {ref} 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"; const {quoteStatus, changeStatus, show, auctionData, getSocketData} = liveStore(); const {pageRef} = goodStore(); const {userInfo} = authStore() const showTang = ref(false) const openOne = () => { showTang.value = true } const paySide = computed(() => { //当前是否已成交,以及成交人是当前登录用户 if (auctionData.value.artwork?.isSoled && auctionData.value.artwork?.buyInfo.userID === userInfo.value.ID) { return true } else { return false } }) const goPay = () => { show.value = true } </script> <template> <div class="bg-white w-60px rounded-l-4px overflow-hidden"> <!-- 拍品信息 --> <van-button class="w-60px !h-60px" @click="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="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="goPay"> <div class="text-center flex flex-col justify-center items-center text-yellow-600"> <div class="text-10px">RMB</div> <div class="text-12px">5,000</div> <div class="text-10px">{{ $t('art_detail_page.button') }}</div> </div> </van-button> </div> </template>