2023-10-27

上传模特截取模特图片大小功能

src/assets/iconfont/iconfont.css

@@ -7,7 +7,7 @@
 
 .iconfont {
   font-family: "iconfont" !important;
-  font-size: 16px;
+  font-size: 1.8rem;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

src/assets/iconfont2/iconfont.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: "iconfont"; /* Project id  */
-  src: url('iconfont.ttf?t=1697613542954') format('truetype');
+  src: url('iconfont.ttf?t=1698114002056') format('truetype');
 }
 
 .iconfont {
   font-family: "iconfont" !important;
-  font-size: 1.6rem;
+  font-size: 1.8rem;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -15,3 +15,11 @@
   content: "\e66c";
 }
 
+.icon-fanchehui:before {
+  content: "\e626";
+}
+
+.icon-chehui:before {
+  content: "\e609";
+}
+

src/assets/style/style.css

@@ -185,18 +185,18 @@ li {
 .operate_file_block .select_img_type .category_list .category_item:hover {
   background: linear-gradient(-137deg, #eeefdb, #e7dbed);
 }
-.ant-modal-root .ant-modal-wrap .ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-btns .ant-btn:hover {
+.ant-modal-confirm-btns .ant-btn:hover {
-  color: #39215b;
+  color: #39215b !important;
-  border-color: #39215b;
+  border-color: #39215b !important;
 }
-.ant-modal-root .ant-modal-wrap .ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-btns .ant-btn-primary {
+.ant-modal-confirm-btns .ant-btn-primary {
-  background: #39215b;
+  background: #39215b !important;
-  border-color: #39215b;
+  border-color: #39215b !important;
 }
-.ant-modal-root .ant-modal-wrap .ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-btns .ant-btn-primary:hover {
+.ant-modal-confirm-btns .ant-btn-primary:hover {
-  color: #fff;
+  color: #fff !important;
-  border-color: #543087;
+  border-color: #543087 !important;
-  background: #543087;
+  background: #543087 !important;
 }
 .ant-spin-dot-item {
   background-color: #543087;
@@ -208,6 +208,23 @@ li {
   text-align: center;
   margin-top: 0.5rem;
 }
+.pin_block .ant-checkbox-wrapper {
+  height: 2.2rem;
+  align-items: center;
+}
+.pin_block .ant-checkbox-wrapper span {
+  font-size: 1.4rem;
+  height: 100%;
+  line-height: 2.3rem;
+}
+.pin_block .ant-checkbox-wrapper .ant-checkbox-inner {
+  width: 1.6rem;
+  height: 1.6rem;
+}
+.pin_block .ant-checkbox-wrapper .ant-checkbox-inner::after {
+  width: 0.57142857rem;
+  height: 0.91428571rem;
+}
 .collection_modal .ant-modal-body,
 .design_detail_modal_component .ant-modal-body,
 .designOpenrtion_modal .ant-modal-body,

src/assets/style/style.less

@@ -222,27 +222,28 @@ ul,li{
 			.ant-modal-content{
 				.ant-modal-body{
 					.ant-modal-confirm-body-wrapper{
-						.ant-modal-confirm-btns{
+						
-							.ant-btn:hover{
-								color: #39215b;
-								border-color: #39215b;
-							}
-							.ant-btn-primary{
-								background: #39215b;
-								border-color: #39215b;
-							}
-							.ant-btn-primary:hover{
-								color: #fff;
-								border-color: #543087;
-								background: #543087;
-							}
-						}
 					}
 				}
 			}
 		}
 	}
 }
+.ant-modal-confirm-btns{
+	.ant-btn:hover{
+		color: #39215b !important;
+		border-color: #39215b !important;
+	}
+	.ant-btn-primary{
+		background: #39215b !important;
+		border-color: #39215b !important;
+	}
+	.ant-btn-primary:hover{
+		color: #fff !important;
+		border-color: #543087 !important;
+		background: #543087 !important;
+	}
+}
 //loding样式
 .ant-spin-dot-item{
     background-color: #543087;
@@ -253,6 +254,23 @@ ul,li{
 .pin_block{
 	text-align: center;
 	margin-top:.5rem;
+	.ant-checkbox-wrapper{
+		height: 2.2rem;
+		align-items: center;
+		span{
+			font-size: 1.4rem;
+			height: 100%;
+			line-height: 2.3rem;
+		}
+		.ant-checkbox-inner{
+			width: 1.6rem;
+			height: 1.6rem;
+		}
+		.ant-checkbox-inner::after{
+			width: .571428571rem;
+			height: .914285714rem;
+		}
+	}
 }
 //collection 弹窗
 .collection_modal,.design_detail_modal_component,.designOpenrtion_modal,.library_page{

src/component/Detail/DesignDetail.vue

@@ -31,13 +31,16 @@
 								<img :src="item?.path" alt="">
 							</div>
 						</div>
-						<div class="detail_modal_item_back" :class="{active:body}" v-for="item,index in frontBack.back" :style="item.style">
+						<div class="detail_modal_model_content">
-							<img :src="item.imageUrl" alt="">
+							<div class="detail_modal_item_back" :class="{active:body}" v-for="item,index in frontBack.back" :style="item.style">
-						</div>
+								<img :src="item.imageUrl" alt="">
-						<img class="detail_modal_model" :src="frontBack.body?.layersObject[0]?.imageUrl" alt="">
+							</div>
-						<div class="detail_modal_item_front" :class="{active:body}" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)">
+							<img class="detail_modal_model" :src="frontBack.body?.layersObject[0]?.imageUrl" alt="">
-							<img :src="item.imageUrl" alt="">
+							<div class="detail_modal_item_front" :class="{active:body}" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)">
+								<img :src="item.imageUrl" alt="">
+							</div>
 						</div>
+						
 					</div>
 					<!-- <div v-else class="detial_img detial_img1" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)">
 						<img :src="item.imageUrl" alt="">
@@ -52,6 +55,8 @@
 						<i v-show="!body" class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i>
 						<!-- 层 -->
 						<i class="fi fi-rr-copy" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg"></i>
+						<i v-show="revocationShow>1" class="icon iconfont icon-chehui" @click="revocation"></i>
+						<i v-show="oppositeRevocationShow>=1" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
 					</div>
 					<div v-show="ifSubmit" class="subitOkPreviewBtn" @click="submit">
 						Submit
@@ -115,7 +120,7 @@
 
             </div>
         </a-modal>
-        <ElementReplace ref="ElementReplace"></ElementReplace>
+        <!-- <ElementReplace ref="ElementReplace"></ElementReplace> -->
         <AccessoryReplace ref="AccessoryReplace"></AccessoryReplace>
          <div class="mark_loading" v-show="loadingShow">
             <a-spin size="large" />
@@ -174,6 +179,9 @@ export default defineComponent({
 		let userInfo:any = {}
 		let ifSubmit = ref(false)
 		let designItemDetailUrl = ref({})
+		let setRevocationShow = ref(false)//判断是不是第一次进来和切换下一张
+		let oppositeRevocationShow:any = ref()
+		let revocationShow:any = ref()
         return{
             designItemDetail,
             store,
@@ -187,7 +195,10 @@ export default defineComponent({
 			designOutfitId,
 			userInfo,
 			ifSubmit,
-			designItemDetailUrl
+			designItemDetailUrl,
+			setRevocationShow,
+			oppositeRevocationShow,
+			revocationShow
         }
     },
     data(){
@@ -213,8 +224,6 @@ export default defineComponent({
 				}
 				await this.setImgSize()
 				this.designItemDetailUrl = designItemDetail.currentFullBodyView?designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
-				console.log(this.designItemDetailUrl);
-				
 			}
 		},
 		currentIndex:{
@@ -222,7 +231,29 @@ export default defineComponent({
 			}
 		},
 	},
+	provide() {
+		return {
+			setRevocation:this.setRevocation
+		}
+	},
 	mounted(){
+		let beforeunload =  () => {
+			this.removeRevocation()
+			window.removeEventListener('beforeunload',beforeunload)
+		}
+		window.addEventListener('beforeunload',beforeunload)
+		let onresizeTime:any
+		let this_ = this
+		window.onresize = () => {
+        return (() => {
+			clearTimeout(onresizeTime)
+			onresizeTime = setTimeout(async ()=>{
+				await this_.setImgSize()
+			},500)
+			
+			})()
+		}
+
 		let userInfo:any = getCookie("userInfo")
         this.userInfo = JSON.parse(userInfo);
 		// let url = Https.httpUrls.getDesignDetail + `?designItemId=34242&designPythonOutfitId=34004`
@@ -258,7 +289,6 @@ export default defineComponent({
 	},
     methods:{
 		openCurrent(num: Number) {
-			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
 			DesignDetailAlter.init(num)
 			if(num ==2 ){
@@ -271,8 +301,9 @@ export default defineComponent({
 				this.designOrder = false
 				let DesignDetailAlter:any = this.$refs.DesignDetailAlter
 				DesignDetailAlter.terminate()
-				this.designItemDetail = {}
+				// this.designItemDetail = {}
 				this.frontBack = {}
+				this.removeRevocation()
             }else{
                 this.designShowPrview = 1;
 				this.designItemDetailUrl = {}
@@ -300,6 +331,7 @@ export default defineComponent({
 					})
 					
                     this.store.commit('setDesignItemDetail',rv)
+					this.setRevocation(rv,'')
 					if(rv.others[0].layersObject.length != 0){
 						this.body = false
 					}else{
@@ -336,7 +368,7 @@ export default defineComponent({
 					}
 				})
 			}else{
-				designItemDetail.others.forEach((item:any) => {
+				designItemDetail?.others?.forEach((item:any) => {
 					if(item.type == 'Body'){
 						body = item
 					}
@@ -369,8 +401,6 @@ export default defineComponent({
 						}
 					}
 				})
-				let bodyImgWH = document.getElementsByClassName("design_compile_content")[0].getElementsByClassName("perview_img")[0]
-
 				body.style = {
 					width:body.layersObject[0].imageSize?.[0]*ratio+'px',
 					height:body.layersObject[0].imageSize?.[1]*ratio+'px',
@@ -402,7 +432,57 @@ export default defineComponent({
 			this.designShowPrview = 1
             // this.showDesignDetailModal(data,str)
 		},
-		
+		removeRevocation(){
+			sessionStorage.removeItem('oppositeRevocation')
+			sessionStorage.removeItem('revocation')
+			this.setRevocationShow = false
+		},
+		setRevocation(designItemDetail:any,data:any){//设置撤销
+			let itemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			// let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
+			let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
+			let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
+			if(revocation?.[0]?.designItemDetail.designItemId != itemDetail.designItemId || sessionStorage.getItem("revocation") == null){
+				// sessionStorage.setItem('revocation', JSON.stringify([]));
+				// sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
+				revocation = []
+			}
+			let detail = {
+				designItemDetail:designItemDetail,
+				data:data?data:''
+			}
+			revocation.push(detail)
+			this.revocationShow = revocation?.length
+			this.oppositeRevocationShow = 0
+			sessionStorage.setItem('revocation', JSON.stringify(revocation));
+			sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
+		},
+		revocation(){//撤回
+			let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
+			let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
+			oppositeRevocation.push(revocation[revocation.length-1])
+			this.oppositeRevocationShow = oppositeRevocation.length
+			revocation.splice(revocation.length-1,1)
+			this.revocationShow = revocation.length
+			if(this.revocationShow > 1){
+				this.store.commit('setDesignPreviewData',revocation[revocation.length-1].data)
+			}
+			this.store.commit("setDesignItemDetail", revocation[revocation.length-1].designItemDetail);
+			sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
+			sessionStorage.setItem('revocation', JSON.stringify(revocation));
+		},
+		oppositeRevocation(){//反撤回
+			let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
+			let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
+			this.store.commit('setDesignPreviewData',oppositeRevocation[oppositeRevocation.length-1].data)
+			this.store.commit("setDesignItemDetail", oppositeRevocation[oppositeRevocation.length-1].designItemDetail);
+			revocation.push(oppositeRevocation[oppositeRevocation.length-1])
+			this.revocationShow = revocation.length
+			oppositeRevocation.splice(oppositeRevocation.length-1,1)
+			this.oppositeRevocationShow = oppositeRevocation.length
+			sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
+			sessionStorage.setItem('revocation', JSON.stringify(revocation));
+		},
 		setSubmitItem(str:any){
 			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			let clothes:any = []
@@ -478,7 +558,9 @@ export default defineComponent({
 		//按比设置单件衣服宽高位置
 		async setPostition(url:any){
 			let img:any = await loadImage(url)
-			let modal_body = <HTMLImageElement>document.getElementsByClassName('detail_modal_body')[0]
+			let modal_body = <HTMLImageElement>document.getElementsByClassName('detail_modal_model')[0]
+				console.log(modal_body);
+				
 			const num = modal_body?.offsetWidth / img.width;
 			function loadImage(url:any) {
 				return new Promise((resolve, reject) => {
@@ -499,6 +581,7 @@ export default defineComponent({
             let newDesign = {}
             let newIndex = 0
 			this.designOrder = false
+			this.removeRevocation()
 			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
 			DesignDetailAlter.terminate()
             if(type === 'last'){
@@ -692,6 +775,7 @@ export default defineComponent({
         // padding: 1.5rem 1rem 2.5rem;
         box-sizing: border-box;
         .detail_modal_body_img{
+			overflow: hidden;
             // width: 43.3rem;
 			width: 23%;
             height: 100%;
@@ -700,7 +784,6 @@ export default defineComponent({
             justify-content: center;
             align-items: center;
 			position: relative;
-
 			flex-direction: column;
 				// height: 50%;
 			.detail_modal_body{
@@ -714,7 +797,8 @@ export default defineComponent({
 					top: 0;
 					left: 50%;
 					z-index: 999;
-					transform: translateX(-50%);
+					transform: translate(-50%,-120%);
+					transition: all .3s;
 					>div{
 						width: 4rem;
 						height: 4rem;
@@ -744,30 +828,41 @@ export default defineComponent({
 				>img{
 					width: 100%;
 				}
-				.detail_modal_model{
+				.detail_modal_model_content{
+					top: 50%;
+					transform: translate(-50%, -50%);
+					left: 50%;
 					position: relative;
-					z-index: 1;
+					height: 80%;
-				}
+					display: inline-block;
-				.detail_modal_item_front,.detail_modal_item_back{
+					.detail_modal_model{
-					cursor: pointer;
+						z-index: 1;
-					position: absolute;
+						position: relative;
-					img{
-						// width: 100%;
-						max-height: 100%;
 						width: auto;
+						max-height: 100%;
 					}
-					&.active{
+					.detail_modal_item_front,.detail_modal_item_back{
-						top: 50%;
+						cursor: pointer;
-						left: 50%;
+						position: absolute;
-						transform: translate(-50%,-50%);
+						img{
+							// width: 100%;
+							max-height: 100%;
+							width: auto;
+						}
+						&.active{
+							top: 50%;
+							left: 50%;
+							transform: translate(-50%,-50%);
+						}
 					}
-				}
+					.detail_modal_item_back{
-				.detail_modal_item_back{
+						z-index: 1 !important;
-					z-index: 1 !important;
+					}
-				}
+					.detail_modal_item_front{
-				.detail_modal_item_front{
 
+					}
 				}
+				
 			}
 			.subitOkPreviewBtn{
 				bottom: 2rem;
@@ -778,7 +873,7 @@ export default defineComponent({
 			}
             .detial_img{
                 max-width: 100%;
-                max-height: 100%;
+                max-height: 80%;
             }
 			.detail_btn{
 				z-index: 9999;
@@ -791,17 +886,46 @@ export default defineComponent({
 					position: absolute;
 					cursor: pointer;
 					zoom: 1.2;
+					transition: all .3s;
 					&.fi-bs-expand-arrows-alt{
 						top: 0;
 						left: 0;
+						transform: translateX(-120%);
 					}
 					&.fi-rr-edit{
 						left: 0;
 						top: 3rem;
+						transform: translateX(-120%);
 					}
 					&.fi-rr-copy{
 						top: 0;
 						right: 0;
+						transform: translateX(120%);
+					}
+					&.icon-fanchehui{
+						top: 6rem;
+						right: 0;
+						transform: translateX(120%);
+					}
+					&.icon-chehui{
+						top: 3rem;
+						right: 0;
+						transform: translateX(120%);
+					}
+				}
+				i:hover{
+
+				}
+			}
+			&.detail_modal_body_img:hover{
+				.detail_modal_body{
+					.detail_modal_body_nav{
+						transform: translate(-50%,0%);
+					}
+				}
+				div{
+					i{
+						transform: translateX(0);
 					}
 				}
 			}

src/component/Detail/DesignDetailEnd.vue

@@ -58,7 +58,10 @@
 			</div>
 			<div class="result_apparel_print_img">
 				<img v-show="type_==1" class="result_appare_img" :src="sketchImg?.id_?sketchImg?.path:current?.path" :title="current?.type">
-				<img v-show="type_==2" class="result_print_img" :src="current?.path" :title="current?.type" @click="setPrint">
+				<!-- <img v-show="type_==2" class="result_print_img" :src="current?.path" :title="current?.type" @click="setPrint"> -->
+				<div v-show="type_==2" class="result_print_img" @click="setPrint" :title="current?.type">
+					<img v-for="item in current.layersObject" :src="item.imageUrl" alt="">
+				</div>
 			
 			</div>
 		</div>
@@ -109,6 +112,7 @@ export default defineComponent({
         const store = useStore();
 		let type_ = ref(0);
         let current = inject('current')//父组件传过来的数据
+        let setRevocation = inject('setRevocation')//父组件传过来的数据
 		let sketchImg = ref({})
 		//印花
 		let overallSingle = ref(false)
@@ -122,6 +126,7 @@ export default defineComponent({
         return{
 			store,
 			current,
+			setRevocation,
 			sketchImg,
 			type_,
 			overallSingle,
@@ -143,6 +148,7 @@ export default defineComponent({
 		//点击判断
 		init(num){
 			// this.current = JSON.parse(JSON.stringify(this.currentItem))
+			console.log(this.current);
 			this.type_ = num
 			this.colorList[this.selectIndex] = this.$parent.selectColor
 			this.overallSingle = this.current?.printObject?.ifSingle == null?false:this.current?.printObject?.ifSingle
@@ -271,6 +277,7 @@ export default defineComponent({
 					this.loadingShow = false
 					this.store.commit("setDesignItemDetail", designItemDetail);
 					this.store.commit("setDesignPreviewData", data);
+					this.setRevocation(designItemDetail,data)
 				}
 			).catch(res=>{
 				this.loadingShow = false
@@ -324,6 +331,9 @@ export default defineComponent({
 				transform: scale(.85);
 				transform-origin: center top;
 				cursor: pointer;
+				img:nth-child(1){
+					position: absolute;
+				}
 			}
 		}
 	}

src/component/Detail/DesignPrintOperation.vue

@@ -113,6 +113,7 @@ export default defineComponent({
         let designOpenrtion = ref(false);
 		let designOpenrtionList = ref([])
 		let current = inject('current')//父组件传过来的数据
+        let setRevocation = inject('setRevocation')//父组件传过来的数据
 		let overallSingle = ref(false)
 		let systemDesignerPercentage = ref(0)
 		let printAmount = ref(1)//印花数量
@@ -165,6 +166,7 @@ export default defineComponent({
 			print,
 			sketch,
 			loadingShow,
+			setRevocation
         };
     },
     data() {
@@ -255,6 +257,13 @@ export default defineComponent({
 						this.designOpenrtionList.forEach((item,index)=>{
 							this.setTemplate(item,index)
 							this.printAmount = this.printStyleList.length
+							if (!this.overallSingle) {
+								this.printAmount = 1
+								this.setprintAmount()
+							}
+							if(this.current.printObject.ifSingle != this.overallSingle){
+								this.refetchTemplate(0)
+							}
 
 						})
 					}else{
@@ -439,6 +448,7 @@ export default defineComponent({
 				let num = this.printAmount - this.printStyleList.length
 				for (let index = 0; index < num; index++) {
 					this.printStyleList.push(this.printStyleList[this.printStyleList.length-1])
+					this.printStyleList[this.printStyleList.length-1].transform.rotateZ = 0
 					this.refetchTemplate(this.printStyleList.length-1)
 					this.designOpenrtionList.push(this.current.printObject.prints[this.current.printObject.prints.length-1])
 				}
@@ -601,7 +611,6 @@ export default defineComponent({
 				prints:this.computeZindex(),
 			}
 			data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
-			this.store.commit("setDesignPreviewData", data);
 			this.loadingShow = true
 			Https.axiosPost(Https.httpUrls.designSingle, data).then(
 				(rv) => {
@@ -623,6 +632,8 @@ export default defineComponent({
 						item.layersObject[1].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[1].id
 					})
 					this.store.commit("setDesignItemDetail", designItemDetail);
+					this.store.commit("setDesignPreviewData", data);
+					this.setRevocation(designItemDetail,data)
 					this.loadingShow = false
 					this.designOpenrtion = false
 					// this.closeModal()

src/component/Detail/habit.vue

@@ -632,6 +632,7 @@ export default defineComponent({
         border-radius: 1rem;
         padding: 2rem;
 		// zoom: .75;
+		font-size: 1.6rem;
         transform-origin: top right;
         position: absolute;
         right: -.3rem;
@@ -776,6 +777,9 @@ export default defineComponent({
 				justify-content: space-between;
 				.model_current{
 					margin-right: 3rem;
+					.model_text{
+						text-align: center;
+					}
 				}
 			}
 			.habit_model_list{
@@ -831,6 +835,7 @@ export default defineComponent({
 				flex-direction: column;
 				.model_text{
 					display: flex;
+					justify-content: center;
 					:deep(.ant-switch) {
 						margin: 0 1rem;
 					}
@@ -910,6 +915,19 @@ export default defineComponent({
 }
 :deep(.ant-switch-checked) {
 	background-color: #000;
+	.ant-switch-handle{
+		left: calc(100% - 1.8rem - .2rem);
+	}
+	
+}
+:deep(.ant-switch){
+	min-width: 4.4rem;
+	height: 2.2rem;
+	line-height: 2.2rem;
+	.ant-switch-handle{
+		width: 1.8rem;
+		height: 1.8rem;
+	}
 }
 .habit :deep(.ant-btn) {
     box-shadow: none !important;
@@ -922,6 +940,7 @@ export default defineComponent({
     display: flex;
     align-items: center;
     justify-content: space-between;
+	font-size: 1.4rem;
 }
 </style>
 <style>

src/component/Detail/setDesignItem.vue

@@ -53,6 +53,7 @@ export default defineComponent({
 			return store.state.DesignDetailModule.designItemDetail
 		})
 		let current = inject('current')//父组件传过来的数据
+        let setRevocation = inject('setRevocation')//父组件传过来的数据
 		let printZIndex = ref(4)//印花优先级
         let printStyleList = ref([
 			{
@@ -88,7 +89,8 @@ export default defineComponent({
 			direction,//判断点击的是li那个边
 			imgDom,
 			imgDomIndex,
-			frontBack
+			frontBack,
+			setRevocation
         };
     },
     data() {
@@ -381,26 +383,13 @@ export default defineComponent({
 					rv.clothes.forEach((item)=>{
 						designItemDetail.clothes.forEach((i)=>{
 							if(item.type === i.type){
-								// item.position = [
-								// 	item.position[0] += left,
-								// 	item.position[1] += top
-								// ]
-								// item.layersObject[1].position = [
-								// 	item.layersObject[1].position[0]+=item.layersObject[1].offset[1],
-								// 	item.layersObject[1].position[1]+=item.layersObject[1].offset[0]
-								// ],
-								// item.layersObject[0].position = [
-								// 	item.layersObject[0].position[0]+=item.layersObject[0].offset[1],
-								// 	item.layersObject[0].position[1]+=item.layersObject[0].offset[0]
-								// ]
 								i.layersObject = item.layersObject
 							}
 						})
-					
 					})
 					this.$emit('setDesignCoverage');
 					this.store.commit("setDesignItemDetail", designItemDetail);
-				
+					this.setRevocation(designItemDetail,data)
                 }
             ).catch(res=>{ 
                 this.loadingShow = false

src/component/HomePage/Cropper.vue

@@ -2,7 +2,7 @@
       <a-modal class="modal_component cut_pricture_modal" 
         v-model:visible="cutPicuterModal" 
         :footer="null" 
-        width="80%"
+        width="65%"
         :maskClosable="false"
         :centered="true"
 		:closable="false"
@@ -134,6 +134,7 @@ export default defineComponent({
         finishCropper(){
             let cropper:any = this.$refs.cropper,
                 that = this
+				
             cropper.getCropData((data:any) => {
             // 转换为File对象
                 let file = base64toFile(data,this.cropperFileData.name);

src/component/HomePage/Generate.vue

@@ -32,10 +32,10 @@
                 </label>
             </div>
 			<div v-if="type_.type2 == 'Printboard'" class="printModel">
-				<div @click="printModel.optype = !printModel.optype">{{ printModel.num }}</div>
+				<div @click.stop="PrintModel">{{ printModel.name }}</div>
 				<ul v-show="printModel.optype">
-					<li class="printModel_item" @click="setPrintModel(1)">1</li>
+					<li class="printModel_item" @click="setprintModel(1)">Model1</li>
-					<li class="printModel_item" @click="setPrintModel(2)">2</li>
+					<li class="printModel_item" @click="setprintModel(2)">Model2</li>
 				</ul>
 			</div>
         </div>
@@ -43,7 +43,7 @@
             <input
                 class="search_input"
 				@input="ifMaximumLength"
-                placeholder="Promopt input"
+                placeholder="Prompt input"
 				:maxlength='inputShow?0:9999'
                 v-model="searchPictureName"
                 @keydown.enter="getgenerate()"
@@ -222,6 +222,7 @@ export default defineComponent({
 		let printModel = ref({
 			num:1,
 			optype:false,
+			name:'model1'
 		})
 		// let sketchCatecoryList:any = ref([])
 		let workspace:any = ref({})
@@ -343,10 +344,21 @@ export default defineComponent({
 				}
 			})
         },
-		setPrintModel(num:any){
+		PrintModel(){
+			if(!this.printModel.optype){
+				document.addEventListener('click',this.removePrintModel)
+			}
+			this.printModel.optype = !this.printModel.optype
+		},
+		removePrintModel(){
+			this.printModel.optype = false
+			document.removeEventListener('click',this.removePrintModel)
+		},
+		setprintModel(num:any){
 			this.printModel = {
 				num : num,
 				optype:false,
+				name:'model'+num
 			}
 		},
 		getgenerate(){
@@ -378,7 +390,7 @@ export default defineComponent({
 				level2Type:'',
 				text:this.searchPictureName,
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-				version:this.printModel.num,//为1就是Print
+				version:0,//为1就是Print
 				gender:'',
 			}
 			this.loadingShow = true
@@ -402,7 +414,7 @@ export default defineComponent({
 				this.loadingShow = false
             });
 		},
-		ifMaximumLength(e){
+		ifMaximumLength(){
 			clearTimeout(this.inputTime)
 			let inputBox = document.getElementsByClassName('generate')[0].getElementsByClassName('input_box')[0]
 			let input = inputBox.getElementsByClassName('search_input')[0]
@@ -584,7 +596,7 @@ export default defineComponent({
     }
 	.printModel{
 		>div{
-			width: 5rem;
+			width: 7rem;
 			display: flex;
 			justify-content: center;
 			border-radius: 1rem;
@@ -594,13 +606,14 @@ export default defineComponent({
 		}
 		ul{
 			position: absolute;
-			width: 5rem;
+			width: 7rem;
 			text-align: center;
 			margin-top: .3rem;
 			border-radius: 1rem;
 			overflow: hidden;
 			li{
 				background: rgba(0,0,0,.2);
+				line-height: 2;
 				cursor: pointer;
 				&.printModel_item:hover{
 					background: rgba(0,0,0,.4);

src/component/HomePage/Header.vue

@@ -347,7 +347,7 @@ export default defineComponent({
 .header_component {
     display: flex;
 	justify-content: space-between;
-	padding: 0 30px;
+	// padding: 0 30px;
 	padding-left: 0;
     width: 100%;
     height: 7rem;
@@ -359,7 +359,9 @@ export default defineComponent({
 	z-index: 1049;
 	background-color: #fff;
 	.header_right{
+		width: 33%;
 		display: flex;
+		justify-content: flex-end;
 		align-items: center;
 	}
     .header_logo {
@@ -386,6 +388,9 @@ export default defineComponent({
             color: #000;
             cursor: pointer;
             font-weight: 900;
+			&.nav_item:nth-child(3){
+				margin: 0;
+			}
 			&.nav_item::before {
 				position: absolute;
 				content: "";

src/component/HomePage/Material.vue

@@ -542,6 +542,24 @@ export default defineComponent({
 				&.moodb{
 					margin: 0 2rem 2rem 0;
 				}
+				.pin_block{
+					.ant-checkbox-wrapper{
+						height: 2.2rem;
+						align-items: center;
+						span{
+							font-size: 1.4rem;
+							line-height: 2.3rem;
+						}
+						.ant-checkbox-inner{
+							width: 1.6rem;
+							height: 1.6rem;
+						}
+						.ant-checkbox-inner::after{
+							width: .571428571rem;
+							height: .914285714rem;
+						}
+					}
+				}
 				&.active{
 					opacity: 0.5;
 				// border: 2px solid;
@@ -551,6 +569,8 @@ export default defineComponent({
 					}
 					.pin_block{
 						pointer-events:none;
+						
+					
 					}
 					.operate_file_block{
 						pointer-events:none;

src/component/HomePage/MoodboardUpload.vue

@@ -118,7 +118,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="modal_accomplish">
+			<div v-show="moodboarList.length > 1" class="modal_accomplish">
 				<div class="modal_text">
 					<div>Layout of selected moodboard</div>
 					<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">Edit</div>
@@ -390,7 +390,7 @@ export default defineComponent({
 				// layout.init('moodboard')
 				layout.init()
 			}else{
-				message.warning('Please click Layout to sort randomlys')
+				message.warning('Please click Layout to sort randomly')
 			}
 			
         },
@@ -636,6 +636,10 @@ export default defineComponent({
 					width: 48.5%;
 					height: 100%;
 				}
+				.wh8{
+					width: 100%;
+					height: 48.5%;
+				}
 				.w1h2{
 					width: 23%;
 					height: 100%;

src/component/HomePage/SketchboardUpload.vue

@@ -570,7 +570,7 @@ export default defineComponent({
 				level2Type:generage.level2Type,
 				text:this.captionGeneration,
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-				version:generage.printModel.num,//为1就是Print
+				version:0,//为1就是Print
 				gender:this.workspace.sex,
 			}
 			if(generateType == 'image'||generateType == 'text-image'){

src/component/HomePage/layout.vue

@@ -677,6 +677,8 @@ export default defineComponent({
 			display: flex;
 			margin-top: 2rem;
 			justify-content: center;
+			max-height: 13%;
+			overflow: hidden;
 			.active{
 				img{
 					border: 2px solid;
@@ -684,11 +686,18 @@ export default defineComponent({
 					box-sizing: border-box;
 				}
 			}
-			img{
+			>div{
-				width:5rem;
+				max-height: 13%;
-                cursor: pointer;
+				overflow: hidden;
-				margin: 0 2rem;
+				img{
+					object-fit: cover;
+					width:5rem;
+					cursor: pointer;
+					margin: 0 2rem;
+					max-height: 100%;
+				}
 			}
+			
 		}
 		.layout_centent{
 			display: flex;
@@ -854,6 +863,10 @@ export default defineComponent({
 				height: 100%;
 				
 			}
+			.wh8{
+				width: 100%;
+				height: 48.5%;
+			}
 			.w1h2{
 				width: 23%;
 				height: 100%;

src/component/LibraryPage/ModelPlacement.vue

@@ -91,12 +91,42 @@
                         <div class="perview_mark_loading" v-show="isShowMark">
                             <a-spin size="large" />
                         </div>
-                        <div class="img_content_block" ref="imgbox" @mousemove="startMove($event)">
+                        <div class="img_content_block" ref="imgbox">
-                            <img class="placement_img" :src="perviewUrl || printObject?.url">
+							
-                            <div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)"  @mousemove="startMove($event)">
+							<div :style="{width: imgBox.width+'px', height:imgBox.height +'px',top:imgBox.y+'px',left:imgBox.x+'px',position:'absolute'}">
-                                <div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
+								<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)"  @mousemove="startMove($event)">
-                                <div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
+									<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
-                            </div>
+									<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
+								</div>
+							</div>
+							<vue-cropper
+								ref="cropper"
+								:img="option.img"
+								:outputSize="option.outputSize"
+								:outputType="option.outputType"
+								:info="option.info"
+								:canScale="option.canScale"
+								:autoCrop="option.autoCrop"
+								:fixed="option.fixed"
+								:fixedNumber="option.fixedNumber"
+								:full="option.full"
+								:fixedBox="option.fixedBox"
+								:canMove="option.canMove"
+								:canMoveBox="option.canMoveBox"
+								:original="option.original"
+								:centerBox="option.centerBox"
+								:height="option.height"
+								:infoTrue="option.infoTrue"
+								:limitMinSize="option.limitMinSize"
+								:enlarge="option.enlarge"
+								@real-time="realTime"
+								:autoCropArea="1"
+								:autoCropHeight="option.autoCropHeight"
+								:autoCropWidth="option.autoCropWidth"
+								:mode="option.mode">
+							</vue-cropper>
+                            <!-- <img class="placement_img" :src="perviewUrl || printObject?.url"> -->
+                           
                         </div>
                         
                     </div>
@@ -109,12 +139,17 @@
 <script lang="ts">
 import { defineComponent,ref,createVNode} from 'vue'
 import { Https } from "@/tool/https";
-import {dataURLtoFile} from "@/tool/util"
+import {dataURLtoFile,base64toFile} from "@/tool/util"
 import { getCookie } from "@/tool/cookie";
+import 'vue-cropper/dist/index.css'
+import { VueCropper }  from "vue-cropper";
 import { useStore } from "vuex";
 import { Modal,message } from 'ant-design-vue';
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 export default defineComponent({
+	components:{
+        VueCropper,
+    },
     setup() {
         const store = useStore()
         let oldLocationList:any = ref([])
@@ -129,6 +164,7 @@ export default defineComponent({
 		let manager:any = ref(false)
 		let userInfo:any = ref()
 
+		let cropperTime:any = ref()
         return {
             store,
             oldLocationList,
@@ -141,7 +177,9 @@ export default defineComponent({
             pointList,
             isSubmit,
 			manager,
-			userInfo
+			userInfo,
+
+			cropperTime
         }
     },
     data(){
@@ -158,7 +196,31 @@ export default defineComponent({
 			sex:'Male',
 			sexList: [
                
-            ]
+            ],
+			option:{
+				img: '',             //裁剪图片的地址
+				outputSize: 1,       //裁剪生成图片的质量(可选0.1 - 1)
+				outputType: 'png',  //裁剪生成图片的格式（jpeg || png || webp）
+				info: false,          //图片大小信息
+				canScale: true,      //图片是否允许滚轮缩放
+				autoCrop: true,      //是否默认生成截图框
+				autoCropWidth: '0',  //默认生成截图框宽度
+				autoCropHeight: '0', //默认生成截图框高度
+				fixed: true,         //是否开启截图框宽高固定比例
+				fixedBox: false,      //固定截图框大小，不允许改变
+				fixedNumber: [1, 2.125], //截图框的宽高比例
+				full: false,         //false按原比例裁切图片，不失真
+				canMove: true,      //上传图片是否可以移动
+				canMoveBox: true,    //截图框能否拖动
+				original: false,     //上传图片按照原始比例渲染
+				centerBox: false,    //截图框是否被限制在图片里面
+				height: true,        //是否按照设备的dpr 输出等比例图片
+				infoTrue: true,     //true为展示真实输出图片宽高，false展示看到的截图框宽高
+				maxImgSize:'2000',    //限制图片最大宽度和高度
+				enlarge: 7,          //图片根据截图框输出比例倍数
+				mode: 'auto 90%',  //图片默认渲染方式
+				limitMinSize:'100%'
+			},
         }
     }, 
 	mounted(){
@@ -166,29 +228,87 @@ export default defineComponent({
         this.userInfo = JSON.parse(userInfo);
 		this.getSex()
 	},
+	watch: {
+		sex:{
+			handler(newVal:any,oldVal:any){
+				let imgbox:any = this.$refs.imgbox
+				let imgBoxSizeBG = imgbox?.getElementsByClassName('cropper-view-box-BG')?.[0]
+				if(imgBoxSizeBG){
+					if(newVal == 'Male'){
+						imgBoxSizeBG.style.background = `url(./image/maleBG.png) no-repeat 0 0 / 100% 100%`
+					}else{
+						imgBoxSizeBG.style.background = `url(./image/femaleBG.png) no-repeat 0 0 / 100% 100%`
+					}
+				}
+
+			},
+		},
+	},
     methods:{
         formatter(value:number){
             return `${value}%`;
         },
-
         showPlacementModal(data:any){
+			
             this.placementShow = true
             this.printObject = {
                 ...data
             }
+			this.option.img = this.printObject.url
+			
             setTimeout(()=>{
-                let imgbox:any = this.$refs.imgbox
+				let imgbox:any = this.$refs.imgbox
-                let position = imgbox.getBoundingClientRect()
+
-                this.imgBox = {
+				let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
-                    width:imgbox.clientWidth,
+				let imgBoxSizeBG = imgbox.getElementsByClassName('cropper-view-box')[0]
-                    height:imgbox.scrollHeight,
+				let div:any = document.createElement('div');
-                    left : position.left,
+				if(imgbox.getElementsByClassName('cropper-view-box-BG').length >= 1){
-                    top:position.top,
+				}else{
-                    scrollTop:imgbox.scrollTop || 0,
+					div.classList.add('cropper-view-box-BG')
-                }
+					div.style.background = `url(./image/femaleBG.png) no-repeat 0 0 / 100% 100%`
-                this.getDefaultPointList(this.imgBox)
+					div.style.width = '100%'
-            },500)
+					div.style.height = '100%'
+					div.style.position = `absolute`
+					div.style.top = `0`
+					imgBoxSizeBG.appendChild(div)
+				}
+				// imgBoxSize.style.backgroundImage = 'url('+require('@assets/images/library/lemaleBG.png')')'
+
+				let cropper:any = this.$refs.cropper
+				cropper.cropH = cropper.scale*cropper.trueHeight
+				cropper.cropW = cropper.cropH/2.125
+				cropper.cropOffsertX = cropper.getImgAxis().x1
+				cropper.cropOffsertY = cropper.getImgAxis().y1
+				imgBoxSize.addEventListener('mousemove',this.startMove)
+                this.setImageSize()
+				this.getDefaultPointList(this.imgBox)
+            },300)
         },
+		realTime(data:any) {
+			clearTimeout(this.cropperTime)
+			this.cropperTime = setTimeout(()=>{
+				
+				this.setImageSize()
+			},1000)
+			
+        },
+		setImageSize(){
+			let imgbox:any = this.$refs.imgbox
+			let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
+			let position = imgBoxSize.getBoundingClientRect()
+			let position1 = imgbox.getBoundingClientRect()
+			let cropper:any = this.$refs.cropper
+			console.log(position1,position);
+			this.imgBox = {
+				width:cropper.cropW,
+				height:cropper.cropH,
+				left : position1.left,
+				top:position1.top,
+				scrollTop:imgBoxSize.scrollTop || 0,
+				x:cropper.getCropAxis().x1,
+				y:cropper.getCropAxis().y1,
+			}
+		},
 		getSex(){
 			Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
 				if (rv) {
@@ -205,10 +325,14 @@ export default defineComponent({
 				}
 			})
 		},
-
+		//截屏框移动
+		setMove(){
+			
+		},
         //初始化可以使用的点位
         getDefaultPointList(imgBox:any){
             this.isSubmit = false
+			this.locationList=[]
             this.pointList = [
                 {
                     title:'SHOULDER',
@@ -225,6 +349,10 @@ export default defineComponent({
             ]
             if(this.printObject.templateId){//编辑
                 this.isSubmit = true
+				this.option.canScale = false
+				this.option.fixedBox = true
+				this.option.canMove = false
+				this.option.canMoveBox = false
                 for(let ponit of this.pointList){
                     for(let pointItem of ponit.pointList){
                         if(this.printObject[pointItem.type]?.length){
@@ -241,8 +369,12 @@ export default defineComponent({
                     }
                 }
                 this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
-
+            }else{
-            }
+				this.option.canScale = true
+				this.option.fixedBox = false
+				this.option.canMove = true
+				this.option.canMoveBox = true
+			}
             
             this.oldPointList = JSON.parse(JSON.stringify(this.pointList))
         },
@@ -266,7 +398,8 @@ export default defineComponent({
                 return
             }
             let imgbox:any = this.$refs.imgbox
-            let scrollTop = imgbox.scrollTop;
+			let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
+            let scrollTop = imgBoxSize.scrollTop;
             if(this.intObj){
                 this.currentSign.left = event.clientX - this.imgBox.left
                 this.currentSign.top =  event.clientY + scrollTop - this.imgBox.top 
@@ -277,12 +410,14 @@ export default defineComponent({
                 this.intObj.show = false
                 this.intObj = null
             }else{
+				//鼠标移动
                 if(this.startDian){
-                    this.currentSign.left = event.clientX - this.imgBox.left - this.moveOriginal.posX
+                    this.currentSign.left = event.clientX - this.imgBox.left - this.imgBox.x - this.moveOriginal.posX -12
-                    this.currentSign.top =  event.clientY + scrollTop - this.imgBox.top -this.moveOriginal.posY
+                    this.currentSign.top =  event.clientY + scrollTop - this.imgBox.top - this.imgBox.y -this.moveOriginal.posY -12
                     document.addEventListener('mouseup', this.getMouseOver);
                     this.$forceUpdate()
                     this.setBoundarySign()
+					
                 }
             }
         },
@@ -292,24 +427,29 @@ export default defineComponent({
          // 在边界上的签名域处理
          setBoundarySign() {
             let imgbox:any = this.$refs.imgbox
-            let height = imgbox.offsetHeight + imgbox.scrollTop;
+			let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
+			let top = (this.$refs.cropper as any).getCropAxis().y1
+			let left = (this.$refs.cropper as any).getCropAxis().x1
+            let height = imgBoxSize.offsetHeight;
+            // let height = imgBoxSize.offsetHeight + imgBoxSize.scrollTop;
             // 2 为签名域的边框
             let maxPosHeight = height - 24
-            let maxPosWidth = imgbox.clientWidth - 24 //+ this.signBox.paddLeft;
+            let maxPosWidth = imgBoxSize.clientWidth - 24 //+ this.signBox.paddLeft;
-            if (this.currentSign.top <= 0) {
+            if (this.currentSign.top+top <= 0) {
                 this.currentSign.top = 0
-            } else if (this.currentSign.top >= maxPosHeight ) {
+            } else if (this.currentSign.top >= maxPosHeight+top ) {
-                this.currentSign.top = maxPosHeight;
+                this.currentSign.top = maxPosHeight+top;
             }
-            if (this.currentSign.left <= 0) {
+            if (this.currentSign.left+left <= 0) {
                 this.currentSign.left = 0
-            } else if (this.currentSign.left >= maxPosWidth) {
+            } else if (this.currentSign.left >= maxPosWidth+left) {
-                this.currentSign.left = maxPosWidth;
+                this.currentSign.left = maxPosWidth+left;
             }
         },
 
         getMouseDown(event:any,item:any,index:number){
             if(this.isRemoveStatus){
+				//删除
                 for(let itemPoint of this.pointList){
                     for(let point of itemPoint.pointList){
                         if(item.type == point.type){
@@ -322,14 +462,19 @@ export default defineComponent({
             }else{
                 this.currentSign = item
                 // 计算出鼠标在签名域上的偏移
-                this.moveOriginal.posX = event.offsetX
+                // this.moveOriginal.posX = event.offsetX
-                this.moveOriginal.posY = event.offsetY // 1为边框
+                // this.moveOriginal.posY = event.offsetY // 1为边框
+				this.moveOriginal.posX = 0
+                this.moveOriginal.posY = 0 // 1为边框
+
+				console.log(this.moveOriginal);
+				
                 this.startDian = true
             }
             
         },
      
-        getMouseOver(){
+        getMouseOver(){//鼠标抬起
             this.startDian = false
             this.currentSign = {}
             document.removeEventListener('mouseup', this.getMouseOver);
@@ -374,19 +519,37 @@ export default defineComponent({
         },
 
         submitPlacement(){
-            if(this.printObject.templateId){
+			// let cropper:any = this.$refs.cropper,
-                this.printObject.id = this.printObject.libraryId
+            //     that = this
-                this.confrimSubmit()
+				
-            }else{
+            // cropper.getCropData((data:any) => {
-                this.customRequest().then((rv:any)=>{
+            // // 转换为File对象
-                    this.isShowMark = false
+            //     let file = base64toFile(data,this.cropperFileData.name);
-                    this.printObject.id = rv.id
+            //     this.$emit('handleCropperSuccess',{file:file, fileData:this.cropperFileData})
-                    this.confrimSubmit()
+            // })
-                }).catch((res:any)=>{
+			let cropper:any = this.$refs.cropper,
-                    this.isShowMark = false
+                that = this
-                })
+				
-            }
+            cropper.getCropData(async (value:any) => {
-
+            // 转换为File对象
+               
+				if(this.printObject.templateId){
+					this.printObject.id = this.printObject.libraryId
+					this.confrimSubmit()
+				}else{
+					let file:any = base64toFile(value,this.printObject.file.name);
+					// console.log(file,this.printObject,'-=-=--==-');
+					file.uid = this.printObject.file.uid
+					this.printObject.file = file
+					this.customRequest().then((rv:any)=>{
+						this.isShowMark = false
+						this.printObject.id = rv.id
+						this.confrimSubmit()
+					}).catch((res:any)=>{
+						this.isShowMark = false
+					})
+				}
+            })
         },
 
         confrimSubmit(){
@@ -401,6 +564,7 @@ export default defineComponent({
 			if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
 				param.modelType = this.modelType
 			}
+			
             this.isShowMark = true
             Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
                 (rv: any) => {
@@ -469,7 +633,6 @@ export default defineComponent({
 					}
 				});
 			})
-
 		},
         getPrintLocation(){
             let {width , height} = this.imgBox
@@ -773,7 +936,7 @@ export default defineComponent({
                 user-select:none;
                 -moz-user-select:none;
                 position: relative;
-
+				height: 57.6rem;
                 .img_content_block{
                     width: 40.8rem;
                     height: 100%;
@@ -819,7 +982,7 @@ export default defineComponent({
                     -o-user-select:none; /* Opera私有属性 */
                     user-select:none; /* CSS3属性 */
                     cursor: pointer;
-
+					z-index: 22;
                     &.remove_point_click{
                         border-color: transparent;
                         background: #EF3C3C;

src/component/LibraryPage/ModelPlacementMobile.vue

@@ -33,7 +33,7 @@
                     </div>
                 </div>
                 <div class="models_placement_content" @touchmove="startMove($event)">
-                    <div class="plcaement_point_content">
+                    <div class="plcaement_point_content" v-if="userInfo.userId == 88 || userInfo.userId == 83">
                         <div class="placement_point_item" v-for="(point,index) in pointList" :key="index"  >
                             <div class="ponit_title">{{point.title}}</div>
                             <div class="point_list">
@@ -74,6 +74,7 @@
 import { defineComponent,ref,createVNode} from 'vue'
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
+import { getCookie } from "@/tool/cookie";
 import { Modal,message } from 'ant-design-vue';
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 export default defineComponent({
@@ -88,6 +89,8 @@ export default defineComponent({
         let oldPointList:any = ref([]) //备份点
         let pointList:any = ref([])
         let isSubmit:any = ref(false) //判断历史是否有提交过
+		let manager:any = ref(false)
+		let userInfo:any = ref()
         return {
             store,
             oldLocationList,
@@ -98,7 +101,9 @@ export default defineComponent({
             currentSign,
             oldPointList,
             pointList,
-            isSubmit
+            isSubmit,
+			manager,
+			userInfo
         }
     },
     data(){
@@ -111,8 +116,18 @@ export default defineComponent({
             placement_sacle:30,
             perviewUrl:'',//预览的图片地址
             isShowMark:false,
+			modelType:'Library',
+			sex:'Male',
+			sexList: [
+               
+            ]
         }
     }, 
+	mounted(){
+		let userInfo:any = getCookie("userInfo")
+        this.userInfo = JSON.parse(userInfo);
+		this.getSex()
+	},
     methods:{
         formatter(value:number){
             return `${value}%`;
@@ -136,7 +151,22 @@ export default defineComponent({
                 this.getDefaultPointList(this.imgBox)
             },400)
         },
-
+		getSex(){
+			Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
+				if (rv) {
+					let arr:any = []
+					rv.forEach((item:any) => {
+						let obj = {
+							value:item.name,
+							label:item.name,
+						}
+						arr.push(obj)						
+					});
+					this.sex = arr[0].value
+					this.sexList = arr
+				}
+			})
+		},
         //初始化可以使用的点位
         getDefaultPointList(imgBox:any){
             this.isSubmit = false
@@ -324,9 +354,14 @@ export default defineComponent({
             let param = {
                 libraryId:this.printObject.id,
                 templateId:this.printObject.templateId || null,
+				modelType:'Library',
+				checkMd5:1,
                 timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
                 ...this.getPrintLocation()
             }
+			if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
+				param.modelType = this.modelType
+			}
             this.isShowMark = true
             Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
                 (rv: any) => {
@@ -343,25 +378,59 @@ export default defineComponent({
         customRequest(){
             let new_data = {
                 file:this.printObject.file,
+				checkMd5:1,
                 level1Type:'Models',
-				sex:'',
+				sex:this.sex,
 				modelType:'',
                 level2Type:'',
                 timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
             }
             this.isShowMark = true
+			if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
+				new_data.modelType = this.modelType
+				new_data.sex = this.sex
+			}
             return new Promise((resolve,reject)=>{
                 Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
                     (rv: any) => {
-                        resolve(rv)
+                        // resolve(rv)
+						if(!rv.checkMd5){
+							resolve(this.affirmCstomRequest(new_data))
+						}else{
+							resolve(rv)
+						}
                     }
                 ).catch((res)=>{
                     reject(res)
                 });
             })
-            
         },
-
+		affirmCstomRequest(data:any){
+			let _this = this
+			return new Promise((resolve,reject)=>{
+				Modal.confirm({
+					title: 'This picture has been uploaded whether to continue uploading？ ',
+					icon: createVNode(ExclamationCircleOutlined),
+					okText: 'Yes',
+					cancelText: 'No',
+					mask:false,
+					onOk() {
+						data.checkMd5 = 0
+						Https.axiosPost(Https.httpUrls.libraryUpload, data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
+							(rv: any) => {
+								_this.isShowMark = false
+								resolve(rv)
+							}
+						).catch((res)=>{
+							reject(res)
+						});
+					},
+					onCancel(){
+						_this.isShowMark = false
+					}
+				});
+			})
+		},
 
         getPrintLocation(){
             let {width , height} = this.imgBox

src/component/LibraryPage/ModelPlacementNew.vue

@@ -1,699 +0,0 @@
-<template>
-    <div  v-show="placementShow">
-        <a-modal class="models_placement_component" 
-            v-model:visible="placementShow" 
-            :footer="null" 
-            width="80%"
-            :maskClosable="false"
-            :centered="true"
-			:closable="false"
-
-        >
-			<div class="design_closeIcon" @click.stop="closeModal()">
-				<i class="fi fi-rr-cross-small"></i>
-			</div>
-			<div class="design_title_text">
-				<div>Registration</div>
-				<div class="design_title_text_intro">Please change the pure white inside the mannequin for another color to enhance your experience</div>
-			</div>
-            <div class="models_placement_body" >
-                <div class="models_placement_content">
-                    <div class="plcaement_point_content">
-						<div class="palcement_modal_header">
-							<div class="placement_operate_list">
-								<div class="operate_item" v-show="locationList.length == 6" @click="submitPlacement">
-									<div class="icon iconfont icon-baocun1 operate_icon"></div>
-									<div class="operate_item_des">Submit</div>
-								</div>
-								<div class="operate_item" v-show="locationList.length == 6" @click="printPreview">
-									<div class="icon iconfont icon-shengchengyulan operate_icon"></div>
-									<div class="operate_item_des">Preview</div>
-								</div>
-								<div class="operate_item" v-show="perviewUrl" @click="backPreview">
-									<div class="icon iconfont icon-fanhui1 operate_icon"></div>
-									<div class="operate_item_des">Back</div>
-								</div>
-								<div class="operate_item" @click="restoreLocationList">
-									<div class="icon iconfont icon-huifu operate_icon"></div>
-									<div class="operate_item_des">Restore</div>
-								</div>
-							</div>
-						</div>
-                        <div class="placement_point_item" v-for="(point,index) in pointList" :key="index"  >
-                            <div class="ponit_title">{{point.title}}</div>
-                            <div class="point_list">
-                                <div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @mousedown="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="placement_content_operate_list">
-                        <div class="placement_content_operate_item" @click="changeRemoveStatus">
-                            <div class="placement_remove_point_block"></div>
-                            <div class="placement_content_operate_des">Remove Point</div>
-                        </div>
-                    </div>
-                    <div class="img_preview_block"  >
-                        <div class="perview_mark_loading" v-show="isShowMark">
-                            <a-spin size="large" />
-                        </div>
-                        <div class="img_content_block" ref="imgbox" @mousemove="startMove($event)">
-                            <img class="placement_img" :src="perviewUrl || printObject?.url">
-                            <div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)"  @mousemove="startMove($event)">
-                                <div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
-                                <div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
-                            </div>
-                        </div>
-                        
-                    </div>
-                </div>
-            </div>
-        </a-modal>
-    </div>
-    
-</template>
-<script lang="ts">
-import { defineComponent,ref,createVNode} from 'vue'
-import { Https } from "@/tool/https";
-import {dataURLtoFile} from "@/tool/util"
-import { useStore } from "vuex";
-import { Modal,message } from 'ant-design-vue';
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-export default defineComponent({
-    setup() {
-        const store = useStore()
-        let oldLocationList:any = ref([])
-        let locationList:any = ref([])
-        let printObject:any = ref({})
-        let imgBox:any = ref({})
-        let intObj:any = ref(null)
-        let currentSign:any = ref({})
-        let oldPointList:any = ref([]) //备份点
-        let pointList:any = ref([])
-        let isSubmit:any = ref(false) //判断历史是否有提交过
-        return {
-            store,
-            oldLocationList,
-            locationList,
-            printObject,
-            imgBox,
-            intObj,
-            currentSign,
-            oldPointList,
-            pointList,
-            isSubmit
-        }
-    },
-    data(){
-        return{
-            placementShow:false,
-            collectionIndex:0,
-            startDian:false,
-            moveOriginal:{posX: 0, posY: 0},
-            isRemoveStatus:false,
-            placement_sacle:30,
-            perviewUrl:'',//预览的图片地址
-            isShowMark:false,
-        }
-    }, 
-    methods:{
-        formatter(value:number){
-            return `${value}%`;
-        },
-
-        showPlacementModal(data:any){
-            this.placementShow = true
-            this.printObject = {
-                ...data
-            }
-            setTimeout(()=>{
-                let imgbox:any = this.$refs.imgbox
-                let position = imgbox.getBoundingClientRect()
-                this.imgBox = {
-                    width:imgbox.clientWidth,
-                    height:imgbox.scrollHeight,
-                    left : position.left,
-                    top:position.top,
-                    scrollTop:imgbox.scrollTop || 0,
-                }
-                this.getDefaultPointList(this.imgBox)
-            },500)
-        },
-
-        //初始化可以使用的点位
-        getDefaultPointList(imgBox:any){
-            this.isSubmit = false
-            this.pointList = [
-                {
-                    title:'SHOULDER',
-                    pointList:[{type:'shoulderLeft',color:'#6E70FF',show:true,field:'shoulder'},{type:'shoulderRight',color:'#6E70FF',show:true,field:'shoulder'}]
-                },
-                {
-                    title:'WAISTBAND',
-                    pointList:[{type:'waistbandLeft',color:'#6FCEFF',show:true,field:'waistband'},{type:'waistbandRight',color:'#6FCEFF',show:true,field:'waistband'}]
-                },
-                {
-                    title:'HAND',
-                    pointList:[{type:'handLeft',color:'#CCFF7B',show:true,field:'hand'},{type:'handRight',color:'#CCFF7B',show:true,field:'hand'}]
-                },
-            ]
-            if(this.printObject.templateId){//编辑
-                this.isSubmit = true
-                for(let ponit of this.pointList){
-                    for(let pointItem of ponit.pointList){
-                        if(this.printObject[pointItem.type]?.length){
-                            pointItem.show = false
-                            let data = {
-                                left:this.printObject[pointItem.type][0] * imgBox.width - 12,
-                                top:this.printObject[pointItem.type][1] * imgBox.height - 12,
-                                color:pointItem.color,
-                                type:pointItem.type,
-                                field:pointItem.field,
-                            }
-                            this.locationList.push(data)
-                        }
-                    }
-                }
-                this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
-
-            }
-            
-            this.oldPointList = JSON.parse(JSON.stringify(this.pointList))
-        },
-
-
-        AddDian(point:any){
-            if(!point.show){
-                return
-            }
-            this.startDian = true
-            this.isRemoveStatus = false
-            this.intObj = point
-        },
-
-        changeRemoveStatus(){
-            this.isRemoveStatus = true
-        },
-
-        startMove(event:any){
-            if(this.isRemoveStatus){
-                return
-            }
-            let imgbox:any = this.$refs.imgbox
-            let scrollTop = imgbox.scrollTop;
-            if(this.intObj){
-                this.currentSign.left = event.clientX - this.imgBox.left
-                this.currentSign.top =  event.clientY + scrollTop - this.imgBox.top 
-                this.currentSign.color = this.intObj.color
-                this.currentSign.type= this.intObj.type
-                this.currentSign.field = this.intObj.field
-                this.locationList.push(this.currentSign)
-                this.intObj.show = false
-                this.intObj = null
-            }else{
-                if(this.startDian){
-                    this.currentSign.left = event.clientX - this.imgBox.left - this.moveOriginal.posX
-                    this.currentSign.top =  event.clientY + scrollTop - this.imgBox.top -this.moveOriginal.posY
-                    document.addEventListener('mouseup', this.getMouseOver);
-                    this.$forceUpdate()
-                    this.setBoundarySign()
-                }
-            }
-        },
-
-      
-
-         // 在边界上的签名域处理
-         setBoundarySign() {
-            let imgbox:any = this.$refs.imgbox
-            let height = imgbox.offsetHeight + imgbox.scrollTop;
-            // 2 为签名域的边框
-            let maxPosHeight = height - 24
-            let maxPosWidth = imgbox.clientWidth - 24 //+ this.signBox.paddLeft;
-            if (this.currentSign.top <= 0) {
-                this.currentSign.top = 0
-            } else if (this.currentSign.top >= maxPosHeight ) {
-                this.currentSign.top = maxPosHeight;
-            }
-            if (this.currentSign.left <= 0) {
-                this.currentSign.left = 0
-            } else if (this.currentSign.left >= maxPosWidth) {
-                this.currentSign.left = maxPosWidth;
-            }
-        },
-
-        getMouseDown(event:any,item:any,index:number){
-            if(this.isRemoveStatus){
-                for(let itemPoint of this.pointList){
-                    for(let point of itemPoint.pointList){
-                        if(item.type == point.type){
-                            point.show = true
-                            break
-                        }
-                    }
-                }
-                this.locationList.splice(index,1)
-            }else{
-                this.currentSign = item
-                // 计算出鼠标在签名域上的偏移
-                this.moveOriginal.posX = event.offsetX
-                this.moveOriginal.posY = event.offsetY // 1为边框
-                this.startDian = true
-            }
-            
-        },
-     
-        getMouseOver(){
-            this.startDian = false
-            this.currentSign = {}
-            document.removeEventListener('mouseup', this.getMouseOver);
-        },
-
-        closeModal(){
-            let _this = this
-            if(!this.isSubmit){
-                Modal.confirm({
-                    title: "You haven't marked the image yet, and the model will not be uploaded. Are you sure you want to close it?",
-                    icon: createVNode(ExclamationCircleOutlined),
-                    okText: 'Ok',
-					mask:false,
-                    cancelText: 'Cancel',
-                    // centered:true,
-                    onOk() {
-                        // _this.getDefaultPointList(_this.imgBox)
-                        _this.oldLocationList = []
-                        _this.locationList = []
-                        _this.intObj = null
-                        _this.currentSign = {}
-                        _this.isRemoveStatus = false
-                        _this.placementShow = false
-                        _this.perviewUrl = ''
-                    }
-                });
-            }else{
-                // _this.getDefaultPointList(_this.imgBox)
-                _this.oldLocationList = []
-                _this.locationList = []
-                _this.intObj = null
-                _this.currentSign = {}
-                _this.isRemoveStatus = false
-                _this.placementShow = false
-                _this.perviewUrl = ''
-            }
-        },
-
-        restoreLocationList(){
-            this.pointList = JSON.parse(JSON.stringify(this.oldPointList))
-            this.locationList = JSON.parse(JSON.stringify(this.oldLocationList))
-        },
-
-        submitPlacement(){
-            if(this.printObject.templateId){
-                this.printObject.id = this.printObject.libraryId
-                this.confrimSubmit()
-            }else{
-                this.customRequest().then((rv:any)=>{
-                    this.isShowMark = false
-                    this.printObject.id = rv.id
-                    this.confrimSubmit()
-                }).catch((res:any)=>{
-                    this.isShowMark = false
-                })
-            }
-
-        },
-
-        confrimSubmit(){
-            let param = {
-                libraryId:this.printObject.id,
-                templateId:this.printObject.templateId || null,
-                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-                ...this.getPrintLocation()
-            }
-            this.isShowMark = true
-            Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
-                (rv: any) => {
-                    this.isShowMark = false
-                    this.isSubmit = true
-                    this.$emit('submitModelPlacement')
-                    this.closeModal()
-                }
-            ).catch(res=>{
-                this.isShowMark = false
-            });
-        },
-
-        customRequest(){
-            let new_data = {
-                file:this.printObject.file,
-                level1Type:'Models',
-                level2Type:'',
-				sex:'',
-				modelType:'',
-                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-            }
-            this.isShowMark = true
-            return new Promise((resolve,reject)=>{
-                Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
-                    (rv: any) => {
-                        resolve(rv)
-                    }
-                ).catch((res)=>{
-                    reject(res)
-                });
-            })
-            
-        },
-
-        getPrintLocation(){
-            let {width , height} = this.imgBox
-            let locationData:any = {}
-            let returnData:any = {}
-            let newLocationList = JSON.parse(JSON.stringify(this.locationList))
-            //进行字段归类
-            for(let item of newLocationList){
-                locationData[item.field] = locationData[item.field] || []
-                locationData[item.field].push(item)
-            }
-            for(let key in locationData){
-                locationData[key].sort(this.sortBy("left")) //通过left字段进行排序
-                locationData[key].forEach((v:any,index:any) => {
-                    v.type = !index ?v.field + 'Left' :v.field +'Right' //第一个是left，第二个是right
-                    v.left = ((v.left + 12) / width).toFixed(4)
-                    v.top = ((v.top + 12) / height).toFixed(4)
-                    returnData[v.type] = [v.left, v.top]
-                });
-            }
-            return returnData
-        },
-
-        sortBy(field:any) {
-            return function(a:any,b:any) {
-                return a[field] - b[field];
-            }
-        },
-
-        printPreview(){
-            let file = this.printObject.templateId ? null :this.printObject.file,
-                models = {
-                    libraryId:this.printObject.libraryId || null,
-                    templateId:this.printObject.templateId || null,
-                    timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-                    ...this.getPrintLocation()
-                }
-            let formData = new FormData();
-                formData.append('file', file);
-                formData.append("models", new Blob([JSON.stringify(models)], {type: "application/json"}));
-            if(this.isShowMark){
-                return
-            }
-            this.isShowMark = true
-            Https.axiosPost(Https.httpUrls.libraryModelsDot, formData,{headers:{'Content-Type': 'multipart/form-data'}}).then(
-                (rv: any) => {
-                    this.perviewUrl = rv
-                    this.isShowMark = false
-                }
-            ).catch(res=>{
-                this.isShowMark = false
-            });
-        },
-
-        backPreview(){
-            this.perviewUrl = ''
-        }
-    }
-})
-</script>
-<style lang="less">
-.models_placement_component{
-    .ant-modal-close{
-        width: 3.6rem;
-        height: 3.6rem;
-        position: absolute;
-        top: -1.8rem;
-        right: -1.8rem;
-    }
-
-    .ant-modal-header{
-        display: none;
-    }
-
-    .ant-modal-body{
-		display: flex;
-		flex-direction: column;
-    }
-
-    .close_icon{
-        width: 3.6rem;
-        height: 3.6rem;
-        background: #000000;
-        border-radius: 50%;
-        line-height: 3.6rem;
-        text-align: center;
-
-        .icon-guanbi{
-            font-size: 2rem;
-            color: #ffffff;
-        }
-    }
-
-    .models_placement_body{
-        width: 100%;
-		flex: 1;
-        .palcement_modal_header{
-            position: relative;
-            height: 6.6rem;
-            width: 100%;
-			margin-bottom: 3rem;
-            .placement_operate_list{
-                display: flex;
-                align-items: center;
-                margin:0 auto;
-                position: absolute;
-                left: 50%;
-                transform: translateX(-50%);
-                height: 100%;
-
-                .operate_item{
-                    margin-right: 4rem;
-                    text-align: center;
-                    cursor: pointer;
-
-                    .operate_icon{
-                        font-size: 2.1rem;
-                        color: #64686D;
-                    }
-
-                    .operate_item_des{
-                        height: 1.2rem;
-                        font-size: 1.3rem;
-                        color: #64686D;
-                    }
-                    &:last-child{
-                        margin-right: 0;
-                    }
-                }
-            }
-        }
-
-        .models_placement_content{
-            position: relative;
-            // height: calc(100% - 6.6rem);
-			height: 100%;
-            width: 100%;
-            .plcaement_point_content{
-				border: 2px solid #000;
-				border-radius: 1rem;
-                width: 22rem;
-                background: #EBECF4;
-                position: absolute;
-                left: 0;
-				top: 50%;
-				transform: translateY(-50%);
-				padding: 0 1.4rem;
-                .placement_point_item{
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    margin-bottom: 3rem;
-
-                    .ponit_title{
-                        font-size: 1.3rem;
-                        color: #64686D;
-                        user-select:none; /* CSS3属性 */
-                    }
-
-                    .point_list{
-                        display: flex;
-                        align-items: center;
-                        width: 6.2rem;
-                        justify-content: space-between;
-
-                        .point_item{
-                            width: 2.4rem;
-                            height: 2.4rem;
-                            border-radius: 50%;
-                            border:solid 0.2rem transparent;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            cursor: pointer;
-                            -moz-user-select:none; /* Firefox私有属性 */
-                            -webkit-user-select:none; /* WebKit内核私有属性 */
-                            -ms-user-select:none; /* IE私有属性(IE10及以后) */
-                            -khtml-user-select:none; /* KHTML内核私有属性 */
-                            -o-user-select:none; /* Opera私有属性 */
-                            user-select:none; /* CSS3属性 */
-
-
-                            .point_block{
-                                width: 0.4rem;
-                                height: 0.4rem;
-                                border-radius: 50%;
-                            }
-                        }
-                    }
-                }
-            }
-
-            .placement_content_operate_list{
-                width: 10.6rem;
-                background: #EBECF4;
-                position: absolute;
-                right: 0;
-                top:18.4rem;
-
-                .placement_content_operate_item{
-                    padding: 1.5rem 0;
-                    text-align: center;
-                    cursor: pointer;
-
-
-                    .placement_content_operate_des{
-                        width: 100%;
-                        font-size: 1.3rem;
-                        color: #64686D;
-                        -moz-user-select:none;
-                        user-select:none
-                    }
-
-                    .print_scale_value{
-                        height: 1.1rem;
-                        font-size: 1.2rem;
-                        text-align: center;
-                        margin-bottom: 0.3rem;
-                        color: #64686D;
-                    }
-
-                    .ant-tooltip-placement-top{
-                        top: -37px !important;
-                    }
-
-                    .ant-slider-track{
-                        background: #343579;
-                    }
-                    .ant-slider-handle{
-                        border-color: #343579;
-                    }
-
-                    .placement_remove_point_block{
-                        width: 2.4rem;
-                        height: 2.4rem;
-                        border: 2px solid #000000;
-                        border-radius: 50%;
-                        margin: 0 auto 0.4rem;
-                    }
-                }
-            }
-
-            .placement_tip_content{
-                position: absolute;
-                right: 2rem;
-                bottom: 2rem;
-                width: 30rem;
-                font-size: 1.3rem;
-                color: #64686D;
-            }
-
-            .img_preview_block{
-                width: 40.8rem;
-                background: #ffffff;
-                margin: 0 auto;
-                position: relative;
-                user-select:none;
-                -moz-user-select:none;
-                position: relative;
-
-                .img_content_block{
-                    width: 40.8rem;
-                    height: 100%;
-                    max-height: 63.2rem;
-                    overflow-y: auto;
-                    -ms-overflow-style: none;
-                    overflow: -moz-scrollbars-none;
-                    position: relative;
-
-                    &::-webkit-scrollbar { width: 0 !important }
-                }
-
-                .perview_mark_loading{
-                    position: absolute;
-                    left: 0;
-                    height: 0;
-                    width: 100%;
-                    height: 100%;
-                    background: rgba(0, 0, 0, 0.2);
-                    z-index: 9;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-
-                }
-
-                .placement_img{
-                    width: 100%;
-                    user-select:none;
-                    -moz-user-select:none;
-                }
-
-                .ponit_click{
-                    width: 24px;
-                    height: 24px;
-                    position: absolute;
-                    border: 2px solid transparent;
-                    border-radius: 50%;
-                    -moz-user-select:none; /* Firefox私有属性 */
-                    -webkit-user-select:none; /* WebKit内核私有属性 */
-                    -ms-user-select:none; /* IE私有属性(IE10及以后) */
-                    -khtml-user-select:none; /* KHTML内核私有属性 */
-                    -o-user-select:none; /* Opera私有属性 */
-                    user-select:none; /* CSS3属性 */
-                    cursor: pointer;
-
-                    &.remove_point_click{
-                        border-color: transparent;
-                        background: #EF3C3C;
-                    }
-
-                    .placement_add_point_content{
-                        width: 4px;
-                        height: 4px;
-                        border-radius: 50%;
-                        background: #6E70FF;
-                        position: absolute;
-                        left: 50%;
-                        top: 50%;
-                        transform: translate(-50%, -50%);
-                    }
-
-                    .icon-guanbi{
-                        font-size: 20px;
-                        line-height: 20px;
-                        color:#ffffff;
-                    }
-                }
-            }
-        }
-    }
-}
-
-</style>

src/tool/moodb.ts

@@ -1,7 +1,7 @@
 export default {
 	moodb_ : [
 		[['wh4']],
-		[['wh4','wh4']],
+		[['wh4','wh4'],['wh8','wh8']],
 		[['wh4','w1h2','w1h2'],['w1h2','w1h2','wh4'],['w2h1','w2h1','wh4'],['wh4','w2h1','w2h1']],
 		[['wh1','wh1','w1h2','wh4'],['w1h2','wh1','wh1','wh4'],['wh4','wh1','wh1','w1h2'],['w1h2','w1h2','w1h2','w1h2']],
 		[['wh1','wh1','wh1','wh1','wh4'],['wh1','wh1','wh4','wh1','wh1'],['wh4','wh1','wh1','wh1','wh1'],['w1h2','w1h2','w1h2','wh1','wh1'],['wh1','wh1','w1h2','w1h2','w1h2'],['w1h2','w1h2','wh1','wh1','w1h2'],['w1h2','wh1','wh1','w1h2','w1h2']],

src/views/HomeView.vue

@@ -1192,10 +1192,11 @@ export default defineComponent({
 									align-items: center;
 								}
 								.content_img_block {
-									width: 20.1rem;
+									// width: 20.1rem;
+									width: auto;
 									height: 37rem;
 									// height: 29.5rem;
-									margin-right: 3rem;
+									margin-right: 2rem;
 									// margin-bottom: 1rem;
 									display: inline-block;
 									position: relative;

src/views/LibraryPage.vue

@@ -173,10 +173,17 @@
 									</div>
 									
 									<div class="input_box" :class="{active:inputShow}">
-										<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{active:checkbox[0].type}" :readonly="checkbox[0].type" placeholder="Promopt input" v-model="captionGeneration">
+										<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{active:checkbox[0].type}" :readonly="checkbox[0].type" placeholder="Prompt input" v-model="captionGeneration">
 										<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
 										<span>The entered content exceeds the maximum length.</span>
 									</div>
+									<div v-show="selectCode == 'Printboard'" class="printModel">
+										<div @click.stop="PrintModel">{{ printModel.name }}</div>
+										<ul v-show="printModel.optype">
+											<li class="printModel_item" @click="setprintModel(1)">Model1</li>
+											<li class="printModel_item" @click="setprintModel(2)">Model2</li>
+										</ul>
+									</div>
 									<div class="upload_item">
 										<div
 											class="upload_file_item"
@@ -197,6 +204,7 @@
 												</div>
 											</div>
 										</div>
+										
 										<div
 											class="upload_component upload_file_item"
 											v-show="selectGenerateList.length <= 3"
@@ -374,6 +382,11 @@ export default defineComponent({
 		let inputTime = ref()
 		let generateList:any = ref([])
 		let selectGenerateList:any = ref([])
+		let printModel = ref({
+			num:1,
+			optype:false,
+			name:'model1'
+		})
         return {
             menuList,
             selectImgList,
@@ -403,6 +416,7 @@ export default defineComponent({
 			inputTime,
 			generateList,
 			selectGenerateList,
+			printModel
         }
     },
 	data(this_) {
@@ -833,6 +847,23 @@ export default defineComponent({
 				item.checked = true
 			}
 		},
+		PrintModel(){
+			if(!this.printModel.optype){
+				document.addEventListener('click',this.removePrintModel)
+			}
+			this.printModel.optype = !this.printModel.optype
+		},
+		removePrintModel(){
+			this.printModel.optype = false
+			document.removeEventListener('click',this.removePrintModel)
+		},
+		setprintModel(num:any){
+			this.printModel = {
+				num : num,
+				optype:false,
+				name:'model'+num
+			}
+		},
 		getgenerate(){
 			let generateType = this.checkbox.filter((v:any)=>v.type)[0].name
 			let generageImg = this.selectGenerateList.filter((v:any)=>v.checked)[0]
@@ -844,7 +875,7 @@ export default defineComponent({
 				level2Type:this.selectCode == 'Sketchboard'?this.designType:'',
 				text:this.captionGeneration,
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-				version:2,//为1就是Print
+				version:this.selectCode == 'Printboard'?this.printModel.num:0,//为1就是Print
 				gender:this.selectCode == 'Sketchboard'?this.sex:'',
 			}
 			if(generateType == 'image'||generateType == 'text-image'){
@@ -1142,7 +1173,7 @@ export default defineComponent({
 								}
 								.content_body_header_right{
 									display: flex;
-									width: 40rem;
+									width: 43rem;
 								}
                                 .check_all_block{
                                     display: flex;
@@ -1198,9 +1229,40 @@ export default defineComponent({
 											}
 										}
 										.generage_btn{
-											margin-left: 3rem;
+											margin: 0 3rem;
 										}
 									}
+									.printModel{
+											font-size: 1.4rem;
+											font-weight: 500;
+											>div{
+												width: 7rem;
+												display: flex;
+												justify-content: center;
+												border-radius: 1rem;
+												margin: 0;
+												border: 2px solid;
+												cursor: pointer;
+											
+											}
+											ul{
+												position: absolute;
+												width: 7rem;
+												text-align: center;
+												margin-top: .3rem;
+												border-radius: 1rem;
+												overflow: hidden;
+												z-index: 3;
+												li{
+													background: #c5c4c8;
+													line-height: 2;
+													cursor: pointer;
+													&.printModel_item:hover{
+														background: rgba(0,0,0,.4);
+													}
+												}
+											}
+										}
 									.upload_item{
 										margin-left: 4rem;
 										.upload_file_item{
@@ -1212,6 +1274,7 @@ export default defineComponent({
 										.upload_component{
 											margin: 0;
 										}
+										
 									}
 									
 								}