first commit
This commit is contained in:
LiaoFJ
546
src/component/HomePage/ColorboardUpload.vue
Normal file
546
src/component/HomePage/ColorboardUpload.vue
Normal file
@@ -0,0 +1,546 @@
|
||||
<template>
|
||||
<div class="colorboard_upload_modal">
|
||||
<div class="colorboard_upload_left">
|
||||
<div class="upload_left_header">
|
||||
<span class="color_list icon iconfont icon-diaosebanpalette3"></span>
|
||||
<span>My Color Palette</span>
|
||||
</div>
|
||||
<div class="upload_left_content scroll_style">
|
||||
<div class="upload_color_block" v-for="(color,index) in colorList" :key="color">
|
||||
<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '']" :style="{background:`rgb(${color?.r},${color?.g},${color?.b})`}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colorboard_upload_right">
|
||||
<div class="upload_right_content">
|
||||
<div class="right_content_line">
|
||||
<div class="upload_right_header">
|
||||
<span class="color_edit icon iconfont icon-yansefangan"></span>
|
||||
<span>Choose Color</span>
|
||||
</div>
|
||||
<div class="color_setting_block">
|
||||
<Chrome class="chrome_color" v-model="selectColor"></Chrome>
|
||||
<Slider class="sileder_color" v-model="selectColor"></Slider>
|
||||
<div class="color_rgb_block">
|
||||
<div class="rgb_item">R:{{getSelectRGB(selectColor).r}}</div>
|
||||
<div class="rgb_item">G:{{getSelectRGB(selectColor).g}}</div>
|
||||
<div class="rgb_item">B:{{getSelectRGB(selectColor).b}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="color_review_block">
|
||||
<div class="color_review_content" :style="{background: reviewColor?.r || reviewColor?.r===0 ?`rgb(${reviewColor?.r},${reviewColor?.g},${reviewColor?.b})` : 'none'}"></div>
|
||||
<div class="pantong_name" v-show="pantongName">{{pantongName}}</div>
|
||||
<div class="clear_button" @click="clearCurrentColor()">Clear</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="right_content_line">
|
||||
<div class="upload_right_header">
|
||||
<span class="color_edit icon iconfont icon-yansefangan"></span>
|
||||
<span>Upload Color</span>
|
||||
</div>
|
||||
<div class="upload_item">
|
||||
<div class="upload_file_item" v-for="(file) in fileList" :key="file">
|
||||
<div class="upload_file_item_content" v-show="file.status !== 'done'">
|
||||
<a-spin :indicator="indicator" tip="Uploading..."/>
|
||||
</div>
|
||||
<div class="upload_file_item_content" v-show="file.status === 'done'">
|
||||
<img :src="file?.imgUrl" class="upload_img" ref="colorImage">
|
||||
<div class="delete_file_block" @click="deleteFile(index)">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-upload
|
||||
v-show="fileList.length < 1"
|
||||
list-type="picture-card"
|
||||
:customRequest="function(){}"
|
||||
@change="fileUploadChange"
|
||||
:before-upload="beforeUpload"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
>
|
||||
<div class="upload_tip_block">
|
||||
<img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
|
||||
<div class="upload_right_header">
|
||||
<span class="color_edit icon iconfont icon-yansefangan"></span>
|
||||
<span>Key in Color Code</span>
|
||||
</div>
|
||||
<div class="get_color_block">
|
||||
<input class="get_color_input" placeholder="tcx value (e.g.: 19-4052)" v-model="tcxColor" @keydown.enter="getTcxColor()"/>
|
||||
<div class="get_color_button" @click="getTcxColor()">
|
||||
<span class="icon iconfont icon-huoquduixiang"></span>
|
||||
<span class="get_color_des">Extract Color</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Chrome,Slider } from '@ans1998/vue3-color'
|
||||
import { Https } from "@/tool/https";
|
||||
import { defineComponent, h,ref } from 'vue'
|
||||
import { LoadingOutlined } from '@ant-design/icons-vue';
|
||||
import {getCookie} from '@/tool/cookie'
|
||||
import {getUploadUrl,rgbToHsv} from '@/tool/util'
|
||||
import {useStore} from 'vuex'
|
||||
import ColorThief from '@/tool/colorthief/colorthief'
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
export default defineComponent({
|
||||
components:{
|
||||
Chrome,
|
||||
Slider
|
||||
},
|
||||
setup(){
|
||||
let fileList:any = ref([])
|
||||
let colorList:any = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
|
||||
let selectColor:any = ref({rgba:{}}) //顔色选择器默认颜色
|
||||
return {
|
||||
fileList,
|
||||
colorList,
|
||||
selectColor,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
selectColor(newVal:any,oldVal:any){
|
||||
this.reviewColor = newVal.rgba || {}
|
||||
this.colorList[this.selectIndex] = newVal.rgba
|
||||
let colorList =this.colorList.filter((v:any) => v && Object.keys(v).length)
|
||||
this.setColorboardList(colorList)
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
getSelectRGB(selectColor){
|
||||
return (selectColor:any)=>{
|
||||
let rgba = selectColor.rgba
|
||||
let data = {
|
||||
r:rgba?.r || rgba?.r===0 ? rgba?.r : 255,
|
||||
g:rgba?.g || rgba?.g===0 ? rgba?.g : 255,
|
||||
b:rgba?.b || rgba?.b===0 ? rgba?.b : 255,
|
||||
}
|
||||
return data
|
||||
}
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
|
||||
reviewColor:{}, //预览的颜色
|
||||
selectIndex:0,//选中的文件索引
|
||||
tcxColor:'',
|
||||
pantongName:'',//潘通值
|
||||
indicator : h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: '2.4rem',
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
upload:{
|
||||
isPin:0,
|
||||
level1Type:'Moodboard',
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
token:'',
|
||||
uploadUrl:'',
|
||||
store:useStore()
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.token = getCookie('token') || ''
|
||||
this.uploadUrl = getUploadUrl()
|
||||
},
|
||||
methods:{
|
||||
//选择不同的色块
|
||||
selectColorItem(index:any,color:any){
|
||||
this.selectIndex = index
|
||||
this.reviewColor = color?.r + ''? {r:color.r,g:color.g ,b:color.b } : {}
|
||||
this.selectColor = color?.r + ''? {rgba:{r:color.r,g:color.g,b:color.b,a:1}} : {}
|
||||
this.fileList = []
|
||||
this.tcxColor = ''
|
||||
this.pantongName = ''
|
||||
},
|
||||
|
||||
//通过tcx获取颜色
|
||||
getTcxColor(){
|
||||
if(!this.tcxColor){
|
||||
return
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.getRgbByTcx + '?tcx=' + this.tcxColor).then((rv) =>{
|
||||
if(rv && rv.name){
|
||||
this.reviewColor = {r:rv.r, g:rv.g, b:rv.b}
|
||||
this.colorList[this.selectIndex] = {r:rv.r, g:rv.g, b:rv.b}
|
||||
this.pantongName = rv.name
|
||||
let colorList =this.colorList.filter((v:any) => Object.keys(v).length)
|
||||
this.setColorboardList(colorList)
|
||||
}else{
|
||||
message.error("Can't find the TCX color")
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//清除当前的颜色
|
||||
clearCurrentColor(){
|
||||
this.selectColor = {}
|
||||
this.fileList = []
|
||||
this.pantongName = ''
|
||||
this.tcxColor = ''
|
||||
},
|
||||
|
||||
fileUploadChange(data:any){
|
||||
let file = data.file
|
||||
let fileData = file.originFileObj
|
||||
var reader = new FileReader();
|
||||
reader.onload = (e:any) => {
|
||||
let data_new;
|
||||
if (typeof e.target.result === 'object') {
|
||||
// 把Array Buffer转化为blob 如果是base64不需要
|
||||
data_new = window.URL.createObjectURL(new Blob([e.target.result]));
|
||||
} else {
|
||||
data_new = e.target.result;
|
||||
}
|
||||
file.imgUrl = data_new
|
||||
file.status = 'done'
|
||||
this.fileList.push(file)
|
||||
|
||||
setTimeout(()=>{
|
||||
const colorThief = new ColorThief();
|
||||
let colorImage:any = this.$refs.colorImage
|
||||
let domImg:any = colorImage[0];
|
||||
let color = colorThief.getColor(domImg)
|
||||
this.getHsvColor(color)
|
||||
this.reviewColor = {r:color[0],g:color[1],b:color[2]}
|
||||
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1}}
|
||||
},100)
|
||||
};
|
||||
// 转化为base64S
|
||||
reader.readAsDataURL(fileData)
|
||||
},
|
||||
|
||||
beforeUpload(file:any){
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
if (!isJpgOrPng) {
|
||||
message.error('You can only upload Image file!');
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must smaller than 5MB!');
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
|
||||
deleteFile(index:any){
|
||||
this.fileList.splice(index, 1)
|
||||
},
|
||||
|
||||
//通过HSV获取颜色
|
||||
getHsvColor(color:any){
|
||||
let hsv = rgbToHsv(color)
|
||||
this.pantongName = ''
|
||||
Https.axiosGet(Https.httpUrls.getRgbByHsv + `?h=${hsv[0]}&s=${hsv[0]}&v=${hsv[1]}`).then((rv) =>{
|
||||
if(rv){
|
||||
this.pantongName = rv.name
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
setColorboardList(colorList:any){
|
||||
let newColorList = colorList.map((v:any)=>{
|
||||
let data = {
|
||||
id:'',
|
||||
name:'',
|
||||
rgbValue:v
|
||||
}
|
||||
return data
|
||||
})
|
||||
this.store.commit('setColorboardList',newColorList)
|
||||
|
||||
},
|
||||
|
||||
recollection(){
|
||||
let colorList = this.store.state.UploadFilesModule.allBoardData.colorBoards
|
||||
colorList.forEach((ele:any, index:number) => {
|
||||
this.colorList[index] = ele.rgbValue
|
||||
});
|
||||
this.reviewColor = this.colorList[0]
|
||||
this.selectColor = {rgba:this.colorList[0]}, //顔色选择器默认颜色
|
||||
this.store.commit('setColorboardList',colorList)
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.colorboard_upload_modal{
|
||||
padding: 1rem 1rem 1.8rem 1rem;
|
||||
height: 100%;
|
||||
background: #F2F3FB;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.colorboard_upload_left{
|
||||
width: calc(100% - 48rem);
|
||||
height: 100%;
|
||||
background: #FFFFFF;
|
||||
|
||||
.upload_left_header{
|
||||
padding: 1.4rem 2rem 1.6rem;
|
||||
font-size: 1.6rem;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 2.4rem;
|
||||
|
||||
.color_list{
|
||||
font-size: 2.2rem;
|
||||
margin-right: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.upload_left_content{
|
||||
padding: 1rem 1.6rem;
|
||||
height: calc(100% - 5.4rem);
|
||||
overflow-y: auto;
|
||||
|
||||
.upload_color_block{
|
||||
padding: 0 0.4rem;
|
||||
margin-bottom: 2.6rem;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
.upload_color{
|
||||
width: 11.5rem;
|
||||
height: 11.5rem;
|
||||
border: 0.1rem solid #DCDCEC;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select_upload_color{
|
||||
border-color: #343579;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.colorboard_upload_right{
|
||||
width: 47rem;
|
||||
height: 100%;
|
||||
background: #FFFFFF;
|
||||
|
||||
.upload_right_header{
|
||||
padding: 0.4rem 0 1.6rem 0;
|
||||
font-weight: bold;
|
||||
line-height: 2.4rem;
|
||||
font-size: 1.6rem;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.color_edit{
|
||||
font-size: 2.4rem;
|
||||
margin-right: 0.7rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.upload_right_content{
|
||||
padding: 1rem 2.8rem;
|
||||
height: calc(100% - 5.4rem);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
|
||||
.right_content_line{
|
||||
margin-bottom: 2.3rem;
|
||||
|
||||
.color_review_block{
|
||||
margin-right: 4rem;
|
||||
|
||||
.color_review_content{
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
background: #FFFFFF;
|
||||
border: 0.1rem solid #DCDCEC;
|
||||
}
|
||||
|
||||
.pantong_name{
|
||||
margin-top: 1rem;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
color: #030303;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.clear_button{
|
||||
padding: 0 2.8rem;
|
||||
height: 3.2rem;
|
||||
line-height: 3.2rem;
|
||||
background: #EFEEFF;
|
||||
font-size: 1.2rem;
|
||||
font-family: Roboto;
|
||||
color: #343579;
|
||||
display: inline-block;
|
||||
margin-top: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.upload_file_item{
|
||||
margin: 0 2rem 2rem 0;
|
||||
display: inline-block;
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
border: 1px solid #F5F5F5;
|
||||
vertical-align: top;
|
||||
|
||||
.upload_file_item_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover .delete_file_block{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.upload_img{
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.delete_file_block{
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
background: rgba(0,0,0,0.2);
|
||||
font-size: 1.6rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 4rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload_img_icon{
|
||||
width: 4.6rem;
|
||||
}
|
||||
|
||||
.color_setting_block{
|
||||
width: 16.5rem;
|
||||
margin-right: 4rem;
|
||||
margin-bottom: 7rem;
|
||||
.vc-chrome-body{
|
||||
display: none;
|
||||
}
|
||||
.chrome_color{
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
overflow: hidden;
|
||||
|
||||
.vc-chrome-saturation-wrap{
|
||||
height: 100%;
|
||||
}
|
||||
.vc-chrome-saturation-wrap .vc-saturation-circle{
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sileder_color{
|
||||
margin-top:1.3rem;
|
||||
|
||||
.vc-slider-swatches{
|
||||
display:none
|
||||
}
|
||||
.vc-slider-hue-warp {
|
||||
width: 16.5rem;
|
||||
height: 2.4rem;
|
||||
border-radius: 1.2rem;
|
||||
overflow: hidden;
|
||||
|
||||
.vc-hue-picker{
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
border-radius: 50%;
|
||||
transform: translate(-0.7rem, -0.2rem);
|
||||
}
|
||||
}
|
||||
.vc-hue-pointer{
|
||||
top: 0.5rem !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.color_rgb_block{
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 1.6rem;
|
||||
color: #343579;
|
||||
}
|
||||
}
|
||||
|
||||
.get_color_block{
|
||||
|
||||
.get_color_input{
|
||||
width: 19.4rem;
|
||||
height: 3.8rem;
|
||||
background: #FFFFFF;
|
||||
border: 0.1rem solid #DCDCEC;
|
||||
padding: 1rem 1.3rem;
|
||||
box-sizing: border-box;
|
||||
font-size: 1.4rem;
|
||||
text-align: left;
|
||||
|
||||
&::placeholder {
|
||||
color: #B7B7B7;
|
||||
}
|
||||
}
|
||||
|
||||
.get_color_button{
|
||||
margin-top: 1.5rem;
|
||||
padding: 0 2.2rem;
|
||||
height: 3.2rem;
|
||||
background: #EFEEFF;
|
||||
display: inline-block;
|
||||
line-height: 3rem;
|
||||
font-size: 1.2rem;
|
||||
color: #343579;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
.icon-huoquduixiang{
|
||||
margin-right: 0.5rem;
|
||||
font-size: 2rem;
|
||||
color:#343579;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.get_color_des{
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload_item{
|
||||
margin-bottom: 11.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
316
src/component/HomePage/Cropper.vue
Normal file
316
src/component/HomePage/Cropper.vue
Normal file
@@ -0,0 +1,316 @@
|
||||
<template>
|
||||
<a-modal class="modal_component cut_pricture_modal"
|
||||
v-model:visible="cutPicuterModal"
|
||||
:footer="null"
|
||||
title="Cut picture"
|
||||
width="115rem"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
>
|
||||
<template #closeIcon>
|
||||
<div class="header_right_block" @click.stop="">
|
||||
<div class="next_step_button" @click.stop="finishCropper()">Finish</div>
|
||||
<div class="header_cancel_button" @click.stop="cancleCropper()">Cancel</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="collection_modal_body">
|
||||
<div class="cut_picture_left">
|
||||
<div class="cut_picture_body">
|
||||
<VueCropper
|
||||
ref="cropper"
|
||||
:original="option.original"
|
||||
:img="option.img"
|
||||
:outputSize="option.size"
|
||||
:outputType="option.outputType"
|
||||
:auto-crop="option.autoCrop"
|
||||
:auto-crop-width="option.autoCropWidth"
|
||||
:auto-crop-height="option.autoCropHeight"
|
||||
:center-box="option.centerBox"
|
||||
:can-move="option.canMove" :can-move-box="option.canMoveBox"
|
||||
@real-time="realTime"
|
||||
></VueCropper>
|
||||
</div>
|
||||
<div class="cur_picture_opterate">
|
||||
<div class="cur_picture_opterate_item" @click="rotateLeft()"><span class="icon iconfont icon-chexiao operate_icon"></span></div>
|
||||
<div class="cur_picture_opterate_item" @click="rotateRight()"><span class="icon iconfont icon-chexiao operate_icon icon_chexiao_sec"></span></div>
|
||||
<div class="cur_picture_opterate_item" @click="changeScale(-1)"><span class="operate_icon icon_font">-</span></div>
|
||||
<div class="cur_picture_opterate_item" @click="changeScale(1)"><span class="operate_icon icon_font">+</span></div>
|
||||
<div class="cur_picture_opterate_item" @click="refreshCrop()"><span class="icon iconfont icon-shuaxin operate_icon"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cut_picture_right">
|
||||
<div class="cur_picture_right_header">
|
||||
<div class="review_logo icon iconfont icon-yulan"></div>
|
||||
<div>Crop Preview</div>
|
||||
</div>
|
||||
<div class="cut_picture_review_block">
|
||||
<div class="cut_picture_review_item">
|
||||
<div class="cut_picture_review_content" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
|
||||
<div :style="previews.div" >
|
||||
<img class="previews_image" :style="previews.img" :src="previews.url">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cut_picture_review_item">
|
||||
<div class="cut_picture_review_block_sec" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
|
||||
<div :style="previews.div" >
|
||||
<img class="previews_image" :style="previews.img" :src="previews.url">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import 'vue-cropper/dist/index.css'
|
||||
import { VueCropper } from "vue-cropper";
|
||||
import {base64toFile} from '@/tool/util'
|
||||
export default defineComponent({
|
||||
props:['cropperFileData','isUpload'],
|
||||
components:{
|
||||
VueCropper,
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
cutPicuterModal:false,
|
||||
option: {
|
||||
original:false,
|
||||
img: '',
|
||||
size: 1,
|
||||
full: false,
|
||||
outputType: 'png',
|
||||
autoCrop: true,
|
||||
// 只有自动截图开启 宽度高度才生效
|
||||
autoCropWidth: 360,
|
||||
autoCropHeight: 360,
|
||||
max: 99999,
|
||||
centerBox:true,
|
||||
canMove:true,
|
||||
canMoveBox:true,
|
||||
},
|
||||
previews:{},
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
||||
rotateLeft() {
|
||||
let cropper:any = this.$refs.cropper
|
||||
cropper.rotateLeft();
|
||||
},
|
||||
rotateRight() {
|
||||
let cropper:any = this.$refs.cropper
|
||||
cropper.rotateRight();
|
||||
},
|
||||
refreshCrop() {
|
||||
let cropper:any = this.$refs.cropper
|
||||
cropper.refresh();
|
||||
},
|
||||
|
||||
changeScale(num:any) {
|
||||
num = num || 1;
|
||||
let cropper:any = this.$refs.cropper
|
||||
cropper.changeScale(num);
|
||||
},
|
||||
// 实时预览函数
|
||||
realTime(data:any) {
|
||||
this.previews = data;
|
||||
},
|
||||
|
||||
getOptionImg(img:any){
|
||||
this.option.img = img
|
||||
},
|
||||
|
||||
changeShowModal(type:any){
|
||||
this.cutPicuterModal = type
|
||||
},
|
||||
|
||||
finishCropper(){
|
||||
let cropper:any = this.$refs.cropper,
|
||||
that = this
|
||||
cropper.getCropData((data:any) => {
|
||||
// 转换为File对象
|
||||
let file = base64toFile(data,this.cropperFileData.name);
|
||||
this.$emit('handleCropperSuccess',{file:file, fileData:this.cropperFileData})
|
||||
})
|
||||
},
|
||||
|
||||
closeCropper(){
|
||||
this.cutPicuterModal = false
|
||||
this.option.img = ''
|
||||
},
|
||||
|
||||
cancleCropper(){
|
||||
this.cutPicuterModal = false
|
||||
this.option.img = ''
|
||||
this.$emit('closeCropper')
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.cut_pricture_modal{
|
||||
.header_right_block{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 2.1rem;
|
||||
height: 100%;
|
||||
|
||||
.next_step_button{
|
||||
padding: 0 1.2rem;
|
||||
height: 3.2rem;
|
||||
background: linear-gradient(160deg, #AC2A3B, #292161);
|
||||
border-radius: 1.6rem;
|
||||
font-size: 1.4rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 3.2rem;
|
||||
margin-right: 1.6rem;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header_cancel_button{
|
||||
padding: 0 2.1rem;
|
||||
height: 3.2rem;
|
||||
background: #E4E5EB;
|
||||
border-radius: 1.6rem;
|
||||
font-size: 1.4rem;
|
||||
color: #030303;
|
||||
line-height: 3.2rem;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.collection_modal_body{
|
||||
height: 100%;
|
||||
padding: 1rem 2.5rem 1.4rem 1.4rem;
|
||||
box-sizing: border-box;
|
||||
background: #F2F3FB;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.cut_picture_left{
|
||||
width: 70.7rem;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
border-radius: 2rem;
|
||||
padding: 1.3rem 1.3rem 2rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.cut_picture_body{
|
||||
width: 100%;
|
||||
height: 53rem;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.cur_picture_opterate{
|
||||
margin: 2.7rem auto 0;
|
||||
border-radius: 1.6rem;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
border: 1px solid #E2E2E4;
|
||||
width: 24rem;
|
||||
|
||||
.cur_picture_opterate_item{
|
||||
width: 4.7rem;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-right: 0.1rem solid #E6E8EA;
|
||||
cursor: pointer;
|
||||
|
||||
.icon_chexiao_sec{
|
||||
transform: rotateY(180deg); /* 垂直镜像翻转 */
|
||||
}
|
||||
|
||||
.operate_icon{
|
||||
font-size: 1.8rem;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.icon_font{
|
||||
font-size: 2.5rem;
|
||||
position: relative;
|
||||
top: -0.3rem;
|
||||
user-select:none;
|
||||
}
|
||||
|
||||
.icon-shuaxin{
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cut_picture_right{
|
||||
width: 39.2rem;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
border-radius: 2rem;
|
||||
|
||||
.cur_picture_right_header{
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
color: #030303;
|
||||
line-height: 1.8rem;
|
||||
font-weight: bold;
|
||||
|
||||
.review_logo{
|
||||
font-size: 1.8rem;
|
||||
color: #333;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.cut_picture_review_block{
|
||||
width: 100%;
|
||||
padding: 0 2rem;
|
||||
height: calc(100% - 5.8rem);
|
||||
|
||||
.cut_picture_review_item{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
position: relative;
|
||||
|
||||
.cut_picture_review_content{
|
||||
transform-origin: 0 0;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: scale(0.45) translate(-50%, -50%);
|
||||
background: rgba(91,94,105,0.8);
|
||||
box-shadow: 0 0.2rem 0.5rem 0 rgba(216,213,239,0.3);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.cut_picture_review_block_sec{
|
||||
transform-origin: 0 0;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: scale(0.45) translate(-50%, -50%);
|
||||
border-radius: 100%;
|
||||
background: rgba(91,94,105,0.8);
|
||||
box-shadow: 0 0.2rem 0.5rem 0 rgba(216,213,239,0.3);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
177
src/component/HomePage/ExportNewCoolection.vue
Normal file
177
src/component/HomePage/ExportNewCoolection.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<!-- 生成collention缩略图用的 -->
|
||||
<div class="export_new_collection_review">
|
||||
<div class="img_block_item" v-if="allBoardData?.moodTemplateId">
|
||||
<MoodTemplate :fileList="allBoardData?.moodboardFiles" :moodTemplateId="allBoardData?.moodTemplateId"></MoodTemplate>
|
||||
</div>
|
||||
<div class="img_block_item" v-else>
|
||||
<div class="lager_img_item" v-for="(mood) in allBoardData.moodboardFiles" :key="mood">
|
||||
<div class="all_img_item_block">
|
||||
<img class="all_img_content cover_img" :src="mood.imgUrl" >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="img_block_item">
|
||||
<div class="small_img_item" v-for="(print) in allBoardData.printboardFiles" :key="print">
|
||||
<div class="all_img_item_block">
|
||||
<img class="all_img_content cover_img" :src="print.imgUrl">
|
||||
</div>
|
||||
</div>
|
||||
<div class="small_img_item" v-for="(generate) in allBoardData.generatePrintFiles" :key="generate">
|
||||
<div class="all_img_item_block">
|
||||
<img class="all_img_content cover_img" :src="generate.imgUrl">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="img_block_item">
|
||||
<div class="color_item" v-for="(color) in allBoardData.colorBoards" :key="color">
|
||||
<div class="color_content" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b})`}"></div>
|
||||
<div class="color_content_body">
|
||||
<div class="color_des">{{color.tcx}}</div>
|
||||
<div class="color_des">{{color.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="img_block_item">
|
||||
<div class="lager_img_item" v-for="(skecth) in allBoardData.skecthboardFiles" :key="skecth">
|
||||
<div class="all_img_item_block">
|
||||
<img class="all_img_content" :src="skecth.imgUrl">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="img_block_item">
|
||||
<div class="lager_img_item" v-for="(marketing) in allBoardData.marketingSketchFiles" :key="marketing">
|
||||
<div class="all_img_item_block">
|
||||
<img class="all_img_content" :src="marketing.imgUrl">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="img_block_item">
|
||||
<div class="lager_img_item" v-for="(design) in likeDesignCollectionList" :key="design.designItemUrl">
|
||||
<div class="all_img_item_block">
|
||||
<img class="all_img_content" :src="design.designItemUrl">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from 'vue'
|
||||
import MoodTemplate from '@/component/HomePage/MoodTemplate.vue'
|
||||
import { useStore } from "vuex";
|
||||
export default defineComponent({
|
||||
components:{MoodTemplate},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
let allBoardData:any = computed(()=>{return store.state.UploadFilesModule.allBoardData})
|
||||
let likeDesignCollectionList : any = computed(()=>{return store.state.HomeStoreModule.likeDesignCollectionList})
|
||||
return {
|
||||
allBoardData,
|
||||
likeDesignCollectionList,
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.export_new_collection_review{
|
||||
width: 40.8rem;
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
left: -100rem;
|
||||
top: 0;
|
||||
|
||||
|
||||
.img_block_item{
|
||||
margin-bottom: 2rem;
|
||||
|
||||
// &.color_block_item{
|
||||
// padding: 0 0.5rem 0 0.3rem;
|
||||
// }
|
||||
|
||||
.lager_img_item{
|
||||
display: inline-block;
|
||||
width: 20.4rem;
|
||||
height: 20.4rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.sketch_img_item{
|
||||
display: inline-block;
|
||||
width: 20.4rem;
|
||||
height: 42.2rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.small_img_item{
|
||||
width: 6.8rem;
|
||||
height: 6.8rem;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.color_item{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
// padding: 0 0.5rem;
|
||||
margin-right: 1.6rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&:nth-child(4n){
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.color_content{
|
||||
width: 9rem;
|
||||
height:6.2rem
|
||||
}
|
||||
.color_content_body{
|
||||
width: 9rem;
|
||||
padding: 0.7rem 0.2rem;
|
||||
background: #FEFEFE;
|
||||
border: 1px solid #E6E6E6;
|
||||
|
||||
.color_des{
|
||||
font-size: 1rem;
|
||||
font-family: Roboto;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.3rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.all_img_item_block{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.all_img_content{
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
&.cover_img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
486
src/component/HomePage/Header.vue
Normal file
486
src/component/HomePage/Header.vue
Normal file
@@ -0,0 +1,486 @@
|
||||
<template>
|
||||
<div>
|
||||
<header class="header_component">
|
||||
<img class="header_logo" @click="turnToNewPage('https://www.aidlab.hk/en/')" src="@/assets/images/loginPage/aida_logo.png" />
|
||||
<nav class="header_nav_content">
|
||||
<div :class="['nav_item', $route.name === 'home'?'select_nav':'']" @click="turnToPage('home')">HOME</div>
|
||||
<div :class="['nav_item', $route.name === 'library'?'select_nav':'']" @click="turnToPage('library')">LIBRARY</div>
|
||||
<div :class="['nav_item', $route.name === 'history'?'select_nav':'']" @click="turnToPage('history')">HISTORY</div>
|
||||
</nav>
|
||||
<div class="header_right_content">
|
||||
<div class="header_icon icon iconfont icon-touxiang3"></div>
|
||||
<div class="header_user_content">
|
||||
<div class="username">{{userInfo?.userName}}</div>
|
||||
<div :class="['icon','iconfont', 'icon-xiala', isShowOperate?'icon_rotate':'']" @click.stop="changeShowOperateContent()"></div>
|
||||
<nav class="select_block" v-show="isShowOperate">
|
||||
<!-- <div class="select_item" @click="showBindEmailModal()">
|
||||
<span class="icon iconfont icon-youxiang"></span><span class="select_item_des">bind email</span>
|
||||
</div> -->
|
||||
<div class="select_item" @click="logout()">
|
||||
<span class="icon iconfont icon-tuichu"></span><span class="select_item_des">log off</span>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<a-modal class="modal_component"
|
||||
v-model:visible="bindEmailVisible"
|
||||
:footer="null"
|
||||
title="Mailbox binding"
|
||||
width="56rem"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
>
|
||||
<template #closeIcon v-if="!isHaveBindEmail && bindEmailStep === 1">
|
||||
<div class="skip_content">skip</div>
|
||||
</template>
|
||||
<div class="bind_email_content" v-if="isHaveBindEmail">
|
||||
<div class="bind_email_tip">you have binded email</div>
|
||||
<div class="bind_email">{{userInfo.email}}</div>
|
||||
</div>
|
||||
<div class="bind_email_content" v-else>
|
||||
<!-- 绑定邮箱第一步 start -->
|
||||
<div v-show="bindEmailStep === 1">
|
||||
<div class="bind_email_form_content">
|
||||
<div class="bind_email_form_title">Email</div>
|
||||
<input class="bind_email_form_input" placeholder="Enter a new email" v-model="email" @keydown.enter="emailNextStepFun()">
|
||||
</div>
|
||||
<div class="bind_email_submit_button" @click="emailNextStepFun()">Next step</div>
|
||||
</div>
|
||||
<!-- 绑定邮箱第一步 end -->
|
||||
|
||||
<!-- 绑定邮箱第二步 start -->
|
||||
<div v-show="bindEmailStep === 2">
|
||||
<div @click="emailLastStepFun()">
|
||||
<span class="icon iconfont icon--shangyibu"></span><span class="email_last_step_content">Enter verification code</span>
|
||||
</div>
|
||||
<div class="email_last_step_des">
|
||||
<div class="sent_email_content">Sent to {{email}}</div>
|
||||
<div class="tip_content">
|
||||
<span v-show="time">{{time}}s</span>
|
||||
<span v-show="!time" @click="emailNextStepFun()">Resend</span>
|
||||
</div>
|
||||
</div>
|
||||
<VerificationCodeInput :ct="emailCode" @sendCaptcha="submitBindEmail($event)"></VerificationCodeInput>
|
||||
</div>
|
||||
<!-- 绑定邮箱第一步 end -->
|
||||
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script >
|
||||
import { defineComponent ,createVNode} from 'vue'
|
||||
import {isEmail} from '@/tool/util'
|
||||
import {setCookie, getCookie, WriteCookie} from '@/tool/cookie'
|
||||
import VerificationCodeInput from '@/component/LoginPage/verificationCodeInput.vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
export default defineComponent({
|
||||
components:{
|
||||
VerificationCodeInput,
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
isShowOperate:false,
|
||||
bindEmailVisible:false,
|
||||
isHaveBindEmail:false,
|
||||
bindEmailStep:1,
|
||||
email:'',
|
||||
emailCode:['','','','','',''],//邮箱验证码
|
||||
time:60,//60秒倒计时
|
||||
timer: 0,
|
||||
userInfo:{},
|
||||
timerOperate:null,
|
||||
numTime:30,
|
||||
timerSec:null,
|
||||
modalWarning:null
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.userInfo = JSON.parse(getCookie('userInfo'))
|
||||
if(!this.userInfo){
|
||||
this.$router.replace('/login')
|
||||
}else{
|
||||
this.accountIsLogin(this.userInfo)
|
||||
}
|
||||
this.isHaveBindEmail = this.userInfo?.email ? true : false
|
||||
|
||||
this.operateClick()
|
||||
document.addEventListener('click',this.operateClick)
|
||||
},
|
||||
methods:{
|
||||
turnToNewPage(url){
|
||||
window.open(url)
|
||||
},
|
||||
|
||||
turnToPage(name){
|
||||
let noRefresh = name === 'home' ? true :false
|
||||
this.$router.push({name:name,params: {noRefresh:noRefresh}})
|
||||
},
|
||||
|
||||
//点击下拉图标出现操作
|
||||
changeShowOperateContent(){
|
||||
this.isShowOperate = !this.isShowOperate
|
||||
document.addEventListener('click',this.closeShowOperateContent,false)
|
||||
},
|
||||
|
||||
//关闭下拉图标
|
||||
closeShowOperateContent(){
|
||||
this.isShowOperate = false
|
||||
document.removeEventListener('click',this.closeShowOperateContent)
|
||||
},
|
||||
|
||||
//打开绑定邮箱弹窗
|
||||
showBindEmailModal(){
|
||||
this.bindEmailVisible = true
|
||||
},
|
||||
|
||||
emailNextStepFun(){
|
||||
if(!isEmail(this.email)){
|
||||
message.error('The email format is incorrect');
|
||||
return
|
||||
}
|
||||
let data = {
|
||||
email:this.email,
|
||||
operationType: "BIND_MAILBOX",
|
||||
}
|
||||
const hide = message.loading('loading', 0);
|
||||
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv) =>{
|
||||
if(rv){
|
||||
this.bindEmailStep = 2
|
||||
this.emailCode = ['','','','','',''],
|
||||
this.createTimer()
|
||||
hide()
|
||||
message.success('Succeeded in binding the mailbox.')
|
||||
}
|
||||
}).catch(res=>{
|
||||
hide()
|
||||
})
|
||||
},
|
||||
|
||||
//绑定邮箱的上一步
|
||||
emailLastStepFun(){
|
||||
this.bindEmailStep = 1
|
||||
this.email = ''
|
||||
this.emailCode = ['','','','','',''],
|
||||
this.clearTimer()
|
||||
},
|
||||
|
||||
//创建定时器
|
||||
createTimer(){
|
||||
this.timer = setInterval(()=>{
|
||||
this.time--
|
||||
if(!this.time){
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
},1000)
|
||||
},
|
||||
|
||||
//清除定时器
|
||||
clearTimer(){
|
||||
this.time = 60
|
||||
if(this.timer){
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
},
|
||||
|
||||
//登出
|
||||
logout(){
|
||||
let data = {
|
||||
userId:this.userInfo.userId
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) =>{
|
||||
this.$router.replace('/login')
|
||||
WriteCookie('token')
|
||||
})
|
||||
},
|
||||
|
||||
//绑定邮箱
|
||||
submitBindEmail(emailVerifyCode){
|
||||
let data = {
|
||||
userEmail:this.email,
|
||||
userId: this.userInfo.userId,
|
||||
emailVerifyCode:emailVerifyCode
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.accountBindEmail, data).then((rv) =>{
|
||||
if(rv){
|
||||
this.userInfo.email = this.email
|
||||
setCookie('userInfo',JSON.stringify(this.userInfo))
|
||||
this.bindEmailVisible = false,
|
||||
this.bindEmailStep = 1
|
||||
this.clearTimer()
|
||||
this.emailCode = ['','','','','','']
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//判断是否登录
|
||||
accountIsLogin(userInfo){
|
||||
let data ={
|
||||
userId:userInfo.userId
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.accountIsLogin, data).then((rv) =>{
|
||||
if(!rv){
|
||||
this.$router.replace('/login')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//点击重置判断是否长时间五操作
|
||||
operateClick(){
|
||||
if(this.timer){
|
||||
clearTimeout(this.timer)
|
||||
}
|
||||
let _this = this
|
||||
let timeNum = 1000 * 60 *120
|
||||
this.timer = setTimeout(()=>{
|
||||
this.modalWarning = Modal.warning ({
|
||||
title: () => `You have not performed any operation for a long time. You must be active;otherwise, you will log out in ${_this.numTime} S`,
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Ok',
|
||||
onOk() {
|
||||
_this.numTime = 30
|
||||
clearInterval(_this.timerSec)
|
||||
}
|
||||
});
|
||||
_this.numCounter()
|
||||
},timeNum)
|
||||
},
|
||||
|
||||
numCounter(){
|
||||
this.timerSec = setInterval(()=>{
|
||||
if(this.numTime > 0){
|
||||
this.numTime = this.numTime - 1
|
||||
}else{
|
||||
clearTimeout(this.timer)
|
||||
clearInterval(this.timerSec)
|
||||
this.logout()
|
||||
this.modalWarning.destroy()
|
||||
}
|
||||
},1000)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.header_component{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 7rem;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-bottom: 0.1rem solid rgba(3,3,3,0.1);
|
||||
position: relative;
|
||||
|
||||
.header_logo{
|
||||
width: 14.4rem;
|
||||
height: 3.2rem;
|
||||
margin: 2.1rem 0 0 2.8rem;
|
||||
}
|
||||
|
||||
.header_nav_content{
|
||||
display: flex;
|
||||
margin-left: 28.9rem;
|
||||
align-items: center;
|
||||
|
||||
.nav_item{
|
||||
padding: 1.1rem 1rem;
|
||||
border-bottom: 0.1rem solid transparent;
|
||||
margin-right: 3.4rem;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.3rem;
|
||||
color: #333333;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
|
||||
&.select_nav{
|
||||
background: #E6E6F6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header_right_content{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 3.2rem;
|
||||
display: flex;
|
||||
|
||||
.header_icon{
|
||||
font-size: 3.6rem;
|
||||
position: relative;
|
||||
top: 0.3rem;
|
||||
}
|
||||
|
||||
.header_user_content{
|
||||
margin-left: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
top: 1.2rem;
|
||||
height: 3.7rem;
|
||||
|
||||
.username{
|
||||
font-size: 1.6rem;
|
||||
color: #1A1A1A;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
|
||||
.icon-xiala{
|
||||
font-size: 1.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon_rotate{
|
||||
-moz-transform:rotate(180deg);
|
||||
-webkit-transform:rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
animation-direction: 0.5s;
|
||||
}
|
||||
|
||||
.select_block{
|
||||
position: absolute;
|
||||
right: -1.5rem;
|
||||
top: 3.7rem;
|
||||
width: 11.4rem;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 0.4rem 0.4rem 0px rgba(0,0,0,0.1);
|
||||
z-index: 9;
|
||||
overflow: hidden;
|
||||
border: 1px solid #000000;
|
||||
|
||||
.select_item{
|
||||
padding-left: 1.5rem;
|
||||
height: 4.1rem;
|
||||
color: #4D4D4D;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
user-select:none;
|
||||
|
||||
&:hover{
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.iconfont{
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.select_item_des{
|
||||
font-size: 1.3rem;
|
||||
margin-left: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal_component{
|
||||
|
||||
.skip_content{
|
||||
width: 6rem;
|
||||
height: 3rem;
|
||||
line-height: 2.8rem;
|
||||
border: 0.1rem solid #343579;
|
||||
font-size: 1.4rem;
|
||||
color: #343579;
|
||||
position: absolute;
|
||||
top: 1.8rem;
|
||||
right: 1.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bind_email_content{
|
||||
padding: 4.8rem 9.2rem 6rem;
|
||||
|
||||
.bind_email_tip{
|
||||
font-size: 1.8rem;
|
||||
color: #A5B0C2;
|
||||
line-height: 1.9rem;
|
||||
text-align: center;
|
||||
}
|
||||
.bind_email{
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 400;
|
||||
color: #030303;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bind_email_form_content{
|
||||
|
||||
.bind_email_form_title{
|
||||
font-size: 2.2rem;
|
||||
font-weight: bold;
|
||||
color: #030303;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
|
||||
.bind_email_form_input{
|
||||
width: 100%;
|
||||
height: 4.6rem;
|
||||
margin-top: 1rem;
|
||||
border: 0.1rem solid #B4BED7;
|
||||
padding-left: 2.1rem;
|
||||
line-height: 4.6rem;
|
||||
font-size: 1.8rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::placeholder {
|
||||
color:#A5B0C2,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bind_email_submit_button{
|
||||
height: 4.6rem;
|
||||
line-height: 4.6rem;
|
||||
background: #343579;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
width: 12.8rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin: 3rem auto 0;
|
||||
}
|
||||
|
||||
.icon--shangyibu{
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
color: #030303;
|
||||
}
|
||||
|
||||
.email_last_step_content{
|
||||
margin-left: 1rem;
|
||||
font-size: 2.2rem;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #030303;
|
||||
}
|
||||
|
||||
.tip_content{
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
color: #343579;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.email_last_step_des{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
.sent_email_content{
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #A5B0C2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
272
src/component/HomePage/MarketingSketchUpload.vue
Normal file
272
src/component/HomePage/MarketingSketchUpload.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<div class="collection_modal_item">
|
||||
<div class="switch_type_list">
|
||||
<div class="switch_type_item select_swtich">
|
||||
<span>Upload</span>
|
||||
</div>
|
||||
<div @click="openLibrary()" class="switch_type_item">
|
||||
<span>My Library</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="marketingUpload_body" v-show="swtich_type==='upload'">
|
||||
<div class="upload_img_body scroll_style">
|
||||
<div class="upload_item">
|
||||
<div class="upload_file_item" v-for="(file, index) in fileList" :key="file">
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'uploading'">
|
||||
<a-spin :indicator="indicator" tip="Uploading..."/>
|
||||
</div>
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'done'">
|
||||
<img :src="file?.imgUrl" class="upload_img">
|
||||
<div class="delete_file_block" @click="deleteFile(index)">Delete</div>
|
||||
</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">
|
||||
<img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_max_tip">
|
||||
<span class="icon iconfont icon-zhuyi"></span>
|
||||
<span>Maximum 15 images can be uploaded, Maximum 2M per image</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Material ref="Material" @confirmSelect="confirmSelect"></Material>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, h,ref } from 'vue'
|
||||
import { LoadingOutlined } from '@ant-design/icons-vue';
|
||||
import {getCookie} from '@/tool/cookie'
|
||||
import {getUploadUrl} from '@/tool/util'
|
||||
import {useStore} from 'vuex'
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
import Material from '@/component/HomePage/Material.vue'
|
||||
export default defineComponent({
|
||||
components:{Material},
|
||||
setup(){
|
||||
let fileList:any = ref([])
|
||||
return {
|
||||
fileList
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
swtich_type:'upload',
|
||||
indicator : h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: '2.4rem',
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
upload:{
|
||||
isPin:0,
|
||||
level1Type:'MarketingSketch',
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
token:'',
|
||||
uploadUrl:'',
|
||||
store:useStore()
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.token = getCookie('token') || ''
|
||||
this.uploadUrl = getUploadUrl()
|
||||
},
|
||||
methods:{
|
||||
openLibrary(){
|
||||
let material:any = this.$refs.Material
|
||||
material.init('MarketingSketch')
|
||||
},
|
||||
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
|
||||
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
|
||||
this.store.commit('setMarketingSketchFile',fileList)
|
||||
}else if(file.status === 'error'){
|
||||
let index = -1
|
||||
this.fileList.forEach((ele:any,index1:any) => {
|
||||
if(file.uid === ele.uid){
|
||||
index = index1
|
||||
}
|
||||
});
|
||||
if(index > -1){
|
||||
this.fileList.splice(index, 1)
|
||||
}
|
||||
message.error(file.name + 'upload failed')
|
||||
}
|
||||
},
|
||||
|
||||
beforeUpload(file:any){
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
if (!isJpgOrPng) {
|
||||
message.error('You can only upload Image file!');
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must smaller than 5MB!');
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
|
||||
deleteFile(index:any){
|
||||
this.fileList.splice(index, 1)
|
||||
this.store.commit('setMarketingSketchFile',this.fileList)
|
||||
},
|
||||
|
||||
recollection(){
|
||||
this.fileList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.marketingSketchFiles))
|
||||
this.store.commit('setMarketingSketchFile',this.fileList)
|
||||
},
|
||||
|
||||
confirmSelect(event:any){
|
||||
for(let item of event){
|
||||
let data = {
|
||||
imgUrl:item.url,
|
||||
resData:item,
|
||||
status:'done',
|
||||
}
|
||||
if(this.fileList.length == 15){
|
||||
message.error('Maximum number of allowable file uploads has been exceeded')
|
||||
break
|
||||
}
|
||||
this.fileList.push(data)
|
||||
}
|
||||
this.store.commit('setMarketingSketchFile',this.fileList)
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.collection_modal_item{
|
||||
padding: 1.5rem 2.6rem 4rem;
|
||||
height: 100%;
|
||||
|
||||
.switch_type_list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.switch_type_item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 2rem;
|
||||
height: 4rem;
|
||||
background: #fff;
|
||||
border-radius: 0.8rem;
|
||||
line-height: 4rem;
|
||||
font-size: 1.6rem;
|
||||
margin-right: 2.2rem;
|
||||
color: #5B5E69;
|
||||
cursor: pointer;
|
||||
|
||||
&.select_swtich{
|
||||
color: #343579;
|
||||
}
|
||||
|
||||
.switch_icon{
|
||||
font-size: 1.8rem;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.marketingUpload_body{
|
||||
margin-top: 1rem;
|
||||
height: calc(100% - 5rem);
|
||||
|
||||
.upload_img_body{
|
||||
height: calc(100% - 3rem);
|
||||
overflow-y: auto;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.upload_file_item{
|
||||
margin: 0 2rem 2rem 0;
|
||||
display: inline-block;
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
border: 1px solid #F5F5F5;
|
||||
vertical-align: top;
|
||||
|
||||
&.upload_component{
|
||||
border: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.delete_file_block{
|
||||
display: none;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
height: 4rem;
|
||||
background: rgba(0,0,0,0.2);
|
||||
font-size: 1.6rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 4rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
470
src/component/HomePage/Material.vue
Normal file
470
src/component/HomePage/Material.vue
Normal file
@@ -0,0 +1,470 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal class="my_material_modal"
|
||||
v-model:visible="myMaterialModalShow"
|
||||
:footer="null"
|
||||
width="80%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
>
|
||||
<div class="my_material_header">
|
||||
<div class="my_material_title">My Library</div>
|
||||
<div class="my_material_header_right">
|
||||
<div class="content_search_block">
|
||||
<input class="search_input" placeholder="Please input" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||
<div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
</div>
|
||||
|
||||
<div class="icon iconfont icon-guanbi icon_close" @click="closeModal"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my_material_content">
|
||||
<div class="material_content_top">
|
||||
<div class="material_content_top_title"></div>
|
||||
<div class="material_content_top_right">
|
||||
<div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'MarketingSketch'">
|
||||
<a-select
|
||||
ref="select"
|
||||
v-model:value="designType"
|
||||
:options="disignTypeList"
|
||||
placeholder="All"
|
||||
:allowClear="true"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #suffixIcon
|
||||
><span
|
||||
class="icon iconfont icon-xiala"
|
||||
style="color: #343579"
|
||||
></span
|
||||
></template>
|
||||
</a-select>
|
||||
</div>
|
||||
<div :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()" v-show="imgList.length">
|
||||
<div class="check_block"><div class="check_block_body" v-show="selectImgList.length == imgList.length && imgList.length"></div></div>
|
||||
<div>all</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="material_content_body scroll_style">
|
||||
<div class="content_img_item" v-for="(img) in imgList" :key="img.id" @click="selectImgItem(img)">
|
||||
<div :class="['content_img_item_block', selectImgListIds.indexOf(img.id) > -1 ? 'select_item_img' :'']">
|
||||
<img :class="[selectCode == 'Moodboard' || selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="img.url" :key="img.url"/>
|
||||
</div>
|
||||
<div class="content_img_name">{{img.name}}</div>
|
||||
</div>
|
||||
<div class="no_data_block" v-show="!imgList.length && !isShowLoading">
|
||||
<img src="@/assets/images/homePage/null_img.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="no_data_block loading_block" v-show="isShowLoading">
|
||||
<a-spin size="large"></a-spin>
|
||||
</div>
|
||||
<div class="material_confirm" @click="confirmSelect()" v-show="imgList.length">Confirm</div>
|
||||
<div class="table_pagination" v-show="imgList.length">
|
||||
<a-pagination
|
||||
|
||||
v-model:current="currentPage"
|
||||
v-model:pageSize="pageSize"
|
||||
:total="total"
|
||||
:showSizeChanger="false"
|
||||
:showQuickJumper="true"
|
||||
@change="changePage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref} from 'vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { message } from 'ant-design-vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
let myMaterialModalShow = ref(false)
|
||||
let imgList = ref([])
|
||||
let selectImgList:any = ref([])
|
||||
let selectImgListIds:any = ref([])
|
||||
let isShowLoading:any = ref(false)
|
||||
let selectCode:any = ref('')
|
||||
let currentPage:any = ref(1)
|
||||
let searchPictureName = ref('')
|
||||
let pageSize = ref(20)
|
||||
let total = ref(0)
|
||||
let searcMaterialhName:any = ref('') //搜索名字
|
||||
let designType:any = ref(null)
|
||||
let disignTypeList = [
|
||||
{
|
||||
value: "Outwear",
|
||||
label: "Outwear",
|
||||
},
|
||||
{
|
||||
value: "Blouse",
|
||||
label: "Blouse",
|
||||
},
|
||||
{
|
||||
value: "Dress",
|
||||
label: "Dress",
|
||||
},
|
||||
{
|
||||
value: "Trousers",
|
||||
label: "Trousers",
|
||||
},
|
||||
{
|
||||
value: "Skirt",
|
||||
label: "Skirt",
|
||||
},
|
||||
]
|
||||
let boardList = {
|
||||
Moodboard:'Mood',
|
||||
Printboard:'Print',
|
||||
Sketchboard:'Sketch',
|
||||
MarketingSketch:'MarketingSketch'
|
||||
}
|
||||
return{
|
||||
myMaterialModalShow,
|
||||
imgList,
|
||||
selectImgList,
|
||||
selectImgListIds,
|
||||
isShowLoading,
|
||||
selectCode,
|
||||
currentPage,
|
||||
searchPictureName,
|
||||
pageSize,
|
||||
total,
|
||||
searcMaterialhName,
|
||||
designType,
|
||||
disignTypeList,
|
||||
boardList
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
||||
init(code:any){
|
||||
this.selectCode = code
|
||||
this.myMaterialModalShow = true
|
||||
this.getLibraryList()
|
||||
},
|
||||
|
||||
selectImgItem(imgData:any){
|
||||
this.selectImgListIds = this.selectImgList.map((v:any)=>v.id)
|
||||
if(this.selectImgListIds.indexOf(imgData.id) === -1){
|
||||
this.selectImgList.push(imgData)
|
||||
this.selectImgListIds.push(imgData.id)
|
||||
}else{
|
||||
let index = this.selectImgListIds.indexOf(imgData.id)
|
||||
this.selectImgList.splice(index,1)
|
||||
this.selectImgListIds.splice(index,1)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
//改变页码
|
||||
changePage(current: number, pageSize: number){
|
||||
this.currentPage = current
|
||||
this.pageSize = pageSize
|
||||
this.getLibraryList()
|
||||
},
|
||||
|
||||
handleChange(){
|
||||
this.getLibraryList()
|
||||
},
|
||||
|
||||
//选择所有的图片
|
||||
selectAllImg(){
|
||||
if(this.selectImgListIds.length == this.imgList.length){
|
||||
this.selectImgListIds = []
|
||||
this.selectImgList = []
|
||||
}else{
|
||||
this.selectImgListIds = this.imgList.map((v:any) => v.id)
|
||||
this.selectImgList = this.imgList
|
||||
}
|
||||
},
|
||||
|
||||
getLibraryList(){
|
||||
let data = {
|
||||
level1Type:this.selectCode,
|
||||
level2Type:this.designType,
|
||||
page:this.currentPage,
|
||||
pictureName:this.searchPictureName,
|
||||
size:this.pageSize,
|
||||
}
|
||||
this.isShowLoading = true
|
||||
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
|
||||
(rv: any) => {
|
||||
this.imgList = rv.content
|
||||
this.total = rv.total
|
||||
this.isShowLoading = false
|
||||
}
|
||||
).catch((res)=>{
|
||||
this.isShowLoading = false
|
||||
});
|
||||
},
|
||||
|
||||
confirmSelect(){
|
||||
if(!this.selectImgList.length){
|
||||
message.error('Please select at least one image')
|
||||
return
|
||||
}
|
||||
this.$emit('confirmSelect',this.selectImgList)
|
||||
this.closeModal()
|
||||
},
|
||||
|
||||
closeModal(){
|
||||
this.myMaterialModalShow = false
|
||||
this.searchPictureName = ''
|
||||
this.designType = null
|
||||
this.selectImgList = []
|
||||
this.selectImgListIds = []
|
||||
this.imgList = []
|
||||
this.currentPage = 1
|
||||
this.pageSize = 10
|
||||
this.total = 0
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.my_material_modal{
|
||||
|
||||
.ant-modal-close{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
position: absolute;
|
||||
top: -1.8rem;
|
||||
right: -1.8rem;
|
||||
}
|
||||
|
||||
.ant-modal-header{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-modal-body{
|
||||
background: #F2F3FB;
|
||||
height: 80vh;
|
||||
min-height: 72rem;
|
||||
overflow-y: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.my_material_header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 6.6rem;
|
||||
background: #F7F7F7;
|
||||
padding: 0 3.4rem 0 3.1rem;
|
||||
|
||||
.my_material_title{
|
||||
font-size: 1.8rem;
|
||||
color: #030303;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.my_material_header_right{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.content_search_block{
|
||||
margin-right: 5rem;
|
||||
display: flex;
|
||||
|
||||
.search_input{
|
||||
width: 30rem;
|
||||
padding-left: 1.5rem;
|
||||
height: 4rem;
|
||||
line-height: 3.8rem;
|
||||
background: #FFFFFF;
|
||||
border: 0.1rem solid #F1F1F1;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
|
||||
&::placeholder {
|
||||
color: #C2C2C2;
|
||||
}
|
||||
}
|
||||
|
||||
.search_icon_block{
|
||||
width: 6rem;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
text-align: center;
|
||||
background: #343579;
|
||||
cursor: pointer;
|
||||
|
||||
.icon-sousuo{
|
||||
font-size: 2rem;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon_close{
|
||||
color: rgba(174, 178, 183, 1);
|
||||
font-size: 2.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.my_material_content{
|
||||
padding: 0 3rem 3.5rem 3rem;
|
||||
height: calc(100% - 6.6rem);
|
||||
position: relative;
|
||||
|
||||
.material_content_top{
|
||||
padding: 1.3rem 0 2.1rem;
|
||||
height: 7rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.material_content_top_title{
|
||||
font-size: 20px;
|
||||
color: #030303;
|
||||
}
|
||||
|
||||
.material_content_top_right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.select_block{
|
||||
background: #FFFFFF;
|
||||
color: #1A1A1A !important;
|
||||
margin-right: 2.3rem;
|
||||
|
||||
.icon-xiala{
|
||||
color: #1A1A1A !important;
|
||||
}
|
||||
}
|
||||
|
||||
.check_all_block{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.6rem;
|
||||
color: #64686D;
|
||||
cursor: pointer;
|
||||
|
||||
&.check_all{
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.check_block{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
background: #EBECF4;
|
||||
border: 0.1rem solid #64686D;
|
||||
padding: 0.3rem;
|
||||
margin-right: 0.7rem;
|
||||
|
||||
.check_block_body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #343579;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.material_content_body{
|
||||
width: 100%;
|
||||
height: calc(100% - 19rem);
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
.content_img_item{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 0 1.4rem;
|
||||
margin-bottom: 2.8rem;
|
||||
|
||||
.content_img_item_block{
|
||||
border: 0.1rem solid transparent;
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&.select_item_img{
|
||||
border-color: #343579;
|
||||
}
|
||||
|
||||
.print_content_img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content_img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.content_img_name{
|
||||
width: 16.5rem;
|
||||
height: 3.5rem;
|
||||
line-height: 3.5rem;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1.4rem;
|
||||
color: #030303;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.no_data_block{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
|
||||
&.loading_block{
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.material_confirm{
|
||||
width: 9.8rem;
|
||||
height: 3.6rem;
|
||||
line-height: 3.6rem;
|
||||
font-size: 1.4rem;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
color: #FFFFFF;
|
||||
background: #343579;
|
||||
cursor: pointer;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.table_pagination{
|
||||
position: absolute;
|
||||
bottom: 3.5rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
446
src/component/HomePage/MoodTemplate.vue
Normal file
446
src/component/HomePage/MoodTemplate.vue
Normal file
@@ -0,0 +1,446 @@
|
||||
<template>
|
||||
<div class="mood_template_component">
|
||||
<div class="mood_template_item template_three" v-show="moodTemplateId == 3">
|
||||
<div class="img_template three_1" :style="{backgroundImage:`url(${fileList[0]?.imgUrl})`}"></div>
|
||||
<div class="img_template three_2" :style="{backgroundImage:`url(${fileList[1]?.imgUrl})`}"></div>
|
||||
<div class="img_template three_1" :style="{backgroundImage:`url(${fileList[2]?.imgUrl})`}"></div>
|
||||
</div>
|
||||
<div class="mood_template_item template_four" v-show="moodTemplateId == 4">
|
||||
<div class="img_template four_1" :style="{backgroundImage:`url(${fileList[0]?.imgUrl})`}"></div>
|
||||
<div class="img_template four_2" :style="{backgroundImage:`url(${fileList[1]?.imgUrl})`}"></div>
|
||||
<div class="img_template four_3" :style="{backgroundImage:`url(${fileList[2]?.imgUrl})`}"></div>
|
||||
<div class="img_template four_4" :style="{backgroundImage:`url(${fileList[3]?.imgUrl})`}"></div>
|
||||
</div>
|
||||
<div class="mood_template_item template_five" v-show="moodTemplateId == 5">
|
||||
<div class="img_template five_1" :style="{backgroundImage:`url(${fileList[0]?.imgUrl})`}"></div>
|
||||
<div class="img_template five_2" :style="{backgroundImage:`url(${fileList[1]?.imgUrl})`}"></div>
|
||||
<div class="img_template five_3" :style="{backgroundImage:`url(${fileList[2]?.imgUrl})`}"></div>
|
||||
<div class="img_template five_4" :style="{backgroundImage:`url(${fileList[3]?.imgUrl})`}"></div>
|
||||
<div class="img_template five_5" :style="{backgroundImage:`url(${fileList[4]?.imgUrl})`}"></div>
|
||||
</div>
|
||||
<div class="mood_template_item template_six" v-show="moodTemplateId == 6">
|
||||
<div class="img_template six_1" :style="{backgroundImage:`url(${fileList[0]?.imgUrl})`}"></div>
|
||||
<div class="img_template six_2" :style="{backgroundImage:`url(${fileList[1]?.imgUrl})`}"></div>
|
||||
<div class="img_template six_3" :style="{backgroundImage:`url(${fileList[2]?.imgUrl})`}"></div>
|
||||
<div class="img_template six_4" :style="{backgroundImage:`url(${fileList[3]?.imgUrl})`}"></div>
|
||||
<div class="img_template six_5" :style="{backgroundImage:`url(${fileList[4]?.imgUrl})`}"></div>
|
||||
<div class="img_template six_6" :style="{backgroundImage:`url(${fileList[5]?.imgUrl})`}"></div>
|
||||
</div>
|
||||
<div class="mood_template_item template_seven" v-show="moodTemplateId == 7">
|
||||
<div class="img_template seven_1" :style="{backgroundImage:`url(${fileList[0]?.imgUrl})`}"></div>
|
||||
<div class="img_template seven_2" :style="{backgroundImage:`url(${fileList[1]?.imgUrl})`}"></div>
|
||||
<div class="img_template seven_3" :style="{backgroundImage:`url(${fileList[2]?.imgUrl})`}"></div>
|
||||
<div class="img_template seven_4" :style="{backgroundImage:`url(${fileList[3]?.imgUrl})`}"></div>
|
||||
<div class="img_template seven_5" :style="{backgroundImage:`url(${fileList[4]?.imgUrl})`}"></div>
|
||||
<div class="img_template seven_6" :style="{backgroundImage:`url(${fileList[5]?.imgUrl})`}"></div>
|
||||
<div class="img_template seven_7" :style="{backgroundImage:`url(${fileList[6]?.imgUrl})`}"></div>
|
||||
</div>
|
||||
<div class="mood_template_item template_eight" v-show="moodTemplateId == 8">
|
||||
<div class="img_template eight_1" :style="{backgroundImage:`url(${fileList[0]?.imgUrl})`}"></div>
|
||||
<div class="img_template eight_2" :style="{backgroundImage:`url(${fileList[1]?.imgUrl})`}"></div>
|
||||
<div class="img_template eight_3" :style="{backgroundImage:`url(${fileList[2]?.imgUrl})`}"></div>
|
||||
<div class="img_template eight_4" :style="{backgroundImage:`url(${fileList[3]?.imgUrl})`}"></div>
|
||||
<div class="img_template eight_5" :style="{backgroundImage:`url(${fileList[4]?.imgUrl})`}"></div>
|
||||
<div class="img_template eight_6" :style="{backgroundImage:`url(${fileList[5]?.imgUrl})`}"></div>
|
||||
<div class="img_template eight_7" :style="{backgroundImage:`url(${fileList[6]?.imgUrl})`}"></div>
|
||||
<div class="img_template eight_8" :style="{backgroundImage:`url(${fileList[7]?.imgUrl})`}"></div>
|
||||
</div>
|
||||
<div class="mood_template_item template_nine" v-show="moodTemplateId == 9">
|
||||
<div class="img_template nine_1" :style="{backgroundImage:`url(${fileList[0]?.imgUrl})`}"></div>
|
||||
<div class="img_template nine_2" :style="{backgroundImage:`url(${fileList[1]?.imgUrl})`}"></div>
|
||||
<div class="img_template nine_3" :style="{backgroundImage:`url(${fileList[2]?.imgUrl})`}"></div>
|
||||
<div class="img_template nine_4" :style="{backgroundImage:`url(${fileList[3]?.imgUrl})`}"></div>
|
||||
<div class="img_template nine_5" :style="{backgroundImage:`url(${fileList[4]?.imgUrl})`}"></div>
|
||||
<div class="img_template nine_6" :style="{backgroundImage:`url(${fileList[5]?.imgUrl})`}"></div>
|
||||
<div class="img_template nine_7" :style="{backgroundImage:`url(${fileList[6]?.imgUrl})`}"></div>
|
||||
<div class="img_template nine_8" :style="{backgroundImage:`url(${fileList[7]?.imgUrl})`}"></div>
|
||||
<div class="img_template nine_9" :style="{backgroundImage:`url(${fileList[8]?.imgUrl})`}"></div>
|
||||
</div>
|
||||
<div class="mood_template_item template_ten" v-show="moodTemplateId == 10">
|
||||
<div class="img_template ten_1" :style="{backgroundImage:`url(${fileList[0]?.imgUrl})`}"></div>
|
||||
<div class="img_template ten_2" :style="{backgroundImage:`url(${fileList[1]?.imgUrl})`}"></div>
|
||||
<div class="img_template ten_3" :style="{backgroundImage:`url(${fileList[2]?.imgUrl})`}"></div>
|
||||
<div class="img_template ten_4" :style="{backgroundImage:`url(${fileList[3]?.imgUrl})`}"></div>
|
||||
<div class="img_template ten_5" :style="{backgroundImage:`url(${fileList[4]?.imgUrl})`}"></div>
|
||||
<div class="img_template ten_6" :style="{backgroundImage:`url(${fileList[5]?.imgUrl})`}"></div>
|
||||
<div class="img_template ten_7" :style="{backgroundImage:`url(${fileList[6]?.imgUrl})`}"></div>
|
||||
<div class="img_template ten_8" :style="{backgroundImage:`url(${fileList[7]?.imgUrl})`}"></div>
|
||||
<div class="img_template ten_9" :style="{backgroundImage:`url(${fileList[8]?.imgUrl})`}"></div>
|
||||
<div class="img_template ten_10" :style="{backgroundImage:`url(${fileList[9]?.imgUrl})`}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
props:['fileList','moodTemplateId'],
|
||||
setup() {
|
||||
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.mood_template_component{
|
||||
width: 40.8rem;
|
||||
background: #fff;
|
||||
|
||||
.mood_template_item{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.template_three{
|
||||
height: 18.7rem;
|
||||
display: flex;
|
||||
|
||||
.img_template{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.three_1{
|
||||
width: 10.2rem;
|
||||
height: 100%;
|
||||
}
|
||||
.three_2{
|
||||
width: 19.6rem;
|
||||
margin: 0 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.template_four{
|
||||
height: 21.1rem;
|
||||
|
||||
.four_1{
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 20.1rem;
|
||||
height: 10.7rem;
|
||||
}
|
||||
|
||||
.four_2{
|
||||
left: 0;
|
||||
top: 11.1rem;
|
||||
width: 9.6rem;
|
||||
height: 10rem;
|
||||
}
|
||||
.four_3{
|
||||
left: 9.9rem;
|
||||
top: 11.1rem;
|
||||
width: 10.2rem;
|
||||
height: 10rem;
|
||||
}
|
||||
.four_4{
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 20.1rem;
|
||||
height: 21.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.template_five{
|
||||
height: 24.2rem;
|
||||
|
||||
.five_1{
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 15.2rem;
|
||||
height: 15.3rem;
|
||||
}
|
||||
.five_2{
|
||||
left: 0;
|
||||
top: 15.3rem;
|
||||
width: 15.2rem;
|
||||
height: 8.7rem;
|
||||
}
|
||||
.five_3{
|
||||
left: 15.2rem;
|
||||
top: 0;
|
||||
width: 14.5rem;
|
||||
height: 24rem;
|
||||
}
|
||||
.five_4{
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 11.1rem;
|
||||
height: 12rem;
|
||||
}
|
||||
.five_5{
|
||||
right: 0;
|
||||
top: 12rem;
|
||||
width: 11.1rem;
|
||||
height: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.template_six{
|
||||
height: 27.4rem;
|
||||
|
||||
.six_1{
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 13.4rem;
|
||||
height: 13.8rem;
|
||||
}
|
||||
.six_2{
|
||||
left: 0;
|
||||
top: 13.8rem;
|
||||
width: 14.3rem;
|
||||
height: 13.6rem;
|
||||
}
|
||||
.six_3{
|
||||
left: 13.4rem;
|
||||
top: 0;
|
||||
width: 13.9rem;
|
||||
height: 13.8rem;
|
||||
}
|
||||
.six_4{
|
||||
left: 14.3rem;
|
||||
top: 13.8rem;
|
||||
width: 18.6rem;
|
||||
height: 13.6rem;
|
||||
}
|
||||
.six_5{
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 13.5rem;
|
||||
height: 13.8rem;
|
||||
}
|
||||
.six_6{
|
||||
right: 0;
|
||||
top: 13.8rem;
|
||||
width: 7.9rem;
|
||||
height: 13.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.template_seven{
|
||||
height: 21rem;
|
||||
|
||||
.seven_1{
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 7.3rem;
|
||||
height: 7.6rem;
|
||||
}
|
||||
.seven_2{
|
||||
left: 0;
|
||||
top: 7.5rem;
|
||||
width: 7.3rem;
|
||||
height: 13.2rem;
|
||||
}
|
||||
.seven_3{
|
||||
left: 7.5rem;
|
||||
top: 0;
|
||||
width: 12.1rem;
|
||||
height: 11.7rem;
|
||||
}
|
||||
.seven_4{
|
||||
left: 7.5rem;
|
||||
top: 11.9rem;
|
||||
width: 12.1rem;
|
||||
height: 9.1rem;
|
||||
}
|
||||
.seven_5{
|
||||
left: 19.7rem;
|
||||
top: 0;
|
||||
width: 10.4rem;
|
||||
height: 10.1rem;
|
||||
}
|
||||
.seven_6{
|
||||
left: 19.7rem;
|
||||
top: 10.3rem;
|
||||
width: 10.4rem;
|
||||
height: 10.7rem;
|
||||
}
|
||||
.seven_7{
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 10.6rem;
|
||||
height: 21rem;
|
||||
}
|
||||
}
|
||||
|
||||
.template_eight{
|
||||
height: 24.9rem;
|
||||
|
||||
.eight_1{
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 8.5rem;
|
||||
height: 9.1rem;
|
||||
}
|
||||
.eight_2{
|
||||
left: 0;
|
||||
top: 9.3rem;
|
||||
width: 8.5rem;
|
||||
height: 15.5rem;
|
||||
}
|
||||
.eight_3{
|
||||
left: 8.7rem;
|
||||
top: 0;
|
||||
width: 13.8rem;
|
||||
height: 13.8rem;
|
||||
}
|
||||
.eight_4{
|
||||
left: 8.7rem;
|
||||
top: 14rem;
|
||||
width: 10.9rem;
|
||||
height: 10.8rem;
|
||||
}
|
||||
.eight_5{
|
||||
left: 19.8rem;
|
||||
top: 14rem;
|
||||
width: 4.9rem;
|
||||
height: 10.8rem;
|
||||
}
|
||||
.eight_6{
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 18.1rem;
|
||||
height: 13.8rem;
|
||||
}
|
||||
.eight_7{
|
||||
left: 24.9rem;
|
||||
top: 14rem;
|
||||
width: 10.5rem;
|
||||
height: 10.8rem;
|
||||
}
|
||||
.eight_8{
|
||||
right: 0;
|
||||
top: 14rem;
|
||||
width: 5.2rem;
|
||||
height: 10.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.template_nine{
|
||||
height: 19.3rem;
|
||||
|
||||
.nine_1{
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 6rem;
|
||||
height: 6.4rem;
|
||||
}
|
||||
.nine_2{
|
||||
left: 0;
|
||||
top: 6.6rem;
|
||||
width: 6rem;
|
||||
height: 12.5rem;
|
||||
}
|
||||
.nine_3{
|
||||
left: 6.3rem;
|
||||
top: 0;
|
||||
width: 10.2rem;
|
||||
height: 19.1rem;
|
||||
}
|
||||
.nine_4{
|
||||
left: 16.7rem;
|
||||
top: 0;
|
||||
width: 5.9rem;
|
||||
height: 5.8rem;
|
||||
}
|
||||
.nine_5{
|
||||
left: 16.7rem;
|
||||
top: 5.9rem;
|
||||
width: 5.9rem;
|
||||
height: 13.2rem;
|
||||
}
|
||||
.nine_6{
|
||||
left: 22.7rem;
|
||||
top: 0;
|
||||
width: 9.3rem;
|
||||
height: 9.4rem;
|
||||
}
|
||||
.nine_7{
|
||||
left: 22.7rem;
|
||||
top: 9.5rem;
|
||||
width: 9.3rem;
|
||||
height: 9.6rem;
|
||||
}
|
||||
.nine_8{
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 8.7rem;
|
||||
height: 6.7rem;
|
||||
}
|
||||
.nine_9{
|
||||
right: 0;
|
||||
top: 6.8rem;
|
||||
width: 8.7rem;
|
||||
height: 12.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.template_ten{
|
||||
height: 21.2rem;
|
||||
|
||||
.ten_1{
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 9.9rem;
|
||||
height: 10.6rem;
|
||||
}
|
||||
.ten_2{
|
||||
left: 0;
|
||||
top: 10.8rem;
|
||||
width: 9.9rem;
|
||||
height: 10.4rem;
|
||||
}
|
||||
.ten_3{
|
||||
left: 10rem;
|
||||
top: 0;
|
||||
width: 9.9rem;
|
||||
height: 21.2rem;
|
||||
}
|
||||
.ten_4{
|
||||
left: 20rem;
|
||||
top: 0;
|
||||
width: 8.1rem;
|
||||
height: 15rem;
|
||||
}
|
||||
.ten_5{
|
||||
left: 20rem;
|
||||
top: 15.3rem;
|
||||
width: 8.1rem;
|
||||
height: 5.9rem;
|
||||
}
|
||||
.ten_6{
|
||||
left:28.2rem;
|
||||
top: 0;
|
||||
width: 6.4rem;
|
||||
height: 6.3rem;
|
||||
}
|
||||
.ten_7{
|
||||
left:28.2rem;
|
||||
top: 6.4rem;
|
||||
width: 6.4rem;
|
||||
height: 14.7rem;
|
||||
}
|
||||
.ten_8{
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 6.1rem;
|
||||
height: 6rem;
|
||||
}
|
||||
.ten_9{
|
||||
right: 0;
|
||||
top: 6.2rem;
|
||||
width: 6.1rem;
|
||||
height: 6.1rem;
|
||||
}
|
||||
.ten_10{
|
||||
right: 0;
|
||||
top: 12.5rem;
|
||||
width: 6.1rem;
|
||||
height: 8.7rem;
|
||||
}
|
||||
}
|
||||
.img_template{
|
||||
position: absolute;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
422
src/component/HomePage/MoodboardUpload.vue
Normal file
422
src/component/HomePage/MoodboardUpload.vue
Normal file
@@ -0,0 +1,422 @@
|
||||
<template>
|
||||
<div class="collection_modal_item">
|
||||
<div class="switch_type_list">
|
||||
<div class="switch_type_item select_swtich">
|
||||
<span>Upload</span>
|
||||
</div>
|
||||
<div @click="openLibrary()" class="switch_type_item">
|
||||
<span>My Library</span>
|
||||
</div>
|
||||
<div class="design_template_button" @click.stop="changeTemplateModal()" v-show="fileList.length>2">Design</div>
|
||||
</div>
|
||||
|
||||
<div class="moodboard_body">
|
||||
<div class="upload_img_body scroll_style" >
|
||||
<div class="upload_item">
|
||||
<div class="upload_file_item" v-for="(file, index) in fileList" :key="file">
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'uploading'">
|
||||
<a-spin :indicator="indicator" tip="Uploading..."/>
|
||||
</div>
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'done'">
|
||||
<img :src="file?.imgUrl" class="upload_img">
|
||||
<div class="delete_file_block" @click="deleteFile(index)">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_file_item upload_component" v-show="fileList.length < 10">
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:data="{
|
||||
...upload
|
||||
}"
|
||||
:headers="{Authorization:token}"
|
||||
v-model:file-list="fileList"
|
||||
:before-upload="beforeUpload"
|
||||
multiple
|
||||
:maxCount="10"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file)=>fileUploadChange(file)"
|
||||
>
|
||||
<div class="upload_tip_block" v-show="fileList.length < 10">
|
||||
<img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_max_tip">
|
||||
<span class="icon iconfont icon-zhuyi"></span>
|
||||
<span>Maximum 10 images can be uploaded, Maximum 2M per image</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Material ref="Material" @confirmSelect="confirmSelect"></Material>
|
||||
|
||||
<a-modal class="moodboard_template_modal"
|
||||
v-model:visible="templateModal"
|
||||
:footer="null"
|
||||
width="47rem"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
>
|
||||
<div class="moodboard_template_content">
|
||||
<div class="moodboard_template_header">
|
||||
<div class="moodboard_template_title">MoodBoard Design</div>
|
||||
<div class="icon iconfont icon-guanbi close_icon" @click.stop="changeTemplateModal()"></div>
|
||||
</div>
|
||||
<div class="moodboard_template_block">
|
||||
<div class="moodboard_template_info">
|
||||
<MoodTemplate :fileList="this.templateFileList" :moodTemplateId="moodTemplateId"></MoodTemplate>
|
||||
<div class="moodboard_template_refetch_content">
|
||||
<div class="button_second" @click="refetchTemplate()">Re-fetch</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button_second submit_button" @click="submitTemplate()">Submit</div>
|
||||
</div>
|
||||
|
||||
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
|
||||
import { defineComponent, h,ref } from 'vue'
|
||||
import { LoadingOutlined } from '@ant-design/icons-vue';
|
||||
import {getCookie} from '@/tool/cookie'
|
||||
import {getUploadUrl} from '@/tool/util'
|
||||
import {useStore} from 'vuex'
|
||||
import { message, Upload } from 'ant-design-vue';
|
||||
import Material from '@/component/HomePage/Material.vue'
|
||||
import MoodTemplate from '@/component/HomePage/MoodTemplate.vue'
|
||||
export default defineComponent({
|
||||
components:{Material,MoodTemplate},
|
||||
setup(){
|
||||
let fileList:any = ref([])
|
||||
let templateModal:any = ref(false)
|
||||
let templateFileList:any = ref([])
|
||||
return {
|
||||
fileList,
|
||||
templateModal,
|
||||
templateFileList
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
indicator : h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: '2.4rem',
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
upload:{
|
||||
isPin:0,
|
||||
level1Type:'Moodboard',
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
token:'',
|
||||
uploadUrl:'',
|
||||
moodTemplateId:'',//模板id
|
||||
store:useStore()
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.token = getCookie('token') || ''
|
||||
this.uploadUrl = getUploadUrl()
|
||||
},
|
||||
methods:{
|
||||
openLibrary(){
|
||||
let material:any = this.$refs.Material
|
||||
material.init('Moodboard')
|
||||
},
|
||||
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
|
||||
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
|
||||
this.store.commit('setMoodboardFile',fileList)
|
||||
this.store.commit('clearMoodTemplateId')
|
||||
}else if(file.status === 'error'){
|
||||
let index = -1
|
||||
this.fileList.forEach((ele:any,index1:any) => {
|
||||
if(file.uid === ele.uid){
|
||||
index = index1
|
||||
}
|
||||
});
|
||||
if(index > -1){
|
||||
this.fileList.splice(index, 1)
|
||||
}
|
||||
message.error(file.name + 'upload failed')
|
||||
}
|
||||
},
|
||||
|
||||
beforeUpload(file:any){
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
if (!isJpgOrPng) {
|
||||
message.error('You can only upload Image file!');
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must smaller than 5MB!');
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
|
||||
deleteFile(index:any){
|
||||
this.fileList.splice(index, 1)
|
||||
this.store.commit('setMoodboardFile',this.fileList)
|
||||
this.store.commit('clearMoodTemplateId')
|
||||
},
|
||||
recollection(){
|
||||
this.fileList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.moodboardFiles))
|
||||
let moodTemplateId = this.store.state.UploadFilesModule.allBoardData.moodTemplateId
|
||||
this.store.commit('setMoodboardFile',this.fileList)
|
||||
this.store.commit('setMoodTemplateId',moodTemplateId)
|
||||
},
|
||||
|
||||
confirmSelect(event:any){
|
||||
for(let item of event){
|
||||
let data = {
|
||||
imgUrl:item.url,
|
||||
resData:item,
|
||||
status:'done',
|
||||
}
|
||||
if(this.fileList.length == 10){
|
||||
message.error('Maximum number of allowable file uploads has been exceeded')
|
||||
break
|
||||
}
|
||||
this.fileList.push(data)
|
||||
}
|
||||
this.store.commit('setMoodboardFile',this.fileList)
|
||||
this.store.commit('clearMoodTemplateId')
|
||||
|
||||
},
|
||||
|
||||
changeTemplateModal(){
|
||||
this.templateModal = !this.templateModal
|
||||
if(this.templateModal){
|
||||
this.templateFileList = this.fileList.map((v:any)=>{
|
||||
let data = {
|
||||
...v,
|
||||
imgUrl:v.imgUrl.replace(/\s/g, encodeURIComponent(' '))
|
||||
}
|
||||
return data
|
||||
})
|
||||
this.moodTemplateId = this.store.state.UploadFilesModule.moodTemplateId || this.templateFileList.length
|
||||
}
|
||||
},
|
||||
|
||||
randomRange(min:any, max:any, num:any) { // min最小值，max最大值 num排除的值
|
||||
let index = Math.floor(Math.random() * (max - min)) + min;
|
||||
while(index === num){
|
||||
index = Math.floor(Math.random() * (max - min)) + min;
|
||||
}
|
||||
return index
|
||||
|
||||
},
|
||||
|
||||
//随机重置图片顺序
|
||||
refetchTemplate(){
|
||||
let arr= Array.from({length:this.templateFileList.length})
|
||||
for(let item of this.templateFileList){
|
||||
let index = this.randomRange(0,this.templateFileList.length,-1)
|
||||
while(arr[index]){
|
||||
index = this.randomRange(0,this.templateFileList.length,-1)
|
||||
}
|
||||
arr[index] = item
|
||||
}
|
||||
this.templateFileList = arr
|
||||
},
|
||||
|
||||
//提交模板
|
||||
submitTemplate(){
|
||||
this.fileList = JSON.parse(JSON.stringify(this.templateFileList))
|
||||
this.store.commit('setMoodboardFile',this.fileList)
|
||||
this.store.commit('setMoodTemplateId',this.moodTemplateId)
|
||||
this.changeTemplateModal()
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.collection_modal_item{
|
||||
padding: 1.5rem 2.6rem 4rem;
|
||||
height: 100%;
|
||||
|
||||
.switch_type_list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.switch_type_item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 2rem;
|
||||
height: 4rem;
|
||||
background: #fff;
|
||||
border-radius: 0.8rem;
|
||||
line-height: 4rem;
|
||||
font-size: 1.6rem;
|
||||
margin-right: 2.2rem;
|
||||
color: #5B5E69;
|
||||
cursor: pointer;
|
||||
|
||||
&.select_swtich{
|
||||
color: #343579;
|
||||
}
|
||||
|
||||
.switch_icon{
|
||||
font-size: 1.8rem;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.design_template_button{
|
||||
background: #E6E6F6;
|
||||
padding: 0 2.7rem;
|
||||
font-size: 1.4rem;
|
||||
height: 3.2rem;
|
||||
line-height: 3.2rem;
|
||||
cursor: pointer;
|
||||
color: #343579;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.moodboard_body{
|
||||
margin-top: 1rem;
|
||||
height: calc(100% - 5rem);
|
||||
|
||||
.upload_img_body{
|
||||
height: calc(100% - 3rem);
|
||||
overflow-y: auto;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.upload_file_item{
|
||||
margin: 0 2rem 2rem 0;
|
||||
display: inline-block;
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
border: 1px solid #F5F5F5;
|
||||
vertical-align: top;
|
||||
|
||||
&.upload_component{
|
||||
border: none;
|
||||
}
|
||||
|
||||
.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: 4rem;
|
||||
background: rgba(0,0,0,0.2);
|
||||
font-size: 1.6rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 4rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.moodboard_template_modal{
|
||||
|
||||
.ant-modal-body{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.moodboard_template_content{
|
||||
background: #F2F3FB;
|
||||
padding-bottom: 2.9rem;
|
||||
|
||||
.moodboard_template_header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 2rem 0 2.5rem;
|
||||
height: 6.6rem;
|
||||
|
||||
.moodboard_template_title{
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
color: #030303;
|
||||
}
|
||||
|
||||
.close_icon{
|
||||
font-size: 1.8rem;
|
||||
color: #AEB2B7;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.moodboard_template_block{
|
||||
padding: 0 3.1rem 0;
|
||||
|
||||
.moodboard_template_info{
|
||||
background: #fff;
|
||||
|
||||
.moodboard_template_refetch_content{
|
||||
padding: 3.1rem 0 2rem;
|
||||
|
||||
.button_second{
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.submit_button{
|
||||
margin: 2rem auto 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
174
src/component/HomePage/NewCollectionReview.vue
Normal file
174
src/component/HomePage/NewCollectionReview.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<!-- 生成collention缩略图用的 -->
|
||||
<div class="collection_review">
|
||||
<div class="collection_review_mark"></div>
|
||||
<div class="img_block_item" v-if="allBoardData?.moodTemplateId">
|
||||
<MoodTemplate :fileList="allBoardData?.moodboardFiles" :moodTemplateId="allBoardData?.moodTemplateId"></MoodTemplate>
|
||||
</div>
|
||||
<div class="img_block_item" v-else>
|
||||
<div class="lager_img_item" v-for="(mood) in allBoardData.moodboardFiles" :key="mood">
|
||||
<div class="all_img_item_block">
|
||||
<img class="all_img_content cover_img" :src="mood.imgUrl" >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="img_block_item">
|
||||
<div class="small_img_item" v-for="(print) in allBoardData.printboardFiles" :key="print">
|
||||
<div class="all_img_item_block">
|
||||
<img class="all_img_content cover_img" :src="print.imgUrl">
|
||||
</div>
|
||||
</div>
|
||||
<div class="small_img_item" v-for="(generate) in allBoardData.generatePrintFiles" :key="generate">
|
||||
<div class="all_img_item_block">
|
||||
<img class="all_img_content cover_img" :src="generate.imgUrl">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="img_block_item">
|
||||
<div class="color_item" v-for="(color) in allBoardData.colorBoards" :key="color">
|
||||
<div class="color_content" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b})`}"></div>
|
||||
<div class="color_content_body">
|
||||
<div class="color_des">{{color.tcx}}</div>
|
||||
<div class="color_des">{{color.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="img_block_item">
|
||||
<div class="lager_img_item" v-for="(skecth) in allBoardData.skecthboardFiles" :key="skecth">
|
||||
<div class="all_img_item_block">
|
||||
<img class="all_img_content" :src="skecth.imgUrl">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="img_block_item">
|
||||
<div class="lager_img_item" v-for="(marketing) in allBoardData.marketingSketchFiles" :key="marketing">
|
||||
<div class="all_img_item_block">
|
||||
<img class="all_img_content" :src="marketing.imgUrl">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from 'vue'
|
||||
import MoodTemplate from '@/component/HomePage/MoodTemplate.vue'
|
||||
import { useStore } from "vuex";
|
||||
export default defineComponent({
|
||||
components:{MoodTemplate},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
let allBoardData:any = computed(()=>{return store.state.UploadFilesModule.allBoardData})
|
||||
return {
|
||||
allBoardData,
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.collection_review{
|
||||
width: 40.8rem;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
|
||||
.collection_review_mark{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.img_block_item{
|
||||
margin-bottom: 2rem;
|
||||
|
||||
// &.color_block_item{
|
||||
// padding: 0 0.5rem 0 0.3rem;
|
||||
// }
|
||||
|
||||
.lager_img_item{
|
||||
display: inline-block;
|
||||
width: 20.4rem;
|
||||
height: 20.4rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.sketch_img_item{
|
||||
display: inline-block;
|
||||
width: 20.4rem;
|
||||
height: 42.2rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.small_img_item{
|
||||
width: 6.8rem;
|
||||
height: 6.8rem;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.color_item{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
// padding: 0 0.5rem;
|
||||
margin-right: 1.6rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&:nth-child(4n){
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.color_content{
|
||||
width: 9rem;
|
||||
height:6.2rem
|
||||
}
|
||||
.color_content_body{
|
||||
width: 9rem;
|
||||
padding: 0.7rem 0.2rem;
|
||||
background: #FEFEFE;
|
||||
border: 1px solid #E6E6E6;
|
||||
|
||||
.color_des{
|
||||
font-size: 1rem;
|
||||
font-family: Roboto;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.3rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.all_img_item_block{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.all_img_content{
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
&.cover_img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
733
src/component/HomePage/PrintboardUpload.vue
Normal file
733
src/component/HomePage/PrintboardUpload.vue
Normal file
@@ -0,0 +1,733 @@
|
||||
<template>
|
||||
<div class="printboard_upload_modal">
|
||||
<div class="printboard_left_upload">
|
||||
<div class="left_upload_header">
|
||||
<div class="upload_header_item">
|
||||
<div class="switch_type_list">
|
||||
<div class="switch_type_item select_swtich">
|
||||
<span>Upload</span>
|
||||
</div>
|
||||
<div @click="openLibrary()" class="switch_type_item">
|
||||
<span>My Library</span>
|
||||
</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 class="printboard_body">
|
||||
<div class="upload_img_body">
|
||||
<div class="upload_item">
|
||||
<div :class="['upload_file_item']" v-for="(file, index) in fileList" :key="file">
|
||||
<div class="upload_file_img_block">
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'uploading'">
|
||||
<a-spin :indicator="indicator" tip="Uploading..."/>
|
||||
</div>
|
||||
<div class="upload_file_item_content" @click="selectImg(file)" v-show="file?.status === 'done'">
|
||||
<img v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
|
||||
<div class="delete_file_block" @click.stop="deleteFile(index,file)">Delete</div>
|
||||
</div>
|
||||
</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
|
||||
v-show="fileList.length < 15"
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:before-upload="beforeUpload"
|
||||
:data="{
|
||||
...upload
|
||||
}"
|
||||
:headers="{Authorization:token}"
|
||||
v-model:file-list="fileList"
|
||||
:customRequest="function(){}"
|
||||
multiple
|
||||
:maxCount="15"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="fileUploadChange"
|
||||
>
|
||||
<div class="upload_tip_block" >
|
||||
<img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_max_tip">
|
||||
<span class="icon iconfont icon-zhuyi"></span>
|
||||
<span>Maximum 15 images can be uploaded, Maximum 2M per image</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="generate_print">
|
||||
<div class="generate_print_header">
|
||||
<div class="generate_title">Generate New Print</div>
|
||||
<div class="generate_save_button" @click="savePrint()">Save</div>
|
||||
</div>
|
||||
<div class="generate_print_content_block">
|
||||
<div class="generate_print_content scroll_style">
|
||||
<div class="image_block" v-for="(img, index) in printImgList" :key="index">
|
||||
<div class="image_block_content">
|
||||
<img class="image_body" v-lazy="img.imgUrl" :key="img.imgUrl">
|
||||
<div class="delete_file_block" @click="deleteGenerateFile(index)">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="generate_loading_mark" v-show="generateloading">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
|
||||
<Material ref="Material" @confirmSelect="confirmSelect"></Material>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,h,ref,computed } from 'vue'
|
||||
import { LoadingOutlined } from '@ant-design/icons-vue';
|
||||
import {getCookie} from '@/tool/cookie'
|
||||
import {getUploadUrl} from '@/tool/util'
|
||||
import {useStore} from 'vuex'
|
||||
import { Https } from "@/tool/https";
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
import Cropper from '@/component/HomePage/Cropper.vue'
|
||||
import Material from '@/component/HomePage/Material.vue'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
Cropper,
|
||||
Material
|
||||
},
|
||||
setup(){
|
||||
let store:any =useStore()
|
||||
let fileList:any = ref([]),//选中的文件id数据
|
||||
printImgList:any = ref([]), //print的印花图片
|
||||
moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboardFiles})
|
||||
return {
|
||||
fileList,
|
||||
printImgList,
|
||||
moodBoards
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
getPinLength(){
|
||||
let selectLength:any = 0
|
||||
for(let item of this.fileList){
|
||||
if(item.pin){
|
||||
selectLength++
|
||||
}
|
||||
}
|
||||
return selectLength
|
||||
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
swtich_type:'upload',
|
||||
indicator : h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: '2.4rem',
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
upload:{
|
||||
isPin:0,
|
||||
level1Type:'Printboard',
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
token:'',
|
||||
uploadUrl:'',
|
||||
store:useStore(),
|
||||
cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
|
||||
currentFileNum:0, //当前上传的文件数
|
||||
isUpload:false,
|
||||
generateloading:false,
|
||||
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.token = getCookie('token') || ''
|
||||
this.uploadUrl = getUploadUrl()
|
||||
},
|
||||
methods:{
|
||||
openLibrary(){
|
||||
let material:any = this.$refs.Material
|
||||
material.init('Printboard')
|
||||
},
|
||||
fileUploadChange(data:any){
|
||||
let file = data.file
|
||||
let Cropper:any = this.$refs.Cropper
|
||||
if(this.currentFileNum === 1){
|
||||
var reader = new FileReader();
|
||||
reader.onload = (e:any) => {
|
||||
let data_new;
|
||||
if (typeof e.target.result === 'object') {
|
||||
// 把Array Buffer转化为blob 如果是base64不需要
|
||||
data_new = window.URL.createObjectURL(new Blob([e.target.result]));
|
||||
} else {
|
||||
data_new = e.target.result;
|
||||
}
|
||||
Cropper.getOptionImg(data_new)
|
||||
};
|
||||
// 转化为base64
|
||||
// reader.readAsDataURL(file)
|
||||
// 转化为blob
|
||||
reader.readAsArrayBuffer(file.originFileObj);
|
||||
this.cropperFileData = file
|
||||
Cropper.changeShowModal(true)
|
||||
|
||||
}else{
|
||||
this.customRequest(file)
|
||||
}
|
||||
},
|
||||
|
||||
beforeUpload(file:any,fileList:any){
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
if (!isJpgOrPng) {
|
||||
message.error('You can only upload Image file!');
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must smaller than 5MB!');
|
||||
}
|
||||
if(isJpgOrPng && isLt2M){
|
||||
this.currentFileNum = fileList.length
|
||||
}else{
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
deleteFile(index:any,file:any){
|
||||
this.fileList.splice(index, 1)
|
||||
this.store.commit('setPrintboardFile',this.fileList)
|
||||
},
|
||||
|
||||
deleteGenerateFile(index:any){
|
||||
this.printImgList.splice(index, 1)
|
||||
this.store.commit('setGeneratePrintFile',this.printImgList)
|
||||
},
|
||||
|
||||
randomRange(min:any, max:any, num:any) { // min最小值，max最大值 num排除的值
|
||||
let index = Math.floor(Math.random() * (max - min)) + min;
|
||||
while(index === num){
|
||||
index = Math.floor(Math.random() * (max - min)) + min;
|
||||
}
|
||||
return index
|
||||
|
||||
},
|
||||
|
||||
generatePrint(){
|
||||
let data:any = {}
|
||||
//随机获取图片id
|
||||
if(!this.moodBoards.length){ //mood没有图片
|
||||
let index1 = -1
|
||||
let index2 = -2
|
||||
if(!this.getPinLength){ //没pin住
|
||||
index1 = this.randomRange(0, this.fileList.length, -1)
|
||||
index2 = this.randomRange(0, this.fileList.length, index1)
|
||||
|
||||
}else if(this.getPinLength === 1){ //pin住1个
|
||||
this.fileList.forEach((element:any,index:number) => {
|
||||
if(element.pin){
|
||||
index1 = index
|
||||
}
|
||||
});
|
||||
index2 = this.randomRange(0, this.fileList.length, index1)
|
||||
}else{ //pin住多个
|
||||
let selectIndexList:any = []
|
||||
this.fileList.forEach((element:any,index:number) => {
|
||||
if(element.pin){
|
||||
selectIndexList.push(index)
|
||||
}
|
||||
});
|
||||
index1 = this.randomRange(0, selectIndexList.length, -1) //pin住的中随机选一个
|
||||
index2 = this.randomRange(0, this.fileList.length, selectIndexList[index1]) //除了选中的外再来一个
|
||||
|
||||
}
|
||||
data = {
|
||||
select1Id:this.fileList[index1].id,
|
||||
select2Id:this.fileList[index2].id
|
||||
}
|
||||
}else{
|
||||
let index1 = this.randomRange(0, this.moodBoards.length, -1)
|
||||
let index2 = -2
|
||||
if(!this.getPinLength){ //没pin住
|
||||
index2 = this.randomRange(0, this.fileList.length, -1)
|
||||
}else if(this.getPinLength === 1){ //pin住1个
|
||||
this.fileList.forEach((element:any,index:number) => {
|
||||
if(element.pin){
|
||||
index2 = index
|
||||
}
|
||||
});
|
||||
}else{ //pin住多个
|
||||
let selectIndexList:any = []
|
||||
this.fileList.forEach((element:any,index:number) => {
|
||||
if(element.pin){
|
||||
selectIndexList.push(index)
|
||||
}
|
||||
});
|
||||
index2 = this.randomRange(0, selectIndexList.length, -1) //pin住的中随机选一个
|
||||
}
|
||||
data = {
|
||||
select1Id:this.moodBoards[index1].resData.id,
|
||||
select2Id:this.fileList[index2].id
|
||||
}
|
||||
}
|
||||
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
this.generateloading = true
|
||||
Https.axiosPost(Https.httpUrls.elementGeneratePrint, data).then((rv) =>{
|
||||
if(rv){
|
||||
let data = {
|
||||
imgUrl:rv.url,
|
||||
resData:rv
|
||||
}
|
||||
this.printImgList.push(data)
|
||||
this.store.commit('setGeneratePrintFile',this.printImgList)
|
||||
this.generateloading = false
|
||||
}
|
||||
}).catch(res=>{
|
||||
this.generateloading = false
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
savePrint(){
|
||||
let printId = this.printImgList.map((v:any) => v.resData.id)
|
||||
let data = {
|
||||
printId:printId,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.elementSavePrint, data).then((rv) =>{
|
||||
if(rv){
|
||||
message.success('Save successfully')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
customRequest(data:any){
|
||||
let new_data = {
|
||||
...this.upload,
|
||||
file:data.originFileObj
|
||||
}
|
||||
let fileUid = data.uid
|
||||
Https.axiosPost('/api/element/upload', new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
|
||||
(rv: any) => {
|
||||
if (rv) {
|
||||
for(let file of this.fileList){
|
||||
if(fileUid === file.uid){
|
||||
file.status = 'done'
|
||||
file.imgUrl = rv.url
|
||||
file.pin = false
|
||||
file.id = rv.id
|
||||
file.resData = rv
|
||||
|
||||
}
|
||||
}
|
||||
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
|
||||
this.store.commit('setPrintboardFile',fileList)
|
||||
}
|
||||
}
|
||||
).catch((res)=>{
|
||||
let index = -1
|
||||
this.fileList.forEach((ele:any,index1:any) => {
|
||||
if(fileUid === ele.uid){
|
||||
index = index1
|
||||
}
|
||||
});
|
||||
if(index > -1){
|
||||
this.fileList.splice(index, 1)
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
closeCropper(type:any){
|
||||
if(this.isUpload){
|
||||
return
|
||||
}
|
||||
if(type == 'error'){
|
||||
let index = -1
|
||||
this.fileList.forEach((ele:any,index1:any) => {
|
||||
if(this.cropperFileData.uid === ele.uid){
|
||||
index = index1
|
||||
}
|
||||
});
|
||||
if(index > -1){
|
||||
this.fileList.splice(index, 1)
|
||||
}
|
||||
}
|
||||
let Cropper:any = this.$refs.Cropper
|
||||
Cropper.closeCropper()
|
||||
|
||||
},
|
||||
|
||||
deletUploadFile(){
|
||||
let index = -1
|
||||
this.fileList.forEach((ele:any,index1:any) => {
|
||||
if(this.cropperFileData.uid === ele.uid){
|
||||
index = index1
|
||||
}
|
||||
});
|
||||
if(index > -1){
|
||||
this.fileList.splice(index, 1)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
handleCropperSuccess(event:any){
|
||||
let {file, fileData} =event
|
||||
let new_data = {
|
||||
...this.upload,
|
||||
file:file
|
||||
}
|
||||
if(this.isUpload){
|
||||
return
|
||||
}
|
||||
this.isUpload = true
|
||||
const hide = message.loading('loading', 0);
|
||||
Https.axiosPost('/api/element/upload', new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
|
||||
(rv: any) => {
|
||||
for(let file of this.fileList){
|
||||
if(fileData.uid === file.uid){
|
||||
file.status = 'done'
|
||||
file.imgUrl = rv.url
|
||||
file.id = rv.id
|
||||
file.resData = rv
|
||||
}
|
||||
}
|
||||
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
|
||||
this.isUpload = false
|
||||
this.closeCropper('success')
|
||||
this.cropperFileData = {name:'',uid:''}
|
||||
this.store.commit('setPrintboardFile',fileList)
|
||||
hide()
|
||||
}
|
||||
).catch(res=>{
|
||||
let index = -1
|
||||
this.fileList.forEach((ele:any,index1:any) => {
|
||||
if(fileData.uid === ele.uid){
|
||||
index = index1
|
||||
}
|
||||
});
|
||||
if(index > -1){
|
||||
this.fileList.splice(index, 1)
|
||||
}
|
||||
this.cropperFileData = {name:'',uid:''}
|
||||
this.isUpload = false
|
||||
this.closeCropper('error')
|
||||
hide()
|
||||
});
|
||||
},
|
||||
|
||||
recollection(){
|
||||
this.fileList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
|
||||
this.printImgList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.generatePrintFiles))
|
||||
this.store.commit('setPrintboardFile',this.fileList)
|
||||
this.store.commit('setGeneratePrintFile',this.printImgList)
|
||||
},
|
||||
|
||||
confirmSelect(event:any){
|
||||
for(let item of event){
|
||||
let data = {
|
||||
imgUrl:item.url,
|
||||
resData:item,
|
||||
pin:false,
|
||||
id:item.id,
|
||||
status:'done',
|
||||
}
|
||||
if(this.fileList.length == 15){
|
||||
message.error('Maximum number of allowable file uploads has been exceeded')
|
||||
break
|
||||
}
|
||||
this.fileList.push(data)
|
||||
}
|
||||
this.store.commit('setPrintboardFile',this.fileList)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.printboard_upload_modal{
|
||||
padding: 1rem 1rem 1.8rem 1rem;
|
||||
height: 100%;
|
||||
background: #F2F3FB;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.printboard_left_upload{
|
||||
width: calc(100% - 39.8rem);
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
padding: 0.5rem 2.2rem 2rem 2.6rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.left_upload_header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.upload_header_item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.switch_type_list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.switch_type_item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 2rem;
|
||||
height: 4rem;
|
||||
background: #fff;
|
||||
line-height: 4rem;
|
||||
font-size: 1.6rem;
|
||||
margin-right: 2.2rem;
|
||||
color: #5B5E69;
|
||||
cursor: pointer;
|
||||
|
||||
&.select_swtich{
|
||||
color: #343579;
|
||||
}
|
||||
|
||||
.switch_icon{
|
||||
font-size: 1.8rem;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.select_img_num{
|
||||
font-size: 2rem;
|
||||
color: #030303;
|
||||
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{
|
||||
margin-top: 1rem;
|
||||
height: calc(100% - 5rem);
|
||||
|
||||
.upload_img_body{
|
||||
height: calc(100% - 3rem);
|
||||
overflow-y: auto;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.upload_file_item{
|
||||
margin: 0 2rem 2rem 0;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
.upload_file_img_block{
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
border: 1px solid #F5F5F5;
|
||||
}
|
||||
|
||||
.pin_block{
|
||||
text-align: center;
|
||||
margin-top:1.6rem;
|
||||
}
|
||||
|
||||
&.upload_component{
|
||||
border: none;
|
||||
}
|
||||
|
||||
.upload_file_item_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
&:hover .delete_file_block{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.upload_img{
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.delete_file_block{
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
background: rgba(0,0,0,0.2);
|
||||
font-size: 1.6rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 4rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.upload_img_icon{
|
||||
width: 4.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.upload_max_tip{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.4rem;
|
||||
color: #030303;
|
||||
|
||||
.icon-zhuyi{
|
||||
font-size: 1.6rem;
|
||||
margin-right: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.generate_print{
|
||||
width: 38.4rem;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
|
||||
.generate_print_header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1rem 2.5rem 2.5rem;
|
||||
|
||||
.generate_title{
|
||||
font-size: 1.6rem;
|
||||
font-weight: bold;
|
||||
color: #030303;
|
||||
}
|
||||
.generate_save_button{
|
||||
background: #E6E6F6;
|
||||
padding: 0.1rem;
|
||||
padding: 0 2.7rem;
|
||||
font-size: 1.4rem;
|
||||
height: 3.2rem;
|
||||
line-height: 3.2rem;
|
||||
cursor: pointer;
|
||||
color: #343579;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.generate_print_content_block{
|
||||
height: calc(100% - 6.7rem);
|
||||
position: relative;
|
||||
|
||||
.generate_loading_mark{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0,0,0,0.4);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.generate_print_content{
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
padding:0 0.8rem;
|
||||
position: relative;
|
||||
|
||||
|
||||
|
||||
.image_block{
|
||||
display: inline-block;
|
||||
margin-right: 1.6rem;
|
||||
margin-bottom: 1.6rem;
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
border: 0.1rem solid #F5F5F5;
|
||||
vertical-align: top;
|
||||
|
||||
&:nth-child(2n){
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.image_block_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
&:hover .delete_file_block{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.delete_file_block{
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
background: rgba(0,0,0,0.2);
|
||||
font-size: 1.6rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 4rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.image_body{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
420
src/component/HomePage/SketchboardUpload.vue
Normal file
420
src/component/HomePage/SketchboardUpload.vue
Normal file
@@ -0,0 +1,420 @@
|
||||
<template>
|
||||
<div class="sketchboard_upload_modal">
|
||||
<div class="switch_type_list">
|
||||
<div class="switch_type_item select_swtich">
|
||||
<span>Upload</span>
|
||||
</div>
|
||||
<div @click="openLibrary()" class="switch_type_item">
|
||||
<span>My Library</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sketchboard_body">
|
||||
<div class="upload_img_body scroll_style">
|
||||
<div class="upload_item">
|
||||
<div class="upload_file_item" v-for="(file,index) in fileList" :key="file">
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'uploading'">
|
||||
<a-spin :indicator="indicator" tip="Uploading..."/>
|
||||
</div>
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'done'">
|
||||
<img :src="file?.imgUrl" class="upload_img">
|
||||
<div class="operate_file_block" >
|
||||
<!-- <div class="delete_file_block" @click="deleteFile(index)">Delete</div> -->
|
||||
<div class="select_img_type">
|
||||
<div class="select_category" @click.stop="showFileCategory(file)">
|
||||
{{getSketchLabel(file.category)}}
|
||||
<div :class="['icon','iconfont', 'icon-xiala', file.categoryShow?'icon_rotate':'']"></div>
|
||||
</div>
|
||||
<div class="category_list" v-show="file.categoryShow">
|
||||
<div :class="['category_item', file.category == cate.value?'select_category_item':'']" v-for="(cate,index) in sketchCatecoryList" :key="index" @click="selectFileCategory(file,cate)">{{cate.label}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="delete_file_block" @click="deleteFile(index)">
|
||||
<span class="icon iconfont icon-shanchu"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pin_block" v-show="file?.status === 'done'">
|
||||
<a-checkbox v-model:checked="file.pin">PIN</a-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_file_item upload_component" v-show="fileList.length < 15">
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:data="{
|
||||
...upload
|
||||
}"
|
||||
:before-upload="beforeUpload"
|
||||
:headers="{Authorization:token}"
|
||||
v-model:file-list="fileList"
|
||||
multiple
|
||||
:maxCount="15"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file)=>fileUploadChange(file)"
|
||||
>
|
||||
<div class="upload_tip_block" v-show="fileList.length < 15">
|
||||
<img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_max_tip">
|
||||
<span class="icon iconfont icon-zhuyi"></span>
|
||||
<span>Maximum 15 images can be uploaded, Maximum 2M per image</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Material ref="Material" @confirmSelect="confirmSelect"></Material>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, h,ref } from 'vue'
|
||||
import { LoadingOutlined } from '@ant-design/icons-vue';
|
||||
import {getCookie} from '@/tool/cookie'
|
||||
import {getUploadUrl} from '@/tool/util'
|
||||
import {useStore} from 'vuex'
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
import Material from '@/component/HomePage/Material.vue'
|
||||
export default defineComponent({
|
||||
components:{Material},
|
||||
setup(){
|
||||
let fileList:any = ref([])
|
||||
return {
|
||||
fileList
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
swtich_type:'upload',
|
||||
indicator : h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: '2.4rem',
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
upload:{
|
||||
isPin:0,
|
||||
level1Type:'Sketchboard',
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
token:'',
|
||||
uploadUrl:'',
|
||||
store:useStore(),
|
||||
sketchCatecoryList:[
|
||||
{
|
||||
value: 'Outwear',
|
||||
label: "Outwear",
|
||||
},
|
||||
{
|
||||
value: 'Blouse',
|
||||
label: "Blouse",
|
||||
},
|
||||
{
|
||||
value: 'Dress',
|
||||
label: "Dress",
|
||||
},
|
||||
{
|
||||
value: 'Trousers',
|
||||
label: "Trousers",
|
||||
},
|
||||
{
|
||||
value: 'Skirt',
|
||||
label: "Skirt",
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
getSketchLabel(value){
|
||||
return (value:any)=>{
|
||||
let lable = '';
|
||||
for(let item of this.sketchCatecoryList){
|
||||
if(item.value === value){
|
||||
lable = item.label
|
||||
break
|
||||
}
|
||||
}
|
||||
return lable
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.token = getCookie('token') || ''
|
||||
this.uploadUrl = getUploadUrl()
|
||||
},
|
||||
methods:{
|
||||
openLibrary(){
|
||||
let material:any = this.$refs.Material
|
||||
material.init('Sketchboard')
|
||||
},
|
||||
fileUploadChange(data:any){
|
||||
let file = data.file
|
||||
if(file.status === 'done'){
|
||||
let res = JSON.parse(file.xhr.response)
|
||||
file.imgUrl = res.data.url
|
||||
file.resData = res.data
|
||||
file.pin = false
|
||||
file.category = 'Outwear'
|
||||
file.categoryShow = false
|
||||
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
|
||||
this.store.commit('setSketchboardFile',fileList)
|
||||
}else if(file.status === 'error'){
|
||||
let index = -1
|
||||
this.fileList.forEach((ele:any,index1:any) => {
|
||||
if(file.uid === ele.uid){
|
||||
index = index1
|
||||
}
|
||||
});
|
||||
if(index > -1){
|
||||
this.fileList.splice(index, 1)
|
||||
}
|
||||
message.error(file.name + 'upload failed')
|
||||
}
|
||||
},
|
||||
|
||||
beforeUpload(file:any){
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
if (!isJpgOrPng) {
|
||||
message.error('You can only upload Image file!');
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must smaller than 5MB!');
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
|
||||
showFileCategory(file:any){
|
||||
file.categoryShow = true
|
||||
document.addEventListener('click', this.hiddenFileCategory)
|
||||
},
|
||||
|
||||
selectFileCategory(file:any,cate:any){
|
||||
file.category = cate.value
|
||||
this.store.commit('setSketchboardFile',this.fileList)
|
||||
},
|
||||
|
||||
hiddenFileCategory(){
|
||||
for(let item of this.fileList){
|
||||
item.categoryShow = false
|
||||
}
|
||||
document.removeEventListener('click', this.hiddenFileCategory)
|
||||
},
|
||||
|
||||
deleteFile(index:any){
|
||||
this.fileList.splice(index, 1)
|
||||
this.store.commit('setSketchboardFile',this.fileList)
|
||||
},
|
||||
|
||||
recollection(){
|
||||
this.fileList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.skecthboardFiles))
|
||||
this.store.commit('setSketchboardFile',this.fileList)
|
||||
},
|
||||
|
||||
confirmSelect(event:any){
|
||||
for(let item of event){
|
||||
let data = {
|
||||
imgUrl:item.url,
|
||||
resData:item,
|
||||
pin:false,
|
||||
status:'done',
|
||||
category:item.level2Type || 'Outwear',
|
||||
categoryShow:false,
|
||||
}
|
||||
if(this.fileList.length == 15){
|
||||
message.error('Maximum number of allowable file uploads has been exceeded')
|
||||
break
|
||||
}
|
||||
this.fileList.push(data)
|
||||
}
|
||||
this.store.commit('setSketchboardFile',this.fileList)
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.sketchboard_upload_modal{
|
||||
padding: 1.5rem 2.6rem 4rem;
|
||||
height: 100%;
|
||||
|
||||
.switch_type_list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.switch_type_item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 2rem;
|
||||
height: 4rem;
|
||||
background: #fff;
|
||||
border-radius: 0.8rem;
|
||||
line-height: 4rem;
|
||||
font-size: 1.6rem;
|
||||
margin-right: 2.2rem;
|
||||
color: #5B5E69;
|
||||
cursor: pointer;
|
||||
|
||||
&.select_swtich{
|
||||
color: #343579;
|
||||
}
|
||||
|
||||
.switch_icon{
|
||||
font-size: 1.8rem;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sketchboard_body{
|
||||
margin-top: 1rem;
|
||||
height: calc(100% - 5rem);
|
||||
|
||||
.upload_img_body{
|
||||
height: calc(100% - 3rem);
|
||||
overflow-y: auto;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.upload_file_item{
|
||||
margin: 0 2rem 2rem 0;
|
||||
display: inline-block;
|
||||
width: 16.5rem;
|
||||
border: 1px solid #F5F5F5;
|
||||
vertical-align: top;
|
||||
|
||||
&.upload_component{
|
||||
border: none;
|
||||
}
|
||||
|
||||
.upload_file_item_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
height: 16.5rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.upload_img{
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.delete_file_block{
|
||||
display: none;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
background: rgba(0,0,0,0.6);
|
||||
border-radius: 0.4rem;
|
||||
position: absolute;
|
||||
top: 0.9rem;
|
||||
right: 0.9rem;
|
||||
text-align: center;
|
||||
line-height: 3.2rem;
|
||||
|
||||
.icon-shanchu{
|
||||
font-size: 1.6rem;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .delete_file_block{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.operate_file_block{
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
font-size: 1.6rem;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
.select_img_type{
|
||||
height: 100%;
|
||||
line-height: 4rem;
|
||||
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: 4.1rem;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
border: 1px solid #343579;
|
||||
border-radius: 0.8rem;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
157
src/component/HomePage/collectionModal.vue
Normal file
157
src/component/HomePage/collectionModal.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div v-if="showCollectionModal">
|
||||
<a-modal class="modal_component collection_modal"
|
||||
v-model:visible="showCollectionModal"
|
||||
:footer="null"
|
||||
width="80%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
>
|
||||
<template #title>
|
||||
<div v-show="collectionStep === 1">Moodboard Upload</div>
|
||||
<div v-show="collectionStep === 2"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Printboard Upload</div>
|
||||
<div v-show="collectionStep === 3"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Colorboard Upload</div>
|
||||
<div v-show="collectionStep === 4"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Sketchboard Upload</div>
|
||||
<div v-show="collectionStep === 5"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Markets Sketch</div>
|
||||
</template>
|
||||
<template #closeIcon>
|
||||
<div class="header_right_block" @click.stop="">
|
||||
<div v-if="collectionStep < 5" class="next_step_button" @click.stop="nextStep()">Next Step</div>
|
||||
<div v-else class="next_step_button" @click.stop="finishCollection()">Finish</div>
|
||||
<div class="header_cancel_button" @click.stop="cancelDsign()">Cancel</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="collection_modal_body">
|
||||
<MoodboardUpload ref="MoodboardUpload" v-show="collectionStep === 1"></MoodboardUpload>
|
||||
<PrintboardUpload ref="PrintboardUpload" v-show="collectionStep === 2"></PrintboardUpload>
|
||||
<ColorboardUpload ref="ColorboardUpload" v-show="collectionStep === 3"></ColorboardUpload>
|
||||
<SketchboardUpload ref="SketchboardUpload" v-show="collectionStep === 4"></SketchboardUpload>
|
||||
<MarketingSketchUpload ref="MarketingSketchUpload" v-show="collectionStep === 5"></MarketingSketchUpload>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent ,createVNode } from 'vue'
|
||||
import MoodboardUpload from '@/component/HomePage/MoodboardUpload.vue'
|
||||
import PrintboardUpload from '@/component/HomePage/PrintboardUpload.vue'
|
||||
import ColorboardUpload from '@/component/HomePage/ColorboardUpload.vue'
|
||||
import SketchboardUpload from '@/component/HomePage/SketchboardUpload.vue'
|
||||
import MarketingSketchUpload from '@/component/HomePage/MarketingSketchUpload.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import {useStore} from 'vuex'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
MoodboardUpload,
|
||||
PrintboardUpload,
|
||||
ColorboardUpload,
|
||||
SketchboardUpload,
|
||||
MarketingSketchUpload
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
showCollectionModal:false,
|
||||
collectionStep:1,
|
||||
store:useStore()
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
nextStep(){
|
||||
this.collectionStep = this.collectionStep + 1
|
||||
},
|
||||
|
||||
lastStep(){
|
||||
this.collectionStep = this.collectionStep - 1
|
||||
},
|
||||
changeCollectionModal(type:boolean){
|
||||
this.showCollectionModal = type
|
||||
},
|
||||
|
||||
recollection(){
|
||||
setTimeout(()=>{
|
||||
let childredCom = ['MoodboardUpload','PrintboardUpload','ColorboardUpload','SketchboardUpload','MarketingSketchUpload']
|
||||
for(let child of childredCom){
|
||||
let childRef:any = this.$refs[child]
|
||||
childRef.recollection()
|
||||
}
|
||||
},200)
|
||||
|
||||
},
|
||||
|
||||
|
||||
//取消
|
||||
cancelDsign(){
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: 'The uploaded files will not be saved, being sure to continue? ',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
// centered:true,
|
||||
onOk() {
|
||||
_this.showCollectionModal = false
|
||||
_this.store.commit('clearAllData')
|
||||
_this.collectionStep = 1
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//完成
|
||||
finishCollection(){
|
||||
let colorBoards = this.store.state.UploadFilesModule.colorBoards
|
||||
if(!colorBoards || colorBoards?.length < 1){
|
||||
message.error('You must choose one or more colors for further process.')
|
||||
return
|
||||
}
|
||||
this.showCollectionModal =false
|
||||
this.collectionStep = 1
|
||||
this.$emit('finishCollection')
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.collection_modal{
|
||||
.header_icon_fanhui{
|
||||
margin-right: 1rem;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.header_right_block{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 2.1rem;
|
||||
height: 100%;
|
||||
|
||||
.next_step_button{
|
||||
padding: 0 1.2rem;
|
||||
height: 3.2rem;
|
||||
background: #343579;
|
||||
font-size: 1.4rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 3.2rem;
|
||||
margin-right: 1.6rem;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header_cancel_button{
|
||||
padding: 0 2.1rem;
|
||||
height: 3.2rem;
|
||||
background: #E4E5EB;
|
||||
font-size: 1.4rem;
|
||||
color: #030303;
|
||||
line-height: 3.2rem;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.collection_modal_body{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user