This commit is contained in:
2023-10-27 11:13:01 +08:00
parent bd9dabd21d
commit db9d41a7c0
24 changed files with 609 additions and 840 deletions

BIN
public/image/femaleBG.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
public/image/maleBG.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

@@ -7,7 +7,7 @@
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-size: 1.8rem;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

View File

@@ -1,11 +1,11 @@
@font-face {
font-family: "iconfont"; /* Project id */
src: url('iconfont.ttf?t=1697613542954') format('truetype');
src: url('iconfont.ttf?t=1698114002056') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 1.6rem;
font-size: 1.8rem;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -15,3 +15,11 @@
content: "\e66c";
}
.icon-fanchehui:before {
content: "\e626";
}
.icon-chehui:before {
content: "\e609";
}

Binary file not shown.

View File

@@ -185,18 +185,18 @@ li {
.operate_file_block .select_img_type .category_list .category_item:hover {
background: linear-gradient(-137deg, #eeefdb, #e7dbed);
}
.ant-modal-root .ant-modal-wrap .ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-btns .ant-btn:hover {
color: #39215b;
border-color: #39215b;
.ant-modal-confirm-btns .ant-btn:hover {
color: #39215b !important;
border-color: #39215b !important;
}
.ant-modal-root .ant-modal-wrap .ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-btns .ant-btn-primary {
background: #39215b;
border-color: #39215b;
.ant-modal-confirm-btns .ant-btn-primary {
background: #39215b !important;
border-color: #39215b !important;
}
.ant-modal-root .ant-modal-wrap .ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-body-wrapper .ant-modal-confirm-btns .ant-btn-primary:hover {
color: #fff;
border-color: #543087;
background: #543087;
.ant-modal-confirm-btns .ant-btn-primary:hover {
color: #fff !important;
border-color: #543087 !important;
background: #543087 !important;
}
.ant-spin-dot-item {
background-color: #543087;

View File

@@ -222,27 +222,28 @@ ul,li{
.ant-modal-content{
.ant-modal-body{
.ant-modal-confirm-body-wrapper{
.ant-modal-confirm-btns{
.ant-btn:hover{
color: #39215b;
border-color: #39215b;
}
.ant-btn-primary{
background: #39215b;
border-color: #39215b;
}
.ant-btn-primary:hover{
color: #fff;
border-color: #543087;
background: #543087;
}
}
}
}
}
}
}
}
.ant-modal-confirm-btns{
.ant-btn:hover{
color: #39215b !important;
border-color: #39215b !important;
}
.ant-btn-primary{
background: #39215b !important;
border-color: #39215b !important;
}
.ant-btn-primary:hover{
color: #fff !important;
border-color: #543087 !important;
background: #543087 !important;
}
}
//loding样式
.ant-spin-dot-item{
background-color: #543087;

View File

@@ -52,6 +52,8 @@
<i v-show="!body" class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i>
<!-- -->
<i class="fi fi-rr-copy" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg"></i>
<i v-show="revocationShow>1" class="icon iconfont icon-chehui" @click="revocation"></i>
<i v-show="oppositeRevocationShow>=1" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
</div>
<div v-show="ifSubmit" class="subitOkPreviewBtn" @click="submit">
Submit
@@ -115,7 +117,7 @@
</div>
</a-modal>
<ElementReplace ref="ElementReplace"></ElementReplace>
<!-- <ElementReplace ref="ElementReplace"></ElementReplace> -->
<AccessoryReplace ref="AccessoryReplace"></AccessoryReplace>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
@@ -174,6 +176,9 @@ export default defineComponent({
let userInfo:any = {}
let ifSubmit = ref(false)
let designItemDetailUrl = ref({})
let setRevocationShow = ref(false)//判断是不是第一次进来和切换下一张
let oppositeRevocationShow:any = ref()
let revocationShow:any = ref()
return{
designItemDetail,
store,
@@ -187,7 +192,10 @@ export default defineComponent({
designOutfitId,
userInfo,
ifSubmit,
designItemDetailUrl
designItemDetailUrl,
setRevocationShow,
oppositeRevocationShow,
revocationShow
}
},
data(){
@@ -213,8 +221,6 @@ export default defineComponent({
}
await this.setImgSize()
this.designItemDetailUrl = designItemDetail.currentFullBodyView?designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
console.log(this.designItemDetailUrl);
}
},
currentIndex:{
@@ -222,7 +228,29 @@ export default defineComponent({
}
},
},
provide() {
return {
setRevocation:this.setRevocation
}
},
mounted(){
let beforeunload = () => {
this.removeRevocation()
window.removeEventListener('beforeunload',beforeunload)
}
window.addEventListener('beforeunload',beforeunload)
let onresizeTime:any
let this_ = this
window.onresize = () => {
return (() => {
clearTimeout(onresizeTime)
onresizeTime = setTimeout(async ()=>{
await this_.setImgSize()
},500)
})()
}
let userInfo:any = getCookie("userInfo")
this.userInfo = JSON.parse(userInfo);
// let url = Https.httpUrls.getDesignDetail + `?designItemId=34242&designPythonOutfitId=34004`
@@ -258,7 +286,6 @@ export default defineComponent({
},
methods:{
openCurrent(num: Number) {
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.init(num)
if(num ==2 ){
@@ -271,8 +298,9 @@ export default defineComponent({
this.designOrder = false
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.terminate()
this.designItemDetail = {}
// this.designItemDetail = {}
this.frontBack = {}
this.removeRevocation()
}else{
this.designShowPrview = 1;
this.designItemDetailUrl = {}
@@ -300,6 +328,7 @@ export default defineComponent({
})
this.store.commit('setDesignItemDetail',rv)
this.setRevocation(rv,'')
if(rv.others[0].layersObject.length != 0){
this.body = false
}else{
@@ -336,7 +365,7 @@ export default defineComponent({
}
})
}else{
designItemDetail.others.forEach((item:any) => {
designItemDetail?.others?.forEach((item:any) => {
if(item.type == 'Body'){
body = item
}
@@ -369,7 +398,7 @@ export default defineComponent({
}
}
})
let bodyImgWH = document.getElementsByClassName("design_compile_content")[0].getElementsByClassName("perview_img")[0]
let bodyImgWH = document.getElementsByClassName("design_compile_content")?.[0]?.getElementsByClassName("perview_img")?.[0]
body.style = {
width:body.layersObject[0].imageSize?.[0]*ratio+'px',
@@ -402,7 +431,57 @@ export default defineComponent({
this.designShowPrview = 1
// this.showDesignDetailModal(data,str)
},
removeRevocation(){
sessionStorage.removeItem('oppositeRevocation')
sessionStorage.removeItem('revocation')
this.setRevocationShow = false
},
setRevocation(designItemDetail:any,data:any){//设置撤销
let itemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
// let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
if(revocation?.[0]?.designItemDetail.designItemId != itemDetail.designItemId || sessionStorage.getItem("revocation") == null){
// sessionStorage.setItem('revocation', JSON.stringify([]));
// sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
revocation = []
}
let detail = {
designItemDetail:designItemDetail,
data:data?data:''
}
revocation.push(detail)
this.revocationShow = revocation?.length
this.oppositeRevocationShow = 0
sessionStorage.setItem('revocation', JSON.stringify(revocation));
sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
},
revocation(){//撤回
let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
oppositeRevocation.push(revocation[revocation.length-1])
this.oppositeRevocationShow = oppositeRevocation.length
revocation.splice(revocation.length-1,1)
this.revocationShow = revocation.length
if(this.revocationShow > 1){
this.store.commit('setDesignPreviewData',revocation[revocation.length-1].data)
}
this.store.commit("setDesignItemDetail", revocation[revocation.length-1].designItemDetail);
sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
sessionStorage.setItem('revocation', JSON.stringify(revocation));
},
oppositeRevocation(){//反撤回
let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
this.store.commit('setDesignPreviewData',oppositeRevocation[oppositeRevocation.length-1].data)
this.store.commit("setDesignItemDetail", oppositeRevocation[oppositeRevocation.length-1].designItemDetail);
revocation.push(oppositeRevocation[oppositeRevocation.length-1])
this.revocationShow = revocation.length
oppositeRevocation.splice(oppositeRevocation.length-1,1)
this.oppositeRevocationShow = oppositeRevocation.length
sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
sessionStorage.setItem('revocation', JSON.stringify(revocation));
},
setSubmitItem(str:any){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let clothes:any = []
@@ -478,7 +557,7 @@ export default defineComponent({
//按比设置单件衣服宽高位置
async setPostition(url:any){
let img:any = await loadImage(url)
let modal_body = <HTMLImageElement>document.getElementsByClassName('detail_modal_body')[0]
let modal_body = <HTMLImageElement>document.getElementsByClassName('detail_modal_model')[0]
const num = modal_body?.offsetWidth / img.width;
function loadImage(url:any) {
return new Promise((resolve, reject) => {
@@ -499,6 +578,7 @@ export default defineComponent({
let newDesign = {}
let newIndex = 0
this.designOrder = false
this.removeRevocation()
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.terminate()
if(type === 'last'){
@@ -692,6 +772,7 @@ export default defineComponent({
// padding: 1.5rem 1rem 2.5rem;
box-sizing: border-box;
.detail_modal_body_img{
overflow: hidden;
// width: 43.3rem;
width: 23%;
height: 100%;
@@ -700,7 +781,6 @@ export default defineComponent({
justify-content: center;
align-items: center;
position: relative;
flex-direction: column;
// height: 50%;
.detail_modal_body{
@@ -714,7 +794,8 @@ export default defineComponent({
top: 0;
left: 50%;
z-index: 999;
transform: translateX(-50%);
transform: translate(-50%,-120%);
transition: all .3s;
>div{
width: 4rem;
height: 4rem;
@@ -747,6 +828,8 @@ export default defineComponent({
.detail_modal_model{
position: relative;
z-index: 1;
max-height: 100%;
width: auto;
}
.detail_modal_item_front,.detail_modal_item_back{
cursor: pointer;
@@ -791,17 +874,46 @@ export default defineComponent({
position: absolute;
cursor: pointer;
zoom: 1.2;
transition: all .3s;
&.fi-bs-expand-arrows-alt{
top: 0;
left: 0;
transform: translateX(-120%);
}
&.fi-rr-edit{
left: 0;
top: 3rem;
transform: translateX(-120%);
}
&.fi-rr-copy{
top: 0;
right: 0;
transform: translateX(120%);
}
&.icon-fanchehui{
top: 6rem;
right: 0;
transform: translateX(120%);
}
&.icon-chehui{
top: 3rem;
right: 0;
transform: translateX(120%);
}
}
i:hover{
}
}
&.detail_modal_body_img:hover{
.detail_modal_body{
.detail_modal_body_nav{
transform: translate(-50%,0%);
}
}
div{
i{
transform: translateX(0);
}
}
}

View File

@@ -58,7 +58,10 @@
</div>
<div class="result_apparel_print_img">
<img v-show="type_==1" class="result_appare_img" :src="sketchImg?.id_?sketchImg?.path:current?.path" :title="current?.type">
<img v-show="type_==2" class="result_print_img" :src="current?.path" :title="current?.type" @click="setPrint">
<!-- <img v-show="type_==2" class="result_print_img" :src="current?.path" :title="current?.type" @click="setPrint"> -->
<div v-show="type_==2" class="result_print_img" @click="setPrint" :title="current?.type">
<img v-for="item in current.layersObject" :src="item.imageUrl" alt="">
</div>
</div>
</div>
@@ -109,6 +112,7 @@ export default defineComponent({
const store = useStore();
let type_ = ref(0);
let current = inject('current')//父组件传过来的数据
let setRevocation = inject('setRevocation')//父组件传过来的数据
let sketchImg = ref({})
//印花
let overallSingle = ref(false)
@@ -122,6 +126,7 @@ export default defineComponent({
return{
store,
current,
setRevocation,
sketchImg,
type_,
overallSingle,
@@ -143,6 +148,7 @@ export default defineComponent({
//点击判断
init(num){
// this.current = JSON.parse(JSON.stringify(this.currentItem))
console.log(this.current);
this.type_ = num
this.colorList[this.selectIndex] = this.$parent.selectColor
this.overallSingle = this.current?.printObject?.ifSingle == null?false:this.current?.printObject?.ifSingle
@@ -271,6 +277,7 @@ export default defineComponent({
this.loadingShow = false
this.store.commit("setDesignItemDetail", designItemDetail);
this.store.commit("setDesignPreviewData", data);
this.setRevocation(designItemDetail,data)
}
).catch(res=>{
this.loadingShow = false
@@ -324,6 +331,9 @@ export default defineComponent({
transform: scale(.85);
transform-origin: center top;
cursor: pointer;
img:nth-child(1){
position: absolute;
}
}
}
}

View File

@@ -113,6 +113,7 @@ export default defineComponent({
let designOpenrtion = ref(false);
let designOpenrtionList = ref([])
let current = inject('current')//父组件传过来的数据
let setRevocation = inject('setRevocation')//父组件传过来的数据
let overallSingle = ref(false)
let systemDesignerPercentage = ref(0)
let printAmount = ref(1)//印花数量
@@ -165,6 +166,7 @@ export default defineComponent({
print,
sketch,
loadingShow,
setRevocation
};
},
data() {
@@ -255,6 +257,13 @@ export default defineComponent({
this.designOpenrtionList.forEach((item,index)=>{
this.setTemplate(item,index)
this.printAmount = this.printStyleList.length
if (!this.overallSingle) {
this.printAmount = 1
this.setprintAmount()
}
if(this.current.printObject.ifSingle != this.overallSingle){
this.refetchTemplate(0)
}
})
}else{
@@ -439,6 +448,7 @@ export default defineComponent({
let num = this.printAmount - this.printStyleList.length
for (let index = 0; index < num; index++) {
this.printStyleList.push(this.printStyleList[this.printStyleList.length-1])
this.printStyleList[this.printStyleList.length-1].transform.rotateZ = 0
this.refetchTemplate(this.printStyleList.length-1)
this.designOpenrtionList.push(this.current.printObject.prints[this.current.printObject.prints.length-1])
}
@@ -601,7 +611,6 @@ export default defineComponent({
prints:this.computeZindex(),
}
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
this.store.commit("setDesignPreviewData", data);
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
@@ -623,6 +632,8 @@ export default defineComponent({
item.layersObject[1].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[1].id
})
this.store.commit("setDesignItemDetail", designItemDetail);
this.store.commit("setDesignPreviewData", data);
this.setRevocation(designItemDetail,data)
this.loadingShow = false
this.designOpenrtion = false
// this.closeModal()

View File

@@ -632,6 +632,7 @@ export default defineComponent({
border-radius: 1rem;
padding: 2rem;
// zoom: .75;
font-size: 1.6rem;
transform-origin: top right;
position: absolute;
right: -.3rem;
@@ -776,6 +777,9 @@ export default defineComponent({
justify-content: space-between;
.model_current{
margin-right: 3rem;
.model_text{
text-align: center;
}
}
}
.habit_model_list{
@@ -831,6 +835,7 @@ export default defineComponent({
flex-direction: column;
.model_text{
display: flex;
justify-content: center;
:deep(.ant-switch) {
margin: 0 1rem;
}
@@ -922,6 +927,7 @@ export default defineComponent({
display: flex;
align-items: center;
justify-content: space-between;
font-size: 1.4rem;
}
</style>
<style>

View File

@@ -53,6 +53,7 @@ export default defineComponent({
return store.state.DesignDetailModule.designItemDetail
})
let current = inject('current')//父组件传过来的数据
let setRevocation = inject('setRevocation')//父组件传过来的数据
let printZIndex = ref(4)//印花优先级
let printStyleList = ref([
{
@@ -88,7 +89,8 @@ export default defineComponent({
direction,//判断点击的是li那个边
imgDom,
imgDomIndex,
frontBack
frontBack,
setRevocation
};
},
data() {
@@ -381,26 +383,13 @@ export default defineComponent({
rv.clothes.forEach((item)=>{
designItemDetail.clothes.forEach((i)=>{
if(item.type === i.type){
// item.position = [
// item.position[0] += left,
// item.position[1] += top
// ]
// item.layersObject[1].position = [
// item.layersObject[1].position[0]+=item.layersObject[1].offset[1],
// item.layersObject[1].position[1]+=item.layersObject[1].offset[0]
// ],
// item.layersObject[0].position = [
// item.layersObject[0].position[0]+=item.layersObject[0].offset[1],
// item.layersObject[0].position[1]+=item.layersObject[0].offset[0]
// ]
i.layersObject = item.layersObject
}
})
})
this.$emit('setDesignCoverage');
this.store.commit("setDesignItemDetail", designItemDetail);
this.setRevocation(designItemDetail,data)
}
).catch(res=>{
this.loadingShow = false

View File

@@ -2,7 +2,7 @@
<a-modal class="modal_component cut_pricture_modal"
v-model:visible="cutPicuterModal"
:footer="null"
width="80%"
width="65%"
:maskClosable="false"
:centered="true"
:closable="false"
@@ -134,6 +134,7 @@ export default defineComponent({
finishCropper(){
let cropper:any = this.$refs.cropper,
that = this
cropper.getCropData((data:any) => {
// 转换为File对象
let file = base64toFile(data,this.cropperFileData.name);

View File

@@ -32,10 +32,10 @@
</label>
</div>
<div v-if="type_.type2 == 'Printboard'" class="printModel">
<div @click="printModel.optype = !printModel.optype">{{ printModel.num }}</div>
<div @click.stop="PrintModel">{{ printModel.name }}</div>
<ul v-show="printModel.optype">
<li class="printModel_item" @click="setPrintModel(1)">1</li>
<li class="printModel_item" @click="setPrintModel(2)">2</li>
<li class="printModel_item" @click="setprintModel(1)">Model1</li>
<li class="printModel_item" @click="setprintModel(2)">Model2</li>
</ul>
</div>
</div>
@@ -43,7 +43,7 @@
<input
class="search_input"
@input="ifMaximumLength"
placeholder="Promopt input"
placeholder="Prompt input"
:maxlength='inputShow?0:9999'
v-model="searchPictureName"
@keydown.enter="getgenerate()"
@@ -222,6 +222,7 @@ export default defineComponent({
let printModel = ref({
num:1,
optype:false,
name:'model1'
})
// let sketchCatecoryList:any = ref([])
let workspace:any = ref({})
@@ -343,10 +344,21 @@ export default defineComponent({
}
})
},
setPrintModel(num:any){
PrintModel(){
if(!this.printModel.optype){
document.addEventListener('click',this.removePrintModel)
}
this.printModel.optype = !this.printModel.optype
},
removePrintModel(){
this.printModel.optype = false
document.removeEventListener('click',this.removePrintModel)
},
setprintModel(num:any){
this.printModel = {
num : num,
optype:false,
name:'model'+num
}
},
getgenerate(){
@@ -378,7 +390,7 @@ export default defineComponent({
level2Type:'',
text:this.searchPictureName,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
version:this.printModel.num,//为1就是Print
version:0,//为1就是Print
gender:'',
}
this.loadingShow = true
@@ -402,7 +414,7 @@ export default defineComponent({
this.loadingShow = false
});
},
ifMaximumLength(e){
ifMaximumLength(){
clearTimeout(this.inputTime)
let inputBox = document.getElementsByClassName('generate')[0].getElementsByClassName('input_box')[0]
let input = inputBox.getElementsByClassName('search_input')[0]
@@ -584,7 +596,7 @@ export default defineComponent({
}
.printModel{
>div{
width: 5rem;
width: 7rem;
display: flex;
justify-content: center;
border-radius: 1rem;
@@ -594,13 +606,14 @@ export default defineComponent({
}
ul{
position: absolute;
width: 5rem;
width: 7rem;
text-align: center;
margin-top: .3rem;
border-radius: 1rem;
overflow: hidden;
li{
background: rgba(0,0,0,.2);
line-height: 2;
cursor: pointer;
&.printModel_item:hover{
background: rgba(0,0,0,.4);

View File

@@ -347,7 +347,7 @@ export default defineComponent({
.header_component {
display: flex;
justify-content: space-between;
padding: 0 30px;
// padding: 0 30px;
padding-left: 0;
width: 100%;
height: 7rem;
@@ -359,7 +359,9 @@ export default defineComponent({
z-index: 1049;
background-color: #fff;
.header_right{
width: 33%;
display: flex;
justify-content: flex-end;
align-items: center;
}
.header_logo {
@@ -386,6 +388,9 @@ export default defineComponent({
color: #000;
cursor: pointer;
font-weight: 900;
&.nav_item:nth-child(3){
margin: 0;
}
&.nav_item::before {
position: absolute;
content: "";

View File

@@ -118,7 +118,7 @@
</div>
</div>
</div>
<div class="modal_accomplish">
<div v-show="moodboarList.length > 1" class="modal_accomplish">
<div class="modal_text">
<div>Layout of selected moodboard</div>
<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">Edit</div>
@@ -390,7 +390,7 @@ export default defineComponent({
// layout.init('moodboard')
layout.init()
}else{
message.warning('Please click Layout to sort randomlys')
message.warning('Please click Layout to sort randomly')
}
},
@@ -636,6 +636,10 @@ export default defineComponent({
width: 48.5%;
height: 100%;
}
.wh8{
width: 100%;
height: 48.5%;
}
.w1h2{
width: 23%;
height: 100%;

View File

@@ -570,7 +570,7 @@ export default defineComponent({
level2Type:generage.level2Type,
text:this.captionGeneration,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
version:generage.printModel.num,//为1就是Print
version:0,//为1就是Print
gender:this.workspace.sex,
}
if(generateType == 'image'||generateType == 'text-image'){

View File

@@ -677,6 +677,8 @@ export default defineComponent({
display: flex;
margin-top: 2rem;
justify-content: center;
max-height: 13%;
overflow: hidden;
.active{
img{
border: 2px solid;
@@ -684,11 +686,18 @@ export default defineComponent({
box-sizing: border-box;
}
}
img{
width:5rem;
cursor: pointer;
margin: 0 2rem;
>div{
max-height: 13%;
overflow: hidden;
img{
object-fit: cover;
width:5rem;
cursor: pointer;
margin: 0 2rem;
max-height: 100%;
}
}
}
.layout_centent{
display: flex;
@@ -854,6 +863,10 @@ export default defineComponent({
height: 100%;
}
.wh8{
width: 100%;
height: 48.5%;
}
.w1h2{
width: 23%;
height: 100%;

View File

@@ -91,12 +91,42 @@
<div class="perview_mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
<div class="img_content_block" ref="imgbox" @mousemove="startMove($event)">
<img class="placement_img" :src="perviewUrl || printObject?.url">
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)" @mousemove="startMove($event)">
<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
</div>
<div class="img_content_block" ref="imgbox">
<div :style="{width: imgBox.width+'px', height:imgBox.height +'px',top:imgBox.y+'px',left:imgBox.x+'px',position:'absolute'}">
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)" @mousemove="startMove($event)">
<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
</div>
</div>
<vue-cropper
ref="cropper"
:img="option.img"
:outputSize="option.outputSize"
:outputType="option.outputType"
:info="option.info"
:canScale="option.canScale"
:autoCrop="option.autoCrop"
:fixed="option.fixed"
:fixedNumber="option.fixedNumber"
:full="option.full"
:fixedBox="option.fixedBox"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:original="option.original"
:centerBox="option.centerBox"
:height="option.height"
:infoTrue="option.infoTrue"
:limitMinSize="option.limitMinSize"
:enlarge="option.enlarge"
@real-time="realTime"
:autoCropArea="1"
:autoCropHeight="option.autoCropHeight"
:autoCropWidth="option.autoCropWidth"
:mode="option.mode">
</vue-cropper>
<!-- <img class="placement_img" :src="perviewUrl || printObject?.url"> -->
</div>
</div>
@@ -109,12 +139,17 @@
<script lang="ts">
import { defineComponent,ref,createVNode} from 'vue'
import { Https } from "@/tool/https";
import {dataURLtoFile} from "@/tool/util"
import {dataURLtoFile,base64toFile} from "@/tool/util"
import { getCookie } from "@/tool/cookie";
import 'vue-cropper/dist/index.css'
import { VueCropper } from "vue-cropper";
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
export default defineComponent({
components:{
VueCropper,
},
setup() {
const store = useStore()
let oldLocationList:any = ref([])
@@ -129,6 +164,7 @@ export default defineComponent({
let manager:any = ref(false)
let userInfo:any = ref()
let cropperTime:any = ref()
return {
store,
oldLocationList,
@@ -141,7 +177,9 @@ export default defineComponent({
pointList,
isSubmit,
manager,
userInfo
userInfo,
cropperTime
}
},
data(){
@@ -158,7 +196,31 @@ export default defineComponent({
sex:'Male',
sexList: [
]
],
option:{
img: '', //裁剪图片的地址
outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)
outputType: 'png', //裁剪生成图片的格式jpeg || png || webp
info: false, //图片大小信息
canScale: true, //图片是否允许滚轮缩放
autoCrop: true, //是否默认生成截图框
autoCropWidth: '0', //默认生成截图框宽度
autoCropHeight: '0', //默认生成截图框高度
fixed: true, //是否开启截图框宽高固定比例
fixedBox: false, //固定截图框大小,不允许改变
fixedNumber: [1, 2.125], //截图框的宽高比例
full: false, //false按原比例裁切图片不失真
canMove: true, //上传图片是否可以移动
canMoveBox: true, //截图框能否拖动
original: false, //上传图片按照原始比例渲染
centerBox: false, //截图框是否被限制在图片里面
height: true, //是否按照设备的dpr 输出等比例图片
infoTrue: true, //true为展示真实输出图片宽高false展示看到的截图框宽高
maxImgSize:'2000', //限制图片最大宽度和高度
enlarge: 7, //图片根据截图框输出比例倍数
mode: 'auto 90%', //图片默认渲染方式
limitMinSize:'100%'
},
}
},
mounted(){
@@ -166,29 +228,87 @@ export default defineComponent({
this.userInfo = JSON.parse(userInfo);
this.getSex()
},
watch: {
sex:{
handler(newVal:any,oldVal:any){
let imgbox:any = this.$refs.imgbox
let imgBoxSizeBG = imgbox?.getElementsByClassName('cropper-view-box-BG')?.[0]
if(imgBoxSizeBG){
if(newVal == 'Male'){
imgBoxSizeBG.style.background = `url(./image/maleBG.png) no-repeat 0 0 / 100% 100%`
}else{
imgBoxSizeBG.style.background = `url(./image/femaleBG.png) no-repeat 0 0 / 100% 100%`
}
}
},
},
},
methods:{
formatter(value:number){
return `${value}%`;
},
showPlacementModal(data:any){
this.placementShow = true
this.printObject = {
...data
}
this.option.img = this.printObject.url
setTimeout(()=>{
let imgbox:any = this.$refs.imgbox
let position = imgbox.getBoundingClientRect()
this.imgBox = {
width:imgbox.clientWidth,
height:imgbox.scrollHeight,
left : position.left,
top:position.top,
scrollTop:imgbox.scrollTop || 0,
}
this.getDefaultPointList(this.imgBox)
},500)
let imgbox:any = this.$refs.imgbox
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
let imgBoxSizeBG = imgbox.getElementsByClassName('cropper-view-box')[0]
let div:any = document.createElement('div');
if(imgbox.getElementsByClassName('cropper-view-box-BG').length >= 1){
}else{
div.classList.add('cropper-view-box-BG')
div.style.background = `url(./image/femaleBG.png) no-repeat 0 0 / 100% 100%`
div.style.width = '100%'
div.style.height = '100%'
div.style.position = `absolute`
div.style.top = `0`
imgBoxSizeBG.appendChild(div)
}
// imgBoxSize.style.backgroundImage = 'url('+require('@assets/images/library/lemaleBG.png')')'
let cropper:any = this.$refs.cropper
cropper.cropH = cropper.scale*cropper.trueHeight
cropper.cropW = cropper.cropH/2.125
cropper.cropOffsertX = cropper.getImgAxis().x1
cropper.cropOffsertY = cropper.getImgAxis().y1
imgBoxSize.addEventListener('mousemove',this.startMove)
this.setImageSize()
this.getDefaultPointList(this.imgBox)
},300)
},
realTime(data:any) {
clearTimeout(this.cropperTime)
this.cropperTime = setTimeout(()=>{
this.setImageSize()
},1000)
},
setImageSize(){
let imgbox:any = this.$refs.imgbox
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
let position = imgBoxSize.getBoundingClientRect()
let position1 = imgbox.getBoundingClientRect()
let cropper:any = this.$refs.cropper
console.log(position1,position);
this.imgBox = {
width:cropper.cropW,
height:cropper.cropH,
left : position1.left,
top:position1.top,
scrollTop:imgBoxSize.scrollTop || 0,
x:cropper.getCropAxis().x1,
y:cropper.getCropAxis().y1,
}
},
getSex(){
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
if (rv) {
@@ -205,10 +325,14 @@ export default defineComponent({
}
})
},
//截屏框移动
setMove(){
},
//初始化可以使用的点位
getDefaultPointList(imgBox:any){
this.isSubmit = false
this.locationList=[]
this.pointList = [
{
title:'SHOULDER',
@@ -225,6 +349,10 @@ export default defineComponent({
]
if(this.printObject.templateId){//编辑
this.isSubmit = true
this.option.canScale = false
this.option.fixedBox = true
this.option.canMove = false
this.option.canMoveBox = false
for(let ponit of this.pointList){
for(let pointItem of ponit.pointList){
if(this.printObject[pointItem.type]?.length){
@@ -241,8 +369,12 @@ export default defineComponent({
}
}
this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
}
}else{
this.option.canScale = true
this.option.fixedBox = false
this.option.canMove = true
this.option.canMoveBox = true
}
this.oldPointList = JSON.parse(JSON.stringify(this.pointList))
},
@@ -266,7 +398,8 @@ export default defineComponent({
return
}
let imgbox:any = this.$refs.imgbox
let scrollTop = imgbox.scrollTop;
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
let scrollTop = imgBoxSize.scrollTop;
if(this.intObj){
this.currentSign.left = event.clientX - this.imgBox.left
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top
@@ -277,12 +410,14 @@ export default defineComponent({
this.intObj.show = false
this.intObj = null
}else{
//鼠标移动
if(this.startDian){
this.currentSign.left = event.clientX - this.imgBox.left - this.moveOriginal.posX
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top -this.moveOriginal.posY
this.currentSign.left = event.clientX - this.imgBox.left - this.imgBox.x - this.moveOriginal.posX -12
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top - this.imgBox.y -this.moveOriginal.posY -12
document.addEventListener('mouseup', this.getMouseOver);
this.$forceUpdate()
this.setBoundarySign()
}
}
},
@@ -292,24 +427,29 @@ export default defineComponent({
// 在边界上的签名域处理
setBoundarySign() {
let imgbox:any = this.$refs.imgbox
let height = imgbox.offsetHeight + imgbox.scrollTop;
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
let top = (this.$refs.cropper as any).getCropAxis().y1
let left = (this.$refs.cropper as any).getCropAxis().x1
let height = imgBoxSize.offsetHeight;
// let height = imgBoxSize.offsetHeight + imgBoxSize.scrollTop;
// 2 为签名域的边框
let maxPosHeight = height - 24
let maxPosWidth = imgbox.clientWidth - 24 //+ this.signBox.paddLeft;
if (this.currentSign.top <= 0) {
let maxPosWidth = imgBoxSize.clientWidth - 24 //+ this.signBox.paddLeft;
if (this.currentSign.top+top <= 0) {
this.currentSign.top = 0
} else if (this.currentSign.top >= maxPosHeight ) {
this.currentSign.top = maxPosHeight;
} else if (this.currentSign.top >= maxPosHeight+top ) {
this.currentSign.top = maxPosHeight+top;
}
if (this.currentSign.left <= 0) {
if (this.currentSign.left+left <= 0) {
this.currentSign.left = 0
} else if (this.currentSign.left >= maxPosWidth) {
this.currentSign.left = maxPosWidth;
} else if (this.currentSign.left >= maxPosWidth+left) {
this.currentSign.left = maxPosWidth+left;
}
},
getMouseDown(event:any,item:any,index:number){
if(this.isRemoveStatus){
//删除
for(let itemPoint of this.pointList){
for(let point of itemPoint.pointList){
if(item.type == point.type){
@@ -322,14 +462,19 @@ export default defineComponent({
}else{
this.currentSign = item
// 计算出鼠标在签名域上的偏移
this.moveOriginal.posX = event.offsetX
this.moveOriginal.posY = event.offsetY // 1为边框
// this.moveOriginal.posX = event.offsetX
// this.moveOriginal.posY = event.offsetY // 1为边框
this.moveOriginal.posX = 0
this.moveOriginal.posY = 0 // 1为边框
console.log(this.moveOriginal);
this.startDian = true
}
},
getMouseOver(){
getMouseOver(){//鼠标抬起
this.startDian = false
this.currentSign = {}
document.removeEventListener('mouseup', this.getMouseOver);
@@ -374,19 +519,37 @@ export default defineComponent({
},
submitPlacement(){
if(this.printObject.templateId){
this.printObject.id = this.printObject.libraryId
this.confrimSubmit()
}else{
this.customRequest().then((rv:any)=>{
this.isShowMark = false
this.printObject.id = rv.id
this.confrimSubmit()
}).catch((res:any)=>{
this.isShowMark = false
})
}
// let cropper:any = this.$refs.cropper,
// that = this
// cropper.getCropData((data:any) => {
// // 转换为File对象
// let file = base64toFile(data,this.cropperFileData.name);
// this.$emit('handleCropperSuccess',{file:file, fileData:this.cropperFileData})
// })
let cropper:any = this.$refs.cropper,
that = this
cropper.getCropData(async (value:any) => {
// 转换为File对象
if(this.printObject.templateId){
this.printObject.id = this.printObject.libraryId
this.confrimSubmit()
}else{
let file:any = base64toFile(value,this.printObject.file.name);
// console.log(file,this.printObject,'-=-=--==-');
file.uid = this.printObject.file.uid
this.printObject.file = file
this.customRequest().then((rv:any)=>{
this.isShowMark = false
this.printObject.id = rv.id
this.confrimSubmit()
}).catch((res:any)=>{
this.isShowMark = false
})
}
})
},
confrimSubmit(){
@@ -401,6 +564,7 @@ export default defineComponent({
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
param.modelType = this.modelType
}
this.isShowMark = true
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
(rv: any) => {
@@ -469,7 +633,6 @@ export default defineComponent({
}
});
})
},
getPrintLocation(){
let {width , height} = this.imgBox
@@ -773,7 +936,7 @@ export default defineComponent({
user-select:none;
-moz-user-select:none;
position: relative;
height: 57.6rem;
.img_content_block{
width: 40.8rem;
height: 100%;
@@ -819,7 +982,7 @@ export default defineComponent({
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
cursor: pointer;
z-index: 22;
&.remove_point_click{
border-color: transparent;
background: #EF3C3C;

View File

@@ -33,7 +33,7 @@
</div>
</div>
<div class="models_placement_content" @touchmove="startMove($event)">
<div class="plcaement_point_content">
<div class="plcaement_point_content" v-if="userInfo.userId == 88 || userInfo.userId == 83">
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" >
<div class="ponit_title">{{point.title}}</div>
<div class="point_list">
@@ -74,6 +74,7 @@
import { defineComponent,ref,createVNode} from 'vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { getCookie } from "@/tool/cookie";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
export default defineComponent({
@@ -88,6 +89,8 @@ export default defineComponent({
let oldPointList:any = ref([]) //备份点
let pointList:any = ref([])
let isSubmit:any = ref(false) //判断历史是否有提交过
let manager:any = ref(false)
let userInfo:any = ref()
return {
store,
oldLocationList,
@@ -98,7 +101,9 @@ export default defineComponent({
currentSign,
oldPointList,
pointList,
isSubmit
isSubmit,
manager,
userInfo
}
},
data(){
@@ -111,8 +116,18 @@ export default defineComponent({
placement_sacle:30,
perviewUrl:'',//预览的图片地址
isShowMark:false,
modelType:'Library',
sex:'Male',
sexList: [
]
}
},
mounted(){
let userInfo:any = getCookie("userInfo")
this.userInfo = JSON.parse(userInfo);
this.getSex()
},
methods:{
formatter(value:number){
return `${value}%`;
@@ -136,7 +151,22 @@ export default defineComponent({
this.getDefaultPointList(this.imgBox)
},400)
},
getSex(){
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
if (rv) {
let arr:any = []
rv.forEach((item:any) => {
let obj = {
value:item.name,
label:item.name,
}
arr.push(obj)
});
this.sex = arr[0].value
this.sexList = arr
}
})
},
//初始化可以使用的点位
getDefaultPointList(imgBox:any){
this.isSubmit = false
@@ -324,9 +354,14 @@ export default defineComponent({
let param = {
libraryId:this.printObject.id,
templateId:this.printObject.templateId || null,
modelType:'Library',
checkMd5:1,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
...this.getPrintLocation()
}
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
param.modelType = this.modelType
}
this.isShowMark = true
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
(rv: any) => {
@@ -343,25 +378,59 @@ export default defineComponent({
customRequest(){
let new_data = {
file:this.printObject.file,
checkMd5:1,
level1Type:'Models',
sex:'',
sex:this.sex,
modelType:'',
level2Type:'',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.isShowMark = true
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
new_data.modelType = this.modelType
new_data.sex = this.sex
}
return new Promise((resolve,reject)=>{
Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => {
resolve(rv)
// resolve(rv)
if(!rv.checkMd5){
resolve(this.affirmCstomRequest(new_data))
}else{
resolve(rv)
}
}
).catch((res)=>{
reject(res)
});
})
},
affirmCstomRequest(data:any){
let _this = this
return new Promise((resolve,reject)=>{
Modal.confirm({
title: 'This picture has been uploaded whether to continue uploading ',
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
onOk() {
data.checkMd5 = 0
Https.axiosPost(Https.httpUrls.libraryUpload, data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => {
_this.isShowMark = false
resolve(rv)
}
).catch((res)=>{
reject(res)
});
},
onCancel(){
_this.isShowMark = false
}
});
})
},
getPrintLocation(){
let {width , height} = this.imgBox

View File

@@ -1,699 +0,0 @@
<template>
<div v-show="placementShow">
<a-modal class="models_placement_component"
v-model:visible="placementShow"
:footer="null"
width="80%"
:maskClosable="false"
:centered="true"
:closable="false"
>
<div class="design_closeIcon" @click.stop="closeModal()">
<i class="fi fi-rr-cross-small"></i>
</div>
<div class="design_title_text">
<div>Registration</div>
<div class="design_title_text_intro">Please change the pure white inside the mannequin for another color to enhance your experience</div>
</div>
<div class="models_placement_body" >
<div class="models_placement_content">
<div class="plcaement_point_content">
<div class="palcement_modal_header">
<div class="placement_operate_list">
<div class="operate_item" v-show="locationList.length == 6" @click="submitPlacement">
<div class="icon iconfont icon-baocun1 operate_icon"></div>
<div class="operate_item_des">Submit</div>
</div>
<div class="operate_item" v-show="locationList.length == 6" @click="printPreview">
<div class="icon iconfont icon-shengchengyulan operate_icon"></div>
<div class="operate_item_des">Preview</div>
</div>
<div class="operate_item" v-show="perviewUrl" @click="backPreview">
<div class="icon iconfont icon-fanhui1 operate_icon"></div>
<div class="operate_item_des">Back</div>
</div>
<div class="operate_item" @click="restoreLocationList">
<div class="icon iconfont icon-huifu operate_icon"></div>
<div class="operate_item_des">Restore</div>
</div>
</div>
</div>
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" >
<div class="ponit_title">{{point.title}}</div>
<div class="point_list">
<div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @mousedown="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
</div>
</div>
</div>
<div class="placement_content_operate_list">
<div class="placement_content_operate_item" @click="changeRemoveStatus">
<div class="placement_remove_point_block"></div>
<div class="placement_content_operate_des">Remove Point</div>
</div>
</div>
<div class="img_preview_block" >
<div class="perview_mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
<div class="img_content_block" ref="imgbox" @mousemove="startMove($event)">
<img class="placement_img" :src="perviewUrl || printObject?.url">
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)" @mousemove="startMove($event)">
<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
</div>
</div>
</div>
</div>
</div>
</a-modal>
</div>
</template>
<script lang="ts">
import { defineComponent,ref,createVNode} from 'vue'
import { Https } from "@/tool/https";
import {dataURLtoFile} from "@/tool/util"
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
export default defineComponent({
setup() {
const store = useStore()
let oldLocationList:any = ref([])
let locationList:any = ref([])
let printObject:any = ref({})
let imgBox:any = ref({})
let intObj:any = ref(null)
let currentSign:any = ref({})
let oldPointList:any = ref([]) //备份点
let pointList:any = ref([])
let isSubmit:any = ref(false) //判断历史是否有提交过
return {
store,
oldLocationList,
locationList,
printObject,
imgBox,
intObj,
currentSign,
oldPointList,
pointList,
isSubmit
}
},
data(){
return{
placementShow:false,
collectionIndex:0,
startDian:false,
moveOriginal:{posX: 0, posY: 0},
isRemoveStatus:false,
placement_sacle:30,
perviewUrl:'',//预览的图片地址
isShowMark:false,
}
},
methods:{
formatter(value:number){
return `${value}%`;
},
showPlacementModal(data:any){
this.placementShow = true
this.printObject = {
...data
}
setTimeout(()=>{
let imgbox:any = this.$refs.imgbox
let position = imgbox.getBoundingClientRect()
this.imgBox = {
width:imgbox.clientWidth,
height:imgbox.scrollHeight,
left : position.left,
top:position.top,
scrollTop:imgbox.scrollTop || 0,
}
this.getDefaultPointList(this.imgBox)
},500)
},
//初始化可以使用的点位
getDefaultPointList(imgBox:any){
this.isSubmit = false
this.pointList = [
{
title:'SHOULDER',
pointList:[{type:'shoulderLeft',color:'#6E70FF',show:true,field:'shoulder'},{type:'shoulderRight',color:'#6E70FF',show:true,field:'shoulder'}]
},
{
title:'WAISTBAND',
pointList:[{type:'waistbandLeft',color:'#6FCEFF',show:true,field:'waistband'},{type:'waistbandRight',color:'#6FCEFF',show:true,field:'waistband'}]
},
{
title:'HAND',
pointList:[{type:'handLeft',color:'#CCFF7B',show:true,field:'hand'},{type:'handRight',color:'#CCFF7B',show:true,field:'hand'}]
},
]
if(this.printObject.templateId){//编辑
this.isSubmit = true
for(let ponit of this.pointList){
for(let pointItem of ponit.pointList){
if(this.printObject[pointItem.type]?.length){
pointItem.show = false
let data = {
left:this.printObject[pointItem.type][0] * imgBox.width - 12,
top:this.printObject[pointItem.type][1] * imgBox.height - 12,
color:pointItem.color,
type:pointItem.type,
field:pointItem.field,
}
this.locationList.push(data)
}
}
}
this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
}
this.oldPointList = JSON.parse(JSON.stringify(this.pointList))
},
AddDian(point:any){
if(!point.show){
return
}
this.startDian = true
this.isRemoveStatus = false
this.intObj = point
},
changeRemoveStatus(){
this.isRemoveStatus = true
},
startMove(event:any){
if(this.isRemoveStatus){
return
}
let imgbox:any = this.$refs.imgbox
let scrollTop = imgbox.scrollTop;
if(this.intObj){
this.currentSign.left = event.clientX - this.imgBox.left
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top
this.currentSign.color = this.intObj.color
this.currentSign.type= this.intObj.type
this.currentSign.field = this.intObj.field
this.locationList.push(this.currentSign)
this.intObj.show = false
this.intObj = null
}else{
if(this.startDian){
this.currentSign.left = event.clientX - this.imgBox.left - this.moveOriginal.posX
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top -this.moveOriginal.posY
document.addEventListener('mouseup', this.getMouseOver);
this.$forceUpdate()
this.setBoundarySign()
}
}
},
// 在边界上的签名域处理
setBoundarySign() {
let imgbox:any = this.$refs.imgbox
let height = imgbox.offsetHeight + imgbox.scrollTop;
// 2 为签名域的边框
let maxPosHeight = height - 24
let maxPosWidth = imgbox.clientWidth - 24 //+ this.signBox.paddLeft;
if (this.currentSign.top <= 0) {
this.currentSign.top = 0
} else if (this.currentSign.top >= maxPosHeight ) {
this.currentSign.top = maxPosHeight;
}
if (this.currentSign.left <= 0) {
this.currentSign.left = 0
} else if (this.currentSign.left >= maxPosWidth) {
this.currentSign.left = maxPosWidth;
}
},
getMouseDown(event:any,item:any,index:number){
if(this.isRemoveStatus){
for(let itemPoint of this.pointList){
for(let point of itemPoint.pointList){
if(item.type == point.type){
point.show = true
break
}
}
}
this.locationList.splice(index,1)
}else{
this.currentSign = item
// 计算出鼠标在签名域上的偏移
this.moveOriginal.posX = event.offsetX
this.moveOriginal.posY = event.offsetY // 1为边框
this.startDian = true
}
},
getMouseOver(){
this.startDian = false
this.currentSign = {}
document.removeEventListener('mouseup', this.getMouseOver);
},
closeModal(){
let _this = this
if(!this.isSubmit){
Modal.confirm({
title: "You haven't marked the image yet, and the model will not be uploaded. Are you sure you want to close it?",
icon: createVNode(ExclamationCircleOutlined),
okText: 'Ok',
mask:false,
cancelText: 'Cancel',
// centered:true,
onOk() {
// _this.getDefaultPointList(_this.imgBox)
_this.oldLocationList = []
_this.locationList = []
_this.intObj = null
_this.currentSign = {}
_this.isRemoveStatus = false
_this.placementShow = false
_this.perviewUrl = ''
}
});
}else{
// _this.getDefaultPointList(_this.imgBox)
_this.oldLocationList = []
_this.locationList = []
_this.intObj = null
_this.currentSign = {}
_this.isRemoveStatus = false
_this.placementShow = false
_this.perviewUrl = ''
}
},
restoreLocationList(){
this.pointList = JSON.parse(JSON.stringify(this.oldPointList))
this.locationList = JSON.parse(JSON.stringify(this.oldLocationList))
},
submitPlacement(){
if(this.printObject.templateId){
this.printObject.id = this.printObject.libraryId
this.confrimSubmit()
}else{
this.customRequest().then((rv:any)=>{
this.isShowMark = false
this.printObject.id = rv.id
this.confrimSubmit()
}).catch((res:any)=>{
this.isShowMark = false
})
}
},
confrimSubmit(){
let param = {
libraryId:this.printObject.id,
templateId:this.printObject.templateId || null,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
...this.getPrintLocation()
}
this.isShowMark = true
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
(rv: any) => {
this.isShowMark = false
this.isSubmit = true
this.$emit('submitModelPlacement')
this.closeModal()
}
).catch(res=>{
this.isShowMark = false
});
},
customRequest(){
let new_data = {
file:this.printObject.file,
level1Type:'Models',
level2Type:'',
sex:'',
modelType:'',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.isShowMark = true
return new Promise((resolve,reject)=>{
Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => {
resolve(rv)
}
).catch((res)=>{
reject(res)
});
})
},
getPrintLocation(){
let {width , height} = this.imgBox
let locationData:any = {}
let returnData:any = {}
let newLocationList = JSON.parse(JSON.stringify(this.locationList))
//进行字段归类
for(let item of newLocationList){
locationData[item.field] = locationData[item.field] || []
locationData[item.field].push(item)
}
for(let key in locationData){
locationData[key].sort(this.sortBy("left")) //通过left字段进行排序
locationData[key].forEach((v:any,index:any) => {
v.type = !index ?v.field + 'Left' :v.field +'Right' //第一个是left第二个是right
v.left = ((v.left + 12) / width).toFixed(4)
v.top = ((v.top + 12) / height).toFixed(4)
returnData[v.type] = [v.left, v.top]
});
}
return returnData
},
sortBy(field:any) {
return function(a:any,b:any) {
return a[field] - b[field];
}
},
printPreview(){
let file = this.printObject.templateId ? null :this.printObject.file,
models = {
libraryId:this.printObject.libraryId || null,
templateId:this.printObject.templateId || null,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
...this.getPrintLocation()
}
let formData = new FormData();
formData.append('file', file);
formData.append("models", new Blob([JSON.stringify(models)], {type: "application/json"}));
if(this.isShowMark){
return
}
this.isShowMark = true
Https.axiosPost(Https.httpUrls.libraryModelsDot, formData,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => {
this.perviewUrl = rv
this.isShowMark = false
}
).catch(res=>{
this.isShowMark = false
});
},
backPreview(){
this.perviewUrl = ''
}
}
})
</script>
<style lang="less">
.models_placement_component{
.ant-modal-close{
width: 3.6rem;
height: 3.6rem;
position: absolute;
top: -1.8rem;
right: -1.8rem;
}
.ant-modal-header{
display: none;
}
.ant-modal-body{
display: flex;
flex-direction: column;
}
.close_icon{
width: 3.6rem;
height: 3.6rem;
background: #000000;
border-radius: 50%;
line-height: 3.6rem;
text-align: center;
.icon-guanbi{
font-size: 2rem;
color: #ffffff;
}
}
.models_placement_body{
width: 100%;
flex: 1;
.palcement_modal_header{
position: relative;
height: 6.6rem;
width: 100%;
margin-bottom: 3rem;
.placement_operate_list{
display: flex;
align-items: center;
margin:0 auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100%;
.operate_item{
margin-right: 4rem;
text-align: center;
cursor: pointer;
.operate_icon{
font-size: 2.1rem;
color: #64686D;
}
.operate_item_des{
height: 1.2rem;
font-size: 1.3rem;
color: #64686D;
}
&:last-child{
margin-right: 0;
}
}
}
}
.models_placement_content{
position: relative;
// height: calc(100% - 6.6rem);
height: 100%;
width: 100%;
.plcaement_point_content{
border: 2px solid #000;
border-radius: 1rem;
width: 22rem;
background: #EBECF4;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
padding: 0 1.4rem;
.placement_point_item{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 3rem;
.ponit_title{
font-size: 1.3rem;
color: #64686D;
user-select:none; /* CSS3属性 */
}
.point_list{
display: flex;
align-items: center;
width: 6.2rem;
justify-content: space-between;
.point_item{
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
border:solid 0.2rem transparent;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
-moz-user-select:none; /* Firefox私有属性 */
-webkit-user-select:none; /* WebKit内核私有属性 */
-ms-user-select:none; /* IE私有属性(IE10及以后) */
-khtml-user-select:none; /* KHTML内核私有属性 */
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
.point_block{
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
}
}
}
}
}
.placement_content_operate_list{
width: 10.6rem;
background: #EBECF4;
position: absolute;
right: 0;
top:18.4rem;
.placement_content_operate_item{
padding: 1.5rem 0;
text-align: center;
cursor: pointer;
.placement_content_operate_des{
width: 100%;
font-size: 1.3rem;
color: #64686D;
-moz-user-select:none;
user-select:none
}
.print_scale_value{
height: 1.1rem;
font-size: 1.2rem;
text-align: center;
margin-bottom: 0.3rem;
color: #64686D;
}
.ant-tooltip-placement-top{
top: -37px !important;
}
.ant-slider-track{
background: #343579;
}
.ant-slider-handle{
border-color: #343579;
}
.placement_remove_point_block{
width: 2.4rem;
height: 2.4rem;
border: 2px solid #000000;
border-radius: 50%;
margin: 0 auto 0.4rem;
}
}
}
.placement_tip_content{
position: absolute;
right: 2rem;
bottom: 2rem;
width: 30rem;
font-size: 1.3rem;
color: #64686D;
}
.img_preview_block{
width: 40.8rem;
background: #ffffff;
margin: 0 auto;
position: relative;
user-select:none;
-moz-user-select:none;
position: relative;
.img_content_block{
width: 40.8rem;
height: 100%;
max-height: 63.2rem;
overflow-y: auto;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
position: relative;
&::-webkit-scrollbar { width: 0 !important }
}
.perview_mark_loading{
position: absolute;
left: 0;
height: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
z-index: 9;
display: flex;
align-items: center;
justify-content: center;
}
.placement_img{
width: 100%;
user-select:none;
-moz-user-select:none;
}
.ponit_click{
width: 24px;
height: 24px;
position: absolute;
border: 2px solid transparent;
border-radius: 50%;
-moz-user-select:none; /* Firefox私有属性 */
-webkit-user-select:none; /* WebKit内核私有属性 */
-ms-user-select:none; /* IE私有属性(IE10及以后) */
-khtml-user-select:none; /* KHTML内核私有属性 */
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
cursor: pointer;
&.remove_point_click{
border-color: transparent;
background: #EF3C3C;
}
.placement_add_point_content{
width: 4px;
height: 4px;
border-radius: 50%;
background: #6E70FF;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.icon-guanbi{
font-size: 20px;
line-height: 20px;
color:#ffffff;
}
}
}
}
}
}
</style>

View File

@@ -1,7 +1,7 @@
export default {
moodb_ : [
[['wh4']],
[['wh4','wh4']],
[['wh4','wh4'],['wh8','wh8']],
[['wh4','w1h2','w1h2'],['w1h2','w1h2','wh4'],['w2h1','w2h1','wh4'],['wh4','w2h1','w2h1']],
[['wh1','wh1','w1h2','wh4'],['w1h2','wh1','wh1','wh4'],['wh4','wh1','wh1','w1h2'],['w1h2','w1h2','w1h2','w1h2']],
[['wh1','wh1','wh1','wh1','wh4'],['wh1','wh1','wh4','wh1','wh1'],['wh4','wh1','wh1','wh1','wh1'],['w1h2','w1h2','w1h2','wh1','wh1'],['wh1','wh1','w1h2','w1h2','w1h2'],['w1h2','w1h2','wh1','wh1','w1h2'],['w1h2','wh1','wh1','w1h2','w1h2']],

View File

@@ -217,7 +217,7 @@ export default defineComponent({
},
retrieveHome(record:any){
this.$router.push({name:'home',params: {id:record.id}})
// this.$router.push({name:'home',params: {id:record.id}})
}
}
})

View File

@@ -173,10 +173,17 @@
</div>
<div class="input_box" :class="{active:inputShow}">
<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{active:checkbox[0].type}" :readonly="checkbox[0].type" placeholder="Promopt input" v-model="captionGeneration">
<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{active:checkbox[0].type}" :readonly="checkbox[0].type" placeholder="Prompt input" v-model="captionGeneration">
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
<span>The entered content exceeds the maximum length.</span>
</div>
<div v-show="selectCode == 'Printboard'" class="printModel">
<div @click.stop="PrintModel">{{ printModel.name }}</div>
<ul v-show="printModel.optype">
<li class="printModel_item" @click="setprintModel(1)">Model1</li>
<li class="printModel_item" @click="setprintModel(2)">Model2</li>
</ul>
</div>
<div class="upload_item">
<div
class="upload_file_item"
@@ -197,6 +204,7 @@
</div>
</div>
</div>
<div
class="upload_component upload_file_item"
v-show="selectGenerateList.length <= 3"
@@ -374,6 +382,11 @@ export default defineComponent({
let inputTime = ref()
let generateList:any = ref([])
let selectGenerateList:any = ref([])
let printModel = ref({
num:1,
optype:false,
name:'model1'
})
return {
menuList,
selectImgList,
@@ -403,6 +416,7 @@ export default defineComponent({
inputTime,
generateList,
selectGenerateList,
printModel
}
},
data(this_) {
@@ -833,6 +847,23 @@ export default defineComponent({
item.checked = true
}
},
PrintModel(){
if(!this.printModel.optype){
document.addEventListener('click',this.removePrintModel)
}
this.printModel.optype = !this.printModel.optype
},
removePrintModel(){
this.printModel.optype = false
document.removeEventListener('click',this.removePrintModel)
},
setprintModel(num:any){
this.printModel = {
num : num,
optype:false,
name:'model'+num
}
},
getgenerate(){
let generateType = this.checkbox.filter((v:any)=>v.type)[0].name
let generageImg = this.selectGenerateList.filter((v:any)=>v.checked)[0]
@@ -844,7 +875,7 @@ export default defineComponent({
level2Type:this.selectCode == 'Sketchboard'?this.designType:'',
text:this.captionGeneration,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
version:2,//为1就是Print
version:this.selectCode == 'Printboard'?this.printModel.num:0,//为1就是Print
gender:this.selectCode == 'Sketchboard'?this.sex:'',
}
if(generateType == 'image'||generateType == 'text-image'){
@@ -1198,9 +1229,40 @@ export default defineComponent({
}
}
.generage_btn{
margin-left: 3rem;
margin: 0 3rem;
}
}
.printModel{
font-size: 1.4rem;
font-weight: 500;
>div{
width: 7rem;
display: flex;
justify-content: center;
border-radius: 1rem;
margin: 0;
border: 2px solid;
cursor: pointer;
}
ul{
position: absolute;
width: 7rem;
text-align: center;
margin-top: .3rem;
border-radius: 1rem;
overflow: hidden;
z-index: 3;
li{
background: #c5c4c8;
line-height: 2;
cursor: pointer;
&.printModel_item:hover{
background: rgba(0,0,0,.4);
}
}
}
}
.upload_item{
margin-left: 4rem;
.upload_file_item{
@@ -1212,6 +1274,7 @@ export default defineComponent({
.upload_component{
margin: 0;
}
}
}