This commit is contained in:
WangXiaoDong
2023-09-25 10:09:00 +08:00
parent 173f35042d
commit d9868d5cf0
37 changed files with 1618 additions and 1146 deletions

View File

@@ -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;