commit
This commit is contained in:
WangXiaoDong
BIN
src/assets/images/homePage/cursor_rotate.png
Normal file
BIN
src/assets/images/homePage/cursor_rotate.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/images/homePage/dropper.png
Normal file
BIN
src/assets/images/homePage/dropper.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
@@ -114,11 +114,12 @@ input {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.collection_modal .ant-upload.ant-upload-select-picture-card {
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
background: #FFFFFF;
|
||||
border: 0.3rem dashed #EDEDED;
|
||||
margin: 0 2rem 2rem 0;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border: 0.3rem solid #ededed;
|
||||
border-radius: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
.collection_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao {
|
||||
font-size: 3.2rem;
|
||||
@@ -135,6 +136,102 @@ input {
|
||||
width: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
.collection_modal_body .input_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
.collection_modal_body .input_box input {
|
||||
font-size: 12px;
|
||||
border-radius: 0.5rem;
|
||||
width: 70%;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
padding-left: 1.5rem;
|
||||
border: 0.1rem solid #F1F1F1;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
.collection_modal_body .input_box inputinput:-moz-placeholder {
|
||||
color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.collection_modal_body .input_box inputinput:-ms-input-placeholder {
|
||||
color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.collection_modal_body .input_box inputinput::-webkit-input-placeholder {
|
||||
color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.collection_modal_body .input_box .generage_btn {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.collection_modal_body .upload_item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.collection_modal_body .upload_item .upload_file_item {
|
||||
margin: 0 2rem 2rem 0;
|
||||
display: inline-block;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border: 1px solid #f5f5f5;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
}
|
||||
.collection_modal_body .upload_item .upload_file_item.upload_component {
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.collection_modal_body .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.collection_modal_body .upload_item .upload_file_item :deep(.ant-upload-select-picture-card) {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border: 0.3rem solid #ededed;
|
||||
border-radius: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block {
|
||||
display: block;
|
||||
}
|
||||
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .upload_img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block {
|
||||
display: none;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
height: 3rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
font-size: 1.6rem;
|
||||
color: #ffffff;
|
||||
line-height: 3rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.collection_modal_body .upload_item .upload_file_item .upload_img_icon {
|
||||
width: 4.6rem;
|
||||
}
|
||||
.cut_pricture_modal .ant-modal-body {
|
||||
height: 65.4rem;
|
||||
overflow-y: hidden;
|
||||
|
||||
@@ -135,12 +135,12 @@ input{
|
||||
}
|
||||
|
||||
.ant-upload.ant-upload-select-picture-card{
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
background: #FFFFFF;
|
||||
border: 0.3rem dashed #EDEDED;
|
||||
margin: 0 2rem 2rem 0;
|
||||
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border: 0.3rem solid #ededed;
|
||||
border-radius: 10px;
|
||||
margin: 0;
|
||||
.upload_tip_block{
|
||||
.icon-jiahao{
|
||||
font-size: 3.2rem;
|
||||
@@ -161,6 +161,115 @@ input{
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
//设计input和上传按钮样式
|
||||
.collection_modal_body{
|
||||
.input_box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 2rem;
|
||||
input{
|
||||
font-size: 12px;
|
||||
border-radius: .5rem;
|
||||
width: 70%;
|
||||
border: 1px solid rgba(0,0,0,.15);
|
||||
padding-left: 1.5rem;
|
||||
border: 0.1rem solid #F1F1F1;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
&input:-moz-placeholder{
|
||||
color: rgba(0,0,0,.15);
|
||||
}
|
||||
|
||||
&input:-ms-input-placeholder {
|
||||
color: rgba(0,0,0,.15);
|
||||
}
|
||||
|
||||
&input::-webkit-input-placeholder {
|
||||
color: rgba(0,0,0,.15);
|
||||
}
|
||||
}
|
||||
.generage_btn{
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.upload_item{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.upload_file_item {
|
||||
margin: 0 2rem 2rem 0;
|
||||
display: inline-block;
|
||||
// width: 16.5rem;
|
||||
// height: 16.5rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border: 1px solid #f5f5f5;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
&.upload_component {
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
:deep(.ant-upload-picture-card-wrapper) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
:deep(.ant-upload-select-picture-card) {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border: 0.3rem solid #ededed;
|
||||
border-radius: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
.upload_file_item_content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
&:hover .delete_file_block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.upload_img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.delete_file_block {
|
||||
display: none;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
height: 3rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
font-size: 1.6rem;
|
||||
color: #ffffff;
|
||||
line-height: 3rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.upload_img_icon {
|
||||
width: 4.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//剪裁弹窗
|
||||
.cut_pricture_modal{
|
||||
|
||||
@@ -1,74 +1,108 @@
|
||||
<template>
|
||||
<div class="colorboard_upload_modal">
|
||||
<div class="colorboard_upload_left">
|
||||
<div class="upload_left_header">
|
||||
<span class="color_list icon iconfont icon-diaosebanpalette3"></span>
|
||||
<span>My Color Palette</span>
|
||||
</div>
|
||||
<div class="upload_left_content scroll_style">
|
||||
<div class="upload_color_block" v-for="(color,index) in colorList" :key="color">
|
||||
<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '']" :style="{background:`rgb(${color?.r},${color?.g},${color?.b})`}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal_layout">
|
||||
<div class="modal_text">
|
||||
<div>Thumbnail preview of selected moodboard</div>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="colorboard_upload_right">
|
||||
<div class="upload_right_content">
|
||||
<div class="right_content_line">
|
||||
<div class="upload_right_header">
|
||||
<span class="color_edit icon iconfont icon-yansefangan"></span>
|
||||
<span>Choose Color</span>
|
||||
<i class="color_edit fi fi-bs-comments" ></i>
|
||||
<span>Palette</span>
|
||||
</div>
|
||||
<div class="color_setting_block">
|
||||
<Chrome class="chrome_color" v-model="selectColor"></Chrome>
|
||||
<Slider class="sileder_color" v-model="selectColor"></Slider>
|
||||
<div class="color_rgb_block">
|
||||
<div class="rgb_item">R:{{getSelectRGB(selectColor).r}}</div>
|
||||
<div class="rgb_item">G:{{getSelectRGB(selectColor).g}}</div>
|
||||
<div class="rgb_item">B:{{getSelectRGB(selectColor).b}}</div>
|
||||
</div>
|
||||
|
||||
<Sketch class="sketch_color" v-model="selectColor" :show.sync="colorPickerVisible"/>
|
||||
<!-- <Chrome class="chrome_color" v-model="selectColor"></Chrome> -->
|
||||
<!-- <Slider class="sileder_color" v-model="selectColor"></Slider> -->
|
||||
<div class="color_block">
|
||||
<div class="color_left" @click="colorBlockHex = !colorBlockHex">
|
||||
<div v-show="colorBlockHex">
|
||||
HEX
|
||||
</div>
|
||||
<div v-show="!colorBlockHex">
|
||||
RGBA
|
||||
</div>
|
||||
</div>
|
||||
<div class="color_right">
|
||||
<div class="color_HEX_block" v-show="colorBlockHex">
|
||||
<div class="color_block_bg" :style="{'background-color':`rgba(${getSelectRGB(selectColor).r},${getSelectRGB(selectColor).g},${getSelectRGB(selectColor).b},${getSelectRGB(selectColor).a})`}"></div>
|
||||
<div>
|
||||
{{getSelectRGB(selectColor).hex}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="color_rgb_block" v-show="!colorBlockHex">
|
||||
<div class="color_block_bg" :style="{'background-color':`rgba(${getSelectRGB(selectColor).r},${getSelectRGB(selectColor).g},${getSelectRGB(selectColor).b},${getSelectRGB(selectColor).a})`}"></div>
|
||||
<div class="rgb_item">{{getSelectRGB(selectColor).r}},</div>
|
||||
<div class="rgb_item">{{getSelectRGB(selectColor).g}},</div>
|
||||
<div class="rgb_item">{{getSelectRGB(selectColor).b}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color_review_block">
|
||||
<!-- <div class="color_review_block">
|
||||
<div class="color_review_content" :style="{background: reviewColor?.r || reviewColor?.r===0 ?`rgb(${reviewColor?.r},${reviewColor?.g},${reviewColor?.b})` : 'none'}"></div>
|
||||
<div class="pantong_name" v-show="pantongName">{{pantongName}}</div>
|
||||
<div class="clear_button" @click="clearCurrentColor()">Clear</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="right_content_line">
|
||||
<div class="right_content_line right_content_line_upload">
|
||||
<div class="upload_right_header">
|
||||
<span class="color_edit icon iconfont icon-yansefangan"></span>
|
||||
<span>Upload Color</span>
|
||||
</div>
|
||||
<div class="upload_item">
|
||||
<div class="upload_file_item" v-for="(file) in fileList" :key="file">
|
||||
<div class="upload_file_item_content" v-show="file.status !== 'done'">
|
||||
<a-spin :indicator="indicator" tip="Uploading..."/>
|
||||
</div>
|
||||
<div class="upload_file_item_content" v-show="file.status === 'done'">
|
||||
<img :src="file?.imgUrl" class="upload_img" ref="colorImage">
|
||||
<div class="delete_file_block" @click="deleteFile(index)">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-upload
|
||||
v-show="fileList.length < 1"
|
||||
list-type="picture-card"
|
||||
:customRequest="function(){}"
|
||||
@change="fileUploadChange"
|
||||
:before-upload="beforeUpload"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
>
|
||||
<div class="upload_tip_block">
|
||||
<img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
|
||||
</div>
|
||||
</a-upload>
|
||||
<i class="color_edit fi fi-bs-comments" ></i>
|
||||
<span>Auto Recognize</span>
|
||||
</div>
|
||||
<div class="upload_centetn">
|
||||
<div class="upload_item">
|
||||
<div class="upload_file_item" v-for="(file) in fileList" :key="file">
|
||||
<div class="upload_file_item_content" v-show="file.status !== 'done'">
|
||||
<a-spin :indicator="indicator" tip="Uploading..."/>
|
||||
</div>
|
||||
<div class="upload_file_item_content" v-show="file.status === 'done'">
|
||||
<img :src="file?.imgUrl" class="upload_img" ref="colorImage">
|
||||
<div class="delete_file_block" @click="deleteFile(index)">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-upload
|
||||
v-show="fileList.length < 1"
|
||||
list-type="picture-card"
|
||||
:customRequest="function(){}"
|
||||
@change="fileUploadChange"
|
||||
:before-upload="beforeUpload"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
>
|
||||
<div class="upload_tip_block">
|
||||
<i class="fi fi-rr-picture"></i>
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
<div class="upload_color">
|
||||
<div v-for="color,index in selectColorList" :key="color" @click="setUplpadColor(color)" class="upload_color_item">
|
||||
<div class="upload_color_item_bg" :style="{'background-color':`rgba(${color.rgba.r},${color.rgba.g},${color.rgba.b},${color.rgba.a})`}">
|
||||
</div>
|
||||
<!-- <div class="upload_color_item_text">{{ pantongNameList[index] }}</div> -->
|
||||
<img src="#" :title="pantongNameList[index]">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="upload_right_header">
|
||||
<span class="color_edit icon iconfont icon-yansefangan"></span>
|
||||
<span>Key in Color Code</span>
|
||||
|
||||
</div>
|
||||
<div class="right_content_line">
|
||||
<div class="upload_right_header">
|
||||
<i class="color_edit fi fi-bs-comments" ></i>
|
||||
<span>Color Code</span>
|
||||
</div>
|
||||
<div class="get_color_block">
|
||||
<input class="get_color_input" placeholder="tcx value (e.g.: 19-4052)" v-model="tcxColor" @keydown.enter="getTcxColor()"/>
|
||||
@@ -76,14 +110,17 @@
|
||||
<span class="icon iconfont icon-huoquduixiang"></span>
|
||||
<span class="get_color_des">Extract Color</span>
|
||||
</div>
|
||||
<div v-show="getColorBg" class="get_color_bg" @click="setUplpadColor(reviewColor)" :style="{'background-color':`rgba(${getSelectRGB(reviewColor).r},${getSelectRGB(reviewColor).g},${getSelectRGB(reviewColor).b},${getSelectRGB(reviewColor).a})`}">
|
||||
<img src="#" :title="pantongName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Chrome,Slider } from '@ans1998/vue3-color'
|
||||
<script>
|
||||
import { Chrome,Slider,Sketch,Material,Compact,Swatches,Photoshop } from '@ans1998/vue3-color'
|
||||
import { Https } from "@/tool/https";
|
||||
import { defineComponent, h,ref } from 'vue'
|
||||
import { LoadingOutlined } from '@ant-design/icons-vue';
|
||||
@@ -95,34 +132,41 @@ import { message,Upload} from 'ant-design-vue';
|
||||
export default defineComponent({
|
||||
components:{
|
||||
Chrome,
|
||||
Slider
|
||||
Slider,
|
||||
Sketch
|
||||
},
|
||||
setup(){
|
||||
let fileList:any = ref([])
|
||||
let colorList:any = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
|
||||
let selectColor:any = ref({rgba:{}}) //顔色选择器默认颜色
|
||||
let fileList = ref([])
|
||||
let colorList = [{},{},{},{},{},{},{},{}]
|
||||
let selectColor = ref({
|
||||
rgba:{},
|
||||
}) //顔色选择器默认颜色
|
||||
let selectColorList = ref({
|
||||
})
|
||||
return {
|
||||
fileList,
|
||||
colorList,
|
||||
selectColor,
|
||||
selectColorList,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
selectColor(newVal:any,oldVal:any){
|
||||
this.reviewColor = newVal.rgba || {}
|
||||
selectColor(newVal,oldVal){
|
||||
this.colorList[this.selectIndex] = newVal.rgba
|
||||
let colorList =this.colorList.filter((v:any) => v && Object.keys(v).length)
|
||||
let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
|
||||
this.setColorboardList(colorList)
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
getSelectRGB(selectColor){
|
||||
return (selectColor:any)=>{
|
||||
return (selectColor)=>{
|
||||
let rgba = selectColor.rgba
|
||||
let data = {
|
||||
r:rgba?.r || rgba?.r===0 ? rgba?.r : 255,
|
||||
g:rgba?.g || rgba?.g===0 ? rgba?.g : 255,
|
||||
b:rgba?.b || rgba?.b===0 ? rgba?.b : 255,
|
||||
a:rgba?.a || rgba?.a===1 ? rgba?.a : 1,
|
||||
hex:selectColor.hex == undefined ? '#FFFFFF':selectColor.hex
|
||||
}
|
||||
return data
|
||||
}
|
||||
@@ -135,6 +179,7 @@ export default defineComponent({
|
||||
selectIndex:0,//选中的文件索引
|
||||
tcxColor:'',
|
||||
pantongName:'',//潘通值
|
||||
pantongNameList:[],
|
||||
indicator : h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: '2.4rem',
|
||||
@@ -148,22 +193,59 @@ export default defineComponent({
|
||||
},
|
||||
token:'',
|
||||
uploadUrl:'',
|
||||
store:useStore()
|
||||
store:useStore(),
|
||||
colorPickerVisible: true,
|
||||
colorBlockHex:true,
|
||||
getColorBg:false,
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.token = getCookie('token') || ''
|
||||
this.uploadUrl = getUploadUrl()
|
||||
let dropperDom = document.getElementsByClassName('vc-sketch-color-wrap')[0]
|
||||
dropperDom.addEventListener('click',async ()=>{
|
||||
try {
|
||||
const dropper = new EyeDropper();
|
||||
const result = await dropper.open();
|
||||
let hex = result.sRGBHex.replace("#", "");
|
||||
// 将十六进制颜色码拆分成红、绿、蓝三个部分
|
||||
const r = parseInt(hex.substring(0, 2), 16);
|
||||
const g = parseInt(hex.substring(2, 4), 16);
|
||||
const b = parseInt(hex.substring(4, 6), 16);
|
||||
this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
|
||||
// 返回RGB格式的字符串
|
||||
// return `rgb(${r}, ${g}, ${b})`;
|
||||
// box.style.backgroundColor = label.textContent = result.sRGBHex;
|
||||
} catch (e) {
|
||||
message.error("Your browser does not support it")
|
||||
}
|
||||
})
|
||||
// if ("EyeDropper" in window) {
|
||||
// console.log(true);
|
||||
// }
|
||||
// else {
|
||||
// console.log(false);
|
||||
// }
|
||||
},
|
||||
methods:{
|
||||
|
||||
//选择不同的色块
|
||||
selectColorItem(index:any,color:any){
|
||||
selectColorItem(index,color){
|
||||
let hex
|
||||
if(color.r){
|
||||
hex = this.rgbaToHex([color.r,color.g,color.b])
|
||||
}else{
|
||||
hex = '#FFFFFF'
|
||||
}
|
||||
this.selectIndex = index
|
||||
this.reviewColor = color?.r + ''? {r:color.r,g:color.g ,b:color.b } : {}
|
||||
this.selectColor = color?.r + ''? {rgba:{r:color.r,g:color.g,b:color.b,a:1}} : {}
|
||||
this.selectColor = color?.r + ''? {rgba:{r:color.r,g:color.g,b:color.b,a:1},hex:hex} : {hex:''}
|
||||
this.fileList = []
|
||||
this.tcxColor = ''
|
||||
this.pantongName = ''
|
||||
this.pantongNameList = []
|
||||
this.selectColorList= []
|
||||
this.reviewColor= {}
|
||||
this.getColorBg = false
|
||||
},
|
||||
|
||||
//通过tcx获取颜色
|
||||
@@ -173,11 +255,15 @@ export default defineComponent({
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.getRgbByTcx + '?tcx=' + this.tcxColor).then((rv) =>{
|
||||
if(rv && rv.name){
|
||||
this.reviewColor = {r:rv.r, g:rv.g, b:rv.b}
|
||||
// let hex = this.rgbaToHex([color.r,color.g,color.b])
|
||||
let hex = this.rgbaToHex([rv.r,rv.g,rv.b])
|
||||
this.reviewColor = rv?.r + ''? {rgba:{r:rv.r,g:rv.g,b:rv.b,a:1},hex:hex} : {hex:''}
|
||||
this.selectColor = this.reviewColor
|
||||
this.colorList[this.selectIndex] = {r:rv.r, g:rv.g, b:rv.b}
|
||||
this.pantongName = rv.name
|
||||
let colorList =this.colorList.filter((v:any) => Object.keys(v).length)
|
||||
let colorList =this.colorList.filter((v) => Object.keys(v).length)
|
||||
this.setColorboardList(colorList)
|
||||
this.getColorBg = true
|
||||
}else{
|
||||
message.error("Can't find the TCX color")
|
||||
}
|
||||
@@ -188,15 +274,17 @@ export default defineComponent({
|
||||
clearCurrentColor(){
|
||||
this.selectColor = {}
|
||||
this.fileList = []
|
||||
this.reviewColor={}
|
||||
this.pantongName = ''
|
||||
this.pantongNameList = []
|
||||
this.tcxColor = ''
|
||||
},
|
||||
|
||||
fileUploadChange(data:any){
|
||||
fileUploadChange(data){
|
||||
let file = data.file
|
||||
let fileData = file.originFileObj
|
||||
var reader = new FileReader();
|
||||
reader.onload = (e:any) => {
|
||||
reader.onload = (e) => {
|
||||
let data_new;
|
||||
if (typeof e.target.result === 'object') {
|
||||
// 把Array Buffer转化为blob 如果是base64不需要
|
||||
@@ -210,47 +298,110 @@ export default defineComponent({
|
||||
|
||||
setTimeout(()=>{
|
||||
const colorThief = new ColorThief();
|
||||
let colorImage:any = this.$refs.colorImage
|
||||
let domImg:any = colorImage[0];
|
||||
let colorImage = this.$refs.colorImage
|
||||
let domImg = colorImage[0];
|
||||
let color = colorThief.getColor(domImg)
|
||||
this.getHsvColor(color)
|
||||
this.reviewColor = {r:color[0],g:color[1],b:color[2]}
|
||||
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1}}
|
||||
let colorHex = this.rgbaToHex(color)
|
||||
let selectColorList = [];
|
||||
let selectColor = colorThief.getPalette(domImg,10)
|
||||
selectColor = selectColor.join('&')
|
||||
selectColor = selectColor.split("&")
|
||||
let colorLi = []
|
||||
new Set(selectColor).forEach((item)=>{
|
||||
colorLi.push(item.split(","))
|
||||
})
|
||||
colorLi.forEach(element => {
|
||||
let colorLiHex = this.rgbaToHex(element)
|
||||
selectColorList.push(
|
||||
{rgba:{r:element[0],g:element[1],b:element[2],a:1},hex:colorLiHex}
|
||||
)
|
||||
});
|
||||
this.selectColorList = selectColorList
|
||||
this.getHsvColor(selectColorList)
|
||||
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
|
||||
},100)
|
||||
};
|
||||
// 转化为base64S
|
||||
reader.readAsDataURL(fileData)
|
||||
},
|
||||
|
||||
beforeUpload(file:any){
|
||||
rgbaToHex(rgba) { // rgba转16进制
|
||||
let hex = '#';
|
||||
for (const i of rgba) {
|
||||
hex += Number(i).toString(16).padStart(2, '0');
|
||||
}
|
||||
return hex;
|
||||
},
|
||||
setUplpadColor(color){
|
||||
this.selectColor = color
|
||||
},
|
||||
beforeUpload(file){
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
if (!isJpgOrPng) {
|
||||
message.error('You can only upload Image file!');
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must smaller than 5MB!');
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
|
||||
deleteFile(index:any){
|
||||
deleteFile(index){
|
||||
this.fileList.splice(index, 1)
|
||||
this.selectColorList = []
|
||||
},
|
||||
|
||||
//通过HSV获取颜色
|
||||
getHsvColor(color:any){
|
||||
let hsv = rgbToHsv(color)
|
||||
getHsvColor(color){
|
||||
// let hsv = rgbToHsv(color)
|
||||
this.pantongName = ''
|
||||
Https.axiosGet(Https.httpUrls.getRgbByHsv + `?h=${hsv[0]}&s=${hsv[0]}&v=${hsv[1]}`).then((rv) =>{
|
||||
if(rv){
|
||||
this.pantongName = rv.name
|
||||
// {params:{id:3}}
|
||||
// console.log(color);
|
||||
let colorList = []
|
||||
color.forEach((item,index)=>{
|
||||
let arr = [item.rgba.r,item.rgba.g,item.rgba.b,item.rgba.a]
|
||||
colorList.push(arr)
|
||||
})
|
||||
|
||||
let hsvList = []
|
||||
colorList.forEach((item)=>{
|
||||
let hsv = rgbToHsv(item)
|
||||
if(hsvList.length == 0){
|
||||
}else{
|
||||
if(hsvList[0].h+5){
|
||||
}
|
||||
}
|
||||
|
||||
let obj = {
|
||||
h:Number(hsv[0]),
|
||||
s:Number(hsv[1]),
|
||||
v:Number(hsv[2]),
|
||||
}
|
||||
hsvList.push(obj)
|
||||
})
|
||||
// let data = []
|
||||
// Https.axiosGet(Https.httpUrls.getRgbByHsv,{params:hsvList}).then((rv) =>{
|
||||
// // Https.axiosGet(Https.httpUrls.getRgbByHsv + `?h=${hsv[0]}&s=${hsv[0]}&v=${hsv[1]}`).then((rv) =>{
|
||||
// if(rv){
|
||||
// this.pantongName = rv.name
|
||||
// console.log(rv);
|
||||
// }
|
||||
// })
|
||||
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, hsvList).then(
|
||||
(rv) => {
|
||||
if(rv){
|
||||
rv.forEach(element => {
|
||||
this.pantongNameList.push(element.name)
|
||||
});
|
||||
console.log(rv);
|
||||
}
|
||||
}
|
||||
})
|
||||
).catch(res=>{
|
||||
});
|
||||
},
|
||||
|
||||
setColorboardList(colorList:any){
|
||||
let newColorList = colorList.map((v:any)=>{
|
||||
setColorboardList(colorList){
|
||||
let newColorList = colorList.map((v)=>{
|
||||
let data = {
|
||||
id:'',
|
||||
name:'',
|
||||
@@ -264,72 +415,68 @@ export default defineComponent({
|
||||
|
||||
recollection(){
|
||||
let colorList = this.store.state.UploadFilesModule.allBoardData.colorBoards
|
||||
colorList.forEach((ele:any, index:number) => {
|
||||
colorList.forEach((ele, index) => {
|
||||
this.colorList[index] = ele.rgbValue
|
||||
});
|
||||
this.reviewColor = this.colorList[0]
|
||||
this.selectColor = {rgba:this.colorList[0]}, //顔色选择器默认颜色
|
||||
this.store.commit('setColorboardList',colorList)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.colorboard_upload_modal{
|
||||
padding: 1rem 1rem 1.8rem 1rem;
|
||||
// padding: 1rem 1rem 1.8rem 1rem;
|
||||
height: 100%;
|
||||
background: #F2F3FB;
|
||||
// background: #F2F3FB;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.colorboard_upload_left{
|
||||
width: calc(100% - 48rem);
|
||||
height: 100%;
|
||||
background: #FFFFFF;
|
||||
|
||||
.upload_left_header{
|
||||
padding: 1.4rem 2rem 1.6rem;
|
||||
font-size: 1.6rem;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 2.4rem;
|
||||
|
||||
.color_list{
|
||||
font-size: 2.2rem;
|
||||
margin-right: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.upload_left_content{
|
||||
padding: 1rem 1.6rem;
|
||||
height: calc(100% - 5.4rem);
|
||||
overflow-y: auto;
|
||||
|
||||
.upload_color_block{
|
||||
padding: 0 0.4rem;
|
||||
margin-bottom: 2.6rem;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
.upload_color{
|
||||
width: 11.5rem;
|
||||
height: 11.5rem;
|
||||
border: 0.1rem solid #DCDCEC;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select_upload_color{
|
||||
border-color: #343579;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
padding-top: 7rem;
|
||||
.modal_layout{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(47% + 3rem);
|
||||
.modal_text{
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.modal_img{
|
||||
width: 40rem;
|
||||
height: 5rem;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
&.modal_img::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.modal_img_item{
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin: 0 1rem 1rem 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border: 0.1rem solid #DCDCEC;
|
||||
.select_upload_color{
|
||||
border: 0.1rem solid #343579;
|
||||
}
|
||||
.upload_color{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.colorboard_upload_right{
|
||||
width: 47rem;
|
||||
// width: 47rem;
|
||||
height: 100%;
|
||||
background: #FFFFFF;
|
||||
|
||||
@@ -343,22 +490,32 @@ export default defineComponent({
|
||||
align-items: center;
|
||||
|
||||
.color_edit{
|
||||
font-size: 2.4rem;
|
||||
margin-right: 0.7rem;
|
||||
font-size: 2rem;
|
||||
margin-right: 1rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.upload_right_content{
|
||||
padding: 1rem 2.8rem;
|
||||
height: calc(100% - 5.4rem);
|
||||
// height: calc(100% - 5.4rem);
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
|
||||
.right_content_line{
|
||||
margin-bottom: 2.3rem;
|
||||
|
||||
padding-left: 3rem;
|
||||
position: relative;
|
||||
padding-right: 5rem;
|
||||
.upload_centetn{
|
||||
overflow-x: hidden;
|
||||
height: calc(100% - 4.4rem);
|
||||
}
|
||||
.upload_centetn::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.color_review_block{
|
||||
margin-right: 4rem;
|
||||
|
||||
@@ -393,10 +550,13 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.upload_file_item{
|
||||
margin: 0 2rem 2rem 0;
|
||||
// margin: 0 2rem 2rem 0;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
// width: 16.5rem;
|
||||
// height: 16.5rem;
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
border: 1px solid #F5F5F5;
|
||||
vertical-align: top;
|
||||
|
||||
@@ -417,6 +577,7 @@ export default defineComponent({
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.delete_file_block{
|
||||
@@ -438,14 +599,122 @@ export default defineComponent({
|
||||
.upload_img_icon{
|
||||
width: 4.6rem;
|
||||
}
|
||||
|
||||
.upload_color{
|
||||
display: flex;
|
||||
width: 12rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.upload_color_item{
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
cursor: pointer;
|
||||
.upload_color_item_bg{
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
img{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
}
|
||||
// .upload_color_item_text{
|
||||
// font-size: 12px;
|
||||
// line-height: 1;
|
||||
// text-align: center;
|
||||
// }
|
||||
div{
|
||||
}
|
||||
}
|
||||
}
|
||||
.color_setting_block{
|
||||
width: 16.5rem;
|
||||
margin-right: 4rem;
|
||||
margin-bottom: 7rem;
|
||||
.vc-chrome-body{
|
||||
display: none;
|
||||
}
|
||||
// width: 16.5rem;
|
||||
width: auto;
|
||||
background: #f0eaee;
|
||||
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
// box-shadow: 2px 2px 8px #000;
|
||||
box-shadow: 2px 2px 8px rgba(0,0,0,.3);
|
||||
background: linear-gradient(70deg, #eee4f3, #f3f4e6);
|
||||
.sketch_color{
|
||||
box-shadow: none;
|
||||
width: 18rem;
|
||||
background: rgba(0,0,0,0);
|
||||
padding-top: 1rem !important;
|
||||
max-width: 170px;
|
||||
padding: 0;
|
||||
.vc-sketch{
|
||||
}
|
||||
.vc-sketch-saturation-wrap{
|
||||
width: 16rem;
|
||||
height: 16rem;
|
||||
max-height: 170px;
|
||||
max-width: 170px;
|
||||
margin: auto;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.vc-sketch-presets{
|
||||
display: none;
|
||||
}
|
||||
.vc-botton-container{
|
||||
display: none;
|
||||
}
|
||||
.vc-chrome-body{
|
||||
display: none;
|
||||
}
|
||||
.vc-sketch-field{
|
||||
display: none;
|
||||
.vc-input__input{
|
||||
text-align: center;
|
||||
padding: .4rem 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
.vc-sketch-color-wrap{
|
||||
border-radius: 5px;
|
||||
box-shadow: inset 0 0 0 1px #ccc;
|
||||
.vc-sketch-active-color{
|
||||
}
|
||||
.vc-sketch-active-color{
|
||||
display: none;
|
||||
}
|
||||
.vc-checkerboard{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vc-sketch-color-wrap{
|
||||
background-image: url(@../../../../assets/images/homePage/dropper.png);
|
||||
background-size: 15px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
// .vc-sketch-color-wrap{
|
||||
// display: none;
|
||||
// }
|
||||
.vc-sketch-controls{
|
||||
width: 90%;
|
||||
margin: .5rem auto;
|
||||
.vc-sketch-hue-wrap,.vc-sketch-alpha-wrap{
|
||||
.vc-hue{
|
||||
border-radius: 15px;
|
||||
}
|
||||
.vc-alpha{
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.vc-sketch-alpha-wrap{
|
||||
margin-top: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chrome_color{
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
@@ -485,17 +754,62 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
|
||||
.color_rgb_block{
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 1.6rem;
|
||||
color: #343579;
|
||||
.color_block{
|
||||
// margin-top: 1rem;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// font-size: 1.6rem;
|
||||
width: 100%;
|
||||
padding: 0 5%;
|
||||
padding-bottom: 5%;
|
||||
margin: 0.5rem auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.color_right{
|
||||
width: 11rem;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
.color_rgb_block{
|
||||
display: flex;
|
||||
.rgb_item{
|
||||
margin-left: .2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.color_left{
|
||||
cursor: pointer;
|
||||
color: rgb(153, 153, 153);
|
||||
}
|
||||
.color_right,.color_left{
|
||||
>div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.color_HEX_block,.color_rgb_block{
|
||||
padding: .2rem .5rem;
|
||||
box-shadow: inset 0 0 0 1px #ccc;
|
||||
border-radius: .4rem;
|
||||
justify-content: space-around;
|
||||
text-transform:uppercase;
|
||||
.color_block_bg{
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
// margin-right: .5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.color_block_bg{
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.get_color_block{
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.get_color_input{
|
||||
width: 19.4rem;
|
||||
height: 3.8rem;
|
||||
@@ -534,11 +848,42 @@ export default defineComponent({
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.get_color_bg{
|
||||
width: 18rem;
|
||||
height: 18rem;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: 1.5rem;
|
||||
img{
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload_item{
|
||||
margin-bottom: 11.6rem;
|
||||
margin-bottom: 2rem;
|
||||
.ant-upload-picture-card-wrapper{
|
||||
.ant-upload-list{
|
||||
.ant-upload-select-picture-card{
|
||||
// margin: 0 2rem 2rem 0;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
border: 1px solid #F5F5F5;
|
||||
vertical-align: top;
|
||||
i{
|
||||
zoom: 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -69,7 +69,8 @@ import { useStore } from "vuex";
|
||||
import GO from '@/tool/GO';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
props: ["msg"],
|
||||
setup(prop) {
|
||||
let myMaterialModalShow = ref(false)
|
||||
let imgList = ref([])
|
||||
let store = useStore()
|
||||
@@ -122,9 +123,17 @@ export default defineComponent({
|
||||
searcMaterialhName,
|
||||
designType,
|
||||
disignTypeList,
|
||||
boardList
|
||||
boardList,
|
||||
}
|
||||
},
|
||||
data (prop) {
|
||||
return {
|
||||
type_ : {
|
||||
type1:'material',
|
||||
type2:prop.msg
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
||||
init(code:any){
|
||||
@@ -145,7 +154,7 @@ export default defineComponent({
|
||||
// this.selectImgList.splice(index,1)
|
||||
// this.selectImgListIds.splice(index,1)
|
||||
// }
|
||||
imgData.type_ = 'material'
|
||||
imgData.type_ = this.type_
|
||||
this.store.commit("addGenerateMaterialFils", imgData);
|
||||
},
|
||||
|
||||
|
||||
@@ -3,21 +3,21 @@
|
||||
<div class="modal_left">
|
||||
<div class="switch_type_list">
|
||||
<div
|
||||
@click="open(1)"
|
||||
@click.stop="open(1)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Upload</span>
|
||||
</div>
|
||||
<div
|
||||
@click="open(2)"
|
||||
@click.stop="open(2)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Library</span>
|
||||
</div>
|
||||
<div
|
||||
@click="open(3)"
|
||||
@click.stop="open(3)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 3 ? 'select_swtich' : '']"
|
||||
>
|
||||
@@ -95,11 +95,12 @@
|
||||
v-show="openClick == 2"
|
||||
ref="Material"
|
||||
@confirmSelect="confirmSelect"
|
||||
msg="Moodboard"
|
||||
></Material>
|
||||
<Generate
|
||||
v-show="openClick == 3"
|
||||
ref="Generate"
|
||||
:msg="sonData"
|
||||
msg="Moodboard"
|
||||
></Generate>
|
||||
</div>
|
||||
<div v-show="moodboarList.length" class="modal_right">
|
||||
@@ -188,15 +189,9 @@ export default defineComponent({
|
||||
uploadUrl: "",
|
||||
moodTemplateId: "", //模板id
|
||||
store: useStore(),
|
||||
sonData: {
|
||||
cli: "Moodboard",
|
||||
},
|
||||
moodb_:moodb.moodb_,
|
||||
moodboarList:computed(()=>{
|
||||
|
||||
return [...useStore().state.UploadFilesModule.moodboardFiles,
|
||||
...useStore().state.UploadFilesModule.generateFiles,
|
||||
...useStore().state.UploadFilesModule.MaterialFiles]
|
||||
return useStore().state.UploadFilesModule.moodboard
|
||||
}),
|
||||
|
||||
};
|
||||
@@ -235,7 +230,7 @@ export default defineComponent({
|
||||
let fileList = this.fileList.filter(
|
||||
(v: any) => v.status === "done"
|
||||
);
|
||||
let arr = [...this.store.state.UploadFilesModule.generateFiles,...this.store.state.UploadFilesModule.MaterialFiles,...this.store.state.UploadFilesModule.moodboardFiles]
|
||||
let arr = this.store.state.UploadFilesModule.moodboard
|
||||
if(arr.length >= 8){
|
||||
message.error('You can select up to 8 images')
|
||||
}else{
|
||||
@@ -291,7 +286,7 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
deleteFile(item: any) {
|
||||
if(item.type_ == 'generate' || item.type_ == 'material'){
|
||||
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
|
||||
}else{
|
||||
@@ -303,7 +298,11 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
})
|
||||
console.log(this.fileList);
|
||||
|
||||
this.fileList.splice(moodboard,1)
|
||||
console.log(this.fileList);
|
||||
|
||||
this.store.commit("setMoodboardFile", this.fileList);
|
||||
}
|
||||
this.store.commit("clearMoodTemplateId");
|
||||
@@ -328,13 +327,10 @@ export default defineComponent({
|
||||
layout.init()
|
||||
},
|
||||
layout(){
|
||||
let arr = [...this.store.state.UploadFilesModule.generateFiles,...this.store.state.UploadFilesModule.MaterialFiles,...this.store.state.UploadFilesModule.moodboardFiles]
|
||||
let arr = this.store.state.UploadFilesModule.moodboard
|
||||
this.layoutList = arr
|
||||
var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
|
||||
let moodb = this.moodb_[arr.length-1][random]
|
||||
|
||||
console.log(moodb.filter((item,index)=> item == 'w2h1'));
|
||||
|
||||
if( moodb.filter((item,index)=> item == 'w2h1').length != 0 && arr.length > 4){
|
||||
this.flex_direction = true
|
||||
}else{
|
||||
@@ -460,70 +456,7 @@ export default defineComponent({
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.upload_file_item {
|
||||
margin: 0 2rem 2rem 0;
|
||||
display: inline-block;
|
||||
// width: 16.5rem;
|
||||
// height: 16.5rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border: 1px solid #f5f5f5;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
&.upload_component {
|
||||
border: none;
|
||||
}
|
||||
:deep(.ant-upload-picture-card-wrapper) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
:deep(.ant-upload-select-picture-card) {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border: 0.3rem solid #ededed;
|
||||
border-radius: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
.upload_file_item_content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
&:hover .delete_file_block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.upload_img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.delete_file_block {
|
||||
display: none;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
height: 3rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
font-size: 1.6rem;
|
||||
color: #ffffff;
|
||||
line-height: 3rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.upload_img_icon {
|
||||
width: 4.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.upload_max_tip {
|
||||
display: flex;
|
||||
|
||||
@@ -1,25 +1,26 @@
|
||||
<template>
|
||||
<div class="printboard_upload_modal">
|
||||
|
||||
<div class="printboard_left_upload">
|
||||
<div class="left_upload_header">
|
||||
<div class="upload_header_item">
|
||||
<div class="switch_type_list">
|
||||
<div
|
||||
@click="open(1)"
|
||||
@click.stop="open(1)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Upload</span>
|
||||
</div>
|
||||
<div
|
||||
@click="open(2)"
|
||||
@click.stop="open(2)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Library</span>
|
||||
</div>
|
||||
<div
|
||||
@click="open(3)"
|
||||
@click.stop="open(3)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 3 ? 'select_swtich' : '']"
|
||||
>
|
||||
@@ -27,10 +28,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_header_item">
|
||||
<div><span class="select_img_num">{{getPinLength}}</span><span class="select_tip">selected</span></div>
|
||||
<div v-show="fileList.length>1 || (moodBoards.length && fileList.length)" class="recollection_button" @click="generatePrint()">Generate</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="openClick == 1" class="printboard_body">
|
||||
<div class="upload_img_body">
|
||||
@@ -42,7 +39,7 @@
|
||||
</div>
|
||||
<div class="upload_file_item_content" @click="selectImg(file)" v-show="file?.status === 'done'">
|
||||
<img v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
|
||||
<div class="delete_file_block" @click.stop="deleteFile(index,file)">Delete</div>
|
||||
<div class="delete_file_block" @click.stop="deleteFile(file)">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pin_block" v-show="file?.status === 'done'">
|
||||
@@ -67,44 +64,49 @@
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="fileUploadChange"
|
||||
>
|
||||
<div class="upload_tip_block" >
|
||||
<img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
|
||||
<div
|
||||
class="upload_tip_block"
|
||||
>
|
||||
<i class="fi fi-br-upload"></i>
|
||||
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_max_tip">
|
||||
<span class="icon iconfont icon-zhuyi"></span>
|
||||
<span>Maximum 15 images can be uploaded, Maximum 2M per image</span>
|
||||
</div>
|
||||
</div>
|
||||
<Material v-show="openClick == 2" ref="Material" @confirmSelect="confirmSelect"></Material>
|
||||
<Generate v-show="openClick == 3" ref="Generate" :msg="sonData"></Generate>
|
||||
<Generate v-show="openClick == 3" ref="Generate" msg="Printboard" @generateCheckbox="getgenerateCheckbox"></Generate>
|
||||
</div>
|
||||
<div class="generate_print">
|
||||
<div class="generate_print_header">
|
||||
<div class="generate_title">Generate New Print</div>
|
||||
<div class="generate_save_button" @click="savePrint()">Save</div>
|
||||
</div>
|
||||
<div class="generate_print_content_block">
|
||||
<div class="generate_print_content scroll_style">
|
||||
<div class="image_block" v-for="(img, index) in printImgList" :key="index">
|
||||
<div class="image_block_content">
|
||||
<img class="image_body" v-lazy="img.imgUrl" :key="img.imgUrl">
|
||||
<div class="delete_file_block" @click="deleteGenerateFile(index)">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="generate_loading_mark" v-show="generateloading">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
|
||||
<div class="modal_right">
|
||||
<div class="modal_layout">
|
||||
<div class="modal_text">
|
||||
<div>Thumbnail preview of selected moodboard</div>
|
||||
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
|
||||
</div>
|
||||
<div class="modal_img">
|
||||
<div class="modal_img_item" v-for="item,index in printboardList" :key="item" @click="deleteFile(item)">
|
||||
<img v-lazy="item.imgUrl">
|
||||
<div class="checked" >
|
||||
<i class="fi fi-rr-trash"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="openClick == 3" class="modal_accomplish">
|
||||
<div class="input_box">
|
||||
<input class="search_input" :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
|
||||
<div class="generage_btn started_btn" @click="getgenerate">Generate</div>
|
||||
</div>
|
||||
<div class="modal_img">
|
||||
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" @click="generageAdd(item)">
|
||||
<img :src="item.imgUrl">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper> -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@@ -130,11 +132,32 @@ export default defineComponent({
|
||||
printImgList:any = ref([]), //print的印花图片
|
||||
moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboardFiles})
|
||||
let openClick: any = ref(1);
|
||||
let generateCheckbox:any = ref()
|
||||
let generateList:any = ref([
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
|
||||
id_: 1,
|
||||
},
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
|
||||
id_: 2,
|
||||
},
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
|
||||
id_: 3,
|
||||
},
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
|
||||
id_: 4,
|
||||
},
|
||||
])
|
||||
return {
|
||||
fileList,
|
||||
printImgList,
|
||||
moodBoards,
|
||||
openClick
|
||||
openClick,
|
||||
generateCheckbox,
|
||||
generateList,
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
@@ -170,9 +193,10 @@ export default defineComponent({
|
||||
currentFileNum:0, //当前上传的文件数
|
||||
isUpload:false,
|
||||
generateloading:false,
|
||||
sonData: {
|
||||
cli: "Printboard",
|
||||
},
|
||||
captionGeneration:'',
|
||||
printboardList:computed(()=>{
|
||||
return useStore().state.UploadFilesModule.printboard
|
||||
}),
|
||||
|
||||
}
|
||||
},
|
||||
@@ -232,16 +256,24 @@ export default defineComponent({
|
||||
|
||||
},
|
||||
|
||||
deleteFile(index:any,file:any){
|
||||
this.fileList.splice(index, 1)
|
||||
this.store.commit('setPrintboardFile',this.fileList)
|
||||
deleteFile(item:any){
|
||||
// this.fileList.splice(item, 1)
|
||||
// this.store.commit('setPrintboardFile',this.fileList)
|
||||
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
}else{
|
||||
this.fileList = this.store.state.UploadFilesModule.moodboardFiles
|
||||
let moodboard
|
||||
this.store.state.UploadFilesModule.moodboardFiles.forEach((items:any,index:Number)=>{
|
||||
if(items.id_ == item.id_){
|
||||
moodboard = index
|
||||
|
||||
}
|
||||
})
|
||||
this.fileList.splice(moodboard,1)
|
||||
this.store.commit("setSketchboardFile", this.fileList);
|
||||
}
|
||||
},
|
||||
|
||||
deleteGenerateFile(index:any){
|
||||
this.printImgList.splice(index, 1)
|
||||
this.store.commit('setGeneratePrintFile',this.printImgList)
|
||||
},
|
||||
|
||||
randomRange(min:any, max:any, num:any) { // min最小值，max最大值 num排除的值
|
||||
let index = Math.floor(Math.random() * (max - min)) + min;
|
||||
while(index === num){
|
||||
@@ -478,111 +510,163 @@ export default defineComponent({
|
||||
}
|
||||
this.store.commit('setPrintboardFile',this.fileList)
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
getgenerateCheckbox(value:any){
|
||||
this.generateCheckbox = value
|
||||
},
|
||||
getgenerate(){
|
||||
|
||||
let generage:any = this.$refs.Generate
|
||||
let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
|
||||
let data = {
|
||||
generateType:generateType,
|
||||
designType:'',
|
||||
collectionElementId:generage.collectionElementid,
|
||||
level1Type:generage.upload.level1Type,
|
||||
level2Type:generage.level2Type,
|
||||
// text:this.captionGeneration,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
version:1,//为1就是Print
|
||||
}
|
||||
if(generateType == 'image'||generateType == 'text-image'){
|
||||
if(generage.collectionElementid){
|
||||
}else{
|
||||
message.error(
|
||||
"Please select a picture"
|
||||
);
|
||||
return
|
||||
}
|
||||
}else if(generateType == 'text'){
|
||||
// this.beforeUpload(false)
|
||||
// if(this.captionGeneration){
|
||||
// }else{
|
||||
// message.error(
|
||||
// "Please enter content"
|
||||
// );
|
||||
// return
|
||||
// }
|
||||
}
|
||||
if(generateType == 'text'){
|
||||
data.collectionElementId = ''
|
||||
data.level2Type = ''
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
|
||||
(rv) => {
|
||||
// if(rv){
|
||||
|
||||
// }
|
||||
console.log(rv);
|
||||
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
},
|
||||
generageAdd(item:any){
|
||||
item.type_ = {
|
||||
type1: "generate",
|
||||
type2: 'Printboard',
|
||||
},
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.printboard_upload_modal{
|
||||
padding: 1rem 1rem 1.8rem 1rem;
|
||||
height: 100%;
|
||||
background: #F2F3FB;
|
||||
// padding: 1rem 1rem 1.8rem 1rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.printboard_left_upload{
|
||||
width: calc(100% - 39.8rem);
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
padding: 0.5rem 2.2rem 2rem 2.6rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.left_upload_header{
|
||||
// width: calc(100% - 39.8rem);
|
||||
// height: 100%;
|
||||
// background: #fff;
|
||||
// padding: 0.5rem 2.2rem 2rem 2.6rem;
|
||||
// box-sizing: border-box;
|
||||
padding-top: 4rem;
|
||||
width: 47%;
|
||||
.switch_type_list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.upload_header_item{
|
||||
.switch_type_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.switch_type_list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.switch_type_item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 2rem;
|
||||
height: 4rem;
|
||||
background: #fff;
|
||||
line-height: 4rem;
|
||||
font-size: 1.6rem;
|
||||
margin-right: 2.2rem;
|
||||
color: #5B5E69;
|
||||
cursor: pointer;
|
||||
|
||||
&.select_swtich{
|
||||
color: #343579;
|
||||
}
|
||||
|
||||
.switch_icon{
|
||||
font-size: 1.8rem;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
// padding: 0 2rem;
|
||||
height: 4rem;
|
||||
background: #fff;
|
||||
border-radius: 0.8rem;
|
||||
line-height: 4rem;
|
||||
font-size: 1.6rem;
|
||||
// margin-right: 2.2rem;
|
||||
margin-right: 8rem;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
transform-origin: left;
|
||||
transform: scale(1);
|
||||
transition: 0.3s all;
|
||||
&.switch_type_item::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
background: #000;
|
||||
height: 3px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 6px;
|
||||
width: 0px;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
&.select_swtich {
|
||||
color: #000;
|
||||
// font-weight: 900;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
&.select_swtich::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select_img_num{
|
||||
font-size: 2rem;
|
||||
color: #030303;
|
||||
font-weight: bold;
|
||||
.switch_icon {
|
||||
font-size: 1.8rem;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
|
||||
.select_tip{
|
||||
font-size: 1.6rem;
|
||||
margin-left: 0.9rem;
|
||||
color: #B7B7B7;
|
||||
}
|
||||
|
||||
.recollection_button{
|
||||
padding: 0 1rem;
|
||||
height: 3.2rem;
|
||||
line-height: 3.2rem;
|
||||
background: #E6E6F6;
|
||||
font-size: 1.2rem;
|
||||
color: #343579;
|
||||
margin-left: 0.9rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.printboard_body{
|
||||
margin-top: 1rem;
|
||||
height: calc(100% - 5rem);
|
||||
|
||||
padding-top: 2.5rem;
|
||||
height: 30rem;
|
||||
overflow-x: hidden;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
&.printboard_body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.upload_img_body{
|
||||
height: calc(100% - 3rem);
|
||||
overflow-y: auto;
|
||||
margin-bottom: 1rem;
|
||||
&.upload_img_body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.upload_file_item{
|
||||
margin: 0 2rem 2rem 0;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
.upload_file_img_block{
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
border: 1px solid #F5F5F5;
|
||||
}
|
||||
margin: 0 2rem 4rem 0;
|
||||
// margin: 0 2rem 2rem 0;
|
||||
display: inline-block;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border: 1px solid #f5f5f5;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pin_block{
|
||||
text-align: center;
|
||||
@@ -591,168 +675,241 @@ export default defineComponent({
|
||||
|
||||
&.upload_component{
|
||||
border: none;
|
||||
:deep(.ant-upload-picture-card-wrapper) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
:deep(.ant-upload-select-picture-card) {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border: 0.3rem solid #ededed;
|
||||
border-radius: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.checked{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.modal_img_item:hover .checked{
|
||||
display: flex;
|
||||
}
|
||||
.upload_file_item_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.upload_img{
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.upload_file_item_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
&:hover .delete_file_block{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.upload_img{
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.delete_file_block{
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
background: rgba(0,0,0,0.2);
|
||||
.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: #FFFFFF;
|
||||
line-height: 4rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .delete_file_block{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.operate_file_block{
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
font-size: 1.6rem;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
.select_img_type{
|
||||
height: 100%;
|
||||
line-height: 3rem;
|
||||
text-align: center;
|
||||
background: rgba(0,0,0,0.6);
|
||||
position: relative;
|
||||
|
||||
.select_category{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon-xiala{
|
||||
margin-left: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icon_rotate{
|
||||
-moz-transform:rotate(180deg);
|
||||
-webkit-transform:rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
animation-direction: 0.5s;
|
||||
}
|
||||
|
||||
.category_list{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
// top: 3.1rem;
|
||||
margin-top: .2rem;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
border: 1px solid #343579;
|
||||
border-radius: 0.8rem;
|
||||
// overflow: hidden;
|
||||
z-index: 2;
|
||||
height: 9rem;
|
||||
overflow-x: hidden;
|
||||
&.category_list::-webkit-scrollbar{display: none;}
|
||||
|
||||
.category_item{
|
||||
text-align: left;
|
||||
font-size: 1.4rem;
|
||||
padding: 1rem 1.9rem;
|
||||
line-height: 1.6rem;
|
||||
|
||||
&.select_category_item{
|
||||
background: linear-gradient(160deg, #AC2A3B, #292161);
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background: linear-gradient(160deg, #AC2A3B, #292161);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.upload_img_icon{
|
||||
width: 4.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.upload_max_tip{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.4rem;
|
||||
color: #030303;
|
||||
|
||||
.icon-zhuyi{
|
||||
font-size: 1.6rem;
|
||||
margin-right: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.generate_print{
|
||||
width: 38.4rem;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
|
||||
.generate_print_header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1rem 2.5rem 2.5rem;
|
||||
|
||||
.generate_title{
|
||||
font-size: 1.6rem;
|
||||
font-weight: bold;
|
||||
color: #030303;
|
||||
}
|
||||
.generate_save_button{
|
||||
background: #E6E6F6;
|
||||
padding: 0.1rem;
|
||||
padding: 0 2.7rem;
|
||||
font-size: 1.4rem;
|
||||
height: 3.2rem;
|
||||
line-height: 3.2rem;
|
||||
cursor: pointer;
|
||||
color: #343579;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.generate_print_content_block{
|
||||
height: calc(100% - 6.7rem);
|
||||
position: relative;
|
||||
|
||||
.generate_loading_mark{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0,0,0,0.4);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.generate_print_content{
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
padding:0 0.8rem;
|
||||
position: relative;
|
||||
|
||||
|
||||
|
||||
.image_block{
|
||||
display: inline-block;
|
||||
margin-right: 1.6rem;
|
||||
margin-bottom: 1.6rem;
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
border: 0.1rem solid #F5F5F5;
|
||||
vertical-align: top;
|
||||
|
||||
&:nth-child(2n){
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.image_block_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
&:hover .delete_file_block{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.delete_file_block{
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
background: rgba(0,0,0,0.2);
|
||||
font-size: 1.6rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 4rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.image_body{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.modal_right{
|
||||
flex: 1;
|
||||
margin-left: 3rem;
|
||||
.modal_layout,.modal_accomplish{
|
||||
.modal_text{
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.modal_layout{
|
||||
.modal_img{
|
||||
width: 40rem;
|
||||
height: 5rem;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
&.modal_img::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.modal_img_item{
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin: 0 1rem 1rem 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.checked{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.modal_img_item:hover .checked{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.modal_accomplish{
|
||||
// margin-top: 2rem;
|
||||
height: 30rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.modal_text{
|
||||
padding-top: 2rem;
|
||||
padding-block: 2rem;
|
||||
}
|
||||
.input_box{
|
||||
input{
|
||||
&.forbidden{
|
||||
cursor:not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal_img{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
.modal_imgItem{
|
||||
margin: 0 2rem 2rem 0;
|
||||
display: inline-block;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border: 1px solid #f5f5f5;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
img{
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&.active{
|
||||
opacity: 0.5;
|
||||
// border: 2px solid;
|
||||
border-radius: 1rem;
|
||||
img {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,306 +1,600 @@
|
||||
<template>
|
||||
<div class="sketchboard_upload_modal">
|
||||
<div class="switch_type_list">
|
||||
<div class="switch_type_item select_swtich">
|
||||
<span>Upload</span>
|
||||
<div class="modal_left">
|
||||
<div class="switch_type_list">
|
||||
<div
|
||||
@click.stop="open(1)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Upload</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(2)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Library</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(3)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 3 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Generate</span>
|
||||
</div>
|
||||
</div>
|
||||
<div @click="openLibrary()" class="switch_type_item">
|
||||
<span>My Library</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sketchboard_body">
|
||||
<div class="upload_img_body scroll_style">
|
||||
<div class="upload_item">
|
||||
<div class="upload_file_item" v-for="(file,index) in fileList" :key="file">
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'uploading'">
|
||||
<a-spin :indicator="indicator" tip="Uploading..."/>
|
||||
</div>
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'done'">
|
||||
<img :src="file?.imgUrl" class="upload_img">
|
||||
<div class="operate_file_block" >
|
||||
<!-- <div class="delete_file_block" @click="deleteFile(index)">Delete</div> -->
|
||||
<div class="select_img_type">
|
||||
<div class="select_category" @click.stop="showFileCategory(file)">
|
||||
{{getSketchLabel(file.category)}}
|
||||
<div :class="['icon','iconfont', 'icon-xiala', file.categoryShow?'icon_rotate':'']"></div>
|
||||
</div>
|
||||
<div class="category_list" v-show="file.categoryShow">
|
||||
<div :class="['category_item', file.category == cate.value?'select_category_item':'']" v-for="(cate,index) in sketchCatecoryList" :key="index" @click="selectFileCategory(file,cate)">{{cate.label}}</div>
|
||||
<div v-show="openClick == 1" class="sketchboard_body">
|
||||
<div class="upload_img_body scroll_style">
|
||||
<div class="upload_item">
|
||||
<div
|
||||
class="upload_file_item"
|
||||
v-for="(file, index) in fileList"
|
||||
:key="file"
|
||||
>
|
||||
<div
|
||||
class="upload_file_item_content"
|
||||
v-show="file?.status === 'uploading'"
|
||||
>
|
||||
<a-spin
|
||||
:indicator="indicator"
|
||||
tip="Uploading..."
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="upload_file_item_content"
|
||||
v-show="file?.status === 'done'"
|
||||
>
|
||||
<img :src="file?.imgUrl" class="upload_img" />
|
||||
<div class="operate_file_block">
|
||||
<div class="select_img_type">
|
||||
<div
|
||||
class="select_category"
|
||||
@click.stop="showFileCategory(file)"
|
||||
>
|
||||
{{ getSketchLabel(file.category) }}
|
||||
<div
|
||||
:class="[
|
||||
'icon',
|
||||
'iconfont',
|
||||
'icon-xiala',
|
||||
file.categoryShow
|
||||
? 'icon_rotate'
|
||||
: '',
|
||||
]"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="category_list"
|
||||
v-show="file.categoryShow"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'category_item',
|
||||
file.category == cate.value
|
||||
? 'select_category_item'
|
||||
: '',
|
||||
]"
|
||||
v-for="(
|
||||
cate, index
|
||||
) in sketchCatecoryList"
|
||||
:key="index"
|
||||
@click="
|
||||
selectFileCategory(
|
||||
file,
|
||||
cate
|
||||
)
|
||||
"
|
||||
>
|
||||
{{ cate.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="delete_file_block"
|
||||
@click="deleteFile(file)"
|
||||
>
|
||||
<span
|
||||
class="icon iconfont icon-shanchu"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="delete_file_block" @click="deleteFile(index)">
|
||||
<span class="icon iconfont icon-shanchu"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pin_block" v-show="file?.status === 'done'">
|
||||
<a-checkbox v-model:checked="file.pin">PIN</a-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_file_item upload_component" v-show="fileList.length < 15">
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:data="{
|
||||
...upload
|
||||
}"
|
||||
:before-upload="beforeUpload"
|
||||
:headers="{Authorization:token}"
|
||||
v-model:file-list="fileList"
|
||||
multiple
|
||||
:maxCount="15"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file)=>fileUploadChange(file)"
|
||||
<div
|
||||
class="pin_block"
|
||||
v-show="file?.status === 'done'"
|
||||
>
|
||||
<div class="upload_tip_block" v-show="fileList.length < 15">
|
||||
<img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
|
||||
<a-checkbox v-model:checked="file.pin"
|
||||
>PIN</a-checkbox
|
||||
>
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
<div
|
||||
class="upload_file_item upload_component"
|
||||
v-show="fileList.length < 15"
|
||||
>
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:data="{
|
||||
...upload,
|
||||
}"
|
||||
:before-upload="beforeUpload"
|
||||
:headers="{ Authorization: token }"
|
||||
v-model:file-list="fileList"
|
||||
multiple
|
||||
:maxCount="15"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file) => fileUploadChange(file)"
|
||||
>
|
||||
<div
|
||||
class="upload_tip_block"
|
||||
>
|
||||
<i class="fi fi-br-upload"></i>
|
||||
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_max_tip">
|
||||
<span class="icon iconfont icon-zhuyi"></span>
|
||||
<span>Maximum 15 images can be uploaded, Maximum 2M per image</span>
|
||||
</div>
|
||||
|
||||
<Material
|
||||
v-show="openClick == 2"
|
||||
ref="Material"
|
||||
msg="Sketchboard"
|
||||
@confirmSelect="confirmSelect"
|
||||
></Material>
|
||||
<Generate
|
||||
v-show="openClick == 3"
|
||||
ref="Generate"
|
||||
msg="Sketchboard"
|
||||
@generateCheckbox="getgenerateCheckbox"
|
||||
></Generate>
|
||||
</div>
|
||||
|
||||
<Material ref="Material" @confirmSelect="confirmSelect"></Material>
|
||||
|
||||
|
||||
<div class="modal_right">
|
||||
<div class="modal_layout">
|
||||
<div class="modal_text">
|
||||
<div>Thumbnail preview of selected moodboard</div>
|
||||
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
|
||||
</div>
|
||||
<div class="modal_img">
|
||||
<div class="modal_img_item" v-for="item,index in sketchboardList" :key="item" @click="deleteFile(item)">
|
||||
<img v-lazy="item.imgUrl">
|
||||
<div class="checked" >
|
||||
<i class="fi fi-rr-trash"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="openClick == 3" class="modal_accomplish">
|
||||
<div class="input_box">
|
||||
<input class="search_input" :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
|
||||
<div class="generage_btn started_btn" @click="getgenerate">Generate</div>
|
||||
</div>
|
||||
<div class="modal_img">
|
||||
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" @click="generageAdd(item)">
|
||||
<img :src="item.imgUrl">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout> -->
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, h,ref } from 'vue'
|
||||
import { LoadingOutlined } from '@ant-design/icons-vue';
|
||||
import {getCookie} from '@/tool/cookie'
|
||||
import {getUploadUrl} from '@/tool/util'
|
||||
import {useStore} from 'vuex'
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
import Material from '@/component/HomePage/Material.vue'
|
||||
import { defineComponent, h, ref ,computed } from "vue";
|
||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import { getUploadUrl } from "@/tool/util";
|
||||
import GO from "@/tool/GO";
|
||||
import { useStore } from "vuex";
|
||||
import { message, Upload } from "ant-design-vue";
|
||||
import Material from "@/component/HomePage/Material.vue";
|
||||
import Generate from "@/component/HomePage/Generate.vue";
|
||||
import { Https } from "@/tool/https";
|
||||
export default defineComponent({
|
||||
components:{Material},
|
||||
setup(){
|
||||
let fileList:any = ref([])
|
||||
components: { Material, Generate },
|
||||
setup() {
|
||||
let fileList: any = ref([]);
|
||||
let openClick: any = ref(1);
|
||||
let generateList:any = ref([
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
|
||||
id_: 1,
|
||||
},
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
|
||||
id_: 2,
|
||||
},
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
|
||||
id_: 3,
|
||||
},
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
|
||||
id_: 4,
|
||||
},
|
||||
])
|
||||
let generateCheckbox:any = ref()
|
||||
return {
|
||||
fileList
|
||||
}
|
||||
fileList,
|
||||
openClick,
|
||||
generateList,
|
||||
generateCheckbox
|
||||
};
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
swtich_type:'upload',
|
||||
indicator : h(LoadingOutlined, {
|
||||
data() {
|
||||
return {
|
||||
swtich_type: "upload",
|
||||
indicator: h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: '2.4rem',
|
||||
fontSize: "2.4rem",
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
upload:{
|
||||
isPin:0,
|
||||
level1Type:'Sketchboard',
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
upload: {
|
||||
isPin: 0,
|
||||
level1Type: "Sketchboard",
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
token:'',
|
||||
uploadUrl:'',
|
||||
store:useStore(),
|
||||
sketchCatecoryList:[
|
||||
token: "",
|
||||
uploadUrl: "",
|
||||
store: useStore(),
|
||||
sketchCatecoryList: [
|
||||
{
|
||||
value: 'Outwear',
|
||||
value: "Outwear",
|
||||
label: "Outwear",
|
||||
},
|
||||
{
|
||||
value: 'Blouse',
|
||||
value: "Blouse",
|
||||
label: "Blouse",
|
||||
},
|
||||
{
|
||||
value: 'Dress',
|
||||
value: "Dress",
|
||||
label: "Dress",
|
||||
},
|
||||
{
|
||||
value: 'Trousers',
|
||||
value: "Trousers",
|
||||
label: "Trousers",
|
||||
},
|
||||
{
|
||||
value: 'Skirt',
|
||||
value: "Skirt",
|
||||
label: "Skirt",
|
||||
},
|
||||
],
|
||||
}
|
||||
captionGeneration:'',
|
||||
sketchboardList:computed(()=>{
|
||||
return useStore().state.UploadFilesModule.sketchboard
|
||||
}),
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
getSketchLabel(value){
|
||||
return (value:any)=>{
|
||||
let lable = '';
|
||||
for(let item of this.sketchCatecoryList){
|
||||
if(item.value === value){
|
||||
lable = item.label
|
||||
break
|
||||
computed: {
|
||||
getSketchLabel(value) {
|
||||
return (value: any) => {
|
||||
let lable = "";
|
||||
for (let item of this.sketchCatecoryList) {
|
||||
if (item.value === value) {
|
||||
lable = item.label;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return lable
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.token = getCookie('token') || ''
|
||||
this.uploadUrl = getUploadUrl()
|
||||
},
|
||||
methods:{
|
||||
openLibrary(){
|
||||
let material:any = this.$refs.Material
|
||||
material.init('Sketchboard')
|
||||
return lable;
|
||||
};
|
||||
},
|
||||
fileUploadChange(data:any){
|
||||
let file = data.file
|
||||
if(file.status === 'done'){
|
||||
let res = JSON.parse(file.xhr.response)
|
||||
file.imgUrl = res.data.url
|
||||
file.resData = res.data
|
||||
file.pin = false
|
||||
file.category = 'Outwear'
|
||||
file.categoryShow = false
|
||||
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
|
||||
this.store.commit('setSketchboardFile',fileList)
|
||||
}else if(file.status === 'error'){
|
||||
let index = -1
|
||||
this.fileList.forEach((ele:any,index1:any) => {
|
||||
if(file.uid === ele.uid){
|
||||
index = index1
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.token = getCookie("token") || "";
|
||||
this.uploadUrl = getUploadUrl();
|
||||
},
|
||||
methods: {
|
||||
open(num: Number) {
|
||||
this.openClick = num;
|
||||
if (num == 2) {
|
||||
let material: any = this.$refs.Material;
|
||||
material.init("Moodboard");
|
||||
} else if (num == 3) {
|
||||
// let Generate:any = this.$refs.Generate
|
||||
// Generate.init('generate')
|
||||
}
|
||||
},
|
||||
getgenerateCheckbox(value:any){
|
||||
this.generateCheckbox = value
|
||||
},
|
||||
fileUploadChange(data: any) {
|
||||
let file = data.file;
|
||||
if (file.status === "done") {
|
||||
let res = JSON.parse(file.xhr.response);
|
||||
file.imgUrl = res.data.url;
|
||||
file.resData = res.data;
|
||||
file.pin = false;
|
||||
file.category = "Outwear";
|
||||
file.categoryShow = false;
|
||||
file.id_ = GO.id++
|
||||
file.type_ = 'upload';
|
||||
let fileList = this.fileList.filter(
|
||||
(v: any) => v.status === "done"
|
||||
);
|
||||
this.store.commit("setSketchboardFile", fileList);
|
||||
} else if (file.status === "error") {
|
||||
let index = -1;
|
||||
this.fileList.forEach((ele: any, index1: any) => {
|
||||
if (file.uid === ele.uid) {
|
||||
index = index1;
|
||||
}
|
||||
});
|
||||
if(index > -1){
|
||||
this.fileList.splice(index, 1)
|
||||
if (index > -1) {
|
||||
this.fileList.splice(index, 1);
|
||||
}
|
||||
message.error(file.name + 'upload failed')
|
||||
message.error(file.name + "upload failed");
|
||||
}
|
||||
},
|
||||
|
||||
beforeUpload(file:any){
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
beforeUpload(file: any) {
|
||||
const isJpgOrPng =
|
||||
file.type === "image/jpeg" ||
|
||||
file.type === "image/png" ||
|
||||
file.type === "image/jpg" ||
|
||||
file.type === "image/bmp";
|
||||
if (!isJpgOrPng) {
|
||||
message.error('You can only upload Image file!');
|
||||
message.error("You can only upload Image file!");
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must smaller than 5MB!');
|
||||
message.error("Image must smaller than 5MB!");
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
|
||||
showFileCategory(file:any){
|
||||
file.categoryShow = true
|
||||
document.addEventListener('click', this.hiddenFileCategory)
|
||||
showFileCategory(file: any) {
|
||||
file.categoryShow = true;
|
||||
document.addEventListener("click", this.hiddenFileCategory);
|
||||
},
|
||||
|
||||
selectFileCategory(file:any,cate:any){
|
||||
file.category = cate.value
|
||||
this.store.commit('setSketchboardFile',this.fileList)
|
||||
selectFileCategory(file: any, cate: any) {
|
||||
file.category = cate.value;
|
||||
this.store.commit("setSketchboardFile", this.fileList);
|
||||
},
|
||||
|
||||
hiddenFileCategory(){
|
||||
for(let item of this.fileList){
|
||||
item.categoryShow = false
|
||||
hiddenFileCategory() {
|
||||
for (let item of this.fileList) {
|
||||
item.categoryShow = false;
|
||||
}
|
||||
document.removeEventListener('click', this.hiddenFileCategory)
|
||||
document.removeEventListener("click", this.hiddenFileCategory);
|
||||
},
|
||||
|
||||
deleteFile(index:any){
|
||||
this.fileList.splice(index, 1)
|
||||
this.store.commit('setSketchboardFile',this.fileList)
|
||||
deleteFile(item: any) {
|
||||
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
}else{
|
||||
this.fileList = this.store.state.UploadFilesModule.moodboardFiles
|
||||
let moodboard
|
||||
this.store.state.UploadFilesModule.moodboardFiles.forEach((items:any,index:Number)=>{
|
||||
if(items.id_ == item.id_){
|
||||
moodboard = index
|
||||
|
||||
}
|
||||
})
|
||||
this.fileList.splice(moodboard,1)
|
||||
this.store.commit("setSketchboardFile", this.fileList);
|
||||
}
|
||||
},
|
||||
|
||||
recollection(){
|
||||
this.fileList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.skecthboardFiles))
|
||||
this.store.commit('setSketchboardFile',this.fileList)
|
||||
recollection() {
|
||||
this.fileList = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.store.state.UploadFilesModule.allBoardData
|
||||
.skecthboardFiles
|
||||
)
|
||||
);
|
||||
this.store.commit("setSketchboardFile", this.fileList);
|
||||
},
|
||||
|
||||
confirmSelect(event:any){
|
||||
for(let item of event){
|
||||
confirmSelect(event: any) {
|
||||
for (let item of event) {
|
||||
let data = {
|
||||
imgUrl:item.url,
|
||||
resData:item,
|
||||
pin:false,
|
||||
status:'done',
|
||||
category:item.level2Type || 'Outwear',
|
||||
categoryShow:false,
|
||||
imgUrl: item.url,
|
||||
resData: item,
|
||||
pin: false,
|
||||
status: "done",
|
||||
category: item.level2Type || "Outwear",
|
||||
categoryShow: false,
|
||||
};
|
||||
if (this.fileList.length == 15) {
|
||||
message.error(
|
||||
"Maximum number of allowable file uploads has been exceeded"
|
||||
);
|
||||
break;
|
||||
}
|
||||
if(this.fileList.length == 15){
|
||||
message.error('Maximum number of allowable file uploads has been exceeded')
|
||||
break
|
||||
}
|
||||
this.fileList.push(data)
|
||||
this.fileList.push(data);
|
||||
}
|
||||
this.store.commit('setSketchboardFile',this.fileList)
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
this.store.commit("setSketchboardFile", this.fileList);
|
||||
},
|
||||
//发送请求生成图片
|
||||
getgenerate(){
|
||||
|
||||
let generage:any = this.$refs.Generate
|
||||
let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
|
||||
let data = {
|
||||
generateType:generateType,
|
||||
designType:'',
|
||||
collectionElementId:generage.collectionElementid,
|
||||
level1Type:generage.upload.level1Type,
|
||||
level2Type:generage.level2Type,
|
||||
text:this.captionGeneration,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
version:0,//为1就是Print
|
||||
}
|
||||
if(generateType == 'image'||generateType == 'text-image'){
|
||||
if(generage.collectionElementid){
|
||||
}else{
|
||||
message.error(
|
||||
"Please select a picture"
|
||||
);
|
||||
return
|
||||
}
|
||||
}else if(generateType == 'text'){
|
||||
// this.beforeUpload(false)
|
||||
if(this.captionGeneration){
|
||||
}else{
|
||||
message.error(
|
||||
"Please enter content"
|
||||
);
|
||||
return
|
||||
}
|
||||
}
|
||||
if(generateType == 'text'){
|
||||
data.collectionElementId = ''
|
||||
data.level2Type = ''
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
|
||||
(rv) => {
|
||||
// if(rv){
|
||||
|
||||
// }
|
||||
console.log(rv);
|
||||
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
},
|
||||
generageAdd(item:any){
|
||||
item.type_ = {
|
||||
type1: "generate",
|
||||
type2: 'Sketchboard',
|
||||
},
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.sketchboard_upload_modal{
|
||||
padding: 1.5rem 2.6rem 4rem;
|
||||
height: 100%;
|
||||
|
||||
.switch_type_list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.switch_type_item{
|
||||
.sketchboard_upload_modal {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.modal_left {
|
||||
padding-top: 4rem;
|
||||
width: 47%;
|
||||
.switch_type_list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 2rem;
|
||||
height: 4rem;
|
||||
background: #fff;
|
||||
border-radius: 0.8rem;
|
||||
line-height: 4rem;
|
||||
font-size: 1.6rem;
|
||||
margin-right: 2.2rem;
|
||||
color: #5B5E69;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
&.select_swtich{
|
||||
color: #343579;
|
||||
}
|
||||
.switch_type_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// padding: 0 2rem;
|
||||
height: 4rem;
|
||||
background: #fff;
|
||||
border-radius: 0.8rem;
|
||||
line-height: 4rem;
|
||||
font-size: 1.6rem;
|
||||
// margin-right: 2.2rem;
|
||||
margin-right: 8rem;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
transform-origin: left;
|
||||
transform: scale(1);
|
||||
transition: 0.3s all;
|
||||
&.switch_type_item::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
background: #000;
|
||||
height: 3px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 6px;
|
||||
width: 0px;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
&.select_swtich {
|
||||
color: #000;
|
||||
// font-weight: 900;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
&.select_swtich::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.switch_icon{
|
||||
font-size: 1.8rem;
|
||||
margin-right: 0.8rem;
|
||||
.switch_icon {
|
||||
font-size: 1.8rem;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sketchboard_body{
|
||||
margin-top: 1rem;
|
||||
.sketchboard_body {
|
||||
height: calc(100% - 5rem);
|
||||
|
||||
.upload_img_body{
|
||||
padding-top: 2.5rem;
|
||||
height: 30rem;
|
||||
overflow-x: hidden;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
&.moodboard_body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.upload_img_body {
|
||||
height: calc(100% - 3rem);
|
||||
overflow-y: auto;
|
||||
margin-bottom: 1rem;
|
||||
&.upload_img_body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.upload_file_item{
|
||||
margin: 0 2rem 2rem 0;
|
||||
display: inline-block;
|
||||
width: 16.5rem;
|
||||
border: 1px solid #F5F5F5;
|
||||
vertical-align: top;
|
||||
|
||||
&.upload_component{
|
||||
border: none;
|
||||
}
|
||||
|
||||
.upload_file_item_content{
|
||||
|
||||
.upload_file_item{
|
||||
margin: 0 2rem 4rem 0;
|
||||
// margin: 0 2rem 2rem 0;
|
||||
display: inline-block;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border: 1px solid #f5f5f5;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&.upload_component {
|
||||
border: none;
|
||||
}
|
||||
:deep(.ant-upload-picture-card-wrapper) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
:deep(.ant-upload-select-picture-card) {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border: 0.3rem solid #ededed;
|
||||
border-radius: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
.checked{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.modal_img_item:hover .checked{
|
||||
display: flex;
|
||||
}
|
||||
.upload_file_item_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
height: 16.5rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.upload_img{
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
@@ -318,7 +612,7 @@ export default defineComponent({
|
||||
right: 0.9rem;
|
||||
text-align: center;
|
||||
line-height: 3.2rem;
|
||||
|
||||
left: auto;
|
||||
.icon-shanchu{
|
||||
font-size: 1.6rem;
|
||||
color: #fff;
|
||||
@@ -331,7 +625,7 @@ export default defineComponent({
|
||||
|
||||
.operate_file_block{
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
height: 3rem;
|
||||
font-size: 1.6rem;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
@@ -340,7 +634,7 @@ export default defineComponent({
|
||||
|
||||
.select_img_type{
|
||||
height: 100%;
|
||||
line-height: 4rem;
|
||||
line-height: 3rem;
|
||||
text-align: center;
|
||||
background: rgba(0,0,0,0.6);
|
||||
position: relative;
|
||||
@@ -363,17 +657,21 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.category_list{
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 4.1rem;
|
||||
// top: 3.1rem;
|
||||
margin-top: .2rem;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
border: 1px solid #343579;
|
||||
border-radius: 0.8rem;
|
||||
overflow: hidden;
|
||||
// overflow: hidden;
|
||||
z-index: 2;
|
||||
height: 9rem;
|
||||
overflow-x: hidden;
|
||||
&.category_list::-webkit-scrollbar{display: none;}
|
||||
|
||||
.category_item{
|
||||
text-align: left;
|
||||
@@ -393,28 +691,110 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
.pin_block{
|
||||
text-align: center;
|
||||
margin-top:1.6rem;
|
||||
}
|
||||
|
||||
.upload_img_icon{
|
||||
width: 4.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.upload_max_tip{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.4rem;
|
||||
color: #030303;
|
||||
|
||||
.icon-zhuyi{
|
||||
font-size: 1.6rem;
|
||||
margin-right: 0.7rem;
|
||||
}
|
||||
}
|
||||
.pin_block{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.modal_right{
|
||||
flex: 1;
|
||||
margin-left: 3rem;
|
||||
.modal_layout,.modal_accomplish{
|
||||
.modal_text{
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.modal_layout{
|
||||
.modal_img{
|
||||
width: 40rem;
|
||||
height: 5rem;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
&.modal_img::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.modal_img_item{
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin: 0 1rem 1rem 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.checked{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.modal_img_item:hover .checked{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.modal_accomplish{
|
||||
// margin-top: 2rem;
|
||||
height: 30rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.modal_text{
|
||||
padding-top: 2rem;
|
||||
padding-block: 2rem;
|
||||
}
|
||||
.input_box{
|
||||
input{
|
||||
&.forbidden{
|
||||
cursor:not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal_img{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
.modal_imgItem{
|
||||
margin: 0 2rem 2rem 0;
|
||||
display: inline-block;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border: 1px solid #f5f5f5;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
img{
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&.active{
|
||||
opacity: 0.5;
|
||||
// border: 2px solid;
|
||||
border-radius: 1rem;
|
||||
img {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -236,12 +236,14 @@ export default defineComponent({
|
||||
|
||||
.collection_modal_body{
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.collection_modal{
|
||||
max-width: 1200px ;
|
||||
// max-width: 1200px ;
|
||||
max-width: 1150px ;
|
||||
.ant-modal-content{
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
@@ -251,7 +253,8 @@ export default defineComponent({
|
||||
}
|
||||
.ant-modal-body{
|
||||
padding: 8rem 5rem !important;
|
||||
height: calc(60vh - 6.4rem);
|
||||
// height: calc(65vh - 6.4rem);
|
||||
height: 60rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,11 +4,12 @@
|
||||
class="layout_modal"
|
||||
v-model:visible="layout"
|
||||
:footer="null"
|
||||
width="47rem"
|
||||
width="80%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="false"
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<div class="layout_content">
|
||||
<div class="layout_header">
|
||||
@@ -19,14 +20,28 @@
|
||||
></div>
|
||||
</div>
|
||||
<div class="layout_nav">
|
||||
<div v-for="item,index in layoutList" :key="item">
|
||||
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @click="setpitch(item)">
|
||||
<img :src="item.imgUrl">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout_centent" :class="{active:flex_direction}">
|
||||
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem">
|
||||
<img :src="item.imgUrl">
|
||||
<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
|
||||
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @click="setpitch(item)" ref="content" >
|
||||
<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false">
|
||||
<ul v-show="item.setPitch" class="layout_btn" >
|
||||
<li class="layout_btn_top" v-compile.stop="'top'"></li>
|
||||
<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
|
||||
<li class="layout_btn_left" v-compile.stop="'left'"></li>
|
||||
<li class="layout_btn_right" v-compile.stop="'right'"></li>
|
||||
<li class="layout_rotote" v-rotote.stop></li>
|
||||
<li class="layout_translate" v-translate.stop></li>
|
||||
<!-- <li class="layout_translate" v-translate.stop></li> -->
|
||||
<li class="layout_angle_tr" v-angle.stop = "'top'"></li>
|
||||
<li class="layout_angle_tl" v-angle.stop = "'right'"></li>
|
||||
<li class="layout_angle_br" v-angle.stop = "'bottom'"></li>
|
||||
<li class="layout_angle_bl" v-angle.stop = "'left'"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <img v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" :src="item.imgUrl"> -->
|
||||
<!-- <draggable
|
||||
v-model="layoutList"
|
||||
group="people"
|
||||
@@ -48,12 +63,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout_right">
|
||||
<!-- <div class="layout_right">
|
||||
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
|
||||
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div
|
||||
class="button_second submit_button"
|
||||
@click="submitTemplate()"
|
||||
@@ -70,8 +85,10 @@
|
||||
import { defineComponent, h, ref ,computed,reactive, toRefs} from "vue";
|
||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { useStore } from "vuex";
|
||||
import GO from "@/tool/GO";
|
||||
import moodb from "@/tool/moodb";
|
||||
import draggable from 'vuedraggable'
|
||||
import domTurnImg from '@/tool/domTurnImg'
|
||||
export default defineComponent({
|
||||
props:["moodb_className",'flex_direction'],
|
||||
components: {
|
||||
@@ -83,12 +100,16 @@ export default defineComponent({
|
||||
let templateFileList: any = ref([]);
|
||||
let openClick: any = ref(1);
|
||||
let drag = false;
|
||||
let layoutList:any = ref([])
|
||||
const content = ref<HTMLElement | null>(null);
|
||||
return {
|
||||
fileList,
|
||||
layout,
|
||||
templateFileList,
|
||||
openClick,
|
||||
drag,
|
||||
layoutList,
|
||||
content
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -99,31 +120,18 @@ export default defineComponent({
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
moodTemplateId: "", //模板id
|
||||
// moodTemplateId: "", //模板id
|
||||
store: useStore(),
|
||||
|
||||
layoutList:computed(()=>{
|
||||
return [...(useStore().state.UploadFilesModule.moodboardFiles),
|
||||
...(useStore().state.UploadFilesModule.generateFiles),
|
||||
...(useStore().state.UploadFilesModule.MaterialFiles)]
|
||||
}),
|
||||
layoutListaa:[
|
||||
{
|
||||
id_:1,
|
||||
name:'2',
|
||||
},
|
||||
{
|
||||
id_:2,
|
||||
name:'2',
|
||||
},
|
||||
{
|
||||
id_:3,
|
||||
name:'2',
|
||||
},
|
||||
],
|
||||
// layoutList:computed(()=>{
|
||||
// return [...(useStore().state.UploadFilesModule.moodboardFiles),
|
||||
// ...(useStore().state.UploadFilesModule.generateFiles),
|
||||
// ...(useStore().state.UploadFilesModule.MaterialFiles)]
|
||||
// }),
|
||||
moodb : moodb.moodb_,
|
||||
moodbList:{},
|
||||
moodbClassName:[],
|
||||
setabsolute:false,
|
||||
};
|
||||
},
|
||||
|
||||
@@ -131,44 +139,382 @@ export default defineComponent({
|
||||
|
||||
},
|
||||
directives:{
|
||||
//操作移动
|
||||
layout:{
|
||||
mounted (el,layout) {
|
||||
// console.log(el,layout);
|
||||
layout.value.style = {
|
||||
rotate:'',
|
||||
left:'',
|
||||
top:'',
|
||||
width:'',
|
||||
height:'',
|
||||
}
|
||||
mounted (el,layout:any,binding) {
|
||||
el.addEventListener('mousedown',(e: MouseEvent)=>{
|
||||
e.stopPropagation()
|
||||
el.parentElement.children.forEach((v:any) => {
|
||||
v.style.left = v.offsetLeft+'px'
|
||||
v.style.top = v.offsetTop+'px'
|
||||
|
||||
});
|
||||
el.parentElement.children.forEach((v:any) => {
|
||||
v.classList.add('active')
|
||||
});
|
||||
el.style.zIndex = GO.zIndex++
|
||||
let left = el.style.left? el.style.left.replace(/px/g,'') : 0
|
||||
let top = el.style.top? el.style.top.replace(/px/g,'') : 0
|
||||
let mouseX = e.offsetX //鼠标点击位置到domleft距离
|
||||
let mouseY = e.offsetY
|
||||
let domX = e.clientX - e.offsetX - Number(left)//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
|
||||
let domY = e.clientY - e.offsetY - Number(top)
|
||||
let mouse = true
|
||||
document.onmousemove = function(e:MouseEvent){
|
||||
if(mouse){
|
||||
el.style.left = e.x-mouseX - domX+'px'
|
||||
el.style.top = e.y-mouseY - domY+'px'
|
||||
if(el.offsetLeft <=0){
|
||||
el.style.left = 0+'px'
|
||||
}
|
||||
if(el.offsetTop <=0){
|
||||
el.style.top = 0+'px'
|
||||
}
|
||||
if(el.offsetLeft+el.offsetWidth >= el.parentNode.offsetWidth){
|
||||
el.style.left = el.parentNode.offsetWidth - el.offsetWidth+'px'
|
||||
}
|
||||
if(el.offsetTop+el.offsetHeight >= el.parentNode.offsetHeight){
|
||||
el.style.top = el.parentNode.offsetHeight - el.offsetHeight+'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
document.onmouseup = function(){
|
||||
mouse = false
|
||||
// document.onmousemove = false;
|
||||
}
|
||||
})
|
||||
},
|
||||
updated (el,layout) {
|
||||
|
||||
}
|
||||
},
|
||||
//操作大小
|
||||
compile:{
|
||||
mounted (el,compile) {
|
||||
el.addEventListener('mousedown',(e: MouseEvent)=>{
|
||||
e.stopPropagation()
|
||||
let elParent = el.parentNode.parentNode
|
||||
el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
|
||||
v.style.left = v.offsetLeft+'px'
|
||||
v.style.top = v.offsetTop+'px'
|
||||
});
|
||||
el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
|
||||
v.classList.add('active')
|
||||
});
|
||||
if(compile.value == 'right'){
|
||||
|
||||
}else if(compile.value == 'left'){
|
||||
elParent.style.right = elParent.parentNode.offsetWidth - elParent.offsetWidth - elParent.offsetLeft + 'px'
|
||||
elParent.style.left = 'auto'
|
||||
}else if(compile.value == 'top'){
|
||||
elParent.style.bottom = elParent.parentNode.offsetHeight - elParent.offsetHeight - elParent.offsetTop + 'px'
|
||||
elParent.style.top = 'auto'
|
||||
}else if(compile.value == 'bottom'){
|
||||
|
||||
}
|
||||
|
||||
let gpsXY:any
|
||||
let parent:any
|
||||
if(compile.value == 'left' || compile.value == 'right'){
|
||||
gpsXY = e.x
|
||||
parent = elParent.offsetWidth
|
||||
}else{
|
||||
parent = elParent.offsetHeight
|
||||
gpsXY = e.y
|
||||
}
|
||||
let mouse = true
|
||||
document.onmousemove = function(e:MouseEvent){
|
||||
if(mouse){
|
||||
if(compile.value == 'left'){
|
||||
elParent.style.width = parent + gpsXY - e.x + 'px'
|
||||
}else if(compile.value == 'right'){
|
||||
elParent.style.width = parent + e.x - gpsXY + 'px'
|
||||
}else if(compile.value == 'top'){
|
||||
elParent.style.height = parent + gpsXY - e.y + 'px'
|
||||
}else if(compile.value == 'bottom'){
|
||||
elParent.style.height = parent + e.y - gpsXY + 'px'
|
||||
|
||||
}
|
||||
|
||||
|
||||
if(elParent.parentNode.offsetWidth <= elParent.offsetWidth+Number(elParent.style.right.replace(/px/g,''))){
|
||||
elParent.style.width = elParent.parentNode.offsetWidth - Number(elParent.style.right.replace(/px/g,''))+'px'
|
||||
}
|
||||
if(elParent.offsetLeft + elParent.offsetWidth>=elParent.parentNode.offsetWidth){
|
||||
elParent.style.width = elParent.parentNode.offsetWidth - elParent.offsetLeft+'px'
|
||||
}
|
||||
|
||||
if(elParent.parentNode.offsetHeight <= elParent.offsetHeight+Number(elParent.style.bottom.replace(/px/g,''))){
|
||||
elParent.style.height = elParent.parentNode.offsetHeight - Number(elParent.style.bottom.replace(/px/g,''))+'px'
|
||||
}
|
||||
if(elParent.offsetTop + elParent.offsetHeight>=elParent.parentNode.offsetHeight){
|
||||
elParent.style.height = elParent.parentNode.offsetHeight - elParent.offsetTop+'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
document.onmouseup = function(){
|
||||
mouse = false
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
//操作旋转
|
||||
rotote:{
|
||||
mounted(el){
|
||||
let mouse = true;
|
||||
let angle :any = 0
|
||||
let num:any
|
||||
let elParent = el.parentNode.parentNode
|
||||
|
||||
if(document.defaultView){
|
||||
num = Number(document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split(',')[3])
|
||||
}
|
||||
// 添加鼠标按下事件监听器
|
||||
el.addEventListener('mousedown', (e:MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
mouse = true;
|
||||
let eX = e.clientX - (e.offsetX + el.offsetLeft) + el.nextSibling.offsetLeft+el.nextSibling.offsetWidth/2
|
||||
let eY = e.clientY - (e.offsetY + el.offsetTop) + el.nextSibling.offsetTop+el.nextSibling.offsetHeight/2
|
||||
document.addEventListener('mousemove', (e:MouseEvent) => {
|
||||
if (mouse) {
|
||||
let X = eX
|
||||
let Y = eY
|
||||
let x:any = e.pageX - X
|
||||
let y:any = Y - e.pageY
|
||||
angle = Math.atan2(x,y)*(180 / Math.PI)
|
||||
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
|
||||
el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
|
||||
}
|
||||
});
|
||||
|
||||
// 添加鼠标松开事件监听器
|
||||
document.addEventListener('mouseup', () => {
|
||||
mouse = false;
|
||||
});
|
||||
});
|
||||
//缩放
|
||||
let timeSwitch = true
|
||||
el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
|
||||
el.parentNode.addEventListener('mousewheel',(e:MouseEvent) => {
|
||||
if(timeSwitch){
|
||||
timeSwitch = false
|
||||
if((e as WheelEvent).deltaY > 0){
|
||||
if(num <= 1){
|
||||
num -= 0.05
|
||||
}else{
|
||||
num -= 0.1
|
||||
}
|
||||
}else{
|
||||
//放大
|
||||
if(num <= 1){
|
||||
num += 0.05
|
||||
}else{
|
||||
num += 0.1
|
||||
}
|
||||
}
|
||||
if(num >= 3){
|
||||
num = 3
|
||||
}else if (num < .2){
|
||||
num = .2
|
||||
}
|
||||
setTimeout(() => {
|
||||
timeSwitch = true
|
||||
}, 100);
|
||||
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
angle:{
|
||||
mounted(el,angle){
|
||||
let mouse = false;
|
||||
el.addEventListener('mousedown', (e:MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
|
||||
el.parentNode.children.forEach((v:any) =>{
|
||||
v.classList.add('eventNode')
|
||||
})
|
||||
mouse = true;
|
||||
let elParent = el.parentNode.parentNode
|
||||
let eX:any
|
||||
let eY:any
|
||||
let elParentSide = Math.sqrt(elParent.offsetWidth/2*elParent.offsetWidth/2+elParent.offsetHeight/2*elParent.offsetHeight/2)
|
||||
el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
|
||||
if (mouse) {
|
||||
if(angle.value == 'right'){
|
||||
eX = elParent.offsetWidth - e.offsetX
|
||||
eY = elParent.offsetHeight - e.offsetY
|
||||
}else if(angle.value == 'top'){
|
||||
eX = elParent.offsetWidth - e.offsetX- elParent.offsetWidth
|
||||
eY = elParent.offsetHeight - e.offsetY
|
||||
}else if(angle.value == 'left'){
|
||||
eX = elParent.offsetWidth - e.offsetX
|
||||
eY = elParent.offsetHeight - e.offsetY- elParent.offsetHeight
|
||||
}else if(angle.value == 'bottom'){
|
||||
eX = elParent.offsetWidth - e.offsetX - elParent.offsetWidth
|
||||
eY = elParent.offsetHeight - e.offsetY - elParent.offsetHeight
|
||||
}
|
||||
let mouseSide = Math.sqrt(eX*eX + eY *+eY)/2
|
||||
// el.style.left = e.offsetX /2 +'px'
|
||||
// el.style.top = e.offsetY /2+'px'
|
||||
if(100 - 100 * mouseSide/elParentSide <= 50){
|
||||
if(angle.value == 'right'){
|
||||
|
||||
el.parentNode.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
||||
elParent.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
||||
el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
|
||||
el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
|
||||
}else if(angle.value == 'top'){
|
||||
el.parentNode.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
||||
elParent.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
||||
el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
|
||||
el.style.left = 'auto'
|
||||
el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
|
||||
}else if(angle.value == 'bottom'){
|
||||
el.parentNode.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
||||
elParent.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
||||
el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
|
||||
el.style.top = 'auto'
|
||||
el.style.left = 'auto'
|
||||
el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
|
||||
}else if(angle.value == 'left'){
|
||||
el.parentNode.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
||||
elParent.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
||||
el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
|
||||
el.style.top = 'auto'
|
||||
el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
|
||||
}
|
||||
}else{
|
||||
if(angle.value == 'right'){
|
||||
el.parentNode.style.borderTopLeftRadius = 50+'%'
|
||||
elParent.style.borderTopLeftRadius = 50+'%'
|
||||
}else if(angle.value == 'top'){
|
||||
el.parentNode.style.borderTopRightRadius = 50+'%'
|
||||
elParent.style.borderTopRightRadius = 50+'%'
|
||||
}else if(angle.value == 'bottom'){
|
||||
el.parentNode.style.borderBottomRightRadius = 50+'%'
|
||||
elParent.style.borderBottomRightRadius = 50+'%'
|
||||
}else if(angle.value == 'left'){
|
||||
el.parentNode.style.borderBottomLeftRadius = 50+'%'
|
||||
elParent.style.borderBottomLeftRadius = 50+'%'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
// 添加鼠标松开事件监听器
|
||||
document.addEventListener('mouseup', () => {
|
||||
mouse = false;
|
||||
el.parentNode.children.forEach((v:any) =>{
|
||||
v.classList.remove('eventNode')
|
||||
})
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
//移动图片
|
||||
translate:{
|
||||
mounted (el,layout:any,binding) {
|
||||
el.addEventListener('mousedown',(e: MouseEvent)=>{
|
||||
e.stopPropagation()
|
||||
let elParent = el.parentNode.parentNode
|
||||
el.style.left = (el.offsetLeft+2)/(elParent.offsetWidth)*100+'%'
|
||||
el.style.top = (el.offsetTop+2)/(elParent.offsetHeight)*100+'%'
|
||||
let left = el.style.left? el.style.left.replace(/%/g,'') : 0
|
||||
let top = el.style.top? el.style.top.replace(/%/g,'') : 0
|
||||
let mouseX = e.offsetX //鼠标点击位置到domleft距离
|
||||
let mouseY = e.offsetY
|
||||
let domX = e.clientX - e.offsetX - el.offsetLeft//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
|
||||
let domY = e.clientY - e.offsetY - el.offsetTop
|
||||
let mouse = true
|
||||
document.onmousemove = function(e:MouseEvent){
|
||||
if(mouse){
|
||||
let left = ( e.x-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
|
||||
let top = (e.y-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%'
|
||||
el.style.left = left
|
||||
el.style.top = top;
|
||||
el.previousSibling.style.top = top
|
||||
el.previousSibling.style.left = left
|
||||
elParent.firstChild.style.top = top
|
||||
elParent.firstChild.style.left = left
|
||||
if(el.offsetLeft <=0){
|
||||
el.style.left = 0+'%'
|
||||
el.previousSibling.style.left = 0+'%'
|
||||
elParent.firstChild.style.left = 0+'%'
|
||||
}
|
||||
if(el.offsetTop <=0){
|
||||
el.style.top = 0+'%'
|
||||
el.previousSibling.style.top = 0+'%'
|
||||
elParent.firstChild.style.top = 0+'%'
|
||||
}
|
||||
// if(el.offsetLeft+el.offsetWidth >= el.parentNode.offsetWidth){
|
||||
// // el.style.left = el.parentNode.offsetWidth - el.offsetWidth+'%'
|
||||
// console.log(2);
|
||||
// }
|
||||
if(el.style.left.replace(/%/g,'')>=100){
|
||||
el.style.left = 100+'%'
|
||||
el.previousSibling.style.left = 100+'%'
|
||||
elParent.firstChild.style.left = 100+'%'
|
||||
}
|
||||
// if(el.offsetTop+el.offsetHeight >= el.parentNode.offsetHeight){
|
||||
// el.style.top = el.parentNode.offsetHeight - el.offsetHeight+'%'
|
||||
// }
|
||||
if(el.style.top.replace(/%/g,'')>=100){
|
||||
el.style.top = 100+'%'
|
||||
el.previousSibling.style.top = 100+'%'
|
||||
elParent.firstChild.style.top = 100+'%'
|
||||
}
|
||||
}
|
||||
}
|
||||
document.onmouseup = function(){
|
||||
mouse = false
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
this.layout = !this.layout
|
||||
let layoutList = [...this.store.state.UploadFilesModule.moodboardFiles,
|
||||
...this.store.state.UploadFilesModule.generateFiles,
|
||||
...this.store.state.UploadFilesModule.MaterialFiles]
|
||||
console.log(this.moodb[layoutList.length]);
|
||||
let layoutList = this.store.state.UploadFilesModule.moodboard
|
||||
this.layoutList.forEach((v:any)=>{
|
||||
v.setPitch = false
|
||||
})
|
||||
this.layoutList = layoutList
|
||||
|
||||
this.moodbList = this.moodb[layoutList.length-1]
|
||||
this.moodbClassName = this.moodb_className
|
||||
},
|
||||
setpitch(item:any){
|
||||
this.layoutList.forEach((v:any)=>{
|
||||
v.setPitch = false
|
||||
})
|
||||
item.setPitch = true
|
||||
},
|
||||
setmoodb(item:any){
|
||||
console.log(item);
|
||||
this.moodbClassName = item
|
||||
this.$emit('setmoodbClass',this.moodbClassName)
|
||||
if(this.content){
|
||||
for (item of (this.content as any)) {
|
||||
item.classList.remove('active')
|
||||
item.style.top = ''
|
||||
item.style.left = ''
|
||||
item.style.right = ''
|
||||
item.style.bottom = ''
|
||||
item.style.width = ''
|
||||
item.style.height = ''
|
||||
}
|
||||
}
|
||||
},
|
||||
//开始拖拽事件
|
||||
onStart(){
|
||||
this.drag=true;
|
||||
},
|
||||
//拖拽结束事件
|
||||
onEnd() {
|
||||
this.drag=false;
|
||||
layoutBtnTop(){
|
||||
|
||||
},
|
||||
// setmoodbClassName(){
|
||||
// },
|
||||
@@ -196,7 +542,6 @@ export default defineComponent({
|
||||
// document.body.appendChild(img);
|
||||
// var w = img.offsetWidth;
|
||||
// var h = img.offsetHeight;
|
||||
// console.log(w,h);
|
||||
// img.remove()
|
||||
// })
|
||||
|
||||
@@ -214,15 +559,6 @@ export default defineComponent({
|
||||
// },
|
||||
|
||||
|
||||
randomRange(min: any, max: any, num: any) {
|
||||
// min最小值，max最大值 num排除的值
|
||||
let index = Math.floor(Math.random() * (max - min)) + min;
|
||||
while (index === num) {
|
||||
index = Math.floor(Math.random() * (max - min)) + min;
|
||||
}
|
||||
return index;
|
||||
},
|
||||
|
||||
//随机重置图片顺序
|
||||
// refetchTemplate() {
|
||||
// let arr = Array.from({ length: this.templateFileList.length });
|
||||
@@ -246,12 +582,24 @@ export default defineComponent({
|
||||
changeTemplateModal(){
|
||||
this.layout = !this.layout
|
||||
},
|
||||
|
||||
//提交模板
|
||||
submitTemplate() {
|
||||
this.fileList = JSON.parse(JSON.stringify(this.templateFileList));
|
||||
this.store.commit("setMoodboardFile", this.fileList);
|
||||
this.store.commit("setMoodTemplateId", this.moodTemplateId);
|
||||
this.changeTemplateModal();
|
||||
// this.fileList = JSON.parse(JSON.stringify(this.templateFileList));
|
||||
// this.store.commit("setMoodboardFile", this.fileList);
|
||||
// this.store.commit("setMoodTemplateId", this.moodTemplateId);
|
||||
// this.changeTemplateModal();
|
||||
this.layoutList.forEach((v:any)=>{
|
||||
v.setPitch = false
|
||||
})
|
||||
let layoutCentent = document.getElementById('layoutCentent')
|
||||
console.log(layoutCentent);
|
||||
setTimeout(() => {
|
||||
console.log(domTurnImg(layoutCentent));
|
||||
this.layout = false
|
||||
|
||||
}, 0);
|
||||
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -259,10 +607,11 @@ export default defineComponent({
|
||||
|
||||
<style lang="less">
|
||||
.layout_modal {
|
||||
width: 80% !important;
|
||||
max-width: 1150px;
|
||||
.ant-modal-body {
|
||||
padding: 0;
|
||||
height: calc(60vh - 6.4rem);
|
||||
// height: calc(65vh - 6.4rem);
|
||||
height: 60rem;
|
||||
}
|
||||
.ant-modal-content{
|
||||
border-radius: 1rem;
|
||||
@@ -295,6 +644,13 @@ export default defineComponent({
|
||||
display: flex;
|
||||
margin-top: 2rem;
|
||||
justify-content: center;
|
||||
.active{
|
||||
img{
|
||||
border: 2px solid;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
img{
|
||||
width:5rem;
|
||||
cursor: pointer;
|
||||
@@ -303,54 +659,166 @@ export default defineComponent({
|
||||
}
|
||||
.layout_centent{
|
||||
display: flex;
|
||||
height: 60%;
|
||||
height: 55%;
|
||||
// height: 60%;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-around;
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
padding: 3rem 0;
|
||||
margin: 3rem auto;
|
||||
overflow: hidden;
|
||||
// padding: 3rem 0;
|
||||
justify-content: space-between;
|
||||
>div{
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// flex-wrap: wrap;
|
||||
// align-content: space-around;
|
||||
// margin: auto;
|
||||
// justify-content: space-between;
|
||||
}
|
||||
position: relative;
|
||||
user-select:none
|
||||
&.active{
|
||||
flex-direction: row;
|
||||
|
||||
// >div{
|
||||
// }
|
||||
}
|
||||
.layout_btn{
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid rgb(20, 188, 255);
|
||||
padding: 0;
|
||||
-webkit-user-drag: none;
|
||||
user-select:none;
|
||||
li{
|
||||
cursor: pointer;
|
||||
// border-radius: 50%;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background-color: rgb(20, 188, 255);
|
||||
position: absolute;
|
||||
z-index: 1049;
|
||||
}
|
||||
.layout_btn_top,.layout_btn_bottom{
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%) ;
|
||||
cursor: n-resize;
|
||||
}
|
||||
.layout_btn_top{
|
||||
top: 0;
|
||||
}
|
||||
.layout_btn_bottom{
|
||||
top: 100%;
|
||||
}
|
||||
.layout_btn_left,.layout_btn_right{
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%) ;
|
||||
cursor: e-resize;
|
||||
}
|
||||
.layout_btn_left{
|
||||
left: 0;
|
||||
}
|
||||
.layout_btn_right{
|
||||
left: 100%;
|
||||
}
|
||||
.layout_rotote{
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.layout_rotote::after{
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: #14bcff;
|
||||
width: 2px;
|
||||
height: 30px;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.layout_rotote::before{
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: #14bcff;
|
||||
top: calc(50% - 30px);
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%) ;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.layout_translate{
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%) ;
|
||||
cursor: crosshair;
|
||||
cursor: move;
|
||||
}
|
||||
.layout_angle_tr{
|
||||
right: 0%;
|
||||
top: 0;
|
||||
}
|
||||
.layout_angle_tl{
|
||||
left: 0%;
|
||||
top: 0;
|
||||
}
|
||||
.layout_angle_br{
|
||||
right: 0%;
|
||||
bottom: 0%;
|
||||
}
|
||||
.layout_angle_bl{
|
||||
left: 0%;
|
||||
bottom: 0%;
|
||||
}
|
||||
.eventNode{
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.layout_centent_bor{
|
||||
|
||||
}
|
||||
.modal_imgItem{
|
||||
position: relative;
|
||||
img{
|
||||
// >div{
|
||||
// position: absolute;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// }
|
||||
overflow: hidden;
|
||||
&.active{
|
||||
position: absolute;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
img{
|
||||
// object-fit: cover;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
float: left;
|
||||
user-select:none;
|
||||
-webkit-user-drag: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%) scale(1);
|
||||
}
|
||||
::selection {
|
||||
// background: rgba(0,0,0,0);
|
||||
// background: yellow;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.wh1{
|
||||
width: 23%;
|
||||
height: 48%;
|
||||
|
||||
}
|
||||
.wh4{
|
||||
width: 48.5%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
.w1h2{
|
||||
width: 23%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
.w2h1{
|
||||
width: 48.5%;
|
||||
@@ -360,7 +828,7 @@ export default defineComponent({
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
left: 2rem;
|
||||
overflow-x: hidden;
|
||||
// background-color: #000;
|
||||
width: 8%;
|
||||
|
||||
76
src/store/uploadFile/moodboard.ts
Normal file
76
src/store/uploadFile/moodboard.ts
Normal file
@@ -0,0 +1,76 @@
|
||||
import {Module} from 'vuex'
|
||||
import {RootState} from '../index'
|
||||
import { message } from "ant-design-vue";
|
||||
import UploadFile from './uploadFile'
|
||||
|
||||
interface UploadList{
|
||||
moodboardList:any,
|
||||
generateList:any,
|
||||
MaterialList:any,
|
||||
}
|
||||
|
||||
const Moodboard : Module<UploadList,RootState> = {
|
||||
state:{
|
||||
moodboardList:[],
|
||||
generateList:[],
|
||||
MaterialList:[],
|
||||
},
|
||||
mutations:{
|
||||
setMoodboardFile(state,files){
|
||||
state.moodboardList = files;
|
||||
// (UploadFile.mutations as any).setMoodboard();
|
||||
},
|
||||
|
||||
addGenerateMaterialFils(state,data){
|
||||
let file
|
||||
let arr = [...state.generateList,...state.MaterialList,...state.moodboardList]
|
||||
if(data.type_ == 'generate'){
|
||||
file = state.generateList
|
||||
}else{
|
||||
file = state.MaterialList
|
||||
}
|
||||
if(file.length == 0){
|
||||
if(arr.length >= 8){
|
||||
message.error('You can select up to 8 images')
|
||||
}else{
|
||||
data.checked = true
|
||||
file.push(data)
|
||||
}
|
||||
}else{
|
||||
let str = true
|
||||
for (let index = 0; index < file.length; index++) {
|
||||
if(file[index].id_ == data.id_){
|
||||
// data.id_ = GO.id++
|
||||
str = false
|
||||
}
|
||||
}
|
||||
if(str){
|
||||
if(arr.length >= 8){
|
||||
message.error('You can select up to 8 images')
|
||||
}else{
|
||||
data.checked = true
|
||||
file.push(data)
|
||||
}
|
||||
}else{
|
||||
data.checked = false
|
||||
file = file.filter((v:any)=> v.id_ != data.id_)
|
||||
}
|
||||
}
|
||||
if(data.type_ == 'generate'){
|
||||
state.generateList = file
|
||||
}else{
|
||||
state.MaterialList = file
|
||||
}
|
||||
// (UploadFile.mutations as any).setMoodboard();
|
||||
},
|
||||
setGenerateFils(state,files){
|
||||
state.generateList = files
|
||||
// (UploadFile.mutations as any).setMoodboard();
|
||||
},
|
||||
},
|
||||
actions:{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export default Moodboard
|
||||
@@ -3,14 +3,19 @@ import {RootState} from '../index'
|
||||
import { message } from "ant-design-vue";
|
||||
|
||||
interface UploadFiles{
|
||||
moodboard:any,
|
||||
moodboardFiles:any,
|
||||
moodboardGenerateFiles:any,
|
||||
moodboardMaterialFiles:any,
|
||||
sketchboard:any,
|
||||
sketchboardFiles:any,
|
||||
sketchGenerateFiles:any,
|
||||
sketchMaterialFiles:any,
|
||||
printboard:any,
|
||||
printboardFiles:any,
|
||||
generatePrintFiles:any,
|
||||
generateFiles:any,
|
||||
MaterialFiles:any,
|
||||
generateList:any,
|
||||
printGenerateFiles:any,
|
||||
printMaterialFiles:any,
|
||||
colorBoards:any,
|
||||
skecthboardFiles:any,
|
||||
marketingSketchFiles:any,
|
||||
allBoardData:any, //备份的所有数据，点finish之后备份
|
||||
moodTemplateId:any,
|
||||
@@ -18,35 +23,50 @@ interface UploadFiles{
|
||||
|
||||
const UploadFilesModule : Module<UploadFiles,RootState> = {
|
||||
state:{
|
||||
moodboard:[],
|
||||
moodboardFiles:[],
|
||||
moodboardGenerateFiles:[],
|
||||
moodboardMaterialFiles:[],
|
||||
sketchboard:[],
|
||||
sketchboardFiles:[],
|
||||
sketchGenerateFiles:[],
|
||||
sketchMaterialFiles:[],
|
||||
printboard:[],
|
||||
printboardFiles:[],
|
||||
generatePrintFiles:[],
|
||||
generateFiles:[],
|
||||
MaterialFiles:[],
|
||||
generateList:[],
|
||||
printGenerateFiles:[],
|
||||
printMaterialFiles:[],
|
||||
colorBoards:[],
|
||||
skecthboardFiles:[],
|
||||
marketingSketchFiles:[],
|
||||
allBoardData:{},
|
||||
moodTemplateId:'',
|
||||
|
||||
},
|
||||
mutations:{
|
||||
|
||||
setMoodboardFile(state,files){
|
||||
state.moodboardFiles = files
|
||||
},
|
||||
setPrintboardFile(state,files){
|
||||
state.printboardFiles = files
|
||||
},
|
||||
setGeneratePrintFile(state,files){
|
||||
state.generatePrintFiles = files
|
||||
state.moodboard = [...state.moodboardFiles,...state.moodboardGenerateFiles,...state.moodboardMaterialFiles]
|
||||
},
|
||||
addGenerateMaterialFils(state,data){
|
||||
let file
|
||||
let arr = [...state.generateFiles,...state.MaterialFiles,...state.moodboardFiles]
|
||||
if(data.type_ == 'generate'){
|
||||
file = state.generateFiles
|
||||
let arr = state.moodboard
|
||||
if(data.type_.type1 == 'generate'){
|
||||
|
||||
if(data.type_.type2 == 'Moodboard'){
|
||||
file = state.moodboardGenerateFiles
|
||||
}else if(data.type_.type2 == 'Sketchboard'){
|
||||
file = state.sketchGenerateFiles
|
||||
}else if(data.type_.type2 == 'Printboard'){
|
||||
file = state.printGenerateFiles
|
||||
}
|
||||
}else{
|
||||
file = state.MaterialFiles
|
||||
if(data.type_.type2 == 'Moodboard'){
|
||||
file = state.moodboardMaterialFiles
|
||||
}else if(data.type_.type2 == 'Sketchboard'){
|
||||
file = state.sketchMaterialFiles
|
||||
}else if(data.type_.type2 == 'Printboard'){
|
||||
file = state.printGenerateFiles
|
||||
}
|
||||
}
|
||||
if(file.length == 0){
|
||||
if(arr.length >= 8){
|
||||
@@ -75,35 +95,51 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
||||
file = file.filter((v:any)=> v.id_ != data.id_)
|
||||
}
|
||||
}
|
||||
if(data.type_ == 'generate'){
|
||||
state.generateFiles = file
|
||||
if(data.type_.type1 == 'generate'){
|
||||
if(data.type_.type2 == 'Moodboard'){
|
||||
state.moodboardGenerateFiles = file
|
||||
}else if(data.type_.type2 == 'Sketchboard'){
|
||||
state.sketchGenerateFiles = file
|
||||
}else if(data.type_.type2 == 'Printboard'){
|
||||
state.printGenerateFiles = file
|
||||
}
|
||||
}else{
|
||||
state.MaterialFiles = file
|
||||
if(data.type_.type2 == 'Moodboard'){
|
||||
state.moodboardMaterialFiles = file
|
||||
}else if(data.type_.type2 == 'Sketchboard'){
|
||||
state.sketchMaterialFiles = file
|
||||
}else if(data.type_.type2 == 'Printboard'){
|
||||
state.printMaterialFiles = state.printMaterialFiles
|
||||
}
|
||||
}
|
||||
state.moodboard = [...state.moodboardFiles,...state.moodboardGenerateFiles,...state.moodboardMaterialFiles]
|
||||
state.sketchboard = [...state.sketchboardFiles,...state.sketchGenerateFiles,...state.sketchMaterialFiles]
|
||||
state.printboard = [...state.printboardFiles,...state.printGenerateFiles,...state.printMaterialFiles]
|
||||
},
|
||||
getGenerateList(state,list){
|
||||
state.generateList = list
|
||||
setSketchboardFile(state,files){
|
||||
state.sketchboardFiles = files
|
||||
state.sketchboard = [...state.sketchboardFiles,...state.sketchGenerateFiles,...state.sketchMaterialFiles]
|
||||
|
||||
},
|
||||
// setGenerateFils(state,files){
|
||||
// state.generateFiles = files
|
||||
// },
|
||||
setPrintboardFile(state,files){
|
||||
state.printboardFiles = files
|
||||
state.printboard = [...state.printboardFiles,...state.printGenerateFiles,...state.printMaterialFiles]
|
||||
},
|
||||
|
||||
|
||||
|
||||
setColorboardList(state,colorBoards){
|
||||
state.colorBoards = colorBoards
|
||||
},
|
||||
setSketchboardFile(state,files){
|
||||
state.skecthboardFiles = files
|
||||
},
|
||||
setMarketingSketchFile(state,files){
|
||||
state.marketingSketchFiles = files
|
||||
},
|
||||
setAllBoardData(state){
|
||||
state.allBoardData = {
|
||||
moodboardFiles:state.moodboardFiles,
|
||||
moodboardFiles:state.moodboard,
|
||||
printboardFiles:state.printboardFiles,
|
||||
generatePrintFiles:state.generatePrintFiles,
|
||||
generateFiles:state.generateFiles,
|
||||
colorBoards:state.colorBoards,
|
||||
skecthboardFiles:state.skecthboardFiles,
|
||||
sketchboardFiles:state.sketchboard,
|
||||
marketingSketchFiles:state.marketingSketchFiles,
|
||||
moodTemplateId:state.moodTemplateId,
|
||||
}
|
||||
@@ -112,13 +148,19 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
||||
state.allBoardData = data
|
||||
},
|
||||
clearAllData(state){
|
||||
state.moodboard = []
|
||||
state.moodboardFiles = []
|
||||
state.printboardFiles = []
|
||||
state.generatePrintFiles=[]
|
||||
state.generateFiles = []
|
||||
state.MaterialFiles = []
|
||||
state.colorBoards = []
|
||||
state.skecthboardFiles = []
|
||||
state.moodboardGenerateFiles = []
|
||||
state.moodboardMaterialFiles = []
|
||||
state.sketchboard = []
|
||||
state.sketchboardFiles = []
|
||||
state.sketchGenerateFiles = []
|
||||
state.sketchMaterialFiles = []
|
||||
state.printboard = []
|
||||
state.printboardFiles = []
|
||||
state.printGenerateFiles = []
|
||||
state.printMaterialFiles = []
|
||||
state.colorBoards = []
|
||||
state.marketingSketchFiles = []
|
||||
state.moodTemplateId = ''
|
||||
},
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
export default {
|
||||
id : 1,
|
||||
testUrl:'http://192.168.1.5:10086'
|
||||
testUrl:'http://192.168.1.5:10086',
|
||||
zIndex:2,
|
||||
}
|
||||
24
src/tool/domTurnImg.js
Normal file
24
src/tool/domTurnImg.js
Normal file
@@ -0,0 +1,24 @@
|
||||
import html2canvas from "html2canvas";
|
||||
const getJpeg = dom =>{
|
||||
return new Promise(resolve =>{
|
||||
html2canvas(dom,{useCORS: true,}).then(canvas =>{
|
||||
const jpeg = canvas.toDataURL('image/jpeg',1.0);
|
||||
resolve(base64ToFile(jpeg))
|
||||
console.log(jpeg);
|
||||
})
|
||||
})
|
||||
}
|
||||
const base64ToFile = urlData =>{
|
||||
const arr = urlData.split(',');
|
||||
const mime = arr[0].match(/:(.*?);/)[1]
|
||||
const bytes = atob(arr[1])
|
||||
let n = bytes.length;
|
||||
const ia = new Uint8Array(n)
|
||||
while (n--){
|
||||
ia[n] = bytes.charCodeAt(n);
|
||||
}
|
||||
console.log(new File([ia],'jpeg',{type:mime}));
|
||||
return new File([ia],'jpeg',{type:mime})
|
||||
|
||||
}
|
||||
export default getJpeg
|
||||
@@ -20,7 +20,7 @@ import { message } from 'ant-design-vue';
|
||||
// axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //配置接口地址
|
||||
// }
|
||||
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //配置接口地址
|
||||
|
||||
console.log(process.env.VUE_APP_BASE_URL);
|
||||
//POST传参序列化(添加请求拦截器)
|
||||
axios.interceptors.request.use((config) => {
|
||||
//在发送请求之前做某件事
|
||||
@@ -78,7 +78,7 @@ export const Https = {
|
||||
designCollection:'/api/design/designCollection', //设计 Conllection
|
||||
reDesignCollection:'/api/design/reDesignCollection',//重新设计 Conllection
|
||||
countDesignProcess:'/api/design/countDesignProcess', //统计design进度
|
||||
getRgbByHsvBatch:'/api/element/getRgbByHsvBatch', //通过hsv值数组批量获取潘通信息
|
||||
getRgbByHsvBatch:'http://192.168.1.6:10086/api/element/getRgbByHsvBatch', //通过hsv值数组批量获取潘通信息
|
||||
designLike:'/api/design/like', //Design Like
|
||||
designDislike: '/api/design/dislike', //Design Dislike
|
||||
queryUserGroup:'/api/history/queryUserGroup', //History用户分页分组列表
|
||||
@@ -99,8 +99,9 @@ export const Https = {
|
||||
saveOrEditTemplatePoint:'/api/library/saveOrEditTemplatePoint',//保存或者编辑template打点
|
||||
libraryModelsDot:'/api/library/modelsDot',//Models打点预览
|
||||
pythonChatStream:'/api/python/chatStream',//机器人助力
|
||||
workspaceDetail:'http://192.168.1.5:10086/api/workspace/detail',//用户习惯详情
|
||||
|
||||
workspaceDetail:'http://192.168.1.6:10086/api/workspace/detail',//用户习惯详情
|
||||
sketchAndPrintGenerate:'/api/generate/sketchAndPrint',//sketchGenerate生成图片
|
||||
|
||||
},
|
||||
|
||||
axiosGet(url,config) {
|
||||
|
||||
@@ -19,7 +19,7 @@ module.exports = defineConfig({
|
||||
// target: process.env.VUE_APP_BASE_URL,
|
||||
// changeOrigin: true, //是否允许跨越
|
||||
// }
|
||||
'http://192.168.1.5:10086/api':{
|
||||
'/api':{
|
||||
target:'http://18.167.251.121:5567',
|
||||
changeOrigin:true,
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user