From d9868d5cf0503b1192801a9b2c80969adbb4d805 Mon Sep 17 00:00:00 2001 From: WangXiaoDong <1627315083@qq.com> Date: Mon, 25 Sep 2023 10:09:00 +0800 Subject: [PATCH] commit --- src/assets/style/style.css | 14 +- src/assets/style/style.less | 31 +- src/component/Detail/DesignDetail.vue | 281 +++++++++-- src/component/Detail/DesignDetailAlter.vue | 80 +++- src/component/Detail/DesignDetailEnd.vue | 81 ++-- src/component/Detail/DesignPrintOperation.vue | 246 +++++++--- src/component/Detail/ElementReplace.vue | 4 +- src/component/Detail/habit.vue | 448 ++++++++++-------- src/component/Detail/setDesignItem.vue | 2 +- src/component/HomePage/ColorboardUpload.vue | 58 ++- src/component/HomePage/Generate.vue | 149 ++++-- src/component/HomePage/Header.vue | 60 ++- .../HomePage/MarketingSketchUpload.vue | 6 +- src/component/HomePage/Material.vue | 100 ++-- src/component/HomePage/MoodboardUpload.vue | 22 +- .../HomePage/NewCollectionReview.vue | 36 +- src/component/HomePage/PrintboardUpload.vue | 112 +++-- src/component/HomePage/RobotAssist.vue | 58 +-- src/component/HomePage/SketchboardUpload.vue | 115 +++-- src/component/HomePage/Upload.vue | 4 +- src/component/HomePage/collectionModal.vue | 31 +- src/component/HomePage/layout.vue | 4 +- src/component/LibraryPage/ModelsModal.vue | 386 --------------- src/store/Detail/designDetail.ts | 8 +- src/store/index.ts | 4 +- src/store/uploadFile/uploadFile.ts | 36 +- src/store/userHabit/userHabit.ts | 2 - src/store/workspace/workspace.ts | 6 +- src/tool/GO.ts | 51 ++ src/tool/color.js | 37 ++ src/tool/flexible.js | 6 +- src/tool/https.js | 38 +- src/views/HistoryPage.vue | 2 +- src/views/HomeView.vue | 206 +++++--- src/views/LibraryPage.vue | 6 +- src/views/LoginPage.vue | 20 +- vue.config.js | 14 + 37 files changed, 1618 insertions(+), 1146 deletions(-) delete mode 100644 src/component/LibraryPage/ModelsModal.vue create mode 100644 src/tool/color.js diff --git a/src/assets/style/style.css b/src/assets/style/style.css index 27687603..06883489 100644 --- a/src/assets/style/style.css +++ b/src/assets/style/style.css @@ -15,7 +15,6 @@ li { padding: 0; } .page_content { - width: 1440px; max-width: 100%; height: 100%; margin: 0 auto; @@ -175,6 +174,19 @@ 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 { + color: #39215b; + border-color: #39215b; +} +.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 { + background: #39215b; + border-color: #39215b; +} +.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 { + color: #fff; + border-color: #543087; + background: #543087; +} .pin_block { text-align: center; margin-top: 0.5rem; diff --git a/src/assets/style/style.less b/src/assets/style/style.less index b4761c0f..62ae25b9 100644 --- a/src/assets/style/style.less +++ b/src/assets/style/style.less @@ -4,6 +4,7 @@ html,body,#app{ padding: 0; height: 100%; font-family: 'Roboto', sans-serif; + // --antd-wave-shadow-color: #341e57; } input{ outline:none @@ -13,7 +14,7 @@ ul,li{ padding: 0; } .page_content{ - width: 1440px; + // width: 1440px; max-width: 100%; height: 100%; margin: 0 auto; @@ -202,6 +203,34 @@ ul,li{ } } } +//提示框样式 +.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{ + color: #39215b; + border-color: #39215b; + } + .ant-btn-primary{ + background: #39215b; + border-color: #39215b; + } + .ant-btn-primary:hover{ + color: #fff; + border-color: #543087; + background: #543087; + } + } + } + } + } + } + } +} .pin_block{ text-align: center; margin-top:.5rem; diff --git a/src/component/Detail/DesignDetail.vue b/src/component/Detail/DesignDetail.vue index 64148c4f..0d119d26 100644 --- a/src/component/Detail/DesignDetail.vue +++ b/src/component/Detail/DesignDetail.vue @@ -4,7 +4,7 @@ -
-
- + +
+
+
+ + +
+ +
+
-
- +
@@ -49,18 +59,18 @@
Current Apparel
- +
- +
Current Print
- +
-
- +
+
@@ -68,19 +78,19 @@
Current Print
- +
-
+
-
+
-
{{currentItem.color?.tcx}}
-
{{currentItem.color?.name}}
+
{{designItemDetail?.clothes?.[currentIndex]?.color?.tcx}}
+
{{designItemDetail?.clothes?.[currentIndex]?.color?.name}}
-
+
Submit
@@ -130,7 +140,10 @@ export default defineComponent({ }, setup() { const store = useStore(); - let designItemDetail :any = computed(()=>{ + // let designItemDetail :any = computed(()=>{ + // return store.state.DesignDetailModule.designItemDetail + // }) + let designItemDetail :any = computed(()=>{ return store.state.DesignDetailModule.designItemDetail }) let parentData:any = ref({ @@ -144,35 +157,50 @@ export default defineComponent({ left:200+'px', top:100+'px', }) - let currentItem:any = ref({})//点击上衣或者下衣 + let currentIndex:any = ref(0) let current:any = ref({})//点击上衣或者下衣 provide('current',current) + let frontBack:any = ref({}) return{ designItemDetail, store, parentData, others, - currentItem, + currentIndex, current, + frontBack, } }, data(){ return{ loadingShow:false,//加载中 - designDetailShow:true, + designDetailShow:false, designShowPrview:1, //展示图片预览步骤 generateHighDesignImg:'',//点击generate按钮生成的高级设计图 imgDesignImg:true, designOrder:false, } }, + watch:{ + designItemDetail:{ + handler: function(newval) { + let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail)) + this.current = JSON.parse(JSON.stringify(designItemDetail.clothes[this.currentIndex])) + this.setImgSize() + } + }, + currentIndex:{ + handler: function(newval) { + } + }, + }, mounted(){ - let url = Https.httpUrls.getDesignDetail + `?designItemId=33130&designPythonOutfitId=32929` + let url = Https.httpUrls.getDesignDetail + `?designItemId=33683&designPythonOutfitId=33445` this.loadingShow = true Https.axiosGet(url).then( - (rv: any) => { + async (rv: any) => { this.store.commit('setDesignItemDetail',rv) - console.log(rv); + this.setImgSize() this.generateHighDesignImg = rv.highDesignUrl this.designShowPrview = 1 this.designDetailShow = true @@ -194,7 +222,6 @@ export default defineComponent({ if(this.designShowPrview == 1){ this.designDetailShow = false this.designOrder = false - this.currentItem = {} let DesignDetailAlter:any = this.$refs.DesignDetailAlter DesignDetailAlter.terminate() @@ -204,27 +231,148 @@ export default defineComponent({ }, showDesignDetailModal(data:any){ - let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}` + + let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}` this.parentData = data this.loadingShow = true Https.axiosGet(url).then( (rv: any) => { - this.store.commit('setDesignItemDetail',rv) + this.store.commit('setDesignItemDetail',rv) + this.setImgSize() this.generateHighDesignImg = rv.highDesignUrl this.designShowPrview = 1 this.designDetailShow = true this.loadingShow = false + } ).catch(rv=>{ this.loadingShow = false }) }, - + async setImgSize(){ + let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail)) + let front:any = [] + let back:any = [] + let body:any + + designItemDetail.others.forEach((item:any) => { + if(item.type == 'Body'){ + body = item + } + }); + + let ratio:any = await this.setPostition(body.layersObject[0].imageUrl) + designItemDetail.clothes.forEach((v:any,index:number)=>{ + let zIndex = 3 + for (let i = v.layersObject.length-1; i >= 0; i--) { + v.layersObject[i].style = { + top:v.layersObject[i].position?.[0]*ratio+'px', + left:v.layersObject[i].position?.[1]*ratio+'px', + width:v.layersObject[i].imageSize?.[0]*ratio+'px', + height:v.layersObject[i].imageSize?.[1]*ratio+'px', + zIndex:zIndex-=1 + } + + if(v.layersObject[i].imageCategory.indexOf("back") == -1){ + front[index] = v.layersObject[i] + }else{ + back[index] = v.layersObject[i] + } + } + + // v.layersObject.forEach((item:any)=>{ + // item.style = { + // top:item.position?.[0]*ratio+'px', + // left:item.position?.[1]*ratio+'px', + // width:item.imageSize?.[0]*ratio+'px', + // height:item.imageSize?.[1]*ratio+'px', + // zIndex:zIndex+=1 + // } + // console.log(zIndex); + // if(item.imageCategory == 'blouse_back'){ + // back[index] = item + // }else{ + // front[index] = item + // } + // }) + }) + + + this.frontBack = { + front:front, + back:back, + body:body, + } + }, + submit(){ + let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail)) + let clothes:any = [] + designItemDetail.clothes.forEach((item:any) => { + let clothesItem = { + // color: `${item.color.r} ${item.color.g} ${item.color.b}`, + id:item.id, + path:item.path, + printObject:{ + ifSingle:item.printObject.ifSingle, + path:item.printObject.path?item.printObject.path :'', + prints:item.printObject.prints?item.printObject.prints:[] + }, + type:item.type, + } + clothes.push(clothesItem) + }); + let data = { + designItemId:designItemDetail.designItemId, + // designItemId:designItemDetail.designItemId, + designSingleItemDTOList:clothes, + isPreview:false, + timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, + } + this.loadingShow = true + Https.axiosPost(Https.httpUrls.designSingle, data).then( + (rv: any) => { + this.loadingShow = false + this.closeModal() + let designCollectionList = this.store.state.HomeStoreModule.designCollectionList + designCollectionList.forEach((item:any) => { + + if(item.designItemId == rv.designItemId){ + item.designOutfitUrl = rv.designItemUrl + } + }); + this.store.commit('setDesignCollectionList',designCollectionList) + } + ).catch(res=>{ + this.loadingShow = false + }); + + }, + //按比设置单件衣服宽高位置 + async setPostition(url:any){ + let img:any = await loadImage(url) + let modal_body = document.getElementsByClassName('detail_modal_body')[0] + const num = modal_body?.offsetWidth / img.width; + function loadImage(url:any) { + return new Promise((resolve, reject) => { + + const img = new Image(); + img.onload = () => { + resolve(img) + }; + img.onerror = reject; + img.src = url; + }); + } + return num + }, //切换上一张或下一张图的详情 changeDesignItem(type:string){ let {design,index,collectionList} = this.parentData let newDesign = {} let newIndex = 0 + this.designOrder = false + let DesignDetailAlter:any = this.$refs.DesignDetailAlter + DesignDetailAlter.terminate() if(type === 'last'){ if(index>0){ newIndex = this.parentData.index - 1 @@ -250,11 +398,8 @@ export default defineComponent({ //显示图片详情 showDesignImgDetail(num:any){ let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail)) - console.log(designItemDetail); - this.designShowPrview = num let setDesignItem:any = this.$refs.setDesignItem - console.log(setDesignItem); if(this.designShowPrview == 3){ setDesignItem.init() @@ -278,21 +423,32 @@ export default defineComponent({ //元素替换 clothesDetail(clothes:any, index:number){ - if(this.currentItem?.id == clothes.id){ - return - } + let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail)) + this.currentIndex = index this.designOrder = true - this.current = JSON.parse(JSON.stringify(clothes)) - this.currentItem = clothes + this.current = designItemDetail.clothes[this.currentIndex] + let data = { + designItemId:designItemDetail.designItemId, + // designItemId:designItemDetail.designItemId, + designSingleItemDTOList:[ + { + color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`, + id:this.current.id, + path:this.current.path?this.current.path:'', + printObject:{ + ifSingle:this.current.printObject.ifSingle, + path:this.current.printObject.path?this.current.printObject.path :'', + prints:[], + }, + type:this.current.type, + } + ], + isPreview:true, + timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, + } + this.store.commit('setDesignPreviewData',data) let DesignDetailAlter:any = this.$refs.DesignDetailAlter DesignDetailAlter.changePlace() - - // let elementReplace:any = this.$refs.ElementReplace - // let data ={ - // clothes:clothes, - // index:index, - // } - // elementReplace.showelementReplaceModal(data) }, //重新设计 redesignItem(){ @@ -409,11 +565,37 @@ export default defineComponent({ position: relative; flex-direction: column; - >div{ - height: 50%; - .clothes_item_img_block{ - display: flex; + // height: 50%; + .detail_modal_body{ + position: relative; + max-width: 245px; + + .detail_modal_item_front:last-child{ + z-index: 1 !important; } + >img{ + width: 100%; + } + .detail_modal_model{ + position: relative; + z-index: 1; + } + .detail_modal_item_front,.detail_modal_item_back{ + cursor: pointer; + position: absolute; + img{ + width: 100%; + } + } + .detail_modal_item_back{ + + } + .detail_modal_item_front{ + + } + } + .clothes_item_img_block{ + display: flex; } .detial_img{ max-width: 100%; @@ -453,7 +635,7 @@ export default defineComponent({ .clothes_detail_item{ .centent_div{ display: flex; - justify-content: space-between; + justify-content: center; } .centent{ cursor: pointer; @@ -478,6 +660,9 @@ export default defineComponent({ i{ font-size: 1.8rem; display: block; + &.fi-rr-edit{ + cursor: pointer; + } } } img{ diff --git a/src/component/Detail/DesignDetailAlter.vue b/src/component/Detail/DesignDetailAlter.vue index aa7accd0..1ae545ef 100644 --- a/src/component/Detail/DesignDetailAlter.vue +++ b/src/component/Detail/DesignDetailAlter.vue @@ -214,6 +214,7 @@ import { defineComponent,computed,ref, h ,nextTick ,inject,provide } from 'vue' import Draggable from 'vuedraggable' import { Https } from "@/tool/https"; +import GO from "@/tool/GO"; import { useStore } from "vuex"; import { LoadingOutlined } from '@ant-design/icons-vue'; import { message,Upload} from 'ant-design-vue'; @@ -415,7 +416,6 @@ export default defineComponent({ }, hex:this.rgbaToHex([arr.r,arr.g,arr.b,arr.a?arr.a:1]) } - console.log(this.selectColor); this.uploadList = [] if (num == 1) { @@ -447,12 +447,11 @@ export default defineComponent({ file.resData = res.data; file.designType = res.data.designType file.category = this.current; - console.log(file); let fileList = this.uploadList.filter( (v) => v.status === "done" ); if (this.uploadList.length >= 8) { - message.error("You can select up to 8 images"); + message.warning("You can select up to 8 images"); } else { // this.store.commit("setSketchboardFile", fileList); this.uploadList = fileList @@ -473,7 +472,7 @@ export default defineComponent({ if (index > -1) { this.uploadList.splice(index, 1); } - message.error(file.name + "upload failed"); + message.warning(file.name + "upload failed"); } }, @@ -498,6 +497,7 @@ export default defineComponent({ this.select = false DesignDetailEnd.colorList = [{},{},{},{},{},{},{},{}] DesignDetailEnd.selectIndex = 0 + DesignDetailEnd.sketchImg={} }, // this.getLibraryList('Moodboard') // this.getLibraryList('Printboard') @@ -520,14 +520,19 @@ export default defineComponent({ }, selectImgItem(imgData){ if(this.selectCode == 'Sketchboard'){ - this.current.id_ = imgData.id - this.current.path = imgData.url + // this.current.id_ = imgData.id + // this.current.path = imgData.url + let DesignDetailEnd = this.$refs.DesignDetailEnd + DesignDetailEnd.setSketchImg(imgData) + // DesignDetailEnd.sketchImg.id_ = imgData.id + // DesignDetailEnd.sketchImg.path = imgData.url + }else{ - console.log(imgData,this.current.printObject); - this.current.printObject.url = imgData.url + this.current.printObject.path = imgData.url this.current.printObject.id = imgData.id } + // imgData.type_ = this.type_ // this.store.commit("addGenerateMaterialFils", imgData); }, @@ -568,11 +573,11 @@ export default defineComponent({ beforeUpload(file){ const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp'; if (!isJpgOrPng) { - message.error('You can only upload Image file!'); + message.warning('You can only upload Image file!'); } const isLt2M = file.size / 1024 / 1024 < 5; if (!isLt2M) { - message.error('Image must smaller than 5MB!'); + message.warning('Image must smaller than 5MB!'); } return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE; }, @@ -655,7 +660,7 @@ export default defineComponent({ this.setColorboardList(colorList) this.getColorBg = true }else{ - message.error("Can't find the TCX color") + message.warning("Can't find the TCX color") } }) }, @@ -714,15 +719,39 @@ export default defineComponent({ file.status = 'done' this.colorFileList.push(file) - setTimeout(()=>{ + setTimeout(async ()=>{ const colorThief = new ColorThief(); let colorImage = this.$refs.colorImage let domImg = colorImage[0]; let color = colorThief.getColor(domImg) let colorHex = this.rgbaToHex(color) let selectColorList = []; - let selectColor = colorThief.getPalette(domImg,7) - selectColor = selectColor.join('&').split("&") + let selectColor = colorThief.getPalette(domImg,9) + //排序 + let obj = { + max : 30, + min: 30, + } + let colorSort + await GO.setColor(selectColor,file.imgUrl,obj).then( + (rv) => { + if(rv){ + colorSort = rv.ratio + } + } + ) + colorSort.sort((a, b) => { + var a_num = a.ratio; + var b_num = b.ratio; + return b_num - a_num; + }); + selectColor = [] + colorSort.forEach(v=>{ + selectColor.push(v.rgb) + }) + + selectColor = selectColor.join('&') + selectColor = selectColor.split("&") let colorLi = [] new Set(selectColor).forEach((item)=>{ colorLi.push(item.split(",")) @@ -788,10 +817,10 @@ export default defineComponent({ content: ""; display: block; background: #000; - height: 3px; + height: .3rem; left: 50%; transform: translateX(-50%); - bottom: 6px; + bottom: .6rem; width: 0px; transition: 0.3s all; } @@ -887,8 +916,8 @@ export default defineComponent({ } .content_img_item_block{ // border: 0.1rem solid transparent; - width: 9rem; - height: 9rem; + width: 10rem; + height: 10rem; display: flex; align-items: center; justify-content: center; @@ -1142,7 +1171,7 @@ export default defineComponent({ margin: auto; background: #f0eaee; - border-radius: 10px; + border-radius: 1rem; overflow: hidden; // box-shadow: 2px 2px 8px #000; box-shadow: 2px 2px 8px rgba(0,0,0,.3); @@ -1152,15 +1181,14 @@ export default defineComponent({ width: 18rem; background: rgba(0,0,0,0); padding-top: 1rem !important; - max-width: 170px; padding: 0; .vc-sketch{ } .vc-sketch-saturation-wrap{ width: 16rem; height: 16rem; - max-height: 170px; - max-width: 170px; + max-height: 17rem; + max-width: 17rem; margin: auto; padding-bottom: 0; } @@ -1196,7 +1224,7 @@ export default defineComponent({ .vc-sketch-color-wrap{ background-image: url(@../../../../assets/images/homePage/dropper.png); - background-size: 15px; + background-size: 1.5rem; background-repeat: no-repeat; background-position: 50%; cursor: pointer; @@ -1210,10 +1238,10 @@ export default defineComponent({ margin: .5rem auto; .vc-sketch-hue-wrap,.vc-sketch-alpha-wrap{ .vc-hue{ - border-radius: 15px; + border-radius: 1.5rem; } .vc-alpha{ - border-radius: 15px; + border-radius: 1.5rem; overflow: hidden; } } @@ -1275,7 +1303,7 @@ export default defineComponent({ align-items: center; .color_right{ width: 11rem; - font-size: 12px; + font-size: 1,2rem; color: #666666; .color_rgb_block{ display: flex; diff --git a/src/component/Detail/DesignDetailEnd.vue b/src/component/Detail/DesignDetailEnd.vue index 281d40a3..a3065356 100644 --- a/src/component/Detail/DesignDetailEnd.vue +++ b/src/component/Detail/DesignDetailEnd.vue @@ -1,7 +1,5 @@