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

更新用户指引

Browse Source
This commit is contained in:
X1627315083
2023-12-12 11:53:02 +08:00
parent ee56d95086
commit 64deaa0805
5 changed files with 192 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/component/Detail/DesignDetail.vue
View File

@@ -29,8 +29,9 @@
<div v-show="imgDesignImg" class="detail_modal_body">
<div class="detail_modal_body_nav">
<div v-for="item,index in designItemDetail?.clothes" :class="{active:item.clothesOpen}" @click="clothesOpen(index)">
<div v-for="item,index in designItemDetail?.clothes" v-show="item.id" :class="{active:item.clothesOpen}" @click="clothesOpen(index)">
<img :src="item?.path" alt="">
<i v-show="deleteShow" class="fi fi-br-cross" @click.stop="setDelete(index)"></i>
</div>
<div class="detail_modal_body_Set" @click="setClothesOpen()">
+
@@ -41,7 +42,7 @@
<img :src="item.imageUrl" alt="">
</div>
<img class="detail_modal_model" :src="frontBack.body?.layersObject[0]?.imageUrl" alt="">
<div class="detail_modal_item_front Guide_1_19" :class="{active:body}" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)">
<div class="detail_modal_item_front Guide_1_19" :class="{active:body}" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesOpen(index)">
<img :src="item.imageUrl" alt="">
</div>
</div>
@@ -58,6 +59,9 @@
<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
<!-- 编辑 -->
<i v-show="!body" class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i>
<i v-show="!body && !deleteShow" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i>
<!-- 层 -->
<i class="fi fi-rr-copy" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg" @touchstart="mousedownDesignImg" @touchend="mouseupDesignImg"></i>
<i v-show="revocationShow>1" class="icon iconfont icon-chehui" @click="revocation"></i>
@@ -75,8 +79,8 @@
<div>{{ $t('DesignDetail.CurrentApparel') }}</div>
<i class="fi fi-rr-edit" @click.stop="openCurrent(1)"></i>
</div>
<div class="centent_div" v-if="current?.[currentIndex]?.path" @click="openCurrent(1)">
<img :src="current?.[currentIndex]?.path" alt="" class="" @click="openCurrent(1)">
<div class="centent_div" v-if="current?.path" @click="openCurrent(1)">
<img :src="current?.path" alt="" class="" @click="openCurrent(1)">
</div>
<i v-else class="fi fi-rr-picture centent" @click="openCurrent(1)"></i>
@@ -88,8 +92,8 @@
<i class="fi fi-rr-edit" @click.stop="openCurrent(2)"></i>
</div>
<div class="Guide_1_20" :class="[driver__.driver?'showEvents':'']">
<div class="centent_div" v-if="current?.[currentIndex]?.printObject?.prints[0]?.path" @click="openCurrent(2)">
<img :src="current?.[currentIndex]?.printObject?.prints[0]?.path" alt="">
<div class="centent_div" v-if="current?.printObject?.prints[0]?.path" @click="openCurrent(2)">
<img :src="current?.printObject?.prints[0]?.path" alt="">
</div>
<i v-else class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
</div>
@@ -103,10 +107,10 @@
</div>
<div class="img_block_item centent" @click.stop="openCurrent(3)">
<div class="color_item">
<div class="color_content" :style="{background:`rgba(${current?.[currentIndex]?.color?.r},${current?.[currentIndex]?.color?.g},${current?.[currentIndex]?.color?.b},${current?.[currentIndex]?.color?.a?current?.[currentIndex]?.color.a:1})`}"></div>
<div class="color_content" :style="{background:`rgba(${current?.color?.r},${current?.color?.g},${current?.color?.b},${current?.color?.a?current?.color.a:1})`}"></div>
<div class="color_content_body">
<div class="color_des">{{current?.[currentIndex]?.color?.tcx}}</div>
<div class="color_des">{{current?.[currentIndex]?.color?.name}}</div>
<div class="color_des">{{current?.color?.tcx}}</div>
<div class="color_des">{{current?.color?.name}}</div>
</div>
</div>
</div>
@@ -168,6 +172,8 @@ export default defineComponent({
// return store.state.DesignDetailModule.designItemDetail
// })
let designItemDetail :any = computed(()=>{
console.log(123);
return store.state.DesignDetailModule.designItemDetail
})
let parentData:any = ref({
@@ -203,6 +209,8 @@ export default defineComponent({
let {t} = useI18n()
//创建单件衣服
let setClothes:any = ref()
//点击删除按钮
let deleteShow:any = ref(false)
return{
designItemDetail,
store,
@@ -224,6 +232,7 @@ export default defineComponent({
moible,
t,
setClothes,
deleteShow,
}
},
data(){
@@ -239,6 +248,7 @@ export default defineComponent({
watch:{
designItemDetail:{
handler: async function(newVal,oldVal) {
console.log(1123);
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
this.ifSubmit = designItemDetail.ifSubmit?designItemDetail.ifSubmit:false
this.current = JSON?.parse(JSON?.stringify(designItemDetail?.clothes?.[this?.currentIndex]))
@@ -372,7 +382,7 @@ export default defineComponent({
if(this.driver__.driver){
nextTick().then(()=>{
// driverObj__.moveNext();
driverObj__.moveTo(42);
driverObj__.moveTo(41);
})
}
}
@@ -536,8 +546,8 @@ export default defineComponent({
color: `${item.color.r} ${item.color.g} ${item.color.b}`,
id:item.id,
path:item.minIOPath,
offset:item.layersObject[1].offset == null?[0,0]:item.layersObject[1].offset,
scale:item.layersObject[1].scale?item.layersObject[1].scale:1,
offset:item.layersObject?.[1]?.offset == null?[0,0]:item.layersObject[1].offset,
scale:item.layersObject?.[1]?.scale?item.layersObject[1].scale:1,
printObject:{
ifSingle:item.printObject.ifSingle == null ? false : item.printObject.ifSingle,
// path:item.printObject.path?item.printObject.path :'',
@@ -606,13 +616,15 @@ export default defineComponent({
},
//按比设置单件衣服宽高位置
async setPostition(url:any){
let img:any = await loadImage(url)
let modal_body:any
await nextTick().then(()=>{
let num:any
let img:any = await loadImage(url).then((img:any)=>{
modal_body = document.getElementsByClassName('detail_modal_model')[0]
num = modal_body?.offsetWidth / img.width;
})
// nextTick().then(()=>{
// })
console.log(modal_body);
const num = modal_body?.offsetWidth / img.width;
function loadImage(url:any) {
return new Promise((resolve, reject) => {
const img = new Image();
@@ -672,6 +684,37 @@ export default defineComponent({
// this.designShowPrview = 2
// }
},
deleteNav(num:number){
if(num == 0){
this.deleteShow = true
this.designItemDetail.clothes.forEach((item:any)=>{
item.clothesOpen = false
})
this.designOrder = false
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.changePlace()
}else{
this.deleteShow = false
let data = this.setSubmitItem('preview')
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
let designItemDetail = JSON.parse(JSON.stringify(this.designItemDetail))
this.loadingShow = false
console.log(rv);
this.store.commit("setDesignItemDetail", designItemDetail);
this.store.commit("setDesignPreviewData", data);
this.setRevocation(designItemDetail,data)
}
).catch(res=>{
this.loadingShow = false
});
}
},
setDelete(num:number){
this.designItemDetail.clothes.splice(num,1)
},
//图片按下样子
mousedownDesignImg(){
this.imgDesignImg = false
@@ -689,32 +732,19 @@ export default defineComponent({
item.clothesOpen = false
})
this.designItemDetail.clothes[index].clothesOpen = true
console.log(this.designItemDetail);
},
setClothesOpen(){
this.designItemDetail.clothes.forEach((item:any)=>{
item.clothesOpen = false
})
// console.log(designItemDetail);
let color = this.designItemDetail.clothes[0].color
let aa = {
"id": '',
"type": "",
"level1Type": null,
"path": "",
"minIOPath": "",
"color": {
"id": 1921,
"name": "",
"tcx": "#FFFFFF",
"r": 255,
"g": 255,
"b": 255,
"h": '',
"s": '',
"v": ''
},
"color": color,
"printObject": {
"ifSingle": null,
"prints": [
@@ -724,27 +754,34 @@ export default defineComponent({
"layersObject": [
]
}
this.current = aa
this.designOrder = true
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.changePlace()
// this.designItemDetail.clothes.push(aa)
// this.designOrder = true
// let DesignDetailAlter:any = this.$refs.DesignDetailAlter
// DesignDetailAlter.changePlace()
if(this.designItemDetail.clothes[this.designItemDetail.clothes.length-1].id){
this.designItemDetail.clothes.push(aa)
this.clothesDetail(aa,this.designItemDetail.clothes.length-1)
// this.current = aa
// this.designOrder = true
// let DesignDetailAlter:any = this.$refs.DesignDetailAlter
// DesignDetailAlter.changePlace()
}else{
}
},
//元素替换
clothesDetail(clothes:any, index:number){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
this.currentIndex = index
this.currentIndex = index?index:0
this.designOrder = true
this.current = designItemDetail.clothes[this.currentIndex]
console.log(this.current);
let data:any = this.setSubmitItem('preview')
data.designSingleItemDTOList[this.currentIndex] = {
color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`,
id:this.current.id,
id:this.current.id?this.current.id:'',
path:this.current.minIOPath?this.current.minIOPath:'',
offset:this.current.layersObject[1].offset?this.current.layersObject[1].offset:[0,0],
scale:this.current.layersObject[1].scale?this.current.layersObject[1].scale:1,
offset:this.current.layersObject?.[1]?.offset?this.current.layersObject[1].offset:[0,0],
scale:this.current.layersObject?.[1]?.scale?this.current.layersObject[1].scale:1,
printObject:{
ifSingle:this.current?.printObject?.ifSingle == null ? false : this.current?.printObject?.ifSingle,
// prints:this.current?.printObject[0]?.path == null ? [] : [{
@@ -758,6 +795,9 @@ export default defineComponent({
},
type:this.current.type,
}
// if(clothes && !clothes.id){
// data.designSingleItemDTOList.push(clothes)
// }
this.store.commit('setDesignPreviewData',data)
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.changePlace()
@@ -1001,6 +1041,16 @@ export default defineComponent({
top: 3rem;
transform: translateX(-120%);
}
&.fi-rr-trash{
left: 0;
top: 6rem;
transform: translateX(-120%);
}
&.fi-br-check{
left: 0;
top: 6rem;
transform: translateX(-120%);
}
&.fi-rr-copy{
top: 0;
right: 0;
@@ -1025,6 +1075,20 @@ export default defineComponent({
.detail_modal_body{
.detail_modal_body_nav{
transform: translate(-50%,0%);
>div{
position: relative;
.fi{
color: #fff;
width: 100%;
height: 100%;
background: #00000033;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
div{
@@ -1119,7 +1183,8 @@ export default defineComponent({
margin-right: 0;
}
}
&.clothes_detail_item_print{
&.clothes_detail_item_print,
&.clothes_detail_item_apparel{
.fi-rr-picture{
display: flex;
align-items: center;