feat(payment): 添加支付功能并优化直播相关页面

- 新增支付相关页面和功能
- 优化直播室页面，增加静音提示和加载动画
- 修改首页拍卖信息展示逻辑
- 重构侧边按钮组件，支持拖动和吸附功能

app/api/goods/index.js

@@ -70,3 +70,11 @@ export async function fddCheck(data) {
         data
     })
 }
+export async function createBuyOrder(data) {
+
+    return await request( {
+        url:'/api/v1/m/auction/createBuyOrder',
+        method: 'POST',
+        data
+    })
+}

app/components/liveLoading/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="custom-loading-container" v-if="loading">
+    <div class="loadingio-spinner-pulse-2by998twmg8">
+      <div class="ldio-yzaezf3dcmj">
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+    <div class="loading-text">直播加载中...</div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+</script>
+
+<style scoped>
+.custom-loading-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 1000;
+}
+
+.loading-text {
+  color: #fff;
+  margin-top: 20px;
+  font-size: 14px;
+}
+
+/* loading 动画样式 */
+@keyframes ldio-yzaezf3dcmj-1 {
+  0% { top: 36px; height: 128px }
+  50% { top: 60px; height: 80px }
+  100% { top: 60px; height: 80px }
+}
+@keyframes ldio-yzaezf3dcmj-2 {
+  0% { top: 41.99999999999999px; height: 116.00000000000001px }
+  50% { top: 60px; height: 80px }
+  100% { top: 60px; height: 80px }
+}
+@keyframes ldio-yzaezf3dcmj-3 {
+  0% { top: 48px; height: 104px }
+  50% { top: 60px; height: 80px }
+  100% { top: 60px; height: 80px }
+}
+
+.ldio-yzaezf3dcmj div {
+  position: absolute;
+  width: 30px;
+}
+
+.ldio-yzaezf3dcmj div:nth-child(1) {
+  left: 35px;
+  background: #e15b64;
+  animation: ldio-yzaezf3dcmj-1 1s cubic-bezier(0,0.5,0.5,1) infinite;
+  animation-delay: -0.2s
+}
+
+.ldio-yzaezf3dcmj div:nth-child(2) {
+  left: 85px;
+  background: #f8b26a;
+  animation: ldio-yzaezf3dcmj-2 1s cubic-bezier(0,0.5,0.5,1) infinite;
+  animation-delay: -0.1s
+}
+
+.ldio-yzaezf3dcmj div:nth-child(3) {
+  left: 135px;
+  background: #abbd81;
+  animation: ldio-yzaezf3dcmj-3 1s cubic-bezier(0,0.5,0.5,1) infinite;
+}
+
+.loadingio-spinner-pulse-2by998twmg8 {
+  width: 200px;
+  height: 200px;
+  display: inline-block;
+  overflow: hidden;
+  background: none;
+}
+
+.ldio-yzaezf3dcmj {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transform: translateZ(0) scale(1);
+  backface-visibility: hidden;
+  transform-origin: 0 0;
+}
+
+.ldio-yzaezf3dcmj div {
+  box-sizing: content-box;
+}
+</style>

app/pages/home/index.vue

@@ -9,24 +9,29 @@ import {liveStore} from "~/stores/live/index.js";
 const {getAuctionDetail, auctionDetail} = goodStore();
 const {fullLive} = liveStore()
 const changeLive = () => {
-  fullLive.value = true;
-};
-if (!auctionDetail.value.uuid) {
-  await getAuctionDetail()
+  if (auctionDetail.value.isLiving===1){
+    fullLive.value = true;
+  }
 }
-
+await getAuctionDetail()
 </script>
 <template>
   <div class="grow-1">
     <client-only>
       <div class="relative" @click="changeLive">
         <liveRoom  :class="['changeLive', fullLive ? 'expanded' : 'collapsed']"/>
-        <div class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
+        <div v-if="auctionDetail.isLiving===1" class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center">
           <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
           <div class="text-12px mb-54px">{{ $t('home.text1') }}<van-icon name="arrow" /></div>
           <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ auctionDetail.totalNum }}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
           <div class="text-12px">{{auctionDetail.startDate}} {{$t('home.text2')}}</div>
         </div>
+        <div v-else class="absolute h-188px w-screen pt-36px flex flex-col text-#fff top-0 left-0 items-center bg-[url('@/static/images/z6022@2x.png')]">
+          <div class="text-18px mb-5px">{{ auctionDetail.title }}</div>
+          <div class="text-12px mb-54px">本场拍卖会{{auctionDetail.isLiving===2?'未开始':'已结束'}}</div>
+          <div><span>-</span> <span class="text-12px mx-5px">{{auctionDetail.totalNum}}{{ $t('common.items') }}{{ $t('common.auction') }}</span> <span>-</span></div>
+          <div class="text-12px">{{auctionDetail.startDate}} {{$t('home.text2')}}</div>
+        </div>
       </div>
     </client-only>
     <div v-if="!fullLive" class="bg-#fff">

app/pages/liveRoom/components/PaymentInput/index.vue

@@ -54,7 +54,6 @@ const handleCapture = () => {
   onClick:()=>{
     router.replace('/')
     fullLive.value=true
-    console.log('执行')
   }
     })
   }

app/pages/liveRoom/components/SideButton/index.vue

@@ -16,17 +16,33 @@ const showTang = ref(false)
 const router = useRouter()
 // 拖动相关状态
 const isDragging = ref(false)
+const startX = ref(0)
 const startY = ref(0)
-const currentTop = ref(196) // 初始 top 值
+const currentTop = ref(196)
+const currentLeft = ref(window.innerWidth - 60)
 const sidebarRef = ref(null)
 
 // 限制拖动范围
-const minTop = 0 // 最小 top 值
-const maxTop = window.innerHeight - 180 // 最大 top 值，减去组件高度
+const minTop = 0
+const maxTop = window.innerHeight - 180
+const minLeft = 0
+const maxLeft = window.innerWidth - 60
+
+// 吸附相关
+const snapThreshold = 30
+const snapPosition = () => {
+  const centerX = currentLeft.value + 30
+  if (centerX < window.innerWidth / 2) {
+    currentLeft.value = 0
+  } else {
+    currentLeft.value = window.innerWidth - 60
+  }
+}
 
 // 开始拖动
 const handleMouseDown = (e) => {
   isDragging.value = true
+  startX.value = e.clientX - currentLeft.value
   startY.value = e.clientY - currentTop.value
   document.addEventListener('mousemove', handleMouseMove)
   document.addEventListener('mouseup', handleMouseUp)
@@ -37,26 +53,37 @@ const handleMouseMove = (e) => {
   if (!isDragging.value) return
 
   let newTop = e.clientY - startY.value
+  let newLeft = e.clientX - startX.value
+
   // 限制范围
   newTop = Math.max(minTop, Math.min(newTop, maxTop))
+  newLeft = Math.max(minLeft, Math.min(newLeft, maxLeft))
+
   currentTop.value = newTop
+  currentLeft.value = newLeft
 
   // 更新位置
   if (sidebarRef.value) {
     sidebarRef.value.style.top = `${newTop}px`
+    sidebarRef.value.style.left = `${newLeft}px`
   }
 }
 
 // 结束拖动
 const handleMouseUp = () => {
   isDragging.value = false
+  snapPosition()
+  if (sidebarRef.value) {
+    sidebarRef.value.style.left = `${currentLeft.value}px`
+  }
   document.removeEventListener('mousemove', handleMouseMove)
   document.removeEventListener('mouseup', handleMouseUp)
 }
 
-// 触摸事件处理（移动端支持）
+// 触摸事件处理
 const handleTouchStart = (e) => {
   isDragging.value = true
+  startX.value = e.touches[0].clientX - currentLeft.value
   startY.value = e.touches[0].clientY - currentTop.value
 }
 
@@ -64,17 +91,28 @@ const handleTouchMove = (e) => {
   if (!isDragging.value) return
 
   let newTop = e.touches[0].clientY - startY.value
+  let newLeft = e.touches[0].clientX - startX.value
+
   newTop = Math.max(minTop, Math.min(newTop, maxTop))
+  newLeft = Math.max(minLeft, Math.min(newLeft, maxLeft))
+
   currentTop.value = newTop
+  currentLeft.value = newLeft
 
   if (sidebarRef.value) {
     sidebarRef.value.style.top = `${newTop}px`
+    sidebarRef.value.style.left = `${newLeft}px`
   }
 }
 
 const handleTouchEnd = () => {
   isDragging.value = false
+  snapPosition()
+  if (sidebarRef.value) {
+    sidebarRef.value.style.left = `${currentLeft.value}px`
+  }
 }
+
 const captureVideoFrame = () => {
   try {
     const video = document.querySelector('#J_prismPlayer video')
@@ -95,6 +133,7 @@ const captureVideoFrame = () => {
     return null
   }
 }
+
 const handleCapture = () => {
   const imageUrl = captureVideoFrame()
   if (imageUrl) {
@@ -108,10 +147,12 @@ const handleCapture = () => {
     })
   }
 }
+
 // 组件挂载时添加事件监听
 onMounted(() => {
   if (sidebarRef.value) {
     sidebarRef.value.style.top = `${currentTop.value}px`
+    sidebarRef.value.style.left = `${currentLeft.value}px`
   }
 })
 
@@ -143,7 +184,7 @@ const goPay = () => {
 <template>
   <div
       ref="sidebarRef"
-      class="bg-white w-60px rounded-l-4px overflow-hidden absolute right-0 z-999 cursor-move"
+      class="bg-white w-60px rounded-4px overflow-hidden absolute z-999 cursor-move"
       @mousedown="handleMouseDown"
       @touchstart="handleTouchStart"
       @touchmove="handleTouchMove"
@@ -194,8 +235,8 @@ const goPay = () => {
         @click="goPay"
     >
       <div class="text-center flex flex-col justify-center items-center text-yellow-600">
-        <div class="text-10px">RMB</div>
-        <div class="text-12px">5,000</div>
+        <div class="text-10px">{{auctionData?.nowAuctionPrice?.currency}}</div>
+        <div class="text-12px">{{auctionData?.nowAuctionPrice?.successPrice}}</div>
         <div class="text-10px">{{ $t('art_detail_page.button') }}</div>
       </div>
     </van-button>
@@ -207,5 +248,6 @@ const goPay = () => {
   cursor: move;
   user-select: none;
   touch-action: none;
+  transition: left 0.3s ease;
 }
 </style>

app/pages/liveRoom/index.client.vue

@@ -1,10 +1,11 @@
 <script setup>
 import {ref, onMounted, onBeforeUnmount, watch} from 'vue'
-import Aliplayer from 'aliyun-aliplayer'
+import AliyunPlayer from 'aliyun-aliplayer'
 import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
 import sideButton from '@/pages/liveRoom/components/SideButton/index.vue'
 import broadcast from '@/pages/liveRoom/components/Broadcast/index.vue'
 import {liveStore} from "@/stores/live/index.js"
+import liveLoading  from '@/components/liveLoading/index.vue'
 import paymentResults from '@/pages/liveRoom/components/PaymentResults/index.vue'
 import paymentInput from '@/pages/liveRoom/components/PaymentInput/index.vue'
 import {goodStore} from "@/stores/goods/index.js"
@@ -17,7 +18,7 @@ import {CountUp} from 'countup.js'
 const { t } = useI18n()
 const countUpRef = ref(null)
 const nextPriceRef = ref(null)
-
+const { auctionDetail} = goodStore();
 const player = ref(null)
 const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLink, fullLive} = liveStore()
 const pullLink = ref('')
@@ -29,50 +30,83 @@ const handlePlayerError = (error) => {
   console.error('播放器错误:', error)
   player.value?.play()
 }
-
+const loading1=ref(false)
 const initializePlayer = async () => {
   try {
     if (player.value) {
       player.value.dispose()
     }
 
+    // 判断是否是微信浏览器
+    const isWechat = /MicroMessenger/i.test(navigator.userAgent)
+
     const playerConfig = {
       id: playerId.value,
       source: pullLink.value,
       isLive: true,
       preload: true,
-      autoplay: false,
+      autoplay: true,  // 改为 true
+      muted: true,     // 默认静音
       autoplayPolicy: {
-        fallbackToMute: true, // 有声自动播放失败后，是否降级为静音自动播放，默认为false
-        showUnmuteBtn: true, // 静音自动播放时，是否居中显示静音大按钮，默认为true
+        fallbackToMute: true
       },
+      skinLayout: false,
       controlBarVisibility: 'never',
     }
-    player.value = new Aliplayer(playerConfig, (playerInstance) => {
+
+    player.value = new AliyunPlayer(playerConfig, (playerInstance) => {
+      // 在微信环境下，需要用户手动触发播放
+      if (isWechat) {
+        console.log('当前是微信浏览器环境')
+        const startPlay = () => {
+          playerInstance?.play()
+          document.removeEventListener('WeixinJSBridgeReady', startPlay)
+          document.removeEventListener('touchstart', startPlay)
+        }
+
+        document.addEventListener('WeixinJSBridgeReady', startPlay)
+        document.addEventListener('touchstart', startPlay)
+      }
+
       playerInstance?.play()
     })
 
+    player.value.on('init', () => {
+      console.log('init')
+      loading1.value = true
+    })
+    
+    player.value.on('playing', () => {
+      console.log('playing')
+      loading1.value = false
+    })
+
     player.value.on('error', handlePlayerError)
   } catch (error) {
     showConfirmDialog({
       message: t('live_room.error_mess'),
       showCancelButton: true
-
     }).then(() => {
       location.reload()
-      // on close
     }).catch(() => {
-      // on cancel
     })
     console.error('播放器初始化失败:', error)
   }
 }
 
+// 添加取消静音方法
+const unmutePlayer = () => {
+  if (player.value) {
+    player.value.muted = false
+    player.value.play()
+  }
+}
+
 onMounted(async () => {
   pullLink.value = await getLiveLink()
-  initializePlayer()
-
-
+  if (auctionDetail.value.isLiving===1){
+    initializePlayer()
+  }
 })
 
 onBeforeUnmount(() => {
@@ -80,8 +114,6 @@ onBeforeUnmount(() => {
   player.value = null
 })
 const createCountUp = (element, value, options = {}) => {
-  console.log('element', element)
-  console.log('value', value)
   const defaultOptions = {
     duration: 1.5,
     separator: ',',
@@ -107,11 +139,17 @@ watch(() => fullLive.value, async (newVal) => {
 
 })
 watchEffect(() => {
-  createCountUp(countUpRef.value, auctionData.value?.nowAuctionPrice?.nowPrice)
+  if (!fullLive.value) return
+  nextTick(()=>{
+    createCountUp(countUpRef.value, auctionData.value?.nowAuctionPrice?.nowPrice)
+  })
 })
 watchEffect(() => {
+  if (!fullLive.value) return
+nextTick(()=>{
   createCountUp(nextPriceRef.value, auctionData.value?.nowAuctionPrice?.nextPrice)
 })
+})
 const goBuy = async () => {
   const res = await artworkBuy({
     auctionArtworkUuid: auctionData.value?.artwork?.uuid,
@@ -130,6 +168,19 @@ const tipOpen = () => {
 <template>
   <div class="relative h-full">
     <div :id="playerId" class="w-full h-full"></div>
+    <liveLoading :loading="loading1"></liveLoading>
+
+    <!-- 添加静音提示按钮 -->
+    <div v-if="player?.muted" 
+         class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 
+                bg-black/70 px-4 py-2 rounded-full cursor-pointer z-[1001]"
+         @click="unmutePlayer">
+      <div class="flex items-center gap-2 text-white">
+        <div class="i-carbon-volume-mute text-20px"></div>
+        <span class="text-14px">{{ t('live_room.tap_unmute') }}</span>
+      </div>
+    </div>
+
     <transition name="fade">
       <div v-if="fullLive">
         <sideButton class="absolute top-196px right-0 z-999"></sideButton>

app/pages/payment/index.vue

@@ -0,0 +1,68 @@
+<script setup>
+import {liveStore} from "~/stores/live/index.js";
+import {createBuyOrder} from "~/api/goods/index.js";
+import {goodStore} from "~/stores/goods/index.js";
+import { showLoadingToast ,closeToast} from 'vant';
+
+const payStatus=ref(0)
+const changePayStatus=()=>{
+  payStatus.value=payStatus.value===0?1:0
+}
+const { auctionData} = liveStore()
+const validateInput = (e) => {
+  const value = e.target.value
+  const char = String.fromCharCode(e.charCode)
+
+  if (!/[\d.]/.test(char)) {
+    e.preventDefault()
+    return
+  }
+
+  if (char === '.' && (value.includes('.') || !value)) {
+    e.preventDefault()
+    return
+  }
+
+  if (value.includes('.') && value.split('.')[1]?.length >= 2) {
+    e.preventDefault()
+    return
+  }
+}
+const confirmPay=async ()=>{
+  showLoadingToast({
+    message: '加载中...',
+    forbidClick: true,
+  });
+ const res=await createBuyOrder({
+   buyUid:auctionData.value?.nowAuctionPrice?.successBuyUuid,
+   price:String(auctionData.value?.nowAuctionPrice?.successPrice),
+   currency:auctionData.value?.nowAuctionPrice?.currency
+ })
+  if (res.status===0){
+    window.location.href=res.data.checkoutSessionUrl
+  }
+}
+</script>
+
+<template>
+  <div class="w-[100vw] h-screen-nav bg-[url('@/static/images/3532@2x.png')] bg-cover flex-grow-1 flex flex-col items-center pt-183px px-30px">
+    <div class="mb-30px">
+      <img class="w-126px h-126px" src="@/static/images/dddf34@2x.png" alt="">
+    </div>
+    <div class="text-#1A1A1A text-16px mb-25px font-bold">{{payStatus===0?'支付全部':'支付部分'}}</div>
+    <div class="text-#999999 text-16px mb-24px font-bold" v-if="payStatus===0">{{auctionData?.nowAuctionPrice?.currency}} {{auctionData?.nowAuctionPrice?.successPrice}}</div>
+    <div class="mb-12px" v-else>
+      <input class="w-272px h-48px bg-#F3F3F3 px-11px text-16px" type="text" :placeholder="`最多${auctionData?.nowAuctionPrice?.currency}${auctionData?.nowAuctionPrice?.successPrice}`" @keydown="validateInput">
+    </div>
+    <div class="text-#2B53AC text-14px" @click="changePayStatus">{{payStatus===1?'支付全部':'支付部分'}}</div>
+    <div class="w-full mt-auto mb-40px">
+      <van-button type="primary" block @click="confirmPay">
+        确认支付
+      </van-button>
+    </div>
+</div>
+</template>
+
+<style scoped>
+
+</style>

app/pages/payment/result/index.vue

@@ -0,0 +1,20 @@
+<script setup>
+definePageMeta({
+  layout: 'default',
+  i18n: 'payment.text1',
+})
+</script>
+
+<template>
+  <div class="w-[100vw] bg-[url('@/static/images/3532@2x.png')] bg-cover pt-43px flex-grow-1 flex flex-col pt-180px">
+    <div class="flex flex-col items-center">
+      <img class="w-119px h-120px mb-36px" src="@/static/images/5554@2x1.png" alt="">
+      <div class="text-#000 text-16px mb-25px">{{$t('payment.text2')}}!</div>
+      <div class="text-#999 text-16px">RMB5,000</div>
+    </div>
+</div>
+</template>
+
+<style scoped>
+
+</style>

app/pages/signature/panel/index.vue

@@ -61,7 +61,7 @@ const confirm = async () => {
     signImgFileData: imgUrl.value
   })
   if (res.status===0){
-
+    router.push('/payment')
   }
 }
 const goBack = () => {

app/stores/live/index.js

@@ -1,4 +1,4 @@
-import { createGlobalState } from '@vueuse/core'
+import {createGlobalState, useLocalStorage} from '@vueuse/core'
 import {ref} from "vue";
 import {goodStore} from "@/stores/goods/index.js";
 import {authStore} from "@/stores/auth/index.js";
@@ -17,7 +17,7 @@ export const liveStore = createGlobalState(() => {
     const cleanup = ref(null)
     const show1=ref(false)
     const playerId=ref('J_prismPlayer')
-    const auctionData=ref({})
+    const auctionData=useLocalStorage('auctionData',{})
     const socket=ref(null)
     const config = useRuntimeConfig()
     const pullLink=ref('')
@@ -198,6 +198,7 @@ export const liveStore = createGlobalState(() => {
 
         ws.onMessage((data) => {
             auctionData.value = data.data
+            console.log(' auctionData.value', auctionData.value)
             const { wsType, tip } = data.data || {}
 
             switch (wsType) {

i18n/locales/zh-CN.json

@@ -146,5 +146,10 @@
     "title": "请填写个人相关信息",
     "text":"文本",
     "next": "下一步"
+  },
+  "payment": {
+    "text1": "支付",
+    "text2":"付款成功",
+    "next": "下一步"
   }
 }