feat(LiveRoom): 实现支付功能并优化直播页面
- 添加支付输入和支付结果组件 - 集成环境变量配置- 优化直播播放器配置- 调整对话框样式
This commit is contained in:
xingyy
parent
f37f283f09
commit
38e0cfcdb6
@ -22,7 +22,6 @@ const addItem = () => {
|
||||
d: 'RMB5,500',
|
||||
e: ''
|
||||
});
|
||||
// 确保 DOM 更新后再滚动
|
||||
nextTick(() => {
|
||||
scrollToBottom();
|
||||
});
|
||||
|
||||
55
app/pages/LiveRoom/components/paymentInput/index.vue
Normal file
55
app/pages/LiveRoom/components/paymentInput/index.vue
Normal file
@ -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>
|
||||
44
app/pages/LiveRoom/components/paymentResults/index.vue
Normal file
44
app/pages/LiveRoom/components/paymentResults/index.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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',
|
||||
source: 'artc://live-pull-sh-01.szjixun.cn/live/live?auth_key=1736748343-0-0-feef65166e5cc62957c35b6e3eec82a1',
|
||||
id: playerId.value,
|
||||
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>
|
||||
<div class="flex flex-col pt-18px pb-13px justify-between items-center h-144px">
|
||||
<!-- <div class="text-#000 text-16px font-600 ">支付全部</div>
|
||||
<div class="text-#000 text-16px ">RMB 5,000</div>-->
|
||||
<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>
|
||||
<payment-input v-model:show="show"/>
|
||||
<div>
|
||||
</div>
|
||||
</van-dialog>
|
||||
<payment-results v-model:show="show1" type="error"/>
|
||||
</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;
|
||||
|
||||
@ -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)
|
||||
|
||||
BIN
app/static/images/zu5554@2x.png
Normal file
BIN
app/static/images/zu5554@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
app/static/images/zu5561@2x.png
Normal file
BIN
app/static/images/zu5561@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@ -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
|
||||
|
||||
@ -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: [
|
||||
|
||||
13
package.json
13
package.json
@ -5,21 +5,23 @@
|
||||
"packageManager": "pnpm@9.15.1",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev --mode test",
|
||||
"dev:prod": "nuxt dev --mode prod",
|
||||
"build:test": "nuxt build --mode test",
|
||||
"build:prod": "nuxt build --mode prod",
|
||||
"dev": "cross-env ENV_FILE=.env.test nuxt dev",
|
||||
"dev:prod": "NODE_ENV=production ENV_FILE=.env.prod nuxt dev",
|
||||
"build:test": "cross-env ENV_FILE=.env.test nuxt build",
|
||||
"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",
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user