generate交互更新
This commit is contained in:
X1627315083
@@ -264,12 +264,12 @@ export default defineComponent({
|
||||
}
|
||||
let data = this.workspaceItem
|
||||
delete data.isLastIndex
|
||||
this.putWorkspace(data,'')
|
||||
this.putWorkspace(data,this.workspaceItem.id)
|
||||
this.openType.model = false
|
||||
// this.getDetail(this.workspaceItem.id)
|
||||
this.store.commit("setWorkspace", this.workspaceItem);
|
||||
}else{
|
||||
this.getworkspace()
|
||||
this.getworkspace('detail')
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -281,19 +281,20 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
},
|
||||
'workspaceItem.id_':{
|
||||
'workspace.id':{
|
||||
handler(newVal:any,oldVal:any){
|
||||
this.workspace.workspaceList.forEach((v:any)=>{
|
||||
if(v.id == this.workspaceItem.id_){
|
||||
this.workspaceItem = v
|
||||
this.workspaceItem.id_ = v.id
|
||||
}
|
||||
if(v.id == oldVal){
|
||||
delete v.isLastIndex
|
||||
this.putWorkspace(v,newVal)
|
||||
}
|
||||
})
|
||||
this.getMannequins()
|
||||
// this.workspace.workspaceList.forEach((v:any)=>{
|
||||
// if(v.id == this.workspaceItem.id_){
|
||||
// this.workspaceItem = v
|
||||
// this.workspaceItem.id_ = v.id
|
||||
// }
|
||||
// if(v.id == oldVal){
|
||||
// delete v.isLastIndex
|
||||
// this.putWorkspace(v,newVal)
|
||||
// this.getDetail(newVal)
|
||||
// }
|
||||
// })
|
||||
this.getDetail(newVal)
|
||||
}
|
||||
},
|
||||
'openType.workspace':{
|
||||
@@ -334,10 +335,8 @@ export default defineComponent({
|
||||
// new Promise((resolve) => {
|
||||
// this.getPosition(resolve)
|
||||
// })
|
||||
await this.getPosition()
|
||||
if(this.workspaceItem.id == -1){
|
||||
this.getworkspace()
|
||||
}
|
||||
await this.getPosition()//获取衣服类型
|
||||
this.getworkspace('')
|
||||
this.getSex()
|
||||
},
|
||||
directives:{
|
||||
@@ -449,7 +448,7 @@ export default defineComponent({
|
||||
// this.getworkspace()
|
||||
// this.setPosition('')
|
||||
},
|
||||
getworkspace(){
|
||||
getworkspace(str:any){
|
||||
// Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:3}}).then((rv: any) => {
|
||||
// if (rv) {
|
||||
// console.log(rv,'workspace');
|
||||
@@ -464,58 +463,23 @@ export default defineComponent({
|
||||
|
||||
Https.axiosPost(Https.httpUrls.workspaceList,data).then((rv: any) => {
|
||||
if (rv) {
|
||||
this.getDetail(rv.id)
|
||||
this.total = rv.page.total
|
||||
// rv.page.content.forEach((v:any) => {
|
||||
// v.id_ = v.id
|
||||
// if(v.position == "Overall"){
|
||||
// v.overallSingle = false
|
||||
// }else{
|
||||
// v.overallSingle = true
|
||||
// }
|
||||
// v.putName = false
|
||||
// });
|
||||
this.workspace.id = rv.id
|
||||
this.total = rv.page.total
|
||||
this.workspace.workspaceList = rv.page.content
|
||||
return
|
||||
rv.page.content.forEach((v:any) => {
|
||||
// v.id_ = v.id
|
||||
// if(v.position == "Overall"){
|
||||
// v.overallSingle = false
|
||||
// }else{
|
||||
// v.overallSingle = true
|
||||
// }
|
||||
// v.putName = false
|
||||
if(v.id == (this.workspaceItem.id == -1 ?rv.id:this.workspaceItem.id)){
|
||||
// this.workspaceItem = v
|
||||
// this.workspaceItem.keyWord = {
|
||||
// Moodboard:[{
|
||||
// name:'Moodboard',
|
||||
// id:1,
|
||||
// },{
|
||||
// name:'Moodboard',
|
||||
// id:2,
|
||||
// },{
|
||||
// name:'Moodboard',
|
||||
// id:3,
|
||||
// }],
|
||||
// Printboard:[{
|
||||
// name:'Printboard',
|
||||
// id:1,
|
||||
// },{
|
||||
// name:'Printboard',
|
||||
// id:2,
|
||||
// },{
|
||||
// name:'Printboard',
|
||||
// id:3,
|
||||
// }],
|
||||
// Sketchboard:[{
|
||||
// name:'Sketchboard',
|
||||
// id:1,
|
||||
// },{
|
||||
// name:'Sketchboard',
|
||||
// id:2,
|
||||
// },{
|
||||
// name:'Sketchboard',
|
||||
// id:3,
|
||||
// }],
|
||||
// }
|
||||
// this.setMannequinsSex()
|
||||
// this.setPosition('')
|
||||
}
|
||||
});
|
||||
|
||||
// this.workspaceItem = v
|
||||
|
||||
// this.setMannequinsSex()
|
||||
// this.setPosition('')
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -527,12 +491,43 @@ export default defineComponent({
|
||||
}else{
|
||||
rv.overallSingle = true
|
||||
}
|
||||
rv.keyWord = {
|
||||
Moodboard:[{
|
||||
name:'Moodboard',
|
||||
id:1,
|
||||
},{
|
||||
name:'Moodboard',
|
||||
id:2,
|
||||
},{
|
||||
name:'Moodboard',
|
||||
id:3,
|
||||
}],
|
||||
Printboard:[{
|
||||
name:'Printboard',
|
||||
id:1,
|
||||
},{
|
||||
name:'Printboard',
|
||||
id:2,
|
||||
},{
|
||||
name:'Printboard',
|
||||
id:3,
|
||||
}],
|
||||
Sketchboard:[{
|
||||
name:'Sketchboard',
|
||||
id:1,
|
||||
},{
|
||||
name:'Sketchboard',
|
||||
id:2,
|
||||
},{
|
||||
name:'Sketchboard',
|
||||
id:3,
|
||||
}],
|
||||
}
|
||||
rv.putName = false
|
||||
this.workspaceItem = rv
|
||||
console.log(rv);
|
||||
|
||||
this.setMannequinsSex()
|
||||
this.setPosition('')
|
||||
// this.getworkspace()
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -558,25 +553,30 @@ export default defineComponent({
|
||||
if(this.workspaceItem.id == -1){
|
||||
return
|
||||
}
|
||||
this.openType.model = false
|
||||
Https.axiosPost(Https.httpUrls.workspacesaveOrUpdate,data).then((rv: any) => {
|
||||
if (rv) {
|
||||
if(index){
|
||||
// this.getDetail(index)
|
||||
}else{
|
||||
// this.getworkspace()
|
||||
}
|
||||
if(index){
|
||||
this.getDetail(index)
|
||||
}else{
|
||||
this.getworkspace('')
|
||||
}
|
||||
this.workspace.workspaceList[index].workSpaceName = this.workspaceItemName
|
||||
this.workspace.workspaceList[index].putName = false
|
||||
this.openType.addWorkspace = false
|
||||
}
|
||||
}).catch((res)=>{
|
||||
this.getworkspace()
|
||||
// this.getworkspace()
|
||||
});
|
||||
},
|
||||
deleteWorkspace(data:any){
|
||||
Https.axiosDelete(Https.httpUrls.workspaceRemove,data).then((rv: any) => {
|
||||
if (rv) {
|
||||
this.getworkspace()
|
||||
this.getworkspace('')
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -631,6 +631,7 @@ export default defineComponent({
|
||||
message.info(this.t('Habit.jsContent2'));
|
||||
}else{
|
||||
if(index == -1){
|
||||
|
||||
let data = {
|
||||
workSpaceName:this.workspaceItemName,
|
||||
}
|
||||
@@ -644,7 +645,7 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
data.workSpaceName = this.workspaceItemName
|
||||
this.putWorkspace(data,'')
|
||||
this.putWorkspace(data,this.workspaceItem.id)
|
||||
|
||||
}
|
||||
}
|
||||
@@ -666,8 +667,9 @@ export default defineComponent({
|
||||
this.workspace.workspaceList.forEach((v:any) => {
|
||||
v.putName = false
|
||||
});
|
||||
|
||||
this.workspaceItem.id_ = num
|
||||
this.putWorkspace(this.workspaceItem,'')
|
||||
this.workspace.id = num
|
||||
// this.workspaceItem.id_ = num
|
||||
this.openType.workspace = false
|
||||
},
|
||||
//新建参数
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="generate">
|
||||
<div v-if="type_.type2 == 'Sketchboard'|| type_.type2 == 'Printboard'" class="generate_checkbox Guide_1_2_2" :class="[driver__.driver?'hideEvents':'']">
|
||||
<div v-show="type_.type2 != 'Sketchboard'">
|
||||
<!-- <div v-show="type_.type2 != 'Sketchboard'">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -32,29 +32,86 @@
|
||||
/>
|
||||
<span>{{ $t('Generate.TextImage') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div v-if="type_.type2 == 'Printboard'" class="printModel">
|
||||
</div> -->
|
||||
<!-- <generalMenu :dataList="checkbox" @setprintModel="emitSetKeyword" :item="selectCheckbox" :deleteItem="type_.type2 == 'Sketchboard'?0:-1" :driver__="driver__.driver" :driverClass="{class1: '',class2:'',classList:{item1:'',item2:'',item3:''}}"></generalMenu> -->
|
||||
|
||||
<generalMenu :dataList="printModelList" @setprintModel="setprintModel" :item="printModel" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_2_4',class2:'Guide_1_2_5'}"></generalMenu>
|
||||
<!-- <generalMenu :dataList="sceneList" @setprintModel="setSceneList" :item="scene"></generalMenu> -->
|
||||
<!-- <div v-if="type_.type2 == 'Printboard'" class="printModel">
|
||||
<div @click.stop="PrintModel" class="Guide_1_2_4" :class="[driver__.driver?'showEvents':'']">{{ printModel.name }}</div>
|
||||
<ul v-show="printModel.optype" class="Guide_1_2_5" :class="[driver__.driver?'showEvents':'']">
|
||||
<li class="printModel_item" @click="setprintModel(1)">{{ $t('Generate.Model1') }}</li>
|
||||
<li class="printModel_item" @click="setprintModel(2)">{{ $t('Generate.Model2') }}</li>
|
||||
<li class="printModel_item" @click="setprintModel(3)">{{ $t('Generate.Model3') }}</li>
|
||||
<!-- <li v-show="(sketchboardList.length>=1 && moodboarList.length>=1&& checkbox[0].type) || (sketchboardList.length>=2 && checkbox[0].type) " class="printModel_item" @click="setprintModel(4)">{{ $t('Generate.Merge') }}</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div v-else class="input_border" >
|
||||
<div class="input_border" >
|
||||
<div class="input_box Guide_1_5" :class="[inputShow?'active':'',]">
|
||||
<input
|
||||
class="search_input"
|
||||
@input="ifMaximumLength"
|
||||
:placeholder="$t('Generate.inputContent1')"
|
||||
:maxlength='inputShow?0:9999'
|
||||
v-model="searchPictureName"
|
||||
@keydown.enter="getgenerate()"
|
||||
@click="inputFocus()"
|
||||
/>
|
||||
<i class="icon iconfont icon-xiala" :class="{active:isTextarea}" @click.stop="setTextareaShow"></i>
|
||||
<div class="input_box_btnBox">
|
||||
<div class="upload_item">
|
||||
<div
|
||||
class="upload_file_item Guide_1_2_7"
|
||||
v-for="(file, index) in sketchboardList"
|
||||
:key="file"
|
||||
:class="[checkboxImage? 'forbidden':'',driver__.driver?'showEvents':'']"
|
||||
>
|
||||
<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' || file?.base64"
|
||||
>
|
||||
<img :src="file?.imgUrl" class="upload_img" />
|
||||
<!-- <div
|
||||
class="delete_file_block"
|
||||
:class="[driver__.driver?'hideEvents':'']"
|
||||
@click.stop="deleteFile(index)"
|
||||
>
|
||||
<span class="icon iconfont icon-shanchu"></span>
|
||||
</div> -->
|
||||
<div class="delete_like_file_block" :class="[driver__.driver?'hideEvents':'']">
|
||||
<span class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
class="search_input"
|
||||
@input="ifMaximumLength"
|
||||
:placeholder="$t('Generate.inputContent1')"
|
||||
:maxlength='inputShow?0:9999'
|
||||
v-model="searchPictureName"
|
||||
@keydown.enter="getgenerate()"
|
||||
@click="inputFocus()"
|
||||
/>
|
||||
<i class="fi fi-br-upload" v-show="!isTextarea && upload.level1Type !== 'Moodboard'">
|
||||
<a-upload
|
||||
class="search_upImg"
|
||||
:capture="null"
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:data="{
|
||||
...upload,
|
||||
}"
|
||||
:maxCount='1'
|
||||
:headers="{ Authorization: token }"
|
||||
v-model:file-list="sketchboardList"
|
||||
:before-upload="beforeUpload"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file) => fileUploadChange(file)"
|
||||
>
|
||||
</a-upload>
|
||||
</i>
|
||||
<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
|
||||
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i>
|
||||
<i v-show="scene?.value == 'slogan'" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
|
||||
<!-- <i class="icon iconfont icon-xiala" :class="{active:isTextarea}" @click.stop="setTextareaShow"></i> -->
|
||||
</div>
|
||||
<textarea
|
||||
v-show="isTextarea"
|
||||
class="search_textarea "
|
||||
@@ -79,22 +136,12 @@
|
||||
<div class="search_keyword" v-show="isInputFocus" @click.stop="">
|
||||
<div class="search_keyword_center">
|
||||
<div class="search_keyword_center_left">
|
||||
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
|
||||
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
|
||||
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
|
||||
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
|
||||
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
|
||||
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
|
||||
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
|
||||
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
|
||||
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
|
||||
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
|
||||
<div @click.stop="cliSetKeyword('asdasd')" class="search_keyword_center_item">asdasd</div>
|
||||
<div v-for="item in workspace?.keyWord?.[type_.type2]" @click.stop="cliSetKeyword(item.name)" class="search_keyword_center_item"> {{item.name}} </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img Guide_1_6">
|
||||
<!-- <div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img Guide_1_6">
|
||||
<div class="upload_item">
|
||||
<div
|
||||
class="upload_file_item Guide_1_2_7"
|
||||
@@ -123,36 +170,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="upload_file_item upload_component Guide_1_2_6"
|
||||
:class="[driver__.driver?'showEvents':'']"
|
||||
>
|
||||
<a-upload
|
||||
:capture="null"
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:data="{
|
||||
...upload,
|
||||
}"
|
||||
:disabled="checkbox[1].type"
|
||||
:headers="{ Authorization: token }"
|
||||
v-model:file-list="sketchboardList"
|
||||
:before-upload="beforeUpload"
|
||||
multiple
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file) => fileUploadChange(file)"
|
||||
>
|
||||
<div
|
||||
class="upload_tip_block"
|
||||
>
|
||||
<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 v-else class="generage_img Guide_1_6" :style="[loadingShow?'overflow:hidden':'']">
|
||||
</div> -->
|
||||
<div class="generage_img Guide_1_6" :style="[loadingShow?'overflow:hidden':'']">
|
||||
<div
|
||||
class="generage_img_item"
|
||||
v-for="(item, index) in fileList"
|
||||
@@ -160,7 +180,6 @@
|
||||
@click="generageAdd(item)"
|
||||
:class="[item.status != 'Success'?'hideEvents':'',item?.checked?'active':'']"
|
||||
>
|
||||
<!-- <img v-show="item.status != 'Success'" src="@/assets/images/homePage/loading.gif" alt=""> -->
|
||||
<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
|
||||
<div
|
||||
class="delete_like_file_block left1"
|
||||
@@ -176,14 +195,13 @@
|
||||
<span class="icon iconfont icon-shanchu operate_icon"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
<div v-show="remGenerate" :class="[driver__.driver?'hideEvents':'']" class="mark_loading_btn" @click="removeGenerate">{{$t('Generate.Close')}}</div>
|
||||
</div>
|
||||
<scaleImage ref="scaleImage"></scaleImage>
|
||||
|
||||
<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@@ -197,30 +215,62 @@ import { getCookie } from "@/tool/cookie";
|
||||
import { getUploadUrl } from "@/tool/util";
|
||||
// import { forEach } from "jszip";
|
||||
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
||||
import generalMenu from "@/component/HomePage/generalMenu.vue";
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
|
||||
import createSlogan from "@/component/HomePage/createSlogan.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
scaleImage,
|
||||
generalMenu,
|
||||
createSlogan,
|
||||
},
|
||||
props: ["msg",'sketchCatecoryList'],
|
||||
setup() {
|
||||
props: ["msg",'sketchCatecoryList','scene'],
|
||||
setup(props) {
|
||||
// console.log(prop.msg);
|
||||
let checkbox = ref([
|
||||
{
|
||||
name: "image",
|
||||
type: true,
|
||||
label:useI18n().t('Generate.ImageOnly'),
|
||||
},
|
||||
{
|
||||
name: "text",
|
||||
type: false,
|
||||
label:useI18n().t('Generate.TextOnly'),
|
||||
},
|
||||
{
|
||||
name: "text-image",
|
||||
type: false,
|
||||
label:useI18n().t('Generate.TextImage')
|
||||
},
|
||||
]);
|
||||
let selectCheckbox = checkbox.value[0]
|
||||
let printModelList = ref([
|
||||
{
|
||||
num:'',
|
||||
optype:false,
|
||||
value:'Painting Style',
|
||||
label:useI18n().t('Generate.Model1')
|
||||
},{
|
||||
num:'',
|
||||
optype:false,
|
||||
value:'Illustration Style',
|
||||
label:useI18n().t('Generate.Model2')
|
||||
},{
|
||||
num:'',
|
||||
optype:false,
|
||||
value:'Real Style',
|
||||
label:useI18n().t('Generate.Model3')
|
||||
},
|
||||
])
|
||||
let printModel = ref({
|
||||
num:'',
|
||||
optype:false,
|
||||
value:'Painting Style',
|
||||
label:useI18n().t('Generate.Model1')
|
||||
})
|
||||
let checkboxImage = ref()
|
||||
let imgList = ref([]);
|
||||
let selectImgList: any = ref([]);
|
||||
@@ -240,14 +290,9 @@ export default defineComponent({
|
||||
let sketchboardList:any = ref([])
|
||||
let collectionElementid = ref()
|
||||
let level2Type = ref('')
|
||||
let printModel = ref({
|
||||
num:'',
|
||||
optype:false,
|
||||
value:'Painting Style',
|
||||
name:useI18n().t('Generate.Model'+1)
|
||||
})
|
||||
|
||||
// let printBoards:any = computed(()=>{return store.state.UploadFilesModule.printboard})
|
||||
let moodboarList:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
|
||||
// let moodboarList:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
|
||||
// let sketchCatecoryList:any = ref([])
|
||||
let workspace:any = ref({})
|
||||
|
||||
@@ -258,7 +303,6 @@ export default defineComponent({
|
||||
let driver__:any = inject('driver__')
|
||||
let {t} = useI18n()
|
||||
let isMmerge = ref(false)
|
||||
|
||||
let isTest = ref()
|
||||
let userInfo:any = {}
|
||||
let generateId:any = ref([])
|
||||
@@ -266,6 +310,7 @@ export default defineComponent({
|
||||
let generateProceedList = ref([])
|
||||
let remGenerate:any = ref(false)
|
||||
let remGenerateTime:any = ref()
|
||||
let scene:any = props.scene
|
||||
return {
|
||||
imgList,
|
||||
selectImgList,
|
||||
@@ -279,6 +324,7 @@ export default defineComponent({
|
||||
searcMaterialhName,
|
||||
designType,
|
||||
checkbox,
|
||||
selectCheckbox,
|
||||
store,
|
||||
fileList,
|
||||
sketchboardList,
|
||||
@@ -286,10 +332,13 @@ export default defineComponent({
|
||||
level2Type,
|
||||
checkboxImage,
|
||||
printModel,
|
||||
printModelList,
|
||||
loadingShow,
|
||||
isGenerate,
|
||||
scene,
|
||||
|
||||
// printBoards,
|
||||
moodboarList,
|
||||
// moodboarList,
|
||||
// sketchCatecoryList,
|
||||
workspace,
|
||||
inputShow,
|
||||
@@ -327,7 +376,6 @@ export default defineComponent({
|
||||
type1: "generate",
|
||||
type2: prop.msg,
|
||||
},
|
||||
workspaceCom:{},
|
||||
isTextarea:false,
|
||||
isInputFocus:false,
|
||||
};
|
||||
@@ -346,26 +394,31 @@ export default defineComponent({
|
||||
let isTest:any = getCookie('isTest')
|
||||
this.isTest =JSON.parse(isTest)
|
||||
this.uploadUrl = getUploadUrl();
|
||||
this.workspaceCom = computed(()=>{
|
||||
this.workspace = computed(()=>{
|
||||
return this.store?.state?.Workspace?.workspace
|
||||
})
|
||||
this.workspace = this.store.state.Workspace.workspace
|
||||
if(this.type_.type2 == 'Sketchboard'){
|
||||
this.checkbox=[
|
||||
{
|
||||
name: "image",
|
||||
type: false,
|
||||
},
|
||||
{
|
||||
name: "text",
|
||||
type: true,
|
||||
},
|
||||
{
|
||||
name: "text-image",
|
||||
type: false,
|
||||
},
|
||||
]
|
||||
{
|
||||
name: "image",
|
||||
type: false,
|
||||
label:useI18n().t('Generate.ImageOnly'),
|
||||
},
|
||||
{
|
||||
name: "text",
|
||||
type: true,
|
||||
label:useI18n().t('Generate.TextOnly'),
|
||||
},
|
||||
{
|
||||
name: "text-image",
|
||||
type: false,
|
||||
label:useI18n().t('Generate.TextImage')
|
||||
},
|
||||
]
|
||||
this.selectCheckbox = this.checkbox[1]
|
||||
|
||||
}
|
||||
|
||||
this.$emit('generateCheckbox',this.checkbox[0].type)
|
||||
},
|
||||
watch:{
|
||||
@@ -382,21 +435,20 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
},
|
||||
workspaceCom(newVal,oldVal){
|
||||
this.workspace = newVal
|
||||
workspace(newVal,oldVal){
|
||||
this.upload.gender = newVal?.sexEnum?.name
|
||||
},
|
||||
moodboarList(newVal,oldVal){
|
||||
if(newVal.length>=1 || this.sketchboardList.length >= 2){
|
||||
}else{
|
||||
this.printModel = {
|
||||
num:'',
|
||||
optype:false,
|
||||
value:'Painting Style',
|
||||
name:this.t('Generate.Model'+1)
|
||||
}
|
||||
}
|
||||
},
|
||||
// moodboarList(newVal,oldVal){
|
||||
// if(newVal.length>=1 || this.sketchboardList.length >= 2){
|
||||
// }else{
|
||||
// this.printModel = {
|
||||
// num:'',
|
||||
// optype:false,
|
||||
// value:'Painting Style',
|
||||
// name:this.t('Generate.Model'+1)
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
},
|
||||
computed: {
|
||||
getSketchLabel(value: any) {
|
||||
@@ -444,6 +496,14 @@ export default defineComponent({
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
emitSetKeyword(data:any){
|
||||
this.selectCheckbox = data
|
||||
this.checkbox.forEach((item:any,index:any) => {
|
||||
if(item.name == data.name){
|
||||
this.setKeyword(index)
|
||||
}
|
||||
});
|
||||
},
|
||||
setKeyword(num: any) {
|
||||
this.checkbox.forEach((v: any) => {
|
||||
v.type = false;
|
||||
@@ -466,70 +526,30 @@ export default defineComponent({
|
||||
if(this.driver__.driver){
|
||||
driverObj__.moveNext()
|
||||
}
|
||||
this.printModel = {
|
||||
num:'',
|
||||
optype:false,
|
||||
value:'Painting Style',
|
||||
name:this.t('Generate.Model'+1)
|
||||
}
|
||||
}
|
||||
},
|
||||
PrintModel(){
|
||||
if(!this.printModel.optype){
|
||||
document.addEventListener('click',this.removePrintModel)
|
||||
}
|
||||
this.printModel.optype = !this.printModel.optype
|
||||
nextTick().then(()=>{
|
||||
if(this.driver__.driver){
|
||||
driverObj__.moveNext()
|
||||
}
|
||||
})
|
||||
},
|
||||
removePrintModel(){
|
||||
this.printModel.optype = false
|
||||
document.removeEventListener('click',this.removePrintModel)
|
||||
},
|
||||
setprintModel(num:any){
|
||||
let arr = ["Painting Style","Illustration Style","Real Style"]
|
||||
if(num == 4){
|
||||
this.printModel = {
|
||||
num : 'Generate',
|
||||
optype:false,
|
||||
value:'',
|
||||
name:this.t('Generate.Merge')
|
||||
}
|
||||
}else{
|
||||
this.printModel = {
|
||||
num : num,
|
||||
value:arr[num-1],
|
||||
optype:false,
|
||||
name:this.t('Generate.Model'+num)
|
||||
}
|
||||
}
|
||||
nextTick().then(()=>{
|
||||
if(this.driver__.driver){
|
||||
driverObj__.moveNext()
|
||||
}
|
||||
})
|
||||
setprintModel(value:any){
|
||||
this.printModel = value
|
||||
},
|
||||
getgenerate(){
|
||||
clearInterval(this.remGenerateTime)
|
||||
this.remGenerate = false
|
||||
// if(this.isTest){//试用用户禁止使用
|
||||
// message.info(
|
||||
// this.t('isTest.available')
|
||||
// );
|
||||
// return
|
||||
// }
|
||||
if(this.isGenerate){
|
||||
return
|
||||
}
|
||||
// if(!this.searchPictureName){
|
||||
// message.info(
|
||||
// this.t('Generate.jsContent3')
|
||||
// );
|
||||
// this.remGenerate = false
|
||||
// // if(this.isTest){//试用用户禁止使用
|
||||
// // message.info(
|
||||
// // this.t('isTest.available')
|
||||
// // );
|
||||
// // return
|
||||
// // }
|
||||
// if(this.isGenerate){
|
||||
// return
|
||||
// }
|
||||
// // if(!this.searchPictureName){
|
||||
// // message.info(
|
||||
// // this.t('Generate.jsContent3')
|
||||
// // );
|
||||
// // return
|
||||
// // }
|
||||
|
||||
if(this.searchPictureName){
|
||||
let arr = this.searchPictureName.split(/\s+/).length
|
||||
if(arr > 250){
|
||||
@@ -539,24 +559,33 @@ export default defineComponent({
|
||||
return
|
||||
}
|
||||
}else{
|
||||
message.info(
|
||||
this.t('Generate.jsContent5')
|
||||
);
|
||||
return
|
||||
if(this.sketchboardList[0].imgUrl){
|
||||
|
||||
}else{
|
||||
message.info(
|
||||
this.t('Generate.jsContent5')
|
||||
);
|
||||
return
|
||||
}
|
||||
|
||||
}
|
||||
let data = {
|
||||
generateType:'text',
|
||||
designType:'',
|
||||
collectionElementId:'',
|
||||
generateType:'',
|
||||
designType:'collection',
|
||||
collectionElementId:this.sketchboardList[0].id?this.sketchboardList[0].id:'',
|
||||
level1Type:this.upload.level1Type,
|
||||
level2Type:'',
|
||||
level2Type:this.scene?.value?this.scene?.value:'',
|
||||
text:this.searchPictureName,
|
||||
userId:this?.userInfo?.userId,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
version:1,//为1就是Print
|
||||
isTestUser:this.driver__.driver?false:this.isTest,
|
||||
gender:'',
|
||||
base64:this.sketchboardList[0].base64?this.sketchboardList[0].imgUrl:'',
|
||||
}
|
||||
console.log(data);
|
||||
|
||||
return
|
||||
this.isGenerate = true
|
||||
Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
|
||||
(rv) => {
|
||||
@@ -670,8 +699,6 @@ export default defineComponent({
|
||||
this.isTextarea = !this.isTextarea
|
||||
},
|
||||
cliSetKeyword(value:any){
|
||||
console.log(this.workspace);
|
||||
|
||||
let str = ''
|
||||
if(this.searchPictureName[this.searchPictureName.length-1] != ',' && this.searchPictureName.length != 0){
|
||||
str = ','
|
||||
@@ -732,12 +759,7 @@ export default defineComponent({
|
||||
let fileList = this.sketchboardList.filter(
|
||||
(v: any) => v.status === "done"
|
||||
);
|
||||
let arr = this.store.state.UploadFilesModule.sketchboard;
|
||||
if (arr.length >= 8) {
|
||||
message.info(this.t('Generate.jsContent6'));
|
||||
} else {
|
||||
this.sketchboardList = fileList
|
||||
}
|
||||
this.sketchboardList = fileList
|
||||
nextTick().then(()=>{
|
||||
if(this.driver__.driver){
|
||||
driverObj__.moveNext()
|
||||
@@ -765,50 +787,55 @@ export default defineComponent({
|
||||
message.warning(res.errMsg);
|
||||
}
|
||||
},
|
||||
|
||||
setSketchboardItem(item:any){
|
||||
if(this.checkboxImage){
|
||||
return
|
||||
}
|
||||
let parent:any = this.$parent
|
||||
|
||||
if(item.checked){
|
||||
item.checked = false
|
||||
this.collectionElementid = ''
|
||||
}else{
|
||||
let obj = {
|
||||
imgId : item.id,
|
||||
imgUr: item.imgUrl,
|
||||
level2Type:item.category,
|
||||
designType:'collection'
|
||||
}
|
||||
// parent.useGenerate.designType = 'collection'
|
||||
this.$emit('setGenerate',obj)
|
||||
this.sketchboardList.forEach((v:any)=>{
|
||||
if(v.checked){
|
||||
v.checked = false
|
||||
}
|
||||
})
|
||||
item.checked = true
|
||||
this.collectionElementid = item.id
|
||||
}
|
||||
this.level2Type = item.category
|
||||
if(this.driver__.driver){
|
||||
driverObj__.moveNext()
|
||||
}
|
||||
setSlogan(){
|
||||
let createSlogan:any = this.$refs.createSlogan
|
||||
createSlogan.init()
|
||||
},
|
||||
setSloganData(data:any){
|
||||
this.sketchboardList = data
|
||||
},
|
||||
// setSketchboardItem(item:any){
|
||||
// if(this.checkboxImage){
|
||||
// return
|
||||
// }
|
||||
// let parent:any = this.$parent
|
||||
|
||||
// if(item.checked){
|
||||
// item.checked = false
|
||||
// this.collectionElementid = ''
|
||||
// }else{
|
||||
// let obj = {
|
||||
// imgId : item.id,
|
||||
// imgUr: item.imgUrl,
|
||||
// level2Type:item.category,
|
||||
// designType:'collection'
|
||||
// }
|
||||
// // parent.useGenerate.designType = 'collection'
|
||||
// this.$emit('setGenerate',obj)
|
||||
// this.sketchboardList.forEach((v:any)=>{
|
||||
// if(v.checked){
|
||||
// v.checked = false
|
||||
// }
|
||||
// })
|
||||
// item.checked = true
|
||||
// this.collectionElementid = item.id
|
||||
// }
|
||||
// this.level2Type = item.category
|
||||
// if(this.driver__.driver){
|
||||
// driverObj__.moveNext()
|
||||
// }
|
||||
// },
|
||||
deleteFile(item: any) {
|
||||
// this.sketchboardList
|
||||
this.collectionElementid = ''
|
||||
this.sketchboardList.splice(item, 1);
|
||||
if((this.sketchboardList.length<2 && this.moodboarList.length == 0) || this.sketchboardList.length == 0){
|
||||
this.printModel = {
|
||||
num:'',
|
||||
optype:false,
|
||||
value:'Painting Style',
|
||||
name:this.t('Generate.Model'+1)
|
||||
}
|
||||
}
|
||||
// if((this.sketchboardList.length<2 && this.moodboarList.length == 0) || this.sketchboardList.length == 0){
|
||||
// this.printModel = {
|
||||
// num:'',
|
||||
// optype:false,
|
||||
// value:'Painting Style',
|
||||
// label:this.t('Generate.Model'+1)
|
||||
// }
|
||||
// }
|
||||
},
|
||||
likeFile(item:any,str:string){
|
||||
if(str == 'like'){
|
||||
@@ -882,6 +909,7 @@ export default defineComponent({
|
||||
flex-direction: column;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
position: relative;
|
||||
padding-top: calc(2.5rem*1.2);
|
||||
&.generate::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
@@ -898,13 +926,12 @@ export default defineComponent({
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
padding-top: calc(2.5rem*1.2);
|
||||
padding-bottom: calc(2rem*1.2);
|
||||
z-index: 2;
|
||||
}
|
||||
.generate_checkbox {
|
||||
z-index: 10;
|
||||
div {
|
||||
margin-right: calc(4rem*1.2);
|
||||
label {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
@@ -919,42 +946,6 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
.printModel{
|
||||
>div{
|
||||
width: calc(13rem*1.2);
|
||||
// display: flex;
|
||||
display: block;
|
||||
border-radius: calc(1rem*1.2);
|
||||
margin: 0;
|
||||
border: 2px solid;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 calc(1rem*1.2);
|
||||
text-align: center;
|
||||
}
|
||||
ul{
|
||||
position: absolute;
|
||||
width: calc(13rem*1.2);
|
||||
text-align: center;
|
||||
margin-top: calc(.3rem*1.2);
|
||||
border-radius: calc(1rem*1.2);
|
||||
overflow: hidden;
|
||||
li{
|
||||
background: rgba(0,0,0,.2);
|
||||
line-height: 2;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 calc(1rem*1.2);
|
||||
&.printModel_item:hover{
|
||||
background: rgba(0,0,0,.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.generage_input {
|
||||
}
|
||||
.generage_img {
|
||||
|
||||
@@ -6,25 +6,32 @@
|
||||
<div class="upload_header_item">
|
||||
<div class="switch_type_list">
|
||||
<div
|
||||
@click.stop="open(1)"
|
||||
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>{{ $t('PrintboardUpload.Upload') }}</span>
|
||||
<span @click.stop="open(1)">{{ $t('PrintboardUpload.Upload') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(2)"
|
||||
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>{{ $t('PrintboardUpload.Library') }}</span>
|
||||
<span @click.stop="open(2)">{{ $t('PrintboardUpload.Library') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(3)"
|
||||
|
||||
class="switch_type_item Guide_1_2_1"
|
||||
:class="[openClick == 3 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
|
||||
>
|
||||
<span>{{ $t('PrintboardUpload.Generate') }}</span>
|
||||
<span @click.stop="open(3)">{{ $t('PrintboardUpload.Generate') }}</span>
|
||||
|
||||
</div>
|
||||
<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
|
||||
<div @click.stop="openPrintModel">{{ scene.label }} <i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></div>
|
||||
<ul v-show="openMenu">
|
||||
<li v-for="item,index in sceneList" class="printModel_item" @click.stop="setSceneList(item)">{{ item.label }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -85,7 +92,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<Material v-show="openClick == 2" ref="Material" msg="Printboard" @setLibrary = setSetchboardGenerate @confirmSelect="confirmSelect"></Material>
|
||||
<Generate v-show="openClick == 3" ref="Generate" msg="Printboard" @setGenerate = setSetchboardGenerate @generateCheckbox="getgenerateCheckbox"></Generate>
|
||||
<Generate v-show="openClick == 3" ref="Generate" :scene="scene" msg="Printboard" @setGenerate = setSetchboardGenerate @generateCheckbox="getgenerateCheckbox"></Generate>
|
||||
</div>
|
||||
<div class="modal_right">
|
||||
<div class="modal_layout">
|
||||
@@ -105,8 +112,17 @@
|
||||
<div v-show="openClick == 3" class="modal_accomplish">
|
||||
<div class="input_border">
|
||||
<div class="Guide_1_2_8 input_box" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
|
||||
<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
|
||||
<i class="icon iconfont icon-xiala" :class="{active:isTextarea,forbidden:generateCheckbox}" @click.stop="setTextareaShow"></i>
|
||||
<div class="input_box_btnBox">
|
||||
<input class="search_input"
|
||||
@click="inputFocus()"
|
||||
@input="ifMaximumLength"
|
||||
@keydown.enter="getgenerate"
|
||||
:maxlength='inputShow?0:9999'
|
||||
:class="{forbidden:generateCheckbox}"
|
||||
:readonly="generateCheckbox"
|
||||
:placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
|
||||
<i class="icon iconfont icon-xiala" :class="{active:isTextarea,forbidden:generateCheckbox}" @click.stop="setTextareaShow"></i>
|
||||
</div>
|
||||
<textarea class="search_textarea" v-show="isTextarea && !generateCheckbox" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" v-model="captionGeneration">
|
||||
</textarea>
|
||||
<!-- <div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div> -->
|
||||
@@ -125,6 +141,13 @@
|
||||
</div>
|
||||
<span ref="inputShowText"></span>
|
||||
</div>
|
||||
<div class="search_keyword" v-show="isInputFocus" @click.stop="">
|
||||
<div class="search_keyword_center">
|
||||
<div class="search_keyword_center_left">
|
||||
<div v-for="item in workspace?.keyWord?.[upload.level1Type]" @click.stop="cliSetKeyword(item.name)" class="search_keyword_center_item"> {{item.name}} </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<div v-show="!isUseGenerate" @click="setUseGenerate">Printboard</div>
|
||||
<div v-show="isUseGenerate" @click="setUseGenerate">Generate</div>
|
||||
@@ -166,7 +189,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,h,ref,computed,inject,createVNode, nextTick } from 'vue'
|
||||
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'
|
||||
@@ -182,6 +205,7 @@ import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-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({
|
||||
@@ -190,6 +214,7 @@ export default defineComponent({
|
||||
Material,
|
||||
Generate,
|
||||
scaleImage,
|
||||
generalMenu,
|
||||
},
|
||||
setup(){
|
||||
let store:any =useStore()
|
||||
@@ -224,6 +249,24 @@ export default defineComponent({
|
||||
level2Type:'',
|
||||
designType:''
|
||||
})
|
||||
let workspace = ref({})
|
||||
let sceneList = ref([
|
||||
{
|
||||
label:'pattern',
|
||||
value:'pattern'
|
||||
},{
|
||||
label:'slogan',
|
||||
value:'slogan'
|
||||
},{
|
||||
label:'logo',
|
||||
value:'logo'
|
||||
},
|
||||
])
|
||||
let scene = ref({
|
||||
label:'pattern',
|
||||
value:'pattern'
|
||||
})
|
||||
let openMenu = ref(false)
|
||||
return {
|
||||
fileList,
|
||||
printImgList,
|
||||
@@ -246,6 +289,10 @@ export default defineComponent({
|
||||
remGenerateTime,
|
||||
useGenerate,
|
||||
isUseGenerate,
|
||||
workspace,
|
||||
sceneList,
|
||||
scene,
|
||||
openMenu,
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
@@ -295,7 +342,7 @@ export default defineComponent({
|
||||
}),
|
||||
source:axios.CancelToken.source(),
|
||||
isTextarea:false,
|
||||
|
||||
isInputFocus:false,
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
@@ -305,6 +352,9 @@ export default defineComponent({
|
||||
let isTest:any = getCookie('isTest')
|
||||
this.isTest =JSON.parse(isTest)
|
||||
this.uploadUrl = getUploadUrl()
|
||||
this.workspace = computed(()=>{
|
||||
return this.store?.state?.Workspace?.workspace
|
||||
})
|
||||
if(this.driver__.driver){
|
||||
this.captionGeneration = 'Elegant floral print for high-fashion attire'
|
||||
}else{
|
||||
@@ -669,6 +719,13 @@ export default defineComponent({
|
||||
if(this.generateCheckbox) return
|
||||
this.isTextarea = !this.isTextarea
|
||||
},
|
||||
cliSetKeyword(value:any){
|
||||
let str = ''
|
||||
if(this.captionGeneration[this.captionGeneration.length-1] != ',' && this.captionGeneration.length != 0){
|
||||
str = ','
|
||||
}
|
||||
this.captionGeneration += str + value
|
||||
},
|
||||
ifMaximumLength(){
|
||||
this.inputTime = setTimeout(()=>{
|
||||
if(this.captionGeneration?.split(/\s+/).length > 250){
|
||||
@@ -679,6 +736,18 @@ export default defineComponent({
|
||||
}
|
||||
},500)
|
||||
},
|
||||
inputFocus(){
|
||||
if(this.isInputFocus) return
|
||||
if(this.generateCheckbox) return
|
||||
this.isInputFocus = true
|
||||
let setDomCli = ()=>{
|
||||
this.isInputFocus = false
|
||||
document.removeEventListener('click',setDomCli)
|
||||
}
|
||||
setTimeout(()=>{
|
||||
document.addEventListener('click',setDomCli)
|
||||
},200)
|
||||
},
|
||||
getgenerate(){
|
||||
clearInterval(this.remGenerateTime)
|
||||
this.remGenerate = false
|
||||
@@ -967,6 +1036,23 @@ export default defineComponent({
|
||||
}
|
||||
// }
|
||||
|
||||
},
|
||||
setSceneList(data:any){
|
||||
if(this.scene.value === data.value) return
|
||||
this.scene = data
|
||||
console.log(data);
|
||||
let generate:any = this.$refs.Generate
|
||||
generate.scene = data
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -986,7 +1072,7 @@ export default defineComponent({
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
z-index: 11;
|
||||
.switch_type_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1025,12 +1111,34 @@ export default defineComponent({
|
||||
&.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;
|
||||
>div{
|
||||
width: 14rem;
|
||||
font-size: var(--aida-fsize1-6);
|
||||
border: 0;
|
||||
i{
|
||||
transition: all .3s;
|
||||
display: inline-block;
|
||||
}
|
||||
.forbidden{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
ul{
|
||||
width: 14rem;
|
||||
}
|
||||
}
|
||||
.switch_type_item:nth-child(3){
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.printboard_body{
|
||||
|
||||
@@ -139,8 +139,18 @@
|
||||
<div v-show="openClick == 3" class="modal_accomplish">
|
||||
<div class="input_border">
|
||||
<div class="Guide_1_9_2 input_box" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
|
||||
<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
|
||||
<i class="icon iconfont icon-xiala" :class="{active:isTextarea,forbidden:generateCheckbox}" @click.stop="setTextareaShow"></i>
|
||||
<div class="input_box_btnBox">
|
||||
<input class="search_input"
|
||||
@click="inputFocus()"
|
||||
@input="ifMaximumLength"
|
||||
@keydown.enter="getgenerate"
|
||||
:maxlength='inputShow?0:9999'
|
||||
:class="{forbidden:generateCheckbox}"
|
||||
:readonly="generateCheckbox"
|
||||
:placeholder="$t('PrintboardUpload.inputContent1')"
|
||||
v-model="captionGeneration">
|
||||
<i class="icon iconfont icon-xiala" :class="{active:isTextarea,forbidden:generateCheckbox}" @click.stop="setTextareaShow"></i>
|
||||
</div>
|
||||
<textarea class="search_textarea" v-show="isTextarea && !generateCheckbox" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" v-model="captionGeneration">
|
||||
</textarea>
|
||||
<!-- <div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div> -->
|
||||
@@ -155,6 +165,13 @@
|
||||
</div>
|
||||
<span ref="inputShowText"></span>
|
||||
</div>
|
||||
<div class="search_keyword" v-show="isInputFocus" @click.stop="">
|
||||
<div class="search_keyword_center">
|
||||
<div class="search_keyword_center_left">
|
||||
<div v-for="item in workspace?.keyWord?.[upload.level1Type]" @click.stop="cliSetKeyword(item.name)" class="search_keyword_center_item"> {{item.name}} </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<div v-show="!isUseGenerate" @click="setUseGenerate">Printboard</div>
|
||||
<div v-show="isUseGenerate" @click="setUseGenerate">Generate</div>
|
||||
@@ -297,8 +314,8 @@ export default defineComponent({
|
||||
token: "",
|
||||
uploadUrl: "",
|
||||
captionGeneration:'',
|
||||
workspaceCom:{},
|
||||
isTextarea:false,
|
||||
isInputFocus:false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -345,8 +362,7 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
workspaceCom(newVal,oldVal){
|
||||
this.workspace = newVal
|
||||
workspace(newVal,oldVal){
|
||||
this.upload.gender = newVal?.sexEnum?.name
|
||||
},
|
||||
sketchboardList:{
|
||||
@@ -376,7 +392,7 @@ export default defineComponent({
|
||||
let isTest:any = getCookie('isTest')
|
||||
this.isTest =JSON.parse(isTest)
|
||||
this.uploadUrl = getUploadUrl();
|
||||
this.workspaceCom = computed(()=>{
|
||||
this.workspace = computed(()=>{
|
||||
return this.store?.state?.Workspace?.workspace
|
||||
})
|
||||
if(this.driver__.driver){
|
||||
@@ -517,6 +533,13 @@ export default defineComponent({
|
||||
if(this.generateCheckbox) return
|
||||
this.isTextarea = !this.isTextarea
|
||||
},
|
||||
cliSetKeyword(value:any){
|
||||
let str = ''
|
||||
if(this.captionGeneration[this.captionGeneration.length-1] != ',' && this.captionGeneration.length != 0){
|
||||
str = ','
|
||||
}
|
||||
this.captionGeneration += str + value
|
||||
},
|
||||
ifMaximumLength(){
|
||||
clearTimeout(this.inputTime)
|
||||
let inputBox = document.getElementsByClassName('sketchboard_upload_modal')[0].getElementsByClassName('input_box')[0]
|
||||
@@ -533,7 +556,18 @@ export default defineComponent({
|
||||
}
|
||||
},500)
|
||||
},
|
||||
|
||||
inputFocus(){
|
||||
if(this.isInputFocus) return
|
||||
if(this.generateCheckbox) return
|
||||
this.isInputFocus = true
|
||||
let setDomCli = ()=>{
|
||||
this.isInputFocus = false
|
||||
document.removeEventListener('click',setDomCli)
|
||||
}
|
||||
setTimeout(()=>{
|
||||
document.addEventListener('click',setDomCli)
|
||||
},200)
|
||||
},
|
||||
deleteFile(item: any) {
|
||||
if(item?.type_?.type1 == 'generate' || item?.type_?.type1 == 'material'){
|
||||
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
|
||||
|
||||
@@ -78,19 +78,29 @@
|
||||
<label>
|
||||
<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment">
|
||||
<img src="https://ecmb.bdimg.com/tam-ogel/-1860672422_-148079605_900_900.png" alt="">
|
||||
PayPal
|
||||
<span>PayPal</span>
|
||||
</label>
|
||||
<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'paypal'?'active':'']">
|
||||
|
||||
</div>
|
||||
<!-- <label>
|
||||
<label>
|
||||
<input name="payAffirm" type="radio" value="alipay" v-model="modeOfPayment">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAEXRFWHRTb2Z0d2FyZQBTbmlwYXN0ZV0Xzt0AAANmSURBVEiJvZZdaFxFFMd/M/cj926yu02MWWObEm3quoHGYBJBC4aCqbRRKoE+aLH6JhUFBT9Aij4oiooSfKn4oiA+FKlIkfbBj3TZYkGDDVWs1M1aaKgkJqEJazab+zE+3Gziunu3qwmep7kz95zfzH/OmRmhlFL8D6aXGl9ecjl2dpncnIe/QbQmIdmm8dwei/6OACGUUiqTc3nqxBKbvTgp4NjBRu7u1JEAo+nlTYcA+Ao+OFcEVqWbnPXqcoxZgvdGGtEljE95jJ4pXNcnN+evg+rdkyZTcOc2DYA//vTr8inF1sN+MDXQpCjrs4z1b10KbEP80w3XVzhVBAoFvf5AhL1JI3Sm93TqfP1krKL/xIUV3hmrlDQU9MLJAi+Kcof2qODUE1EAvvjZ4ZXTS6ETqRvkK8XANp2bYnKtrzmyLtXOVsnhgYYyn29/c8jOVt+7UBBAe1zS1SrL+j76rrjWbm0U9G7V6d0aJMhDOTc0Vk3QyZ9Wag0D8OEjTQBcnvfJzYWXSVVQS0QylNRJtmlYusDxFNN5RXbWZ2LKZSYfyNPZoq2l++c/1p5UBWgoafDq/giWDtN5haVB3BaUMl0p+GXG46tLDqmEhgCuFRTHz/8LUGeL5I3hCO+fK/LJeJGCE1RbxBR0JzQGu3T2pUxSCY1UQlvzuzzvs71Z4+J0+B4JpZTqeWsBgGcHLYQQvFvjaNGlYKTH4Oheu2Ls6oLPWNblm18dfphy8XyI25LM09HyFW1v1vjsQm0JpAjkBSi6iquLiltagsy8OS451GdyqM9kcVmRybmMXwlWWQaayfsMdulkck5VyI1NgjcfjNDfoeP5QVGfyTrcu0Pnsbss+jvW5YxZguFug+FuoxL06USR449HWfHg4++L/L4YZNcNjZKRHpNH+0222IJ8UXH0VIGxbDCh9KRLejJPKqFxeKCB+2830MvLr3yPAPbsNHhtn03UCgI6HmyxBWI168aveLx8eompa+Gnd1uT4OG+Bg7eYRKzRHVQadn7Uya72iUxW1BYgdy8TzrrcHG6vrsLwDYEB3YZvHSfHYB6317Y8DshzKSAiefjwVV+a6t2vf//s+1YjS0BjuwO6mezTQjBM4NW0C696zI5l9H0MpOzG39uSRGodGS3xdBtf3tubSxsffYXznw1EQcnMd4AAAAASUVORK5CYII=" alt="">
|
||||
支付宝
|
||||
<span>支付宝</span>
|
||||
<div v-show="modeOfPayment == 'alipay'" class="UpgradePlan_payAffirm_content_detail">
|
||||
<label>
|
||||
<input name="location" type="radio" value="ALIPAYHK" v-model="modeOfPaymentDetail">
|
||||
<span>HK</span>
|
||||
</label>
|
||||
<label>
|
||||
<input name="location" type="radio" value="ALIPAYCN" v-model="modeOfPaymentDetail">
|
||||
<span>大陆</span>
|
||||
</label>
|
||||
</div>
|
||||
</label>
|
||||
<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'alipay'?'active':'']">
|
||||
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="UpgradePlan_payAffirm_clause" ref="labelDisclaimer">
|
||||
<label>
|
||||
@@ -142,6 +152,7 @@ export default defineComponent({
|
||||
credits:45,
|
||||
})
|
||||
let modeOfPayment = ref('paypal')
|
||||
let modeOfPaymentDetail = ref('ALIPAYHK')
|
||||
let clause = ref(false)//同意条款
|
||||
let productList:any = ref([])
|
||||
let payIndex = ref(0)
|
||||
@@ -155,6 +166,7 @@ export default defineComponent({
|
||||
stepNum,
|
||||
price,
|
||||
modeOfPayment,
|
||||
modeOfPaymentDetail,
|
||||
clause,
|
||||
productList,
|
||||
payIndex,
|
||||
@@ -209,7 +221,6 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
payment(){//付款
|
||||
// console.log(this.modeOfPayment,'alipay','paypal');
|
||||
let url = window.location.href
|
||||
// url = url.replace(/\/[^/]+$/, '') + '/home';
|
||||
// console.log(url);
|
||||
@@ -227,12 +238,13 @@ export default defineComponent({
|
||||
|
||||
return
|
||||
}
|
||||
let httpsUrl = Https.httpUrls.payAlipay
|
||||
|
||||
let httpsUrl
|
||||
if(this.modeOfPayment == 'paypal'){
|
||||
httpsUrl = Https.httpUrls.payPaypal
|
||||
httpsUrl = Https.httpUrls.payAlipay+`/${this.price.num}?returnUrl=${url}`
|
||||
}else{
|
||||
httpsUrl = Https.httpUrls.payAlipayHK+`?amount=${this.price.num}&wallet=${this.modeOfPaymentDetail}`
|
||||
}
|
||||
Https.axiosPost(httpsUrl+`/${this.price.num}?returnUrl=${url}`,).then(
|
||||
Https.axiosPost(httpsUrl).then(
|
||||
(rv: any) => {
|
||||
var width = 800;
|
||||
var height = 600;
|
||||
@@ -241,10 +253,12 @@ export default defineComponent({
|
||||
this.newWindow = window.open("", "_blank", "width=" + width + ", height=" + height + ", left=" + left + ", top=" + top);
|
||||
if(this.modeOfPayment == 'paypal'){
|
||||
// 在新窗口中写入内容
|
||||
// newWindow.document.write(rv.approve);
|
||||
this.newWindow.location.href = rv.approve;
|
||||
}else{
|
||||
this.newWindow.document.write(rv);
|
||||
let data = JSON.parse(rv)
|
||||
let herf = `${data.url}?${data.alipay_order_string}`
|
||||
this.newWindow.location.href = herf;
|
||||
// this.newWindow.document.write(herf);
|
||||
}
|
||||
this.isShowMark = true
|
||||
// this.isShowMark = true
|
||||
@@ -445,7 +459,7 @@ export default defineComponent({
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 3rem 0;
|
||||
label{
|
||||
>label{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
@@ -458,6 +472,22 @@ export default defineComponent({
|
||||
// max-width: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
.UpgradePlan_payAffirm_content_detail{
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
>label{
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
span{
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
>label:last-child{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.UpgradePlan_payAffirm_clause{
|
||||
|
||||
433
src/component/HomePage/createSlogan.vue
Normal file
433
src/component/HomePage/createSlogan.vue
Normal file
@@ -0,0 +1,433 @@
|
||||
<template>
|
||||
<a-modal
|
||||
class="clearSlogan_modal generalModel"
|
||||
v-model:visible="showPayOrder"
|
||||
:footer="null"
|
||||
width="50%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
wrapClassName="#app"
|
||||
:keyboard="false"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clearSlogan_center">
|
||||
<div class="modal_title_text">
|
||||
<div>Create Slogan</div>
|
||||
<div class="modal_title_text_intro"></div>
|
||||
</div>
|
||||
<div class="exportCanvasBox_center">
|
||||
<div v-show="textBtnShow" class="clearSlogan_center_item clearSlogan_center_btn_move">
|
||||
<div class="clearSlogan_center_btn_item">
|
||||
<div>Color</div>
|
||||
<input type="color" v-model="fill">
|
||||
</div>
|
||||
<div class="clearSlogan_center_btn_item">
|
||||
<div>font Size</div>
|
||||
<input type="Number" v-model="fontSize">
|
||||
</div>
|
||||
<div class="clearSlogan_center_btn_item">
|
||||
<div>Font Align</div>
|
||||
<ul>
|
||||
<i class="fi fi-br-align-left" @click="setTextData('textAlign','left')" :class="{active:textAlign === 'left'}"></i>
|
||||
<i class="fi fi-br-align-center" @click="setTextData('textAlign','center')" :class="{active:textAlign === 'center'}"></i>
|
||||
<i class="fi fi-br-symbol" @click="setTextData('textAlign','right')" :class="{active:textAlign === 'right'}"></i>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="clearSlogan_center_btn_item">
|
||||
<div>Font Style</div>
|
||||
<ul>
|
||||
<i class="fi fi-br-border-top" @click="setTextData('overline','')" :class="{active:overline}"></i>
|
||||
<i class="fi fi-br-border-center-h" @click="setTextData('linethrough','')" :class="{active:linethrough}"></i>
|
||||
<i class="fi fi-br-border-bottom" @click="setTextData('underline','')" :class="{active:underline}"></i>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="clearSlogan_center_btn_item">
|
||||
<div>Font Family</div>
|
||||
<select v-model="fontFamily" :style="{'font-family':fontFamily}">
|
||||
<option v-for="item in textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">{{item.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearSlogan_center_btn clearSlogan_center_item">
|
||||
<div @click="setTextFun('')" class="clearSlogan_center_btn_item">
|
||||
<div>新增</div>
|
||||
</div>
|
||||
<div @click="removeTextFun()" class="clearSlogan_center_btn_item">
|
||||
<div>删除</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exportCanvasBox_submit" @click="setSubmit">
|
||||
<div class="started_btn">
|
||||
submit
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div></div>
|
||||
</a-modal>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { formatTime } from "@/tool/util";
|
||||
import { setCookie, getCookie } from "@/tool/cookie";
|
||||
import { Modal, message } from "ant-design-vue";
|
||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||
import allOrder from "@/component/Pay/allOrder.vue";
|
||||
import creditsDetail from "@/component/Pay/creditsDetail.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
creditsDetail,
|
||||
allOrder,
|
||||
},
|
||||
emits: ['setSloganData'],
|
||||
setup(props,{emit}) {
|
||||
let presentState = ref('paypal');
|
||||
let showPayOrder = ref(false);
|
||||
let loadingShow = ref(false);
|
||||
let textBtnShow = ref(false)
|
||||
let { t } = useI18n();
|
||||
let canvas = reactive({});
|
||||
let scale = 2;
|
||||
let canvasWH = ref(0);
|
||||
let textData = reactive({
|
||||
fill:'#000000',
|
||||
fontSize:'20',
|
||||
fontFamily:'Arial',
|
||||
textAlign:'left',
|
||||
overline: false,
|
||||
linethrough: false,
|
||||
underline: false,
|
||||
})
|
||||
onMounted(()=>{
|
||||
let arr = [
|
||||
{ value: 'Arial', name: 'select font' },
|
||||
{ value: 'EN_slogan_art1', name: 'select font' },
|
||||
{ value: 'EN_slogan_art2', name: 'select font' },
|
||||
{ value: 'EN_slogan_art3', name: 'select font' },
|
||||
{ value: 'EN_slogan_art4', name: 'select font' },
|
||||
{ value: 'EN_slogan_art5', name: 'select font' },
|
||||
{ value: 'EN_slogan_art6', name: 'select font' },
|
||||
{ value: 'EN_slogan_art7', name: 'select font' },
|
||||
{ value: '微软雅黑', name: '请选择字体' },
|
||||
{ value: 'CN_slogan_art1', name: '请选择字体' },
|
||||
{ value: 'CN_slogan_art2', name: '请选择字体' },
|
||||
{ value: 'CN_slogan_art3', name: '请选择字体' },
|
||||
{ value: 'CN_slogan_art4', name: '请选择字体' },
|
||||
{ value: '华文行楷', name: '请选择字体' },
|
||||
{ value: '隶书', name: '请选择字体' },
|
||||
]
|
||||
textDataList.textFontFamilyList = arr
|
||||
textData.fontFamily = arr[0].value
|
||||
})
|
||||
let textDataList = reactive({
|
||||
textFontFamilyList: [],
|
||||
})
|
||||
|
||||
let init = ()=>{
|
||||
showPayOrder.value = true;
|
||||
nextTick(()=>{
|
||||
let canvasBox = document.querySelector(".clearSlogan_modal .exportCanvasBox_center");
|
||||
let height = canvasBox.offsetHeight;
|
||||
canvasBox.style.width = height+'px'
|
||||
canvasWH.value = height
|
||||
var canvasDom = document.createElement("canvas");
|
||||
let oldCanvasDom = canvasBox.querySelector('canvas')
|
||||
if(oldCanvasDom)canvasBox.removeChild(oldCanvasDom); // 清空原有内容
|
||||
canvasBox.appendChild(canvasDom);
|
||||
canvas = new fabric.Canvas(canvasDom, {
|
||||
backgroundColor: "#e6e6e6",
|
||||
width: canvasWH.value,
|
||||
height: canvasWH.value,
|
||||
isDrawingMode: false, // 开启绘图模式
|
||||
});
|
||||
canvas.on('object:moving',canvasMoving)
|
||||
setTextFun('请输入一段话吧~')
|
||||
// setRemoveImage()
|
||||
fabric.Object.prototype.cornerSize = 10
|
||||
fabric.Object.prototype.transparentCorners = false
|
||||
canvas.on('mouse:down',setTextBtn)
|
||||
})
|
||||
}
|
||||
let selectTextbox = ref(null)
|
||||
let setTextBtn = (e) =>{//点击判断是否点击到文字
|
||||
var clickedObject = e.target;
|
||||
if (clickedObject instanceof fabric.IText){
|
||||
selectTextbox.value = clickedObject
|
||||
textData.fill = clickedObject.fill
|
||||
textData.fontSize = clickedObject.fontSize
|
||||
textData.fontFamily = clickedObject.fontFamily
|
||||
textData.textAlign = clickedObject.textAlign
|
||||
textData.overline = clickedObject.overline
|
||||
textData.linethrough = clickedObject.linethrough
|
||||
textData.underline = clickedObject.underline
|
||||
setBtnPosition(clickedObject)
|
||||
}else{
|
||||
selectTextbox.value = null
|
||||
textBtnShow.value = false
|
||||
}
|
||||
}
|
||||
let messageShow = false
|
||||
let canvasMoving = (options)=>{
|
||||
let obj = options.target
|
||||
isCanvasMoving(obj)
|
||||
}
|
||||
let isCanvasMoving = (obj)=>{
|
||||
canvas.forEachObject(function(options) {
|
||||
setBtnPosition(obj)
|
||||
if(messageShow) return
|
||||
if (options === obj) return
|
||||
// 检查对象是否与另一个对象相交
|
||||
if (obj.intersectsWithObject(options)) {
|
||||
messageShow = true
|
||||
message.info('看到输入的内容可能存在重叠,重叠会影响最终效果哦~',()=>{
|
||||
messageShow = false
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
let setBtnPosition = (obj)=>{//传入文字对象,设置工具位置
|
||||
let domXY = {x:0,y:0}
|
||||
textBtnShow.value = true
|
||||
let scaleY = obj.scaleY?obj.scaleY:1
|
||||
domXY = {
|
||||
y:obj.top+obj.height * scaleY,
|
||||
x:obj.left,
|
||||
}
|
||||
let dom = document.querySelector('.clearSlogan_modal .clearSlogan_center_btn_move')
|
||||
domXY.x = domXY.x<0?0:domXY.x
|
||||
dom.style.left = domXY.x+'px'
|
||||
dom.style.top = (domXY.y + 5)+'px'
|
||||
}
|
||||
let setTextFun = (str)=>{
|
||||
let textbox
|
||||
textbox = new fabric.IText(str, {
|
||||
fontSize: 20,
|
||||
textAlign:'center'
|
||||
|
||||
// fill:canvasPencilColor.value,
|
||||
})
|
||||
textbox.set(textData)
|
||||
textbox.set({
|
||||
left:canvasWH.value/2 - textbox.width / 2,
|
||||
top:canvasWH.value/2 - textbox.height / 2,
|
||||
})
|
||||
setBtnPosition(textbox)
|
||||
canvas.add(textbox)
|
||||
isCanvasMoving(textbox)
|
||||
textbox.enterEditing();
|
||||
canvas.setActiveObject(textbox).renderAll();
|
||||
selectTextbox.value = textbox
|
||||
}
|
||||
let removeTextFun = ()=>{
|
||||
let selectObj = canvas.getActiveObjects();
|
||||
if(selectObj){
|
||||
selectObj.forEach(function(object) {
|
||||
canvas.remove(object);
|
||||
textBtnShow.value = false
|
||||
});
|
||||
}
|
||||
}
|
||||
let watchTime
|
||||
watch(textData,(newValue,oldValue)=>{
|
||||
clearTimeout(watchTime)
|
||||
watchTime = setTimeout(()=>{
|
||||
if(selectTextbox.value){
|
||||
selectTextbox.value.set(newValue)
|
||||
canvas.renderAll();
|
||||
}
|
||||
},500)
|
||||
|
||||
})
|
||||
let setTextData = (name,value)=>{
|
||||
textData[name] = value?value:!textData[name]
|
||||
}
|
||||
let setSubmit = ()=>{
|
||||
var allObjects = canvas.getObjects();
|
||||
if(allObjects.length == 0){
|
||||
message.info('最少需要创建一个文字')
|
||||
return
|
||||
}
|
||||
var canvasDom = document.createElement("canvas");
|
||||
let exportCanvas = new fabric.Canvas(canvasDom, {
|
||||
backgroundColor: "rgba(255, 255, 255,0)",
|
||||
width: canvasWH.value*scale,
|
||||
height: canvasWH.value*scale,
|
||||
isDrawingMode: false, // 开启绘图模式
|
||||
});
|
||||
let canvasArr = canvas.getObjects()
|
||||
canvasArr.forEach(item=>{
|
||||
// let obj = fabric.util.object.clone(item);
|
||||
let obj
|
||||
item.clone((cloned)=>{
|
||||
obj = cloned
|
||||
})
|
||||
obj.set(
|
||||
{
|
||||
scaleX:(item.scaleX?item.scaleX:1)*scale,
|
||||
scaleY:(item.scaleY?item.scaleY:1)*scale,
|
||||
left:item.left*scale,
|
||||
top:item.top*scale,
|
||||
}
|
||||
)
|
||||
exportCanvas.add(obj)
|
||||
})
|
||||
// textbox.set({
|
||||
// left:canvasWH.value.width/2 - textbox.width / 2,
|
||||
// top:canvasWH.value.height/2 - textbox.height / 2,
|
||||
// })
|
||||
let data = [{
|
||||
imgUrl : exportCanvas.toDataURL('png'),
|
||||
base64:true
|
||||
}]
|
||||
emit('setSloganData',data)
|
||||
showPayOrder.value = false;
|
||||
// console.log(exportCanvas.toDataURL('png') );
|
||||
}
|
||||
|
||||
return {
|
||||
presentState,
|
||||
showPayOrder,
|
||||
loadingShow,
|
||||
...toRefs(textData),
|
||||
...toRefs(textDataList),
|
||||
textBtnShow,
|
||||
t,
|
||||
init,
|
||||
setTextFun,
|
||||
removeTextFun,
|
||||
setTextData,
|
||||
setSubmit,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
|
||||
|
||||
cancelDsign(){
|
||||
this.showPayOrder = false
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.clearSlogan_modal {
|
||||
.closeIcon {
|
||||
z-index: 2;
|
||||
}
|
||||
.clearSlogan_center{
|
||||
position: relative;
|
||||
// width: calc(512px / 2);
|
||||
// width: 256px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// height: calc(512px / 2);
|
||||
margin: 0 auto;
|
||||
.clearSlogan_center_item{
|
||||
// position: relative;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
|
||||
display: flex;
|
||||
border: 0.2rem solid #c4c4c4;
|
||||
width: 25rem;
|
||||
border-radius: 4px; /* 设置圆角半径 */
|
||||
flex-wrap: wrap;
|
||||
.clearSlogan_center_btn_item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem 0;
|
||||
>*{
|
||||
cursor: pointer;
|
||||
}
|
||||
>input{
|
||||
width: 4rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 4px; /* 设置圆角半径 */
|
||||
}
|
||||
input::-webkit-inner-spin-button,
|
||||
input::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
>select{
|
||||
height: 2.5rem;
|
||||
border: 0.2rem solid #c4c4c4 !important;
|
||||
border-radius: 4px; /* 设置圆角半径 */
|
||||
}
|
||||
>select:focus-visible{
|
||||
border: 0.2rem solid #c4c4c4;
|
||||
}
|
||||
div{
|
||||
padding: 0 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
ul{
|
||||
display: flex;
|
||||
margin: 0;
|
||||
i{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2.5rem;
|
||||
cursor: pointer;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
&.active{
|
||||
border: 1px solid;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.clearSlogan_center_btn{
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
width: auto;
|
||||
transition: all 0.3s;
|
||||
transform: translate(-50%,-100%);
|
||||
}
|
||||
.exportCanvasBox_center:hover .clearSlogan_center_btn{
|
||||
transform: translate(-50%,0%);
|
||||
z-index: 4;
|
||||
}
|
||||
.clearSlogan_center_btn_move{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
.exportCanvasBox_center{
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
// overflow: scroll;
|
||||
.canvas-container{
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.exportCanvasBox_submit{
|
||||
margin-top: 2.4rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
124
src/component/HomePage/generalMenu.vue
Normal file
124
src/component/HomePage/generalMenu.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="generalMenu_printModel">
|
||||
<div @click.stop="openPrintModel" :class="driverClass.class1">{{ item.label }}</div>
|
||||
<ul :class="driverClass.class2" v-show="openClick">
|
||||
<li v-for="item,index in dataList" :class="{active:deleteItem == index}" class="printModel_item" @click="setprintModel(item,index)">{{ item.label }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref ,nextTick} from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
export default defineComponent({
|
||||
name:'filterComponent',
|
||||
props:{
|
||||
item:{
|
||||
type:Object
|
||||
},
|
||||
dataList:{
|
||||
type:Array
|
||||
},
|
||||
driver__:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
},
|
||||
deleteItem:{
|
||||
type:Number,
|
||||
default:-1
|
||||
},
|
||||
driverClass:{
|
||||
type:Object,
|
||||
default:{class1:'',class2:'',classList:{item1:'',item2:'',item3:''}},
|
||||
}
|
||||
},
|
||||
emits:['setprintModel'],
|
||||
setup(props:any,{emit}){
|
||||
let selectIndex = ref(0)
|
||||
let openClick = ref(false)
|
||||
|
||||
let openPrintModel = ()=>{
|
||||
document.addEventListener('click',removePrintModel)
|
||||
openClick.value = true
|
||||
nextTick().then(()=>{
|
||||
if(props.driver__.driver){
|
||||
driverObj__.moveNext()
|
||||
}
|
||||
})
|
||||
}
|
||||
let setprintModel = (item:any,index:any)=>{
|
||||
if(props.deleteItem == index) return
|
||||
openClick.value = false
|
||||
selectIndex = index
|
||||
nextTick().then(()=>{
|
||||
if(props.driver__.driver){
|
||||
driverObj__.moveNext()
|
||||
}
|
||||
})
|
||||
emit('setprintModel',item)
|
||||
}
|
||||
let removePrintModel = ()=>{
|
||||
openClick.value = false
|
||||
document.removeEventListener('click',removePrintModel)
|
||||
}
|
||||
return {
|
||||
selectIndex,
|
||||
openClick,
|
||||
setprintModel,
|
||||
openPrintModel,
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
//衣服类型下拉菜单
|
||||
.generalMenu_printModel{
|
||||
margin-right: 2rem;
|
||||
>div{
|
||||
width: calc(13rem*1.2);
|
||||
// display: flex;
|
||||
display: block;
|
||||
border-radius: calc(1rem*1.2);
|
||||
margin: 0;
|
||||
border: 2px solid;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 calc(1rem*1.2);
|
||||
text-align: center;
|
||||
}
|
||||
ul{
|
||||
position: absolute;
|
||||
width: calc(13rem*1.2);
|
||||
text-align: center;
|
||||
margin-top: calc(.3rem*1.2);
|
||||
border-radius: calc(1rem*1.2);
|
||||
overflow: hidden;
|
||||
li{
|
||||
// background: rgba(0,0,0,.2);
|
||||
background: #cccccc;
|
||||
line-height: 2;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 calc(1rem*1.2);
|
||||
&.active{
|
||||
// opacity: .4;
|
||||
color: #a4a4a4 !important;
|
||||
background: #ebebeb !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
.printModel_item:hover{
|
||||
// background: rgba(0,0,0,.4);
|
||||
background: #999999;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
204
src/component/HomePage/printCategory.vue
Normal file
204
src/component/HomePage/printCategory.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div class="operate_file_block">
|
||||
<div class="select_img_type">
|
||||
<div
|
||||
class="select_category"
|
||||
:class="driverClass.class1"
|
||||
@click.stop="showFileCategory(item)"
|
||||
>
|
||||
{{ item.categoryValue }}
|
||||
<div
|
||||
:class="[
|
||||
'icon',
|
||||
'iconfont',
|
||||
'icon-xiala',
|
||||
item.categoryShow
|
||||
? 'icon_rotate'
|
||||
: '',
|
||||
]"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="category_list"
|
||||
:class="driverClass.class2"
|
||||
v-show="item.categoryShow"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'category_item',
|
||||
item.category == cate.value
|
||||
? 'select_category_item'
|
||||
: '',
|
||||
]"
|
||||
v-for="(
|
||||
cate, index
|
||||
) in disignTypeList"
|
||||
:key="index"
|
||||
@click="
|
||||
selectFileCategory(
|
||||
item,
|
||||
cate
|
||||
)
|
||||
"
|
||||
>
|
||||
{{ cate.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref ,nextTick} from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
export default defineComponent({
|
||||
name:'filterComponent',
|
||||
props:{
|
||||
disignTypeList:{
|
||||
type:Object
|
||||
},
|
||||
item:{
|
||||
type:Object
|
||||
},
|
||||
generateList:{
|
||||
type:Array
|
||||
},
|
||||
isSetSketchCategory:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
},
|
||||
driver__:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
},
|
||||
driverClass:{
|
||||
type:Object,
|
||||
default:{class1:'',class2:''},
|
||||
}
|
||||
},
|
||||
setup(props:any){
|
||||
let showFileCategory = (file:any)=> {
|
||||
file.categoryShow = true;
|
||||
nextTick().then(()=>{
|
||||
if(props.driver__){
|
||||
|
||||
driverObj__.moveNext()
|
||||
}
|
||||
})
|
||||
document.addEventListener("click", hiddenFileCategory);
|
||||
}
|
||||
let hiddenFileCategory = () => {
|
||||
for (let item of props.generateList) {
|
||||
item.categoryShow = false;
|
||||
}
|
||||
document.removeEventListener("click", hiddenFileCategory);
|
||||
}
|
||||
let selectFileCategory = (file: any, cate: any) => {
|
||||
for (let item of props.generateList) {
|
||||
item.categoryShow = false;
|
||||
}
|
||||
file.categoryValue = cate.name;
|
||||
file.category = cate.value;
|
||||
if(props.isSetSketchCategory){
|
||||
setSketchLibrary(props.item)
|
||||
}
|
||||
if(props.driver__){
|
||||
driverObj__.moveNext()
|
||||
}
|
||||
// this.store.commit("sketchGenerateFiles", this.fileList);
|
||||
|
||||
}
|
||||
let setSketchLibrary = (item:any)=>{
|
||||
let data = {
|
||||
libraryId:[item.id],
|
||||
level2Type:item.category,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
|
||||
(rv: any) => {
|
||||
}
|
||||
).catch((res)=>{
|
||||
});
|
||||
}
|
||||
return {
|
||||
showFileCategory,
|
||||
selectFileCategory,
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
//衣服类型下拉菜单
|
||||
.operate_file_block{
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
font-size: 1.6rem;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
.select_img_type{
|
||||
height: 100%;
|
||||
line-height: 3rem;
|
||||
text-align: center;
|
||||
background: rgba(0,0,0,0.6);
|
||||
position: relative;
|
||||
overflow: initial !important;
|
||||
.select_category{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon-xiala{
|
||||
margin-left: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icon_rotate{
|
||||
-moz-transform:rotate(180deg);
|
||||
-webkit-transform:rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
animation-direction: 0.5s;
|
||||
}
|
||||
|
||||
.category_list{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
// top: 3.1rem;
|
||||
margin-top: .2rem;
|
||||
left: 0;
|
||||
// background: rgba(0,0,0,0.4);
|
||||
background-color: rgb(177 177 177);
|
||||
border: 1px solid #343579;
|
||||
border-radius: 0.8rem;
|
||||
// overflow: hidden;
|
||||
z-index: 3;
|
||||
height: 9rem;
|
||||
overflow-x: hidden;
|
||||
&.category_list::-webkit-scrollbar{display: none;}
|
||||
|
||||
.category_item{
|
||||
text-align: left;
|
||||
font-size: 1.4rem;
|
||||
padding: 1rem 1.5rem;
|
||||
line-height: 1.6rem;
|
||||
font-weight: 600;
|
||||
color: #595959;
|
||||
|
||||
&.select_category_item{
|
||||
background: linear-gradient(-137deg, #eeefdb, #e7dbed);
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background: linear-gradient(-137deg, #eeefdb, #e7dbed);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user