dix

src/component/Canvas/CanvasEditor/index.vue

@@ -1040,6 +1040,7 @@
 		},
 		// 导出图片
 		exportImage: async ({
+			isFrontBackUpdata = false, // 更新红绿图时候需要用，直接更新红绿图
 			isContainBg = false, // 是否包含背景图层
 			isContainFixed = false, // 是否包含固定图层
 			isContainFixedOther = true, // 是否包含其他固定图层--颜色图层
@@ -1056,6 +1057,7 @@
 		} = {}) => {
 			loading.value = true
 			canvasManager?.canvas?.discardActiveObject()
+			if(isFrontBackUpdata)await canvasManager?.changeCanvas()
 			var base64 = await canvasManager.exportImage({
 				isContainBg,
 				isContainFixed,

src/component/Detail/canvas/index.vue

@@ -163,7 +163,6 @@ export default defineComponent({
 		const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
 			// if(!detailDom.editCanvas)return
 			return new Promise(async (res,reject)=>{
-				console.log(detailDom.editCanvas)
 				await detailDom.editCanvas.exportImage({
 					isContainFixed:true,
 					width:props.sketchSize.width,
@@ -245,17 +244,26 @@ export default defineComponent({
 
 
 		const frontBackChange = async (value:any)=>{
+			let front = detailData.frontBack.front[detailData.imgDomIndex]
+			let back = detailData.frontBack.back[detailData.imgDomIndex]
+			store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
 			if(!detailData.selectDetail.partialDesign.partialDesignPath && !detailData.selectDetail.partialDesign.partialDesignBase64){
 				await privewDetail()
+			}else{
+				await detailDom.editCanvas.exportImage({
+					isFrontBackUpdata: true,
+					isContainFixed:true,
+					width:props.sketchSize.width,
+					height:props.sketchSize.height,
+				}).then((rv)=>{
+					if(detailData.selectDetail?.partialDesign)detailData.selectDetail.partialDesign.partialDesignBase64 = rv
+				})
 			}
 			let full = detailData.selectDetail.partialDesign.partialDesignBase64 || detailData.selectDetail.partialDesign.partialDesignPath || detailData.selectDetail.path
 			let size = {
 				...detailData.canvasConfig,
 			}
-			store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
 			segmentImage(value,full,size).then(async (rv)=>{
-				let front = detailData.frontBack.front[detailData.imgDomIndex]
-				let back = detailData.frontBack.back[detailData.imgDomIndex]
 				if(!front?.oldImageUrl)front.oldImageUrl = front.imageUrl
 				if(!front?.oldMaskUrl)front.oldMaskUrl = front.maskUrl
 				if(!back?.oldImageUrl)back.oldImageUrl = back.imageUrl
@@ -267,7 +275,6 @@ export default defineComponent({
 				back.imageUrl = rv.targetBackUrl
 				// store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
 			})
-
 		}
 		const editSketchCanvasInit = async (value:any)=>{
 			detailData.canvasInstance = value

src/component/Detail/detailRight/editPrintElement.vue

@@ -393,8 +393,8 @@ export default defineComponent({
 					angle: 0,
 					flipX: false,
 					flipY: false,
-					// blendMode: "multiply",
-					blendMode: "source-over",
+					blendMode: "multiply",
+					// blendMode: "source-over",
 					gapX: 0,
 					gapY: 0,
 				}

src/component/HomePage/Generate.vue

@@ -531,7 +531,7 @@ export default defineComponent({
       }
     )
     const setSpeed = (item: any) => {
-      speed.speedData = item
+      speed.speedData = {...item}
     }
     onMounted(() => {
       if (props.msg == 'Sketchboard') {

src/component/HomePage/renew.vue

@@ -205,7 +205,7 @@
         </div>
         <div class="payment">
           <div class="allocation">
-            <div class="selectType">
+            <!-- <div class="selectType">
               <div class="text">{{ $t('Renew.Payment') }}:</div>
               <label>
                 <input
@@ -227,7 +227,7 @@
                 />
                 {{ $t('Renew.Alipay') }}
               </label>
-            </div>
+            </div> -->
           </div>
           <div class="gallery_btn gallery_btn_radius" @click="payment">
             {{ $t('upgradePlan.Continue') }}

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>