392 lines
8.8 KiB
Vue
392 lines
8.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
|
import sellerHeader from "../../seller-header.vue"
|
|
import { VueDraggable } from "vue-draggable-plus"
|
|
import selectMenu from '@/component/modules/selectMenu.vue'
|
|
import { Https } from '@/tool/https'
|
|
import { useRoute } from 'vue-router'
|
|
import { useStore } from 'vuex'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
// 定义组件名称
|
|
defineOptions({
|
|
name: 'myListingsSelectItem'
|
|
})
|
|
const { t } = useI18n()
|
|
//const props = defineProps({
|
|
//})
|
|
//const emit = defineEmits([
|
|
//])
|
|
let data = reactive({
|
|
})
|
|
const store = useStore()
|
|
const route = useRoute()
|
|
const domSize = ref('Small')
|
|
const domSizeList = ref([
|
|
{
|
|
label:t('Header.Small'),
|
|
value:'Small',
|
|
},
|
|
{
|
|
label:t('Header.Medium'),
|
|
value:'Medium',
|
|
},
|
|
{
|
|
label:t('Header.Large'),
|
|
value:'Large',
|
|
},
|
|
])
|
|
const router = useRouter()
|
|
const list = ref([
|
|
])
|
|
const showList = ref([])
|
|
const chooseList = ref([])
|
|
const chooseItem = (item:any)=>{
|
|
if(chooseList.value.findIndex((i:any)=>i.designItemId == item.designItemId) != -1){
|
|
chooseList.value.splice(chooseList.value.findIndex((i:any)=>i.designItemId == item.designItemId),1)
|
|
}else{
|
|
chooseList.value.push(item)
|
|
}
|
|
}
|
|
|
|
const next = ()=>{
|
|
if(chooseList.value.length == 0)return
|
|
let designItemIds = chooseList.value.map((item:any)=>({designOutfitUrl:item.designOutfitUrl,designItemId:item.designItemId}))
|
|
router.push({
|
|
path:'/home/seller/myListings/edit',
|
|
state: {
|
|
designItemIds,
|
|
type:'create',
|
|
collectionId: route.params.collectionId
|
|
}
|
|
})
|
|
}
|
|
|
|
const config = ref({
|
|
"data-container-type": "root",
|
|
"data-parent-id": "null",
|
|
animation: 250,
|
|
handle: ".item", // 可拖动的元素
|
|
"ghost-class": "ghost", // 拖动时的类名
|
|
"chosen-class": "chosen", // 选中时的类名
|
|
"drag-class": "drag", // 拖动时的类名
|
|
"swap-threshold": 0.5,
|
|
"empty-insert-threshold": 5,
|
|
"force-fallback": false,
|
|
"fallback-tolerance": 3,
|
|
"scroll-sensitivity": 100,
|
|
"scroll-speed": 10,
|
|
onEnd: (e) => {}
|
|
})
|
|
|
|
|
|
let resizeObserver = null as any
|
|
|
|
const gap = ref({
|
|
Small: '16px',
|
|
Medium: '24px',
|
|
Large: '30px',
|
|
})
|
|
//根据宽度设置列表宽度
|
|
let upDataDomWidthTime = null as any
|
|
const listingsBoxRef = ref(null) as any
|
|
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 changeGender = ()=>{
|
|
|
|
}
|
|
const setShowList = ()=>{
|
|
if(gender.value == 'All'){
|
|
showList.value = list.value
|
|
}else{
|
|
showList.value = list.value.filter((item:any)=>item.sex == gender.value)
|
|
}
|
|
}
|
|
const getCollectionDetail = ()=>{
|
|
store.commit("set_loading", true)
|
|
let moduleList = [] as any
|
|
moduleList = ['design',]
|
|
let value:any = {
|
|
"id":route.params.collectionId,
|
|
"moduleList":moduleList,
|
|
}
|
|
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
|
list.value = rv.design.userLikeDetails
|
|
setShowList()
|
|
store.commit("set_loading", false)
|
|
}).catch(()=>{
|
|
store.commit("set_loading", false)
|
|
})
|
|
}
|
|
onMounted(()=>{
|
|
// 创建观察器
|
|
nextTick(()=>{
|
|
resizeObserver = new ResizeObserver((entries) => {
|
|
for (const entry of entries) {
|
|
// 获取元素尺寸
|
|
const width = entry.contentRect.width
|
|
if(upDataDomWidthTime)clearTimeout(upDataDomWidthTime)
|
|
upDataDomWidthTime = setTimeout(()=>{
|
|
setDomSize(width)
|
|
},200)
|
|
}
|
|
})
|
|
// 开始监听
|
|
if(resizeObserver)resizeObserver.observe(listingsBoxRef.value)
|
|
})
|
|
chooseList.value = []
|
|
getCollectionDetail()
|
|
})
|
|
onActivated(()=>{
|
|
})
|
|
onUnmounted(()=>{
|
|
})
|
|
defineExpose({})
|
|
const {} = toRefs(data);
|
|
</script>
|
|
<template>
|
|
<div class="create-select-item">
|
|
<seller-header>
|
|
<template #right>
|
|
<div class="header-right">
|
|
<div class="chooseNum">
|
|
{{ chooseList.length }} {{ t('Seller.sketchesSelected') }}
|
|
</div>
|
|
<div class="button" @click="next">
|
|
<span>{{ $t('Seller.Next') }}</span>
|
|
<div class="icon">
|
|
<i class="fi fi-rr-arrow-small-right"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</seller-header>
|
|
<div class="content" ref="listingsBoxRef">
|
|
<div class="title">
|
|
<div class="left">
|
|
<i class="fi fi-rs-comments"></i>
|
|
<span>{{ $t('Seller.Praka') }}</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',
|
|
'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="showList"
|
|
class="list"
|
|
:class="domSize"
|
|
v-bind="config"
|
|
:style="{gap: gap[domSize] || '1.6rem'}"
|
|
:group="{
|
|
name: 'sortable',
|
|
pull: false,
|
|
put: true
|
|
}"
|
|
>
|
|
<div v-for="v in list" :key="v.id"
|
|
:draging="true"
|
|
class="item"
|
|
@click="chooseItem(v)"
|
|
:class="{'active':chooseList.some(item => item.id === v.id)}"
|
|
>
|
|
<div class="choose">
|
|
<i class="fi fi-rr-check"></i>
|
|
</div>
|
|
<img :src="v.designOutfitUrl || v.url" alt="">
|
|
</div>
|
|
</VueDraggable>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped lang="less">
|
|
.create-select-item {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.header-right{
|
|
display: flex;
|
|
.chooseNum{
|
|
font-family: pingfang_regular;
|
|
font-weight: 400;
|
|
font-size: 1.6rem;
|
|
line-height: 140%;
|
|
margin-right: 2rem;
|
|
line-height: 6rem;
|
|
}
|
|
.button {
|
|
width: 12.3rem;
|
|
height: 6rem;
|
|
border-radius: 4rem;
|
|
display: flex;
|
|
border: 1.5px solid #000000;
|
|
background-color: #000;
|
|
color: #fff;
|
|
transition: all .3s;
|
|
gap: .8rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.6rem;
|
|
cursor: pointer;
|
|
i{
|
|
color: #fff;
|
|
display: flex;
|
|
font-size: 1.6rem;
|
|
}
|
|
&:hover{
|
|
background-color: #fff;
|
|
color: #000;
|
|
i{
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> .content {
|
|
margin-top: 2rem;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
padding: 2.4rem 3rem;
|
|
background-color: #f9fafa;
|
|
border-radius: 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
> .title{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 3rem;
|
|
> .left{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-family: pingfang_heavy;
|
|
font-weight: 400;
|
|
font-size: 1.8rem;
|
|
line-height: 130%;
|
|
letter-spacing: 0%;
|
|
gap: 1.2rem;
|
|
> i{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 2.4rem;
|
|
}
|
|
}
|
|
}
|
|
.list{
|
|
display: flex;
|
|
flex: 1;
|
|
flex-wrap: wrap;
|
|
margin: 0 auto;
|
|
overflow-y: auto;
|
|
align-content: flex-start;
|
|
min-width: 90%;
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
&.Small{
|
|
--itemWidth: 17rem;
|
|
--itemHeight: 26.1rem;
|
|
--iconFS: 1.4rem;
|
|
--iconWH: 2.4rem;
|
|
--iconTR: 1.2rem;
|
|
}
|
|
&.Medium{
|
|
--itemWidth: 22.6rem;
|
|
--itemHeight: 34.6rem;
|
|
--iconFS: 1.6rem;
|
|
--iconWH: 3rem;
|
|
--iconTR: 1.4rem;
|
|
}
|
|
&.Large{
|
|
--itemWidth: 29.2rem;
|
|
--itemHeight: 44.8rem;
|
|
--iconFS: 2.2rem;
|
|
--iconWH: 4rem;
|
|
--iconTR: 1.62rem;
|
|
}
|
|
> .item{
|
|
width: var(--itemWidth);
|
|
height: var(--itemHeight);
|
|
border-radius: 2rem;
|
|
border: 1.5px solid #C7C7C7;
|
|
// transition: all .3s;
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
> .choose{
|
|
display: flex;
|
|
width: var(--iconWH);
|
|
height: var(--iconWH);
|
|
position: absolute;
|
|
background-color: #000;
|
|
border-radius: 50%;
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
top: var(--iconTR);
|
|
right: var(--iconTR);
|
|
> i{
|
|
color: #fff;
|
|
font-size: var(--iconFS);
|
|
display: flex;
|
|
}
|
|
}
|
|
> img{
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: contain;
|
|
}
|
|
&.active{
|
|
border: 1.5px solid #000;
|
|
> .choose{
|
|
display: flex;
|
|
}
|
|
}
|
|
&:hover{
|
|
border: 1.5px solid #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|