dix

src/views/SellerDashboard/MyListings/main/content.vue

@@ -3,7 +3,7 @@ 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'
-
+import deleteDrafts from './deleteDrafts.vue'
 
 //const props = defineProps({
 //})
@@ -22,11 +22,6 @@ const list = ref([
 	{ id: "7" },
 	{ id: "8" },
 	{ id: "9" },
-	{ id: "9" },
-	{ id: "9" },
-	{ id: "9" },
-	{ id: "9" },
-	{ id: "9" },
 	{ id: "10" }
 ])
 const list2 = ref([
@@ -72,6 +67,31 @@ const domSizeList = ref([
 		value:'Large',
 	},
 ])
+
+const visible = ref(false)
+const deleteDraftsRef = ref(null)
+
+const deleteDraft = (item: any)=>{
+	deleteDraftsRef.value.open(()=>{
+		list2.value = list2.value.filter((v: any)=>v.id != item.id)
+	})
+}
+
+const draftListing = (item: any)=>{
+	//数组前面添加item
+	list2.value.unshift(item)
+	list.value = list.value.filter((v: any)=>v.id != item.id)
+}
+
+const publishListing = (item: any)=>{
+	list.value.unshift(item)
+	list2.value = list2.value.filter((v: any)=>v.id != item.id)
+}
+
+const editListing = (item: any)=>{
+}
+
+
 const listingsBoxRef = ref(null) as any
 let resizeObserver = null as any
 
@@ -81,7 +101,6 @@ const gap = ref({
 	Large: '30px',
 })
 
-
 //根据宽度设置列表宽度
 let upDataDomWidthTime = null
 const setDomSize = (width: number)=>{
@@ -197,7 +216,15 @@ const { showDrafts } = toRefs(data);
 					}"
 				>
 					
-					<contentItem v-for="v in list" :key="v.id" type="listings" :domSize="domSize"/>
+					<contentItem 
+						v-for="v in list" 
+						:key="v.id" 
+						:item="v"
+						type="listings" 
+						:domSize="domSize"
+						@draftListing="draftListing"
+						@editListing="editListing"
+					/>
 				</VueDraggable>
 			</div>
 			<div class="openOrCloseDrafts" :class="{'active': showDrafts}" @click="unfoldDrafits">
@@ -222,10 +249,20 @@ const { showDrafts } = toRefs(data);
 						put: true
 					}"
 				>
-					<contentItem v-for="v in list2" :key="v.id" domSize="Small" type="drafts"/>
+					<contentItem 
+						v-for="v in list2" 
+						:key="v.id" 
+						:item="v"
+						domSize="Small" 
+						type="drafts"
+						@deleteDraft="deleteDraft"
+						@editListing="editListing"
+						@publishListing="publishListing"
+					/>
 				</VueDraggable>
 			</div>
 		</div>
+		<deleteDrafts ref="deleteDraftsRef" v-model:visible="visible"></deleteDrafts>
 	</div>
 </template>
 <style lang="less" scoped>
@@ -277,6 +314,7 @@ const { showDrafts } = toRefs(data);
 				}
 				.list2{
 					gap: 1.6rem;
+					width: 100%;
 					.item{
 						width: 19.2rem;
 					}
@@ -285,7 +323,8 @@ const { showDrafts } = toRefs(data);
 					display: flex;
 					flex-wrap: wrap;
 					// flex: 1;
-					margin: auto;
+					margin: 0 auto;
+					align-items: flex-start;
 					overflow: auto;
 					&::-webkit-scrollbar {
 						display: none;