feat(env): 添加 websocket URL 并更新直播室相关功能
- 在 .env.test 中添加 NUXT_PUBLIC_SOCKET_URL 配置项 - 在直播室页面中实现 websocket连接和消息监听 -优化拍卖详情获取逻辑 - 更新首页和详情页相关组件
This commit is contained in:
parent
9f9e96dc0c
commit
e2b5e6bcbf
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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"
|
||||||
|
@ -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">
|
||||||
|
@ -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) {
|
||||||
|
@ -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
2
env/.env.test
vendored
@ -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
|
@ -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',
|
||||||
|
Loading…
Reference in New Issue
Block a user