113 lines
4.3 KiB
TypeScript
113 lines
4.3 KiB
TypeScript
import { defineComponent, ref, watch, type VNodeRef } from 'vue'
|
|
import useGameNews from './useDiscountStore'
|
|
import { RiTimeLine } from 'oh-vue-icons/icons'
|
|
import { addIcons, OhVueIcon } from 'oh-vue-icons'
|
|
import { IoCloseCircleOutline, RiCloseCircleLine } from 'oh-vue-icons/icons'
|
|
import dayjs from 'dayjs'
|
|
import useDiscountStore from './useDiscountStore'
|
|
addIcons(RiTimeLine, IoCloseCircleOutline, RiCloseCircleLine)
|
|
export default defineComponent(() => {
|
|
const store = useDiscountStore()
|
|
const containerRef = ref<VNodeRef | null>(null as VNodeRef | null)
|
|
const searchText = ref('')
|
|
const handleScroll = () => {
|
|
const container = containerRef.value
|
|
|
|
if (container.scrollTop + container.clientHeight >= container.scrollHeight - 50) {
|
|
store.getNews()
|
|
}
|
|
}
|
|
return () => (
|
|
<div
|
|
class="w-full h-full flex flex-col p-5 bg-[#17212d]"
|
|
style={{
|
|
background: 'rgba(23,33,45,.6)'
|
|
}}
|
|
>
|
|
<div class={'flex w-full justify-center pb-5'}>
|
|
<div class={'relative group'}>
|
|
<input
|
|
class={
|
|
'py-1 px-5 bg-white/20 rounded-2xl w-[440px] text-white border-none outline-none'
|
|
}
|
|
value={searchText.value}
|
|
placeholder="请输入搜索内容"
|
|
onInput={(e: any) => {
|
|
searchText.value = e.target.value
|
|
}}
|
|
onKeydown={(e: any) => {
|
|
if (e.key === 'Enter') {
|
|
store.getNews()
|
|
}
|
|
}}
|
|
></input>
|
|
<div class={'absolute cursor-pointer hidden group-hover:block right-3 top-1/2 -translate-y-1/2'}>
|
|
<OhVueIcon name={RiCloseCircleLine.name} fill="#ddd"></OhVueIcon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class={'h-0 w-full flex-1'}>
|
|
<div
|
|
class={'w-full h-full overflow-y-scroll scrollbar-hide'}
|
|
onWheel={handleScroll}
|
|
ref={containerRef}
|
|
>
|
|
<div class={'grid grid-cols-3 gap-4 '}>
|
|
{store.list.map((item, index) => {
|
|
return (
|
|
<div
|
|
class={
|
|
'flex cursor-pointer h-[215px] overflow-hidden bg-[#17212d] items-center flex-col rounded-lg relative '
|
|
}
|
|
onClick={() => { }}
|
|
key={index}
|
|
>
|
|
<img class={'h-[142px] w-full object-cover'} src={item.commdity[0]?.img}></img>
|
|
<div
|
|
class={
|
|
'absolute bottom-0 w-full h-[100px] rounded-lg bg-[#0003] backdrop-blur-md'
|
|
}
|
|
>
|
|
<div class="flex flex-col w-full h-full justify-between py-2 px-3">
|
|
<span class="text-white text-[14px]">{item.name}</span>
|
|
<div>
|
|
<span
|
|
class={
|
|
'border-[1px] border-[#f6d1b8] border-solid text-[#f6d1b8] p-1 text-[12px] rounded'
|
|
}
|
|
>
|
|
{item.typename}
|
|
</span>
|
|
</div>
|
|
<div class="bg-white/20 flex rounded items-center">
|
|
<div class="bg-[#ef5a41] h-full text-white rounded px-2 text-[18px] font-bold ">
|
|
-13%
|
|
</div>
|
|
<span class="text-[#fffbc2] text-[16px] ml-2">
|
|
￥{item.commdity[0]?.price}
|
|
</span>
|
|
<span class="text-[12px] text-[#bdbdbd] line-through decoration-current">
|
|
￥{item.commdity[0]?.oldprice}
|
|
</span>
|
|
<span class="text-[12px] text-[#ebebeb] line-through decoration-current">
|
|
剩余{item.commdity[0]?.oldprice}天
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
{store.loading && (
|
|
<div class={'w-full font-bold flex justify-center text-white py-2'}>加载中...</div>
|
|
)}
|
|
{store.noMoreData && (
|
|
<div class={'w-full font-bold flex justify-center text-white py-2'}>无更多数据</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|