123

refactor(home): 将首页数据移至 store 并优化页面逻辑
- 将 list 数据从组件内部移动到 home store 中 - 优化了 fullLive 的切换逻辑，改为 toggleFullLive 方法 - 更新了模板，使用新的 store 数据 - 添加了 slide-up 过渡动画，替换了原有的 fade动画
2025-01-17 11:06:19 +08:00 · 2025-01-17 10:19:01 +08:00 · 2025-01-17 09:55:15 +08:00 · 2025-01-17 09:55:09 +08:00
8 changed files with 161 additions and 5 deletions
--- a/app/config/live/index.js
+++ b/app/config/live/index.js
--- a/app/pages/home/components/Column/index.vue
+++ b/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>
--- a/app/pages/home/components/index.vue
+++ b/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>
+  
--- a/app/pages/home/index.vue
+++ b/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>
--- a/app/static/images/close@2x.png
+++ b/app/static/images/close@2x.png
--- a/app/stores/home/index.js
+++ b/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
    }
 })
--- a/env/.env.prod
+++ b/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
--- a/env/.env.test
+++ b/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
Author	SHA1	Message	Date
xingyy	d345b66026	123	2025-01-17 11:06:19 +08:00
xingyy	a43bdaf157	refactor(home): 将首页数据移至 store 并优化页面逻辑 - 将 list 数据从组件内部移动到 home store 中 - 优化了 fullLive 的切换逻辑，改为 toggleFullLive 方法 - 更新了模板，使用新的 store 数据 - 添加了 slide-up 过渡动画，替换了原有的 fade动画	2025-01-17 10:19:01 +08:00
xingyy	b7c38704f5	Merge remote-tracking branch 'origin/main'	2025-01-17 09:55:15 +08:00
xingyy	2e73eb7e34	feat(env): 添加生产环境和测试环境配置 - 新增 .env.prod 和 .env.test 文件，分别用于生产环境和测试环境 - 配置文件中包含了 API基础 URL、WebSocket URL 和阿里云播放器配置等信息- 添加了首页组件 Column 和首页主组件，用于展示拍卖品列表	2025-01-17 09:55:09 +08:00