123

- 将 list 数据从组件内部移动到 home store 中
- 优化了 fullLive 的切换逻辑，改为 toggleFullLive 方法
- 更新了模板，使用新的 store 数据
- 添加了 slide-up 过渡动画，替换了原有的 fade动画

app/pages/home/components/Column/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="flex flex-1 flex-col gap-[16px]">
+    <div
+        v-for="(item, index) in items"
+        :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 + 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>
+</template>
+
+<script setup>
+const props = defineProps({
+  items: Array
+});
+
+const emit = defineEmits(['openShow']);
+
+const openShow = () => {
+  emit('openShow');
+};
+</script>

app/pages/home/components/index.vue

@@ -0,0 +1,50 @@
+<script setup>
+const props = defineProps({
+  items: Array
+});
+
+const emit = defineEmits(['openShow']);
+
+const openShow = () => {
+  emit('openShow');
+};
+</script>
+<template>
+    <div class="flex flex-1 flex-col gap-[16px]">
+      <div
+        v-for="(item, index) in items"
+        :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 + 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>
+  </template>
+  

app/pages/home/index.vue

@@ -4,8 +4,9 @@ import LiveRoom from '@/pages/LiveRoom/index.client.vue';
 import itemDetail from '@/components/itemDetail/index.vue';
 import {homeStore} from "@/stores/home/index.js";
 import Column from './components/Column/index.vue'
+
 const {fullLive} = homeStore();
-import { useFetch } from '#app'
+
 
 definePageMeta({
   layout: 'default',
@@ -48,12 +49,12 @@ const list = ref([{
   title: '张天赐 | 日出而作，日落而息',
   startingPrice: 'RMB 1,000',
   transactionPrice: '',
-},{
+}, {
   image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
   title: '张天赐 | 日出而作，日落而息',
   startingPrice: 'RMB 1,000',
   transactionPrice: 'RMB 10,000',
-},{
+}, {
   image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
   title: '张天赐 | 日出而作，日落而息',
   startingPrice: 'RMB 1,000',
@@ -107,7 +108,7 @@ const changeLive = () => {
               <van-pull-refresh>
                 <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="loadData">
                   <div class="w-full flex gap-[16px]">
-                    <Column v-for="(column, colIndex) in columns" :key="colIndex" :items="column" @openShow="openShow" />
+                    <Column v-for="(column, colIndex) in columns" :key="colIndex" :items="column" @openShow="openShow"/>
                   </div>
                 </van-list>
               </van-pull-refresh>
@@ -168,6 +169,5 @@ const changeLive = () => {
   position: absolute;
   z-index: 10;
   height: calc(100vh - var(--van-nav-bar-height));
-  transform: translateY(0);
 }
 </style>

app/stores/home/index.js

@@ -1,7 +1,49 @@
 import { createGlobalState } from '@vueuse/core'
 export const homeStore = createGlobalState(() => {
     const fullLive=ref(false)
+    const list = ref([{
+        image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
+        title: '张天赐 | 日出而作，日落而息',
+        startingPrice: 'RMB 1,000',
+        transactionPrice: 'RMB 10,000',
+    }, {
+        image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/f7b65e23-ce21-41b4-8e58-9e6dc6950727.png',
+        title: '张天赐 | 日出而作，日落而息',
+        startingPrice: 'RMB 1,000',
+        transactionPrice: '',
+    }, {
+        image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/41eceb23-d168-4049-ae8e-48c5328b192f.png',
+        title: '张天赐 | 日出而作，日落而息',
+        startingPrice: 'RMB 1,000',
+        transactionPrice: '',
+    }, {
+        image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
+        title: '张天赐 | 日出而作，日落而息',
+        startingPrice: 'RMB 1,000',
+        transactionPrice: '',
+    }, {
+        image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
+        title: '张天赐 | 日出而作，日落而息',
+        startingPrice: 'RMB 1,000',
+        transactionPrice: '',
+    }, {
+        image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/25c3f03c-9e0b-456b-963f-79b3d812c89a.png',
+        title: '张天赐 | 日出而作，日落而息',
+        startingPrice: 'RMB 1,000',
+        transactionPrice: '',
+    },{
+        image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
+        title: '张天赐 | 日出而作，日落而息',
+        startingPrice: 'RMB 1,000',
+        transactionPrice: 'RMB 10,000',
+    },{
+        image: 'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
+        title: '张天赐 | 日出而作，日落而息',
+        startingPrice: 'RMB 1,000',
+        transactionPrice: 'RMB 10,000',
+    }])
     return{
+        list,
         fullLive
     }
 })

env/.env.prod

@@ -0,0 +1,7 @@
+# 生产环境配置
+NUXT_PUBLIC_API_BASE=http://api.example.com
+NUXT_PUBLIC_WS_URL=ws://ws.example.com
+NUXT_API_SECRET=prod-secret
+
+# 阿里云播放器配置
+NUXT_PUBLIC_PLAYER_SOURCE=artc://live-pull-sh-01.szjixun.cn/live/live?auth_key=1736748343-0-0-feef65166e5cc62957c35b6e3eec82a1

env/.env.test

@@ -0,0 +1,7 @@
+# 测试环境配置
+NUXT_PUBLIC_API_BASE=http://192.168.88.139:9021
+NUXT_PUBLIC_WS_URL=ws://test-ws.example.com
+NUXT_API_SECRET=test-secret
+
+# 阿里云播放器配置
+NUXT_PUBLIC_PLAYER_SOURCE=artc://live-pull-sh-01.szjixun.cn/live/live?auth_key=1737080180-0-0-42ad4cf26ba26eee78ca7de9c524d1e0