scout666/liveh5-nuxt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix home

Browse Source
This commit is contained in:
张 元山 2025-03-04 19:11:52 +08:00
parent 3c862d7dc4
commit 80f7297467
1 changed files with 116 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

200
app/pages/liveRoom/components/SideButton/tangPopup.vue
View File

@ -1,137 +1,164 @@
<script setup>
import xPopup from '@/components/x-popup/index.vue'
import {goodStore} from "@/stores/goods/index.js";
import xImage from '@/components/x-image/index.vue'
import DetailPopup from '@/pages/home/components/DetailPopup/index.vue'
import {liveStore} from "~/stores/live/index.js";
import {ref} from "vue";
const {pageRef,itemList,getArtworkList, loading: storeLoading,} = goodStore();
const {auctionData} = liveStore()
const showDetail=ref(false)
import xPopup from "@/components/x-popup/index.vue";
import { goodStore } from "@/stores/goods/index.js";
import xImage from "@/components/x-image/index.vue";
import { liveStore } from "~/stores/live/index.js";
import { ref } from "vue";
const {
pageRef,
itemList,
getArtworkList,
loading: storeLoading,
} = goodStore();
const { auctionData } = liveStore();
const showDetail = ref(false);
const localState = ref({
finished: false,
refreshing: false,
showDetail: false,
showHeight: ''
})
showHeight: "",
});
const onRefresh = async () => {
try {
localState.value.refreshing = true
localState.value.finished = false
const { finished } = await getArtworkList(true)
localState.value.finished = finished
localState.value.refreshing = true;
localState.value.finished = false;
const { finished } = await getArtworkList(true);
localState.value.finished = finished;
} finally {
localState.value.refreshing = false
localState.value.refreshing = false;
}
}
};
const props = defineProps({
show: Boolean,
title: {
type: String,
default: ''
}
})
default: "",
},
});
const scrollToCurrentItem = () => {
if (!itemList.value?.length) return
if (!itemList.value?.length) return;
const currentIndex = itemList.value.findIndex(
item => auctionData.value.artwork.index === item?.index
)
(item) => auctionData.value.artwork.index === item?.index
);
if (currentIndex > -1) {
const container = document.querySelector('.list-container')
const targetElement = document.querySelectorAll('.item-wrapper')[currentIndex]
const container = document.querySelector(".list-container");
const targetElement =
document.querySelectorAll(".item-wrapper")[currentIndex];
if (targetElement && container) {
const containerTop = container.getBoundingClientRect().top
const elementTop = targetElement.getBoundingClientRect().top
const scrollTop = elementTop - containerTop + container.scrollTop
const containerTop = container.getBoundingClientRect().top;
const elementTop = targetElement.getBoundingClientRect().top;
const scrollTop = elementTop - containerTop + container.scrollTop;
container.scrollTo({
top: scrollTop,
behavior: 'smooth'
})
behavior: "smooth",
});
}
}
}
const emit = defineEmits(['update:show'])
const showDetailInfo=ref(null)
const close = () => emit('update:show', false);
const openShow=(item)=>{
showDetailInfo.value=item
showDetail.value=true
}
};
const emit = defineEmits(["update:show"]);
const showDetailInfo = ref(null);
const close = () => emit("update:show", false);
const openShow = (item) => {
showDetailInfo.value = item;
showDetail.value = true;
};
const loadMore = async () => {
pageRef.value.page++
const { finished } = await getArtworkList()
localState.value.finished = finished
}
watch(()=>{
return auctionData.value?.artwork?.index
},(newValue)=>{
})
watch(()=>props.show,(newValue)=>{
if (newValue){
nextTick(()=>{
scrollToCurrentItem()
})
pageRef.value.page++;
const { finished } = await getArtworkList();
localState.value.finished = finished;
};
watch(
() => {
return auctionData.value?.artwork?.index;
},
(newValue) => {}
);
watch(
() => props.show,
(newValue) => {
if (newValue) {
nextTick(() => {
scrollToCurrentItem();
});
}
}
})
);
</script>
<template>
<div>
<x-popup :show="show" @update:show="close">
<template #title>
<div class="text-#000 text-16px">{{ $t('home.tab1')}}</div>
<div class="text-#939393 text-16px ml-14px">{{ $t('live_room.total') }}{{ pageRef.itemCount }}{{ $t('live_room.lots_num') }}</div>
<div class="text-#000 text-16px">{{ $t("home.tab1") }}</div>
<div class="text-#939393 text-16px ml-14px">
{{ $t("live_room.total") }}{{ pageRef.itemCount
}}{{ $t("live_room.lots_num") }}
</div>
</template>
<div>
<van-pull-refresh
v-model="localState.refreshing"
:success-text="$t('home.refresh_show')"
:success-duration="700"
@refresh="onRefresh"
v-model="localState.refreshing"
:success-text="$t('home.refresh_show')"
:success-duration="700"
@refresh="onRefresh"
>
<template #success>
<van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
<van-icon name="success" />
<span>{{ $t("home.refresh_show") }}</span>
</template>
<van-list
v-model:loading="storeLoading"
:finished="localState.finished"
:finished-text="$t('home.finished_text')"
@load="loadMore"
v-model:loading="storeLoading"
:finished="localState.finished"
:finished-text="$t('home.finished_text')"
@load="loadMore"
>
<div
v-for="(item,index) of itemList"
:key="item.uuid"
class="flex mb-21px item-wrapper"
@click="openShow(item)"
v-for="(item, index) of itemList"
:key="item.uuid"
class="flex mb-21px item-wrapper"
@click="openShow(item)"
>
<div
class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
class="mr-10px flex-shrink-0 rounded-4px overflow-hidden cursor-pointer relative"
>
<xImage
:preview="false"
class="w-80px h-80px"
:src="item.artwork?.hdPic"
:alt="item?.artworkTitle"
loading="lazy"
:preview="false"
class="w-80px h-80px"
:src="item.artwork?.hdPic"
:alt="item?.artworkTitle"
loading="lazy"
/>
<div class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff">LOT{{item.index}}</div>
<div v-show="auctionData?.artwork?.index===item?.index" class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink">{{ $t('live_room.cast') }}</div>
<div
class="w-45px h-17px bg-#2B53AC text-12px line-height-none flex justify-center items-center absolute top-2px left-2px text-#fff"
>
LOT{{ item.index }}
</div>
<div
v-show="auctionData?.artwork?.index === item?.index"
class="w-80px h-20px bg-#B58047 flex line-height-none justify-center items-center text-#fff text-12px bottom-0 absolute blink"
>
{{ $t("live_room.cast") }}
</div>
</div>
<div>
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
<div
class="ellipsis line-height-20px text-16px font-600 min-h-40px"
>
{{ item.artworkTitle }}
</div>
<div class="text-14px text-#575757">{{ $t('home.start_price') }}：{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
<div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}：{{item.soldPrice}}</div>
<div class="text-14px text-#575757">
{{ $t("home.start_price") }}：{{ item?.startPriceCurrency }}
{{ item?.startPrice }}
</div>
<div class="text-14px text-#B58047" v-if="item.soldPrice">
{{ $t("home.close_price") }}：{{ item.soldPrice }}
</div>
</div>
</div>
</van-list>
</van-pull-refresh>
</div>
</x-popup>
<DetailPopup v-model:show="showDetail" :detail-info="showDetailInfo"></DetailPopup>
</div>
</template>
@ -148,7 +175,12 @@ watch(()=>props.show,(newValue)=>{
}
@keyframes fade {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
</style>
</style>