This commit is contained in:
X1627315083
2024-06-20 10:36:45 +08:00
parent 814dd1205c
commit dc93403506
28 changed files with 1506 additions and 394 deletions

View File

@@ -9,4 +9,4 @@ VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
# 佩佩
# VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
# 海波
VUE_APP_BASE_URL = 'http://192.168.1.9:5567'
# VUE_APP_BASE_URL = 'http://192.168.1.9:5567'

View File

@@ -15,6 +15,15 @@ input {
outline: none;
border: 0.1rem solid #dcdfe6;
}
select {
height: 2.5rem;
border: 0.2rem solid #c4c4c4 !important;
border-radius: 4px;
/* 设置圆角半径 */
}
select:focus-visible {
border: 0.2rem solid #c4c4c4 !important;
}
ul,
li {
list-style: none;

View File

@@ -16,6 +16,14 @@ input{
outline: none;
border: .1rem solid #dcdfe6;
}
select{
height: 2.5rem;
border: 0.2rem solid #c4c4c4 !important;
border-radius: 4px; /* 设置圆角半径 */
}
select:focus-visible{
border: 0.2rem solid #c4c4c4 !important;
}
ul,li{
list-style: none;
padding: 0;

View File

@@ -97,7 +97,7 @@
<div class="centent_div centent_print" v-if="exhibitionList.print && exhibitionList.print.length > 1" @click="openCurrent(2)">
<img v-for="item in exhibitionList.print" :key="item.id" :src="item.path" alt="">
</div>
<div v-else-if="exhibitionList.print && exhibitionList.print.length == 1" class="centent_div">
<div v-else-if="exhibitionList.print && exhibitionList.print.length == 1" class="centent_div" @click="openCurrent(2)">
<img :src="exhibitionList.print[0]?.path" alt="">
</div>
<i v-else class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
@@ -133,7 +133,7 @@
<div class="centent_div centent_print" v-if="exhibitionList.elements && exhibitionList.elements.length > 1" @click="openCurrent(4)">
<img v-for="item in exhibitionList.elements" :key="item.id" :src="item.path" alt="">
</div>
<div v-else-if="exhibitionList.elements && exhibitionList.elements.length == 1" class="centent_div">
<div v-else-if="exhibitionList.elements && exhibitionList.elements.length == 1" class="centent_div" @click="openCurrent(4)">
<img :src="exhibitionList.elements[0]?.path" alt="">
</div>
<i v-else class="fi fi-rr-picture centent" @click="openCurrent(4)"></i>
@@ -359,6 +359,8 @@ export default defineComponent({
handler(newVal,oldVal){
if(newVal && newVal.length > 0){
this.exhibitionList.print = this.setExhibitionList(newVal)
}else{
this.exhibitionList.print = []
}
}
},
@@ -366,6 +368,8 @@ export default defineComponent({
handler(newVal,oldVal){
if(newVal && newVal.length > 0){
this.exhibitionList.elements = this.setExhibitionList(newVal)
}else{
this.exhibitionList.print = []
}
}
},

View File

@@ -24,9 +24,9 @@
<!-- <div class="modal_img_item" v-for="item,index in current.printObject.prints" :key="item" > -->
<img v-lazy="item.path" alt="">
<sketchCategory :disignTypeList="designTypeList" :generateList="exhibitionList.print" :item="item" :isSpread="true" :isSetSketchCategory="true"></sketchCategory>
<div
class="delete_file_block"
v-if="current.printObject.ifSingle"
@click="deleteSelectptints(item,index)"
>
<span class="icon iconfont icon-shanchu"></span>
@@ -92,10 +92,9 @@
</div>
</div>
<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn" :class="[ !sketchImg?.id?!current?.id?'active':'':'' ]">{{ $t('DesignDetailEnd.preview') }}</div>
<div v-if="type_ == 2 && (current?.printObject?.prints?.length != 0 || printsList.length != 0)" @click.stop="setPrint" class="subitOkPreviewBtn Guide_1_23">{{ $t('DesignDetailEnd.Layout') }}</div>
<div v-if="type_ == 2 && (current?.printObject?.prints?.length != 0 || printsList.length != 0 || exhibitionList.print.length != 0)" @click.stop="setPrint" class="subitOkPreviewBtn Guide_1_23">{{ $t('DesignDetailEnd.Layout') }}</div>
<!-- <div v-else-if="type_ == 2 && designItemDetail?.clothes?.[currentIndex]?.printObject?.prints?.[0]?.path != null && current?.printObject?.prints?.[0]?.path == null" @click.stop="setPreview" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.preview') }}</div> -->
<div v-if="type_ == 4" @click.stop="setElemets" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.Layout') }}</div>
<div v-if="type_ == 4 && (elementsList.length != 0 || exhibitionList.elements.length != 0)" @click.stop="setElemets" class="subitOkPreviewBtn">{{ $t('DesignDetailEnd.Layout') }}</div>
<DesignPrintOperation v-if="!moible" ref="DesignPrintOperation"></DesignPrintOperation>
<DesignPrintOperationMobile v-else ref="DesignPrintOperationMobile"></DesignPrintOperationMobile>
<DesignElementsOperation v-if="!moible" ref="DesignElementsOperation"></DesignElementsOperation>

View File

@@ -40,10 +40,10 @@
<div class="print_right show_print_right Guide_1_25" :class="[driver__.driver?'showEvents':'']">
<div class="designOpenrtion_nav">
<div class="designOpenrtion_single" v-for="item,index in designOpenrtionList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
<img :src="item.path" @click="setpitch(item,index)">
<img :class="[(item.checked == true && overallSingle == false)?'active':'']" :src="item.path" @click="setpitch(item,index)">
</div>
<div class="designOpenrtion_single" v-for="item,index in designList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
<img :src="item.path" @click="setpitch(item,index)">
<img :class="[(item.checked == true && overallSingle == false)?'active':'']" :src="item.path" @click="setpitch(item,index)">
</div>
<!-- <div class="designOpenrtion_overall" v-show="!overallSingle">
<img :src="designOpenrtionList[0].path">
@@ -87,6 +87,7 @@
</div>
</div>
<!-- <img v-if="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtion_sketch"> -->
<!-- {{printStyleList[stateOverallSingle][0]}} -->
<img :src="current?.path" alt="" class="designOpenrtion_sketch">
<img v-show="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtion_sketch_mask">
<div class="designOpenrtion_btn">
@@ -104,9 +105,9 @@
<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" :class="{active:printStyleList[stateOverallSingle][0]?.designOpenrtionBtn}" class="designOpenrtion_Mouoverall" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @mousedown.stop="itemMoveMousedown(0,$event)">
<i class="fi fi-rr-arrows animtion1"></i>
<i class="fi fi-rr-arrows animtion2"></i>
<li class="designOpenrtion_delete" @click="deletePrint">
<!-- <li class="designOpenrtion_delete" @click="deletePrint">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
</li>
</li> -->
</ul>
</div>
</div>
@@ -287,6 +288,9 @@ export default defineComponent({
this.ifListOver()
if(this.current.printObject.prints)this.exhibitionOpenrtionList[this.stateOverallSingle] = JSON.parse(JSON.stringify(this.current.printObject.prints))
if(this.$parent.exhibitionList.print)this.designOpenrtionList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.print))
if(this.overallSingle == false && this.designOpenrtionList.length > 0){
this.designOpenrtionList[0].checked = true
}
if(this.$parent.elementsList)this.designList = JSON.parse(JSON.stringify(this.$parent.printsList))
// this.overallSingle = this.current.ifSingle?false:this.current.ifSingle
let skecth = new Image
@@ -341,14 +345,27 @@ export default defineComponent({
}
// this.random()
},
async setpitch(item,index){
async setpitch(item,index,str){
await this.setPrintWH(item.path)
this.printStyleList[this.stateOverallSingle].forEach((v)=>{
v.designOpenrtionBtn = false
})
if(!this.overallSingle){
if(item.checked){
this.deletePrint()
item.checked = false
return
}else{
this.designOpenrtionList.forEach((itemElem)=>{
itemElem.checked = false
})
this.designList.forEach((itemElem)=>{
itemElem.checked = false
})
item.checked = true
}
this.printStyleList[this.stateOverallSingle][0] = JSON.parse(JSON.stringify(this.currentPrintStyleList))
this.refetchTemplate(0)
this.refetchTemplate(0,true)
this.exhibitionOpenrtionList[this.stateOverallSingle][0] = {
angle:0,
designType:item.designType,
@@ -359,7 +376,7 @@ export default defineComponent({
scale:.3,
location:[0,0]
}
this.systemDesignerPercentage = 30
this.systemDesignerPercentage = item.scale?item.scale*100:30
}else{
this.printStyleList[this.stateOverallSingle].push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
let currentIndex = this.printStyleList[this.stateOverallSingle].length-1
@@ -373,7 +390,7 @@ export default defineComponent({
scale:1,
location:[0,0]
})
this.refetchTemplate(currentIndex)
this.refetchTemplate(currentIndex,false)
}
},
//设置移动
@@ -518,11 +535,11 @@ export default defineComponent({
},
random(){
this.exhibitionOpenrtionList[this.stateOverallSingle].forEach((v,index)=>{
this.refetchTemplate(index)
this.refetchTemplate(index,false)
})
},
//随机重置图片顺序
refetchTemplate(index) {
refetchTemplate(index,boor) {
// let scale = (Math.trunc(Math.random()*15)+1)*.1
let rotateZ1 = Math.trunc(Math.random()*360)+1
let rotateZ2 = Math.trunc(Math.random()*360)+1
@@ -549,8 +566,8 @@ export default defineComponent({
top:0,
},
style:{
left:Math.trunc(Math.random()*x)+1+"px",
top:Math.trunc(Math.random()*y)+1+"px",
left:(boor?sketch.offsetWidth/2:Math.trunc(Math.random()*x)+1)+"px",
top:(boor?sketch.offsetHeight/2:Math.trunc(Math.random()*y)+1)+"px",
right:"auto",
bottom:"auto",
width:this.print.width.replace(/px/g,'')*scale+'px',
@@ -915,6 +932,10 @@ export default defineComponent({
img{
width: 100%;
cursor: pointer;
&.active{
opacity: .5;
transform: scale(.8);
}
}
.designOpenrtion_overall{
width: 80%;

View File

@@ -38,6 +38,20 @@
</div>
</div>
<div class="print_right show_print_right Guide_1_25" :class="[driver__?.driver?'showEvents':'']">
<div class="designOpenrtionMobile_nav">
<!-- <div class="designOpenrtionMobile_single" v-show="overallSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index]?.designOpenrtionBtn?printStyleList[index]?.designOpenrtionBtn:false}">
<img :src="item.path" @click="setpitch(item,index)">
</div> -->
<div class="designOpenrtionMobile_single" v-for="item,index in designOpenrtionList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
<img :class="[(item.checked == true && overallSingle == false)?'active':'']" :src="item.path" @click="setpitch(item,index)">
</div>
<div class="designOpenrtionMobile_single" v-for="item,index in designList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
<img :class="[(item.checked == true && overallSingle == false)?'active':'']" :src="item.path" @click="setpitch(item,index)">
</div>
<!-- <div class="designOpenrtionMobile_overall" v-show="!overallSingle">
<img :src="designOpenrtionList[0].path">
</div> -->
</div>
<div v-show="!overallSingle" class="habit_System_Designer">
<div class="habit_System_Designer_text">Scale</div>
<a-slider id="system_silder"
@@ -53,20 +67,7 @@
<input class="search_input" :placeholder="$t('DesignPrintOperation.inputContent')" type="Number" v-model="printAmount" @input="setprintAmount">
<i class="fi fi-rr-trash" @click="deletePrint"></i>
</div> -->
<div class="designOpenrtionMobile_nav">
<!-- <div class="designOpenrtionMobile_single" v-show="overallSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index]?.designOpenrtionBtn?printStyleList[index]?.designOpenrtionBtn:false}">
<img :src="item.path" @click="setpitch(item,index)">
</div> -->
<div class="designOpenrtionMobile_single" v-for="item,index in designOpenrtionList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
<img :src="item.path" @click="setpitch(item,index)">
</div>
<div class="designOpenrtionMobile_single" v-for="item,index in designList" :key="item" v-show="(stateOverallSingle == 'overall' && item.level2Type == 'Pattern') || stateOverallSingle == 'single'">
<img :src="item.path" @click="setpitch(item,index)">
</div>
<!-- <div class="designOpenrtionMobile_overall" v-show="!overallSingle">
<img :src="designOpenrtionList[0].path">
</div> -->
</div>
<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
<div class="subitOkPreviewBtn Guide_1_25_1" :class="[driver__.driver?'hideEvents':'']" @click.stop="setOK">OK</div>
</div>
@@ -105,9 +106,9 @@
<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" :class="{active:printStyleList[stateOverallSingle][0]?.designOpenrtionBtn}" class="designOpenrtionMobile_Mouoverall" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @touchstart.stop="itemMoveMousedown(0,$event)">
<i class="fi fi-rr-arrows animtion1"></i>
<i class="fi fi-rr-arrows animtion2"></i>
<li class="designOpenrtionMobile__delete" @click="deletePrint">
<!-- <li class="designOpenrtionMobile__delete" @click="deletePrint">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
</li>
</li> -->
</ul>
</div>
</div>
@@ -288,7 +289,9 @@ export default defineComponent({
if(this.current.printObject.prints)this.exhibitionOpenrtionList[this.stateOverallSingle] = JSON.parse(JSON.stringify(this.current.printObject.prints))
if(this.$parent.exhibitionList.print)this.designOpenrtionList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.print))
if(this.$parent.elementsList)this.designList = JSON.parse(JSON.stringify(this.$parent.printsList))
// this.overallSingle = this.current.ifSingle?false:this.current.ifSingle
if(this.overallSingle == false && this.designOpenrtionList.length > 0){
this.designOpenrtionList[0].checked = true
}
let skecth = new Image
skecth.src = this.current.path
skecth.onload=()=>{
@@ -347,7 +350,21 @@ export default defineComponent({
v.designOpenrtionBtn = false
})
if(!this.overallSingle){
if(item.checked){
this.deletePrint()
item.checked = false
return
}else{
this.designOpenrtionList.forEach((itemElem)=>{
itemElem.checked = false
})
this.designList.forEach((itemElem)=>{
itemElem.checked = false
})
item.checked = true
}
this.printStyleList[this.stateOverallSingle][0] = JSON.parse(JSON.stringify(this.currentPrintStyleList))
this.refetchTemplate(0,true)
this.exhibitionOpenrtionList[this.stateOverallSingle][0] = {
angle:0,
designType:item.designType,
@@ -358,8 +375,7 @@ export default defineComponent({
scale:.3,
location:[0,0]
}
this.refetchTemplate(0)
this.systemDesignerPercentage = 30
this.systemDesignerPercentage = item.scale?item.scale*100:30
}else{
this.printStyleList[this.stateOverallSingle].push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
let currentIndex = this.printStyleList[this.stateOverallSingle].length-1
@@ -373,7 +389,7 @@ export default defineComponent({
scale:1,
location:[0,0]
})
this.refetchTemplate(currentIndex)
this.refetchTemplate(currentIndex,false)
}
},
//设置移动
@@ -519,11 +535,11 @@ export default defineComponent({
},
random(){
this.exhibitionOpenrtionList[this.stateOverallSingle].forEach((v,index)=>{
this.refetchTemplate(index)
this.refetchTemplate(index,false)
})
},
//随机重置图片顺序
refetchTemplate(index) {
refetchTemplate(index,boor) {
// let scale = (Math.trunc(Math.random()*15)+1)*.1
let rotateZ1 = Math.trunc(Math.random()*360)+1
let rotateZ2 = Math.trunc(Math.random()*360)+1
@@ -550,8 +566,8 @@ export default defineComponent({
top:0,
},
style:{
left:Math.trunc(Math.random()*x)+1+"px",
top:Math.trunc(Math.random()*y)+1+"px",
left:(boor?sketch.offsetWidth/2:Math.trunc(Math.random()*x)+1)+"px",
top:(boor?sketch.offsetHeight/2:Math.trunc(Math.random()*y)+1)+"px",
right:"auto",
bottom:"auto",
width:this.print.width.replace(/px/g,'')*scale+'px',
@@ -567,7 +583,8 @@ export default defineComponent({
}
},
//设置图片
setTemplate(item,index) {
async setTemplate(item,index) {
await this.setPrintWH(item.path)
this.designOpenrtionList
let sketch = document.getElementsByClassName("designOpenrtionMobile_modal")[0]?.getElementsByClassName('designOpenrtionMobile_sketch')[0]
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
@@ -952,6 +969,10 @@ export default defineComponent({
img{
width: 100%;
cursor: pointer;
&.active{
opacity: .5;
transform: scale(.8);
}
}
.designOpenrtionMobile_overall{
width: 80%;

View File

@@ -31,7 +31,7 @@
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth">
<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
<div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div>
</div>
</div>
@@ -76,7 +76,10 @@ export default defineComponent({
let exportWH = 512
let canvasBtn = reactive({
canvasState:'move',
canvasPencilWidth:4,
canvasPencilWidth:{
pencil:4,
eraser:4,
},
spreadState:false,
})
let canvasWH = ref(0);
@@ -166,7 +169,7 @@ export default defineComponent({
}
let rgba = 'rgba(0, 0, 0, 1)'
let brushIndicator = new fabric.Circle({
radius:(canvasBtn.canvasPencilWidth/2),
radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]/2),
fill: '#fff',
stroke: '#000',
strokeWidth: 1,
@@ -198,7 +201,7 @@ export default defineComponent({
let setPencil = ()=>{
canvas.isDrawingMode = true//开启绘画模式
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth);
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
canvas.freeDrawingBrush.color = rgba
brushIndicator.set('fill',rgba)
canvas.freeDrawingBrush.isEraser = false
@@ -210,7 +213,7 @@ export default defineComponent({
brushIndicator.set({fill: '#fff'});
canvas.requestRenderAll();
canvas.freeDrawingBrush.isEraser = true
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth);
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
}
let deleteObj = ()=> {
// if(!canvas.getActiveObjects()){
@@ -231,7 +234,7 @@ export default defineComponent({
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOutWidth)
setTimeOutWidth = setTimeout(()=>{
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth)
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
},300)
}
let updateCanvasState = () =>{

View File

@@ -169,6 +169,9 @@
<habitSetStyle ref="habitSetStyle" @setParentData=setParentData @setWorkspaceStyle=setWorkspaceStyle></habitSetStyle>
</div>
</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
</template>
<script lang="ts">
import { useStore } from "vuex";
@@ -242,6 +245,7 @@ export default defineComponent({
])
const {t} = useI18n()
let styleList = ref([])
let isShowMark = ref(true)
return{
systemSeleves,
mannequins,
@@ -256,7 +260,8 @@ export default defineComponent({
sex,
position,
t,
styleList
styleList,
isShowMark
}
},
watch:{
@@ -493,43 +498,44 @@ export default defineComponent({
getDetail(id:any){//
Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:id}}).then((rv: any) => {
if (rv) {
this.isShowMark = false
if(rv.position == "Overall"){
rv.overallSingle = false
}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.allKeywordsByStyle = {
// 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
this.setMannequinsSex()
@@ -810,7 +816,8 @@ export default defineComponent({
// this.store.commit("setTemplateData", event);
// },
setWorkspaceStyle(data: any){
this.workspaceItem.styleId = data
this.workspaceItem.styleId = data.id
this.workspaceItem.styleName = data.name
this.putWorkspace(this.workspaceItem,this.workspaceItem.id)
},
setStyle(){

View File

@@ -29,9 +29,15 @@
</div>
</div>
</div>
<div class="habitSetStyle_ok started_btn" @click="setOk">
OK
<div class="habitSetStyle_ok">
<div class="started_btn" @click="setOk()">
OK
</div>
<div class="started_btn" @click="setClear()">
Clear
</div>
</div>
</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
@@ -42,11 +48,12 @@
<script lang="ts">
import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
// import { getCookie } from "@/tool/cookie";
import { message,Modal } from "ant-design-vue";
import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
import { Https } from "@/tool/https";
import { getCookie,setCookie } from "@/tool/cookie";
// import domTurnImg from '@/tool/domTurnImg'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal,message } from 'ant-design-vue';
import { downloadIamge } from "@/tool/util";
export default defineComponent({
@@ -55,6 +62,7 @@ emits:['setParentData','setWorkspaceStyle'],
setup(props,{emit}) {
let habitSetStyle: any = ref(false);//弹窗
let habitSetStyleMask:any = ref(false)//弹窗遮罩
let oldDataId = ''
let habitSetStyleData:any = reactive({
styleList:[],
selectStyle:{
@@ -85,6 +93,7 @@ setup(props,{emit}) {
if(habitSetStyleData.styleList.length == 0){
getStyleList()
}
oldDataId = data.styleId
habitSetStyleData.selectStyle.id = data.styleId
habitSetStyleData.selectStyle.name = data.styleName
// habitSetStyleData.selectStyleId = 'feng2'
@@ -108,8 +117,38 @@ setup(props,{emit}) {
cleardata()
}
let setOk= ()=>{
emit('setWorkspaceStyle',habitSetStyleData.selectStyle.id)
cleardata()
let data = {
id:habitSetStyleData.selectStyle.id,
name:habitSetStyleData.selectStyle.name,
isRevampModel:false,
}
if(oldDataId == data.id){
cleardata()
}else{
let _this = this
Modal.confirm({
title: 'It is detected that you have modified the style, may I ask whether the model is changed to the model corresponding to the style',
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
zIndex:1050,
onOk() {
data.isRevampModel = true
emit('setWorkspaceStyle',data)
cleardata()
},
onCancel() {
emit('setWorkspaceStyle',data)
cleardata()
},
});
}
}
let setClear = ()=>{
habitSetStyleData.selectStyle.id = ''
habitSetStyleData.selectStyle.name = ''
}
let setItemSelect = (item:any)=>{
habitSetStyleData.selectStyle = item
@@ -123,6 +162,7 @@ setup(props,{emit}) {
cancelDsign,
setItemSelect,
setOk,
setClear,
};
},
data() {
@@ -231,6 +271,11 @@ methods: {
width: 60%;
text-align: center;
margin: 0 auto;
display: flex;
justify-content: space-around;
>div{
width: 40%;
}
}
}

View File

@@ -51,7 +51,7 @@
</div> -->
<div class="color_setting_operateSingle">
<div class="started_btn" @click="setOperate">
{{ colorList[selectIndex]?.gradient?.gradientShow? 'Gradual Change':'Single'}}
{{ colorList[selectIndex]?.gradient?.gradientShow? 'Gradual':'Single'}}
</div>
</div>
<div class="color_setting_operate" v-if="colorList[selectIndex]?.gradient?.gradientShow">

View File

@@ -101,7 +101,34 @@
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:operation == 'move'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:operation == 'eraser'}"></i>
</div>
<div class="exportCanvasBox_left_tool_item">
<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
<label class="uploadImage">
<i class="icon iconfont icon-shangchuantupian" ></i>
<input type="file" @change="uploadImage">
</label>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
</div>
</div>
<div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
{{ $t('exportModel.More') }}
<!-- <div
:class="[
'icon',
'iconfont',
'icon-xiala',
closeNav.move?'icon-rotate':''
]"
>
</div> -->
</div>
<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
<div class="exportCanvasBox_left_tool_item">
<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div >{{ $t('exportModel.Color') }}</div>
@@ -109,7 +136,7 @@
</label>
<label v-show="operation != 'move'">
<div >{{ $t('exportModel.Size') }}:</div>
<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[operation]">
<input @change="setFontFamily" type="range" @input="setPencilWidth" min="3" max="50" v-model="canvasPencilWidth[operation]">
</label>
<label v-show="operation == 'pencil'">
<div >{{ $t('exportModel.Brushwork') }}:</div>
@@ -135,7 +162,7 @@
</a-select-option>
</a-select>
</label>
<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'">
<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
<div >{{ $t('exportModel.FillBack') }}:</div>
<div class="exportCanvasBox_left_tool_item leftAlign">
<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
@@ -155,40 +182,24 @@
<div >{{ $t('exportModel.Width') }}</div>
<input type="number" @input="setAllSelectWidth" v-model="allSelectWidth">
</label>
<label v-show="operation == '' || operation == 'text' || textDataShow">
<div>Font Family</div>
<a-select ref="select" class="label_select" size="small" v-model:value="fontFamily"
style="flex: 1"
@change="setFontFamily"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
{{item.name}}
</a-select-option>
</a-select>
</label>
<!-- <label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div >{{ $t('exportModel.Height') }}</div>
<input type="number" @input="setPencilColor" v-model="canvasPencilColor">
</label> -->
</div>
</div>
<div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
{{ $t('exportModel.More') }}
<div
:class="[
'icon',
'iconfont',
'icon-xiala',
closeNav.move?'icon-rotate':''
]"
>
</div>
</div>
<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.move}">
<div class="exportCanvasBox_left_tool_item">
<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
<label class="uploadImage">
<i class="icon iconfont icon-shangchuantupian" ></i>
<input type="file" @change="uploadImage">
</label>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
</div>
</div>
<div class="exportCanvasBox_left_bottom">
<div class="exportCanvasBox_left_credits" v-show="credits<1">
<div><span class="icon iconfont icon-zhuyi"></span>{{ $t('exportModel.insufficient') }}</div>
@@ -443,11 +454,9 @@ export default defineComponent({
Https.axiosPost(Https.httpUrls.exportSearch, data)
.then((rv) => {
resolve(rv)
isShowMark.value = false
})
.catch((rv) => {
resolve(null)
isShowMark.value = false
});
})
@@ -456,6 +465,7 @@ export default defineComponent({
canvasWH.value.height = oldExportCanvas.canvasHeight
canvas.setHeight(canvasWH.value.height);
canvas.loadFromJSON(oldExportCanvas, () => {});
isShowMark.value = false
}else{
for (const item of arr) {
for (const key in allBoardData.value) {
@@ -560,6 +570,7 @@ export default defineComponent({
canvas.setHeight(canvasWH.value.height);
}
}
isShowMark.value = false
}
updateCanvasState('')//加载完成后记录一下
if(driver__.value.driver){
@@ -638,6 +649,9 @@ export default defineComponent({
minioUrl = data.url
}else if(key == 'likePorductImg'){
imgId = data.id
let url = data.imgUrl.split('?')[0]
var match = url.match(/:(\d+)\/(.*)/);
minioUrl = match[2]
}else if(key == 'disposeMoodboard'){
let url = data.imgUrl.split('?')[0]
var match = url.match(/:(\d+)\/(.*)/);
@@ -665,14 +679,33 @@ export default defineComponent({
lockRotation: true,
});
}
//设置导出
let setExport = async () => {
initAligningGuidelines(canvas,false)
var imageDataURL = canvas.toDataURL({
let setExportCanvas = ()=>{
var objects = canvas.getObjects();
var maxHeight = 0;
// 计算所有对象的最大高度
objects.forEach(function(obj) {
var objBottom = obj.top + obj.height*obj.scaleY;
if (objBottom > maxHeight) {
console.log(obj);
maxHeight = objBottom;
}
});
canvasWH.height = maxHeight+30
// 调整 Canvas 的高度
canvas.setDimensions({ height: canvasWH.height });
// 重新渲染 Canvas
canvas.renderAll();
return canvas.toDataURL({
format: "png", // 导出格式为 PNG
quality: 1, // 图片质量为 1最高质量
});
}
//设置导出
let setExport = async () => {
initAligningGuidelines(canvas,false)
var imageDataURL = setExportCanvas()
let a = document.createElement("a");
let img = [];
let index = 0;
@@ -1107,6 +1140,8 @@ export default defineComponent({
let canvasPencilWidth = ref({
})
let fontFamily = ref({})
let textFontFamilyList = ref([])
let allSelectWidth = ref(-1)//多选或单选的宽度
let allSelect = ref([])//多选或单选的宽度
let setOperation = (str)=>{
@@ -1122,10 +1157,9 @@ export default defineComponent({
if(str == 'pencil'){
setPencil()
}else if(str == 'move'){
setMove()
JSchangeType(canvas,'init')
initAligningGuidelines(canvas,true)
setMove()
}else if(str == 'texture'){
setTexture()
}else if(str == 'eraser'){
@@ -1134,8 +1168,8 @@ export default defineComponent({
setMove()
setText()
JSchangeType(canvas,'init')
}else{
canvas.forEachObject((obj) =>obj.selectable = false);
}else if(str){
// canvas.forEachObject((obj) =>obj.selectable = false);
canvas.isDrawingMode = false
}
}
@@ -1356,43 +1390,50 @@ export default defineComponent({
canvas.freeDrawingBrush.isEraser = true
canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20;
}
let createText = {}
let setTextFun = (e)=>{
if(operation.value != 'text'){
return
}
var clickedObject = e.target;
if (clickedObject instanceof fabric.Textbox) {
createText = clickedObject
}else{
var pointer = canvas.getPointer(e.pointer);
var x = pointer.x;
var y = pointer.y;
let textbox = new fabric.Textbox('', {
createText = new fabric.Textbox('', {
left: x,
top: y,
width: 150,
fontSize: canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20,
fontFamily:fontFamily.value,
fill:canvasPencilColor.value,
})
canvas.add(textbox)
textbox.enterEditing();
canvas.setActiveObject(textbox).renderAll();
canvas.add(createText)
createText.enterEditing();
canvas.setActiveObject(createText).renderAll();
operation.value = ''
removeSetText()
}
}
let setText = ()=>{
if(isMoible()){
canvas.on('mouse:down',setTextFun)
}else{
canvas.on('mouse:dblclick',setTextFun)
}
// if(isMoible()){
// canvas.on('mouse:down',setTextFun)
// }else{
// canvas.on('mouse:dblclick',setTextFun)
// }
}
let removeSetText = ()=>{
if(isMoible()){
canvas.off('mouse:down',setTextFun)
}else{
canvas.off('mouse:dblclick',setTextFun)
}
// if(isMoible()){
// canvas.off('mouse:down',setTextFun)
// }else{
// canvas.off('mouse:dblclick',setTextFun)
// }
}
// let setTextStyle = (x,y)=>{
// var group = new fabric.Group([rect.color, rect.text, rect.text1],{
@@ -1414,6 +1455,10 @@ export default defineComponent({
let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOut.color)
setTimeOut.color = setTimeout(()=>{
if(createText){
setFontFamily()
return
}
// brushIndicator.fill = canvasPencilColor.value;
if(canvas.freeDrawingBrush.isEraser){
@@ -1484,6 +1529,7 @@ export default defineComponent({
let setCanvasDown = (event)=>{
// brushIndicator.set({fill: '#FFF',strokeWidth:0});
//设置移动端按下添加元素
if(isMoible && present.upScaleChecked){
present.upScaleChecked = false
present = {}
@@ -1527,6 +1573,15 @@ export default defineComponent({
}
}
}else{
var clickedObject = event.target;
if (clickedObject instanceof fabric.Textbox && operation.value != 'text') {
textDataShow.value = true
createText = clickedObject
setTextData(clickedObject)
}else{
textDataShow.value = false
createText = {}
}
createPatterningIs = false
}
}
@@ -1549,6 +1604,7 @@ export default defineComponent({
// currentPatterning.set({stroke: canvasPencilColor.value})
createPatterningIs = false
clearPatterning()//临时图形置为空并且添加撤回对象里面
setOperation('move')
}
//设置再画布上抬起
let setCanvasUp = (event)=>{
@@ -1592,9 +1648,10 @@ export default defineComponent({
if(operation.value == 'fold'){
canvas.forEachObject((obj) =>obj.selectable = false);
canvas.bringToFront(polyLineBtn);//设置优先级最高
}else{
}else if(operation.value){
createPatterningIs = false
clearPatterning()//临时图形置为空并且添加撤回对象里面
setOperation('move')
}
}
}
@@ -1768,10 +1825,7 @@ export default defineComponent({
initAligningGuidelines(canvas,false)
let publishModal = publish.value
publishModal.publishMask = true
var imageDataURL = canvas.toDataURL({
format: "jpeg", // 导出格式为 PNG
quality: 1, // 图片质量为 1最高质量
});
var imageDataURL = setExportCanvas()
let data = {
"imgUrl":imageDataURL,
userlikeGroupId:userlikeGroupId,
@@ -1801,7 +1855,43 @@ export default defineComponent({
})
return json
}
onMounted(() => {});
let textDataShow = ref(false)
let setTextData = (obj)=>{
fontFamily.value = obj.fontFamily
canvasPencilWidth.value['text'] = obj.fontSize
canvasPencilColor.value = obj.fill
}
let setFontFamily = ()=>{
if(createText){
createText.set({
fontFamily:fontFamily.value,
fontSize:canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20,
fill:canvasPencilColor.value,
})
canvas.renderAll();
}
}
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: '请选择字体' },
]
textFontFamilyList.value = arr
fontFamily.value = arr[0].value
});
return {
toSvg,
t,
@@ -1853,6 +1943,10 @@ export default defineComponent({
setExportSR,//设置SR导出
setShare,
setSubmit,
textFontFamilyList,
fontFamily,
textDataShow,
setFontFamily,
};
},
data(prop) {
@@ -1989,11 +2083,13 @@ export default defineComponent({
div {
width: 8rem;
}
input {
input,select {
// width: 10em;
flex: 1;
overflow: hidden;
height: 4.5rem;
}
.label_select{
img{
width: 100%;

View File

@@ -43,7 +43,7 @@
<template #content>
<p>Seed</p>
</template>
<input class="search_seed" v-show="scene?.value == 'Logo'" @input="ifSeedValue" v-model="searchPictureSeed" type="Number" placeholder='Seed' min="0">
<input class="search_seed" max="9999" v-show="scene?.value == 'Logo'" @input="ifSeedValue" v-model="searchPictureSeed" type="Number" placeholder='Seed' min="0">
</a-popover>
<input
@@ -99,10 +99,11 @@
</div>
<span class="inputShowText" ref="inputShowText"></span>
</div>
<div class="search_keyword" v-show="isInputFocus" @click.stop="">
<div class="search_keyword" v-if="workspace?.allKeywordsByStyle" v-show="isInputFocus" @click.stop="">
<div class="search_keyword_center">
<div class="search_keyword_center_left">
<div v-for="item in workspace?.keyWord?.[type_.type2]" @click.stop="cliSetKeyword(item.name)" class="search_keyword_center_item"> {{item.name}} </div>
<div v-if="type_.type2 == 'Printboard'" v-for="item in styleRecommend" @click.stop="cliSetKeyword(item)" class="search_keyword_center_item"> {{item}} </div>
<div v-for="item in workspace?.allKeywordsByStyle?.[type_.type2]" @click.stop="cliSetKeyword(item)" class="search_keyword_center_item"> {{item}} </div>
</div>
</div>
</div>
@@ -242,6 +243,7 @@ export default defineComponent({
let generateProceedList = ref([])
let remGenerate:any = ref(false)
let remGenerateTime:any = ref()
let styleRecommend:any = inject('styleRecommend')
return {
searchPictureName,
searchPictureSeed,
@@ -267,6 +269,7 @@ export default defineComponent({
generateProceedList,
remGenerate,
remGenerateTime,
styleRecommend,
};
},
data(prop) {
@@ -392,6 +395,7 @@ export default defineComponent({
},
getgenerate(){
this.isTextarea = false
this.isInputFocus = false
if(this.isGenerate)return
clearInterval(this.remGenerateTime)
if(this.searchPictureName){
@@ -417,16 +421,28 @@ export default defineComponent({
let collectionElementId = ''
let base64 = ''
if(this.sketchboardList?.[0]){
level2Type = this.sketchboardList[0].categoryValue?this.sketchboardList[0].categoryValue:''
collectionElementId = this.sketchboardList[0].id
if(this.sketchboardList[0].base64){
base64 = this.sketchboardList[0].imgUrl
}
}
let sloganType = ['Blue and Yellow Starry Night','Green Cthulhu','Red and yellow fire style','Cyberpunk style','City skyline buildings','Red maple leaves','Golden Sunflower','Emerald Jungle Canopy','Pink Sakura Blossom']
let sloganText = ''
sloganText = this.searchPictureName
if(this.upload.level1Type == "Sketchboard"){
level2Type = this.sketchboardList?.[0]?.categoryValue?this.sketchboardList[0].categoryValue:''
}else if(this.upload.level1Type == "Printboard"){
level2Type = this.scene?.value
if(level2Type == 'Slogan' && this.searchPictureName == ''){
var randomNumber = Math.floor(Math.random() * sloganType.length);
sloganText = sloganType[randomNumber]
}else if(level2Type == 'Pattern'){
sloganText = `${this.printModel.value},${sloganText}`
}
if(!base64 && level2Type == 'Slogan'){
message.info('请绘制Slogan');
return
}
}
let data = {
generateType:'text',
@@ -434,7 +450,7 @@ export default defineComponent({
collectionElementId:collectionElementId,
level1Type:this.upload.level1Type,
level2Type:level2Type,
text:this.searchPictureName,
text:sloganText,
seed:this.searchPictureSeed,
userId:this?.userInfo?.userId,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
@@ -559,6 +575,9 @@ export default defineComponent({
if(this.searchPictureName[this.searchPictureName.length-1] != ',' && this.searchPictureName.length != 0){
str = ','
}
if(this.upload.level1Type == "Moodboard"){
this.styleRecommend.push(value)
}
this.searchPictureName += str + value
},
ifSeedValue(e:any){

View File

@@ -154,7 +154,7 @@
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
<div class="pin_block">
<a-checkbox v-model="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
</div>
</div>
</div>

View File

@@ -1,5 +1,4 @@
<template>
<keep-alive>
<div v-if="showCollectionModal">
<a-modal class="modal_component collection_modal Guide_1_2"
v-model:visible="showCollectionModal"
@@ -56,7 +55,6 @@
</div>
</a-modal>
</div>
</keep-alive>
</template>
<script lang="ts">
import { defineComponent ,createVNode, ref,onUnmounted , computed,provide } from 'vue'
@@ -101,6 +99,8 @@ export default defineComponent({
let collectionStep=ref(1)
provide('driver__',driver__)
let isShowMark = ref(false)
let styleRecommend = ref([])
provide('styleRecommend',styleRecommend)
onUnmounted(()=>{
let data = {
showCollectionModal:showCollectionModal.value,
@@ -116,6 +116,7 @@ export default defineComponent({
position,
showCollectionModal,
collectionStep,
styleRecommend,
}
},
@@ -203,6 +204,7 @@ export default defineComponent({
_this.showCollectionModal = false
_this.store.commit('clearAllData')
_this.collectionStep = 1
_this.styleRecommend = []
}
});
},
@@ -285,9 +287,12 @@ export default defineComponent({
},
//完成
async finishCollection(){
console.log(123123);
this.isShowMark = true
let sketchList = this.store.state.UploadFilesModule.sketchboard
let arr:any = []
console.log(sketchList);
sketchList.forEach((item:any) => {
let obj = {
designType:item.resData.designType,
@@ -302,6 +307,7 @@ export default defineComponent({
this.isShowMark = false
return
}
let elList = document.querySelectorAll('.img_block_item_sketch img')
Https.axiosPost(Https.httpUrls.sketchBoardsBoundingBox, data)
.then((rv: any) => {

View File

@@ -107,7 +107,7 @@ export default defineComponent({
let canvasWH = ref(0);
let textData = reactive({
fill:'#000000',
fontSize:'35',
fontSize:'51',
fontFamily:'Arial',
textAlign:'left',
overline: false,
@@ -144,21 +144,26 @@ export default defineComponent({
nextTick(()=>{
let canvasBox = document.querySelector(".clearSlogan_modal .exportCanvasBox_center");
let height = canvasBox.offsetHeight;
textData.fontSize = (height/10*1.9).toFixed(0)
canvasBox.style.width = height+'px'
canvasWH.value = height
scale = exportWH/canvasWH.value
var canvasDom = document.createElement("canvas");
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
if(oldCanvasDom)oldCanvasDom.remove()
canvasBox.appendChild(canvasDom);
canvas = new fabric.Canvas(canvasDom, {
backgroundColor: "#e6e6e6",
width: canvasWH.value,
height: canvasWH.value,
isDrawingMode: false, // 开启绘图模式
});
canvas.on('object:moving',canvasMoving)
setTextFun('请输入一段话吧~')
// if(oldCanvasDom)oldCanvasDom.remove()
if(!oldCanvasDom){
var canvasDom = document.createElement("canvas");
canvasBox.appendChild(canvasDom);
canvas = new fabric.Canvas(canvasDom, {
backgroundColor: "#e6e6e6",
width: canvasWH.value,
height: canvasWH.value,
isDrawingMode: false, // 开启绘图模式
});
canvas.on('object:moving',canvasMoving)
setTextFun('请输入\n一段话吧~')
}
if(!fabric.Object.prototype.controls.deleteControl){
JSSetRemoveImage(deleteObj)
}else{
@@ -171,6 +176,14 @@ export default defineComponent({
})
}
let selectTextbox = ref(null)
let oldClickedObject = null
let clickObjChanged = (options)=>{
console.log(options);
console.log(oldClickedObject);
// var changedObject = options.target;
setBtnPosition(oldClickedObject)
}
let setTextBtn = (e) =>{//点击判断是否点击到文字
var clickedObject = e.target;
if (clickedObject instanceof fabric.IText){
@@ -183,6 +196,9 @@ export default defineComponent({
textData.linethrough = clickedObject.linethrough
textData.underline = clickedObject.underline
setBtnPosition(clickedObject)
clickedObject.on('changed',clickObjChanged);
if(oldClickedObject)oldClickedObject.off('changed',clickObjChanged);
oldClickedObject = clickedObject
}else{
selectTextbox.value = null
textBtnShow.value = false
@@ -206,6 +222,23 @@ export default defineComponent({
let messageShow = false
let canvasMoving = (options)=>{
let obj = options.target
let left,top
let canvasWidth = canvas.getWidth()
let canvasHeight = canvas.getHeight()
if(obj.left < 0){
left = obj.left<0?0:obj.left
}else{
left = obj.left + obj.width*obj.scaleX>canvasWidth?canvasWidth - obj.width*obj.scaleX:obj.left
}
if(obj.top < 0){
top = obj.top<0?0:obj.top
}else{
top = obj.top + obj.height*obj.scaleY>canvasHeight?canvasHeight - obj.height*obj.scaleY:obj.top
}
obj.set({
left,
top
})
isCanvasMoving(obj)
}
let isCanvasMoving = (obj)=>{
@@ -240,7 +273,6 @@ export default defineComponent({
textbox = new fabric.IText(str, {
fontSize: 20,
textAlign:'center'
// fill:canvasPencilColor.value,
})
textbox.set(textData)
@@ -364,6 +396,12 @@ export default defineComponent({
flex-direction: column;
// height: calc(512px / 2);
margin: 0 auto;
.modal_title_text{
padding-bottom: calc(2rem* 1.2);
background: #fff;
z-index: 4;
margin-bottom: 0;
}
.clearSlogan_center_item{
// position: relative;
background: #fff;
@@ -391,14 +429,6 @@ export default defineComponent({
-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;
@@ -442,7 +472,7 @@ export default defineComponent({
flex: 1;
position: relative;
margin: 0 auto;
overflow: hidden;
// overflow: hidden;
// overflow: scroll;
.canvas-container{
margin: 0 auto;

View File

@@ -233,6 +233,7 @@ export default defineComponent({
let cleardata = ()=>{
productImg.value = false
productImgData.isShowMark = false
productImgData.likeList = []
}
let fileUploadChange = (data: any)=> {

View File

@@ -35,13 +35,14 @@
</div>
</template>
</el-cascader>
<div v-show="selectCode == 'Sketchboard'" class="collection_rename_title">{{$t('LibraryPage.Category')}}</div>
<!-- <div v-show="selectCode == 'Sketchboard'" class="collection_rename_title">{{$t('LibraryPage.Category')}}</div> -->
<div v-show="selectCode == 'Sketchboard'" class="rename_form_content">
<div v-show="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="collection_rename_title">{{$t('LibraryPage.Category')}}</div>
<!-- <div v-show="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="collection_rename_title">{{$t('LibraryPage.Category')}}</div> -->
<div v-show="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="rename_form_content">
<div class="select_block">
<a-select
v-if="selectCode == 'Sketchboard'"
ref="select"
v-model:value="editSex.value"
v-model:value="sex"
:options="sexList"
@change="getPosition"
>
@@ -55,7 +56,7 @@
</a-select>
<a-select
ref="select"
v-model:value="editDesignType.value"
v-model:value="editDesignType"
:options="disignTypeList"
>
<template #suffixIcon>
@@ -164,7 +165,7 @@ export default defineComponent({
let parent:any = this.$parent
this.selectCode = parent.selectCode || ''
this.value = parent.value || ''
this.disignTypeList = parent.disignTypeList || []
this.disignTypeList = parent.designTypeList[this.selectCode] || []
this.sexList = parent.sexList || []
this.sex = parent.sex || ''
this.designType = parent.designType || ''
@@ -224,7 +225,7 @@ export default defineComponent({
},
async getPosition(){
let params
if(this.sex.value == 'Female'){
if(this.sex == 'Female'){
params = 'FemalePosition'
}else{
params = 'MalePosition'
@@ -259,7 +260,7 @@ export default defineComponent({
userGroupId :this.selectSingleImg.id,//history id
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType.value : ''
let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'Printboard' || this.selectCode == 'MarketingSketch' ? this.designType : ''
let labelArr:any = []
this.value.editLabelValue.forEach((item:any)=>{
labelArr.push(item[item.length-1]?item[item.length-1]:item)
@@ -311,7 +312,7 @@ export default defineComponent({
libraryId:this.renameType === 'batch' ? this.selectImgList : [this.selectSingleImg.id],
level2Type:this.editDesignType.value,
}
if(this.selectCode == 'Sketchboard'){
if(this.selectCode == 'Sketchboard' || this.selectCode == 'Printboard'){
await Https.axiosPost(Https.httpUrls.setSketchLibrary,data3).then(
(rv) => {
}

View File

@@ -37,7 +37,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span>321</span>
<span>{{item.viewNums}}</span>
</div> -->
<label @click="portfolioLike(item)">
<i v-if="true" class="fi fi-sr-thumbs-up" style="color:rgba(158, 158, 167);"></i>
@@ -50,7 +50,7 @@
<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
</svg> -->
<i class="fi fi-sr-eye"></i>
<span>{{item.likeNum}}</span>
<span>{{item.viewNums}}</span>
</div>
</div>
</div>
@@ -337,6 +337,8 @@ export default defineComponent({
display: flex;
width: 40%;
width: 20%;
// width: 7rem;
width: 60px;
justify-content: space-between;
>label{
// cursor: pointer;
@@ -345,14 +347,15 @@ export default defineComponent({
display: flex;
align-items: center;
i{
font-size: 2rem;
// font-size: 1.8rem;
font-size: 12px;
}
svg,i{
color: #9e9ea7;
display: flex;
// width: 10px;
// height: 10px;
margin-right: .5rem;
margin-right: 5px;
}
span{
margin-left: 3px;

View File

@@ -82,7 +82,7 @@
<img v-lazy="scaleImageData?.imgUrl">
</div> -->
<div class="detail_right_user_content">
<div class="scaleImage_chunk_title">名字</div>
<div class="scaleImage_chunk_title">{{scaleImageData.userName}}</div>
<!-- <div class="scaleImage_chunk_title_intro">个性签名</div>
<div class="scaleImage_chunk_btn">关注</div> -->
</div>
@@ -113,10 +113,10 @@
<i v-else class="fi fi-rr-social-network"></i>
<span>{{scaleImageData.likeNum}}</span>
</div>
<!-- <div>
<div>
<i class="fi fi-sr-eye"></i>
<span>{{scaleImageData.likeNum}}</span>
</div> -->
<span>{{scaleImageData.viewNums}}</span>
</div>
<div>
<i class="fi fi-rr-comment-alt-dots"></i>
<span>{{commentList.length}}</span>
@@ -169,7 +169,8 @@
<i class="fi fi-sr-thumbs-up" :adminSix="!!true" style="color: rgb(158, 158, 167);"></i>
<span>123</span>
</div> -->
<div v-show="true" class="left_content_item_unfold" @click="()=>item.unfold = !item.unfold">展开</div>
<!-- <div v-show="true" class="left_content_item_unfold" @click="()=>item.unfold = !item.unfold">展开</div> -->
</div>
<div class="detail_left_content_item_replyContent" v-for="children in item.childCommentVOList" :key="children.id">
<div class="detail_left_content_item_img">
@@ -269,6 +270,7 @@ export default defineComponent({
imgData.scaleImageIndex = 0
imgData.scaleImageData = {}
imgData.commentText = ''
imgData.scaleImageList = []
document.removeEventListener('click',removeCommentReply)
}
let download = ()=>{
@@ -302,8 +304,6 @@ export default defineComponent({
findUrl = rv.designPythonOutfitList.map((obj:any) => obj.designUrl);
}
imgData.scaleImageList = canvasUrl.concat(findUrl);
console.log(imgData.scaleImageList);
imgData.scaleImageIndex = 0
imgData.getCommentData.portfolioId = rv.id
if(str == 'zan'){
@@ -924,6 +924,7 @@ export default defineComponent({
i{
display: flex;
font-size: 2rem;
color: #9e9ea7;
}
span{
margin-left: calc(var(--padding) / 2);

View File

@@ -53,7 +53,7 @@ export default {
Texture:'材质',
FillBack:'填充 & 边',
Layer:'层级',
More:'更多',
More:'参数',
insufficient:'您的积分余额不足,如需使用此功能,请点击左上角充值',
HDExport:'转高清',
Export:'导出',

View File

@@ -4,7 +4,7 @@ export default {
HOME:'HOME',
LIBRARY:'LIBRARY',
HISTORY:'HISTORY',
WORKS:'WORKS',
WORKS:'GALLERY',
bindEmail:'bind email',
logOff:'log off',
language:'English',
@@ -54,7 +54,7 @@ export default {
Texture:'Texture',
FillBack:'Fill & Border',
Layer:'Layer',
More:'More',
More:'Adjustments',
insufficient:'Your points balance is insufficient, if you need to use this feature, please click the top left corner to recharge',
HDExport:'UpScale',
Export:'Export',

View File

@@ -137,6 +137,11 @@ const routes: Array<RouteRecordRaw> = [
name: 'feedbackSurvey',
component: _import('feedbackSurvey'),
},
{
path: '/feedbackSurveyCN',
name: 'feedbackSurveyCN',
component: _import('feedbackSurveyCN'),
},
{
path: '/404',
name: '404',

View File

@@ -256,6 +256,10 @@ export const Https = {
exportSave:`/api/history/exportSave`,//保存画布
exportSearch:`/api/history/exportSearch`,//保存画布
//调查问卷
questionnaire:`/api/account/questionnaire`,//保存画布
},
axiosGet(url,config) {

View File

@@ -82,120 +82,6 @@ export default defineComponent({
},
],
worksList: [
{
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/2.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'bbb',
lookNum:'999',
likeNum:'123',
like: true,
},
{
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/2.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/2.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'bbb',
lookNum:'999',
likeNum:'123',
like: true,
},{
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/11.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'bbb',
lookNum:'999',
likeNum:'123',
like: true,
},{
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/1.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
}
],
getListDate:{
"getLikePortfolio": 0,
@@ -235,15 +121,13 @@ export default defineComponent({
let fall:any = ref()
let setWorksSelect = (val:any) => {
filter.worksSelect = val.value
filter.getListDate.getLikePortfolio = 0
filter.getListDate.getMyPortfolio = 0
if(val.value == 'all'){
filter.getListDate.getLikePortfolio = 0
filter.getListDate.getMyPortfolio = 0
}else if(val.value == 'favoriteWorks'){
filter.getListDate.getLikePortfolio = 1
filter.getListDate.getMyPortfolio = 0
}else if(val.value == 'myWorks'){
filter.getListDate.getMyPortfolio = 1
filter.getListDate.getLikePortfolio = 0
}
filter.getListDate.page = 0
fall.value.clearData()
@@ -263,13 +147,15 @@ export default defineComponent({
.then((rv) => {
if (rv.content.length > 0) {
filter.isShowMark = false
fall.value.push(rv.content);
fall.value.push(rv.content);
} else {
filter.isNoData = true
}
// filter.worksList = rv.content
})
.catch((rv) => {});
.catch((rv) => {
filter.isShowMark = false
});
// setTimeout(() => {
// filter.isShowMark = false
@@ -290,6 +176,8 @@ export default defineComponent({
// });
}
onMounted (()=>{
filter.isShowMark = false
filter.isNoData = false
getPorfolio()
let worksPage:any = document.querySelector('.works_page')
let imgParent:any = document.querySelector('.page_loading')

View File

@@ -229,7 +229,7 @@
<template #content>
<p>Seed</p>
</template>
<input class="search_seed" v-show="selectCode == 'Printboard' && scene?.value == 'Logo'" @input="ifSeedValue" v-model="searchPictureSeed" type="Number" placeholder='Seed' min="0">
<input class="search_seed" max="9999" v-show="selectCode == 'Printboard' && scene?.value == 'Logo'" @input="ifSeedValue" v-model="searchPictureSeed" type="Number" placeholder='Seed' min="0">
</a-popover>
<input
class="search_input "
@@ -283,10 +283,10 @@
</div>
<span class="inputShowText" ref="inputShowText"></span>
</div>
<div class="search_keyword" v-show="isInputFocus" @click.stop="">
<div class="search_keyword" v-if="workspace?.allKeywordsByStyle" v-show="isInputFocus" @click.stop="">
<div class="search_keyword_center">
<div class="search_keyword_center_left">
<div v-for="item in workspace?.keyWord?.[selectCode]" @click.stop="cliSetKeyword(item.name)" class="search_keyword_center_item"> {{item.name}} </div>
<div v-for="item in workspace?.allKeywordsByStyle?.[selectCode]" @click.stop="cliSetKeyword(item)" class="search_keyword_center_item"> {{item}} </div>
</div>
</div>
</div>
@@ -405,10 +405,7 @@ export default defineComponent({
name:'',
value:''
})
let sex:any = ref({
label:'',
value:''
})
let sex:any = ref('')
const sexList:any = ref([])
const printType = computed(() => {
return store.state.UserHabit.printType;
@@ -577,7 +574,7 @@ export default defineComponent({
},
watch:{
sex(newVal,oldVal){
this.upload.gender = newVal.value
this.upload.gender = newVal
},
searchPictureName(newVal,oldVal){
// clearTimeout(this.getLibraryListInputTime)
@@ -615,7 +612,7 @@ export default defineComponent({
})
});
this.sex = arr[0]
this.sex = arr[0].value
this.sexList = arr
this.getPosition()
}
@@ -628,7 +625,7 @@ export default defineComponent({
// }else{
// params = 'MalePosition'
// }
this.store.commit('setPosition',this.sex.value)
this.store.commit('setPosition',this.sex)
this.designType = this.designTypeList.Sketchboard[0].value
// await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
@@ -657,7 +654,7 @@ export default defineComponent({
generateDetailId:item.id,
level1Type:this.selectCode,
level2Type: designType,
gender:this.sex.value,
gender:this.sex,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
}
Https.axiosPost(Https.httpUrls.generateLike, data).then(
@@ -959,7 +956,7 @@ export default defineComponent({
file:event.file,
level1Type:this.selectCode,
level2Type:designType,
sex:this.selectCode == 'Sketchboard' ? this.sex.value:'',
sex:this.selectCode == 'Sketchboard' ? this.sex:'',
modelType:'',
checkMd5:1,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
@@ -1031,7 +1028,7 @@ export default defineComponent({
level1Type:this.selectCode,
level2Type:designType,
page:1,
modelSex:this.sex.value?this.sex.value:'',
modelSex:this.sex?this.sex:'',
pictureName:this.searchPictureName,
size:this.pageSize,
intersection:this.intersection,
@@ -1195,6 +1192,7 @@ export default defineComponent({
}
},
getgenerate(){
this.isInputFocus = false
this.isTextarea = false
let selectCodeStr = JSON.parse(JSON.stringify(this.selectCode))
if(this.isGenerate[selectCodeStr]){
@@ -1207,17 +1205,31 @@ export default defineComponent({
let collectionElementId = ''
let base64 = ''
if(this.selectGenerateList?.[0]){
level2Type = this.selectGenerateList[0].categoryValue?this.selectGenerateList[0].categoryValue:''
collectionElementId = this.selectGenerateList[0].id
if(this.selectGenerateList[0].base64){
base64 = this.selectGenerateList[0].imgUrl
}
}
let sloganType = ['Blue and Yellow Starry Night','Green Cthulhu','Red and yellow fire style','Cyberpunk style','City skyline buildings','Red maple leaves','Golden Sunflower','Emerald Jungle Canopy','Pink Sakura Blossom']
let sloganText = ''
let arr = ["Painting Style","Illustration Style","Real Style"]
sloganText = this.captionGeneration
if(this.selectCode == "Sketchboard"){
level2Type = this.selectGenerateList?.[0]?.categoryValue?this.selectGenerateList[0].categoryValue:''
}else if(this.selectCode == "Printboard"){
level2Type = this.scene?.value
if(level2Type == 'Slogan' && this.captionGeneration == ''){
var randomNumber = Math.floor(Math.random() * sloganType.length);
sloganText = sloganType[randomNumber]
}else if(level2Type == 'Pattern'){
sloganText = `${arr[this.printModel.num-1]},${sloganText}`
}
if(!base64 && level2Type == 'Slogan'){
message.info('请绘制Slogan');
return
}
}
let arr = ["Painting Style","Illustration Style","Real Style"]
let data = {
generateType:'text',
designType:'collection',
@@ -1226,11 +1238,11 @@ export default defineComponent({
level2Type:level2Type,
userId:(this?.userInfo as any).userId,
isTestUser:this.driver__.driver?false:this.isTest,
text:selectCodeStr == 'Printboard'?`${arr[this.printModel.num-1]},${this.captionGeneration}`:this.captionGeneration,
text:sloganText,
seed:this.searchPictureSeed,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
version:1,//为1就是Print
gender:selectCodeStr == 'Sketchboard'?this.sex.value:'',
gender:selectCodeStr == 'Sketchboard'?this.sex:'',
sloganBase64:base64,
}
this.isGenerate[selectCodeStr] = true

View File

@@ -3,7 +3,7 @@
<main id="main">
<h1 id="title">AiDA 3.0 Feedback Survey</h1>
<p id="description">Please take the survey</p>
<form id="survey-form">
<div id="survey-form">
<h2 class="section-title">Personal Information</h2>
<div class="section w40">
<label for="name"
@@ -19,17 +19,22 @@
<label for="gender"
>Gender:<span class="fontColor">*</span></label
>
<input
<select name="dropdown" id="dropdown" v-model="gender">
<option selected value='Female'>Female</option>
<option value='Male'>Male</option>
</select>
<!-- <input
type="text"
v-model="gender"
placeholder="Enter your gender"
required
/>
/> -->
</div>
<div class="section w40">
<label for="occupation"
>Occupation:<span class="fontColor">*</span></label
>
<input
type="text"
v-model="occupation"
@@ -76,12 +81,12 @@
value="below20"
name="age"
v-model="age"
checked
/>
Below 20
</label>
<label>
<input type="radio" value="20-30" v-model="age" name="age" />
<input checked type="radio" value="20-30" v-model="age" name="age" />
20-30
</label>
<label>
@@ -128,7 +133,7 @@
<input
type="checkbox"
name="checkbox-question"
value="red"
value="1"
v-model="helpful"
/>
Easy to learn and use
@@ -137,7 +142,7 @@
<input
type="checkbox"
name="checkbox-question"
value="green"
value="2"
v-model="helpful"
/>
Easy to get trend information
@@ -146,7 +151,7 @@
<input
type="checkbox"
name="checkbox-question"
value="blue"
value="3"
v-model="helpful"
/>
Lots of creative design proposals
@@ -155,7 +160,7 @@
<input
type="checkbox"
name="checkbox-question"
value="blue"
value="4"
v-model="helpful"
/>
The AIGC functions for moodboard is helpful
@@ -164,7 +169,7 @@
<input
type="checkbox"
name="checkbox-question"
value="blue"
value="5"
v-model="helpful"
/>
The AIGC functions for design sketches is helpful
@@ -173,7 +178,7 @@
<input
type="checkbox"
name="checkbox-question"
value="blue"
value="6"
v-model="helpful"
/>
Easy to select the right color
@@ -182,7 +187,7 @@
<input
type="checkbox"
name="checkbox-question"
value="blue"
value="7"
v-model="helpful"
/>
The Chatbot function is helpful
@@ -191,7 +196,7 @@
<input
type="checkbox"
name="checkbox-question"
value="blue"
value="8"
v-model="helpful"
/>
The print position function is helpful
@@ -200,7 +205,7 @@
<input
type="checkbox"
name="checkbox-question"
value="blue"
value="9"
v-model="helpful"
/>
The drawing function is helpful
@@ -209,7 +214,7 @@
<input
type="checkbox"
name="checkbox-question"
value="blue"
value="10"
v-model="helpful"
/>
The export function is useful
@@ -218,7 +223,7 @@
<input
type="checkbox"
name="checkbox-question"
value="blue"
value="11"
v-model="helpful"
/>
Easy to edit the design
@@ -227,8 +232,8 @@
<input
type="checkbox"
name="checkbox-question"
value="blue"
class="marTop1"
:value="othersHelpful"
v-model="helpful"
/>
<span> Others:</span>
@@ -236,20 +241,21 @@
name="comments"
id="text-area"
placeholder="Please enter..."
v-model="helpful"
v-model="othersHelpful"
></textarea>
</label>
</div>
<div class="section">
<p>
What do you think AiDA should improve? (you could choose
2. What do you think AiDA should improve? (you could choose
more than one answer):<span class="fontColor">*</span>
</p>
<label>
<input
type="checkbox"
name="checkbox-question"
value="blue"
value="1"
v-model="improve"
/>
Proposed designs are boring, need more interesting
designs
@@ -258,7 +264,8 @@
<input
type="checkbox"
name="checkbox-question"
value="blue"
value="2"
v-model="improve"
/>
Difficult to make changes on design
</label>
@@ -266,7 +273,8 @@
<input
type="checkbox"
name="checkbox-question"
value="blue"
value="3"
v-model="improve"
/>
Only 2D output, no 3D results
</label>
@@ -274,7 +282,8 @@
<input
type="checkbox"
name="checkbox-question"
value="blue"
value="4"
v-model="improve"
/>
Difficult to apply keywords for AIGC generation
</label>
@@ -282,7 +291,8 @@
<input
type="checkbox"
name="checkbox-question"
value="blue"
value="5"
v-model="improve"
/>
Clothing is not in the right proportion
</label>
@@ -290,7 +300,8 @@
<input
type="checkbox"
name="checkbox-question"
value="blue"
value="6"
v-model="improve"
/>
Not compatible with pattern making solutions
</label>
@@ -298,7 +309,8 @@
<input
type="checkbox"
name="checkbox-question"
value="blue"
value="7"
v-model="improve"
/>
Improved user interface for better navigation
</label>
@@ -306,7 +318,8 @@
<input
type="checkbox"
name="checkbox-question"
value="blue"
value="8"
v-model="improve"
/>
Lack of responsive customer support
</label>
@@ -314,7 +327,8 @@
<input
type="checkbox"
name="checkbox-question"
value="blue"
value="9"
v-model="improve"
/>
Insufficient tutorial or guidance for new users
</label>
@@ -322,7 +336,8 @@
<input
type="checkbox"
name="checkbox-question"
value="blue"
value="10"
v-model="improve"
/>
Limited personalization options for designs
</label>
@@ -330,8 +345,9 @@
<input
type="checkbox"
name="checkbox-question"
value="blue"
:value="othersImprovel"
class="marTop1"
v-model="improve"
/>
<span> Others:</span>
<!-- <input
@@ -341,6 +357,7 @@
<textarea
name="comments"
id="text-area"
:value="othersImprovel"
placeholder="Please enter..."
></textarea>
</label>
@@ -351,81 +368,91 @@
<input
type="radio"
value="yes"
v-model="isSubscribe"
name="radio-question"
checked
/>
Yes
</label>
<label>
<input type="radio" value="no" name="radio-question" />
<input v-model="isSubscribe" type="radio" value="no" name="radio-question" />
No
</label>
</div>
<div class="section">
<p>If NO, please share why:</p>
<div class="section" v-show="isSubscribe == 'no'">
<p>If NO, please share why:<span class="fontColor">*</span></p>
<label>
<input
type="radio"
value="yes"
name="radio-question"
checked
type="checkbox"
value="Not useful"
name="reasonForNotSubscribe"
v-model="reasonForNotSubscribe"
/>
Not useful
</label>
<label>
<input type="radio" value="no" name="radio-question" />
<input type="checkbox" value="Too expensive" v-model="reasonForNotSubscribe" name="reasonForNotSubscribe" />
Too expensive
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
value="blue"
name="reasonForNotSubscribe"
:value="othersIsSubscribeCause"
v-model="reasonForNotSubscribe"
class="marTop1"
/>
<span> Others:</span>
<textarea
name="comments"
id="text-area"
v-model="othersIsSubscribeCause"
placeholder="Please enter..."
></textarea>
</label>
</div>
<div class="section">
<p>
3. Are you currently using any design tools? Please
Are you currently using any design tools? Please
list:
</p>
<textarea
name="comments"
id="text-area"
v-model="designTools"
placeholder="Please enter..."
></textarea>
</div>
<div class="section">
<button id="submit" @click="setSubmit">Submit</button>
</div>
</form>
</div>
</main>
</div>
</template>
<script lang="ts">
import { defineComponent, toRefs, reactive } from "vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal,message } from 'ant-design-vue';
import { Https } from "@/tool/https";
import { defineComponent, toRefs,ref, reactive, createVNode } from "vue";
export default defineComponent({
setup() {
const feedbackData = reactive({
const feedbackData:any = reactive({
userName:'',
gender:'',
gender:'Female',
occupation:'',
country:'',
email:'',
age:'',
helpful:'',
improve:'',
age:'20-30',
helpful:[],
improve:[],
isSubscribe:'',
reasonForNotSubscribe:[],
designTools:'',
});
let othersHelpful = ref('')
let othersImprovel = ref('')
let othersIsSubscribeCause = ref()
let CountryList = [
"Albania",
"Algeria",
@@ -594,10 +621,63 @@ export default defineComponent({
"Zambia"
]
let setSubmit = () => {
console.log(feedbackData);
let state = false
let skipList = ['designTools','reasonForNotSubscribe']
for (const key in feedbackData) {
if(skipList.indexOf(key) > -1){
continue
}
let keyList = ['helpful','improve']
if(keyList.indexOf(key) > -1){
if(feedbackData[key].length == 0){
state = true
break
}
}else if(feedbackData.isSubscribe == 'no' && feedbackData.reasonForNotSubscribe.length){
state = true
break
}else{
if(feedbackData[key] == ''){
state = true
break
}
}
}
if(state){
message.info('Please check that all the * numbers have been filled in')
return
}
let _this = this
Modal.confirm({
title: `Please confirm your email address to ensure it is correct. ${feedbackData.email}`,
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
feedbackData.language = 'EN'
submit(JSON.stringify(feedbackData))
}
});
};
let submit = (value:any)=>{
Https.axiosPost(Https.httpUrls.questionnaire, value).then(
(rv) => {
console.log(rv);
}
).catch(res=>{
});
}
return {
...toRefs(feedbackData),
othersHelpful,
othersImprovel,
othersIsSubscribeCause,
CountryList,
setSubmit,
};
@@ -638,7 +718,7 @@ export default defineComponent({
font-style: italic;
}
form {
#survey-form {
position: relative;
background: rgba(255, 255, 255, 0.2);
width: 60%;
@@ -698,7 +778,9 @@ export default defineComponent({
#dropdown:focus {
border: 2px solid rgb(173, 173, 173);
}
input,select{
height: 40px;
}
input,
button,
select,

View File

@@ -0,0 +1,847 @@
<template>
<div class="feedbackSurvey">
<main id="main">
<h1 id="title">AiDA 3.0 调查问卷</h1>
<p id="description">请填写调查问卷表</p>
<div id="survey-form">
<h2 class="section-title">参与者信息</h2>
<div class="section w40">
<label for="name"
>姓名:<span class="fontColor">*</span></label
>
<input
type="text"
v-model="userName"
placeholder="请输入您的名字"
/>
</div>
<div class="section w40">
<label for="gender"
>性别:<span class="fontColor">*</span></label
>
<select name="dropdown" id="dropdown" v-model="gender">
<option selected value='Female'>男性</option>
<option value='Male'>女性</option>
</select>
<!-- <input
type="text"
v-model="gender"
placeholder="Enter your gender"
required
/> -->
</div>
<div class="section w40">
<label for="occupation"
>职业:<span class="fontColor">*</span></label
>
<input
type="text"
v-model="occupation"
placeholder="请输入您的职业"
required
/>
</div>
<!-- <div class="section w40">
<label for="country"
>Country of Origin:<span class="fontColor" >*</span
></label
>
<input
type="text"
id="country"
name="country"
placeholder="Enter your country of origin"
required
/>
</div> -->
<div class="section w40">
<label for="dropdown">国籍:<span class="fontColor" >*</span></label>
<select name="dropdown" id="dropdown" v-model="country" required>
<option disabled selected value> 请选择 </option>
<option v-for="item in CountryList" :key="item" :value="item">{{ item }}</option>
</select>
</div>
<div class="section">
<label for="email"
>邮箱:<span class="fontColor">*</span></label
>
<input
type="email"
v-model="email"
placeholder="请输入您的邮箱"
required
/>
</div>
<div class="section">
<p>年龄:<span class="fontColor">*</span></p>
<label>
<input
type="radio"
value="below20"
name="age"
v-model="age"
/>
20岁以下
</label>
<label>
<input checked type="radio" value="20-30" v-model="age" name="age" />
20-30
</label>
<label>
<input type="radio" value="30-40" v-model="age" name="age" />
30-40
</label>
<label>
<input type="radio" value="40+" v-model="age" name="age" />
40+
</label>
</div>
<h2 class="section-title">调查问题</h2>
<!-- <div class="section">
<p>Do you like this survey?</p>
<label>
<input
type="radio"
value="yes"
name="radio-question"
checked
/>
Yes
</label>
<label>
<input type="radio" value="no" name="radio-question" />
No
</label>
<label>
<input
type="radio"
value="maybe"
name="radio-question"
/>
Maybe
</label>
</div> -->
<div class="section">
<p>
1. AiDA对您有哪些帮助您可以选择多个答案<span class="fontColor">*</span>
</p>
<label>
<input
type="checkbox"
name="checkbox-question"
value="1"
v-model="helpful"
/>
易于学习和使用
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
value="2"
v-model="helpful"
/>
容易获取趋势信息
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
value="3"
v-model="helpful"
/>
提供大量创意设计方案
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
value="4"
v-model="helpful"
/>
AIGC功能对灵感板有帮助
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
value="5"
v-model="helpful"
/>
AIGC功能对设计草图有帮助
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
value="6"
v-model="helpful"
/>
容易选择合适的颜色
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
value="7"
v-model="helpful"
/>
聊天机器人功能有帮助
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
value="8"
v-model="helpful"
/>
打印位置功能有帮助
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
value="9"
v-model="helpful"
/>
绘图功能有帮助
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
value="10"
v-model="helpful"
/>
导出功能有用
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
value="11"
v-model="helpful"
/>
设计编辑简单
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
class="marTop1"
:value="othersHelpful"
v-model="helpful"
/>
<span> 其他:</span>
<textarea
name="comments"
id="text-area"
placeholder="请输入..."
v-model="othersHelpful"
></textarea>
</label>
</div>
<div class="section">
<p>
2. 您认为AiDA应该改进什么您可以选择多个答案<span class="fontColor">*</span>
</p>
<label>
<input
type="checkbox"
name="checkbox-question"
value="1"
v-model="improve"
/>
提供的设计很无聊需要更多有趣的设计
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
value="2"
v-model="improve"
/>
设计修改困难
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
value="3"
v-model="improve"
/>
只有2D输出没有3D结果
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
value="4"
v-model="improve"
/>
难以选择合适的关键词应用于AIGC生成
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
value="5"
v-model="improve"
/>
服装比例不正确
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
value="6"
v-model="improve"
/>
与打版解决方案不兼容
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
value="7"
v-model="improve"
/>
改进用户界面以便更好导航
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
value="8"
v-model="improve"
/>
客户支持响应不及时
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
value="9"
v-model="improve"
/>
对新用户的教程或指导不足
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
value="10"
v-model="improve"
/>
设计个性化选项有限
</label>
<label>
<input
type="checkbox"
name="checkbox-question"
:value="othersImprovel"
class="marTop1"
v-model="improve"
/>
<span> 其他:</span>
<!-- <input
class="others-input"
type="text"
/> -->
<textarea
name="comments"
id="text-area"
:value="othersImprovel"
placeholder="请输入..."
></textarea>
</label>
</div>
<div class="section">
<p>3. 您会订阅AiDA 3.0<span class="fontColor">*</span></p>
<label>
<input
type="radio"
value="yes"
v-model="isSubscribe"
name="radio-question"
/>
</label>
<label>
<input v-model="isSubscribe" type="radio" value="no" name="radio-question" />
不会
</label>
</div>
<div class="section" v-show="isSubscribe == 'no'">
<p>如果不会请说明原因<span class="fontColor">*</span></p>
<label>
<input
type="checkbox"
value="Not useful"
name="reasonForNotSubscribe"
v-model="reasonForNotSubscribe"
/>
没有用
</label>
<label>
<input type="checkbox" value="Too expensive" v-model="reasonForNotSubscribe" name="reasonForNotSubscribe" />
太贵了
</label>
<label>
<input
type="checkbox"
name="reasonForNotSubscribe"
:value="othersIsSubscribeCause"
v-model="reasonForNotSubscribe"
class="marTop1"
/>
<span> 其他:</span>
<textarea
name="comments"
id="text-area"
v-model="othersIsSubscribeCause"
placeholder="请输入..."
></textarea>
</label>
</div>
<div class="section">
<p>
4. 您目前使用哪些设计工具请列出
</p>
<textarea
name="comments"
id="text-area"
v-model="designTools"
placeholder="请输入..."
></textarea>
</div>
<div class="section">
<button id="submit" @click="setSubmit">提交 </button>
</div>
</div>
</main>
</div>
</template>
<script lang="ts">
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal,message } from 'ant-design-vue';
import { Https } from "@/tool/https";
import { defineComponent, toRefs,ref, reactive, createVNode } from "vue";
export default defineComponent({
setup() {
const feedbackData:any = reactive({
userName:'',
gender:'Female',
occupation:'',
country:'',
email:'',
age:'20-30',
helpful:[],
improve:[],
isSubscribe:'',
reasonForNotSubscribe:[],
designTools:'',
});
let othersHelpful = ref('')
let othersImprovel = ref('')
let othersIsSubscribeCause = ref()
let CountryList = [
"Albania",
"Algeria",
"Andorra",
"Angola",
"Antigua and Barbuda",
"Argentina",
"Armenia",
"Australia",
"Austria",
"Azerbaijan",
"Bahamas",
"Bangladesh",
"Barbados",
"Belgium",
"Belize",
"Benin",
"Bhutan",
"Bolivia",
"Bosnia and Herzegovina",
"Botswana",
"Brazil",
"Brunei",
"Bulgaria",
"Burkina Faso",
"Cabo Verde",
"Canada",
"China",
"Chile",
"Colombia",
"Comoros",
"Congo",
"Costa Rica",
"Côte d'Ivoire",
"Croatia",
"Cyprus",
"Czech Republic",
"Denmark",
"Djibouti",
"Dominica",
"Dominican Republic",
"Ecuador",
"El Salvador",
"Estonia",
"Fiji",
"Finland",
"France",
"Gabon",
"Gambia",
"Georgia",
"Germany",
"Ghana",
"Greece",
"Grenada",
"Guatemala",
"Guinea",
"Guinea-Bissau",
"Guyana",
"Haiti",
"Holy See",
"Honduras",
"Hong Kong, China",
"Hungary",
"Iceland",
"India",
"Indonesia",
"Iraq",
"Ireland",
"Israel",
"Italy",
"Jamaica",
"Japan",
"Jordan",
"Kazakhstan",
"Kenya",
"Kiribati",
"Kuwait",
"Kyrgyzstan",
"Latvia",
"Lebanon",
"Lesotho",
"Liberia",
"Liechtenstein",
"Lithuania",
"Luxembourg",
"Madagascar",
"Malawi",
"Malaysia",
"Maldives",
"Mali",
"Malta",
"Marshall Islands",
"Mauritania",
"Mauritius",
"Mexico",
"Micronesia",
"Moldova",
"Monaco",
"Mongolia",
"Montenegro",
"Morocco",
"Mozambique",
"Myanmar",
"Namibia",
"Nauru",
"Nepal",
"Netherlands",
"New Zealand",
"Nicaragua",
"Niger",
"Nigeria",
"North Macedonia",
"Norway",
"Oman",
"Pakistan",
"Palau",
"Palestine",
"Panama",
"Papua New Guinea",
"Paraguay",
"Peru",
"Philippines",
"Poland",
"Portugal",
"Qatar",
"Romania",
"Rwanda",
"Saint Kitts and Nevis",
"Saint Lucia",
"Saint Vincent and the Grenadines",
"Samoa",
"San Marino",
"Sao Tome and Principe",
"Senegal",
"Serbia",
"Seychelles",
"Sierra Leone",
"Singapore",
"Slovakia",
"Slovenia",
"Solomon Islands",
"South Africa",
"South Korea",
"Spain",
"Sri Lanka",
"Suriname",
"Sweden",
"Switzerland",
"Taiwan, China",
"Tanzania",
"Thailand",
"Timor-Leste",
"Togo",
"Tonga",
"Trinidad and Tobago",
"Tunisia",
"Turkey",
"Tuvalu",
"Uganda",
"Ukraine",
"United Arab Emirates",
"United Kingdom",
"United States of America",
"Uruguay",
"Vanuatu",
"Zambia"
]
let setSubmit = () => {
let state = false
let skipList = ['designTools','reasonForNotSubscribe']
for (const key in feedbackData) {
if(skipList.indexOf(key) > -1){
continue
}
let keyList = ['helpful','improve']
if(keyList.indexOf(key) > -1){
if(feedbackData[key].length == 0){
state = true
break
}
}else if(feedbackData.isSubscribe == 'no' && feedbackData.reasonForNotSubscribe.length){
state = true
break
}else{
if(feedbackData[key] == ''){
state = true
break
}
}
}
if(state){
message.info('Please check that all the * numbers have been filled in')
return
}
let _this = this
Modal.confirm({
title: `Please confirm your email address to ensure it is correct. ${feedbackData.email}`,
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
feedbackData.language = 'CN'
submit(JSON.stringify(feedbackData))
}
});
};
let submit = (value:any)=>{
Https.axiosPost(Https.httpUrls.questionnaire, value).then(
(rv) => {
}
).catch(res=>{
});
}
return {
...toRefs(feedbackData),
othersHelpful,
othersImprovel,
othersIsSubscribeCause,
CountryList,
setSubmit,
};
},
data() {
return {
// moodTemplateId: "", //模板id
};
},
mounted() {},
methods: {},
});
</script>
<style lang="less" scoped>
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap");
.feedbackSurvey {
font-family: "Quicksand", sans-serif;
text-align: center;
line-height: 1.5;
// background: linear-gradient(180deg, #f3f3e6 0%, #eee4f3 100%);
margin: 1rem;
height: 100%;
overflow-y: auto;
#main{
background: linear-gradient(45deg, #eee4f3, #f3f4e6);
}
#title {
font-size: 6rem;
margin: 0;
font-weight: 900;
}
#description {
font-size: 2.8rem;
font-style: italic;
}
#survey-form {
position: relative;
background: rgba(255, 255, 255, 0.2);
width: 60%;
left: 50%;
transform: translateX(-50%);
text-align: left;
border-radius: 15px;
padding: 3rem;
box-shadow: -1px 1px 5px 0.5px;
font-size: 2.4rem;
transition: width 1s ease;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
@media (max-width: 760px) {
form {
width: 75%;
}
}
h2 {
width: 100%;
font-weight: 900;
}
.section {
display: flex;
flex-direction: column;
margin: 1rem;
width: 100%;
}
.w40 {
width: 40%;
}
.fontColor{
color: rgb(255, 2, 2);
}
p{
font-size: 2.8rem;
}
p,
label {
font-weight: bold;
margin: 0;
margin-left: 5px;
}
input,
#dropdown {
border: none;
border-radius: 5px;
padding: 10px;
outline: 0;
}
input:focus,
#dropdown:focus {
border: 2px solid rgb(173, 173, 173);
}
input,select{
height: 40px;
}
input,
button,
select,
textarea {
cursor: pointer;
font-family: inherit;
font-size: inherit;
}
input[type="radio"],
input[type="checkbox"] {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: middle;
margin: 0;
}
label{
vertical-align: baseline;
cursor: pointer;
.others-input{
background: rgba(255, 255, 255, 0);
border-top: none;
border-right: none;
border-left: none;
border-radius: 0;
border-bottom: 2px solid;
}
.others-input:focus{
border: none;
border-bottom: 2px solid;
}
span{
vertical-align: top;
}
textarea{
width: 80%;
vertical-align: top;
margin-left: 1rem;
}
}
textarea {
min-height: 75%;
max-height: 250px;
width: 100%;
resize: vertical;
border: none;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
}
#submit {
background: green;
background: #39215b;
border: none;
border-radius: 10px;
color: white;
font-size: 3rem;
transition: all 0.3s ease-in;
}
#submit:hover {
background: darkgreen;
background: #543087;
}
}
</style>