feat(home): 获取拍卖详情并优化首页组件
- 在 home 页面中调用 getAuctionDetail 方法获取拍卖详情 - 更新 Cescribe组件以显示拍卖详情信息和图片 - 在 ItemList 组件中添加 v-memo 指令以优化性能 - 调整 liveRoom 组件中的视频播放器样式
This commit is contained in:
parent
2d909b276b
commit
9f9e96dc0c
@ -1,12 +1,16 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
|
import {goodStore} from "~/stores/goods/index.js";
|
||||||
|
import xImage from '@/components/x-image/index.vue'
|
||||||
|
const {
|
||||||
|
auctionDetail
|
||||||
|
} = goodStore()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="px-16px pt-14px">
|
<div class="px-16px pt-14px">
|
||||||
<div class="text-#575757 text-14px">
|
<div class="text-#575757 text-14px" v-html="auctionDetail.info">
|
||||||
这里是后台富文本配置的说明,啊即可打开三等奖撒度老师的湿答答是快乐的阿四大皆空
|
|
||||||
</div>
|
</div>
|
||||||
|
<xImage :src="auctionDetail.image" class="w-343px"></xImage>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -65,7 +65,7 @@ const openShow = async (item) => {
|
|||||||
finished-text="没有更多了"
|
finished-text="没有更多了"
|
||||||
@load="loadMore"
|
@load="loadMore"
|
||||||
>
|
>
|
||||||
<div class="w-full flex gap-[16px]">
|
<div class="w-full flex gap-[16px]" v-memo="[itemList]">
|
||||||
<masonry-wall :items="itemList" :ssr-columns="2" :maxColumns="2" :minColumns="2" :gap="5">
|
<masonry-wall :items="itemList" :ssr-columns="2" :maxColumns="2" :minColumns="2" :gap="5">
|
||||||
<template #default="{ item, index }">
|
<template #default="{ item, index }">
|
||||||
<div
|
<div
|
||||||
|
@ -3,10 +3,11 @@ import liveRoom from '@/pages/liveRoom/index.client.vue';
|
|||||||
import {goodStore} from "@/stores/goods/index.js";
|
import {goodStore} from "@/stores/goods/index.js";
|
||||||
import ItemList from './components/ItemList/index.vue'
|
import ItemList from './components/ItemList/index.vue'
|
||||||
import Cescribe from './components/Cescribe/index.vue'
|
import Cescribe from './components/Cescribe/index.vue'
|
||||||
const {fullLive, liveRef} = goodStore();
|
const {fullLive, liveRef,getAuctionDetail} = goodStore();
|
||||||
const changeLive = () => {
|
const changeLive = () => {
|
||||||
fullLive.value = true;
|
fullLive.value = true;
|
||||||
};
|
};
|
||||||
|
getAuctionDetail()
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="flex-grow-1">
|
<div class="flex-grow-1">
|
||||||
|
@ -86,7 +86,7 @@ watch(()=>{
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="relative h-full">
|
<div class="relative h-full">
|
||||||
<!-- <div class="w-full h-full">
|
<div class="w-full h-full">
|
||||||
<video
|
<video
|
||||||
class="h-full w-full"
|
class="h-full w-full"
|
||||||
autoplay
|
autoplay
|
||||||
@ -98,7 +98,7 @@ watch(()=>{
|
|||||||
<source src="@/static/video/example.mp4" type="video/mp4" />
|
<source src="@/static/video/example.mp4" type="video/mp4" />
|
||||||
您的浏览器不支持 HTML5 视频。
|
您的浏览器不支持 HTML5 视频。
|
||||||
</video>
|
</video>
|
||||||
</div>-->
|
</div>
|
||||||
<!-- <div :id="playerId" class="w-screen"
|
<!-- <div :id="playerId" class="w-screen"
|
||||||
:style="fullLive?'height: calc(100vh - var(--van-nav-bar-height))':'height:100%'"></div>-->
|
:style="fullLive?'height: calc(100vh - var(--van-nav-bar-height))':'height:100%'"></div>-->
|
||||||
|
|
||||||
|
@ -34,6 +34,7 @@ export const goodStore = createGlobalState(() => {
|
|||||||
const res = await defaultDetail({})
|
const res = await defaultDetail({})
|
||||||
if (res.status === 0) {
|
if (res.status === 0) {
|
||||||
auctionDetail.value = res.data
|
auctionDetail.value = res.data
|
||||||
|
console.log('auctionDetail.value',auctionDetail.value)
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('获取拍卖详情错误:', err)
|
console.error('获取拍卖详情错误:', err)
|
||||||
|
Loading…
Reference in New Issue
Block a user