detail页面调整
This commit is contained in:
X1627315083
318
src/component/DetailCopy/detailLeft/color/index.vue
Normal file
318
src/component/DetailCopy/detailLeft/color/index.vue
Normal file
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<div class="color">
|
||||
<div class="detailText">Palette</div>
|
||||
<div class="pallet">
|
||||
<pallet :selectColor="selectColor" @selectUplpadColor="selectUplpadColor"></pallet>
|
||||
</div>
|
||||
<div class="detailText">New color</div>
|
||||
<div class="colorBox">
|
||||
<div v-for="item,index in colorList.list[selectDetail.id]" @click="setSelectColor(item,index)" class="colorBoxItem" :class="{active:colorList.index == index}">
|
||||
<div v-show="!item.gradient" class="background" :style="{'background-color':item.hex}"></div>
|
||||
<div v-show="!item.gradient" class="text">{{ item.hex }}</div>
|
||||
<div v-show="!item.gradient" class="text">{{ item.name }}</div>
|
||||
<div v-show="item.gradient" class="backgroundImg" :style="{'background-image':`linear-gradient(${item.gradient?.angle}deg,${setGradient(item.gradient)})`}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detailText">Upload Image</div>
|
||||
<div class="uploadImage">
|
||||
<upload @selectUplpadColor="selectUplpadColor"></upload>
|
||||
</div>
|
||||
<div class="detailText">Color Code</div>
|
||||
<div class="colorCode">
|
||||
<div class="generalModel_state">
|
||||
<div class="generalModel_state_item">
|
||||
<input class="search_input" placeholder="Tcx value（e.g:19-4052)" v-model="tcxToColor" style="width: 100%;" @keydown.enter="getTcxColor()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="getTcxColorBtn" @click="getTcxColor">Extract Color</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { useStore } from "vuex";
|
||||
import { Https } from "@/tool/https";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { rgbaToHex,rgbToHsv } from "@/tool/util"
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
|
||||
import upload from './upload.vue'
|
||||
import pallet from './pallet.vue'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
upload,pallet
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const {t} = useI18n();
|
||||
const colorData = reactive({
|
||||
selectTitle:'current',
|
||||
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
|
||||
allBoardData:computed(()=>store.state.UploadFilesModule.allBoardData),
|
||||
colorList:{
|
||||
list:{},
|
||||
index:-1,
|
||||
} as any,
|
||||
selectColor:{} as any,
|
||||
setGradient:computed(()=>{
|
||||
return (gradient:any)=>{
|
||||
let gradientStr = ''
|
||||
if(!gradient?.gradientList)return
|
||||
gradient.gradientList.sort((a:any, b:any) => {
|
||||
let aArr = a.left.split('%')[0]
|
||||
let bArr = b.left.split('%')[0]
|
||||
return aArr - bArr;
|
||||
});
|
||||
gradient.gradientList.forEach((item:any,index:any)=>{
|
||||
let str = ','
|
||||
if(gradient.gradientList.length == index+1)str = ''
|
||||
gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}`
|
||||
|
||||
})
|
||||
return `${gradientStr}`
|
||||
}
|
||||
}),
|
||||
tcxToColor:'',
|
||||
})
|
||||
watch(()=>colorData.selectColor,async (newVal,oldVal)=>{
|
||||
if(!newVal?.name && newVal.rgba){
|
||||
let data:any = await getColorName(newVal.rgba)
|
||||
newVal.name = data.name
|
||||
newVal.tcx = data.tcx
|
||||
colorData.colorList.list[colorData.selectDetail.id][colorData.colorList.index] = newVal
|
||||
store.commit('DesignDetailCopy/setNewDetail',newVal)
|
||||
}
|
||||
})
|
||||
watch(()=>colorData.selectDetail.id,(newVal,oldVal)=>{
|
||||
if(!colorData.colorList?.list?.[newVal]){
|
||||
colorData.colorList.list[newVal] = []
|
||||
}else{
|
||||
return
|
||||
}
|
||||
let isNoSelect = false
|
||||
let isOneChecked = false
|
||||
for (let index = 0; index < 9; index++) {
|
||||
colorData.allBoardData.colorBoards
|
||||
let item:any = {}
|
||||
item = colorData.allBoardData.colorBoards[index]
|
||||
if(
|
||||
colorData.allBoardData.colorBoards?.[index] &&
|
||||
colorData.selectDetail.color.rgba.r == colorData.allBoardData.colorBoards?.[index]?.rgba?.[0] &&
|
||||
colorData.selectDetail.color.rgba.g == colorData.allBoardData.colorBoards?.[index]?.rgba?.[1] &&
|
||||
colorData.selectDetail.color.rgba.b == colorData.allBoardData.colorBoards?.[index]?.rgba?.[2] &&
|
||||
JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(colorData.allBoardData.colorBoards?.[index]?.gradient)
|
||||
){
|
||||
if(!isOneChecked){
|
||||
isOneChecked = true
|
||||
if(colorData.allBoardData.colorBoards?.[index].gradient){
|
||||
item.gradient = colorData.allBoardData.colorBoards?.[index].gradient
|
||||
}
|
||||
colorData.selectColor = item
|
||||
colorData.colorList.index = index
|
||||
}
|
||||
}else{
|
||||
if(!isNoSelect){
|
||||
item = {
|
||||
hex:rgbaToHex([colorData.selectDetail.color.rgba.r,colorData.selectDetail.color.rgba.g,colorData.selectDetail.color.rgba.b]),
|
||||
id:colorData.selectDetail.color.id,
|
||||
rgba:{
|
||||
r:colorData.selectDetail.color.rgba.r,
|
||||
g:colorData.selectDetail.color.rgba.g,
|
||||
b:colorData.selectDetail.color.rgba.b,
|
||||
},
|
||||
tcx:colorData.selectDetail.color.tcx,
|
||||
name:colorData.selectDetail.color.name,
|
||||
}
|
||||
if(colorData.selectDetail.color.gradient){
|
||||
item.gradient = colorData.selectDetail.color.gradient
|
||||
}
|
||||
colorData.colorList.index = index
|
||||
colorData.selectColor = item
|
||||
isNoSelect = true
|
||||
}else{
|
||||
item = {}
|
||||
}
|
||||
}
|
||||
colorData.colorList.list[newVal].push(item)
|
||||
}
|
||||
|
||||
},{immediate: true})
|
||||
const selectImgItem = ()=>{
|
||||
|
||||
}
|
||||
const getColorName = (color:any)=>{
|
||||
|
||||
let rgb:any = [color.r, color.g, color.b];
|
||||
let hsv = rgbToHsv(rgb);
|
||||
let data = [{
|
||||
h: hsv[0],
|
||||
s: hsv[1],
|
||||
v: hsv[2],
|
||||
}]
|
||||
return new Promise((resolve, reject) => {
|
||||
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
|
||||
.then((rv) => {
|
||||
if (rv) {
|
||||
resolve(rv[0])
|
||||
}
|
||||
})
|
||||
.catch((res) => {
|
||||
resolve({name:'--',tcx:'--'})
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
const selectUplpadColor = (item:any)=>{
|
||||
colorData.selectColor = JSON.parse(JSON.stringify(item))
|
||||
}
|
||||
const setSelectColor = (item:any,index:number)=>{
|
||||
colorData.colorList.index = index
|
||||
if(item.rgba){
|
||||
colorData.selectColor = item
|
||||
}else{
|
||||
// colorData.colorList.list[colorData.selectDetail.id][index] = {}
|
||||
colorData.selectColor = {}
|
||||
}
|
||||
}
|
||||
const getTcxColor = ()=>{
|
||||
if(!colorData.tcxToColor){
|
||||
return
|
||||
}
|
||||
let pattern = /^\d{2}-\d{4}$/;
|
||||
if(pattern.test(colorData.tcxToColor)){
|
||||
Https.axiosGet(Https.httpUrls.getRgbByTcx + '?tcx=' + colorData.tcxToColor).then((rv) =>{
|
||||
if(rv && rv.name){
|
||||
let hex = rgbaToHex([rv.r,rv.g,rv.b,rv.a? rv.a :1])
|
||||
let value = {
|
||||
hex:hex,
|
||||
rgba:{
|
||||
r:rv.r,
|
||||
g:rv.g,
|
||||
b:rv.b,
|
||||
},
|
||||
name:rv.name,
|
||||
tcx:rv.tcx,
|
||||
id:rv.id,
|
||||
}
|
||||
colorData.selectColor = value
|
||||
}else{
|
||||
message.info(t('DesignDetailAlter.jsContent6'))
|
||||
}
|
||||
})
|
||||
}else{
|
||||
message.info(t('ColorboardUpload.jsContent5'))
|
||||
}
|
||||
}
|
||||
onMounted(()=>{
|
||||
if(colorData.allBoardData.colorBoards){
|
||||
colorData.allBoardData.colorBoards.forEach((item:any)=>{
|
||||
item.rgba = item.rgbValue
|
||||
let rgba = [item.rgbValue.r,item.rgbValue.g,item.rgbValue.b]
|
||||
item.hex = rgbaToHex(rgba)
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
return{
|
||||
...toRefs(colorData),
|
||||
|
||||
selectImgItem,
|
||||
selectUplpadColor,
|
||||
setSelectColor,
|
||||
getTcxColor,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.color{
|
||||
// width: 34rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .detailText{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
> .pallet{
|
||||
margin-bottom: 4.5rem;
|
||||
}
|
||||
> .colorBox{
|
||||
margin-bottom: 3rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
> .colorBoxItem{
|
||||
margin: 1rem 0;
|
||||
width: 32%;
|
||||
height: 11rem;
|
||||
border-radius: .5rem;
|
||||
border: 1px solid #999;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&.active{
|
||||
border: 2px solid #000;
|
||||
}
|
||||
> .background{
|
||||
flex: 1;
|
||||
height: 7rem;
|
||||
width: 100%;
|
||||
}
|
||||
> .text{
|
||||
font-weight: 600;
|
||||
line-height: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
> .backgroundImg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .uploadImage{
|
||||
margin-bottom: 3rem;
|
||||
border: 1px dashed transparent;
|
||||
background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em, #000 0,#000 0.6em);
|
||||
height: 10rem;
|
||||
width: 100%;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
> .colorCode{
|
||||
margin-bottom: 3rem;
|
||||
> .generalModel_state{
|
||||
> .generalModel_state_item{
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
input{
|
||||
background: #f4f4f4;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .getTcxColorBtn{
|
||||
background: #BDBDBD;
|
||||
border-radius: 5rem;
|
||||
line-height: 6rem;
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
transition: all .3s;
|
||||
&:hover{
|
||||
background: #d4d4d4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
636
src/component/DetailCopy/detailLeft/color/pallet.vue
Normal file
636
src/component/DetailCopy/detailLeft/color/pallet.vue
Normal file
@@ -0,0 +1,636 @@
|
||||
<template>
|
||||
<div class="pallet">
|
||||
<div class="palletColo" @click="openPallet">
|
||||
<div v-show="!selectColor.gradient" class="palletBackColor" :title="selectColor.name" :style="{'background-color':selectColor.hex}">
|
||||
{{ selectColor.hex }}
|
||||
</div>
|
||||
<div v-show="selectColor.gradient" class="palletBackColor" :style="{'background-image':`linear-gradient(${selectColor.gradient?.angle}deg,${setGradient(selectColor.gradient)})`}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="palletBox">
|
||||
<div v-show="palletShow" class="color_setting_block">
|
||||
<Chrome class="chrome_color" v-model="color_"></Chrome>
|
||||
<div class="color_setting_operateSingle">
|
||||
<div class="color_setting_btn" :class="{active:!color?.gradient?.gradientShow}">{{ $t('ColorboardUpload.Single') }}</div>
|
||||
<a-switch :checked="color?.gradient?.gradientShow" @click="setOperate"/>
|
||||
<div class="color_setting_btn" :class="{active:color?.gradient?.gradientShow}">{{ $t('ColorboardUpload.Gradual') }}</div>
|
||||
</div>
|
||||
<div class="color_setting_operate" v-if="color?.gradient?.gradientShow">
|
||||
<div class="color_setting_operate_item color_setting_operate_control">
|
||||
<div class="operate_item_box">
|
||||
<div>{{ $t('ColorboardUpload.Alignment') }}</div>
|
||||
</div>
|
||||
<div class="operate_item_box operate_item_angle">
|
||||
<div class="operate_item_angle_box" @mousedown="mousedownGradientAngle(getMousePosition($event,false))" @touchstart="mousedownGradientAngle(getMousePosition($event,true))">
|
||||
<div :style="{'transform':`rotate(${color.gradient.angle}deg)`}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operate_item_box operate_item_delete">
|
||||
<i class="fi fi-rr-trash" @click="deleteGradientItem"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color_setting_operate_item color_setting_operate_input">
|
||||
<div class="color_setting_operate_bg" @click="addGradient($event)" :style="{'background-image':color?.gradient?`linear-gradient(90deg,${setGradient(color.gradient)})`:'none'}">
|
||||
</div>
|
||||
<div v-for="item,index in color.gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == color.gradient.selectIndex}" :style="{'left':item.left,'background-color':`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`}" @mousedown="mousedownGradient(getMousePosition($event,false),item,index,)" @touchstart="mousedownGradient(getMousePosition($event,true),item,index,)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,watch,nextTick,onMounted,toRefs, reactive} from 'vue'
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
import { Sketch, Chrome} from '@ans1998/vue3-color'
|
||||
import { getMousePosition } from "@/tool/mdEvent";
|
||||
import { rgbaToHex } from "@/tool/util"
|
||||
import { color } from 'echarts/core';
|
||||
export default defineComponent({
|
||||
components:{
|
||||
Chrome,
|
||||
},
|
||||
props:{
|
||||
selectColor:{
|
||||
type:Object,
|
||||
default:()=>{}
|
||||
},
|
||||
},
|
||||
emits:['selectUplpadColor'],
|
||||
setup(props,{emit}) {
|
||||
const {t} = useI18n()
|
||||
const store = useStore();
|
||||
const palletData = reactive({
|
||||
palletShow:false,
|
||||
palletList:[],
|
||||
color_:{} as any,
|
||||
color:{} as any,
|
||||
updataSelectColorTime:null as any,
|
||||
gradient:{
|
||||
gradientList:[
|
||||
{
|
||||
rgba:{
|
||||
r:117,
|
||||
g:119,
|
||||
b:255,
|
||||
a:1,
|
||||
},
|
||||
left:'0%'
|
||||
},{
|
||||
rgba:{
|
||||
r:0,
|
||||
g:222,
|
||||
b:152,
|
||||
a:1,
|
||||
},
|
||||
left:'100%'
|
||||
},
|
||||
],
|
||||
angle:45,
|
||||
selectIndex:-1,
|
||||
gradientShow:false,
|
||||
},
|
||||
setGradient:computed(()=>{
|
||||
return (gradient:any)=>{
|
||||
let gradientStr = ''
|
||||
if(!gradient?.gradientList)return
|
||||
gradient.gradientList.sort((a:any, b:any) => {
|
||||
let aArr = a.left.split('%')[0]
|
||||
let bArr = b.left.split('%')[0]
|
||||
return aArr - bArr;
|
||||
});
|
||||
gradient.gradientList.forEach((item:any,index:any)=>{
|
||||
let str = ','
|
||||
if(gradient.gradientList.length == index+1)str = ''
|
||||
gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}`
|
||||
|
||||
})
|
||||
return `${gradientStr}`
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
const getpalletListDom = reactive({
|
||||
})
|
||||
watch(()=>palletData.color_,(newVal:any)=>{
|
||||
if(!newVal?.rgba?.r)return
|
||||
if(palletData.color?.gradient?.gradientShow){
|
||||
palletData.color.gradient.gradientList[palletData.color.gradient.selectIndex].rgba = {
|
||||
r:newVal.rgba.r,
|
||||
g:newVal.rgba.g,
|
||||
b:newVal.rgba.b,
|
||||
a:newVal.rgba.a,
|
||||
}
|
||||
}else{
|
||||
palletData.color = newVal
|
||||
}
|
||||
})
|
||||
watch(()=>palletData.color,(newVal:any)=>{
|
||||
clearTimeout(palletData.updataSelectColorTime)
|
||||
palletData.updataSelectColorTime = setTimeout(()=>{
|
||||
if(JSON.stringify(props.selectColor) != JSON.stringify(newVal)){
|
||||
newVal.name = ''
|
||||
newVal.tcx = ''
|
||||
let rgba = [newVal.rgba.r,newVal.rgba.g,newVal.rgba.b]
|
||||
let hex = rgbaToHex(rgba)
|
||||
newVal.hex = hex
|
||||
emit('selectUplpadColor',newVal)
|
||||
}
|
||||
},400)
|
||||
},{deep: true })
|
||||
const setOperate = ()=>{
|
||||
palletData.color.rgba = palletData.color?.rgba?.r?palletData.color.rgba:{r:0,g:0,b:0,a:1}
|
||||
palletData.gradient.selectIndex = 0
|
||||
palletData.gradient.gradientShow = true
|
||||
if(!palletData.color.gradient){
|
||||
if(palletData.color.rgba.r){
|
||||
palletData.gradient.gradientList[palletData.gradient.selectIndex].rgba = {
|
||||
r:palletData.color.rgba.r,
|
||||
g:palletData.color.rgba.g,
|
||||
b:palletData.color.rgba.b,
|
||||
a:1,
|
||||
}
|
||||
}
|
||||
palletData.color.gradient = JSON.parse(JSON.stringify(palletData.gradient))
|
||||
}else{
|
||||
palletData.color.rgba = palletData.color.gradient.gradientList[0].rgba
|
||||
palletData.color.gradient = null
|
||||
}
|
||||
}
|
||||
const deleteGradientItem = ()=>{
|
||||
if(palletData.color.gradient.gradientList.length <= 2)return
|
||||
palletData.color.gradient.gradientList.splice(palletData.color.gradient.selectIndex,1)
|
||||
}
|
||||
const addGradient = (event:any)=>{
|
||||
let gradientWidth = event.target.clientWidth
|
||||
let left:any = event.offsetX/gradientWidth
|
||||
palletData.color.gradient.gradientList.push({
|
||||
rgba:palletData.color_.rgba,
|
||||
left:left.toFixed(2)*100+'%'
|
||||
})
|
||||
}
|
||||
const mousedownGradientAngle = (event:any)=>{
|
||||
// isMoible() true为移动端
|
||||
let domPosition = event.target.getBoundingClientRect()
|
||||
let position = {
|
||||
x:domPosition.x+domPosition.width/2,
|
||||
y:domPosition.y+domPosition.height/2,
|
||||
}
|
||||
let angle
|
||||
let mousedown = function(event:any){
|
||||
let e = getMousePosition(event,false)
|
||||
mouseDownOperation(e)
|
||||
}
|
||||
|
||||
let touchstart = function(event:any){
|
||||
let e = getMousePosition(event,true)
|
||||
mouseDownOperation(e)
|
||||
}
|
||||
let mouseDownOperation = (e:any)=>{
|
||||
let X = position.x
|
||||
let Y = position.y
|
||||
let x = (e.clientX) - X
|
||||
let y = Y -( e.clientY)
|
||||
angle = Math.atan2(x,y)*(180 / Math.PI)
|
||||
// this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
|
||||
palletData.color.gradient.angle = angle
|
||||
|
||||
}
|
||||
let mouseupGradientAngle = ()=>{
|
||||
window.removeEventListener('touchmove',touchstart)
|
||||
window.removeEventListener('touchend',mouseupGradientAngle)
|
||||
|
||||
window.removeEventListener('mousemove',mousedown)
|
||||
window.removeEventListener('mouseup',mouseupGradientAngle)
|
||||
}
|
||||
window.addEventListener('touchmove',touchstart)
|
||||
window.addEventListener('touchend',mouseupGradientAngle)
|
||||
|
||||
window.addEventListener('mousemove',mousedown)
|
||||
window.addEventListener('mouseup',mouseupGradientAngle)
|
||||
}
|
||||
|
||||
const mousedownGradient = (event:any,item:any,index:number)=>{
|
||||
palletData.color.gradient.selectIndex = index
|
||||
|
||||
|
||||
// this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
|
||||
let gradientWidth = (document.querySelector('.pallet .color_setting_operate_bg') as any).clientWidth
|
||||
let position = {
|
||||
x:event.clientX,
|
||||
left:event.target.style.left?event.target.style.left.split('%')[0]:0
|
||||
}
|
||||
let mousedown = function(event:any){
|
||||
let e = getMousePosition(event,false)
|
||||
mousedownGradient(e)
|
||||
}
|
||||
|
||||
let touchstart = function(event:any){
|
||||
let e = getMousePosition(event,true)
|
||||
mousedownGradient(e)
|
||||
}
|
||||
let mousedownGradient = (e:any)=>{
|
||||
let left = ((e.clientX) - position.x)/gradientWidth*100+Number(position.left)
|
||||
left = (left<0?0:left>100?100:left)
|
||||
item.left = left+'%'
|
||||
}
|
||||
|
||||
let mouseupGradientAngle = ()=>{
|
||||
window.removeEventListener('touchmove',touchstart)
|
||||
window.removeEventListener('touchend',mouseupGradientAngle)
|
||||
window.removeEventListener('mousemove',mousedown)
|
||||
window.removeEventListener('mouseup',mouseupGradientAngle)
|
||||
}
|
||||
window.addEventListener('touchmove',touchstart)
|
||||
window.addEventListener('touchend',mouseupGradientAngle)
|
||||
|
||||
window.addEventListener('mousemove',mousedown)
|
||||
window.addEventListener('mouseup',mouseupGradientAngle)
|
||||
|
||||
|
||||
}
|
||||
const selectImgItem = ()=>{
|
||||
|
||||
}
|
||||
const openPallet = ()=>{
|
||||
palletData.palletShow = !palletData.palletShow
|
||||
if(palletData.palletShow && props.selectColor?.rgba?.r){
|
||||
if(props.selectColor.gradient){
|
||||
palletData.color_.rgba = props.selectColor.gradient.gradientList[0].rgba
|
||||
}else{
|
||||
palletData.color_ = JSON.parse(JSON.stringify(props.selectColor))
|
||||
}
|
||||
|
||||
palletData.color = JSON.parse(JSON.stringify(props.selectColor))
|
||||
}
|
||||
}
|
||||
onMounted(()=>{
|
||||
nextTick().then(()=>{
|
||||
const backIcon = document.createElement('div');
|
||||
backIcon.classList.add('vc-sketch-color-wrap')
|
||||
let dropperDom = document.getElementsByClassName("pallet")?.[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
|
||||
dropperDom.appendChild(backIcon);
|
||||
backIcon.addEventListener('click',async ()=>{
|
||||
try {
|
||||
const dropper = new EyeDropper();
|
||||
const result = await dropper.open();
|
||||
let hex = result.sRGBHex.replace("#", "");
|
||||
// 将十六进制颜色码拆分成红、绿、蓝三个部分
|
||||
const r = parseInt(hex.substring(0, 2), 16);
|
||||
const g = parseInt(hex.substring(2, 4), 16);
|
||||
const b = parseInt(hex.substring(4, 6), 16);
|
||||
palletData.color = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
|
||||
// return `rgb(${r}, ${g}, ${b})`;
|
||||
// box.style.backgroundColor = label.textContent = result.sRGBHex;
|
||||
} catch (e) {
|
||||
message.info(t('DesignDetailAlter.jsContent1'))
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
return{
|
||||
...toRefs(palletData),
|
||||
...toRefs(getpalletListDom),
|
||||
|
||||
openPallet,
|
||||
selectImgItem,
|
||||
setOperate,
|
||||
deleteGradientItem,
|
||||
addGradient,
|
||||
mousedownGradientAngle,
|
||||
mousedownGradient,
|
||||
getMousePosition,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.pallet{
|
||||
position: relative;
|
||||
> .palletColo{
|
||||
width: 100%;
|
||||
height: 5.5rem;
|
||||
border-radius: .5rem;
|
||||
border: 1px solid #000;
|
||||
padding: .5rem .6rem;
|
||||
cursor: pointer;
|
||||
> .palletBackColor{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
> .palletBox{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
> .color_setting_block{
|
||||
margin: auto;
|
||||
background: linear-gradient(70deg, #eee4f3, #f3f4e6);
|
||||
width: 100%;
|
||||
border-radius: calc(1rem*1.2);
|
||||
overflow: hidden;
|
||||
box-shadow: 2px 2px 8px rgba(0,0,0,.3);
|
||||
.vc-chrome{
|
||||
background: rgba(0,0,0,0);
|
||||
box-shadow:none;
|
||||
}
|
||||
:deep(.chrome_color){
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.vc-chrome-saturation-wrap{
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
margin: 2rem auto;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.vc-chrome-body{
|
||||
padding: 0;
|
||||
width: 90%;
|
||||
margin: 2 auto;
|
||||
margin: 0 auto;
|
||||
background: rgba(0,0,0,0);
|
||||
margin-bottom: 3rem;
|
||||
// display: none;
|
||||
.vc-chrome-fields-wrap{
|
||||
margin-top: 5%;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
.vc-chrome-toggle-btn{
|
||||
width: calc(3.2rem*1.2);
|
||||
.vc-chrome-toggle-icon{
|
||||
height: auto;
|
||||
margin-right: calc(-0.4rem*1.2);
|
||||
margin-top: calc(0rem*1.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
svg{
|
||||
width: calc(2.4rem*1.2) !important;
|
||||
height: calc(2.4rem*1.2) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc-chrome-fields{
|
||||
.vc-chrome-field{
|
||||
padding-left: calc(.6rem*1.2);
|
||||
}
|
||||
.vc-input__label{
|
||||
font-size: calc(1.6rem*1.2);
|
||||
}
|
||||
.vc-input__input{
|
||||
font-size: 2rem;
|
||||
height: 4rem;
|
||||
}
|
||||
}
|
||||
.ant-upload-list{
|
||||
|
||||
}
|
||||
.vc-sketch-color-wrap{
|
||||
background-image: url(@../../../../../../assets/images/homePage/dropper.png);
|
||||
background-size: 3rem;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
padding: calc(.7rem*1.2);
|
||||
border: 1px solid;
|
||||
position: absolute;
|
||||
bottom: -2rem;
|
||||
right: 0rem;
|
||||
border-radius: calc(.5rem*1.2);
|
||||
|
||||
}
|
||||
.vc-chrome-fields{
|
||||
.vc-input__label{
|
||||
margin-top: calc(1rem*1.2);
|
||||
}
|
||||
}
|
||||
.vc-chrome-fields:nth-child(2){
|
||||
>:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.vc-chrome-fields:nth-child(3){
|
||||
>:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc-chrome-controls{
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
.vc-chrome-color-wrap{
|
||||
// width: 3.6rem*1.2);
|
||||
margin-left: calc(2rem*1.2);
|
||||
width: auto;
|
||||
.vc-chrome-active-color{
|
||||
border-radius: 50%;
|
||||
}
|
||||
.vc-chrome-active-color,.vc-checkerboard{
|
||||
width: calc(3rem*1.2);
|
||||
height: calc(3rem*1.2);
|
||||
}
|
||||
}
|
||||
.vc-chrome-hue-wrap,.vc-chrome-alpha-wrap{
|
||||
.vc-hue{
|
||||
border-radius: 15px;
|
||||
}
|
||||
.vc-alpha{
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
height: 2rem;
|
||||
margin: 0;
|
||||
.vc-hue-pointer{
|
||||
transform: translateX(-1.25rem);
|
||||
}
|
||||
.vc-hue-picker{
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 50%;
|
||||
transform: translate(0px,-3px);
|
||||
}
|
||||
}
|
||||
.vc-chrome-alpha-wrap{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc-chrome-saturation-wrap .vc-saturation-circle{
|
||||
width: calc(1rem*1.2);
|
||||
height: calc(1rem*1.2);
|
||||
}
|
||||
}
|
||||
.color_block{
|
||||
// margin-top: calc(1rem;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// font-size: calc(1.6rem;
|
||||
width: 100%;
|
||||
padding: 0 5%;
|
||||
padding-bottom: 5%;
|
||||
margin: calc(0.5rem*1.2) auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.color_right{
|
||||
width: 13rem;
|
||||
font-size: calc(1.2rem*1.2);
|
||||
color: #666666;
|
||||
.color_rgb_block{
|
||||
display: flex;
|
||||
.rgb_item{
|
||||
margin-left: calc(.2rem*1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
.color_left{
|
||||
cursor: pointer;
|
||||
color: rgb(153, 153, 153);
|
||||
}
|
||||
.color_right,.color_left{
|
||||
>div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.color_HEX_block,.color_rgb_block{
|
||||
padding: .25rem .6rem;
|
||||
box-shadow: inset 0 0 0 1px #ccc;
|
||||
border-radius: .5rem;
|
||||
justify-content: space-around;
|
||||
text-transform:uppercase;
|
||||
.color_block_bg{
|
||||
width: 1.8rem;
|
||||
height: 2.5rem;
|
||||
// margin-right: .5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.color_block_bg{
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.color_setting_operateSingle{
|
||||
text-align: center;
|
||||
margin: 1rem 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.color_setting_btn{
|
||||
margin: 0 1rem;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
&.active{
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
}
|
||||
.color_setting_operate{
|
||||
*{
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none;
|
||||
}
|
||||
.color_setting_operate_item{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.operate_item_box{
|
||||
}
|
||||
}
|
||||
.color_setting_operate_control{
|
||||
.operate_item_delete,.operate_item_angle{
|
||||
cursor: pointer;
|
||||
}
|
||||
.operate_item_delete{
|
||||
i{
|
||||
display: flex;
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
.operate_item_angle{
|
||||
.operate_item_angle_box{
|
||||
border-radius: 50%;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border: solid 2px #39215b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
>div{
|
||||
height: 100%;
|
||||
width: 1rem;
|
||||
position: relative;
|
||||
pointer-events:none;
|
||||
}
|
||||
>div::before{
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0.2rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
background: #39215b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.color_setting_operate_input{
|
||||
width: 80%;
|
||||
// padding: 0 10%;
|
||||
margin: 1.2rem 10%;
|
||||
border-radius: 10%;
|
||||
position: relative;
|
||||
height: 2.5rem;
|
||||
.color_setting_operate_bg{
|
||||
border-radius: .5rem;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.color_setting_operate_btn{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
left: 0;
|
||||
width: 1rem;
|
||||
height: 110%;
|
||||
border: .2rem solid;
|
||||
border-radius: .5rem;
|
||||
cursor: pointer;
|
||||
box-sizing: content-box;
|
||||
z-index: 2;
|
||||
&.active{
|
||||
border: .3rem solid;
|
||||
}
|
||||
}
|
||||
.color_setting_operate_btn:hover{
|
||||
border: .3rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
258
src/component/DetailCopy/detailLeft/color/upload.vue
Normal file
258
src/component/DetailCopy/detailLeft/color/upload.vue
Normal file
@@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<div class="upload">
|
||||
<div class="successfullyUpload" v-show="uploadList?.[selectDetail.id]?.length >= 1">
|
||||
<div class="img">
|
||||
<div class="upload_file_item" v-for="(file) in uploadList?.[selectDetail.id]" :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">
|
||||
<div class="delete_file_block" @click="colorDeleteFile(index)">{{ $t('DesignDetailAlter.Delete') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color">
|
||||
<div v-for="item in colorList?.[selectDetail.id]" :key="item" @click="selectColor(item)" :style="{'background-color': item.hex}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<a-upload
|
||||
:capture="null"
|
||||
v-show="!uploadList?.[selectDetail.id] || uploadList?.[selectDetail.id]?.length < 1"
|
||||
list-type="picture-card"
|
||||
:customRequest="function(){}"
|
||||
@change="fileUploadChange"
|
||||
:before-upload="beforeUpload"
|
||||
:action="null"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
>
|
||||
<div class="upload_tip_block">
|
||||
<i class="fi fi-rr-picture"></i>
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,h,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
import { useStore } from "vuex";
|
||||
import GO from "@/tool/GO";
|
||||
import { LoadingOutlined } from '@ant-design/icons-vue';
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { rgbaToHex } from "@/tool/util"
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
emits:['selectUplpadColor'],
|
||||
setup(props,{emit}) {
|
||||
const {t} = useI18n();
|
||||
const store = useStore();
|
||||
const colorUpload = reactive({
|
||||
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
|
||||
|
||||
uploadList:{} as any,
|
||||
indicator: h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: "2.4rem",
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
colorList:{} as any,
|
||||
|
||||
})
|
||||
|
||||
const fileUploadChange = (data:any)=>{
|
||||
let file:any = 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'
|
||||
if(!colorUpload.uploadList[colorUpload.selectDetail.id])colorUpload.uploadList[colorUpload.selectDetail.id]=[]
|
||||
colorUpload.uploadList[colorUpload.selectDetail.id].push(file)
|
||||
|
||||
setTimeout(async ()=>{
|
||||
const img = new Image();
|
||||
// let colorImage = this.$refs.colorImage
|
||||
img.src = file.imgUrl;
|
||||
|
||||
img.onload = async () => {
|
||||
const colorThief = new ColorThief();
|
||||
// let domImg = colorImage[0];
|
||||
// let color = colorThief.getColor(img)
|
||||
// let colorHex = this.rgbaToHex(color)
|
||||
let selectColorList:any = [];
|
||||
let selectColor = colorThief.getPalette(img,8)
|
||||
//排序
|
||||
let obj = {
|
||||
max : 5,
|
||||
min: 5,
|
||||
}
|
||||
|
||||
let colorSort:any
|
||||
await GO.setColor(selectColor,file.imgUrl,obj).then(
|
||||
(rv:any) => {
|
||||
if(rv){
|
||||
colorSort = rv.ratio
|
||||
}
|
||||
}
|
||||
)
|
||||
colorSort.sort((a:any, b:any) => {
|
||||
var a_num = a.ratio;
|
||||
var b_num = b.ratio;
|
||||
return b_num - a_num;
|
||||
});
|
||||
selectColor = []
|
||||
colorSort.forEach((v:any)=>{
|
||||
selectColor.push(v.rgb)
|
||||
})
|
||||
selectColor = selectColor.join('&')
|
||||
selectColor = selectColor.split("&")
|
||||
let color = selectColor[0].split(',')
|
||||
let colorHex = rgbaToHex(color)
|
||||
|
||||
let colorLi:any = []
|
||||
new Set(selectColor).forEach((item:any)=>{
|
||||
colorLi.push(item.split(","))
|
||||
})
|
||||
colorLi.forEach((element:any) => {
|
||||
let colorLiHex = rgbaToHex(element)
|
||||
selectColorList.push(
|
||||
{rgba:{r:element[0],g:element[1],b:element[2],a:1},hex:colorLiHex}
|
||||
)
|
||||
});
|
||||
if(!colorUpload.colorList[colorUpload.selectDetail.id])colorUpload.colorList[colorUpload.selectDetail.id]=[]
|
||||
colorUpload.colorList[colorUpload.selectDetail.id] = selectColorList
|
||||
// this.getHsvColor(selectColorList)
|
||||
// this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
|
||||
img.remove()
|
||||
};
|
||||
},100)
|
||||
};
|
||||
// 转化为base64S
|
||||
reader.readAsDataURL(fileData)
|
||||
}
|
||||
const beforeUpload = (file:any)=>{
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
if (!isJpgOrPng) {
|
||||
message.info(t('DesignDetailAlter.jsContent4'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt2M) {
|
||||
message.info(t('DesignDetailAlter.jsContent5'));
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
}
|
||||
const selectColor = (color:any)=>{
|
||||
emit('selectUplpadColor',color)
|
||||
}
|
||||
const colorDeleteFile = ()=>{
|
||||
colorUpload.uploadList[colorUpload.selectDetail.id] = []
|
||||
colorUpload.colorList[colorUpload.selectDetail.id] = []
|
||||
}
|
||||
return{
|
||||
...toRefs(colorUpload),
|
||||
|
||||
fileUploadChange,
|
||||
beforeUpload,
|
||||
colorDeleteFile,
|
||||
selectColor,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.upload{
|
||||
// width: 34rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
:deep(.ant-upload-picture-card-wrapper){
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.ant-upload-list{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.ant-upload-select-picture-card{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: none;
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
&:hover{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.upload_tip_block{
|
||||
i{
|
||||
font-size: 4rem;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .successfullyUpload{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
> .color{
|
||||
display: flex;
|
||||
margin-left: 1rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
> div{
|
||||
margin: .5rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> .img{
|
||||
> .upload_file_item{
|
||||
> .upload_file_item_content{
|
||||
width: 9rem;
|
||||
height: 9rem;
|
||||
position: relative;
|
||||
&:hover{
|
||||
> .delete_file_block{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
> .delete_file_block{
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
line-height: 3rem;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
62
src/component/DetailCopy/detailLeft/index.vue
Normal file
62
src/component/DetailCopy/detailLeft/index.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="detailLeft">
|
||||
<sketch v-show="currentDetailType == 'sketch'"></sketch>
|
||||
<print v-show="currentDetailType == 'print'"></print>
|
||||
<color v-show="currentDetailType == 'color'"></color>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import sketch from './sketch.vue'
|
||||
import print from './print.vue'
|
||||
import color from './color/index.vue'
|
||||
|
||||
export default defineComponent({
|
||||
components:{
|
||||
sketch,print,color
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const detailData = reactive({
|
||||
selectTitle:'upload',
|
||||
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
|
||||
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
|
||||
})
|
||||
const getDetailListData = reactive({
|
||||
total:0,
|
||||
pageSize:10,
|
||||
currentPage:1,
|
||||
})
|
||||
const getDetailListDom = reactive({
|
||||
libraryList:null as any,
|
||||
})
|
||||
|
||||
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
...toRefs(getDetailListData),
|
||||
...toRefs(getDetailListDom),
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.detailLeft{
|
||||
width: 34rem;
|
||||
// width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
122
src/component/DetailCopy/detailLeft/module/currentList.vue
Normal file
122
src/component/DetailCopy/detailLeft/module/currentList.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
|
||||
<template>
|
||||
<div class="uploadList">
|
||||
<div class="uploadList_box">
|
||||
<div class="content_img_item" v-for="(file) in currentList[currentDetailType]" :key="file.id">
|
||||
<div class="content_img_item_block" :class="{active:file?.checked}">
|
||||
<img v-lazy="file.imgUrl" :key="file.imgUrl" :alt="file.name" @click.stop="selectImgItem(file)"/>
|
||||
<sketchCategory :disignTypeList="catecoryList" :generateList="allBoardData.sketchboardFiles" :item="file" :isSpread="true"></sketchCategory>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,watch,toRefs, reactive, onMounted} from 'vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
import {getMinioUrl} from '@/tool/util'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
sketchCategory
|
||||
},
|
||||
props:{
|
||||
catecoryList:{
|
||||
type:Object,
|
||||
default:()=>[] as any,
|
||||
required:true
|
||||
}
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const {t} = useI18n();
|
||||
const store = useStore();
|
||||
const detailData = reactive({
|
||||
allBoardData:computed(()=>store.state.UploadFilesModule.allBoardData),
|
||||
currentList:{
|
||||
sketch:[],
|
||||
print:[],
|
||||
color:[],
|
||||
},
|
||||
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
|
||||
|
||||
})
|
||||
|
||||
const getDetailListData = reactive({
|
||||
|
||||
})
|
||||
const selectImgItem = (file:any)=>{
|
||||
if(!file.resData.minIOPath)file.resData.minIOPath = getMinioUrl(file.resData.url)
|
||||
store.commit('DesignDetailCopy/setNewDetail',file.resData)
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
console.log(detailData.allBoardData);
|
||||
detailData.currentList = {
|
||||
sketch:detailData.allBoardData.sketchboardFiles,
|
||||
print:detailData.allBoardData.printboardFiles,
|
||||
color:detailData.allBoardData.colorBoards,
|
||||
}
|
||||
|
||||
})
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
...toRefs(getDetailListData),
|
||||
|
||||
selectImgItem,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.uploadList{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .uploadList_box{
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1rem;
|
||||
justify-content: space-between;
|
||||
align-content: flex-start;
|
||||
&::-webkit-scrollbar{display: none;}
|
||||
> .content_img_item{
|
||||
> .content_img_item_block{
|
||||
width: calc((34rem - 2rem) / 2);
|
||||
height: calc((34rem - 2rem) / 2);
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
> img{
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .material_content_list_loding{
|
||||
width: 100%;
|
||||
height: calc((34rem - 2rem) / 2);
|
||||
}
|
||||
> .upload_item{
|
||||
width: calc((34rem - 2rem) / 2);
|
||||
height: calc((34rem - 2rem) / 2);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
252
src/component/DetailCopy/detailLeft/module/libraryList.vue
Normal file
252
src/component/DetailCopy/detailLeft/module/libraryList.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<div class="libraryList">
|
||||
<div class="generalModel_state">
|
||||
<div class="generalModel_state_item">
|
||||
<a-select
|
||||
v-model:value="designType"
|
||||
:options="designTypeList"
|
||||
@change="handleChange"
|
||||
style="width:100%"
|
||||
size="large"
|
||||
:fieldNames="{ label: 'name', value: 'value' }"
|
||||
>
|
||||
<template #suffixIcon
|
||||
><span
|
||||
class="icon iconfont icon-xiala"
|
||||
style="color: #343579"
|
||||
></span
|
||||
></template>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="generalModel_state_item">
|
||||
<input class="search_input" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
</div>
|
||||
<!-- clothesPrint -->
|
||||
</div>
|
||||
<div class="libraryList_box">
|
||||
<div class="content_img_item" v-for="(file) in libraryList" :key="file.id">
|
||||
<div class="content_img_item_block" :class="{active:file?.checked}">
|
||||
<img v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
|
||||
<sketchCategory :disignTypeList="designTypeList" :generateList="libraryList" :item="file" :isSetSketchCategory="true"></sketchCategory>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="total > libraryList.length" class="material_content_list_loding" v-observe>
|
||||
<img src="@/assets/images/homePage/loading.gif" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
sketchCategory
|
||||
},
|
||||
props:{
|
||||
catecoryList:{
|
||||
type:Object,
|
||||
default:()=>[] as any,
|
||||
required:true
|
||||
}
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const detailData = reactive({
|
||||
isShowLoading:false,//懒加载，加载中
|
||||
libraryList:[],
|
||||
designTypeList:[] as any,
|
||||
designType:'',
|
||||
searchPictureName:'',
|
||||
designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
|
||||
})
|
||||
const getDetailListData = reactive({
|
||||
total:0,
|
||||
pageSize:10,
|
||||
currentPage:1,
|
||||
})
|
||||
const init = ()=>{
|
||||
detailData.designTypeList = props.catecoryList
|
||||
detailData.designType = detailData.designTypeList[0].value
|
||||
getLibraryList()
|
||||
}
|
||||
const hasDuplicateId = (id:any)=>{
|
||||
let arr = detailData.designDetail.clothes
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (arr[i].id === id) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
const selectImgItem = (file:any)=>{
|
||||
let randomNum = Math.floor(100 + Math.random() * 900);
|
||||
let type = store.state.DesignDetailCopy.currentDetailType
|
||||
let id = file.id
|
||||
if(type == 'sketch'){
|
||||
id = Number(file.id + (randomNum + ''))
|
||||
if(hasDuplicateId(id)){
|
||||
selectImgItem(file)
|
||||
return
|
||||
}
|
||||
}
|
||||
let data = JSON.parse(JSON.stringify(file))
|
||||
data.id = id
|
||||
store.commit('DesignDetailCopy/setNewDetail',data)
|
||||
}
|
||||
const getLibraryList = ()=>{
|
||||
detailData.isShowLoading = true
|
||||
let level2Type = ''
|
||||
let workspace = store.state.Workspace.workspace
|
||||
let type = store.state.DesignDetailCopy.currentDetailType
|
||||
let leve1Type
|
||||
if(type == 'sketch'){
|
||||
leve1Type = 'Sketchboard'
|
||||
}else if(type == 'print'){
|
||||
leve1Type = 'Printboard'
|
||||
}else if(type == 'element'){
|
||||
leve1Type = 'DesignElements'
|
||||
}
|
||||
let data = {
|
||||
level1Type:leve1Type,
|
||||
// level2Type:'Pattern',
|
||||
level2Type:detailData.designType,
|
||||
modelSex:workspace?.sex,
|
||||
page:getDetailListData.currentPage,
|
||||
pictureName:detailData.searchPictureName,
|
||||
size:getDetailListData.pageSize+detailData.libraryList.length,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
|
||||
(rv) => {
|
||||
rv.content.forEach((vItem:any)=>{
|
||||
if(props.catecoryList){
|
||||
props.catecoryList.forEach((item:any) => {
|
||||
if(item.value == vItem.level2Type){
|
||||
vItem.categoryValue = item.value
|
||||
vItem.category = item.name
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
detailData.libraryList = rv.content
|
||||
detailData.isShowLoading = false
|
||||
getDetailListData.total = rv.total
|
||||
}
|
||||
).catch((res)=>{
|
||||
detailData.isShowLoading = false
|
||||
});
|
||||
}
|
||||
const handleChange = ()=>{
|
||||
getDetailListData.currentPage = 1
|
||||
detailData.libraryList = []
|
||||
getLibraryList()
|
||||
}
|
||||
onMounted(()=>{
|
||||
// getLibraryList()
|
||||
})
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
...toRefs(getDetailListData),
|
||||
init,
|
||||
selectImgItem,
|
||||
getLibraryList,
|
||||
handleChange,
|
||||
}
|
||||
},
|
||||
directives:{
|
||||
observe:{
|
||||
mounted (el,binding) {
|
||||
// console.log(binding.instance);
|
||||
let callback = (entries:any, observer:any)=> {
|
||||
entries.forEach((entry:any) => {
|
||||
if (entry.isIntersecting && !this_.isShowLoading) {
|
||||
this_.getLibraryList()
|
||||
} else {
|
||||
}
|
||||
});
|
||||
}
|
||||
const ob = new IntersectionObserver(callback,{
|
||||
root:null,
|
||||
threshold:[.5]
|
||||
})
|
||||
ob.observe(el)
|
||||
// this.currentPage = +=1
|
||||
// this.pageSize = 12
|
||||
// currentPage
|
||||
let this_:any = binding.instance
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.libraryList{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .generalModel_state{
|
||||
width: 100%;
|
||||
> .generalModel_state_item{
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
> .search_icon_block{
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
width: calc(6rem - 4px);
|
||||
height: calc(6rem - 4px);
|
||||
color: #fff;
|
||||
background: #000;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> .generalModel_state_item:last-child{
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
> .libraryList_box{
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1rem;
|
||||
justify-content: space-between;
|
||||
align-content: flex-start;
|
||||
&::-webkit-scrollbar{display: none;}
|
||||
> .content_img_item{
|
||||
> .content_img_item_block{
|
||||
width: calc((34rem - 2rem) / 2);
|
||||
height: calc((34rem - 2rem) / 2);
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
cursor: pointer;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .material_content_list_loding{
|
||||
width: 100%;
|
||||
height: calc((34rem - 2rem) / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
226
src/component/DetailCopy/detailLeft/module/uploadList.vue
Normal file
226
src/component/DetailCopy/detailLeft/module/uploadList.vue
Normal file
@@ -0,0 +1,226 @@
|
||||
|
||||
<template>
|
||||
<div class="uploadList">
|
||||
<div class="uploadList_box">
|
||||
|
||||
<div class="content_img_item" v-for="(file) in uploadList" :key="file.id">
|
||||
<div class="content_img_item_block" :class="{active:file?.checked}">
|
||||
<img v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
|
||||
<sketchCategory :disignTypeList="catecoryList" :generateList="uploadList" :item="file" ></sketchCategory>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_item">
|
||||
<div class="upload_file_item upload_component">
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:capture="null"
|
||||
|
||||
:data="{
|
||||
...upload,
|
||||
}"
|
||||
:headers="{ Authorization: token }"
|
||||
v-model:file-list="uploadList"
|
||||
:before-upload="beforeUpload"
|
||||
:maxCount="8"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file) => upFileUploadChange(file)"
|
||||
>
|
||||
<div
|
||||
class="upload_tip_block"
|
||||
v-show="uploadList.length != 8"
|
||||
>
|
||||
<i class="fi fi-br-upload"></i>
|
||||
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
import {getUploadUrl} from '@/tool/util'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
sketchCategory
|
||||
},
|
||||
props:{
|
||||
catecoryList:{
|
||||
type:Object,
|
||||
default:()=>[] as any,
|
||||
required:true
|
||||
}
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const {t} = useI18n();
|
||||
const store = useStore();
|
||||
const detailData = reactive({
|
||||
isShowLoading:false,//懒加载，加载中
|
||||
uploadList:[],
|
||||
upload:{
|
||||
isPin: 0,
|
||||
level1Type: 'Sketchboard',
|
||||
gender:store.state.Workspace.workspace.sex,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
token:getCookie("token"),
|
||||
uploadUrl:getUploadUrl(),
|
||||
})
|
||||
const getDetailListData = reactive({
|
||||
total:0,
|
||||
pageSize:10,
|
||||
currentPage:1,
|
||||
})
|
||||
const selectImgItem = (file:any)=>{
|
||||
// let data = JSON.parse(JSON.stringify(file))
|
||||
store.commit('DesignDetailCopy/setNewDetail',file)
|
||||
}
|
||||
const upFileUploadChange = (data:any)=>{
|
||||
let file = data.file;
|
||||
let bor = true
|
||||
if (file.status === "done") {
|
||||
let res = JSON.parse(file.xhr.response);
|
||||
if(res.errCode == 0){
|
||||
file.id = res.data.id;
|
||||
file.url = res.data.url;
|
||||
file.resData = res.data;
|
||||
let type
|
||||
if(props?.catecoryList){
|
||||
if(res.data.level2Type){
|
||||
props?.catecoryList.forEach((item:any) => {
|
||||
if(item.value == res.data.level2Type){
|
||||
file.categoryValue = item?.value;
|
||||
type = item.value
|
||||
file.category = item?.name;
|
||||
}
|
||||
});
|
||||
}else{
|
||||
file.categoryValue = props?.catecoryList?.[0].value;
|
||||
type = props.catecoryList[0].value
|
||||
file.category = props.catecoryList[0].name;
|
||||
}
|
||||
}
|
||||
|
||||
file.designType = res.data.designType
|
||||
file.level2Type = type;
|
||||
file.minIOPath = file.resData.minIOPath
|
||||
let fileList = detailData.uploadList.filter(
|
||||
(v:any) => v.status === "done"
|
||||
);
|
||||
console.log(file);
|
||||
|
||||
detailData.uploadList = fileList
|
||||
// this.selectImgItem(detailData.uploadList[detailData.uploadList.length-1])
|
||||
}else{
|
||||
bor = false
|
||||
}
|
||||
} else if (file.status === "error") {
|
||||
bor = false
|
||||
}
|
||||
if(!bor){
|
||||
let res = JSON.parse(file.xhr.response);
|
||||
let index = -1;
|
||||
detailData.uploadList.forEach((ele:any, index1) => {
|
||||
if (file.uid === ele.uid) {
|
||||
index = index1;
|
||||
}
|
||||
});
|
||||
if (index > -1) {
|
||||
detailData.uploadList.splice(index, 1);
|
||||
}
|
||||
message.warning(res.errMsg);
|
||||
}
|
||||
|
||||
}
|
||||
const beforeUpload = (file:any)=>{
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
if (!isJpgOrPng) {
|
||||
message.info(t('DesignDetailAlter.jsContent4'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt2M) {
|
||||
message.info(t('DesignDetailAlter.jsContent5'));
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
}
|
||||
onMounted(()=>{
|
||||
let type = store.state.DesignDetailCopy.currentDetailType
|
||||
let leve1Type:any
|
||||
if(type == 'sketch'){
|
||||
leve1Type = 'Sketchboard'
|
||||
}else if(type == 'print'){
|
||||
leve1Type = 'Printboard'
|
||||
}else if(type == 'element'){
|
||||
leve1Type = 'DesignElements'
|
||||
}
|
||||
detailData.upload.level1Type = leve1Type
|
||||
})
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
...toRefs(getDetailListData),
|
||||
|
||||
selectImgItem,
|
||||
beforeUpload,
|
||||
upFileUploadChange,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.uploadList{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .uploadList_box{
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1rem;
|
||||
justify-content: space-between;
|
||||
align-content: flex-start;
|
||||
&::-webkit-scrollbar{display: none;}
|
||||
> .content_img_item{
|
||||
> .content_img_item_block{
|
||||
width: calc((34rem - 2rem) / 2);
|
||||
height: calc((34rem - 2rem) / 2);
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
> img{
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .material_content_list_loding{
|
||||
width: 100%;
|
||||
height: calc((34rem - 2rem) / 2);
|
||||
}
|
||||
> .upload_item{
|
||||
width: calc((34rem - 2rem) / 2);
|
||||
height: calc((34rem - 2rem) / 2);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
215
src/component/DetailCopy/detailLeft/print.vue
Normal file
215
src/component/DetailCopy/detailLeft/print.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<div class="print">
|
||||
<div class="detailText">Current Print</div>
|
||||
<div class="select_print">
|
||||
<img :class="{active:printList.length == 1}" v-for="item in printList" :src="item.path" alt="">
|
||||
<!-- <img :src="selectDetail.path" alt="">
|
||||
{{ selectDetail }} -->
|
||||
<div v-if="printList.length == 0">
|
||||
<i class="fi fi-rr-picture centent"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="switch_type_list">
|
||||
<div
|
||||
@click.stop="openCurrent()"
|
||||
class="switch_type_item"
|
||||
:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
|
||||
>
|
||||
<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="openUpload()"
|
||||
class="switch_type_item"
|
||||
:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
|
||||
>
|
||||
<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="openLibrary()"
|
||||
class="switch_type_item"
|
||||
:class="[selectTitle == 'library' ? 'select_swtich' : '']"
|
||||
>
|
||||
<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="print_content_list">
|
||||
<div class="content_item" v-show="selectTitle == 'current'">
|
||||
<currentList ref="currentList" :catecoryList="sketchCatecoryList"></currentList>
|
||||
</div>
|
||||
<div class="content_item" v-show="selectTitle == 'upload'">
|
||||
<uploadList :catecoryList="sketchCatecoryList"></uploadList>
|
||||
</div>
|
||||
<div class="content_item" v-show="selectTitle == 'library'">
|
||||
<libraryList ref="libraryList" :catecoryList="sketchCatecoryList"></libraryList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
// import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
||||
import libraryList from './module/libraryList.vue'
|
||||
import uploadList from './module/uploadList.vue'
|
||||
import currentList from './module/currentList.vue'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
currentList,
|
||||
libraryList,
|
||||
uploadList,
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const detailData = reactive({
|
||||
selectTitle:'current',
|
||||
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
|
||||
sketchCatecoryList:computed(()=>{
|
||||
return store.state.UserHabit.printType
|
||||
}),
|
||||
printList:[]
|
||||
})
|
||||
watch(()=>detailData.selectDetail?.printObject?.prints,(newVal,oldVal)=>{
|
||||
detailData.printList = newVal.reduce((acc:any, curr:any) => {
|
||||
if (!acc.some((item:any) => item.id === curr.id)) {
|
||||
acc.push(curr);
|
||||
}
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
},{immediate: true})
|
||||
const getDetailListData = reactive({
|
||||
total:0,
|
||||
pageSize:10,
|
||||
currentPage:1,
|
||||
})
|
||||
const getDetailListDom = reactive({
|
||||
libraryList:null as any,
|
||||
})
|
||||
const openCurrent = ()=>{
|
||||
detailData.selectTitle = 'current'
|
||||
}
|
||||
const openUpload = ()=>{
|
||||
detailData.selectTitle = 'upload'
|
||||
}
|
||||
const openLibrary = ()=>{
|
||||
detailData.selectTitle = 'library'
|
||||
getDetailListDom.libraryList.init()
|
||||
}
|
||||
const selectImgItem = ()=>{
|
||||
|
||||
}
|
||||
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
...toRefs(getDetailListData),
|
||||
...toRefs(getDetailListDom),
|
||||
|
||||
openCurrent,
|
||||
openUpload,
|
||||
openLibrary,
|
||||
selectImgItem,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.print{
|
||||
// width: 34rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .detailText{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
> .select_print{
|
||||
width: 100%;
|
||||
height: 23.5rem;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
border-radius: .5rem;
|
||||
// border: 1px dashed #202020;
|
||||
border: 1px dashed transparent;
|
||||
background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em, #000 0,#000 0.6em);
|
||||
margin-bottom: 3rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
justify-content: space-between;
|
||||
overflow-y: auto;
|
||||
> img{
|
||||
object-fit: contain;
|
||||
height: 9rem;
|
||||
width: 9rem;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
> .active{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
> div{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> i{
|
||||
font-size: 10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .switch_type_list{
|
||||
display: flex;
|
||||
margin-bottom: 2.5rem;
|
||||
> .switch_type_item:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
> .switch_type_item{
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-right: 6.5rem;
|
||||
}
|
||||
> .switch_type_item::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
background: #000;
|
||||
height: calc(.4rem*1.2);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -.5rem;
|
||||
width: 0px;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
> .select_swtich {
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
> .select_swtich::before {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
> .print_content_list{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
> .content_item{
|
||||
height: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
178
src/component/DetailCopy/detailLeft/sketch.vue
Normal file
178
src/component/DetailCopy/detailLeft/sketch.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div class="sketch">
|
||||
<div class="detailText">Current Print</div>
|
||||
<div class="select_sketch">
|
||||
<img :src="selectDetail.path" alt="">
|
||||
</div>
|
||||
<div class="switch_type_list">
|
||||
<div
|
||||
@click.stop="openCurrent()"
|
||||
class="switch_type_item"
|
||||
:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
|
||||
>
|
||||
<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="openUpload()"
|
||||
class="switch_type_item"
|
||||
:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
|
||||
>
|
||||
<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="openLibrary()"
|
||||
class="switch_type_item"
|
||||
:class="[selectTitle == 'library' ? 'select_swtich' : '']"
|
||||
>
|
||||
<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sketch_content_list">
|
||||
<div class="content_item" v-show="selectTitle == 'current'">
|
||||
<currentList ref="currentList" :catecoryList="sketchCatecoryList"></currentList>
|
||||
</div>
|
||||
<div class="content_item" v-show="selectTitle == 'upload'">
|
||||
<uploadList :catecoryList="sketchCatecoryList"></uploadList>
|
||||
</div>
|
||||
<div class="content_item" v-show="selectTitle == 'library'">
|
||||
<libraryList ref="libraryList" :catecoryList="sketchCatecoryList"></libraryList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
// import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
||||
import libraryList from './module/libraryList.vue'
|
||||
import uploadList from './module/uploadList.vue'
|
||||
import currentList from './module/currentList.vue'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
currentList,
|
||||
libraryList,
|
||||
uploadList,
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const detailData = reactive({
|
||||
selectTitle:'current',
|
||||
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
|
||||
sketchCatecoryList:computed(()=>{
|
||||
return store.state.Workspace.workspacePosition
|
||||
})
|
||||
})
|
||||
const getDetailListData = reactive({
|
||||
total:0,
|
||||
pageSize:10,
|
||||
currentPage:1,
|
||||
})
|
||||
const getDetailListDom = reactive({
|
||||
libraryList:null as any,
|
||||
})
|
||||
const openCurrent = ()=>{
|
||||
detailData.selectTitle = 'current'
|
||||
}
|
||||
const openUpload = ()=>{
|
||||
detailData.selectTitle = 'upload'
|
||||
}
|
||||
const openLibrary = ()=>{
|
||||
detailData.selectTitle = 'library'
|
||||
getDetailListDom.libraryList.init()
|
||||
}
|
||||
const selectImgItem = ()=>{
|
||||
|
||||
}
|
||||
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
...toRefs(getDetailListData),
|
||||
...toRefs(getDetailListDom),
|
||||
|
||||
openCurrent,
|
||||
openUpload,
|
||||
openLibrary,
|
||||
selectImgItem,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.sketch{
|
||||
// width: 34rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .detailText{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
> .select_sketch{
|
||||
width: 100%;
|
||||
height: 23.5rem;
|
||||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
border-radius: .5rem;
|
||||
// border: 1px dashed #202020;
|
||||
border: 1px dashed transparent;
|
||||
background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em, #000 0,#000 0.6em);
|
||||
margin-bottom: 3rem;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
> .switch_type_list{
|
||||
display: flex;
|
||||
margin-bottom: 2.5rem;
|
||||
> .switch_type_item:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
> .switch_type_item{
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-right: 6.5rem;
|
||||
}
|
||||
> .switch_type_item::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
background: #000;
|
||||
height: calc(.4rem*1.2);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -.5rem;
|
||||
width: 0px;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
> .select_swtich {
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
> .select_swtich::before {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
> .sketch_content_list{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
> .content_item{
|
||||
height: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user