From d27e6bc0c54c2cd60f36cbd5705c6a478ca07705 Mon Sep 17 00:00:00 2001
From: xingyy <64720302+Concur-max@users.noreply.github.com>
Date: Mon, 13 Jan 2025 20:59:25 +0800
Subject: [PATCH] =?UTF-8?q?feat(home):=20=E5=AE=9E=E7=8E=B0=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E7=9B=B4=E6=92=AD=E9=97=B4=E5=85=A8=E5=B1=8F=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 fullLive 全局状态管理直播间的全屏状态
- 修改 AppHeader组件，根据 fullLive 状态控制返回按钮的显示
- 更新 default 布局，根据 fullLive 状态控制 AppFooter 的显示- 调整 LiveRoom组件，支持全屏模式下的布局变化
- 修改 home 页面，实现直播间全屏和列表之间的切换
---
 app/components/AppHeader.vue           |  10 +-
 app/components/liveBroadcast/index.vue |   3 +-
 app/layouts/default.vue                |   8 +-
 app/pages/LiveRoom/index.client.vue    |  78 +++++----
 app/pages/home/index.vue               | 215 ++++++++++++++-----------
 app/stores/home/index.js               |   7 +
 6 files changed, 184 insertions(+), 137 deletions(-)
 create mode 100644 app/stores/home/index.js

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 6d8365a..7dc7ee9 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -1,10 +1,15 @@
 <script setup>
 import { useAppFooterRouteNames as routeWhiteList } from '~/config'
-
+import { homeStore } from "@/stores/home/index.js";
+const { fullLive } = homeStore()
 const route = useRoute()
 const router = useRouter()
 
 function onBack() {
+  if (fullLive.value){
+    fullLive.value=false
+    return
+  }
   if (window.history.state.back)
     history.back()
   else
@@ -25,12 +30,13 @@ const subTitle = computed(() => {
   return route.meta.subTitle ? t(route.meta.subTitle) : ''
 })
 const showLeftArrow = computed(() => route.name && routeWhiteList.includes(route.name))
+
 </script>
 
 <template>
   <VanNavBar
     :title="title"
-    :left-arrow="!showLeftArrow"
+    :left-arrow="!showLeftArrow||fullLive"
     placeholder clickable fixed
     @click-left="onBack"
   >
diff --git a/app/components/liveBroadcast/index.vue b/app/components/liveBroadcast/index.vue
index eb342a6..cc3090b 100644
--- a/app/components/liveBroadcast/index.vue
+++ b/app/components/liveBroadcast/index.vue
@@ -3,8 +3,7 @@
 </script>
 
 <template>
-<div class="w-full h-[188px] bg-[] bg-#606165">
-
+<div class="w-full h-full bg-[] bg-#606165">
 </div>
 </template>
 
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 2fcbd57..957db21 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,13 +1,13 @@
 <template>
   <main class="flex flex-col min-h-svh">
     <AppHeader class="h-[var(--van-nav-bar-height)]" />
-
     <div class="flex-1 flex flex-col">
       <slot />
     </div>
-
-    <AppFooter />
+    <AppFooter v-if="!fullLive" />
   </main>
 </template>
-<script setup lang="ts">
+<script setup >
+import { homeStore } from "@/stores/home/index.js";
+const { fullLive } = homeStore()
 </script>
\ No newline at end of file
diff --git a/app/pages/LiveRoom/index.client.vue b/app/pages/LiveRoom/index.client.vue
index 5c3e970..06e7dbc 100644
--- a/app/pages/LiveRoom/index.client.vue
+++ b/app/pages/LiveRoom/index.client.vue
@@ -8,7 +8,12 @@ const player = ref(null)
 const quoteStatus = ref(false)
 const isPlayerReady = ref(false)
 const config = useRuntimeConfig()
-console.log('config', config)
+const props = defineProps({
+  fullLive: {
+    type: Boolean,
+    default: false,
+  },
+})
 const playerConfig = {
   id: 'J_prismPlayer',
   source: 'artc://live-pull-sh-01.szjixun.cn/live/live?auth_key=1736748343-0-0-feef65166e5cc62957c35b6e3eec82a1',
@@ -56,43 +61,45 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="relative">
-    <div id="J_prismPlayer" class="w-screen" style="height: calc(100vh - var(--van-nav-bar-height))"></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 class="relative h-full" >
+    <div id="J_prismPlayer" class="w-screen" :style="fullLive?'height: calc(100vh - var(--van-nav-bar-height))':'height:100%'"></div>
+    <template v-if="fullLive">
+      <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="quoteStatus ? 'text-#7D7D7F' : 'text-#2B53AC'"
-             class="text-10px">
-          {{ quoteStatus ? '关闭出价' : '开启出价' }}
+        <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>
+      <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] ${quoteStatus ? 'bg-#FFB25F' : 'bg-#D6D6D8'} rounded-4px ${quoteStatus ? 'text-#fff' : 'text-#7D7D7F'} text-14px flex justify-center items-center mt-10px mb-10px`">
+          {{ quoteStatus ? '确认出价 RMB 3,000' : '点击"开启出价"，即刻参与竞拍 ' }}
+        </div>
+        <div class="w-344px h-86px bg-#fff rounded-4px">
+        </div>
+      </div>
+    </template>
 
-    <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] ${quoteStatus ? 'bg-#FFB25F' : 'bg-#D6D6D8'} rounded-4px ${quoteStatus ? 'text-#fff' : 'text-#7D7D7F'} text-14px flex justify-center items-center mt-10px mb-10px`">
-        {{ quoteStatus ? '确认出价 RMB 3,000' : '点击"开启出价"，即刻参与竞拍 ' }}
-      </div>
-      <div class="w-344px h-86px bg-#fff rounded-4px">
-      </div>
-    </div>
   </div>
 </template>
 
@@ -108,4 +115,7 @@ onBeforeUnmount(() => {
   --van-rolling-text-font-size: 16px;
   --van-rolling-text-color: #FFF;
 }
+:deep(.prism-license-watermark){
+  display: none!important;
+}
 </style>
\ No newline at end of file
diff --git a/app/pages/home/index.vue b/app/pages/home/index.vue
index 904281d..2e65e1e 100644
--- a/app/pages/home/index.vue
+++ b/app/pages/home/index.vue
@@ -1,9 +1,11 @@
 <script setup>
 import liveBroadcast from '@/components/liveBroadcast/index.vue'
 import {useRect} from '@vant/use';
-
+import LiveRoom  from '@/pages/LiveRoom/index.client.vue'
 import itemDetail from '@/components/itemDetail/index.vue'
 
+import { homeStore } from "@/stores/home/index.js";
+const { fullLive } = homeStore()
 definePageMeta({
   layout: 'default',
   i18n: 'menu.home',
@@ -94,120 +96,140 @@ const openShow = () => {
     show.value = true
   })
 }
-
+const changeLive=()=>{
+  fullLive.value= true
+}
 </script>
 
 <template>
   <div class="bg-#fff flex-grow-1">
-    <liveBroadcast ref="liveRef"/>
-    <van-tabs sticky animated>
-      <van-tab title="拍品列表">
-        <div class="px-[16px] pt-[16px]">
-          <van-pull-refresh>
-            <van-list
-                v-model:loading="loading"
-                :finished="finished"
-                finished-text="没有更多了"
-                @load="loadData"
-            >
-              <div class="w-full flex gap-[16px]">
-                <div class="flex flex-1 flex-col gap-[16px]">
-                  <div
-                      v-for="(item, index) in leftColumn"
-                      :key="index"
-                      class="w-full"
-                      @click="openShow"
-                  >
-                    <div class="relative w-full">
-                      <van-image
-                          :src="item.image"
-                          :style="{ aspectRatio: item.ratio }"
-                          fit="cover"
-                          class="w-full"
-                      />
-                      <div
-                          class="absolute left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]">
-                        LOT{{ index * 2 + 1 }}
+    <div
+        ref="liveRef"
+        @click="changeLive"
+        :class="[
+          'transform transition-all duration-500 origin-top ease-out ease-in',
+          fullLive ? 'scale-100 h-[calc(100vh-var(--van-nav-bar-height))]' : 'scale-100 h-188px'
+        ]"
+    >
+      <client-only>
+        <LiveRoom :fullLive="fullLive" />
+      </client-only>
+    </div>
+    <div v-show="!fullLive" :class="[
+        'bg-white transform transition-all duration-500 ease-out',
+        fullLive ? 'translate-y-full' : 'translate-y-0'
+      ]">
+      <van-tabs sticky animated>
+        <van-tab title="拍品列表">
+          <div class="px-[16px] pt-[16px]">
+            <van-pull-refresh>
+              <van-list
+                  v-model:loading="loading"
+                  :finished="finished"
+                  finished-text="没有更多了"
+                  @load="loadData"
+              >
+                <div class="w-full flex gap-[16px]">
+                  <div class="flex flex-1 flex-col gap-[16px]">
+                    <div
+                        v-for="(item, index) in leftColumn"
+                        :key="index"
+                        class="w-full"
+                        @click="openShow"
+                    >
+                      <div class="relative w-full">
+                        <van-image
+                            :src="item.image"
+                            :style="{ aspectRatio: item.ratio }"
+                            fit="cover"
+                            class="w-full"
+                        />
+                        <div
+                            class="absolute left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]">
+                          LOT{{ index * 2 + 1 }}
+                        </div>
+                      </div>
+                      <div class="pt-[8px]">
+                        <div class="text-[14px] text-[#000000] leading-[20px]">
+                          {{ item.title }}
+                        </div>
+                        <div class="mt-[4px] text-[12px] text-[#575757]">
+                          起拍价：{{ item.startingPrice }}
+                        </div>
+                        <div
+                            v-if="item.transactionPrice"
+                            class="mt-[4px] text-[12px] text-[#b58047]"
+                        >
+                          成交价：{{ item.transactionPrice }}
+                        </div>
                       </div>
                     </div>
-                    <div class="pt-[8px]">
-                      <div class="text-[14px] text-[#000000] leading-[20px]">
-                        {{ item.title }}
+                  </div>
+                  <div class="flex flex-1 flex-col gap-[16px]">
+                    <div
+                        v-for="(item, index) in rightColumn"
+                        :key="index"
+                        class="w-full"
+                        @click="openShow"
+                    >
+                      <div class="relative w-full">
+                        <van-image
+                            :src="item.image"
+                            :style="{ aspectRatio: item.ratio }"
+                            fit="cover"
+                            class="w-full"
+                        />
+                        <div
+                            class="absolute left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]">
+                          LOT{{ index * 2 + 2 }}
+                        </div>
                       </div>
-                      <div class="mt-[4px] text-[12px] text-[#575757]">
-                        起拍价：{{ item.startingPrice }}
-                      </div>
-                      <div
-                          v-if="item.transactionPrice"
-                          class="mt-[4px] text-[12px] text-[#b58047]"
-                      >
-                        成交价：{{ item.transactionPrice }}
+                      <div class="pt-[8px]">
+                        <div class="text-[14px] text-[#000000] leading-[20px]">
+                          {{ item.title }}
+                        </div>
+                        <div class="mt-[4px] text-[12px] text-[#575757]">
+                          起拍价：{{ item.startingPrice }}
+                        </div>
+                        <div
+                            v-if="item.transactionPrice"
+                            class="mt-[4px] text-[12px] text-[#b58047]"
+                        >
+                          成交价：{{ item.transactionPrice }}
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-                <div class="flex flex-1 flex-col gap-[16px]">
-                  <div
-                      v-for="(item, index) in rightColumn"
-                      :key="index"
-                      class="w-full"
-                      @click="openShow"
-                  >
-                    <div class="relative w-full">
-                      <van-image
-                          :src="item.image"
-                          :style="{ aspectRatio: item.ratio }"
-                          fit="cover"
-                          class="w-full"
-                      />
-                      <div
-                          class="absolute left-[8px] top-[8px] h-[17px] w-[45px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]">
-                        LOT{{ index * 2 + 2 }}
-                      </div>
-                    </div>
-                    <div class="pt-[8px]">
-                      <div class="text-[14px] text-[#000000] leading-[20px]">
-                        {{ item.title }}
-                      </div>
-                      <div class="mt-[4px] text-[12px] text-[#575757]">
-                        起拍价：{{ item.startingPrice }}
-                      </div>
-                      <div
-                          v-if="item.transactionPrice"
-                          class="mt-[4px] text-[12px] text-[#b58047]"
-                      >
-                        成交价：{{ item.transactionPrice }}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </van-list>
-          </van-pull-refresh>
-        </div>
-      </van-tab>
-      <van-tab title="拍卖说明">
-        <div class="px-16px pt-14px">
-          <div class="text-#575757 text-14px">
-            这里是后台富文本配置的说明，啊即可打开三等奖撒度老师的湿答答是快乐的阿四大皆空
+              </van-list>
+            </van-pull-refresh>
           </div>
-          <div></div>
+        </van-tab>
+        <van-tab title="拍卖说明">
+          <div class="px-16px pt-14px">
+            <div class="text-#575757 text-14px">
+              这里是后台富文本配置的说明，啊即可打开三等奖撒度老师的湿答答是快乐的阿四大皆空
+            </div>
+            <div></div>
+          </div>
+        </van-tab>
+      </van-tabs>
+      <van-back-top right="15vw" bottom="10vh"/>
+      <van-action-sheet :round="false" v-model:show="show" title="拍品详情">
+        <div class="content bg-[#F0F0F0]" :style="`height: calc(100vh - ${showHeight+85}px)`">
+          <itemDetail></itemDetail>
         </div>
-      </van-tab>
-    </van-tabs>
-    <van-back-top right="15vw" bottom="10vh"/>
-    <van-action-sheet :round="false" v-model:show="show" title="拍品详情">
-      <div class="content bg-[#F0F0F0]" :style="`height: calc(100vh - ${showHeight+85}px)`">
-        <itemDetail></itemDetail>
-      </div>
-    </van-action-sheet>
+      </van-action-sheet>
+    </div>
   </div>
 </template>
+
 <style>
 :root:root {
   --van-action-sheet-header-height: 39px;
 }
 </style>
+
 <style scoped lang="scss">
 :deep(.van-swipe__indicator) {
   width: 8px;
@@ -218,3 +240,6 @@ const openShow = () => {
   background: rgba(0, 0, 0, 0.8);
 }
 </style>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/app/stores/home/index.js b/app/stores/home/index.js
new file mode 100644
index 0000000..8e6d038
--- /dev/null
+++ b/app/stores/home/index.js
@@ -0,0 +1,7 @@
+import { createGlobalState } from '@vueuse/core'
+export const homeStore = createGlobalState(() => {
+    const fullLive=ref(false)
+    return{
+        fullLive
+    }
+})
\ No newline at end of file