feat(env): 添加 websocket URL 并更新直播室相关功能

- 在 .env.test 中添加 NUXT_PUBLIC_SOCKET_URL 配置项
- 在直播室页面中实现 websocket连接和消息监听
-优化拍卖详情获取逻辑
- 更新首页和详情页相关组件
This commit is contained in:
xingyy 2025-01-23 16:34:34 +08:00
parent 9f9e96dc0c
commit e2b5e6bcbf
8 changed files with 34 additions and 15 deletions

View File

@ -43,8 +43,8 @@ const props = defineProps({
</div> </div>
<div class="px-[16px] bg-#fff pt-12px pb-18px"> <div class="px-[16px] bg-#fff pt-12px pb-18px">
<div class="text-[#575757] text-[14px] mb-4px">竞价表</div> <div class="text-[#575757] text-[14px] mb-4px">竞价表</div>
<div> <div v-if="detailInfo?.priceRuleType!=='diy'">
<img src="@/static/images/1981736313.png" alt=""> <xImage :src="detailInfo?.priceRuleImage" alt=""/>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,6 +1,5 @@
<script setup> <script setup>
import { showImagePreview } from 'vant'; import { showImagePreview } from 'vant';
import { NuxtImg } from '#components'
const props = defineProps({ const props = defineProps({
src: { src: {
type: String, type: String,
@ -35,7 +34,9 @@ const showImage = () => {
</script> </script>
<template> <template>
<nuxt-img <nuxt-img
v-if="src"
loading="lazy" loading="lazy"
v-bind="{ ...props, ...$attrs }" v-bind="{ ...props, ...$attrs }"
style="object-fit: cover" style="object-fit: cover"
@ -46,6 +47,7 @@ const showImage = () => {
:quality="quality" :quality="quality"
placeholder placeholder
/> />
<van-empty v-else description="暂无" />
</template> </template>
<style scoped> <style scoped>

View File

@ -57,7 +57,7 @@ const openShow = async (item) => {
@refresh="onRefresh" @refresh="onRefresh"
> >
<template #success> <template #success>
<van-icon name="success" /> 刷新成功 <van-icon name="success" /> <span>刷新成功</span>
</template> </template>
<van-list <van-list
v-model:loading="storeLoading" v-model:loading="storeLoading"

View File

@ -3,16 +3,18 @@ import liveRoom from '@/pages/liveRoom/index.client.vue';
import {goodStore} from "@/stores/goods/index.js"; import {goodStore} from "@/stores/goods/index.js";
import ItemList from './components/ItemList/index.vue' import ItemList from './components/ItemList/index.vue'
import Cescribe from './components/Cescribe/index.vue' import Cescribe from './components/Cescribe/index.vue'
const {fullLive, liveRef,getAuctionDetail} = goodStore(); const {fullLive,getAuctionDetail,auctionDetail} = goodStore();
const changeLive = () => { const changeLive = () => {
fullLive.value = true; fullLive.value = true;
}; };
getAuctionDetail() if (!auctionDetail.value.uuid){
await getAuctionDetail()
}
</script> </script>
<template> <template>
<div class="flex-grow-1"> <div class="flex-grow-1">
<client-only> <client-only>
<liveRoom @click="changeLive" :class="['changeLive', fullLive ? 'expanded' : 'collapsed']" ref="liveRef" <liveRoom @click="changeLive" :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"
:fullLive="fullLive"/> :fullLive="fullLive"/>
</client-only> </client-only>
<div v-show="!fullLive" class="bg-#fff"> <div v-show="!fullLive" class="bg-#fff">

View File

@ -8,6 +8,10 @@ import {liveStore} from "~/stores/live/index.js";
import paymentResults from '~/pages/liveRoom/components/PaymentResults/index.vue' import paymentResults from '~/pages/liveRoom/components/PaymentResults/index.vue'
import paymentInput from '~/pages/liveRoom/components/PaymentInput/index.vue' import paymentInput from '~/pages/liveRoom/components/PaymentInput/index.vue'
import xButton from '@/components/x-button/index.vue' import xButton from '@/components/x-button/index.vue'
import {goodStore} from "~/stores/goods/index.js";
import {authStore} from "~/stores/auth/index.js";
const {auctionDetail,getAuctionDetail} = goodStore();
const { token } = authStore()
const player = ref(null) const player = ref(null)
const {quoteStatus, changeStatus, show, playerId, show1} = liveStore() const {quoteStatus, changeStatus, show, playerId, show1} = liveStore()
const isPlayerReady = ref(false) const isPlayerReady = ref(false)
@ -57,8 +61,23 @@ const initializePlayer = () => {
} }
onMounted(() => { onMounted(async () => {
if (!auctionDetail.value.uuid){
await getAuctionDetail()
}
/* initializePlayer()*/ /* initializePlayer()*/
const { ws, messages, onMessage } = useWebSocket()
//
ws.connect('/api/v1/m/auction/live',{auctionUuid: auctionDetail.value.uuid,token:token.value})
/*// 发送消息
ws.send({ type: 'chat', content: 'Hello!' })*/
//
onMessage((data) => {
console.log('收到消息:', data)
})
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
if (player.value) { if (player.value) {

View File

@ -6,7 +6,6 @@ export const goodStore = createGlobalState(() => {
// 状态定义 // 状态定义
const actionDetails = ref({}) const actionDetails = ref({})
const fullLive = ref(false) const fullLive = ref(false)
const liveRef = ref(null)
const currentItem = ref({}) const currentItem = ref({})
const myArtWorks = ref([]) const myArtWorks = ref([])
const pageRef = ref({ const pageRef = ref({
@ -34,7 +33,6 @@ export const goodStore = createGlobalState(() => {
const res = await defaultDetail({}) const res = await defaultDetail({})
if (res.status === 0) { if (res.status === 0) {
auctionDetail.value = res.data auctionDetail.value = res.data
console.log('auctionDetail.value',auctionDetail.value)
} }
} catch (err) { } catch (err) {
console.error('获取拍卖详情错误:', err) console.error('获取拍卖详情错误:', err)
@ -98,7 +96,7 @@ export const goodStore = createGlobalState(() => {
// 状态 // 状态
actionDetails, actionDetails,
fullLive, fullLive,
liveRef,
currentItem, currentItem,
myArtWorks, myArtWorks,
pageRef, pageRef,

2
env/.env.test vendored
View File

@ -2,6 +2,6 @@
NUXT_PUBLIC_API_BASE=http://172.16.100.99:8005 NUXT_PUBLIC_API_BASE=http://172.16.100.99:8005
NUXT_PUBLIC_WS_URL=ws://test-ws.example.com NUXT_PUBLIC_WS_URL=ws://test-ws.example.com
NUXT_API_SECRET=test-secret NUXT_API_SECRET=test-secret
NUXT_PUBLIC_SOCKET_URL=ws://172.16.100.99:8005
# 阿里云播放器配置 # 阿里云播放器配置
NUXT_PUBLIC_PLAYER_SOURCE=artc://live-pull-sh-01.szjixun.cn/live/live?auth_key=1737080180-0-0-42ad4cf26ba26eee78ca7de9c524d1e0 NUXT_PUBLIC_PLAYER_SOURCE=artc://live-pull-sh-01.szjixun.cn/live/live?auth_key=1737080180-0-0-42ad4cf26ba26eee78ca7de9c524d1e0

View File

@ -16,16 +16,14 @@ export default defineNuxtConfig({
'@vant/nuxt', '@vant/nuxt',
'@unocss/nuxt', '@unocss/nuxt',
'@nuxt/image', '@nuxt/image',
'@nuxtjs/i18n', '@nuxtjs/i18n',
], ],
runtimeConfig: { runtimeConfig: {
// 私有配置,只有在服务端可用 // 私有配置,只有在服务端可用
apiSecret: process.env.NUXT_API_SECRET || 'default_secret', apiSecret: process.env.NUXT_API_SECRET,
// 公共配置,客户端和服务端都可用 // 公共配置,客户端和服务端都可用
public: publicConfig, public: publicConfig,
}, },
css: [ css: [
'@unocss/reset/tailwind.css', '@unocss/reset/tailwind.css',
'@/static/styles/default-theme.css', '@/static/styles/default-theme.css',