510b839a1b
- 从 liveStore 中获取 auctionData，用于展示当前拍卖信息 - 在模板中添加拍卖数据的动态显示，包括当前价、下口价等信息 - 实现拍卖状态的实时更新和对应 UI 的变化 - 优化竞拍列表的展示逻辑，根据不同的拍卖状态显示相应内容 - 在弹窗中添加当前拍卖作品的标识和状态
55 lines
1.9 KiB
Vue
55 lines
1.9 KiB
Vue
<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";
|
|
|
|
const { quoteStatus, changeStatus,show,auctionData ,getSocketData} = liveStore();
|
|
const {pageRef} = goodStore();
|
|
const showTang=ref(false)
|
|
const openOne=()=>{
|
|
showTang.value=true
|
|
}
|
|
getSocketData()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-white w-60px rounded-l-4px overflow-hidden">
|
|
<!-- 拍品信息 -->
|
|
<x-button @click="openOne">
|
|
<div class="w-60px h-60px text-center border-b border-gray-300 flex flex-col justify-center items-center text-#7D7D7F text-12px">
|
|
<div>拍品</div>
|
|
<div>({{auctionData?.artwork?.index}}/{{pageRef.itemCount??0}})</div>
|
|
</div>
|
|
</x-button>
|
|
<tangPopup v-model:show="showTang"></tangPopup>
|
|
<!-- 出价开关 -->
|
|
<x-button @click="changeStatus">
|
|
<div class="w-60px h-60px text-center border-b border-gray-300 flex flex-col justify-center items-center">
|
|
<div class="mb-1">
|
|
<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 ? '关闭出价' : '开启出价' }}
|
|
</div>
|
|
</div>
|
|
</x-button>
|
|
<!-- 支付 -->
|
|
<x-button @click="show = true">
|
|
<div class="w-60px h-60px 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">去支付</div>
|
|
</div>
|
|
</x-button>
|
|
|
|
</div>
|
|
</template>
|