301 lines
6.7 KiB
Vue
301 lines
6.7 KiB
Vue
<template>
|
|
<div class="detail_modal_body_result">
|
|
|
|
|
|
<div v-show="type_ == 1 || type_ == 2" class="result_apparel_print">
|
|
<div class="upload_title result_apparel" v-show="type_ == 1">
|
|
<i class="color_edit fi fi-bs-comments"></i>
|
|
<span>New Apparel</span>
|
|
</div>
|
|
<div v-show="type_ == 2" class="result_print">
|
|
<div>
|
|
<div class="upload_title">
|
|
<i class="color_edit fi fi-bs-comments"></i>
|
|
<span>New Print</span>
|
|
</div>
|
|
<div class="print_left">
|
|
<img src="" alt="">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="upload_title">
|
|
<i class="color_edit fi fi-bs-comments"></i>
|
|
<span>Placement</span>
|
|
</div>
|
|
<div class="print_right">
|
|
<div class="habit_Overal_Single">
|
|
<div
|
|
class="habit_Overal_Single_text"
|
|
:class="{ active: !overalSingle }"
|
|
>
|
|
Overal
|
|
</div>
|
|
<a-switch v-model:checked="overalSingle" />
|
|
<div
|
|
class="habit_Overal_Single_text"
|
|
:class="{ active: overalSingle }"
|
|
>
|
|
Single
|
|
</div>
|
|
</div>
|
|
<div class="habit_System_Designer">
|
|
<a-slider id="system_silder"
|
|
v-model:value="systemDesignerPercentage"
|
|
@afterChange="systemDesigner"
|
|
:tip-formatter="formatter"
|
|
>
|
|
</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="">
|
|
</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>
|
|
<span>New Color</span>
|
|
</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 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { defineComponent,computed,ref, h } 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'
|
|
|
|
export default defineComponent({
|
|
props: ["msg"],
|
|
components:{
|
|
Draggable,Sketch,
|
|
},
|
|
setup(prop) {
|
|
const store = useStore();
|
|
let type_ = ref(0);
|
|
|
|
|
|
|
|
//印花
|
|
let overalSingle = ref()
|
|
let systemDesignerPercentage = ref(30)
|
|
|
|
//颜色
|
|
let colorList = ref([{},{},{},{},{},{},{},{}])
|
|
return{
|
|
overalSingle,
|
|
systemDesignerPercentage,
|
|
type_,
|
|
colorList,
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
|
|
//颜色
|
|
selectIndex:0,//选中的文件索引
|
|
getRGBA:{},
|
|
selectColor:{},
|
|
}
|
|
},
|
|
methods:{
|
|
//点击判断
|
|
init(num){
|
|
this.type_ = num
|
|
this.colorList[this.selectIndex] = this.$parent.selectColor
|
|
},
|
|
|
|
//印花
|
|
systemDesigner(num) {
|
|
console.log(num);
|
|
},
|
|
formatter(value) {
|
|
return `${value}%`;
|
|
},
|
|
//颜色
|
|
selectColorItem(index,color){
|
|
let hex
|
|
let parent = this.$parent
|
|
if(color.rgba?.r){
|
|
hex = parent.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b])
|
|
}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.tcxColor = ''
|
|
this.$parent.pantongName = ''
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.detail_modal_body_result{
|
|
width: 26%;
|
|
i{
|
|
font-size: 1.8rem;
|
|
display: block;
|
|
}
|
|
.upload_title{
|
|
display: flex;
|
|
margin-bottom: 1rem;
|
|
margin-top: 1rem;
|
|
&.upload_title:nth-child(1){
|
|
margin-top: 0;
|
|
}
|
|
span{
|
|
margin-left: 1rem;
|
|
font-size: 1.8rem;
|
|
color: #000000;
|
|
}
|
|
}
|
|
//模型和印花
|
|
.result_apparel_print{
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.result_apparel_print_img{
|
|
flex: 1;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: 35rem;
|
|
margin-top: 2rem;
|
|
}
|
|
.result_print_img{
|
|
transform: scale(.7);
|
|
transform-origin: right top;
|
|
}
|
|
}
|
|
}
|
|
//印花
|
|
.result_print{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.print_left{
|
|
img{
|
|
width: 8rem;
|
|
height: 8rem;
|
|
margin: auto;
|
|
}
|
|
}
|
|
.print_right{
|
|
.habit_Overal_Single {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
// margin: 2rem 0;
|
|
transform: scale(.8);
|
|
|
|
// margin: 3rem 0;
|
|
.habit_Overal_Single_text {
|
|
font-weight: 600;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
&.active {
|
|
color: rgba(0, 0, 0, 0.7);
|
|
// font-weight: 900;
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
:deep(.ant-switch) {
|
|
margin: 0 1rem;
|
|
background-color: #efefef;
|
|
}
|
|
:deep(.ant-switch-checked) {
|
|
background-color: #000;
|
|
}
|
|
}
|
|
.habit_System_Designer {
|
|
margin-top: 4rem;
|
|
transform: scale(.8);
|
|
|
|
:deep(.ant-slider-track),
|
|
:deep(.ant-slider-rail) {
|
|
height: .6rem;
|
|
background-color: #e1e1e1;
|
|
border-radius: 0.5rem;
|
|
}
|
|
:deep(.ant-slider .ant-slider-handle:not(.ant-tooltip-open)),
|
|
:deep(.ant-slider-handle) {
|
|
background-color: #2d2e76 !important;
|
|
border: none !important;
|
|
}
|
|
: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 {
|
|
// }
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
//颜色
|
|
.modal_img{
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding-left: 2rem;
|
|
&.modal_img::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.modal_img_item{
|
|
margin: 0 1rem 1rem 0;
|
|
position: relative;
|
|
cursor: pointer;
|
|
border: 0.1rem solid #DCDCEC;
|
|
.color_content{
|
|
width: 7rem;
|
|
height: 4rem;
|
|
}
|
|
.color_content_body{
|
|
.color_des{
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.select_upload_color{
|
|
border: 0.1rem solid #343579;
|
|
}
|
|
.upload_color{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
</style> |