This commit is contained in:
X1627315083
2025-07-24 09:26:27 +08:00
parent 53b4a15b92
commit 1dfb5a9d8f
12 changed files with 190 additions and 53 deletions

View File

@@ -17,7 +17,7 @@ const imageData = [
name: "风景照片",
type: "风景",
imgList: [
{ url: "/src/assets/work/1.PNG", name: "山景" },
{ url: "https://www.minio-api.aida.com.hk/aida-users/83/printboard/7a0cccfc-1e3c-4c38-af65-d6179f21a267.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20250723%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250723T025046Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=3612d6c168207bebdae2fa7c7c2c86ea0f48358b99b8b41dec9e2ff15e197e15", name: "山景" },
{ url: "/src/assets/work/2.PNG", name: "海景" },
],
},
@@ -264,7 +264,8 @@ body {
}
.app-container {
height: 100vh;
height: 100%;
// height: 100vh;
display: flex;
flex-direction: column;
}

View File

@@ -201,7 +201,7 @@
<a-spin size="large" />
</div>
</div>
<scaleImage ref="scaleImage" :isCanvas="type_.type2 == 'Sketchboard'" :sex="workspace.sex"></scaleImage>
<scaleImage ref="scaleImage" :imgType="type_.type2" :sex="workspace.sex"></scaleImage>
<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
<UpgradePlan ref="UpgradePlan"></UpgradePlan>
</div>

View File

@@ -135,7 +135,7 @@
</div>
<div class="scaleImage_content_imgBox" :class="{active:isComparison}">
<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl">
<generalMiniCanvas v-if="isCanvas" :imgUrl="scaleImageList[scaleImageIndex]?.imgUrl || scaleImageList[scaleImageIndex]?.url" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
<generalMiniCanvas v-if="false" :imgUrl="scaleImageList[scaleImageIndex]?.imgUrl || scaleImageList[scaleImageIndex]?.url" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
<img v-else :style="{'max-width':maxWidth}" :src="scaleImageList[scaleImageIndex]?.imgUrl || scaleImageList[scaleImageIndex]?.url">
<!-- <div class="img_operate_block" v-if="isLike">
@@ -187,9 +187,9 @@ export default defineComponent({
upload:'',
},
},
isCanvas:{
type:Boolean,
default:false,
imgType:{
type:String,
default:'',
},
sex:{
type:String,
@@ -445,6 +445,8 @@ export default defineComponent({
"gender": props.sex,
"originalId":scaleImageList.value[scaleImageIndex.value]?.id,
"isOverride":isOverlay,
originalIdSource:props.imgType,
type:props.imgType,
}
Https.axiosPost(Https.httpUrls.modifySketch, data).then(
(rv) => {
@@ -601,7 +603,7 @@ export default defineComponent({
setImageIndex(index:any){
if(this.isNext)return
let this_ = this
if(this.isCanvas){
if(this.imgType == 'Printboard' || this.imgType == 'Sketchboard'){
this.isNext = true
new Promise((resolve,reject)=>{
Modal.confirm({

View File

@@ -45,7 +45,7 @@
<div class="collectionBox">
<MoodboardUpload ref="moodBoard" v-show="openType == 'moodBoard' || collectionStep == 1"></MoodboardUpload>
<PrintboardUpload ref="printBoard" v-show="openType == 'printBoard' || collectionStep == 2"></PrintboardUpload>
<ColorboardUpload ref="colorBoard" v-show="openType == 'colorBoard' || collectionStep == 3"></ColorboardUpload>
<ColorboardUpload ref="colorBoard" v-show="openType == 'colorBoard' || collectionStep == 3" :collectionStep="collectionStep"></ColorboardUpload>
<mannequin ref="mannequin" v-show="openType == 'mannequin' || collectionStep == 4"></mannequin>
<SketchboardUpload ref="sketchBoard" v-show="openType == 'sketchBoard' || collectionStep == 5"></SketchboardUpload>
</div>

View File

@@ -254,29 +254,32 @@ export default defineComponent({
collectionStep:{
handler(newVal,oldVal){
if(newVal != 3)return
const backIcon = document.createElement('div');
if(backIcon.classList.contains('vc-sketch-color-wrap'))return
backIcon.classList.add('vc-sketch-color-wrap')
let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
dropperDom.appendChild(backIcon);
backIcon.addEventListener('click', async ()=>{
try {
const dropper = new EyeDropper();
const result = await dropper.open();
let hex = result.sRGBHex.replace("#", "");
// 将十六进制颜色码拆分成红、绿、蓝三个部分
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
// 返回RGB格式的字符串
// return `rgb(${r}, ${g}, ${b})`;
// box.style.backgroundColor = label.textContent = result.sRGBHex;
} catch (e) {
message.info(this.t('ColorboardUpload.jsContent1'))
}
nextTick(()=>{
const backIcon = document.createElement('div');
if(backIcon.classList.contains('vc-sketch-color-wrap'))return
backIcon.classList.add('vc-sketch-color-wrap')
let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
dropperDom.appendChild(backIcon);
backIcon.addEventListener('click', async ()=>{
try {
const dropper = new EyeDropper();
const result = await dropper.open();
let hex = result.sRGBHex.replace("#", "");
// 将十六进制颜色码拆分成红、绿、蓝三个部分
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
// 返回RGB格式的字符串
// return `rgb(${r}, ${g}, ${b})`;
// box.style.backgroundColor = label.textContent = result.sRGBHex;
} catch (e) {
message.info(this.t('ColorboardUpload.jsContent1'))
}
})
})
}
},
immediate: true,
},
selectColor:{
handler(newVal,oldVal){

View File

@@ -152,7 +152,7 @@
</label>
</div>
<div class="moreBox" @click.stop>
<more level1Type="Printboard" :moreList="['edit','down','enlargement','delete']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
<more level1Type="Printboard" :moreList="['edit','down','enlargement','delete']" :list="printboardList" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
</div>
</div>
</div>
@@ -927,14 +927,26 @@ export default defineComponent({
position: relative;
cursor: pointer;
text-align: center;
&:hover{
.moreBox,.pin_block{
opacity: 1;
}
:deep(.operate_file_block){
opacity: 1;
}
}
:deep(.operate_file_block){
opacity: 0;
transition: all 0.2s ease-in-out;
}
.moreBox{
position: absolute;
right: 1rem;
top: 1rem;
// opacity: 0;
opacity: 0;
width: 3rem;
height: 3rem;
transition: all 0.3s ease-in-out;
transition: all 0.2s ease-in-out;
}
&.modal_imgItem:nth-child(even) {
}
@@ -953,6 +965,8 @@ export default defineComponent({
border-radius: 3rem;
background: rgba(0,0,0,.7);
color: #fff;
opacity: 0;
transition: all 0.2s ease-in-out;
>label{
width: 100%;
height: 100%;
@@ -978,8 +992,10 @@ export default defineComponent({
}
}
span{
font-size: 1.4rem;
font-size: 1.2rem;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&.active{

View File

@@ -879,14 +879,26 @@ export default defineComponent({
position: relative;
cursor: pointer;
text-align: center;
&:hover{
.moreBox,.pin_block{
opacity: 1;
}
:deep(.operate_file_block){
opacity: 1;
}
}
:deep(.operate_file_block){
opacity: 0;
transition: all 0.2s ease-in-out;
}
.moreBox{
position: absolute;
right: 1rem;
top: 1rem;
// opacity: 0;
opacity: 0;
width: 3rem;
height: 3rem;
transition: all 0.3s ease-in-out;
transition: all 0.2s ease-in-out;
}
&.modal_imgItem:nth-child(even) {
margin-right: 0;
@@ -909,6 +921,8 @@ export default defineComponent({
border-radius: 3rem;
background: rgba(0,0,0,.7);
color: #fff;
opacity: 0;
transition: all 0.2s ease-in-out;
>label{
width: 100%;
height: 100%;

View File

@@ -3,7 +3,8 @@
<i class="fi fi-br-menu-dots-vertical" @click.stop="openList"></i>
<div class="more_box" v-show="show">
<div class="item" v-if="moreList.includes('edit')" @click.stop="setMore('edit')">
<i class="fi fi-rr-edit"></i>
<!-- <i class="fi fi-rr-edit"></i> -->
<i class="fi fi-br-pen-swirl"></i>
<div class="text">{{ $t('more.edit') }}</div>
</div>
<div class="item" v-if="moreList.includes('enlargement')" @click.stop="setMore('enlargement')">
@@ -30,6 +31,7 @@ import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import { downloadIamge } from "@/tool/util";
import { Modal } from "ant-design-vue";
import modalCanvas from "@/component/modules/generalModalCanvas.vue";
export default defineComponent({
@@ -38,6 +40,7 @@ export default defineComponent({
},
props:{
moreList:{type:Array,default:()=>[]},
list:{type:Array,default:()=>[]},
item:{type:Object,default:()=>{}},
index:{type:Number,default:0},
level1Type:{type:String,default:''},
@@ -45,6 +48,7 @@ export default defineComponent({
emits:['deleteFile','scaleImage'],
setup(props,{emit}) {
const store = useStore();
const {t} = useI18n()
const data = reactive({
show:false
})
@@ -73,9 +77,50 @@ export default defineComponent({
}
setShow()
}
const saveBase64Img = (rv)=>{
console.log(rv)
console.log(props.item)
const saveBase64Img = async (rv)=>{
let isOverlay = false
await new Promise<void>((resolve, reject) => {
Modal.confirm({
title: t('scaleImage.overlayOrNot'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
resolve()
isOverlay = true
},
onCancel(){
isOverlay = false
resolve()
}
});
})
let data = {
"base64": rv,
"category": props.item.categoryValue,
"gender": store.state.Workspace.probjects.sex,
"originalId":props.item.resData.id,
"isOverride":isOverlay,
originalIdSource:props.item.resData.designType,
type:props.level1Type,
}
Https.axiosPost(Https.httpUrls.modifySketch, data).then(
(rv) => {
rv.imgUrl = rv.url
rv.status = 'Success'
rv.resData = {
id:rv.id,
designType:props.item.resData.designType,
}
rv.category = props.item?.category
rv.categoryValue = props.item?.categoryValue
isOverlay?(props.list[props.index] = rv):(props.list.unshift(rv))
}
).catch(res=>{
});
}
return{
...toRefs(dataDom),

View File

@@ -58,6 +58,8 @@
<ExistsImageList :list="canvasSelectList" @select="handleImageSelect" />
</template>
</editCanvas>
<!-- <canvasAA ></canvasAA> -->
</div>
<div class="btn">
<div class="gallery_btn" @click="saveCanvas">Save</div>
@@ -86,10 +88,12 @@ import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
import ExistsImageList from "@/component/Canvas/ExistsImageList/index.vue";
import JSZip, { forEach } from "jszip";
import publish from "@/component/WorksPage/publish.vue";
import canvasAA from '@/component/Canvas/canvasExample.vue'
export default defineComponent({
components:{
toProductRelight,poseTransfer,editCanvas,ExistsImageList,publish
toProductRelight,poseTransfer,editCanvas,ExistsImageList,publish,canvasAA
},
props:{
source:{
@@ -268,6 +272,7 @@ export default defineComponent({
const saveCanvas = ()=>{
let canvasJSON = dataDom.editCanvas.getJSON()
let canvasData = JSON.parse(canvasJSON)
if(!canvasData)return
canvasData.canvas.objects.forEach((objectsItem:any) => {
if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src)
@@ -306,7 +311,7 @@ export default defineComponent({
let nameTail = imgItem.url?.split(".").pop().split("?").shift();
img.push({
imgUrl:imgItem.url,
name:`${item.type}${index}.${nameTail}`
name:`${item.type}${index}.${nameTail?nameTail:'png'}`
})
})
}
@@ -373,9 +378,7 @@ export default defineComponent({
}
const share = async ()=>{
var imageDataURL = '';
await dataDom.editCanvas.exportImage({isContainBg:true,isContainFixed:false}).then((rv:any)=>{
imageDataURL = rv
})
imageDataURL = await dataDom.editCanvas.exportImage({isContainBg:true,isContainFixed:false})
console.log(imageDataURL)
let value = {
imgUrl:imageDataURL,