@@ -45,6 +42,8 @@
+
+
![]()
@@ -82,7 +81,7 @@
@@ -127,6 +127,7 @@
import { defineComponent,computed,ref,provide } from 'vue'
import ElementReplace from '@/component/Detail/ElementReplace.vue'
import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
+import magnifyingGlass from '@/component/Detail/magnifyingGlass.vue'
import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue'
import setDesignItem from '@/component/Detail/setDesignItem.vue'
import Draggable from 'vuedraggable'
@@ -142,6 +143,7 @@ export default defineComponent({
Draggable,
DesignDetailAlter,
setDesignItem,
+ magnifyingGlass,
},
setup() {
const store = useStore();
@@ -171,6 +173,7 @@ export default defineComponent({
let designOutfitId = ref()
let userInfo:any = {}
let ifSubmit = ref(false)
+ let designItemDetailUrl = ref({})
return{
designItemDetail,
store,
@@ -183,7 +186,8 @@ export default defineComponent({
designItemId,
designOutfitId,
userInfo,
- ifSubmit
+ ifSubmit,
+ designItemDetailUrl
}
},
data(){
@@ -198,18 +202,19 @@ export default defineComponent({
},
watch:{
designItemDetail:{
- handler: function(newVal,oldVal) {
+ handler: async function(newVal,oldVal) {
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
- console.log(designItemDetail);
-
this.ifSubmit = designItemDetail.ifSubmit?designItemDetail.ifSubmit:false
- this.current = JSON.parse(JSON.stringify(designItemDetail?.clothes?.[this.currentIndex]))
+ this.current = JSON?.parse(JSON?.stringify(designItemDetail?.clothes?.[this?.currentIndex]))
if(designItemDetail.others[0].layersObject.length != 0){
this.body = false
}else{
this.body = true
}
- this.setImgSize()
+ await this.setImgSize()
+ this.designItemDetailUrl = designItemDetail.currentFullBodyView?designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
+ console.log(this.designItemDetailUrl);
+
}
},
currentIndex:{
@@ -266,9 +271,11 @@ export default defineComponent({
this.designOrder = false
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.terminate()
-
+ this.designItemDetail = {}
+ this.frontBack = {}
}else{
- this.designShowPrview = 1
+ this.designShowPrview = 1;
+ this.designItemDetailUrl = {}
}
},
@@ -619,7 +626,7 @@ export default defineComponent({
.ant-modal-content{
- border-radius: 10px;
+ border-radius: 1rem;
// overflow: hidden;
.ant-modal-header{
background-color: #fff;
@@ -699,7 +706,7 @@ export default defineComponent({
.detail_modal_body{
position: relative;
// max-width: 245px;
- // width: 100%;
+ width: 100%;
height: 100%;
.detail_modal_body_nav{
display: flex;
@@ -745,7 +752,9 @@ export default defineComponent({
cursor: pointer;
position: absolute;
img{
- width: 100%;
+ // width: 100%;
+ max-height: 100%;
+ width: auto;
}
&.active{
top: 50%;
@@ -788,7 +797,7 @@ export default defineComponent({
}
&.fi-rr-edit{
left: 0;
- top: 20px;
+ top: 3rem;
}
&.fi-rr-copy{
top: 0;
@@ -804,11 +813,14 @@ export default defineComponent({
position: relative;
.detail_modal_right_top{
width: 100%;
- height: calc(100% - 3.9rem);
+ height: 100%;
background: #fff;
overflow-y: auto;
-
+ display: flex;
+ flex-direction: column;
.clothes_detail_item{
+ // margin-bottom: 5rem;
+ flex: 1;
.centent_div{
display: flex;
cursor: pointer;
diff --git a/src/component/Detail/DesignDetailAlter.vue b/src/component/Detail/DesignDetailAlter.vue
index c9825498..fbce40de 100644
--- a/src/component/Detail/DesignDetailAlter.vue
+++ b/src/component/Detail/DesignDetailAlter.vue
@@ -398,7 +398,6 @@ export default defineComponent({
function callback(entries, observer) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
- console.log(11);
this_.getLibraryList()
} else {
}
@@ -494,12 +493,11 @@ export default defineComponent({
rgba:{
r:Number(arr.r),
g:Number(arr.g),
- b:Number(arr.g),
+ b:Number(arr.b),
a:Number(arr.a?arr.a:1),
},
hex:this.rgbaToHex([arr.r,arr.g,arr.b,arr.a?arr.a:1])
}
-
this.uploadList = []
if (num == 1) {
this.selectCode = 'Sketchboard'
@@ -589,21 +587,20 @@ export default defineComponent({
this.select = false
DesignDetailEnd.selectIndex = 0
DesignDetailEnd.type_ = 0
+ this.colorFileList = []
+ this.selectColorList = []
},
//切换整体衣服
changePlace(){
this.uploadList = []
let DesignDetailEnd = this.$refs.DesignDetailEnd
- this.select = false
- DesignDetailEnd.type_ = 0
this.uploadList = []
this.apparelList = []
this.printList = []
- this.select = false
DesignDetailEnd.colorList = [{},{},{},{},{},{},{},{}]
- DesignDetailEnd.selectIndex = 0
DesignDetailEnd.sketchImg={}
+ this.terminate()
},
// this.getLibraryList('Moodboard')
// this.getLibraryList('Printboard')
@@ -849,51 +846,60 @@ export default defineComponent({
this.colorFileList.push(file)
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,9)
- //排序
- let obj = {
- max : 30,
- min: 30,
- }
- let colorSort
- await GO.setColor(selectColor,file.imgUrl,obj).then(
- (rv) => {
- if(rv){
- colorSort = rv.ratio
- }
+ const img = new Image();
+ let colorImage = this.$refs.colorImage
+ img.src = colorImage[0].src;
+
+ img.onload = async () => {
+ const colorThief = new ColorThief();
+ // let domImg = colorImage[0];
+ // let color = colorThief.getColor(img)
+ // let colorHex = this.rgbaToHex(color)
+ let selectColorList = [];
+ let selectColor = colorThief.getPalette(img,8)
+ //排序
+ let obj = {
+ max : 5,
+ min: 5,
}
- )
- 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(","))
- })
- colorLi.forEach(element => {
- let colorLiHex = this.rgbaToHex(element)
- selectColorList.push(
- {rgba:{r:element[0],g:element[1],b:element[2],a:1},hex:colorLiHex}
+ let colorSort
+ await GO.setColor(selectColor,file.imgUrl,obj).then(
+ (rv) => {
+ if(rv){
+ colorSort = rv.ratio
+ }
+ }
)
- });
- this.selectColorList = selectColorList
- this.getHsvColor(selectColorList)
- this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
+ 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 color = selectColor[0].split(',')
+ let colorHex = this.rgbaToHex(color)
+
+ let colorLi = []
+ new Set(selectColor).forEach((item)=>{
+ colorLi.push(item.split(","))
+ })
+ colorLi.forEach(element => {
+ let colorLiHex = this.rgbaToHex(element)
+ selectColorList.push(
+ {rgba:{r:element[0],g:element[1],b:element[2],a:1},hex:colorLiHex}
+ )
+ });
+ this.selectColorList = selectColorList
+ // this.getHsvColor(selectColorList)
+ this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
+ };
+
+
},100)
};
// 转化为base64S
@@ -1081,18 +1087,20 @@ export default defineComponent({
max-height: 100%;
}
.operate_file_block{
- height: 2.5rem;
+ height: 1.5rem;
.select_img_type{
+ line-height: 1;
.select_category{
- zoom: .8;
+ zoom: .6;
+ height: 100%;
.icon-xiala{
zoom: .8;
}
}
.category_list{
- margin-top: -.4rem;
+ margin-top: .1rem;
.category_item{
- zoom: .8;
+ zoom: .7;
}
}
}
diff --git a/src/component/Detail/DesignDetailEnd.vue b/src/component/Detail/DesignDetailEnd.vue
index fe6605b3..5026c905 100644
--- a/src/component/Detail/DesignDetailEnd.vue
+++ b/src/component/Detail/DesignDetailEnd.vue
@@ -45,14 +45,14 @@
Single
-
-
Current Print
+ Current Color
@@ -103,7 +102,8 @@
- ![]()
+
+