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;

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

@@ -8,10 +8,18 @@ const props = defineProps({
 	type: {
 		type: String,
 		default: 'listings'
+	},
+	item: {
+		type: Object,
+		default: () => ({})
 	}
 })
-//const emit = defineEmits([
+const emit = defineEmits([
-//])
+	'deleteDraft',
+	'editListing',
+	'draftListing',
+	'publishListing'
+])
 let data = reactive({
 })
 onMounted(()=>{
@@ -26,15 +34,15 @@ const {} = toRefs(data);
 		<div class="imgBox">
 			<img src="" alt="">
 			<div class="maskBtn">
-				<div>
+				<div @click="$emit('editListing',item)">
 					<svgIcon name="seller-edit" :size="domSize == 'Small'?32:domSize == 'Medium'?40:48" />
 					<div>Edit</div>
 				</div>
-				<div v-if="type == 'listings'">
+				<div v-if="type == 'listings'" @click="$emit('draftListing',item)">
 					<svgIcon name="seller-draft" :size="domSize == 'Small'?32:domSize == 'Medium'?40:48" />
 					<div>Draft</div>
 				</div>
-				<div v-else-if="type == 'drafts'">
+				<div v-else-if="type == 'drafts'" @click="$emit('publishListing',item)">
 					<svgIcon name="seller-share" :size="domSize == 'Small'?32:domSize == 'Medium'?40:48" />
 					<div>Publish</div>
 				</div>
@@ -58,7 +66,7 @@ const {} = toRefs(data);
 					</div>
 					<span>123</span>
 				</div>
-				<div class="detailItem drafts" v-if="type == 'drafts'">
+				<div class="detailItem drafts" v-if="type == 'drafts'" @click="$emit('deleteDraft',item)">
 					<div class="">
 						<i class="fi fi-rr-trash"></i>
 					</div>
@@ -192,6 +200,7 @@ const {} = toRefs(data);
 					}
 					&.drafts{
 						justify-content: center;
+						cursor: pointer;
 						> div{
 							> i{
 								font-size: var(--detailRightItemDraftsIcon);

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

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+const props = defineProps({
+	visible: {
+		type: Boolean,
+		default: false,
+	}
+})
+const emit = defineEmits([
+	'update:visible'
+])
+const router = useRouter()
+const {t} = useI18n()
+let data = reactive({
+})
+
+const fun = ref(null)
+
+let deleteDraftsRef = ref(null)
+
+const open = (fun)=>{
+	fun.value = fun
+	emit('update:visible', true)
+}
+
+const deleteDrafts = ()=>{
+	if(fun.value){
+		fun?.value()
+	}
+	cleardata()
+}
+
+
+
+const cleardata = ()=>{
+	emit('update:visible', false)
+}
+
+
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({open})
+const { showAgain } = toRefs(data);
+</script>
+<template>
+    <div ref="deleteDraftsRef" class="deleteDrafts" v-if="visible">
+		<a-modal
+			class="collection generalModel"
+			v-model:visible="props.visible"
+			:footer="null"
+			:get-container="() => deleteDraftsRef"
+			width="76.4rem"
+			:maskClosable="false"
+			:centered="true"
+			:closable="false"
+			:mask="true"
+			:keyboard="false"
+			:destroyOnClose="false"
+			:zIndex="1000"
+		>
+			<div class="generalModel_btn">
+				<div class="generalModel_closeIcon" @click.stop="cleardata()">
+					<SvgIcon name="seller-sellerToolTipClose" size="30"></SvgIcon>
+				</div>
+			</div>
+			<div class="deleteTitle">
+				<div class="icon">
+					<i class="fi fi-rr-trash"></i>
+				</div>
+				<div class="titleText">
+					<h1>Delete this listing?</h1>
+					<p>Your listing and its details will be permanently removed.</p>
+				</div>
+			</div>
+			<div class="deleteContent">
+				<div class="img">
+					<img src="" alt="">
+				</div>
+				<div class="detail">
+					<div class="name">Item Name</div>
+					<div class="price">HK$392.00 · Draft</div>
+				</div>
+			</div>
+			<div class="btnBox">
+				<div class="btn" @click.stop="cleardata()">Cancel</div>
+				<div class="btn" @click.stop="deleteDrafts()">Delete</div>
+			</div>
+		</a-modal>
+	</div>
+	
+</template>
+<style lang="less" scoped>
+	.deleteDrafts{
+		// width: 100%;
+		// height: 100%;
+		position: absolute;
+		:deep(.generalModel){
+			height: auto;
+			.ant-modal-body{
+				padding: 6rem 5.5rem;
+				.generalModel_btn{
+					.generalModel_closeIcon{
+						transform: translate(0%, 0%);
+						top: 4rem;
+						right: 4rem;
+					}
+				}
+			}
+		}
+		.deleteTitle{
+			margin-bottom: 4rem;
+			display: flex;
+			> .icon{
+				width: 10rem;
+				border-radius: 50%;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				height: 10rem;
+				background-color: #fceaea;
+				margin-right: 3.2rem;
+				> i{
+					display: flex;
+					font-size: 3.7rem;
+					color: #DF2C2C;
+				}
+			}
+			> .titleText{
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				> h1{
+					font-size: 2.4rem;
+					font-family: pingfang_heavy;
+					font-weight: 400;
+					line-height: 130%;
+					margin-bottom: .8rem;
+				}
+				> p{
+					font-weight: 400;
+					font-family: pingfang_regular;
+					font-size: 2rem;
+					line-height: 130%;
+				}
+			}
+		}
+		.deleteContent{
+			width: 100%;
+			background-color: #f6f6f6;
+			border-radius: 1.2rem;
+			padding: 1.2rem;
+			margin-bottom: 4rem;
+			display: flex;
+			> .img{
+				width: 9.8rem;
+				height: 15rem;
+				border-radius: 1.2rem;
+				margin-right: 3.6rem;
+				overflow: hidden;
+				> img{
+					width: 100%;
+					height: 100%;
+					object-fit: cover;
+				}
+			}
+			> .detail{
+				display: flex;
+				align-items: flex-start;
+				flex-direction: column;
+				justify-content: center;
+				> .name{
+					margin-bottom: .8rem;
+					font-family: pingfang_heavy;
+					font-weight: 400;
+					font-size: 2.4rem;
+					line-height: 130%;
+				}
+				> .price{
+					font-weight: 400;
+					font-family: pingfang_regular;
+					font-size: 2rem;
+					line-height: 130%;
+				}
+			}
+		}
+		.btnBox{
+			display: flex;
+			justify-content: end;
+			> .btn{
+				width: 16rem;
+				height: 6rem;
+				border-radius: 4rem;
+				font-weight: 400;
+				font-size: 2.2rem;
+				line-height: 130%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				cursor: pointer;
+				&:nth-child(1){
+					color: #999999;
+					background-color: #fff;
+					border: 1.5px solid #C7C7C7;
+				}
+				&:nth-child(2){
+					margin-left: 2rem;
+					color: #fff;
+					background-color: #df2c2c;
+					border: 1.5px solid #df2c2c;
+					
+				}
+			}
+		}
+	}
+</style>