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;
|
overflow-y: hidden;
|
||||||
}
|
}
|
||||||
.collection_modal .ant-upload.ant-upload-select-picture-card {
|
.collection_modal .ant-upload.ant-upload-select-picture-card {
|
||||||
width: 16.5rem;
|
|
||||||
height: 16.5rem;
|
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border: 0.3rem dashed #EDEDED;
|
width: 6rem;
|
||||||
margin: 0 2rem 2rem 0;
|
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 {
|
.collection_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao {
|
||||||
font-size: 3.2rem;
|
font-size: 3.2rem;
|
||||||
@@ -135,6 +136,102 @@ input {
|
|||||||
width: auto;
|
width: auto;
|
||||||
vertical-align: top;
|
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 {
|
.cut_pricture_modal .ant-modal-body {
|
||||||
height: 65.4rem;
|
height: 65.4rem;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
|
|||||||
@@ -135,12 +135,12 @@ input{
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ant-upload.ant-upload-select-picture-card{
|
.ant-upload.ant-upload-select-picture-card{
|
||||||
width: 16.5rem;
|
|
||||||
height: 16.5rem;
|
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border: 0.3rem dashed #EDEDED;
|
width: 6rem;
|
||||||
margin: 0 2rem 2rem 0;
|
height: 6rem;
|
||||||
|
border: 0.3rem solid #ededed;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin: 0;
|
||||||
.upload_tip_block{
|
.upload_tip_block{
|
||||||
.icon-jiahao{
|
.icon-jiahao{
|
||||||
font-size: 3.2rem;
|
font-size: 3.2rem;
|
||||||
@@ -161,6 +161,115 @@ input{
|
|||||||
vertical-align: top;
|
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{
|
.cut_pricture_modal{
|
||||||
|
|||||||
@@ -1,74 +1,108 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="colorboard_upload_modal">
|
<div class="colorboard_upload_modal">
|
||||||
<div class="colorboard_upload_left">
|
<div class="modal_layout">
|
||||||
<div class="upload_left_header">
|
<div class="modal_text">
|
||||||
<span class="color_list icon iconfont icon-diaosebanpalette3"></span>
|
<div>Thumbnail preview of selected moodboard</div>
|
||||||
<span>My Color Palette</span>
|
</div>
|
||||||
</div>
|
<div class="modal_img">
|
||||||
<div class="upload_left_content scroll_style">
|
<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
|
||||||
<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:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="colorboard_upload_right">
|
<div class="colorboard_upload_right">
|
||||||
<div class="upload_right_content">
|
<div class="upload_right_content">
|
||||||
<div class="right_content_line">
|
<div class="right_content_line">
|
||||||
<div class="upload_right_header">
|
<div class="upload_right_header">
|
||||||
<span class="color_edit icon iconfont icon-yansefangan"></span>
|
<i class="color_edit fi fi-bs-comments" ></i>
|
||||||
<span>Choose Color</span>
|
<span>Palette</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="color_setting_block">
|
<div class="color_setting_block">
|
||||||
<Chrome class="chrome_color" v-model="selectColor"></Chrome>
|
<Sketch class="sketch_color" v-model="selectColor" :show.sync="colorPickerVisible"/>
|
||||||
<Slider class="sileder_color" v-model="selectColor"></Slider>
|
<!-- <Chrome class="chrome_color" v-model="selectColor"></Chrome> -->
|
||||||
<div class="color_rgb_block">
|
<!-- <Slider class="sileder_color" v-model="selectColor"></Slider> -->
|
||||||
<div class="rgb_item">R:{{getSelectRGB(selectColor).r}}</div>
|
<div class="color_block">
|
||||||
<div class="rgb_item">G:{{getSelectRGB(selectColor).g}}</div>
|
<div class="color_left" @click="colorBlockHex = !colorBlockHex">
|
||||||
<div class="rgb_item">B:{{getSelectRGB(selectColor).b}}</div>
|
<div v-show="colorBlockHex">
|
||||||
</div>
|
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>
|
||||||
|
|
||||||
<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="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="pantong_name" v-show="pantongName">{{pantongName}}</div>
|
||||||
<div class="clear_button" @click="clearCurrentColor()">Clear</div>
|
<div class="clear_button" @click="clearCurrentColor()">Clear</div>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="right_content_line">
|
<div class="right_content_line right_content_line_upload">
|
||||||
<div class="upload_right_header">
|
<div class="upload_right_header">
|
||||||
<span class="color_edit icon iconfont icon-yansefangan"></span>
|
<i class="color_edit fi fi-bs-comments" ></i>
|
||||||
<span>Upload Color</span>
|
<span>Auto Recognize</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>
|
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<span>Key in Color Code</span>
|
<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>
|
||||||
<div class="get_color_block">
|
<div class="get_color_block">
|
||||||
<input class="get_color_input" placeholder="tcx value (e.g.: 19-4052)" v-model="tcxColor" @keydown.enter="getTcxColor()"/>
|
<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="icon iconfont icon-huoquduixiang"></span>
|
||||||
<span class="get_color_des">Extract Color</span>
|
<span class="get_color_des">Extract Color</span>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script>
|
||||||
import { Chrome,Slider } from '@ans1998/vue3-color'
|
import { Chrome,Slider,Sketch,Material,Compact,Swatches,Photoshop } from '@ans1998/vue3-color'
|
||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
import { defineComponent, h,ref } from 'vue'
|
import { defineComponent, h,ref } from 'vue'
|
||||||
import { LoadingOutlined } from '@ant-design/icons-vue';
|
import { LoadingOutlined } from '@ant-design/icons-vue';
|
||||||
@@ -95,34 +132,41 @@ import { message,Upload} from 'ant-design-vue';
|
|||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components:{
|
components:{
|
||||||
Chrome,
|
Chrome,
|
||||||
Slider
|
Slider,
|
||||||
|
Sketch
|
||||||
},
|
},
|
||||||
setup(){
|
setup(){
|
||||||
let fileList:any = ref([])
|
let fileList = ref([])
|
||||||
let colorList:any = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
|
let colorList = [{},{},{},{},{},{},{},{}]
|
||||||
let selectColor:any = ref({rgba:{}}) //顔色选择器默认颜色
|
let selectColor = ref({
|
||||||
|
rgba:{},
|
||||||
|
}) //顔色选择器默认颜色
|
||||||
|
let selectColorList = ref({
|
||||||
|
})
|
||||||
return {
|
return {
|
||||||
fileList,
|
fileList,
|
||||||
colorList,
|
colorList,
|
||||||
selectColor,
|
selectColor,
|
||||||
|
selectColorList,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch:{
|
watch:{
|
||||||
selectColor(newVal:any,oldVal:any){
|
selectColor(newVal,oldVal){
|
||||||
this.reviewColor = newVal.rgba || {}
|
|
||||||
this.colorList[this.selectIndex] = newVal.rgba
|
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)
|
this.setColorboardList(colorList)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed:{
|
computed:{
|
||||||
getSelectRGB(selectColor){
|
getSelectRGB(selectColor){
|
||||||
return (selectColor:any)=>{
|
return (selectColor)=>{
|
||||||
let rgba = selectColor.rgba
|
let rgba = selectColor.rgba
|
||||||
let data = {
|
let data = {
|
||||||
r:rgba?.r || rgba?.r===0 ? rgba?.r : 255,
|
r:rgba?.r || rgba?.r===0 ? rgba?.r : 255,
|
||||||
g:rgba?.g || rgba?.g===0 ? rgba?.g : 255,
|
g:rgba?.g || rgba?.g===0 ? rgba?.g : 255,
|
||||||
b:rgba?.b || rgba?.b===0 ? rgba?.b : 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
|
return data
|
||||||
}
|
}
|
||||||
@@ -135,6 +179,7 @@ export default defineComponent({
|
|||||||
selectIndex:0,//选中的文件索引
|
selectIndex:0,//选中的文件索引
|
||||||
tcxColor:'',
|
tcxColor:'',
|
||||||
pantongName:'',//潘通值
|
pantongName:'',//潘通值
|
||||||
|
pantongNameList:[],
|
||||||
indicator : h(LoadingOutlined, {
|
indicator : h(LoadingOutlined, {
|
||||||
style: {
|
style: {
|
||||||
fontSize: '2.4rem',
|
fontSize: '2.4rem',
|
||||||
@@ -148,22 +193,59 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
token:'',
|
token:'',
|
||||||
uploadUrl:'',
|
uploadUrl:'',
|
||||||
store:useStore()
|
store:useStore(),
|
||||||
|
colorPickerVisible: true,
|
||||||
|
colorBlockHex:true,
|
||||||
|
getColorBg:false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
this.token = getCookie('token') || ''
|
this.token = getCookie('token') || ''
|
||||||
this.uploadUrl = getUploadUrl()
|
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:{
|
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.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},hex:hex} : {hex:''}
|
||||||
this.selectColor = color?.r + ''? {rgba:{r:color.r,g:color.g,b:color.b,a:1}} : {}
|
|
||||||
this.fileList = []
|
this.fileList = []
|
||||||
this.tcxColor = ''
|
this.tcxColor = ''
|
||||||
this.pantongName = ''
|
this.pantongName = ''
|
||||||
|
this.pantongNameList = []
|
||||||
|
this.selectColorList= []
|
||||||
|
this.reviewColor= {}
|
||||||
|
this.getColorBg = false
|
||||||
},
|
},
|
||||||
|
|
||||||
//通过tcx获取颜色
|
//通过tcx获取颜色
|
||||||
@@ -173,11 +255,15 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
Https.axiosGet(Https.httpUrls.getRgbByTcx + '?tcx=' + this.tcxColor).then((rv) =>{
|
Https.axiosGet(Https.httpUrls.getRgbByTcx + '?tcx=' + this.tcxColor).then((rv) =>{
|
||||||
if(rv && rv.name){
|
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.colorList[this.selectIndex] = {r:rv.r, g:rv.g, b:rv.b}
|
||||||
this.pantongName = rv.name
|
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.setColorboardList(colorList)
|
||||||
|
this.getColorBg = true
|
||||||
}else{
|
}else{
|
||||||
message.error("Can't find the TCX color")
|
message.error("Can't find the TCX color")
|
||||||
}
|
}
|
||||||
@@ -188,15 +274,17 @@ export default defineComponent({
|
|||||||
clearCurrentColor(){
|
clearCurrentColor(){
|
||||||
this.selectColor = {}
|
this.selectColor = {}
|
||||||
this.fileList = []
|
this.fileList = []
|
||||||
|
this.reviewColor={}
|
||||||
this.pantongName = ''
|
this.pantongName = ''
|
||||||
|
this.pantongNameList = []
|
||||||
this.tcxColor = ''
|
this.tcxColor = ''
|
||||||
},
|
},
|
||||||
|
|
||||||
fileUploadChange(data:any){
|
fileUploadChange(data){
|
||||||
let file = data.file
|
let file = data.file
|
||||||
let fileData = file.originFileObj
|
let fileData = file.originFileObj
|
||||||
var reader = new FileReader();
|
var reader = new FileReader();
|
||||||
reader.onload = (e:any) => {
|
reader.onload = (e) => {
|
||||||
let data_new;
|
let data_new;
|
||||||
if (typeof e.target.result === 'object') {
|
if (typeof e.target.result === 'object') {
|
||||||
// 把Array Buffer转化为blob 如果是base64不需要
|
// 把Array Buffer转化为blob 如果是base64不需要
|
||||||
@@ -210,47 +298,110 @@ export default defineComponent({
|
|||||||
|
|
||||||
setTimeout(()=>{
|
setTimeout(()=>{
|
||||||
const colorThief = new ColorThief();
|
const colorThief = new ColorThief();
|
||||||
let colorImage:any = this.$refs.colorImage
|
let colorImage = this.$refs.colorImage
|
||||||
let domImg:any = colorImage[0];
|
let domImg = colorImage[0];
|
||||||
let color = colorThief.getColor(domImg)
|
let color = colorThief.getColor(domImg)
|
||||||
this.getHsvColor(color)
|
let colorHex = this.rgbaToHex(color)
|
||||||
this.reviewColor = {r:color[0],g:color[1],b:color[2]}
|
let selectColorList = [];
|
||||||
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1}}
|
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)
|
},100)
|
||||||
};
|
};
|
||||||
// 转化为base64S
|
// 转化为base64S
|
||||||
reader.readAsDataURL(fileData)
|
reader.readAsDataURL(fileData)
|
||||||
},
|
},
|
||||||
|
rgbaToHex(rgba) { // rgba转16进制
|
||||||
beforeUpload(file:any){
|
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';
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||||
if (!isJpgOrPng) {
|
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;
|
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||||
if (!isLt2M) {
|
if (!isLt2M) {
|
||||||
message.error('Image must smaller than 5MB!');
|
message.error('Image must smaller than 5MB!');
|
||||||
}
|
}
|
||||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||||
},
|
},
|
||||||
|
|
||||||
deleteFile(index:any){
|
deleteFile(index){
|
||||||
this.fileList.splice(index, 1)
|
this.fileList.splice(index, 1)
|
||||||
|
this.selectColorList = []
|
||||||
},
|
},
|
||||||
|
|
||||||
//通过HSV获取颜色
|
//通过HSV获取颜色
|
||||||
getHsvColor(color:any){
|
getHsvColor(color){
|
||||||
let hsv = rgbToHsv(color)
|
// let hsv = rgbToHsv(color)
|
||||||
this.pantongName = ''
|
this.pantongName = ''
|
||||||
Https.axiosGet(Https.httpUrls.getRgbByHsv + `?h=${hsv[0]}&s=${hsv[0]}&v=${hsv[1]}`).then((rv) =>{
|
// {params:{id:3}}
|
||||||
if(rv){
|
// console.log(color);
|
||||||
this.pantongName = rv.name
|
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){
|
setColorboardList(colorList){
|
||||||
let newColorList = colorList.map((v:any)=>{
|
let newColorList = colorList.map((v)=>{
|
||||||
let data = {
|
let data = {
|
||||||
id:'',
|
id:'',
|
||||||
name:'',
|
name:'',
|
||||||
@@ -264,72 +415,68 @@ export default defineComponent({
|
|||||||
|
|
||||||
recollection(){
|
recollection(){
|
||||||
let colorList = this.store.state.UploadFilesModule.allBoardData.colorBoards
|
let colorList = this.store.state.UploadFilesModule.allBoardData.colorBoards
|
||||||
colorList.forEach((ele:any, index:number) => {
|
colorList.forEach((ele, index) => {
|
||||||
this.colorList[index] = ele.rgbValue
|
this.colorList[index] = ele.rgbValue
|
||||||
});
|
});
|
||||||
this.reviewColor = this.colorList[0]
|
|
||||||
this.selectColor = {rgba:this.colorList[0]}, //顔色选择器默认颜色
|
this.selectColor = {rgba:this.colorList[0]}, //顔色选择器默认颜色
|
||||||
this.store.commit('setColorboardList',colorList)
|
this.store.commit('setColorboardList',colorList)
|
||||||
}
|
},
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.colorboard_upload_modal{
|
.colorboard_upload_modal{
|
||||||
padding: 1rem 1rem 1.8rem 1rem;
|
// padding: 1rem 1rem 1.8rem 1rem;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #F2F3FB;
|
// background: #F2F3FB;
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
padding-top: 7rem;
|
||||||
.colorboard_upload_left{
|
.modal_layout{
|
||||||
width: calc(100% - 48rem);
|
position: absolute;
|
||||||
height: 100%;
|
top: 0;
|
||||||
background: #FFFFFF;
|
left: calc(47% + 3rem);
|
||||||
|
.modal_text{
|
||||||
.upload_left_header{
|
font-size: 1.2rem;
|
||||||
padding: 1.4rem 2rem 1.6rem;
|
font-weight: 400;
|
||||||
font-size: 1.6rem;
|
color: rgba(0, 0, 0, 0.45);
|
||||||
color: #333333;
|
display: flex;
|
||||||
font-weight: bold;
|
align-items: center;
|
||||||
display: flex;
|
justify-content: space-between;
|
||||||
align-items: center;
|
}
|
||||||
line-height: 2.4rem;
|
.modal_img{
|
||||||
|
width: 40rem;
|
||||||
.color_list{
|
height: 5rem;
|
||||||
font-size: 2.2rem;
|
overflow-x: hidden;
|
||||||
margin-right: 0.7rem;
|
display: flex;
|
||||||
}
|
&.modal_img::-webkit-scrollbar {
|
||||||
}
|
display: none;
|
||||||
|
}
|
||||||
.upload_left_content{
|
.modal_img_item{
|
||||||
padding: 1rem 1.6rem;
|
width: 4rem;
|
||||||
height: calc(100% - 5.4rem);
|
height: 4rem;
|
||||||
overflow-y: auto;
|
margin: 0 1rem 1rem 0;
|
||||||
|
position: relative;
|
||||||
.upload_color_block{
|
cursor: pointer;
|
||||||
padding: 0 0.4rem;
|
border: 0.1rem solid #DCDCEC;
|
||||||
margin-bottom: 2.6rem;
|
.select_upload_color{
|
||||||
display: inline-block;
|
border: 0.1rem solid #343579;
|
||||||
vertical-align: top;
|
}
|
||||||
|
.upload_color{
|
||||||
.upload_color{
|
width: 100%;
|
||||||
width: 11.5rem;
|
height: 100%;
|
||||||
height: 11.5rem;
|
}
|
||||||
border: 0.1rem solid #DCDCEC;
|
|
||||||
cursor: pointer;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.select_upload_color{
|
}
|
||||||
border-color: #343579;
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.colorboard_upload_right{
|
.colorboard_upload_right{
|
||||||
width: 47rem;
|
// width: 47rem;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
|
|
||||||
@@ -343,22 +490,32 @@ export default defineComponent({
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.color_edit{
|
.color_edit{
|
||||||
font-size: 2.4rem;
|
font-size: 2rem;
|
||||||
margin-right: 0.7rem;
|
margin-right: 1rem;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload_right_content{
|
.upload_right_content{
|
||||||
padding: 1rem 2.8rem;
|
// height: calc(100% - 5.4rem);
|
||||||
height: calc(100% - 5.4rem);
|
height: 100%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.right_content_line{
|
.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{
|
.color_review_block{
|
||||||
margin-right: 4rem;
|
margin-right: 4rem;
|
||||||
|
|
||||||
@@ -393,10 +550,13 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.upload_file_item{
|
.upload_file_item{
|
||||||
margin: 0 2rem 2rem 0;
|
// margin: 0 2rem 2rem 0;
|
||||||
|
margin: 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 16.5rem;
|
// width: 16.5rem;
|
||||||
height: 16.5rem;
|
// height: 16.5rem;
|
||||||
|
width: 12rem;
|
||||||
|
height: 12rem;
|
||||||
border: 1px solid #F5F5F5;
|
border: 1px solid #F5F5F5;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
|
||||||
@@ -417,6 +577,7 @@ export default defineComponent({
|
|||||||
display: block;
|
display: block;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.delete_file_block{
|
.delete_file_block{
|
||||||
@@ -438,14 +599,122 @@ export default defineComponent({
|
|||||||
.upload_img_icon{
|
.upload_img_icon{
|
||||||
width: 4.6rem;
|
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{
|
.color_setting_block{
|
||||||
width: 16.5rem;
|
// width: 16.5rem;
|
||||||
margin-right: 4rem;
|
width: auto;
|
||||||
margin-bottom: 7rem;
|
background: #f0eaee;
|
||||||
.vc-chrome-body{
|
|
||||||
display: none;
|
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{
|
.chrome_color{
|
||||||
width: 16.5rem;
|
width: 16.5rem;
|
||||||
height: 16.5rem;
|
height: 16.5rem;
|
||||||
@@ -485,17 +754,62 @@ export default defineComponent({
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.color_rgb_block{
|
.color_block{
|
||||||
margin-top: 1rem;
|
// margin-top: 1rem;
|
||||||
display: flex;
|
// display: flex;
|
||||||
justify-content: space-between;
|
// justify-content: space-between;
|
||||||
font-size: 1.6rem;
|
// font-size: 1.6rem;
|
||||||
color: #343579;
|
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{
|
.get_color_block{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
.get_color_input{
|
.get_color_input{
|
||||||
width: 19.4rem;
|
width: 19.4rem;
|
||||||
height: 3.8rem;
|
height: 3.8rem;
|
||||||
@@ -534,11 +848,42 @@ export default defineComponent({
|
|||||||
vertical-align: middle;
|
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{
|
.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';
|
import GO from '@/tool/GO';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
setup() {
|
props: ["msg"],
|
||||||
|
setup(prop) {
|
||||||
let myMaterialModalShow = ref(false)
|
let myMaterialModalShow = ref(false)
|
||||||
let imgList = ref([])
|
let imgList = ref([])
|
||||||
let store = useStore()
|
let store = useStore()
|
||||||
@@ -122,9 +123,17 @@ export default defineComponent({
|
|||||||
searcMaterialhName,
|
searcMaterialhName,
|
||||||
designType,
|
designType,
|
||||||
disignTypeList,
|
disignTypeList,
|
||||||
boardList
|
boardList,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
data (prop) {
|
||||||
|
return {
|
||||||
|
type_ : {
|
||||||
|
type1:'material',
|
||||||
|
type2:prop.msg
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
methods:{
|
methods:{
|
||||||
|
|
||||||
init(code:any){
|
init(code:any){
|
||||||
@@ -145,7 +154,7 @@ export default defineComponent({
|
|||||||
// this.selectImgList.splice(index,1)
|
// this.selectImgList.splice(index,1)
|
||||||
// this.selectImgListIds.splice(index,1)
|
// this.selectImgListIds.splice(index,1)
|
||||||
// }
|
// }
|
||||||
imgData.type_ = 'material'
|
imgData.type_ = this.type_
|
||||||
this.store.commit("addGenerateMaterialFils", imgData);
|
this.store.commit("addGenerateMaterialFils", imgData);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -3,21 +3,21 @@
|
|||||||
<div class="modal_left">
|
<div class="modal_left">
|
||||||
<div class="switch_type_list">
|
<div class="switch_type_list">
|
||||||
<div
|
<div
|
||||||
@click="open(1)"
|
@click.stop="open(1)"
|
||||||
class="switch_type_item"
|
class="switch_type_item"
|
||||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||||
>
|
>
|
||||||
<span>Upload</span>
|
<span>Upload</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@click="open(2)"
|
@click.stop="open(2)"
|
||||||
class="switch_type_item"
|
class="switch_type_item"
|
||||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||||
>
|
>
|
||||||
<span>Library</span>
|
<span>Library</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@click="open(3)"
|
@click.stop="open(3)"
|
||||||
class="switch_type_item"
|
class="switch_type_item"
|
||||||
:class="[openClick == 3 ? 'select_swtich' : '']"
|
:class="[openClick == 3 ? 'select_swtich' : '']"
|
||||||
>
|
>
|
||||||
@@ -95,11 +95,12 @@
|
|||||||
v-show="openClick == 2"
|
v-show="openClick == 2"
|
||||||
ref="Material"
|
ref="Material"
|
||||||
@confirmSelect="confirmSelect"
|
@confirmSelect="confirmSelect"
|
||||||
|
msg="Moodboard"
|
||||||
></Material>
|
></Material>
|
||||||
<Generate
|
<Generate
|
||||||
v-show="openClick == 3"
|
v-show="openClick == 3"
|
||||||
ref="Generate"
|
ref="Generate"
|
||||||
:msg="sonData"
|
msg="Moodboard"
|
||||||
></Generate>
|
></Generate>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="moodboarList.length" class="modal_right">
|
<div v-show="moodboarList.length" class="modal_right">
|
||||||
@@ -188,15 +189,9 @@ export default defineComponent({
|
|||||||
uploadUrl: "",
|
uploadUrl: "",
|
||||||
moodTemplateId: "", //模板id
|
moodTemplateId: "", //模板id
|
||||||
store: useStore(),
|
store: useStore(),
|
||||||
sonData: {
|
|
||||||
cli: "Moodboard",
|
|
||||||
},
|
|
||||||
moodb_:moodb.moodb_,
|
moodb_:moodb.moodb_,
|
||||||
moodboarList:computed(()=>{
|
moodboarList:computed(()=>{
|
||||||
|
return useStore().state.UploadFilesModule.moodboard
|
||||||
return [...useStore().state.UploadFilesModule.moodboardFiles,
|
|
||||||
...useStore().state.UploadFilesModule.generateFiles,
|
|
||||||
...useStore().state.UploadFilesModule.MaterialFiles]
|
|
||||||
}),
|
}),
|
||||||
|
|
||||||
};
|
};
|
||||||
@@ -235,7 +230,7 @@ export default defineComponent({
|
|||||||
let fileList = this.fileList.filter(
|
let fileList = this.fileList.filter(
|
||||||
(v: any) => v.status === "done"
|
(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){
|
if(arr.length >= 8){
|
||||||
message.error('You can select up to 8 images')
|
message.error('You can select up to 8 images')
|
||||||
}else{
|
}else{
|
||||||
@@ -291,7 +286,7 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
deleteFile(item: any) {
|
deleteFile(item: any) {
|
||||||
if(item.type_ == 'generate' || item.type_ == 'material'){
|
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
|
||||||
this.store.commit("addGenerateMaterialFils", item);
|
this.store.commit("addGenerateMaterialFils", item);
|
||||||
|
|
||||||
}else{
|
}else{
|
||||||
@@ -303,7 +298,11 @@ export default defineComponent({
|
|||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
console.log(this.fileList);
|
||||||
|
|
||||||
this.fileList.splice(moodboard,1)
|
this.fileList.splice(moodboard,1)
|
||||||
|
console.log(this.fileList);
|
||||||
|
|
||||||
this.store.commit("setMoodboardFile", this.fileList);
|
this.store.commit("setMoodboardFile", this.fileList);
|
||||||
}
|
}
|
||||||
this.store.commit("clearMoodTemplateId");
|
this.store.commit("clearMoodTemplateId");
|
||||||
@@ -328,13 +327,10 @@ export default defineComponent({
|
|||||||
layout.init()
|
layout.init()
|
||||||
},
|
},
|
||||||
layout(){
|
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
|
this.layoutList = arr
|
||||||
var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
|
var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
|
||||||
let moodb = this.moodb_[arr.length-1][random]
|
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){
|
if( moodb.filter((item,index)=> item == 'w2h1').length != 0 && arr.length > 4){
|
||||||
this.flex_direction = true
|
this.flex_direction = true
|
||||||
}else{
|
}else{
|
||||||
@@ -460,70 +456,7 @@ export default defineComponent({
|
|||||||
margin-bottom: 1rem;
|
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 {
|
.upload_max_tip {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -1,25 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="printboard_upload_modal">
|
<div class="printboard_upload_modal">
|
||||||
|
|
||||||
<div class="printboard_left_upload">
|
<div class="printboard_left_upload">
|
||||||
<div class="left_upload_header">
|
<div class="left_upload_header">
|
||||||
<div class="upload_header_item">
|
<div class="upload_header_item">
|
||||||
<div class="switch_type_list">
|
<div class="switch_type_list">
|
||||||
<div
|
<div
|
||||||
@click="open(1)"
|
@click.stop="open(1)"
|
||||||
class="switch_type_item"
|
class="switch_type_item"
|
||||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||||
>
|
>
|
||||||
<span>Upload</span>
|
<span>Upload</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@click="open(2)"
|
@click.stop="open(2)"
|
||||||
class="switch_type_item"
|
class="switch_type_item"
|
||||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||||
>
|
>
|
||||||
<span>Library</span>
|
<span>Library</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@click="open(3)"
|
@click.stop="open(3)"
|
||||||
class="switch_type_item"
|
class="switch_type_item"
|
||||||
:class="[openClick == 3 ? 'select_swtich' : '']"
|
:class="[openClick == 3 ? 'select_swtich' : '']"
|
||||||
>
|
>
|
||||||
@@ -27,10 +28,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
<div v-show="openClick == 1" class="printboard_body">
|
<div v-show="openClick == 1" class="printboard_body">
|
||||||
<div class="upload_img_body">
|
<div class="upload_img_body">
|
||||||
@@ -42,7 +39,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="upload_file_item_content" @click="selectImg(file)" v-show="file?.status === 'done'">
|
<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">
|
<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>
|
</div>
|
||||||
<div class="pin_block" v-show="file?.status === 'done'">
|
<div class="pin_block" v-show="file?.status === 'done'">
|
||||||
@@ -67,44 +64,49 @@
|
|||||||
accept=".jpg,.png,.jpeg,.bmp"
|
accept=".jpg,.png,.jpeg,.bmp"
|
||||||
@change="fileUploadChange"
|
@change="fileUploadChange"
|
||||||
>
|
>
|
||||||
<div class="upload_tip_block" >
|
<div
|
||||||
<img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
|
class="upload_tip_block"
|
||||||
|
>
|
||||||
|
<i class="fi fi-br-upload"></i>
|
||||||
|
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
||||||
</div>
|
</div>
|
||||||
</a-upload>
|
</a-upload>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</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>
|
|
||||||
</div>
|
</div>
|
||||||
<Material v-show="openClick == 2" ref="Material" @confirmSelect="confirmSelect"></Material>
|
<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>
|
||||||
<div class="generate_print">
|
<div class="modal_right">
|
||||||
<div class="generate_print_header">
|
<div class="modal_layout">
|
||||||
<div class="generate_title">Generate New Print</div>
|
<div class="modal_text">
|
||||||
<div class="generate_save_button" @click="savePrint()">Save</div>
|
<div>Thumbnail preview of selected moodboard</div>
|
||||||
</div>
|
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
|
||||||
<div class="generate_print_content_block">
|
</div>
|
||||||
<div class="generate_print_content scroll_style">
|
<div class="modal_img">
|
||||||
<div class="image_block" v-for="(img, index) in printImgList" :key="index">
|
<div class="modal_img_item" v-for="item,index in printboardList" :key="item" @click="deleteFile(item)">
|
||||||
<div class="image_block_content">
|
<img v-lazy="item.imgUrl">
|
||||||
<img class="image_body" v-lazy="img.imgUrl" :key="img.imgUrl">
|
<div class="checked" >
|
||||||
<div class="delete_file_block" @click="deleteGenerateFile(index)">Delete</div>
|
<i class="fi fi-rr-trash"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="generate_loading_mark" v-show="generateloading">
|
</div>
|
||||||
<a-spin size="large" />
|
<div v-show="openClick == 3" class="modal_accomplish">
|
||||||
</div>
|
<div class="input_box">
|
||||||
</div>
|
<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>
|
||||||
|
<div class="modal_img">
|
||||||
<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
@@ -130,11 +132,32 @@ export default defineComponent({
|
|||||||
printImgList:any = ref([]), //print的印花图片
|
printImgList:any = ref([]), //print的印花图片
|
||||||
moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboardFiles})
|
moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboardFiles})
|
||||||
let openClick: any = ref(1);
|
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 {
|
return {
|
||||||
fileList,
|
fileList,
|
||||||
printImgList,
|
printImgList,
|
||||||
moodBoards,
|
moodBoards,
|
||||||
openClick
|
openClick,
|
||||||
|
generateCheckbox,
|
||||||
|
generateList,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed:{
|
computed:{
|
||||||
@@ -170,9 +193,10 @@ export default defineComponent({
|
|||||||
currentFileNum:0, //当前上传的文件数
|
currentFileNum:0, //当前上传的文件数
|
||||||
isUpload:false,
|
isUpload:false,
|
||||||
generateloading:false,
|
generateloading:false,
|
||||||
sonData: {
|
captionGeneration:'',
|
||||||
cli: "Printboard",
|
printboardList:computed(()=>{
|
||||||
},
|
return useStore().state.UploadFilesModule.printboard
|
||||||
|
}),
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -232,16 +256,24 @@ export default defineComponent({
|
|||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
deleteFile(index:any,file:any){
|
deleteFile(item:any){
|
||||||
this.fileList.splice(index, 1)
|
// this.fileList.splice(item, 1)
|
||||||
this.store.commit('setPrintboardFile',this.fileList)
|
// 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排除的值
|
randomRange(min:any, max:any, num:any) { // min最小值，max最大值 num排除的值
|
||||||
let index = Math.floor(Math.random() * (max - min)) + min;
|
let index = Math.floor(Math.random() * (max - min)) + min;
|
||||||
while(index === num){
|
while(index === num){
|
||||||
@@ -478,111 +510,163 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
this.store.commit('setPrintboardFile',this.fileList)
|
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>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.printboard_upload_modal{
|
.printboard_upload_modal{
|
||||||
padding: 1rem 1rem 1.8rem 1rem;
|
// padding: 1rem 1rem 1.8rem 1rem;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #F2F3FB;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.printboard_left_upload{
|
.printboard_left_upload{
|
||||||
width: calc(100% - 39.8rem);
|
// width: calc(100% - 39.8rem);
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
background: #fff;
|
// background: #fff;
|
||||||
padding: 0.5rem 2.2rem 2rem 2.6rem;
|
// padding: 0.5rem 2.2rem 2rem 2.6rem;
|
||||||
box-sizing: border-box;
|
// box-sizing: border-box;
|
||||||
|
padding-top: 4rem;
|
||||||
.left_upload_header{
|
width: 47%;
|
||||||
|
.switch_type_list {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
.upload_header_item{
|
.switch_type_item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
// padding: 0 2rem;
|
||||||
.switch_type_list{
|
height: 4rem;
|
||||||
display: flex;
|
background: #fff;
|
||||||
align-items: center;
|
border-radius: 0.8rem;
|
||||||
|
line-height: 4rem;
|
||||||
.switch_type_item{
|
font-size: 1.6rem;
|
||||||
display: flex;
|
// margin-right: 2.2rem;
|
||||||
align-items: center;
|
margin-right: 8rem;
|
||||||
padding: 0 2rem;
|
color: #000;
|
||||||
height: 4rem;
|
cursor: pointer;
|
||||||
background: #fff;
|
position: relative;
|
||||||
line-height: 4rem;
|
text-align: center;
|
||||||
font-size: 1.6rem;
|
transform-origin: left;
|
||||||
margin-right: 2.2rem;
|
transform: scale(1);
|
||||||
color: #5B5E69;
|
transition: 0.3s all;
|
||||||
cursor: pointer;
|
&.switch_type_item::before {
|
||||||
|
position: absolute;
|
||||||
&.select_swtich{
|
content: "";
|
||||||
color: #343579;
|
display: block;
|
||||||
}
|
background: #000;
|
||||||
|
height: 3px;
|
||||||
.switch_icon{
|
left: 50%;
|
||||||
font-size: 1.8rem;
|
transform: translateX(-50%);
|
||||||
margin-right: 0.8rem;
|
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{
|
.switch_icon {
|
||||||
font-size: 2rem;
|
font-size: 1.8rem;
|
||||||
color: #030303;
|
margin-right: 0.8rem;
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.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{
|
.printboard_body{
|
||||||
margin-top: 1rem;
|
|
||||||
height: calc(100% - 5rem);
|
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{
|
.upload_img_body{
|
||||||
height: calc(100% - 3rem);
|
height: calc(100% - 3rem);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
|
&.upload_img_body::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload_file_item{
|
.upload_file_item{
|
||||||
margin: 0 2rem 2rem 0;
|
margin: 0 2rem 4rem 0;
|
||||||
display: inline-block;
|
// margin: 0 2rem 2rem 0;
|
||||||
vertical-align: top;
|
display: inline-block;
|
||||||
|
width: 10rem;
|
||||||
.upload_file_img_block{
|
height: 10rem;
|
||||||
width: 16.5rem;
|
border: 1px solid #f5f5f5;
|
||||||
height: 16.5rem;
|
vertical-align: top;
|
||||||
border: 1px solid #F5F5F5;
|
position: relative;
|
||||||
}
|
img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.pin_block{
|
.pin_block{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -591,168 +675,241 @@ export default defineComponent({
|
|||||||
|
|
||||||
&.upload_component{
|
&.upload_component{
|
||||||
border: none;
|
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{
|
.delete_file_block{
|
||||||
display: flex;
|
display: none;
|
||||||
align-items: center;
|
width: 3.2rem;
|
||||||
justify-content: center;
|
height: 3.2rem;
|
||||||
height: 100%;
|
background: rgba(0,0,0,0.6);
|
||||||
width: 100%;
|
border-radius: 0.4rem;
|
||||||
position: relative;
|
position: absolute;
|
||||||
cursor: pointer;
|
top: 0.9rem;
|
||||||
|
right: 0.9rem;
|
||||||
|
text-align: center;
|
||||||
&:hover .delete_file_block{
|
line-height: 3.2rem;
|
||||||
display: block;
|
left: auto;
|
||||||
}
|
.icon-shanchu{
|
||||||
|
|
||||||
.upload_img{
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete_file_block{
|
|
||||||
display: none;
|
|
||||||
width: 100%;
|
|
||||||
height: 4rem;
|
|
||||||
background: rgba(0,0,0,0.2);
|
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
color: #FFFFFF;
|
color: #fff;
|
||||||
line-height: 4rem;
|
|
||||||
text-align: center;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&: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{
|
.upload_img_icon{
|
||||||
width: 4.6rem;
|
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{
|
.modal_right{
|
||||||
width: 38.4rem;
|
flex: 1;
|
||||||
height: 100%;
|
margin-left: 3rem;
|
||||||
background: #fff;
|
.modal_layout,.modal_accomplish{
|
||||||
|
.modal_text{
|
||||||
.generate_print_header{
|
font-size: 1.2rem;
|
||||||
display: flex;
|
font-weight: 400;
|
||||||
align-items: center;
|
color: rgba(0, 0, 0, 0.45);
|
||||||
justify-content: space-between;
|
display: flex;
|
||||||
padding: 1rem 1rem 2.5rem 2.5rem;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
.generate_title{
|
}
|
||||||
font-size: 1.6rem;
|
}
|
||||||
font-weight: bold;
|
.modal_layout{
|
||||||
color: #030303;
|
.modal_img{
|
||||||
}
|
width: 40rem;
|
||||||
.generate_save_button{
|
height: 5rem;
|
||||||
background: #E6E6F6;
|
overflow-x: hidden;
|
||||||
padding: 0.1rem;
|
display: flex;
|
||||||
padding: 0 2.7rem;
|
flex-direction: row;
|
||||||
font-size: 1.4rem;
|
&.modal_img::-webkit-scrollbar {
|
||||||
height: 3.2rem;
|
display: none;
|
||||||
line-height: 3.2rem;
|
}
|
||||||
cursor: pointer;
|
.modal_img_item{
|
||||||
color: #343579;
|
width: 4rem;
|
||||||
|
height: 4rem;
|
||||||
}
|
margin: 0 1rem 1rem 0;
|
||||||
}
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
.generate_print_content_block{
|
img{
|
||||||
height: calc(100% - 6.7rem);
|
width: 100%;
|
||||||
position: relative;
|
height: 100%;
|
||||||
|
}
|
||||||
.generate_loading_mark{
|
.checked{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
top: 0;
|
||||||
top: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
cursor: pointer;
|
||||||
align-items: center;
|
display: none;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: rgba(0,0,0,0.4);
|
align-items: center;
|
||||||
z-index: 2;
|
}
|
||||||
}
|
&.modal_img_item:hover .checked{
|
||||||
|
display: flex;
|
||||||
.generate_print_content{
|
}
|
||||||
overflow-y: auto;
|
}
|
||||||
height: 100%;
|
|
||||||
padding:0 0.8rem;
|
}
|
||||||
position: relative;
|
}
|
||||||
|
.modal_accomplish{
|
||||||
|
// margin-top: 2rem;
|
||||||
|
height: 30rem;
|
||||||
.image_block{
|
display: flex;
|
||||||
display: inline-block;
|
flex-direction: column;
|
||||||
margin-right: 1.6rem;
|
.modal_text{
|
||||||
margin-bottom: 1.6rem;
|
padding-top: 2rem;
|
||||||
width: 16.5rem;
|
padding-block: 2rem;
|
||||||
height: 16.5rem;
|
}
|
||||||
border: 0.1rem solid #F5F5F5;
|
.input_box{
|
||||||
vertical-align: top;
|
input{
|
||||||
|
&.forbidden{
|
||||||
&:nth-child(2n){
|
cursor:not-allowed;
|
||||||
margin-right: 0;
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.image_block_content{
|
.modal_img{
|
||||||
display: flex;
|
flex: 1;
|
||||||
align-items: center;
|
display: flex;
|
||||||
justify-content: center;
|
flex-wrap: wrap;
|
||||||
width: 100%;
|
justify-content: flex-start;
|
||||||
height: 100%;
|
.modal_imgItem{
|
||||||
position: relative;
|
margin: 0 2rem 2rem 0;
|
||||||
|
display: inline-block;
|
||||||
&:hover .delete_file_block{
|
width: 10rem;
|
||||||
display: block;
|
height: 10rem;
|
||||||
}
|
border: 1px solid #f5f5f5;
|
||||||
|
position: relative;
|
||||||
.delete_file_block{
|
cursor: pointer;
|
||||||
display: none;
|
img{
|
||||||
width: 100%;
|
object-fit: cover;
|
||||||
height: 4rem;
|
width: 100%;
|
||||||
background: rgba(0,0,0,0.2);
|
height: 100%;
|
||||||
font-size: 1.6rem;
|
}
|
||||||
color: #FFFFFF;
|
&.active{
|
||||||
line-height: 4rem;
|
opacity: 0.5;
|
||||||
text-align: center;
|
// border: 2px solid;
|
||||||
position: absolute;
|
border-radius: 1rem;
|
||||||
left: 0;
|
img {
|
||||||
bottom: 0;
|
transform: scale(0.9);
|
||||||
cursor: pointer;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.image_body{
|
}
|
||||||
max-width: 100%;
|
}
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,306 +1,600 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="sketchboard_upload_modal">
|
<div class="sketchboard_upload_modal">
|
||||||
<div class="switch_type_list">
|
<div class="modal_left">
|
||||||
<div class="switch_type_item select_swtich">
|
<div class="switch_type_list">
|
||||||
<span>Upload</span>
|
<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>
|
||||||
<div @click="openLibrary()" class="switch_type_item">
|
<div v-show="openClick == 1" class="sketchboard_body">
|
||||||
<span>My Library</span>
|
<div class="upload_img_body scroll_style">
|
||||||
</div>
|
<div class="upload_item">
|
||||||
</div>
|
<div
|
||||||
|
class="upload_file_item"
|
||||||
<div class="sketchboard_body">
|
v-for="(file, index) in fileList"
|
||||||
<div class="upload_img_body scroll_style">
|
:key="file"
|
||||||
<div class="upload_item">
|
>
|
||||||
<div class="upload_file_item" v-for="(file,index) in fileList" :key="file">
|
<div
|
||||||
<div class="upload_file_item_content" v-show="file?.status === 'uploading'">
|
class="upload_file_item_content"
|
||||||
<a-spin :indicator="indicator" tip="Uploading..."/>
|
v-show="file?.status === 'uploading'"
|
||||||
</div>
|
>
|
||||||
<div class="upload_file_item_content" v-show="file?.status === 'done'">
|
<a-spin
|
||||||
<img :src="file?.imgUrl" class="upload_img">
|
:indicator="indicator"
|
||||||
<div class="operate_file_block" >
|
tip="Uploading..."
|
||||||
<!-- <div class="delete_file_block" @click="deleteFile(index)">Delete</div> -->
|
/>
|
||||||
<div class="select_img_type">
|
</div>
|
||||||
<div class="select_category" @click.stop="showFileCategory(file)">
|
<div
|
||||||
{{getSketchLabel(file.category)}}
|
class="upload_file_item_content"
|
||||||
<div :class="['icon','iconfont', 'icon-xiala', file.categoryShow?'icon_rotate':'']"></div>
|
v-show="file?.status === 'done'"
|
||||||
</div>
|
>
|
||||||
<div class="category_list" v-show="file.categoryShow">
|
<img :src="file?.imgUrl" class="upload_img" />
|
||||||
<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 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>
|
</div>
|
||||||
|
<div
|
||||||
|
class="delete_file_block"
|
||||||
|
@click="deleteFile(file)"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="icon iconfont icon-shanchu"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="delete_file_block" @click="deleteFile(index)">
|
<div
|
||||||
<span class="icon iconfont icon-shanchu"></span>
|
class="pin_block"
|
||||||
</div>
|
v-show="file?.status === 'done'"
|
||||||
</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="upload_tip_block" v-show="fileList.length < 15">
|
<a-checkbox v-model:checked="file.pin"
|
||||||
<img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
|
>PIN</a-checkbox
|
||||||
|
>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
<div class="upload_max_tip">
|
|
||||||
<span class="icon iconfont icon-zhuyi"></span>
|
<Material
|
||||||
<span>Maximum 15 images can be uploaded, Maximum 2M per image</span>
|
v-show="openClick == 2"
|
||||||
</div>
|
ref="Material"
|
||||||
|
msg="Sketchboard"
|
||||||
|
@confirmSelect="confirmSelect"
|
||||||
|
></Material>
|
||||||
|
<Generate
|
||||||
|
v-show="openClick == 3"
|
||||||
|
ref="Generate"
|
||||||
|
msg="Sketchboard"
|
||||||
|
@generateCheckbox="getgenerateCheckbox"
|
||||||
|
></Generate>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="modal_right">
|
||||||
<Material ref="Material" @confirmSelect="confirmSelect"></Material>
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, h,ref } from 'vue'
|
import { defineComponent, h, ref ,computed } from "vue";
|
||||||
import { LoadingOutlined } from '@ant-design/icons-vue';
|
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||||
import {getCookie} from '@/tool/cookie'
|
import { getCookie } from "@/tool/cookie";
|
||||||
import {getUploadUrl} from '@/tool/util'
|
import { getUploadUrl } from "@/tool/util";
|
||||||
import {useStore} from 'vuex'
|
import GO from "@/tool/GO";
|
||||||
import { message,Upload} from 'ant-design-vue';
|
import { useStore } from "vuex";
|
||||||
import Material from '@/component/HomePage/Material.vue'
|
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({
|
export default defineComponent({
|
||||||
components:{Material},
|
components: { Material, Generate },
|
||||||
setup(){
|
setup() {
|
||||||
let fileList:any = ref([])
|
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 {
|
return {
|
||||||
fileList
|
fileList,
|
||||||
}
|
openClick,
|
||||||
|
generateList,
|
||||||
|
generateCheckbox
|
||||||
|
};
|
||||||
},
|
},
|
||||||
data(){
|
data() {
|
||||||
return{
|
return {
|
||||||
swtich_type:'upload',
|
swtich_type: "upload",
|
||||||
indicator : h(LoadingOutlined, {
|
indicator: h(LoadingOutlined, {
|
||||||
style: {
|
style: {
|
||||||
fontSize: '2.4rem',
|
fontSize: "2.4rem",
|
||||||
},
|
},
|
||||||
spin: true,
|
spin: true,
|
||||||
}),
|
}),
|
||||||
upload:{
|
upload: {
|
||||||
isPin:0,
|
isPin: 0,
|
||||||
level1Type:'Sketchboard',
|
level1Type: "Sketchboard",
|
||||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||||
},
|
},
|
||||||
token:'',
|
token: "",
|
||||||
uploadUrl:'',
|
uploadUrl: "",
|
||||||
store:useStore(),
|
store: useStore(),
|
||||||
sketchCatecoryList:[
|
sketchCatecoryList: [
|
||||||
{
|
{
|
||||||
value: 'Outwear',
|
value: "Outwear",
|
||||||
label: "Outwear",
|
label: "Outwear",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'Blouse',
|
value: "Blouse",
|
||||||
label: "Blouse",
|
label: "Blouse",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'Dress',
|
value: "Dress",
|
||||||
label: "Dress",
|
label: "Dress",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'Trousers',
|
value: "Trousers",
|
||||||
label: "Trousers",
|
label: "Trousers",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'Skirt',
|
value: "Skirt",
|
||||||
label: "Skirt",
|
label: "Skirt",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}
|
captionGeneration:'',
|
||||||
|
sketchboardList:computed(()=>{
|
||||||
|
return useStore().state.UploadFilesModule.sketchboard
|
||||||
|
}),
|
||||||
|
};
|
||||||
},
|
},
|
||||||
computed:{
|
computed: {
|
||||||
getSketchLabel(value){
|
getSketchLabel(value) {
|
||||||
return (value:any)=>{
|
return (value: any) => {
|
||||||
let lable = '';
|
let lable = "";
|
||||||
for(let item of this.sketchCatecoryList){
|
for (let item of this.sketchCatecoryList) {
|
||||||
if(item.value === value){
|
if (item.value === value) {
|
||||||
lable = item.label
|
lable = item.label;
|
||||||
break
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return lable
|
return lable;
|
||||||
}
|
};
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted(){
|
|
||||||
this.token = getCookie('token') || ''
|
|
||||||
this.uploadUrl = getUploadUrl()
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
openLibrary(){
|
|
||||||
let material:any = this.$refs.Material
|
|
||||||
material.init('Sketchboard')
|
|
||||||
},
|
},
|
||||||
fileUploadChange(data:any){
|
|
||||||
let file = data.file
|
},
|
||||||
if(file.status === 'done'){
|
mounted() {
|
||||||
let res = JSON.parse(file.xhr.response)
|
this.token = getCookie("token") || "";
|
||||||
file.imgUrl = res.data.url
|
this.uploadUrl = getUploadUrl();
|
||||||
file.resData = res.data
|
},
|
||||||
file.pin = false
|
methods: {
|
||||||
file.category = 'Outwear'
|
open(num: Number) {
|
||||||
file.categoryShow = false
|
this.openClick = num;
|
||||||
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
|
if (num == 2) {
|
||||||
this.store.commit('setSketchboardFile',fileList)
|
let material: any = this.$refs.Material;
|
||||||
}else if(file.status === 'error'){
|
material.init("Moodboard");
|
||||||
let index = -1
|
} else if (num == 3) {
|
||||||
this.fileList.forEach((ele:any,index1:any) => {
|
// let Generate:any = this.$refs.Generate
|
||||||
if(file.uid === ele.uid){
|
// Generate.init('generate')
|
||||||
index = index1
|
}
|
||||||
|
},
|
||||||
|
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){
|
if (index > -1) {
|
||||||
this.fileList.splice(index, 1)
|
this.fileList.splice(index, 1);
|
||||||
}
|
}
|
||||||
message.error(file.name + 'upload failed')
|
message.error(file.name + "upload failed");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeUpload(file:any){
|
beforeUpload(file: any) {
|
||||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
const isJpgOrPng =
|
||||||
|
file.type === "image/jpeg" ||
|
||||||
|
file.type === "image/png" ||
|
||||||
|
file.type === "image/jpg" ||
|
||||||
|
file.type === "image/bmp";
|
||||||
if (!isJpgOrPng) {
|
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;
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||||
if (!isLt2M) {
|
if (!isLt2M) {
|
||||||
message.error('Image must smaller than 5MB!');
|
message.error("Image must smaller than 5MB!");
|
||||||
}
|
}
|
||||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||||
},
|
},
|
||||||
|
|
||||||
showFileCategory(file:any){
|
showFileCategory(file: any) {
|
||||||
file.categoryShow = true
|
file.categoryShow = true;
|
||||||
document.addEventListener('click', this.hiddenFileCategory)
|
document.addEventListener("click", this.hiddenFileCategory);
|
||||||
},
|
},
|
||||||
|
|
||||||
selectFileCategory(file:any,cate:any){
|
selectFileCategory(file: any, cate: any) {
|
||||||
file.category = cate.value
|
file.category = cate.value;
|
||||||
this.store.commit('setSketchboardFile',this.fileList)
|
this.store.commit("setSketchboardFile", this.fileList);
|
||||||
},
|
},
|
||||||
|
hiddenFileCategory() {
|
||||||
hiddenFileCategory(){
|
for (let item of this.fileList) {
|
||||||
for(let item of this.fileList){
|
item.categoryShow = false;
|
||||||
item.categoryShow = false
|
|
||||||
}
|
}
|
||||||
document.removeEventListener('click', this.hiddenFileCategory)
|
document.removeEventListener("click", this.hiddenFileCategory);
|
||||||
},
|
},
|
||||||
|
|
||||||
deleteFile(index:any){
|
deleteFile(item: any) {
|
||||||
this.fileList.splice(index, 1)
|
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
|
||||||
this.store.commit('setSketchboardFile',this.fileList)
|
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(){
|
recollection() {
|
||||||
this.fileList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.skecthboardFiles))
|
this.fileList = JSON.parse(
|
||||||
this.store.commit('setSketchboardFile',this.fileList)
|
JSON.stringify(
|
||||||
|
this.store.state.UploadFilesModule.allBoardData
|
||||||
|
.skecthboardFiles
|
||||||
|
)
|
||||||
|
);
|
||||||
|
this.store.commit("setSketchboardFile", this.fileList);
|
||||||
},
|
},
|
||||||
|
confirmSelect(event: any) {
|
||||||
confirmSelect(event:any){
|
for (let item of event) {
|
||||||
for(let item of event){
|
|
||||||
let data = {
|
let data = {
|
||||||
imgUrl:item.url,
|
imgUrl: item.url,
|
||||||
resData:item,
|
resData: item,
|
||||||
pin:false,
|
pin: false,
|
||||||
status:'done',
|
status: "done",
|
||||||
category:item.level2Type || 'Outwear',
|
category: item.level2Type || "Outwear",
|
||||||
categoryShow:false,
|
categoryShow: false,
|
||||||
|
};
|
||||||
|
if (this.fileList.length == 15) {
|
||||||
|
message.error(
|
||||||
|
"Maximum number of allowable file uploads has been exceeded"
|
||||||
|
);
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
if(this.fileList.length == 15){
|
this.fileList.push(data);
|
||||||
message.error('Maximum number of allowable file uploads has been exceeded')
|
|
||||||
break
|
|
||||||
}
|
|
||||||
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>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.sketchboard_upload_modal{
|
.sketchboard_upload_modal {
|
||||||
padding: 1.5rem 2.6rem 4rem;
|
height: 100%;
|
||||||
height: 100%;
|
display: flex;
|
||||||
|
.modal_left {
|
||||||
.switch_type_list{
|
padding-top: 4rem;
|
||||||
display: flex;
|
width: 47%;
|
||||||
align-items: center;
|
.switch_type_list {
|
||||||
|
|
||||||
.switch_type_item{
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 2rem;
|
position: relative;
|
||||||
height: 4rem;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 0.8rem;
|
|
||||||
line-height: 4rem;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
margin-right: 2.2rem;
|
|
||||||
color: #5B5E69;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&.select_swtich{
|
.switch_type_item {
|
||||||
color: #343579;
|
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{
|
.switch_icon {
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
margin-right: 0.8rem;
|
margin-right: 0.8rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.sketchboard_body {
|
||||||
}
|
|
||||||
|
|
||||||
.sketchboard_body{
|
|
||||||
margin-top: 1rem;
|
|
||||||
height: calc(100% - 5rem);
|
height: calc(100% - 5rem);
|
||||||
|
padding-top: 2.5rem;
|
||||||
.upload_img_body{
|
height: 30rem;
|
||||||
|
overflow-x: hidden;
|
||||||
|
border-right: 1px solid #e5e5e5;
|
||||||
|
&.moodboard_body::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.upload_img_body {
|
||||||
height: calc(100% - 3rem);
|
height: calc(100% - 3rem);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
|
&.upload_img_body::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload_file_item{
|
|
||||||
margin: 0 2rem 2rem 0;
|
.upload_file_item{
|
||||||
display: inline-block;
|
margin: 0 2rem 4rem 0;
|
||||||
width: 16.5rem;
|
// margin: 0 2rem 2rem 0;
|
||||||
border: 1px solid #F5F5F5;
|
display: inline-block;
|
||||||
vertical-align: top;
|
width: 10rem;
|
||||||
|
height: 10rem;
|
||||||
&.upload_component{
|
border: 1px solid #f5f5f5;
|
||||||
border: none;
|
vertical-align: top;
|
||||||
}
|
position: relative;
|
||||||
|
img{
|
||||||
.upload_file_item_content{
|
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;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
height: 16.5rem;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
.upload_img{
|
.upload_img{
|
||||||
display: block;
|
display: block;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
@@ -318,7 +612,7 @@ export default defineComponent({
|
|||||||
right: 0.9rem;
|
right: 0.9rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 3.2rem;
|
line-height: 3.2rem;
|
||||||
|
left: auto;
|
||||||
.icon-shanchu{
|
.icon-shanchu{
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@@ -331,7 +625,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
.operate_file_block{
|
.operate_file_block{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 4rem;
|
height: 3rem;
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -340,7 +634,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
.select_img_type{
|
.select_img_type{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
line-height: 4rem;
|
line-height: 3rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: rgba(0,0,0,0.6);
|
background: rgba(0,0,0,0.6);
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -363,17 +657,21 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.category_list{
|
.category_list{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 4.1rem;
|
// top: 3.1rem;
|
||||||
|
margin-top: .2rem;
|
||||||
left: 0;
|
left: 0;
|
||||||
background: rgba(0,0,0,0.4);
|
background: rgba(0,0,0,0.4);
|
||||||
border: 1px solid #343579;
|
border: 1px solid #343579;
|
||||||
border-radius: 0.8rem;
|
border-radius: 0.8rem;
|
||||||
overflow: hidden;
|
// overflow: hidden;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
height: 9rem;
|
||||||
|
overflow-x: hidden;
|
||||||
|
&.category_list::-webkit-scrollbar{display: none;}
|
||||||
|
|
||||||
.category_item{
|
.category_item{
|
||||||
text-align: left;
|
text-align: left;
|
||||||
@@ -393,28 +691,110 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pin_block{
|
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
</style>
|
||||||
|
|||||||
@@ -236,12 +236,14 @@ export default defineComponent({
|
|||||||
|
|
||||||
.collection_modal_body{
|
.collection_modal_body{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.collection_modal{
|
.collection_modal{
|
||||||
max-width: 1200px ;
|
// max-width: 1200px ;
|
||||||
|
max-width: 1150px ;
|
||||||
.ant-modal-content{
|
.ant-modal-content{
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -251,7 +253,8 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
.ant-modal-body{
|
.ant-modal-body{
|
||||||
padding: 8rem 5rem !important;
|
padding: 8rem 5rem !important;
|
||||||
height: calc(60vh - 6.4rem);
|
// height: calc(65vh - 6.4rem);
|
||||||
|
height: 60rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,11 +4,12 @@
|
|||||||
class="layout_modal"
|
class="layout_modal"
|
||||||
v-model:visible="layout"
|
v-model:visible="layout"
|
||||||
:footer="null"
|
:footer="null"
|
||||||
width="47rem"
|
width="80%"
|
||||||
:maskClosable="false"
|
:maskClosable="false"
|
||||||
:centered="true"
|
:centered="true"
|
||||||
:closable="false"
|
:closable="false"
|
||||||
:mask="false"
|
:mask="false"
|
||||||
|
:destroyOnClose="true"
|
||||||
>
|
>
|
||||||
<div class="layout_content">
|
<div class="layout_content">
|
||||||
<div class="layout_header">
|
<div class="layout_header">
|
||||||
@@ -19,14 +20,28 @@
|
|||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout_nav">
|
<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">
|
<img :src="item.imgUrl">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout_centent" :class="{active:flex_direction}">
|
<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">
|
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @click="setpitch(item)" ref="content" >
|
||||||
<img :src="item.imgUrl">
|
<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>
|
</div>
|
||||||
|
<!-- <img v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" :src="item.imgUrl"> -->
|
||||||
<!-- <draggable
|
<!-- <draggable
|
||||||
v-model="layoutList"
|
v-model="layoutList"
|
||||||
group="people"
|
group="people"
|
||||||
@@ -48,12 +63,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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="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 v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
<div
|
<div
|
||||||
class="button_second submit_button"
|
class="button_second submit_button"
|
||||||
@click="submitTemplate()"
|
@click="submitTemplate()"
|
||||||
@@ -70,8 +85,10 @@
|
|||||||
import { defineComponent, h, ref ,computed,reactive, toRefs} from "vue";
|
import { defineComponent, h, ref ,computed,reactive, toRefs} from "vue";
|
||||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
|
import GO from "@/tool/GO";
|
||||||
import moodb from "@/tool/moodb";
|
import moodb from "@/tool/moodb";
|
||||||
import draggable from 'vuedraggable'
|
import draggable from 'vuedraggable'
|
||||||
|
import domTurnImg from '@/tool/domTurnImg'
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
props:["moodb_className",'flex_direction'],
|
props:["moodb_className",'flex_direction'],
|
||||||
components: {
|
components: {
|
||||||
@@ -83,12 +100,16 @@ export default defineComponent({
|
|||||||
let templateFileList: any = ref([]);
|
let templateFileList: any = ref([]);
|
||||||
let openClick: any = ref(1);
|
let openClick: any = ref(1);
|
||||||
let drag = false;
|
let drag = false;
|
||||||
|
let layoutList:any = ref([])
|
||||||
|
const content = ref<HTMLElement | null>(null);
|
||||||
return {
|
return {
|
||||||
fileList,
|
fileList,
|
||||||
layout,
|
layout,
|
||||||
templateFileList,
|
templateFileList,
|
||||||
openClick,
|
openClick,
|
||||||
drag,
|
drag,
|
||||||
|
layoutList,
|
||||||
|
content
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -99,31 +120,18 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
spin: true,
|
spin: true,
|
||||||
}),
|
}),
|
||||||
moodTemplateId: "", //模板id
|
// moodTemplateId: "", //模板id
|
||||||
store: useStore(),
|
store: useStore(),
|
||||||
|
|
||||||
layoutList:computed(()=>{
|
// layoutList:computed(()=>{
|
||||||
return [...(useStore().state.UploadFilesModule.moodboardFiles),
|
// return [...(useStore().state.UploadFilesModule.moodboardFiles),
|
||||||
...(useStore().state.UploadFilesModule.generateFiles),
|
// ...(useStore().state.UploadFilesModule.generateFiles),
|
||||||
...(useStore().state.UploadFilesModule.MaterialFiles)]
|
// ...(useStore().state.UploadFilesModule.MaterialFiles)]
|
||||||
}),
|
// }),
|
||||||
layoutListaa:[
|
|
||||||
{
|
|
||||||
id_:1,
|
|
||||||
name:'2',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id_:2,
|
|
||||||
name:'2',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id_:3,
|
|
||||||
name:'2',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
moodb : moodb.moodb_,
|
moodb : moodb.moodb_,
|
||||||
moodbList:{},
|
moodbList:{},
|
||||||
moodbClassName:[],
|
moodbClassName:[],
|
||||||
|
setabsolute:false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -131,44 +139,382 @@ export default defineComponent({
|
|||||||
|
|
||||||
},
|
},
|
||||||
directives:{
|
directives:{
|
||||||
|
//操作移动
|
||||||
layout:{
|
layout:{
|
||||||
mounted (el,layout) {
|
mounted (el,layout:any,binding) {
|
||||||
// console.log(el,layout);
|
el.addEventListener('mousedown',(e: MouseEvent)=>{
|
||||||
layout.value.style = {
|
e.stopPropagation()
|
||||||
rotate:'',
|
el.parentElement.children.forEach((v:any) => {
|
||||||
left:'',
|
v.style.left = v.offsetLeft+'px'
|
||||||
top:'',
|
v.style.top = v.offsetTop+'px'
|
||||||
width:'',
|
|
||||||
height:'',
|
});
|
||||||
}
|
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) {
|
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: {
|
methods: {
|
||||||
init(){
|
init(){
|
||||||
this.layout = !this.layout
|
this.layout = !this.layout
|
||||||
let layoutList = [...this.store.state.UploadFilesModule.moodboardFiles,
|
let layoutList = this.store.state.UploadFilesModule.moodboard
|
||||||
...this.store.state.UploadFilesModule.generateFiles,
|
this.layoutList.forEach((v:any)=>{
|
||||||
...this.store.state.UploadFilesModule.MaterialFiles]
|
v.setPitch = false
|
||||||
console.log(this.moodb[layoutList.length]);
|
})
|
||||||
|
this.layoutList = layoutList
|
||||||
|
|
||||||
this.moodbList = this.moodb[layoutList.length-1]
|
this.moodbList = this.moodb[layoutList.length-1]
|
||||||
this.moodbClassName = this.moodb_className
|
this.moodbClassName = this.moodb_className
|
||||||
},
|
},
|
||||||
|
setpitch(item:any){
|
||||||
|
this.layoutList.forEach((v:any)=>{
|
||||||
|
v.setPitch = false
|
||||||
|
})
|
||||||
|
item.setPitch = true
|
||||||
|
},
|
||||||
setmoodb(item:any){
|
setmoodb(item:any){
|
||||||
console.log(item);
|
|
||||||
this.moodbClassName = item
|
this.moodbClassName = item
|
||||||
this.$emit('setmoodbClass',this.moodbClassName)
|
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(){
|
layoutBtnTop(){
|
||||||
this.drag=true;
|
|
||||||
},
|
|
||||||
//拖拽结束事件
|
|
||||||
onEnd() {
|
|
||||||
this.drag=false;
|
|
||||||
},
|
},
|
||||||
// setmoodbClassName(){
|
// setmoodbClassName(){
|
||||||
// },
|
// },
|
||||||
@@ -196,7 +542,6 @@ export default defineComponent({
|
|||||||
// document.body.appendChild(img);
|
// document.body.appendChild(img);
|
||||||
// var w = img.offsetWidth;
|
// var w = img.offsetWidth;
|
||||||
// var h = img.offsetHeight;
|
// var h = img.offsetHeight;
|
||||||
// console.log(w,h);
|
|
||||||
// img.remove()
|
// 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() {
|
// refetchTemplate() {
|
||||||
// let arr = Array.from({ length: this.templateFileList.length });
|
// let arr = Array.from({ length: this.templateFileList.length });
|
||||||
@@ -246,12 +582,24 @@ export default defineComponent({
|
|||||||
changeTemplateModal(){
|
changeTemplateModal(){
|
||||||
this.layout = !this.layout
|
this.layout = !this.layout
|
||||||
},
|
},
|
||||||
|
|
||||||
//提交模板
|
//提交模板
|
||||||
submitTemplate() {
|
submitTemplate() {
|
||||||
this.fileList = JSON.parse(JSON.stringify(this.templateFileList));
|
// this.fileList = JSON.parse(JSON.stringify(this.templateFileList));
|
||||||
this.store.commit("setMoodboardFile", this.fileList);
|
// this.store.commit("setMoodboardFile", this.fileList);
|
||||||
this.store.commit("setMoodTemplateId", this.moodTemplateId);
|
// this.store.commit("setMoodTemplateId", this.moodTemplateId);
|
||||||
this.changeTemplateModal();
|
// 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">
|
<style lang="less">
|
||||||
.layout_modal {
|
.layout_modal {
|
||||||
width: 80% !important;
|
max-width: 1150px;
|
||||||
.ant-modal-body {
|
.ant-modal-body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: calc(60vh - 6.4rem);
|
// height: calc(65vh - 6.4rem);
|
||||||
|
height: 60rem;
|
||||||
}
|
}
|
||||||
.ant-modal-content{
|
.ant-modal-content{
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
@@ -295,6 +644,13 @@ export default defineComponent({
|
|||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
.active{
|
||||||
|
img{
|
||||||
|
border: 2px solid;
|
||||||
|
border-radius: 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
img{
|
img{
|
||||||
width:5rem;
|
width:5rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -303,54 +659,166 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
.layout_centent{
|
.layout_centent{
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 60%;
|
height: 55%;
|
||||||
|
// height: 60%;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-content: space-around;
|
align-content: space-around;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
margin: auto;
|
margin: 3rem auto;
|
||||||
padding: 3rem 0;
|
overflow: hidden;
|
||||||
|
// padding: 3rem 0;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
>div{
|
position: relative;
|
||||||
// width: 100%;
|
user-select:none
|
||||||
// height: 100%;
|
|
||||||
// display: flex;
|
|
||||||
// flex-direction: column;
|
|
||||||
// flex-wrap: wrap;
|
|
||||||
// align-content: space-around;
|
|
||||||
// margin: auto;
|
|
||||||
// justify-content: space-between;
|
|
||||||
}
|
|
||||||
&.active{
|
&.active{
|
||||||
flex-direction: row;
|
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{
|
.layout_centent_bor{
|
||||||
|
|
||||||
}
|
}
|
||||||
.modal_imgItem{
|
.modal_imgItem{
|
||||||
position: relative;
|
position: relative;
|
||||||
img{
|
// >div{
|
||||||
|
// position: absolute;
|
||||||
|
// width: 100%;
|
||||||
|
// height: 100%;
|
||||||
|
// }
|
||||||
|
overflow: hidden;
|
||||||
|
&.active{
|
||||||
position: absolute;
|
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{
|
.wh1{
|
||||||
width: 23%;
|
width: 23%;
|
||||||
height: 48%;
|
height: 48%;
|
||||||
|
|
||||||
}
|
}
|
||||||
.wh4{
|
.wh4{
|
||||||
width: 48.5%;
|
width: 48.5%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
}
|
}
|
||||||
.w1h2{
|
.w1h2{
|
||||||
width: 23%;
|
width: 23%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
}
|
}
|
||||||
.w2h1{
|
.w2h1{
|
||||||
width: 48.5%;
|
width: 48.5%;
|
||||||
@@ -360,7 +828,7 @@ export default defineComponent({
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
left: 0;
|
left: 2rem;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
// background-color: #000;
|
// background-color: #000;
|
||||||
width: 8%;
|
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";
|
import { message } from "ant-design-vue";
|
||||||
|
|
||||||
interface UploadFiles{
|
interface UploadFiles{
|
||||||
|
moodboard:any,
|
||||||
moodboardFiles:any,
|
moodboardFiles:any,
|
||||||
|
moodboardGenerateFiles:any,
|
||||||
|
moodboardMaterialFiles:any,
|
||||||
|
sketchboard:any,
|
||||||
|
sketchboardFiles:any,
|
||||||
|
sketchGenerateFiles:any,
|
||||||
|
sketchMaterialFiles:any,
|
||||||
|
printboard:any,
|
||||||
printboardFiles:any,
|
printboardFiles:any,
|
||||||
generatePrintFiles:any,
|
printGenerateFiles:any,
|
||||||
generateFiles:any,
|
printMaterialFiles:any,
|
||||||
MaterialFiles:any,
|
|
||||||
generateList:any,
|
|
||||||
colorBoards:any,
|
colorBoards:any,
|
||||||
skecthboardFiles:any,
|
|
||||||
marketingSketchFiles:any,
|
marketingSketchFiles:any,
|
||||||
allBoardData:any, //备份的所有数据，点finish之后备份
|
allBoardData:any, //备份的所有数据，点finish之后备份
|
||||||
moodTemplateId:any,
|
moodTemplateId:any,
|
||||||
@@ -18,35 +23,50 @@ interface UploadFiles{
|
|||||||
|
|
||||||
const UploadFilesModule : Module<UploadFiles,RootState> = {
|
const UploadFilesModule : Module<UploadFiles,RootState> = {
|
||||||
state:{
|
state:{
|
||||||
|
moodboard:[],
|
||||||
moodboardFiles:[],
|
moodboardFiles:[],
|
||||||
|
moodboardGenerateFiles:[],
|
||||||
|
moodboardMaterialFiles:[],
|
||||||
|
sketchboard:[],
|
||||||
|
sketchboardFiles:[],
|
||||||
|
sketchGenerateFiles:[],
|
||||||
|
sketchMaterialFiles:[],
|
||||||
|
printboard:[],
|
||||||
printboardFiles:[],
|
printboardFiles:[],
|
||||||
generatePrintFiles:[],
|
printGenerateFiles:[],
|
||||||
generateFiles:[],
|
printMaterialFiles:[],
|
||||||
MaterialFiles:[],
|
|
||||||
generateList:[],
|
|
||||||
colorBoards:[],
|
colorBoards:[],
|
||||||
skecthboardFiles:[],
|
|
||||||
marketingSketchFiles:[],
|
marketingSketchFiles:[],
|
||||||
allBoardData:{},
|
allBoardData:{},
|
||||||
moodTemplateId:'',
|
moodTemplateId:'',
|
||||||
|
|
||||||
},
|
},
|
||||||
mutations:{
|
mutations:{
|
||||||
|
|
||||||
setMoodboardFile(state,files){
|
setMoodboardFile(state,files){
|
||||||
state.moodboardFiles = files
|
state.moodboardFiles = files
|
||||||
},
|
state.moodboard = [...state.moodboardFiles,...state.moodboardGenerateFiles,...state.moodboardMaterialFiles]
|
||||||
setPrintboardFile(state,files){
|
|
||||||
state.printboardFiles = files
|
|
||||||
},
|
|
||||||
setGeneratePrintFile(state,files){
|
|
||||||
state.generatePrintFiles = files
|
|
||||||
},
|
},
|
||||||
addGenerateMaterialFils(state,data){
|
addGenerateMaterialFils(state,data){
|
||||||
let file
|
let file
|
||||||
let arr = [...state.generateFiles,...state.MaterialFiles,...state.moodboardFiles]
|
let arr = state.moodboard
|
||||||
if(data.type_ == 'generate'){
|
if(data.type_.type1 == 'generate'){
|
||||||
file = state.generateFiles
|
|
||||||
|
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{
|
}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(file.length == 0){
|
||||||
if(arr.length >= 8){
|
if(arr.length >= 8){
|
||||||
@@ -75,35 +95,51 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
|||||||
file = file.filter((v:any)=> v.id_ != data.id_)
|
file = file.filter((v:any)=> v.id_ != data.id_)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if(data.type_ == 'generate'){
|
if(data.type_.type1 == 'generate'){
|
||||||
state.generateFiles = file
|
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{
|
}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){
|
setSketchboardFile(state,files){
|
||||||
state.generateList = list
|
state.sketchboardFiles = files
|
||||||
|
state.sketchboard = [...state.sketchboardFiles,...state.sketchGenerateFiles,...state.sketchMaterialFiles]
|
||||||
|
|
||||||
},
|
},
|
||||||
// setGenerateFils(state,files){
|
setPrintboardFile(state,files){
|
||||||
// state.generateFiles = files
|
state.printboardFiles = files
|
||||||
// },
|
state.printboard = [...state.printboardFiles,...state.printGenerateFiles,...state.printMaterialFiles]
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
setColorboardList(state,colorBoards){
|
setColorboardList(state,colorBoards){
|
||||||
state.colorBoards = colorBoards
|
state.colorBoards = colorBoards
|
||||||
},
|
},
|
||||||
setSketchboardFile(state,files){
|
|
||||||
state.skecthboardFiles = files
|
|
||||||
},
|
|
||||||
setMarketingSketchFile(state,files){
|
setMarketingSketchFile(state,files){
|
||||||
state.marketingSketchFiles = files
|
state.marketingSketchFiles = files
|
||||||
},
|
},
|
||||||
setAllBoardData(state){
|
setAllBoardData(state){
|
||||||
state.allBoardData = {
|
state.allBoardData = {
|
||||||
moodboardFiles:state.moodboardFiles,
|
moodboardFiles:state.moodboard,
|
||||||
printboardFiles:state.printboardFiles,
|
printboardFiles:state.printboardFiles,
|
||||||
generatePrintFiles:state.generatePrintFiles,
|
|
||||||
generateFiles:state.generateFiles,
|
|
||||||
colorBoards:state.colorBoards,
|
colorBoards:state.colorBoards,
|
||||||
skecthboardFiles:state.skecthboardFiles,
|
sketchboardFiles:state.sketchboard,
|
||||||
marketingSketchFiles:state.marketingSketchFiles,
|
marketingSketchFiles:state.marketingSketchFiles,
|
||||||
moodTemplateId:state.moodTemplateId,
|
moodTemplateId:state.moodTemplateId,
|
||||||
}
|
}
|
||||||
@@ -112,13 +148,19 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
|||||||
state.allBoardData = data
|
state.allBoardData = data
|
||||||
},
|
},
|
||||||
clearAllData(state){
|
clearAllData(state){
|
||||||
|
state.moodboard = []
|
||||||
state.moodboardFiles = []
|
state.moodboardFiles = []
|
||||||
state.printboardFiles = []
|
state.moodboardGenerateFiles = []
|
||||||
state.generatePrintFiles=[]
|
state.moodboardMaterialFiles = []
|
||||||
state.generateFiles = []
|
state.sketchboard = []
|
||||||
state.MaterialFiles = []
|
state.sketchboardFiles = []
|
||||||
state.colorBoards = []
|
state.sketchGenerateFiles = []
|
||||||
state.skecthboardFiles = []
|
state.sketchMaterialFiles = []
|
||||||
|
state.printboard = []
|
||||||
|
state.printboardFiles = []
|
||||||
|
state.printGenerateFiles = []
|
||||||
|
state.printMaterialFiles = []
|
||||||
|
state.colorBoards = []
|
||||||
state.marketingSketchFiles = []
|
state.marketingSketchFiles = []
|
||||||
state.moodTemplateId = ''
|
state.moodTemplateId = ''
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
export default {
|
export default {
|
||||||
id : 1,
|
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; //配置接口地址
|
||||||
// }
|
// }
|
||||||
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传参序列化(添加请求拦截器)
|
//POST传参序列化(添加请求拦截器)
|
||||||
axios.interceptors.request.use((config) => {
|
axios.interceptors.request.use((config) => {
|
||||||
//在发送请求之前做某件事
|
//在发送请求之前做某件事
|
||||||
@@ -78,7 +78,7 @@ export const Https = {
|
|||||||
designCollection:'/api/design/designCollection', //设计 Conllection
|
designCollection:'/api/design/designCollection', //设计 Conllection
|
||||||
reDesignCollection:'/api/design/reDesignCollection',//重新设计 Conllection
|
reDesignCollection:'/api/design/reDesignCollection',//重新设计 Conllection
|
||||||
countDesignProcess:'/api/design/countDesignProcess', //统计design进度
|
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
|
designLike:'/api/design/like', //Design Like
|
||||||
designDislike: '/api/design/dislike', //Design Dislike
|
designDislike: '/api/design/dislike', //Design Dislike
|
||||||
queryUserGroup:'/api/history/queryUserGroup', //History用户分页分组列表
|
queryUserGroup:'/api/history/queryUserGroup', //History用户分页分组列表
|
||||||
@@ -99,8 +99,9 @@ export const Https = {
|
|||||||
saveOrEditTemplatePoint:'/api/library/saveOrEditTemplatePoint',//保存或者编辑template打点
|
saveOrEditTemplatePoint:'/api/library/saveOrEditTemplatePoint',//保存或者编辑template打点
|
||||||
libraryModelsDot:'/api/library/modelsDot',//Models打点预览
|
libraryModelsDot:'/api/library/modelsDot',//Models打点预览
|
||||||
pythonChatStream:'/api/python/chatStream',//机器人助力
|
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) {
|
axiosGet(url,config) {
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ module.exports = defineConfig({
|
|||||||
// target: process.env.VUE_APP_BASE_URL,
|
// target: process.env.VUE_APP_BASE_URL,
|
||||||
// changeOrigin: true, //是否允许跨越
|
// changeOrigin: true, //是否允许跨越
|
||||||
// }
|
// }
|
||||||
'http://192.168.1.5:10086/api':{
|
'/api':{
|
||||||
target:'http://18.167.251.121:5567',
|
target:'http://18.167.251.121:5567',
|
||||||
changeOrigin:true,
|
changeOrigin:true,
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user