aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面调整

Browse Source
This commit is contained in:
X1627315083
2025-07-19 14:04:48 +08:00
parent 22ee9c6cf1
commit 4b694236ee
161 changed files with 2934 additions and 3979 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/component/HomePage/ColorboardUpload.vue
View File

@@ -1307,7 +1307,7 @@ export default defineComponent({
border-radius: 50%;
width: 4rem;
height: 4rem;
border: solid 2px #39215b;
border: solid 2px #000;
display: flex;
align-items: center;
justify-content: center;
@@ -1325,7 +1325,7 @@ export default defineComponent({
width: 1rem;
height: 1rem;
border-radius: 50%;
background: #39215b;
background: #000;
}
}
}

19
src/component/HomePage/Generate.vue
View File

@@ -240,6 +240,7 @@ export default defineComponent({
let userDetail:any= computed(()=>{
return store.state.UserHabit.userDetail
})
let printModelList:any = ref([])
let sketchStyleList:any = ref([])
let printModel:any = ref({
@@ -263,6 +264,13 @@ export default defineComponent({
let workspace:any = computed(()=>{
return store.state.Workspace.probjects
})
let upload = ref({
isPin: 0,
level1Type: props.msg,
ageGroup:workspace.ageGroup,
gender: props.gender,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
})
let isGenerate = ref(false)//判断是否正在进行generate
let inputShow = ref(false)//表示是否出现红框
let inputTime = ref()
@@ -370,6 +378,7 @@ export default defineComponent({
...toRefs(speed),
openSpeed,
setSpeed,
upload,
};
},
data(prop) {
@@ -380,12 +389,7 @@ export default defineComponent({
},
spin: true,
}),
upload: {
isPin: 0,
level1Type: prop.msg,
gender: prop.gender,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token: "",
uploadUrl: "",
@@ -996,6 +1000,7 @@ export default defineComponent({
let param = new FormData();
param.append('inPin','0')
param.append('gender',this.workspace.sex)
param.append('ageGroup',this.workspace.ageGroup)
param.append('level1Type',this.upload.level1Type)
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
param.append('file',e.clipboardData.files[0]);
@@ -1048,7 +1053,7 @@ export default defineComponent({
position: sticky;
top: 0;
padding-top: calc(2rem*1.2);
z-index: 3;
z-index: 7;
}
.generate_checkbox {
}

774
src/component/HomePage/MoodboardUpload.vue
View File

@@ -1,774 +0,0 @@
<template>
<div class="collection_modal_item">
<div class="modal_left Guide_1_1_2" :class="[driver__.driver?'showEvents':'']">
<div class="switch_type_list" :class="[driver__.driver?'hideEvents':'']">
<div
@click.stop="open(1)"
class="switch_type_item"
:class="[openClick == 1 ? 'select_swtich' : '']"
>
<span>{{ $t('MoodboardUpload.Upload') }}</span>
</div>
<div
@click.stop="open(2)"
class="switch_type_item"
:class="[openClick == 2 ? 'select_swtich' : '']"
>
<span>{{ $t('MoodboardUpload.Library') }}</span>
</div>
<div
@click.stop="open(3)"
class="switch_type_item Guide_1_4"
:class="[openClick == 3 ? 'select_swtich' : '']"
>
<span>{{ $t('MoodboardUpload.Generate') }}</span>
</div>
</div>
<div v-show="openClick == 1" class="moodboard_body">
<div class="upload_img_body scroll_style">
<div class="upload_item">
<div
class="upload_file_item"
v-for="(file, index) in fileList"
:key="file"
>
<div
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
>
<a-spin
:indicator="indicator"
tip="Uploading..."
/>
</div>
<div
class="upload_file_item_content"
v-show="file?.status === 'done'"
>
<img :src="file?.imgUrl" class="upload_img" />
<div
class="delete_file_block"
@click="deleteFile(file)"
>
{{ $t('MoodboardUpload.Delete') }}
</div>
</div>
</div>
<div
class="upload_file_item upload_component"
v-show="moodboarList.length < 8"
>
<a-upload
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:capture="null"
:data="{
...upload,
}"
:headers="{ Authorization: token }"
:before-upload="beforeUpload"
v-model:file-list="fileList"
:multiple="!driver__.driver"
:maxCount="8 - moodboarList.length+fileList.length"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
<div
class="upload_tip_block"
v-show=" moodboarList.length < 8"
>
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
</div>
</a-upload>
</div>
</div>
</div>
<div class="upload_max_tip">
<span class="icon iconfont icon-zhuyi"></span>
<span>{{ $t('MoodboardUpload.Maximum') }}</span>
</div>
<!-- <div class="upload_max_tip">
<span class="icon iconfont icon-zhuyi"></span>
<span
>Maximum 10 images can be uploaded, Maximum 2M per
image</span
>
</div> -->
</div>
<Material
v-show="openClick == 2"
ref="Material"
msg="Moodboard"
></Material>
<Generate
v-show="openClick == 3"
ref="Generate"
msg="Moodboard"
></Generate>
</div>
<div v-show="moodboarList.length" class="modal_right">
<div class="modal_layout">
<div class="modal_text">
<div>
{{ $t('MoodboardUpload.Thumbnail') }}
</div>
<div class="modal_btn started_btn Guide_1_7" :class="[driver__.driver?'showEvents':'']" @click="layout()">{{ $t('MoodboardUpload.layout') }}</div>
</div>
<div class="modal_img" :class="[driver__.driver?'hideEvents':'']">
<div class="modal_img_item" v-for="item,index in moodboarList" :key="item" @click="deleteFile(item)">
<img v-lazy="item.imgUrl">
<div class="checked" >
<i class="fi fi-rr-trash"></i>
</div>
</div>
</div>
</div>
<div v-show="moodboarList.length > 1 || edieShow" class="modal_accomplish">
<div class="modal_text">
<div>{{ $t('MoodboardUpload.selected') }}</div>
<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">{{ $t('MoodboardUpload.Edit') }}</div>
</div>
<div class="modal_img_max">
<div v-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}">
<div v-for="item,index in layoutList" :class="[moodb_className[index]]" class="modal_imgItem">
<img :src="item.imgUrl" v-modelImg>
</div>
</div>
<div v-else class="modal_img">
<img :src="modalImg[0].imgUrl">
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</div>
</div>
</div>
<layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout>
</div>
</template>
<script lang="ts">
import { defineComponent, h, ref ,computed,nextTick,inject} from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { getCookie } from "@/tool/cookie";
import { getUploadUrl,isMoible } from "@/tool/util";
import { useStore } from "vuex";
import { message, Upload } from "ant-design-vue";
import { Https } from "@/tool/https";
import Material from "@/component/HomePage/Material.vue";
import Generate from "@/component/HomePage/Generate.vue";
import MoodTemplate from "@/component/HomePage/MoodTemplate.vue";
import layout from "@/component/HomePage/layout.vue";
import domTurnImg from '@/tool/domTurnImg'
import GO from "@/tool/GO";
import moodb from "@/tool/moodb";
import { useI18n } from "vue-i18n";
import { openGuide,driverObj__ } from "@/tool/guide";
export default defineComponent({
components: { Material, MoodTemplate, Generate,layout },
setup() {
const store = useStore()
let lessenList: any = ref([]);
let fileList: any = ref([]);
let showFileList: any = ref([]);
let templateModal: any = ref(false);
let templateFileList: any = ref([]);
let openClick: any = ref(1);
let moodb_className:any = ref([]);
let flex_direction:any = ref(false)//判断第二种格子类型弹性布局方式
let layoutList:any = []//选中后随机生成的list
let layoutOpen = ref(false)
let loadingShow = ref(false)
let modalImg:any= computed(()=>{
return store.state.UploadFilesModule.disposeMoodboard
})
// let driver__:any = computed(()=>{
// return store.state.Guide.guide
// })
let driver__:any = inject('driver__')
let uploading:any = ref([])
let edieShow:any = ref()
let {t} = useI18n()
return {
fileList,
showFileList,
lessenList,
templateModal,
templateFileList,
openClick,
moodb_className,
flex_direction,
layoutList,
layoutOpen,
loadingShow,
modalImg,
driver__,
uploading,
edieShow,
t,
};
},
data() {
return {
indicator: h(LoadingOutlined, {
style: {
fontSize: "2.4rem",
},
spin: true,
}),
upload: {
isPin: 0,
gender:'',
level1Type: "Moodboard",
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token: "",
uploadUrl: "",
moodTemplateId: "", //模板id
store: useStore(),
moodb_:moodb.moodb_,
moodboarList:computed(()=>{
return useStore().state.UploadFilesModule.moodboard
}),
};
},
// watcheffect(){
// let breviaryList = this.store.state.UploadFilesModule.moodboardFiles.filter(
// (v: any) => v.checked == true
// );
// this.store.commit("setMoodboardFile", breviaryList);
// console.log(22);
// },
mounted() {
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
},
watch:{
driver__:{
handler(newVal,oldVal){
if(newVal.index >= 6 && newVal.index <= 8){
this.open(newVal.index-5)
}else{
}
}
}
},
directives:{
modelImg:{
mounted(el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight >= parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
el.style.width = 100+'%'
el.style.height = 'auto'
}
},
updated (el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight >= parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
el.style.width = 100+'%'
el.style.height = 'auto'
}
}
}
},
methods: {
open(num: Number) {
this.openClick = num;
if(num ==2 ){
let material:any = this.$refs.Material
material.init('Moodboard')
}else if (num == 3){
// let driver = this.store.state.Guide.guide.driver
// if(this.driver__.driver){
// driverObj__.moveNext()
// }
let Generate:any = this.$refs.Generate
if(this.driver__.driver){
Generate.searchPictureName = 'An image of airy, blush-toned fabrics and pale pink'
}else{
// Generate.searchPictureName = ''
}
}
},
fileUploadChange(data: any) {
let file = data.file;
let bor = true
if (file.status === "done") {
let res = JSON.parse(file.xhr.response);
if(res.errCode == 0){
file.imgUrl = res.data.url;
file.resData = res.data;
file.type_ = {
type1:'upload',
type2:'Moodboard'
};
file.id_ = GO.id++
file.id = res.data.id
let fileList = this.fileList.filter(
(v: any) => v.status === "done"
);
let arr = this.store.state.UploadFilesModule.moodboard
if(arr.length >= 8){
message.info(this.t('MoodboardUpload.jsContent1'))
}else{
this.store.commit("setMoodboardFile", fileList);
}
if(fileList.length >=2){
if(this.driver__.driver){
driverObj__.moveNext()
}
}
}else{
bor = false
}
// this.showFileList = this.fileList
} else if (file.status === "error") {
bor = false
}
if(!bor){
let res:any = JSON.parse(file.xhr.response);
let index = -1;
this.fileList.forEach((ele: any, index1: any) => {
if (file.uid === ele.uid) {
index = index1;
}
});
if (index > -1) {
this.fileList.splice(index, 1);
}
// message.warning(file.name + this.t('MoodboardUpload.jsContent2'));
message.warning(res.errMsg);
}
},
beforeUpload(file: any) {
const isJpgOrPng =
file.type === "image/jpeg" ||
file.type === "image/png" ||
file.type === "image/jpg" ||
file.type === "image/bmp";
if (!isJpgOrPng) {
message.info(this.t('MoodboardUpload.jsContent3'));
}
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('MoodboardUpload.jsContent4'));
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
},
deleteFile(item: any) {
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
this.store.commit("addGenerateMaterialFils", item);
}else{
this.fileList = this.store.state.UploadFilesModule.moodboardFiles
let moodboard
this.store.state.UploadFilesModule.moodboardFiles.forEach((items:any,index:Number)=>{
if(items.id_ == item.id_){
moodboard = index
}
})
this.fileList.splice(moodboard,1)
this.store.commit("setMoodboardFile", this.fileList);
}
if(this.store.state.UploadFilesModule.moodboard.length == 0){
this.store.commit("clearMoodTemplateId");
this.layoutList = []
this.edieShow = false
}
},
recollection() {
let arr = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.moodboardFiles
)
);
let disposeMoodboard = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.disposeMoodboard
)
);
let moodboardPosition = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.moodboardPosition
)
);
let setboard = {
generate:[] as any,
material:[] as any,
moodboard:[] as any,
}
arr.forEach((v:any)=>{
if(v.type_.type1 == 'generate'){
setboard.generate.push(v)
}else if(v.type_.type1 == 'material'){
setboard.material.push(v)
}else{
setboard.moodboard.push(v)
}
})
this.store.commit("setMoodboardGenerateFiles", setboard.generate);
this.store.commit("setMoodboardMaterialFiles", setboard.material);
this.store.commit("setMoodboardFile", setboard.moodboard);
this.store.commit("setDisposeMoodboard", disposeMoodboard[0]);
this.store.commit("setDisposeMoodboardPosition",moodboardPosition);
this.fileList = setboard.moodboard
},
async changeTemplateModal() {
if(this.modalImg[0]?.id){
let layout:any = this.$refs.layout
if(this.layoutList.length <= 0){
let styleObj = this.store.state.UploadFilesModule.moodboardPosition
if(!styleObj.domStyle)await this.layout()
//
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
this.layoutList = arr
}
if(window.screen.width<1300){
layout.isMobile = true
}else{
layout.isMobile = false
}
layout.init()
}else{
message.info(this.t('MoodboardUpload.jsContent5'))
}
},
async layout(){
if(this.loadingShow)return
await new Promise((resolve, reject) => {
this.loadingShow = true
this.store.commit("setDisposeMoodboard", []);
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
this.layoutList = arr
var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
let moodb = this.moodb_[arr.length-1][random]
if( moodb.filter((item,index)=> item == 'w2h1').length != 0 && arr.length > 4){
this.flex_direction = true
}else{
this.flex_direction = false
}
if(this.moodb_[arr.length-1].length != 1){
if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
this.loadingShow = false
this.layout()
return resolve('')
}
}
this.edieShow = true
if(this.moodb_[arr.length-1].length == 2){
this.moodb_className = this.moodb_[arr.length-1][0]
}else{
this.moodb_className = this.moodb_[arr.length-1][random]
}
this.layoutOpen = true
//提交模板
// this.loadingShow = true
this.layoutList.forEach((v:any)=>{
v.setPitch = false
})
nextTick().then(()=>{
let layoutCentent = document.getElementById('modal_img')
let obj = {
imgStyle:[],
domStyle:[],
borStyle:[],
rototeStyle:[],
translateStyle:[],
angleTRStyle:[],
angleTLStyle:[],
angleBRStyle:[],
angleBLStyle:[],
class:this.moodb_className,
}
this.store.commit("setDisposeMoodboardPosition", obj);
domTurnImg(layoutCentent).then((rv)=>{
let file = rv
let param = new FormData();
param.append('inPin','0')
param.append('level1Type','Moodboard')
param.append('gender','')
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
param.append('file',file);
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
.then((rv: any) => {
let img:any = rv
img.imgUrl = rv.url
img.resData = JSON.parse(JSON.stringify(img))
this.store.commit("setDisposeMoodboard", img);
this.loadingShow = false
resolve('')
}
).catch(rv=>{
this.loadingShow = false
})
if(this.driver__.driver){
driverObj__.moveNext()
}
})
})
})
},
setmoodbClass(val:any){
this.moodb_className = val
}
},
});
</script>
<style lang="less" scoped>
.collection_modal_item {
// padding: 1.5rem 2.6rem 4rem;
height: 100%;
display: flex;
.modal_left {
padding-top: calc(4rem*1.2);
width: 47%;
display: flex;
flex-direction: column;
flex-shrink: 0;
// width: 50rem*1.2);
.switch_type_list {
display: flex;
align-items: center;
position: relative;
.switch_type_item {
display: flex;
align-items: center;
// padding: 0 2rem*1.2);
height: calc(4rem*1.2);
background: #fff;
border-radius: calc(0.8rem*1.2);
line-height: calc(4rem*1.2);
font-size: var(--aida-fsize1-8);
// margin-right: 2.2rem*1.2);
margin-right: calc(8rem*1.2);
color: #000;
cursor: pointer;
position: relative;
text-align: center;
transform-origin: left;
transform: scale(1);
transition: 0.3s all;
&.switch_type_item::before {
position: absolute;
content: "";
display: block;
background: #000;
height: calc(.3rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: calc(.6rem*1.2);
width: 0px;
transition: 0.3s all;
}
&.select_swtich {
color: #000;
// font-weight: 900;
transform: scale(1.15);
}
&.select_swtich::before {
width: 100%;
}
.switch_icon {
font-size: calc(1.8rem*1.2);
margin-right: calc(0.8rem*1.2);
}
}
}
.moodboard_body {
padding-top: calc(2.5rem*1.2);
flex: 1;
height: calc(30rem*1.2);
overflow-x: hidden;
display: flex;
flex-direction: column;
&.moodboard_body::-webkit-scrollbar {
display: none;
}
.upload_img_body {
height: 100%;
overflow-y: auto;
margin-bottom: calc(1rem*1.2);
}
.upload_max_tip {
display: flex;
align-items: center;
justify-content: center;
font-size: calc(1.4rem*1.2);
color: #030303;
.icon-zhuyi {
font-size: calc(1.6rem*1.2);
margin-right: calc(0.7rem*1.2);
}
}
}
}
.modal_right{
flex: 1;
margin-left: calc(3rem*1.2);
display: flex;
min-width: calc(57rem*1.2);
flex-direction: column;
overflow: hidden;
.modal_layout,.modal_accomplish{
.modal_text{
font-size:var(--aida-fsize1-4);
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: space-between;
}
}
.modal_layout{
.modal_img{
width: calc(40rem*1.2);
height: calc(5rem*1.2);
overflow-x: hidden;
display: flex;
&.modal_img::-webkit-scrollbar {
display: none;
}
.modal_img_item{
width: calc(4rem*1.2);
height: calc(4rem*1.2);
text-align: center;
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
position: relative;
cursor: pointer;
overflow: hidden;
img{
width: auto;
height: 100%;
max-width: 100%;
object-fit: cover;
}
.checked{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
display: none;
justify-content: center;
align-items: center;
}
&.modal_img_item:hover .checked{
display: flex;
}
}
}
}
.modal_accomplish{
// margin-top: 2rem*1.2);
height: calc(30rem*1.2);
display: flex;
flex: 1;
flex-direction: column;
.modal_text{
padding-top: calc(2rem*1.2);
padding-block: calc(2rem*1.2);
}
.modal_img_max{
// flex: 1;
// width: calc(57rem*1.2);
// height: calc(35rem*1.2);
width: 100%;
aspect-ratio: 1.62 / 1;
position: relative;
.mark_loading{
position: absolute;
}
}
.modal_img{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
position: relative;
>img{
// height: 100%;
width: 100%;
max-height: 100%;
object-fit: contain;
}
&.active{
flex-direction: row;
}
.modal_imgItem{
position: relative;
overflow: hidden;
text-align: center;
img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
float: left;
user-select:none;
-webkit-user-drag: none;
}
}
.wh1{
width: 23%;
height: 48%;
}
.wh4{
width: 48.5%;
height: 100%;
}
.wh8{
width: 100%;
height: 48.5%;
}
.w1h2{
width: 23%;
height: 100%;
}
.w2h1{
width: 48.5%;
height: 48%;
}
}
}
}
}
</style>

940
src/component/HomePage/PrintboardUpload.vue
View File

@@ -1,940 +0,0 @@
<template>
<div class="printboard_upload_modal">
<div class="printboard_left_upload">
<div class="left_upload_header">
<div class="upload_header_item">
<div class="switch_type_list">
<div
class="switch_type_item"
:class="[openClick == 1 ? 'select_swtich' : '']"
>
<span @click.stop="open(1)">{{ $t('PrintboardUpload.Upload') }}</span>
</div>
<div
class="switch_type_item"
:class="[openClick == 2 ? 'select_swtich' : '']"
>
<span @click.stop="open(2)">{{ $t('PrintboardUpload.Library') }}</span>
</div>
<div
class="switch_type_item Guide_1_2_1"
:class="[openClick == 3 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
>
<span @click.stop="open(3)">{{ $t('PrintboardUpload.Generate') }}</span>
</div>
<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
<div @click.stop="openPrintModel"><span>{{ scene.name }}<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></span> </div>
<ul v-show="openMenu">
<li
v-for="item,index in printCatecoryList"
class="printModel_item"
@click.stop="setSceneList(item)"
:title="item.value == 'Pattern'?$t('PrintboardUpload.PatternTitle'):
item.value == 'Logo'?$t('PrintboardUpload.LogoTitle'):
item.value == 'Slogan'?$t('PrintboardUpload.SloganTitle'):''"
>{{ item.name }}</li>
</ul>
</div>
</div>
</div>
</div>
<div v-show="openClick == 1" class="printboard_body">
<div class="upload_img_body">
<div class="upload_item">
<div :class="['upload_file_item']" v-for="(file, index) in fileList" :key="file">
<div class="upload_file_img_block">
<div class="upload_file_item_content" v-show="file?.status === 'uploading'">
<a-spin :indicator="indicator" tip="Uploading..."/>
</div>
<div class="upload_file_item_content" v-show="file?.status === 'done'">
<img v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
<sketchCategory :disignTypeList="printCatecoryList" :generateList="fileList" :isSetSketchCategory="true" :item="file" ></sketchCategory>
<div class="delete_like_file_block" @click.stop="deleteFile(file)">
<span
class="icon iconfont icon-shanchu"
></span>
</div>
</div>
</div>
<!-- <div class="pin_block" v-show="file?.status === 'done'">
<a-checkbox v-model:checked="file.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
</div> -->
</div>
<div class="upload_file_item upload_component" v-show="printboardList.length < 16">
<a-upload
:action="uploadUrl + '/api/element/upload'"
:capture="null"
list-type="picture-card"
:before-upload="beforeUpload"
:data="{
...upload
}"
:headers="{Authorization:token}"
v-model:file-list="fileList"
:customRequest="function(){}"
:multiple="!driver__.driver"
:maxCount="16 - printboardList.length+fileList.length"
accept=".jpg,.png,.jpeg,.bmp"
@change="fileUploadChange"
>
<div
class="upload_tip_block"
v-show="printboardList.length < 16"
>
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
</div>
</a-upload>
</div>
</div>
</div>
<div class="upload_max_tip">
<span class="icon iconfont icon-zhuyi"></span>
<span>{{ $t('PrintboardUpload.Maximum') }}</span>
</div>
</div>
<Material v-show="openClick == 2"
ref="Material"
msg="Printboard"
@setLibrary = setSetchboardGenerate
@confirmSelect="confirmSelect"
:disignTypeList="printCatecoryList"
></Material>
<Generate v-show="openClick == 3" ref="Generate" :scene="scene" :sketchCatecoryList="printCatecoryList" msg="Printboard"></Generate>
</div>
<div class="modal_right">
<div class="modal_layout">
<div class="modal_text">
<div>{{ $t('PrintboardUpload.Thumbnail') }}</div>
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
</div>
<!-- <div class="modal_img">
<div class="modal_img_item" v-for="item,index in printboardList" :key="item" @click.stop="deleteFile(item)">
<img v-lazy="item.imgUrl">
<div class="checked" >
<i class="fi fi-rr-trash"></i>
</div>
</div>
</div> -->
</div>
<div class="modal_accomplish">
<div class="modal_img">
<div v-for="item,index in printboardList" :key="item" class="modal_imgItem Guide_1_2_9" :class="[driver__.driver?'showEvents':'']" >
<img v-lazy="item.imgUrl">
<sketchCategory :disignTypeList="printCatecoryList" :generateList="printboardList" :isSpread="true" :item="item" ></sketchCategory>
<!-- 在sketch 和print暂时关闭like -->
<!-- <div
class="delete_like_file_block left1"
:class="[driver__.driver?'hideEvents':'']"
>
<i v-if="!item.like || item.libraryChecked" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
</div> -->
<div class="delete_like_file_block left" :class="[driver__.driver?'hideEvents':'']">
<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
</div>
<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteFile(item)">
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
<div class="pin_block">
<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
</div>
</div>
</div>
</div>
</div>
<!-- 取消请求 -->
<scaleImage ref="scaleImage"></scaleImage>
<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
</div>
</template>
<script lang="ts">
import { defineComponent,h,ref,computed,inject,createVNode,provide, nextTick } from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue';
import {getCookie} from '@/tool/cookie'
import {getUploadUrl} from '@/tool/util'
import {useStore} from 'vuex'
import { Https } from "@/tool/https";
import { Modal,message,Upload} from 'ant-design-vue';
import Cropper from '@/component/HomePage/Cropper.vue'
import Material from '@/component/HomePage/Material.vue'
import Generate from "@/component/HomePage/Generate.vue";
import GO from "@/tool/GO";
import { useI18n } from 'vue-i18n';
import { openGuide,driverObj__ } from "@/tool/guide";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import axios from 'axios'
import generalMenu from "@/component/HomePage/generalMenu.vue";
import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow';
export default defineComponent({
components:{
Cropper,
Material,
Generate,
scaleImage,
generalMenu,
sketchCategory,
},
setup(){
let store:any =useStore()
let fileList:any = ref([]),//选中的文件id数据
printImgList:any = ref([]), //print的印花图片
moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
let openClick: any = ref(1);
let driver__:any = inject('driver__')
let {t} = useI18n()
let isTest = ref()
let userInfo:any = {}
let useGenerate:any = ref({
imgId : '',
imgUrl:1,
checked:false,
level2Type:'',
designType:''
})
let workspace:any = ref({})
let scene = ref({
name:'Pattern',
value:'Pattern'
})
let openMenu = ref(false)
let printCatecoryList:any = computed(()=>{
return store.state.UserHabit.printType
})
let printboardList = computed(()=>{
return store.state.UploadFilesModule.printboard
})
return {
fileList,
printImgList,
moodBoards,
openClick,
driver__,
t,
isTest,
userInfo,
useGenerate,
workspace,
scene,
openMenu,
printCatecoryList,
printboardList,
}
},
computed:{
},
watch:{
},
data(){
return {
swtich_type:'upload',
indicator : h(LoadingOutlined, {
style: {
fontSize: '2.4rem*1.2)',
},
spin: true,
}),
upload:{
isPin:0,
gender:'',
level1Type:'Printboard',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token:'',
uploadUrl:'',
store:useStore(),
cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
currentFileNum:0, //当前上传的文件数
isUpload:false,
isTextarea:false,
isInputFocus:false,
}
},
mounted(){
let userInfo:any = getCookie("userInfo")
this.userInfo = JSON.parse(userInfo);
this.token = getCookie('token') || ''
let isTest:any = getCookie('isTest')
this.isTest =JSON.parse(isTest)
this.uploadUrl = getUploadUrl()
this.workspace = computed(()=>{
return this.store?.state?.Workspace?.workspace
})
let Generate:any = this.$refs.Generate
if(this.driver__.driver){
Generate.searchPictureName = 'Elegant floral print for high-fashion attire'
}else{
Generate.searchPictureName = ''
}
},
methods:{
setSetchboardGenerate(item:any){
this.useGenerate.imgId = item.imgId
this.useGenerate.imgUrl = item.imgUrl
this.useGenerate.level2Type = item.level2Type
this.useGenerate.designType = item.designType
let Material:any = this.$refs.Material
let generate:any = this.$refs.Generate
if(item.designType == 'collection'){
}else {
generate.sketchboardList.forEach((item:any) => {
item.checked = false
});
}
},
open(num: Number) {
this.openClick = num;
let material:any = this.$refs.Material
if(num == 2){
material.init('Printboard')
}
if(num == 3){
this.scene = this.printCatecoryList[0]
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
}
},
fileUploadChange(data:any){
let file = data.file
// let res = JSON.parse(data?.xhr?.response);
file.id_ = GO.id++
file.type_ = {
type1:'upload',
type2:'Printboard'
};
file.pin = false;
// file.id = res.data.id?res.data.id:""
let Cropper:any = this.$refs.Cropper
if(this.currentFileNum === 1){
var reader = new FileReader();
reader.onload = (e:any) => {
let data_new;
if (typeof e.target.result === 'object') {
// 把Array Buffer转化为blob 如果是base64不需要
data_new = window.URL.createObjectURL(new Blob([e.target.result]));
} else {
data_new = e.target.result;
}
Cropper.getOptionImg(data_new)
};
// 转化为base64
// reader.readAsDataURL(file)
// 转化为blob
reader.readAsArrayBuffer(file.originFileObj);
this.cropperFileData = file
Cropper.changeShowModal(true)
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
}else{
this.customRequest(file)
}
},
beforeUpload(file:any,fileList:any){
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
if (!isJpgOrPng) {
message.info(this.t('PrintboardUpload.jsContent1'));
}
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('PrintboardUpload.jsContent2'));
}
if(isJpgOrPng && isLt2M){
this.currentFileNum = fileList.length
}else{
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
}
},
deleteFile(item:any){
// this.fileList.splice(item, 1)
// this.store.commit('setPrintboardFile',this.fileList)
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:16})
this.store.commit("addGenerateMaterialFils", item);
}else{
this.fileList = this.store.state.UploadFilesModule.printboardFiles
let moodboard
this.store.state.UploadFilesModule.printboardFiles.forEach((items:any,index:Number)=>{
if(items.id_ == item.id_){
moodboard = index
}
})
this.fileList.splice(moodboard,1)
this.store.commit("setPrintboardFile", this.fileList);
}
},
likeFile(item:any,str:string){
if(str == 'like'){
let data = {
generateDetailId:item.id,
level1Type:"Printboard",
level2Type: item.categoryValue,
gender:this.workspace.sexEnum.value,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
}
Https.axiosPost(Https.httpUrls.generateLike, data).then(
(rv) => {
item.like = true
}
).catch(res=>{
});
}else{
let data = {
generateDetailId:item.id,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
}
Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
(rv) => {
item.like = false
}
).catch(res=>{
});
}
},
customRequest(data:any){
let new_data = {
...this.upload,
file:data.originFileObj
}
let fileUid = data.uid
Https.axiosPost('/api/element/upload', new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => {
if (rv) {
for(let file of this.fileList){
if(fileUid === file.uid){
file.status = 'done'
file.imgUrl = rv.url
file.pin = false
file.id = rv.id
file.category = this.printCatecoryList[0].name
file.categoryValue = this.printCatecoryList[0].value
file.resData = rv
}
}
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
this.store.commit('setPrintboardFile',fileList)
}
}
).catch((res)=>{
let index = -1
this.fileList.forEach((ele:any,index1:any) => {
if(fileUid === ele.uid){
index = index1
}
});
if(index > -1){
this.fileList.splice(index, 1)
}
});
},
closeCropper(type:any){
if(this.isUpload){
return
}
if(type == 'error'){
let index = -1
this.fileList.forEach((ele:any,index1:any) => {
if(this.cropperFileData.uid === ele.uid){
index = index1
}
});
if(index > -1){
this.fileList.splice(index, 1)
}
}
let Cropper:any = this.$refs.Cropper
Cropper.closeCropper()
},
deletUploadFile(){
let index = -1
this.fileList.forEach((ele:any,index1:any) => {
if(this.cropperFileData.uid === ele.uid){
index = index1
}
});
if(index > -1){
this.fileList.splice(index, 1)
}
},
handleCropperSuccess(event:any){
let {file, fileData} =event
let new_data = {
...this.upload,
file:file
}
if(this.isUpload){
return
}
this.isUpload = true
const hide = message.loading('loading', 0);
Https.axiosPost('/api/element/upload', new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => {
for(let file of this.fileList){
if(fileData.uid === file.uid){
file.status = 'done'
file.imgUrl = rv.url
file.id = rv.id
file.resData = rv
file.category = this.printCatecoryList[0].name
file.categoryValue = this.printCatecoryList[0].value
}
}
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
this.isUpload = false
this.closeCropper('success')
this.cropperFileData = {name:'',uid:''}
this.store.commit('setPrintboardFile',fileList)
hide()
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
}
).catch(res=>{
let index = -1
this.fileList.forEach((ele:any,index1:any) => {
if(fileData.uid === ele.uid){
index = index1
}
});
if(index > -1){
this.fileList.splice(index, 1)
}
this.cropperFileData = {name:'',uid:''}
this.isUpload = false
this.closeCropper('error')
hide()
});
},
recollection(){
this.useGenerate = {
imgId : '',
imgUrl:1,
checked:false,
level2Type:'',
designType:'',
}
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
let setboard = {
generate:[] as any,
material:[] as any,
moodboard:[] as any,
}
arr.forEach((v:any)=>{
v.pin = v.pin == 1?true:false
this.printCatecoryList.forEach((item:any) => {
if(v.level2Type == item.value){
v.category=item.name
v.categoryValue=item.value
}
});
if(v.type_.type1 == 'generate'){
setboard.generate.push(v)
}else if(v.type_.type1 == 'material'){
setboard.material.push(v)
}else{
setboard.moodboard.push(v)
}
})
this.store.commit("setPrintboardGenerateFiles", setboard.generate);
this.store.commit("setPrintboardMaterialFiles", setboard.material);
this.store.commit("setPrintboardFile", setboard.moodboard);
this.fileList = setboard.moodboard
// this.printImgList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.generatePrintFiles))
this.store.commit('setPrintboardFile',this.fileList)
// this.store.commit('setGeneratePrintFile',this.printImgList)
},
confirmSelect(event:any){
for(let item of event){
let data = {
imgUrl:item.url,
resData:item,
pin:false,
id:item.id,
status:'done',
}
if(this.fileList.length == 15){
message.warning(this.t('PrintboardUpload.jsContent3'))
break
}
this.fileList.push(data)
}
this.store.commit('setPrintboardFile',this.fileList)
},
scaleImage(index:any){
let scaleImage:any = this.$refs.scaleImage
scaleImage.isLike = false
scaleImage.init(this.printboardList,index)
},
setSceneList(data:any){
if(this.scene.value === data.value) return
this.scene = data
let generate:any = this.$refs.Generate
generate.sketchboardList = []
generate.searchPictureName = ''
this.openMenu = false
},
openPrintModel(){
if(this.openMenu)return
document.addEventListener('click',this.removePrintModel)
this.openMenu = true
},
removePrintModel(){
this.openMenu = false
document.removeEventListener('click',this.removePrintModel)
}
}
})
</script>
<style lang="less" scoped>
.printboard_upload_modal{
// padding: calc(1rem*1.2) calc(1rem*1.2) calc(1.8rem*1.2) calc(1rem*1.2);
height: 100%;
display: flex;
.printboard_left_upload{
display: flex;
flex-direction: column;
padding-top: calc(4rem*1.2);
width: 47%;
.switch_type_list {
display: flex;
align-items: center;
position: relative;
z-index: 11;
.switch_type_item {
display: flex;
align-items: center;
// padding: 0 2rem*1.2);
height: calc(4rem*1.2);
background: #fff;
border-radius: calc(0.8rem*1.2);
line-height: calc(4rem*1.2);
font-size: var(--aida-fsize1-8);
// margin-right: 2.2rem*1.2);
margin-right: calc(8rem*1.2);
color: #000;
cursor: pointer;
position: relative;
text-align: center;
transform-origin: left;
transform: scale(1);
transition: 0.3s all;
&.switch_type_item::before {
position: absolute;
content: "";
display: block;
background: #000;
height: calc(.3rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: calc(.6rem*1.2);
width: 0px;
transition: 0.3s all;
}
&.select_swtich {
color: #000;
// font-weight: 900;
transform: scale(1.15);
}
&.select_swtich::before {
width: 100%;
}
.switch_icon {
font-size: calc(1.8rem*1.2);
margin-right: calc(0.8rem*1.2);
}
}
.printMenu{
margin-right: 0;
margin-top: auto;
position: relative;
margin-left: 2rem;
>div{
width: 14rem;
font-size: var(--aida-fsize1-6);
border: 0;
i{
transition: all .3s;
display: inline-block;
margin-left: 1rem;
}
.forbidden{
transform: rotate(180deg);
}
}
ul{
width: 14rem;
}
}
.switch_type_item:nth-child(3){
margin: 0;
}
}
.printboard_body{
display: flex;
flex-direction: column;
// height: calc(100% - 5rem*1.2));
flex: 1;
padding-top: calc(2.5rem*1.2);
height: calc(30rem*1.2);
overflow-x: hidden;
&.printboard_body::-webkit-scrollbar {
display: none;
}
.upload_img_body{
height: calc(100% - 3rem*1.2);
overflow-y: auto;
margin-bottom: calc(1rem*1.2);
&.upload_img_body::-webkit-scrollbar {
display: none;
}
}
.upload_file_item{
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
// margin: 0 2rem*1.2) 2rem*1.2) 0;
display: inline-block;
width: 10rem;
height: 10rem;
border: 1px solid #f5f5f5;
vertical-align: top;
position: relative;
text-align: center;
img{
width: auto;
object-fit: cover;
height: 100%;
max-width: 100%;
}
.upload_file_img_block{
height: 100%;
}
&.upload_component{
}
.checked{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
display: none;
justify-content: center;
align-items: center;
}
&.modal_img_item:hover .checked{
display: flex;
}
.upload_file_item_content{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
cursor: pointer;
.upload_img{
display: block;
max-height: 100%;
width: auto;
max-width: 100%;
object-fit: cover;
}
&:hover .delete_like_file_block{
display: block;
}
}
}
.upload_max_tip {
display: flex;
align-items: center;
justify-content: center;
font-size: calc(1.4rem*1.2);
color: #030303;
.icon-zhuyi {
font-size: calc(1.6rem*1.2);
margin-right: calc(0.7rem*1.2);
}
}
}
}
.modal_right{
flex: 1;
margin-left: calc(3rem*1.2);
display: flex;
flex-direction: column;
.modal_layout{
.modal_text{
font-size: var(--aida-fsize1-4);
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: space-between;
}
}
.modal_layout{
padding-bottom: 4.8rem;
.modal_img{
width: calc(40rem*1.2);
height: calc(5rem*1.2);
overflow-x: hidden;
display: flex;
flex-direction: row;
&.modal_img::-webkit-scrollbar {
display: none;
}
.modal_img_item{
width: calc(4rem*1.2);
height: calc(4rem*1.2);
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
position: relative;
cursor: pointer;
text-align: center;
overflow: hidden;
img{
width: auto;
height: 100%;
object-fit: cover;
max-width: 100%;
}
.checked{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
display: none;
justify-content: center;
align-items: center;
}
&.modal_img_item:hover .checked{
display: flex;
}
}
}
}
.modal_accomplish{
// margin-top: 2rem*1.2);
overflow-x: hidden;
height: calc(30rem*1.2);
display: flex;
flex-direction: column;
flex: 1;
position: relative;
.mark_loading{
position: absolute;
width: 100%;
height: 100%;
z-index: 99;
}
// overflow-x: hidden;
&.modal_accomplish::-webkit-scrollbar {
display: none;
}
.modal_text{
padding-top: calc(2rem*1.2);
padding-block: calc(2rem*1.2);
}
.modal_img{
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
position: relative;
align-content: flex-start;
.modal_imgItem:hover .delete_like_file_block{
// display: block;
opacity: 1;
}
.modal_imgItem{
margin: 0 calc(2rem*1.2) calc(5rem*1.2) 0;
display: inline-block;
// width: calc(10rem*1.2);
// height: calc(10rem*1.2);
width: 30rem;
height: 30rem;
border: 1px solid #f5f5f5;
position: relative;
cursor: pointer;
text-align: center;
&.modal_imgItem:nth-child(even) {
margin-right: 0;
}
img{
object-fit: cover;
height: 100%;
max-width: 100%;
width: auto;
}
&.active{
opacity: 0.5;
// border: 2px solid;
border-radius: calc(1rem*1.2);
transform: scale(0.9);
img {
}
.pin_block{
pointer-events:none;
}
.delete_like_file_block{
pointer-events:none
}
}
}
}
}
}
}
</style>

913
src/component/HomePage/SketchboardUpload.vue
View File

@@ -1,913 +0,0 @@
<template>
<div class="sketchboard_upload_modal">
<div class="modal_left">
<div class="switch_type_list" :class="[driver__.driver?'showEvents':'']">
<div
@click.stop="open(1)"
class="switch_type_item"
:class="[openClick == 1 ? 'select_swtich' : '']"
>
<span>{{ $t('SketchboardUpload.Upload') }}</span>
</div>
<div
@click.stop="open(2)"
class="switch_type_item"
:class="[openClick == 2 ? 'select_swtich' : '']"
>
<span>{{ $t('SketchboardUpload.Library') }}</span>
</div>
<div
@click.stop="open(3)"
class="switch_type_item Guide_1_9"
:class="[openClick == 3 ? 'select_swtich' : '', driver__.driver?'showEvents':'']"
>
<span>{{ $t('SketchboardUpload.Generate') }}</span>
</div>
<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
<div @click.stop="openPrintModel"> <span>{{ scene.name }}<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></span>
</div>
<ul v-show="openMenu">
<li
v-for="item,index in sketchStyleList"
class="printModel_item"
@click.stop="setSceneList(item)"
:title="item.value == 'Pattern'?$t('PrintboardUpload.PatternTitle'):
item.value == 'Logo'?$t('PrintboardUpload.LogoTitle'):
item.value == 'Slogan'?$t('PrintboardUpload.SloganTitle'):''"
>{{ item.name }}</li>
</ul>
</div>
</div>
<div v-show="openClick == 1" class="sketchboard_body">
<div class="upload_img_body scroll_style">
<div class="upload_item">
<div
class="upload_file_item"
v-for="(file, index) in fileList"
:key="file"
>
<div
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
>
<a-spin
:indicator="indicator"
tip="Uploading..."
/>
</div>
<div
class="upload_file_item_content"
v-show="file?.status === 'done'"
>
<img :src="file?.imgUrl" class="upload_img" />
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="file" :driver__="driver__.driver"></sketchCategory>
<div
class="delete_like_file_block"
@click.stop="deleteFile(file)"
>
<span
class="icon iconfont icon-shanchu"
></span>
</div>
</div>
<!-- <div
class="pin_block"
v-show="file?.status === 'done'"
>
<a-checkbox v-model:checked="file.pin"
>{{ $t('SketchboardUpload.PIN') }}</a-checkbox
>
</div> -->
</div>
<div
class="upload_file_item upload_component"
v-show="sketchboardList.length < 20"
>
<a-upload
:action="uploadUrl + '/api/element/upload'"
:capture="null"
list-type="picture-card"
:data="{
...upload,
}"
:multiple="!driver__.driver"
:before-upload="beforeUpload"
:headers="{ Authorization: token }"
v-model:file-list="fileList"
:maxCount="20 - sketchboardList.length+fileList.length"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
<div
class="upload_tip_block"
v-show="sketchboardList.length < 20"
>
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
</div>
</a-upload>
</div>
</div>
</div>
<div class="upload_max_tip">
<span class="icon iconfont icon-zhuyi"></span>
<span>{{ $t('SketchboardUpload.Maximum',{maxImg:20}) }}</span>
</div>
</div>
<Material
v-show="openClick == 2"
ref="Material"
msg="Sketchboard"
@confirmSelect="confirmSelect"
:disignTypeList="sketchCatecoryList"
@setLibrary = setSetchboardGenerate
></Material>
<Generate
v-show="openClick == 3"
ref="Generate"
msg="Sketchboard"
:gender="upload.gender"
:scene="scene"
:sketchCatecoryList="sketchCatecoryList"
></Generate>
</div>
<div class="modal_right">
<div class="modal_layout">
<div class="modal_text">
<div>{{ $t('SketchboardUpload.Thumbnail') }}</div>
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
</div>
<!-- <div class="modal_img modal_img_x" v-mousewheel>
<div class="mousewheel">
<div class="modal_img_item" v-for="item,index in sketchboardList" :key="item" @click="deleteFile(item)">
<img v-lazy="item.imgUrl">
<div class="checked" >
<i class="fi fi-rr-trash"></i>
</div>
</div>
</div>
</div> -->
</div>
<div class="modal_accomplish">
<div class="modal_img">
<div v-for="item,index in sketchboardList" :key="item" class="modal_imgItem" :class="[driver__.driver?'showEvents':'']" >
<img v-lazy="item.imgUrl">
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="sketchboardList" :isSpread="true" :item="item" :driver__="driver__.driver"></sketchCategory>
<!-- 在sketch 和print暂时关闭like -->
<!-- <div
class="delete_like_file_block left1"
:class="[driver__.driver?'hideEvents':'']"
>
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
</div> -->
<div class="delete_like_file_block left" :class="[driver__.driver?'hideEvents':'']">
<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
</div>
<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteFile(item)">
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
<div class="pin_block">
<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
</div>
</div>
</div>
</div>
</div>
<scaleImage ref="scaleImage"></scaleImage>
<!-- <layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout> -->
</div>
</template>
<script lang="ts">
import { defineComponent, h, ref, createVNode,computed,inject, nextTick } from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { getCookie } from "@/tool/cookie";
import { getUploadUrl } from "@/tool/util";
import GO from "@/tool/GO";
import { useStore } from "vuex";
import { message, Upload, Modal } from "ant-design-vue";
import Material from "@/component/HomePage/Material.vue";
import Generate from "@/component/HomePage/Generate.vue";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import { Https } from "@/tool/https";
import { openGuide,driverObj__ } from "@/tool/guide";
import { useI18n } from "vue-i18n";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
export default defineComponent({
components: { Material, Generate,scaleImage,sketchCategory },
setup() {
let fileList: any = ref([
]);
let openClick: any = ref(1);
let store:any =useStore()
let sketchCatecoryList:any = computed(()=>{
return store.state.Workspace.probjects.positionList
})
let sketchCatecoryAllList:any = computed(()=>{
return store.state.Workspace.workspaceAllPosition
})
let workspace:any = ref({})
let sketchboardList:any = computed(()=>{
return store.state.UploadFilesModule.sketchboard
})
let {t} = useI18n()
let driver__:any = inject('driver__')
let isTest = ref()
let useGenerate:any = ref({
imgId : '',
imgUrl:1,
checked:false,
level2Type:'',
designType:'',
})
let openMenu = ref(false)
let sketchStyleList:any = computed(()=>{
return store.state.UserHabit.SketchGenerateType
})
let scene = ref({
name: t('SketchboardUpload.GenerateSketch'),
value:'generate'
})
return {
fileList,
openClick,
store,
sketchCatecoryList,
sketchCatecoryAllList,
workspace,
sketchboardList,
t,
driver__,
isTest,
useGenerate,
scene,
openMenu,
sketchStyleList,
};
},
data() {
return {
swtich_type: "upload",
indicator: h(LoadingOutlined, {
style: {
fontSize: "2.4rem",
},
spin: true,
}),
upload: {
isPin: 0,
level1Type: "Sketchboard",
gender:'',
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token: "",
uploadUrl: "",
workspaceCom:{},
isTextarea:false,
isInputFocus:false,
};
},
computed: {
getSketchLabel(value) {
return (value: any) => {
let lable = "";
for (let item of this.sketchCatecoryList) {
if (item.value === value) {
lable = item.label;
break;
}
}
return lable;
};
},
},
directives:{
mousewheel:{
mounted (el) {
// let bodyDom:any = document.getElementsByClassName('right_content_block')[0]
let dom:any = document.getElementsByClassName('modal_img_x')
let mouseover = ()=>{
// bodyDom.classList.add('active')
}
let mouseleave = ()=>{
// bodyDom.classList.remove('active')
}
dom.forEach((item:any) => {
item.addEventListener('mouseover',mouseover)
item.addEventListener('mouseleave',mouseleave)
});
el.addEventListener('wheel',(e:WheelEvent)=>{
let num = 0
if(e.deltaY > 0){
num = 25
}else{
num = -25
}
el.scrollBy(num, 0);
},true)
}
}
},
watch:{
workspaceCom(newVal,oldVal){
this.workspace = newVal
this.upload.gender = newVal?.sexEnum?.value
},
sketchboardList:{
handler(newVal:any,oldVal:any){
if(newVal.length>=2 && this.driver__.driver&& newVal.length!=oldVal.length){
if(this.driver__.driver){
// driverObj__.moveTo(22)
}
}
}
},
driver__:{
handler(newVal,oldVal){
if(newVal.index >= 15 && newVal.index <= 16){
if(this.driver__.driver){
// driverObj__.moveTo(15)
}
}else{
}
}
}
},
mounted() {
this.token = getCookie("token") || "";
let isTest:any = getCookie('isTest')
this.isTest =JSON.parse(isTest)
this.uploadUrl = getUploadUrl();
this.workspaceCom = computed(()=>{
return this.store?.state?.Workspace?.workspace
})
let Generate:any = this.$refs.Generate
if(this.driver__.driver){
Generate.searchPictureName = 'A detailed sketch of an elegant blouse with a high neck, flowing sleeves, and lace trim, highlighting texture and style.'
}else{
Generate.searchPictureName = ''
}
},
methods: {
setSetchboardGenerate(item:any){
this.useGenerate.imgId = item.imgId
this.useGenerate.imgUrl = item.imgUrl
this.useGenerate.level2Type = item.level2Type
this.useGenerate.designType = item.designType
let Material:any = this.$refs.Material
let generate:any = this.$refs.Generate
if(item.designType == 'collection'){
}else {
generate.sketchboardList.forEach((item:any) => {
item.checked = false
});
}
},
open(num: Number) {
this.openClick = num;
if (num == 2) {
let material: any = this.$refs.Material;
material.init("Sketchboard");
} else if (num == 3) {
// let Generate:any = this.$refs.Generate
// Generate.init('generate')
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
}
},
scaleImage(index:any){
let scaleImage:any = this.$refs.scaleImage
scaleImage.isLike = false
scaleImage.init(this.sketchboardList,index)
},
fileUploadChange(data: any) {
let file = data.file;
let bor = true
if (file.status === "done") {
let res = JSON.parse(file.xhr.response);
if(res.errCode == 0){
let category:any={
value:'',
name:'',
}
this.sketchCatecoryList.forEach((item:any) => {
if(item.value == res.data.level2Type){
category.value = item?.value
category.name = item?.name
}
});
file.imgUrl = res.data.url;
file.resData = res.data;
// file.pin = false;
//category用来数据处理
file.categoryValue = category?.value;
file.category = category?.name;
file.categoryShow = false;
file.id_ = GO.id++
file.id = res.data.id
file.type_ = {
type1:'upload',
type2:'Sketchboard'
};
let fileList = this.fileList.filter(
(v: any) => v.status === "done"
);
this.store.commit("setSketchboardFile", fileList);
}else{
bor = false
}
} else if (file.status === "error") {
bor = false
}
if(!bor){
let index = -1;
let res:any = JSON.parse(file.xhr.response);
this.fileList.forEach((ele: any, index1: any) => {
if (file.uid === ele.uid) {
index = index1;
}
});
if (index > -1) {
this.fileList.splice(index, 1);
}
// message.warning(file.name + this.t('SketchboardUpload.jsContent1'));
message.warning(res.errMsg);
}
},
beforeUpload(file: any) {
const isJpgOrPng =
file.type === "image/jpeg" ||
file.type === "image/png" ||
file.type === "image/jpg" ||
file.type === "image/bmp";
if (!isJpgOrPng) {
message.info(this.t('SketchboardUpload.jsContent2'));
}
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isLt2M) {
message.info(this.t('SketchboardUpload.jsContent3'));
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
},
deleteFile(item: any) {
if(item?.type_?.type1 == 'generate' || item?.type_?.type1 == 'material'){
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
this.store.commit("addGenerateMaterialFils", item);
}else{
this.fileList = this.store.state.UploadFilesModule.sketchboardFiles
let moodboard
this.store.state.UploadFilesModule.sketchboardFiles.forEach((items:any,index:Number)=>{
if(items.id_ == item.id_){
moodboard = index
}
})
this.fileList.splice(moodboard,1)
this.store.commit("setSketchboardFile", this.fileList);
}
},
likeFile(item:any,str:string){
if(str == 'like'){
let data = {
generateDetailId:item.id,
level1Type:"Sketchboard",
level2Type: item.categoryValue?item.categoryValue:item.level2Type,
gender:this.workspace.sexEnum.value,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
}
Https.axiosPost(Https.httpUrls.generateLike, data).then(
(rv) => {
item.like = true
}
).catch(res=>{
});
}else{
let data = {
generateDetailId:item.id,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
}
Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
(rv) => {
item.like = false
}
).catch(res=>{
});
}
},
recollection() {
this.useGenerate = {
imgId : '',
imgUrl:1,
checked:false,
level2Type:'',
designType:''
}
let arr = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.sketchboardFiles
)
);
let setboard = {
generate:[] as any,
material:[] as any,
moodboard:[] as any,
}
arr.forEach((v:any)=>{
v.pin = v.pin == 1?true:false
this.sketchCatecoryAllList.forEach((item:any) => {
if(v.level2Type == item.value){
v.category=item.name
v.categoryValue=item.value
}
});
if(v.type_.type1 == 'generate'){
setboard.generate.push(v)
}else if(v.type_.type1 == 'material'){
setboard.material.push(v)
}else{
setboard.moodboard.push(v)
}
})
this.store.commit("setSketchboardGenerateFiles", setboard.generate);
this.store.commit("setSketchboardMaterialFiles", setboard.material);
this.store.commit("setSketchboardFile", setboard.moodboard);
this.fileList = setboard.moodboard
},
confirmSelect(event: any) {
for (let item of event) {
let data = {
imgUrl: item.url,
resData: item,
pin: false,
status: "done",
category: item.level2Type || "Outwear",
categoryShow: false,
};
if (this.fileList.length == 15) {
message.warning(
this.t('SketchboardUpload.jsContent4')
);
break;
}
this.fileList.push(data);
}
this.store.commit("setSketchboardFile", this.fileList);
},
setSceneList(data:any){
if(this.scene.value === data.value) return
this.scene = data
let generate:any = this.$refs.Generate
generate.sketchboardList = []
generate.searchPictureName = ''
this.openMenu = false
},
openPrintModel(){
if(this.openMenu)return
document.addEventListener('click',this.removePrintModel)
this.openMenu = true
},
removePrintModel(){
this.openMenu = false
document.removeEventListener('click',this.removePrintModel)
}
},
});
</script>
<style lang="less" scoped>
.sketchboard_upload_modal {
height: 100%;
display: flex;
.modal_left {
padding-top: calc(4rem*1.2);
width: 47%;
display: flex;
flex-direction: column;
.switch_type_list {
display: flex;
align-items: center;
position: relative;
.switch_type_item {
display: flex;
align-items: center;
// padding: 0 2rem*1.2);
height: calc(4rem*1.2);
background: #fff;
border-radius: calc(0.8rem*1.2);
line-height: calc(4rem*1.2);
font-size: var(--aida-fsize1-8);
// margin-right: 2.2rem*1.2);
margin-right: calc(8rem*1.2);
color: #000;
cursor: pointer;
position: relative;
text-align: center;
transform-origin: left;
transform: scale(1);
transition: 0.3s all;
&.switch_type_item::before {
position: absolute;
content: "";
display: block;
background: #000;
height: calc(.3rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: calc(.6rem*1.2);
width: 0px;
transition: 0.3s all;
}
&.select_swtich {
color: #000;
// font-weight: 900;
transform: scale(1.15);
}
&.select_swtich::before {
width: 100%;
}
.switch_icon {
font-size: calc(1.8rem*1.2);
margin-right: calc(0.8rem*1.2);
}
}
.printMenu{
margin-right: 0;
margin-left: 2rem;
margin-top: auto;
position: relative;
>div{
width: 18rem;
font-size: var(--aida-fsize1-6);
border: 0;
i{
transition: all .3s;
display: inline-block;
margin-left: 1rem;
}
.forbidden{
transform: rotate(180deg);
}
}
ul{
width: 18rem;
}
}
.switch_type_item:nth-child(3){
margin: 0;
}
}
.sketchboard_body {
// height: calc(100% - 5rem*1.2));
flex: 1;
padding-top: calc(2.5rem*1.2);
height: calc(30rem*1.2);
overflow-x: hidden;
display: flex;
flex-direction: column;
&.moodboard_body::-webkit-scrollbar {
display: none;
}
.upload_img_body {
height: calc(100% - 3rem*1.2);
overflow-y: auto;
margin-bottom: calc(1rem*1.2);
&.upload_img_body::-webkit-scrollbar {
display: none;
}
}
.upload_file_item{
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
// margin: 0 2rem*1.2) 2rem*1.2) 0;
display: inline-block;
width: 10rem;
height: 10rem;
border: 1px solid #f5f5f5;
vertical-align: top;
position: relative;
img{
width: 100%;
height: 100%;
}
&.upload_component {
border: none;
}
.checked{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
display: none;
justify-content: center;
align-items: center;
}
&.modal_img_item:hover .checked{
display: flex;
}
.upload_file_item_content{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
cursor: pointer;
.upload_img{
display: block;
max-height: 100%;
max-width: 100%;
}
&:hover .delete_like_file_block{
// display: block;
opacity: 1;
}
}
}
.upload_max_tip {
display: flex;
align-items: center;
justify-content: center;
font-size: calc(1.4rem*1.2);
color: #030303;
.icon-zhuyi {
font-size: calc(1.6rem*1.2);
margin-right: calc(0.7rem*1.2);
}
}
}
}
.modal_right{
flex: 1;
margin-left: calc(3rem*1.2);
display: flex;
flex-direction: column;
.modal_layout,.modal_accomplish{
.modal_text{
font-size: var(--aida-fsize1-4);
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: space-between;
}
}
.modal_layout{
padding-bottom: 4.8rem;
.modal_img{
width: calc(40rem*1.2);
height: calc(5rem*1.2);
// overflow-x: hidden;
display: flex;
flex-direction: row;
overflow-y: hidden;
&.modal_img::-webkit-scrollbar {
display: none;
}
.mousewheel{
display: flex;
}
.modal_img_item{
width: calc(4rem*1.2);
height: calc(4rem*1.2);
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
position: relative;
text-align: center;
cursor: pointer;
overflow: hidden;
flex-shrink: 0;
img{
// width: 100%;
width: auto;
height: 100%;
object-fit: contain;
}
.checked{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
display: none;
justify-content: center;
align-items: center;
}
&.modal_img_item:hover .checked{
display: flex;
}
}
}
}
.modal_accomplish{
// margin-top: 2rem*1.2);
overflow-x: hidden;
height: calc(30rem*1.2);
display: flex;
flex-direction: column;
flex: 1;
position: relative;
.mark_loading{
position: absolute;
z-index: 99;
}
// overflow-x: hidden;
&.modal_accomplish::-webkit-scrollbar {
display: none;
}
.modal_text{
padding-top: calc(2rem*1.2);
padding-block:calc(2rem*1.2);
}
.input_box{
z-index: 1;
input{
&.forbidden{
cursor:not-allowed;
}
}
}
.modal_img{
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
position: relative;
.modal_imgItem{
margin: 0 calc(2rem*1.2) calc(4rem*1.2) 0;
display: inline-block;
width: calc(10rem*1.2);
height: calc(10rem*1.2);
width: 30rem;
height: 30rem;
border: 1px solid #f5f5f5;
position: relative;
cursor: pointer;
text-align: center;
&.modal_imgItem:nth-child(even) {
margin-right: 0;
}
&:hover .delete_like_file_block{
display: block;
opacity: 1;
}
img{
object-fit: contain;
width: 100%;
height: 100%;
}
&.active{
opacity: 0.5;
// border: 2px solid;
border-radius: calc(1rem*1.2);
transform: scale(0.9);
// img {
// }
.operate_file_block{
pointer-events:none
}
.pin_block{
pointer-events:none
}
.delete_like_file_block{
pointer-events:none
}
}
}
}
}
}
}
</style>

86
src/component/HomePage/generalMenu.vue
View File

@@ -15,42 +15,44 @@
</div>
<div class="icon iconfont icon-xiala" :class="{active:openClick}"></div>
</div>
<ul :class="driverClass.class2" v-show="openClick" :style="{'width':selectWidth}">
<li v-for="listItem,index in dataList" :class="{active:deleteItem == index,hover:((item?.label && item?.label == listItem?.label) || (item?.name && item?.name == listItem?.name))}" class="printModel_item" @click="setprintModel(listItem,index)">
<a-popover placement="right" v-if="isCanvas">
<template #content>
<!-- <span v-if="item.img != -1 && index == dataList?.length -1 " class="icon iconfont icon-shanchu" style="cursor: pointer; position: absolute; right: 10px; top: 10px;" @click.stop="deleteFile(item)"></span> -->
<img v-if="listItem.img != -1" style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
<!-- <div v-else-if="item.img == -1" class="generalMenu_printModel_upload ">
<i class="fi fi-br-upload input_border" style="width: 8rem; height: 8rem;padding: 0;" :title="$t('Generate.uploadTitle')">
<a-upload
style="height: 100%;"
class="search_upImg"
:capture="null"
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:data="{
...upload,
}"
:maxCount='1'
:headers="{ Authorization: token }"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
</a-upload>
</i>
</div> -->
<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>
<ul :class="driverClass.class2" v-show="openClick" :style="{'width':selectWidth,...ulStyle}">
<div>
<li v-for="listItem,index in dataList" :class="{active:deleteItem == index,hover:((item?.label && item?.label == listItem?.label) || (item?.name && item?.name == listItem?.name))}" class="printModel_item" @click="setprintModel(listItem,index)">
<a-popover placement="right" v-if="isCanvas">
<template #content>
<!-- <span v-if="item.img != -1 && index == dataList?.length -1 " class="icon iconfont icon-shanchu" style="cursor: pointer; position: absolute; right: 10px; top: 10px;" @click.stop="deleteFile(item)"></span> -->
<img v-if="listItem.img != -1" style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
<!-- <div v-else-if="item.img == -1" class="generalMenu_printModel_upload ">
<i class="fi fi-br-upload input_border" style="width: 8rem; height: 8rem;padding: 0;" :title="$t('Generate.uploadTitle')">
<a-upload
style="height: 100%;"
class="search_upImg"
:capture="null"
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:data="{
...upload,
}"
:maxCount='1'
:headers="{ Authorization: token }"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
</a-upload>
</i>
</div> -->
<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>
</template>
<span v-if="listItem?.label">{{ listItem?.label }}</span>
<span v-else>{{ listItem?.name }}</span>
</a-popover>
<div v-else>
<span v-if="listItem?.label">{{ listItem?.label }}</span>
<span v-else>{{ listItem?.name }}</span>
</div>
</li>
</template>
<span v-if="listItem?.label">{{ listItem?.label }}</span>
<span v-else>{{ listItem?.name }}</span>
</a-popover>
<div v-else>
<span v-if="listItem?.label">{{ listItem?.label }}</span>
<span v-else>{{ listItem?.name }}</span>
</div>
</li>
</div>
</ul>
</div>
</template>
@@ -91,6 +93,10 @@ import { message, Upload, Modal } from "ant-design-vue";
type:Object,
default:{}
},
ulStyle:{
type:Object,
default:{}
},
selectWidth:{
type:String,
default:'20rem'
@@ -241,12 +247,16 @@ import { message, Upload, Modal } from "ant-design-vue";
}
ul{
position: absolute;
border: 1px solid;
width: 20rem;
margin-top: calc(.3rem*1.2);
border-radius: calc(1rem*1.2);
z-index: 10;
overflow: hidden;
z-index: 3;
border-radius: calc(1rem*1.2);
> div{
overflow-y: auto;
height: 100%;
}
li{
// background: rgba(0,0,0,.2);
background: #fff;

2
src/component/HomePage/productImg.vue
View File

@@ -16,7 +16,7 @@
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>

25
src/component/HomePage/renew.vue
View File

@@ -206,23 +206,24 @@
</div>
</div>
<div class="gallery_btn gallery_btn_radius" @click="payment">
{{ $t("Renew.Continue") }}
{{ $t("upgradePlan.Continue") }}
</div>
<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
<label>
<!-- <input type="checkbox" v-model="clause" /> -->
<span class="generalModelDescription"
>{{ $t("upgradePlan.policy")}}
<!-- <a
<a
href="https://code-create.com.hk/aida-terms-and-conditions/"
target="_blank"
>{{ $t("upgradePlan.policy2") }}</a
>{{ $t("upgradePlan.policy3")}}
target="_blank">
{{ $t("upgradePlan.policy1") }}
</a>
&
<a
href="https://code-create.com.hk/aida-subscription-agreement/"
target="_blank"
>{{ $t("upgradePlan.policy4") }}</a
> -->
target="_blank">
{{ $t("upgradePlan.policy2") }}
</a>
<!-- . * -->
</span
>
@@ -233,6 +234,10 @@
<label class="payIcon">
<img class="stripe" src="@/assets/images/icon/stripe.svg" alt="">
<img class="alipay" src="@/assets/images/icon/alipay.svg" alt="">
<img class="alipay" src="@/assets/images/icon/jcbPay.svg" alt="">
<img class="alipay" src="@/assets/images/icon/mastercardPay.svg" alt="">
<img class="alipay" src="@/assets/images/icon/yinlianPay.svg" alt="">
<img class="alipay" src="@/assets/images/icon/visaPay.svg" alt="">
</label>
</div>
<!-- <div class="paySecure">
@@ -300,7 +305,7 @@ export default defineComponent({
value: "Month",
label: "Monthly",
},
PaymentType: "",
PaymentType: "CreditCard",
promotionData: {
code: "",
error: "",
@@ -918,7 +923,7 @@ export default defineComponent({
border-radius: 10px;
cursor: pointer;
padding: 0.3rem 4rem;
background: #39215b;
background: #000;
color: #fff;
border: none;
margin: 0 2rem;

146
src/component/HomePage/scaleImage.vue
View File

@@ -14,7 +14,7 @@
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
@@ -26,7 +26,7 @@
</div>
<div class="scaleImage_content">
<div v-if="isProductimg" class="productImg_modal">
<div class="productImg_left">
<div class="productImg_left generalModel_state">
<div class="productImg_content_item_title productImg_content_item_title_menu">
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
@@ -34,26 +34,27 @@
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.SelectionFunction')}}</span>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction" style="margin-bottom: 1rem;">
<a-select style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction generalModel_state_item" style="margin-bottom: 1rem;">
<a-select size="large" style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Similarity')}}</span>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_similarity ">
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && speedData.value != 'flux'" class="productImg_content_item_similarity ">
<a-slider class="system_silder"
v-model:value="productimgSimilarity"
:tooltipVisible="false"
:step="5"
@afterChange="()=>{}"
:max="70"
>
</a-slider>
<input type="number" readonly v-model="productimgSimilarity">
<input style="margin-left: 2rem;" type="number" readonly v-model="productimgSimilarity">
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.RelightDirection')}}</span>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_Direction">
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_Direction generalModel_state_item">
<!-- <a-slider class="system_silder"
v-model:value="similarity"
@afterChange="setSimilarity"
@@ -61,7 +62,7 @@
:step="5"
>
</a-slider> -->
<a-select style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
<a-select size="large" style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Highlight')}}</span>
@@ -75,28 +76,33 @@
:step="0.1"
>
</a-slider>
<input type="number" readonly v-model="productimgBrightenValue">
<input style="margin-left: 2rem;" type="number" readonly v-model="productimgBrightenValue">
</div>
<div class="input_border productImg_content_item_generate">
<div class="input_box">
<div class="input_box_btnBox">
<input
<!-- <input
class="search_input"
:placeholder="$t('Generate.inputContent1')"
v-model="productimgSearchName"
@keydown.enter="getPrductimg()"
/>
<i v-show="!productimgIsTextarea" class="fi fi-br-expand" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
<i v-show="productimgIsTextarea" class="fi fi-bs-compress" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
<i v-show="productimgIsTextarea" class="fi fi-bs-compress" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i> -->
<textarea
ref="textarea"
class="textarea "
:placeholder="$t('Generate.inputContent1')"
@input="ifMaximumLength"
@keydown.enter="getPrductimg()"
v-model="productimgSearchName"
></textarea>
</div>
<textarea
v-show="productimgIsTextarea"
class="search_textarea "
@keydown.enter="getPrductimg()"
v-model="productimgSearchName"
></textarea>
</div>
</div>
<div class="selectText" v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && speedData.value == 'flux'">
<div :title="$t('poseTransfer.hint')" @click="()=>{productimgSearchName = $t('poseTransfer.hint');ifMaximumLength()}">{{ $t('poseTransfer.hint') }}</div>
</div>
<div class="generage_btn_box" style="margin-left: auto;">
<div class="generage_btn started_btn" v-show="!productimgIsProductimg">
<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getPrductimg()"></i>
@@ -130,7 +136,7 @@
<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>
<img v-else :src="scaleImageList[scaleImageIndex]?.imgUrl || scaleImageList[scaleImageIndex]?.url">
<img v-else :style="{'max-width':maxWidth}" :src="scaleImageList[scaleImageIndex]?.imgUrl || scaleImageList[scaleImageIndex]?.url">
<!-- <div class="img_operate_block" v-if="isLike">
<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
@@ -189,6 +195,10 @@ export default defineComponent({
type:String,
default:''
},
maxWidth:{
type:String,
default:'50rem'
},
},
setup(props:any,{emit}) {
const store = useStore();
@@ -198,6 +208,7 @@ export default defineComponent({
let {t} = useI18n()
let productimg = reactive({
UpgradePlan:null,
textarea:null as any,
isProductimg:false,
productimgSearchName:'',
productimgIsTextarea:false,
@@ -226,24 +237,24 @@ export default defineComponent({
],
toPorductImg:[
{
title:'Generate with high quality',
label:'High',
relightLabel:'Relight',
value:'',
},{
title:'',
label:'FLUX',
relightLabel:'Edit',
value:'flux',
},{
title:'Generate with high quality',
label:'High',
relightLabel:'Relight',
value:'',
},
]
},
speedState:false,
speedData:{
title:'Generate high-quality images',
relightLabel:'Relight',
label:'High',
value:'',
title:'',
label:'FLUX',
relightLabel:'Edit',
value:'flux',
},
})
const openSpeed = ()=>{
@@ -449,6 +460,20 @@ export default defineComponent({
loadingShow.value = false
});
}
const ifMaximumLength = async ()=>{
await nextTick()
let textarea = productimg.textarea;
if(!textarea)return
const scrollTop = textarea.scrollTop;
// 2. 计算单行高度
const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20; // 默认20px
// 3. 重置高度为1行
textarea.style.height = lineHeight + 'px';
// 4. 计算实际需要的高度
const newHeight = Math.max(lineHeight, textarea.scrollHeight);
textarea.style.height = newHeight + 'px';
textarea.scrollTop = scrollTop;
}
return {
t,
...toRefs(productimg),
@@ -469,6 +494,7 @@ export default defineComponent({
getPrductimg,
removeProductimg,
submitBase64Data,
ifMaximumLength,
};
},
data() {
@@ -508,6 +534,8 @@ export default defineComponent({
}
this.speedData = JSON.parse(JSON.stringify(this.speedList[0]))
document.addEventListener('keydown',this.setKeydown)
this.$nextTick()
this.ifMaximumLength()
},
cancelDsign(){
this.scaleImage = false
@@ -595,19 +623,12 @@ export default defineComponent({
overflow: visible !important;
}
</style>
<style lang="less">
<style lang="less" >
.scaleImage_modal {
.ant-modal-body {
display: flex;
flex-direction: column;
}
.productImg_content_item_title{
font-weight: 600;
font-size: 1.6rem;
&.productImg_content_item_title_menu{
margin-bottom: 6rem;
}
}
.scaleImage_content{
display: flex;
justify-content: center;
@@ -619,11 +640,14 @@ export default defineComponent({
position: relative;
left: 0;
z-index: 9;
width: 24%;
.productImg_left{
width: 100%;
display: flex;
height: 100%;
flex-direction: column;
align-items: stretch;
flex-wrap: nowrap;
.input_box_btnBox{
width: 100%;
}
@@ -638,6 +662,56 @@ export default defineComponent({
justify-content: space-around;
margin-top: 0;
}
.productImg_content_item_title{
font-weight: 600;
font-size: 1.6rem;
margin-bottom: 1rem;
&.productImg_content_item_title_menu{
margin-bottom: 6rem;
:deep(.generalMenu_printModel){
margin: 0;
width: 100%;
> div,> ul{
width: 100%;
}
}
.productImg_content_item_title_menubtn{
font-size: 1.6rem;
font-weight: 500;
}
}
&.productImg_content_item_title_similarity{
// margin-bottom: 8rem;
}
}
.productImg_content_item_Direction{
padding-bottom: 1rem;
margin-right: 0;
margin-bottom: 1rem;
}
.selectText{
margin-bottom: 2rem;
display: flex;
width: 100%;
> div{
background: #efeff1;
width: 100%;
font-size: 1.6rem;
margin-right: 1.2rem;
border-radius: 1.6rem;
cursor: pointer;
padding: 1.2rem;
white-space: nowrap; /* 文本不换行 */
overflow: hidden; /* 溢出部分隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
&:hover{
background: #f5f5f5;
}
&:first-child{
margin-right: 0;
}
}
}
.productImg_content_item_similarity{
padding-bottom: 2.4rem;
display: flex;

35
src/component/HomePage/sketchCategory.vue
View File

@@ -72,6 +72,10 @@ export default defineComponent({
type:Boolean,
default:false,
},
upDataType:{
type:String,
default:'library',
},
isSpread:{
type:Boolean,
default:false,
@@ -123,16 +127,29 @@ export default defineComponent({
}
let setSketchLibrary = (item:any)=>{
let data = {
libraryId:[item.id],
level2Type:item.categoryValue,
if(props.upDataType == 'element'){
let data = {
elementId:item.id,
level2Type:item.categoryValue,
}
Https.axiosGet(Https.httpUrls.updateElementLevel2Type,{params:data}).then(
(rv: any) => {
emit('upTypeSucced')
}
).catch((res)=>{
});
}else{
let data = {
libraryId:[item.id],
level2Type:item.categoryValue,
}
Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
(rv: any) => {
emit('upTypeSucced')
}
).catch((res)=>{
});
}
Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
(rv: any) => {
emit('upTypeSucced')
}
).catch((res)=>{
});
}
onMounted(()=>{
if(!props.item.category){