feat(LiveRoom): 实现支付功能并优化直播页面

- 添加支付输入和支付结果组件
- 集成环境变量配置- 优化直播播放器配置- 调整对话框样式

.env

@@ -1 +0,0 @@
-NUXT_PUBLIC_API_BASE=https://easyapi.devv.zone

app/pages/LiveRoom/components/broadcast/index.vue

@@ -22,7 +22,6 @@ const addItem = () => {
     d: 'RMB5,500',
     e: ''
   });
-  // 确保 DOM 更新后再滚动
   nextTick(() => {
     scrollToBottom();
   });

app/pages/LiveRoom/components/paymentInput/index.vue

@@ -0,0 +1,55 @@
+<script setup>
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  price: {
+    type: Number,
+    default: 0
+  }
+})
+const emit = defineEmits(['update:show'])
+const payStatus=ref(0)
+const changePayStatus=()=>{
+  payStatus.value=payStatus.value===0?1:0
+}
+const close=()=>{
+  emit('update:show',false)
+}
+const confirm=()=>{
+  emit('update:show',false)
+}
+
+</script>
+
+<template>
+  <div>
+    <van-dialog :show="show"  show-cancel-button @close="close" @confirm="confirm">
+      <div class="flex flex-col pt-18px pb-13px justify-between items-center h-144px">
+        <template v-if="payStatus===0">
+          <div class="text-#000 text-16px font-600 ">支付全部</div>
+          <div class="text-#000 text-16px ">RMB 5,000</div>
+        </template>
+        <template v-if="payStatus===1">
+          <div class="text-#000 text-16px font-600 ">支付部分</div>
+          <input class="w-272px h-48px bg-#F3F3F3 px-11px text-16px" type="text" placeholder="最多RMB5,000">
+        </template>
+
+        <div class="text-#2B53AC text-14px" @click="changePayStatus">{{payStatus===0 ? '支付部分' : '支付全部'}}</div>
+      </div>
+    </van-dialog>
+  </div>
+
+</template>
+
+<style scoped lang="scss">
+:deep(.van-hairline--top.van-dialog__footer){
+&>.van-button{
+  border-top: 1px solid #E7E7E7;
+  &.van-dialog__cancel{
+    border-right: 1px solid #E7E7E7;
+  }
+}
+}
+</style>

app/pages/LiveRoom/components/paymentResults/index.vue

@@ -0,0 +1,44 @@
+<script setup>
+import successImg from '@/static/images/zu5554@2x.png'
+import errorImg from '@/static/images/zu5561@2x.png'
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  type: {
+    type: String,
+    default: 'success'
+  },
+  price: {
+    type: Number,
+    default: 0
+  }
+})
+const emit = defineEmits(['cancel','update:show'])
+const cancel= () => {
+  emit('update:show', false)
+}
+</script>
+
+<template>
+  <div>
+    <van-dialog :show="show"  show-cancel-button :show-confirm-button="false" cancelButtonText="返回" cancelButtonColor="#2B53AC" @cancel="cancel">
+      <div class="h-145px relative flex justify-center">
+        <img :src="type==='success' ? successImg : errorImg" class="w-119px h-120px absolute top--74px z-9999 left-1/2 transform translate-x--1/2" alt="">
+        <div class="mt-94px text-#A9A9A9 text-16px">{{price}}</div>
+      </div>
+    </van-dialog>
+  </div>
+</template>
+
+<style scoped>
+:deep(.van-dialog) {
+  overflow: visible!important;
+}
+:deep(.van-hairline--top.van-dialog__footer){
+  border-top: 1px solid #E7E7E7;
+  border-bottom-left-radius:8px ;
+  border-bottom-right-radius:8px ;
+}
+</style>

app/pages/LiveRoom/components/sideButton/index.vue

@@ -4,7 +4,7 @@ import lockClosed from "~/static/images/lockdfd@2x.png";
 import lockOpen from "~/static/images/lock4@2x.png";
 import { liveStore } from "~/stores/live/index.js";
 import PressableButton from './PressableButton.vue'
-const { quoteStatus, changeStatus,show } = liveStore();
+const { quoteStatus, changeStatus,show,show1 } = liveStore();
 
 </script>
 

app/pages/LiveRoom/index.client.vue

@@ -2,13 +2,13 @@
 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 sideButton from './components/sideButton/index.vue'
 import broadcast from './components/broadcast/index.vue'
-import lockdfd from '@/static/images/lockdfd@2x.png'
 import {liveStore} from "~/stores/live/index.js";
+import paymentResults from './components/paymentResults/index.vue'
+import paymentInput from './components/paymentInput/index.vue'
 const player = ref(null)
-const {quoteStatus,changeStatus,show}= liveStore()
+const {quoteStatus,changeStatus,show,playerId,show1}= liveStore()
 const isPlayerReady = ref(false)
 const props = defineProps({
   fullLive: {
@@ -16,9 +16,15 @@ const props = defineProps({
     default: true,
   },
 })
+
+definePageMeta({
+  title: '主页',
+  i18n: 'login.title',
+})
+const config = useRuntimeConfig()
 const playerConfig = {
-  id: 'J_prismPlayer',
+  id: playerId.value,
-  source: 'artc://live-pull-sh-01.szjixun.cn/live/live?auth_key=1736748343-0-0-feef65166e5cc62957c35b6e3eec82a1',
+  source: config.public.NUXT_PUBLIC_PLAYER_SOURCE,
   isLive: true,
   preload: true,
   autoplayPolicy: {fallbackToMute: true},
@@ -66,7 +72,7 @@ const goPay=()=>{
 
 <template>
   <div class="relative h-full">
-    <div id="J_prismPlayer" class="w-screen"
+    <div :id="playerId" class="w-screen"
          :style="fullLive?'height: calc(100vh - var(--van-nav-bar-height))':'height:100%'"></div>
     <template v-if="fullLive">
  <sideButton class="absolute  top-196px right-0 z-999"></sideButton>
@@ -85,16 +91,10 @@ const goPay=()=>{
         </div>
         <broadcast></broadcast>
       </div>
-      <van-dialog v-model:show="show"  show-cancel-button>
+<payment-input v-model:show="show"/>
-        <div class="flex flex-col pt-18px pb-13px justify-between items-center h-144px">
+      <div>
-<!--          <div class="text-#000 text-16px font-600 ">支付全部</div>
+      </div>
-          <div class="text-#000 text-16px ">RMB 5,000</div>-->
+      <payment-results v-model:show="show1" type="error"/>
-          <div class="text-#000 text-16px font-600 ">支付部分</div>
-          <input class="w-272px h-48px bg-#F3F3F3 px-11px text-16px" type="text" placeholder="最多RMB5,000">
-
-          <div class="text-#2B53AC text-14px">支付部分</div>
-        </div>
-      </van-dialog>
     </template>
 
   </div>
@@ -105,6 +105,7 @@ const goPay=()=>{
 }
 </style>
 <style scoped>
+
 .my-rolling-text {
   --van-rolling-text-item-width: 10px;
   --van-rolling-text-font-size: 16px;

app/pages/home/index.vue

@@ -8,6 +8,7 @@ definePageMeta({
   layout: 'default',
   i18n: 'menu.home',
 })
+const config = useRuntimeConfig()
 const liveRef = ref(null)
 const loading = ref(false)
 const finished = ref(false)

app/stores/live/index.js

@@ -2,13 +2,17 @@ import { createGlobalState } from '@vueuse/core'
 import {ref} from "vue";
 export const liveStore = createGlobalState(() => {
     const quoteStatus = ref(false)
-    const show = ref(false)
+    const show = ref(true)
+    const show1=ref(false)
+    const playerId=ref('J_prismPlayer')
     const changeStatus = () => {
         console.log('changeStatus1231')
         quoteStatus.value = !quoteStatus.value
         console.log('quoteStatus.value',quoteStatus.value)
     }
     return{
+        show1,
+        playerId,
         show,
         quoteStatus,
         changeStatus

nuxt.config.js

@@ -1,6 +1,17 @@
+import dotenv from 'dotenv'
 import process from 'node:process'
 import preload from './app/utils/preload'
 import { currentLocales } from './i18n/i18n'
+const envFile = process.env.ENV_FILE || '.env.test'
+dotenv.config({ path: `./env/${envFile}` })
+console.log('process.env',process.env)
+const publicConfig = Object.entries(process.env)
+  .filter(([key]) => key.startsWith('NUXT_PUBLIC_'))
+  .reduce((config, [key, value]) => {
+    config[key] = value
+    return config
+  }, {})
+
 export default defineNuxtConfig({
 
   hooks: {
@@ -23,9 +34,10 @@ export default defineNuxtConfig({
     '@nuxtjs/i18n',
   ],
   runtimeConfig: {
-    public: {
+    // 私有配置，只有在服务端可用
-      apiBase: process.env.NUXT_PUBLIC_API_BASE,
+    apiSecret: process.env.NUXT_API_SECRET || 'default_secret',
-    },
+    // 公共配置，客户端和服务端都可用
+    public: publicConfig,
   },
 
   css: [

package.json

@@ -5,21 +5,23 @@
   "packageManager": "pnpm@9.15.1",
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev --mode test",
+    "dev": "cross-env ENV_FILE=.env.test nuxt dev",
-    "dev:prod": "nuxt dev --mode prod",
+    "dev:prod": "NODE_ENV=production ENV_FILE=.env.prod nuxt dev",
-    "build:test": "nuxt build --mode test",
+    "build:test": "cross-env ENV_FILE=.env.test nuxt build",
-    "build:prod": "nuxt build --mode prod",
+    "build:prod": "cross-env ENV_FILE=.env.prod nuxt build",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "typecheck": "vue-tsc --noEmit",
-    "release": "bumpp --commit --push --tag"
+    "release": "bumpp --commit --push --tag",
+    "start": "cross-env ENV_FILE=.env.prod nuxt start"
   },
   "dependencies": {
     "@nuxtjs/color-mode": "^3.5.2",
     "@nuxtjs/i18n": "^9.1.1",
     "@vueuse/core": "^12.4.0",
     "aliyun-aliplayer": "^2.28.5",
+    "dotenv": "^16.4.7",
     "nuxt": "^3.15.0",
     "pinyin": "4.0.0-alpha.2",
     "segmentit": "^2.0.3",
@@ -32,6 +34,7 @@
     "@unocss/preset-rem-to-px": "0.65.2",
     "@vant/nuxt": "^1.0.6",
     "bumpp": "^9.9.2",
+    "cross-env": "^7.0.3",
     "postcss-mobile-forever": "^4.3.1",
     "sass": "^1.83.1",
     "sass-loader": "^16.0.4",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       aliyun-aliplayer:
         specifier: ^2.28.5
         version: 2.28.5
+      dotenv:
+        specifier: ^16.4.7
+        version: 16.4.7
       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)
@@ -54,6 +57,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
       postcss-mobile-forever:
         specifier: ^4.3.1
         version: 4.3.1(postcss@8.4.49)
@@ -1889,6 +1895,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'}
@@ -6235,6 +6246,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