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

09-12

Browse Source
This commit is contained in:
WangXiaoDong
2023-09-12 10:11:27 +08:00
parent 3440f2f868
commit 173f35042d
71 changed files with 4291 additions and 1865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
src/component/Detail/DesignDetailEnd.vue
View File

@@ -14,7 +14,16 @@
<span>New Print</span>
</div>
<div class="print_left">
<img src="" alt="">
<!-- <img :src="current.path" :title="current.type"> -->
<img :src="current?.printObject?.url" v-if="current?.printObject?.url && current?.printObject?.url != 'none'">
<div src="@/assets/images/homePage/null_img.png" v-else ></div>
<div
v-show="current?.printObject?.url && current?.printObject?.url != 'none'"
class="delete_file_block"
@click="deleteFile"
>
<span class="icon iconfont icon-shanchu"></span>
</div>
</div>
</div>
<div>
@@ -26,14 +35,14 @@
<div class="habit_Overal_Single">
<div
class="habit_Overal_Single_text"
:class="{ active: !overalSingle }"
:class="{ active: !overallSingle }"
>
Overal
</div>
<a-switch v-model:checked="overalSingle" />
<a-switch @click="setOveralSingle" v-model:checked="overallSingle" />
<div
class="habit_Overal_Single_text"
:class="{ active: overalSingle }"
:class="{ active: overallSingle }"
>
Single
</div>
@@ -46,17 +55,15 @@
>
</a-slider>
</div>
</div>
</div>
</div>
<div class="result_apparel_print_img">
<img v-show="type_==1" class="result_appare_img" src="" alt="">
<img v-show="type_==2" class="result_print_img" src="" alt="">
<img v-show="type_==1" class="result_appare_img" :src="current.path" :title="current.type">
<img v-show="type_==2" class="result_print_img" :src="current.path" :title="current.type" @click="setPrint">
</div>
</div>
<div v-show="type_ == 2"></div>
<div v-show="type_ == 3">
<div class="result_color upload_title">
<i class="color_edit fi fi-bs-comments"></i>
@@ -64,53 +71,62 @@
</div>
<div class="modal_img">
<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
<div :title="color?.name?color?.name:''" @click="selectColorItem(index,color)" @dblclick="setSelectColorItem(color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
<!-- <div class="color_content" :style="{background:`#6c6cac`}"></div> -->
<div class="color_content" :style="{'background-color':`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`}">
</div>
<div class="color_content_body">
<div class="color_des">22</div>
<div class="color_des">111</div>
<div class="color_des">{{color.tcx}}</div>
<div class="color_des">{{ color.name }}</div>
</div>
</div>
</div>
</div>
</div>
<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn">preview</div>
<div v-show="type_ == 2" @click.stop="setPrint" class="subitOkPreviewBtn">Layout</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
<DesignPrintOperation ref="DesignPrintOperation"></DesignPrintOperation>
</div>
</template>
<script>
import { defineComponent,computed,ref, h } from 'vue'
import { defineComponent,computed,ref, h ,inject} from 'vue'
import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { LoadingOutlined } from '@ant-design/icons-vue';
import { message,Upload} from 'ant-design-vue';
import { Sketch} from '@ans1998/vue3-color'
import {getUploadUrl,rgbToHsv} from '@/tool/util'
import DesignPrintOperation from './DesignPrintOperation.vue';
import { message,Upload} from 'ant-design-vue';
export default defineComponent({
props: ["msg"],
components:{
Draggable,Sketch,
Draggable,Sketch,DesignPrintOperation
},
setup(prop) {
const store = useStore();
let type_ = ref(0);
let current = inject('current')//父组件传过来的数据
//印花
let overalSingle = ref()
let systemDesignerPercentage = ref(30)
let overallSingle = ref(false)
let systemDesignerPercentage = ref(0)
//颜色
let colorList = ref([{},{},{},{},{},{},{},{}])
//加载中
let loadingShow = ref(false)
return{
overalSingle,
systemDesignerPercentage,
store,
current,
type_,
overallSingle,
systemDesignerPercentage,
colorList,
loadingShow,
}
},
data(){
@@ -127,40 +143,126 @@ export default defineComponent({
init(num){
this.type_ = num
this.colorList[this.selectIndex] = this.$parent.selectColor
this.overallSingle = this.current.printObject.ifSingle
this.systemDesignerPercentage = this.current.printObject.scale*100
console.log(this.current);
},
//模型
//印花
systemDesigner(num) {
console.log(num);
this.current.printObject.scale = num
},
setOveralSingle(){
this.current.printObject.ifSingle = this.overallSingle
},
formatter(value) {
return `${value}%`;
},
setPrint(){
if(this.current.printObject.url && this.current?.printObject?.url != 'none'){
let DesignPrintOperation = this.$refs.DesignPrintOperation
DesignPrintOperation.init()
}else{
message.error('Please select print');
}
},
deleteFile(){
this.current.printObject = {}
},
//颜色
selectColorItem(index,color){
let hex
let parent = this.$parent
this.selectIndex = index
this.$parent.selectIndex = index
if(this.$parent.selectColor.rgba.r == color?.rgba?.r && this.$parent.selectColor.rgba.g == color?.rgba?.g && this.$parent.selectColor.rgba.b == color?.rgba?.b){
return
}
if(color.rgba?.r){
hex = parent.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b])
hex = parent.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b,color.rgba.a])
}else{
hex = '#FFFFFF'
}
this.selectIndex = index
this.$parent.selectIndex = index
this.$parent.selectColor = color?.rgba + ''? {rgba:{r:color.rgba?.r,g:color.rgba?.g,b:color.rgba?.b,a:color.rgba?.a},hex:hex} : {rgba:{},hex:''}
this.$parent.selectColor = color?.rgba?.r != '' ? {rgba:{r:color.rgba?.r,g:color.rgba?.g,b:color.rgba?.b,a:color.rgba?.a},hex:hex} : {}
this.$parent.tcxColor = ''
this.$parent.pantongName = ''
},
setSelectColorItem(color){
let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
let string = `${color.rgba.r},${color.rgba.g},${color.rgba.b},${color.rgba.a}`
this.current.color = string
designItemDetail.clothes.forEach((element,index) => {
if(element.id == this.current.id){
designItemDetail.clothes[index] = this.current
}
});
},
//提交
setPreview(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let index
designItemDetail.clothes.forEach((v,ind)=>{
if(v.id == this.current.id){
index = ind
}
})
console.log(this.current,designItemDetail);
if(this.type_ == 1){
designItemDetail.clothes[index].id = this.current.id_
designItemDetail.clothes[index].path = this.current.path
return
}else if(this.type_ == 2){
this.setPrint()
return
}else if(this.type_ == 3){
let color = `${this.$parent.selectColor.rgba.r} ${this.$parent.selectColor.rgba.g} ${this.$parent.selectColor.rgba.b}`
designItemDetail.clothes[index].color = color
}
let priority = designItemDetail.clothes.map((v)=>{
return v.type
})
let data = {
...designItemDetail,
priority:priority,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
// this.parentData.design.designItemUrl = rv.designItemUrl
// this.$emit('finishRedesign',this.parentData)
// this.closeModal()
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
console.log(designItemDetail);
this.loadingShow = false
// this.closeModal()
console.log(rv);
}
).catch(res=>{
this.loadingShow = false
});
}
}
})
</script>
<style lang="less" scoped>
.detail_modal_body_result{
width: 26%;
position: relative;
i{
font-size: 1.8rem;
display: block;
}
.upload_title{
display: flex;
margin-bottom: 1rem;
@@ -180,16 +282,20 @@ export default defineComponent({
display: flex;
flex-direction: column;
.result_apparel_print_img{
position: relative;
flex: 1;
img{
width: 100%;
width: auto;
height: 100%;
max-height: 35rem;
margin-top: 2rem;
}
.result_print_img{
transform: scale(.7);
transform: scale(.85);
transform-origin: right top;
position: absolute;
right: 0;
cursor: pointer;
}
}
}
@@ -198,11 +304,33 @@ export default defineComponent({
display: flex;
justify-content: space-between;
.print_left{
position: relative;
img{
width: 8rem;
width: auto;
height: 8rem;
margin: auto;
display: block;
}
.delete_file_block{
display: none;
width: 3.2rem;
height: 3.2rem;
background: rgba(0,0,0,0.6);
border-radius: 0.4rem;
position: absolute;
top: 0.9rem;
right: 0.9rem;
text-align: center;
line-height: 3.2rem;
left: auto;
.icon-shanchu{
font-size: 1.6rem;
color: #fff;
}
}
&:hover .delete_file_block{
display: block;
}
}
.print_right{
.habit_Overal_Single {
@@ -211,7 +339,6 @@ export default defineComponent({
justify-content: center;
// margin: 2rem 0;
transform: scale(.8);
// margin: 3rem 0;
.habit_Overal_Single_text {
font-weight: 600;
@@ -248,13 +375,6 @@ export default defineComponent({
:deep(.ant-slider-handle:hover) {
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
}
// .habit_System_Designer_text_max {
// display: flex;
// justify-content: space-between;
// .habit_System_Designer_text {
// }
// }
}
}
}
@@ -273,14 +393,21 @@ export default defineComponent({
position: relative;
cursor: pointer;
border: 0.1rem solid #DCDCEC;
height: 8.5rem;
width: 7rem;
box-sizing: border-box;
.color_content{
width: 7rem;
width: 100%;
height: 4rem;
}
.color_content_body{
.color_des{
font-size: 1.2rem;
font-weight: 600;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
}
}
.select_upload_color{
@@ -292,8 +419,10 @@ export default defineComponent({
}
}
}
.subitOkPreviewBtn{
bottom: 4rem;
position: absolute;
}
}