aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
X1627315083@163.com
2026-04-10 14:40:48 +08:00
parent 5e77348913
commit 3b70ed2830
11 changed files with 1039 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/views/SellerDashboard/MyListings/main/content.vue
View File

@@ -1,6 +1,9 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import { VueDraggable } from "vue-draggable-plus"
import contentItem from "./contentItem.vue"
import selectMenu from '@/component/modules/selectMenu.vue'
//const props = defineProps({
//})
@@ -54,9 +57,75 @@ const config = ref({
"scroll-speed": 10,
onEnd: (e) => {}
})
const domSize = ref('Small')
const domSizeList = ref([
{
label:'Small',
value:'Small',
},
{
label:'Medium',
value:'Medium',
},
{
label:'Large',
value:'Large',
},
])
const listingsBoxRef = ref(null) as any
let resizeObserver = null as any
const gap = ref({
Small: '16px',
Medium: '24px',
Large: '30px',
})
//根据宽度设置列表宽度
let upDataDomWidthTime = null
const setDomSize = (width: number)=>{
if(!listingsBoxRef.value)return
let listDom = listingsBoxRef.value.querySelector('.list')
let listItemDom = listDom.querySelector('.item')
let offsetWidth = listItemDom.getBoundingClientRect().width
let lineNum = Math.floor(width / offsetWidth)
let itemNum = Math.floor((width - (lineNum - 1) * parseInt(gap.value[domSize.value])) / offsetWidth)
listDom.style.maxWidth = ((itemNum - 1) * parseInt(gap.value[domSize.value]) + itemNum * (offsetWidth)) + 'px'
}
const changeDomSize = ()=>{
setTimeout(()=>{
setDomSize(listingsBoxRef.value.clientWidth)
},350)
}
const unfoldDrafits = ()=>{
data.showDrafts = !data.showDrafts
}
onMounted(()=>{
// 创建观察器
nextTick(()=>{
resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
// 获取元素尺寸
const width = entry.contentRect.width
const height = entry.contentRect.height
const borderBoxSize = entry.borderBoxSize[0] // 包含边框
const contentBoxSize = entry.contentBoxSize[0] // 内容区域
if(upDataDomWidthTime)clearTimeout(upDataDomWidthTime)
upDataDomWidthTime = setTimeout(()=>{
setDomSize(width)
},200)
}
})
// 开始监听
if(resizeObserver)resizeObserver.observe(listingsBoxRef.value)
})
})
onUnmounted(()=>{
// 停止监听
if(listingsBoxRef?.value)resizeObserver?.unobserve(listingsBoxRef?.value)
})
defineExpose({})
const { showDrafts } = toRefs(data);
@@ -64,19 +133,62 @@ const { showDrafts } = toRefs(data);
<template>
<div class="listings">
<div class="listingsBox listingsBox1">
<div class="box">
<div class="box" :class="domSize" ref="listingsBoxRef">
<div class="title">
<div class="left">
<i class="fi fi-rs-comments"></i>
<span>Active Listings</span>
</div>
<div class="right">
<div class="generalModel_state">
<div>
<selectMenu
:selectList="domSizeList"
@change="changeDomSize"
:isBtnOpen='true'
:style="{
'border-radius':'0rem',
'border':'none',
'font-weight': '900',
'border-right':'2px solid rgba(0,0,0,.2)',
'line-height': '3rem',
'height': '3rem',
'background': 'rgba(0,0,0,0)',
}"
v-model:select="domSize"
>
<template v-slot:btnText>
{{ $t('Header.Filter') }}
</template>
</selectMenu>
</div>
<div>
<selectMenu
:selectList="domSizeList"
@change="changeDomSize"
:isBtnOpen='true'
:style="{
'border-radius':'0rem',
'border':'none',
'font-weight': '900',
'line-height': '3rem',
'height': '3rem',
'background': 'rgba(0,0,0,0)',
}"
v-model:select="domSize"
>
<template v-slot:btnText>
{{ $t('Header.Size') }}
</template>
</selectMenu>
</div>
</div>
</div>
</div>
<VueDraggable
v-model="list"
class="list"
:style="{gap: gap[domSize] || '1.6rem'}"
v-bind="config"
:group="{
name: 'sortable',
@@ -84,20 +196,25 @@ const { showDrafts } = toRefs(data);
put: true
}"
>
<div class="item" v-for="v in list" :key="v.id" :draging="true">
{{ v.id }}
</div>
<contentItem v-for="v in list" :key="v.id" type="listings" :domSize="domSize"/>
</VueDraggable>
</div>
<div class="openOrCloseDrafts" :class="{'active': showDrafts}" @click="showDrafts = !showDrafts">
<div class="openOrCloseDrafts" :class="{'active': showDrafts}" @click="unfoldDrafits">
<span class="icon iconfont icon-xiala"></span>
</div>
</div>
<!-- <div class="listingsBox listingsBox2" :class="{'active': showDrafts}">
<div class="box">
<div class="listingsBox listingsBox2" :class="{'active': showDrafts}">
<div class="box Small">
<div class="title">
<div class="left">
<i class="fi fi-rs-comments"></i>
<span>Drafts</span>
</div>
</div>
<VueDraggable
v-model="list2"
class="list"
class="list2"
v-bind="config"
:group="{
name: 'sortable',
@@ -105,12 +222,10 @@ const { showDrafts } = toRefs(data);
put: true
}"
>
<div class="item" v-for="v in list" :key="v.id" :draging="true">
{{ v.id }}
</div>
<contentItem v-for="v in list2" :key="v.id" domSize="Small" type="drafts"/>
</VueDraggable>
</div>
</div> -->
</div>
</div>
</template>
<style lang="less" scoped>
@@ -123,16 +238,19 @@ const { showDrafts } = toRefs(data);
.listingsBox{
background-color: #f9fafa;
border-radius: 2rem;
flex: 1;
position: relative;
// overflow: hidden;
display: flex;
transition: all .3s;
.box{
width: 100%;
padding: 2.4rem 4rem;
padding: 2.4rem 0;
padding-bottom: 0;
flex-direction: column;
overflow: hidden;
display: flex;
flex: 1;
padding: 2.4rem 4rem;
> .title{
display: flex;
justify-content: space-between;
@@ -148,6 +266,7 @@ const { showDrafts } = toRefs(data);
line-height: 130%;
letter-spacing: 0%;
gap: 1.2rem;
align-content: flex-start;
> i{
display: flex;
justify-content: space-between;
@@ -156,34 +275,30 @@ const { showDrafts } = toRefs(data);
}
}
}
.list{
.list2{
gap: 1.6rem;
.item{
width: 19.2rem;
}
}
.list,.list2{
display: flex;
flex-wrap: wrap;
gap: 20px;
.item{
width: 197px;
height: 249px;
border-radius: 20px;
border: 1.5px solid #C7C7C7;
&:hover{
border: 2px solid #000000;
}
// flex: 1;
margin: auto;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
}
}
}
.listingsBox1{
width: 100%;
flex: 1;
.box{
.list{
justify-content: center;
}
}
}
.listingsBox2{
width: 48.8rem;
transition: all .3s;
overflow: hidden;
&.active{
width: 0;