feat(LiveRoom): 新增直播间功能并优化项目配置

- 添加 Aliplayer 直播播放器- 实现竞拍功能和界面 - 更新项目依赖，包括 aliyun-aliplayer 和 cross-env - 调整环境变量配置方式 - 移除未使用的消息提示功能
2025-01-13 15:28:22 +08:00 · 2025-01-13 15:28:22 +08:00 · f1422cdf46
commit f1422cdf46
parent 24803f978a
6 changed files with 132 additions and 47 deletions
--- a/app/app.vue
+++ b/app/app.vue
@ -2,8 +2,8 @@
 import useKeepalive from '~/composables/keepalive'
 import { appName, appDescription } from '~/constants'
 import { useI18n } from 'vue-i18n'
-import {message} from '@/components/x-message/useMessage.js'
-message.success('success')
+/*import {message} from '@/components/x-message/useMessage.js'
+message.success('success')*/
 useHead({
  title: useI18n().t('appSetting.appName'),
  meta: [
--- a/app/pages/LiveRoom/index.client.vue
+++ b/app/pages/LiveRoom/index.client.vue
@ -0,0 +1,95 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import Aliplayer from 'aliyun-aliplayer';
+import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css';
+import lock4 from '@/static/images/lock4@2x.png';
+import lockdfd from '@/static/images/lockdfd@2x.png';
+const player = ref(null);
+const quoteStatus = ref(false);
+const config = useRuntimeConfig()
+
+// 使用环境变量
+console.log('API Base:', config.public.apiBase)
+console.log('WebSocket URL:', config.public.wsUrl)
+console.log('Player Source:', config.public.PLAYER_SOURCE)
+const changeStatus = () => {
+  console.log('quoteStatus before:', quoteStatus.value);
+  quoteStatus.value = !quoteStatus.value;
+  console.log('quoteStatus after:', quoteStatus.value);
+};
+
+onMounted(() => {
+  player.value = new Aliplayer({
+    id: 'J_prismPlayer',
+    source: 'artc://live-pull-sh-01.szjixun.cn/live/live?auth_key=1736748343-0-0-feef65166e5cc62957c35b6e3eec82a1',
+    isLive: true,
+  }, function(player) {
+    console.log('The player is created.');
+  });
+
+  player.value.on('rtsTraceId', function(event) {
+    console.log('EVENT rtsTraceId', event.paramData);
+  });
+  player.value.on('rtsFallback', function(event) {
+    console.log('EVENT rtsFallback', event.paramData);
+  });
+});
+
+onBeforeUnmount(() => {
+  if (player.value) {
+    player.value.dispose();
+  }
+});
+</script>
+
+<template>
+  <div class="relative">
+    <div id="J_prismPlayer" style="width: 100vw;height: 90vh"></div>
+    <div class="absolute bg-#fff w-60px top-196px right-0 z-999 rounded-l-4px">
+      <div class="w-full h-60px text-#7D7D7F text-12px flex flex-col justify-center items-center border-b-1px border-b-#D3D3D3">
+        <div>拍品</div>
+        <div>(1/188)</div>
+      </div>
+      <div class="w-full h-60px flex flex-col items-center justify-center" @click="changeStatus">
+        <div class="mb-3px">
+          <img :src="quoteStatus ? lockdfd : lock4"
+               class="w-16px h-21px"
+               alt="">
+        </div>
+        <div :class="quoteStatus ? 'text-#7D7D7F' : 'text-#2B53AC'"
+             class="text-10px">
+          {{ quoteStatus ? '关闭出价' : '开启出价' }}
+        </div>
+      </div>
+    </div>
+    <div class="absolute top-505px left-1/2 transform -translate-x-1/2 flex flex-col items-center">
+      <div class="text-16px text-#FFB25F font-600">
+        当前价：RMB <van-rolling-text class="my-rolling-text" :start-num="0" :target-num="3000" direction="up" />
+      </div>
+      <div class="text-16px text-#fff font-600">
+        下口价：RMB <van-rolling-text class="my-rolling-text1" :start-num="0" :target-num="3500" direction="up" />
+      </div>
+      <div class="w-344px h-[40px] bg-#D6D6D8 rounded-4px text-#7D7D7F text-14px flex justify-center items-center">
+        点击"开启出价"，即刻参与竞拍
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+.my-rolling-text {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFB25F;
+}
+.my-rolling-text1 {
+  --van-rolling-text-item-width: 10px;
+  --van-rolling-text-font-size: 16px;
+  --van-rolling-text-color: #FFF;
+}
+video {
+  width: 100%;
+  height: auto;
+}
+</style>
--- a/app/pages/LiveRoom/index.vue
+++ b/app/pages/LiveRoom/index.vue
@ -1,38 +0,0 @@
-<template>
-  <div class="relative">
-    <video id="videoPlayer" controls autoplay>
-      <source src="http://localhost:3213/video" type="video/mp4">
-    </video>
-    <div class="absolute bg-#fff w-60px top-196px right-0 z-999 rounded-l-4px">
-      <div class="w-full h-60px text-#7D7D7F text-12px flex flex-col justify-center items-center border-b-1px border-b-#D3D3D3">
-        <div>拍品</div>
-        <div>(1/188)</div>
-      </div>
-      <div class="w-full h-60px flex flex-col items-center justify-center">
-        <div class="mb-3px">
-          <img src="@/static/images/lock4@2x.png" class="w-16px h-21px" alt="">
-        </div>
-        <div class="text-#2B53AC text-10px">开启出价</div>
-      </div>
-    </div>
-    <div class="absolute">
-      <div>当前价：RMB <van-rolling-text :start-num="0" :target-num="3000" direction="up" /></div>
-      <div>下口价：RMB <van-rolling-text :start-num="0" :target-num="3500" direction="up" /></div>
-      <div></div>
-    </div>
-  </div>
-
-</template>
-
-<script setup>
-</script>
-
-<style scoped>
-:deep(.van-rolling-text-item){
-  width: fit-content!important;
-}
-video {
-  width: 100%;
-  height: auto;
-}
-</style>
--- a/app/static/images/lockdfd@2x.png
+++ b/app/static/images/lockdfd@2x.png
--- a/package.json
+++ b/package.json
@ -4,18 +4,18 @@
  "version": "0.3.0",
  "packageManager": "pnpm@9.15.1",
  "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare",
-    "typecheck": "vue-tsc --noEmit",
-    "release": "bumpp --commit --push --tag"
+    "dev": "cross-env NODE_ENV=test nuxt dev",
+    "build": "cross-env NODE_ENV=prod nuxt build",
+    "build:test": "cross-env NODE_ENV=test nuxt build",
+    "build:prod": "cross-env NODE_ENV=prod nuxt build",
+    "preview": "cross-env NODE_ENV=prod nuxt preview",
+    "preview:test": "cross-env NODE_ENV=test nuxt preview"
  },
  "dependencies": {
    "@nuxtjs/color-mode": "^3.5.2",
    "@nuxtjs/i18n": "^9.1.1",
    "@vueuse/core": "^12.4.0",
+    "aliyun-aliplayer": "^2.28.5",
    "nuxt": "^3.15.0",
    "pinia-plugin-persistedstate": "^4.2.0",
    "pinyin": "4.0.0-alpha.2",
@ -30,6 +30,7 @@
    "@unocss/preset-rem-to-px": "0.65.2",
    "@vant/nuxt": "^1.0.6",
    "bumpp": "^9.9.2",
+    "cross-env": "^7.0.3",
    "pinia": "^2.3.0",
    "postcss-mobile-forever": "^4.3.1",
    "sass": "^1.83.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -20,6 +20,9 @@ importers:
      '@vueuse/core':
        specifier: ^12.4.0
        version: 12.4.0(typescript@5.7.2)
+      aliyun-aliplayer:
+        specifier: ^2.28.5
+        version: 2.28.5
      nuxt:
        specifier: ^3.15.0
        version: 3.15.0(@parcel/watcher@2.5.0)(@types/node@22.10.2)(db0@0.2.1)(eslint@9.17.0(jiti@2.4.2))(ioredis@5.4.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.29.1)(sass@1.83.1)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.2)(vite@6.0.5(@types/node@22.10.2)(jiti@2.4.2)(sass@1.83.1)(terser@5.37.0)(tsx@4.19.2)(yaml@2.6.1))(yaml@2.6.1)
@ -57,6 +60,9 @@ importers:
      bumpp:
        specifier: ^9.9.2
        version: 9.9.2(magicast@0.3.5)
+      cross-env:
+        specifier: ^7.0.3
+        version: 7.0.3
      pinia:
        specifier: ^2.3.0
        version: 2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))
@ -1609,6 +1615,9 @@ packages:
  ajv@8.17.1:
    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}

+  aliyun-aliplayer@2.28.5:
+    resolution: {integrity: sha512-UDy4Fj95fv/Syy0p8HRmYUGqadJHLuvucHEeJu6G71uHch87bllnaOI1r++ndfWu36oZph+dbArnP2eowR/Xsg==}
+
  ansi-colors@4.1.3:
    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
    engines: {node: '>=6'}
@ -1897,6 +1906,11 @@ packages:
    resolution: {integrity: sha512-NKgHbWkSZXJUcaBHSsyzC8eegD6bBd4O0oCI6XMIJ+y4Bq3v4w7sY3wfWoKPuVlq9pQHRB6od0lmKpIqi8TlKA==}
    hasBin: true

+  cross-env@7.0.3:
+    resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
+    engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
+    hasBin: true
+
  cross-spawn@7.0.6:
    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
    engines: {node: '>= 8'}
@ -1904,6 +1918,9 @@ packages:
  crossws@0.3.1:
    resolution: {integrity: sha512-HsZgeVYaG+b5zA+9PbIPGq4+J/CJynJuearykPsXx4V/eMhyQ5EDVg3Ak2FBZtVXCiOLu/U7IiwDHTr9MA+IKw==}

+  crypto-js@4.2.0:
+    resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
+
  css-declaration-sorter@7.2.0:
    resolution: {integrity: sha512-h70rUM+3PNFuaBDTLe8wF/cdWu+dOZmb7pJt8Z2sedYbAcQVQV/tEchueg3GWxwqS0cxtbxmaHEdkNACqcvsow==}
    engines: {node: ^14 || ^16 || >=18}
@ -5979,6 +5996,10 @@ snapshots:
      json-schema-traverse: 1.0.0
      require-from-string: 2.0.2

+  aliyun-aliplayer@2.28.5:
+    dependencies:
+      crypto-js: 4.2.0
+
  ansi-colors@4.1.3: {}

  ansi-escapes@4.3.2:
@ -6279,6 +6300,10 @@ snapshots:

  cronstrue@2.52.0: {}

+  cross-env@7.0.3:
+    dependencies:
+      cross-spawn: 7.0.6
+
  cross-spawn@7.0.6:
    dependencies:
      path-key: 3.1.1
@ -6289,6 +6314,8 @@ snapshots:
    dependencies:
      uncrypto: 0.1.3

+  crypto-js@4.2.0: {}
+
  css-declaration-sorter@7.2.0(postcss@8.4.49):
    dependencies:
      postcss: 8.4.49