选择颜色调整两种方式
This commit is contained in:
X1627315083
@@ -30,12 +30,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="habitSetStyle_ok">
|
||||
<div class="started_btn" @click="setOk()">
|
||||
OK
|
||||
</div>
|
||||
<div class="started_btn" @click="setClear()">
|
||||
{{ $t('Habit.Clear') }}
|
||||
</div>
|
||||
<div class="started_btn" @click="setOk()">
|
||||
OK
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -84,7 +84,6 @@
|
||||
<div class="clear_button" @click="clearCurrentColor()">Clear</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="right_content_line right_content_line_upload">
|
||||
<div class="upload_right_header">
|
||||
<i class="color_edit fi fi-bs-comments" ></i>
|
||||
@@ -92,28 +91,36 @@
|
||||
</div>
|
||||
<div class="upload_centetn">
|
||||
<div class="upload_item Guide_1_10">
|
||||
<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 class="upload_file_item upload_file_item_show">
|
||||
<i v-show="fileList.length == 0" class="fi fi-rr-square-plus"></i>
|
||||
<div v-show="fileList.length > 0" class="upload_file_item upload_file_item_upload" 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>
|
||||
<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 class="upload_file_item_scale">
|
||||
<a-upload
|
||||
:capture="null"
|
||||
:max-count="1"
|
||||
list-type="picture-card"
|
||||
:customRequest="function(){}"
|
||||
@change="fileUploadChange"
|
||||
:before-upload="beforeUpload"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
>
|
||||
<div class="upload_tip_block">
|
||||
<i class="fi fi-br-upload"></i>
|
||||
</div>
|
||||
</a-upload>
|
||||
<div class="upload_file_item" @click="setPrintImg()">
|
||||
<i class="fi fi-rr-picture"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-upload
|
||||
:capture="null"
|
||||
v-show="fileList.length < 1"
|
||||
list-type="picture-card"
|
||||
:customRequest="function(){}"
|
||||
@change="fileUploadChange"
|
||||
:before-upload="beforeUpload"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
>
|
||||
<div class="upload_tip_block">
|
||||
<i class="fi fi-rr-picture"></i>
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
<div class="upload_color">
|
||||
<div v-for="color,index in selectColorList" :key="color" @click="setUplpadColor(color)" class="upload_color_item" :class="[ index == 0?'Guide_1_11':'',index == 1?'Guide_1_11_2':'']">
|
||||
@@ -144,6 +151,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<selectImgList ref="selectImgList" @setImgGetColor="setImgGetColor"></selectImgList>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -158,12 +166,14 @@ import {useStore} from 'vuex'
|
||||
import ColorThief from '@/tool/colorthief/colorthief'
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
|
||||
import selectImgList from "@/component/HomePage/selectImgList.vue";
|
||||
import { useI18n } from 'vue-i18n';
|
||||
export default defineComponent({
|
||||
components:{
|
||||
Chrome,
|
||||
Slider,
|
||||
Sketch,
|
||||
selectImgList,
|
||||
},
|
||||
setup(){
|
||||
// console.log(isMoible());
|
||||
@@ -436,81 +446,83 @@ export default defineComponent({
|
||||
}
|
||||
file.imgUrl = data_new
|
||||
file.status = 'done'
|
||||
this.fileList.push(file)
|
||||
setTimeout(async ()=>{
|
||||
const img = new Image();
|
||||
let colorImage = this.$refs.colorImage
|
||||
img.src = colorImage[0].src;
|
||||
const colorThief = new ColorThief();
|
||||
img.onload = async () => {
|
||||
let domImg = colorImage[0];
|
||||
// let color = colorThief.getColor(domImg)
|
||||
let selectColorList = [];
|
||||
let selectColor = colorThief.getPalette(img,9)
|
||||
//排序
|
||||
let obj = {
|
||||
max : 5,
|
||||
min: 5,
|
||||
}
|
||||
let colorSort
|
||||
await GO.setColor(selectColor,file.imgUrl,obj).then(
|
||||
(rv) => {
|
||||
if(rv){
|
||||
colorSort = rv.ratio
|
||||
}
|
||||
}
|
||||
)
|
||||
colorSort.sort((a, b) => {
|
||||
var a_num = a.ratio;
|
||||
var b_num = b.ratio;
|
||||
return b_num - a_num;
|
||||
});
|
||||
selectColor = []
|
||||
colorSort.forEach(v=>{
|
||||
selectColor.push(v.rgb)
|
||||
})
|
||||
selectColor = selectColor.join('&')
|
||||
selectColor = selectColor.split("&")
|
||||
let color = selectColor[0].split(',')
|
||||
let colorHex = this.rgbaToHex(color)
|
||||
let colorLi = []
|
||||
new Set(selectColor).forEach((item)=>{
|
||||
colorLi.push(item.split(","))
|
||||
})
|
||||
colorLi.forEach(element => {
|
||||
let colorLiHex = this.rgbaToHex(element)
|
||||
selectColorList.push(
|
||||
{rgba:{r:element[0],g:element[1],b:element[2],a:1},hex:colorLiHex}
|
||||
)
|
||||
});
|
||||
this.selectColorList = selectColorList
|
||||
this.getHsvColor(selectColorList)
|
||||
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
|
||||
// console.log(this.colorList);
|
||||
// console.log(selectColorList);
|
||||
// let colorListIndex = []
|
||||
// this.colorList.forEach((item,index)=>{
|
||||
// if(!item.rgba){
|
||||
// colorListIndex.push(index)
|
||||
// }
|
||||
// })
|
||||
// for (let index = 0; index < selectColorList.length; index++) {
|
||||
// this.colorList[colorListIndex[0]] = selectColorList[index]
|
||||
// colorListIndex.splice(0,1)
|
||||
// }
|
||||
nextTick().then(()=>{
|
||||
if(this.driver__.driver){
|
||||
driverObj__.moveNext()
|
||||
}
|
||||
})
|
||||
img.remove()
|
||||
};
|
||||
|
||||
},100)
|
||||
this.fileList[0] = file
|
||||
this.getImgColor()
|
||||
};
|
||||
// 转化为base64S
|
||||
reader.readAsDataURL(fileData)
|
||||
},
|
||||
getImgColor(){
|
||||
setTimeout(()=>{
|
||||
const img = new Image();
|
||||
let colorImage = this.$refs.colorImage
|
||||
const colorThief = new ColorThief();
|
||||
img.onload = async () => {
|
||||
let domImg = colorImage[0];
|
||||
// let color = colorThief.getColor(domImg)
|
||||
let selectColorList = [];
|
||||
let selectColor = colorThief.getPalette(img,9)
|
||||
//排序
|
||||
let obj = {
|
||||
max : 5,
|
||||
min: 5,
|
||||
}
|
||||
let colorSort
|
||||
await GO.setColor(selectColor,this.fileList[0].imgUrl,obj).then(
|
||||
(rv) => {
|
||||
if(rv){
|
||||
colorSort = rv.ratio
|
||||
}
|
||||
}
|
||||
)
|
||||
colorSort.sort((a, b) => {
|
||||
var a_num = a.ratio;
|
||||
var b_num = b.ratio;
|
||||
return b_num - a_num;
|
||||
});
|
||||
selectColor = []
|
||||
colorSort.forEach(v=>{
|
||||
selectColor.push(v.rgb)
|
||||
})
|
||||
selectColor = selectColor.join('&')
|
||||
selectColor = selectColor.split("&")
|
||||
let color = selectColor[0].split(',')
|
||||
let colorHex = this.rgbaToHex(color)
|
||||
let colorLi = []
|
||||
new Set(selectColor).forEach((item)=>{
|
||||
colorLi.push(item.split(","))
|
||||
})
|
||||
colorLi.forEach(element => {
|
||||
let colorLiHex = this.rgbaToHex(element)
|
||||
selectColorList.push(
|
||||
{rgba:{r:element[0],g:element[1],b:element[2],a:1},hex:colorLiHex}
|
||||
)
|
||||
});
|
||||
this.selectColorList = selectColorList
|
||||
this.getHsvColor(selectColorList)
|
||||
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
|
||||
// console.log(this.colorList);
|
||||
// console.log(selectColorList);
|
||||
// let colorListIndex = []
|
||||
// this.colorList.forEach((item,index)=>{
|
||||
// if(!item.rgba){
|
||||
// colorListIndex.push(index)
|
||||
// }
|
||||
// })
|
||||
// for (let index = 0; index < selectColorList.length; index++) {
|
||||
// this.colorList[colorListIndex[0]] = selectColorList[index]
|
||||
// colorListIndex.splice(0,1)
|
||||
// }
|
||||
nextTick().then(()=>{
|
||||
if(this.driver__.driver){
|
||||
driverObj__.moveNext()
|
||||
}
|
||||
})
|
||||
img.remove()
|
||||
};
|
||||
img.src = colorImage[0].src;
|
||||
},100)
|
||||
},
|
||||
rgbaToHex(rgba) { // rgba转16进制
|
||||
let hex = '#';
|
||||
rgba.forEach((i,index) => {
|
||||
@@ -759,6 +771,39 @@ export default defineComponent({
|
||||
let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
|
||||
this.setColorboardList(colorList)
|
||||
},
|
||||
setPrintImg(){
|
||||
let printImgListData = JSON.parse(JSON.stringify(this.store?.state?.UploadFilesModule.printboard))
|
||||
let moodImgListData = JSON.parse(JSON.stringify(this.store?.state?.UploadFilesModule.moodboard))
|
||||
let imgListData = [...moodImgListData,...printImgListData]
|
||||
console.log(imgListData.length);
|
||||
if(imgListData?.length==0){
|
||||
message.info(this.t('ColorboardUpload.jsContent6'))
|
||||
return
|
||||
}
|
||||
let selectImgList = this.$refs.selectImgList;
|
||||
// selectImgList.selectImgListMask = true
|
||||
// selectImgList.styleList = this.styleList
|
||||
selectImgList.init(imgListData);
|
||||
},
|
||||
setImgGetColor(data){
|
||||
data.status = 'await'
|
||||
this.fileList[0] = data
|
||||
fetch(data.imgUrl)
|
||||
.then(response => response.blob())
|
||||
.then(blob => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(blob);
|
||||
reader.onloadend = () => {
|
||||
this.fileList[0].status = 'done'
|
||||
const base64data = reader.result;
|
||||
this.fileList[0].imgUrl = base64data
|
||||
nextTick(()=>{
|
||||
this.getImgColor()
|
||||
})
|
||||
};
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -849,24 +894,56 @@ export default defineComponent({
|
||||
padding-right: calc(3rem*1.2);
|
||||
margin-right: 2.4rem;
|
||||
.upload_centetn{
|
||||
overflow-x: hidden;
|
||||
// overflow-x: hidden;
|
||||
height: calc(100% - 4.4rem*1.2);
|
||||
padding-bottom: 4rem;
|
||||
|
||||
}
|
||||
.upload_item{
|
||||
position: relative;
|
||||
}
|
||||
.upload_centetn::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.upload_file_item_show{
|
||||
position: relative;
|
||||
}
|
||||
.upload_file_item_scale{
|
||||
position: absolute;
|
||||
width: 28rem;
|
||||
height: 14rem;
|
||||
z-index: 2;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
display: none;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0px 4px 0px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
.upload_file_item_show:hover{
|
||||
border-bottom: none;
|
||||
.upload_file_item_scale{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.fi-rr-square-plus,.fi-rr-picture{
|
||||
zoom: 4;
|
||||
}
|
||||
.upload_file_item{
|
||||
// margin: 0 2rem 2rem 0;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
// width: 16.5rem;
|
||||
// height: 16.5rem;
|
||||
width: calc(12rem*1.2);
|
||||
height: calc(12rem*1.2);
|
||||
border: 1px solid #F5F5F5;
|
||||
vertical-align: top;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.upload_file_item_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -911,6 +988,11 @@ export default defineComponent({
|
||||
width: calc(12rem*1.2);
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
height: 25rem;
|
||||
overflow-y: auto;
|
||||
&.upload_color::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.upload_color_item{
|
||||
width: calc(5rem*1.2);
|
||||
height: calc(5rem*1.2);
|
||||
|
||||
182
src/component/HomePage/selectImgList.vue
Normal file
182
src/component/HomePage/selectImgList.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<a-modal
|
||||
class="selectImgList_modal generalModel"
|
||||
v-model:visible="selectImgList"
|
||||
:footer="null"
|
||||
width="50%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="selectImgListMask"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="true"
|
||||
:zIndex="1050"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selectImgList_content">
|
||||
<div class="modal_title_text">
|
||||
<div>{{ $t('selectImgList.SelectImg') }}</div>
|
||||
<div class="modal_title_text_intro"></div>
|
||||
</div>
|
||||
<div class="selectImgList_content_bottom">
|
||||
<div class="content_bottom_item" v-for="item in imgList" @click="setItemSelect(item)">
|
||||
<img :src="item.imgUrl" alt="" :class="{active:item.isChecked}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="selectImgList_ok">
|
||||
<div class="started_btn" @click="setClear()">
|
||||
{{ $t('selectImgList.Clear') }}
|
||||
</div>
|
||||
<div class="started_btn" @click="setOk()">
|
||||
OK
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
|
||||
// import { getCookie } from "@/tool/cookie";
|
||||
import { message,Modal } from "ant-design-vue";
|
||||
import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
|
||||
|
||||
import { Https } from "@/tool/https";
|
||||
import { getCookie,setCookie } from "@/tool/cookie";
|
||||
// import domTurnImg from '@/tool/domTurnImg'
|
||||
import { downloadIamge } from "@/tool/util";
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
emits:['setImgGetColor'],
|
||||
|
||||
setup(props,{emit}) {
|
||||
let selectImgList: any = ref(false);//弹窗
|
||||
let selectImgListMask:any = ref(false)//弹窗遮罩
|
||||
let oldDataId = ''
|
||||
let selectImgListData:any = reactive({
|
||||
imgList:[],
|
||||
selectStyle:{
|
||||
name:'',
|
||||
id:'',
|
||||
},
|
||||
selectStyleName:'',
|
||||
isShowMark:false,
|
||||
})
|
||||
const {t} = useI18n()
|
||||
let init = (data:any)=>{
|
||||
selectImgList.value = true
|
||||
selectImgListData.imgList = data
|
||||
// selectImgListData.selectStyleId = 'feng2'
|
||||
}
|
||||
let cleardata = ()=>{
|
||||
selectImgList.value = false
|
||||
selectImgListData.isShowMark = false
|
||||
// setParentData()
|
||||
|
||||
}
|
||||
let cancelDsign = ()=>{
|
||||
cleardata()
|
||||
}
|
||||
let setOk= ()=>{
|
||||
let data = selectImgListData.imgList.filter((item:any)=>item.isChecked);
|
||||
if(data.legnth > 0){
|
||||
emit('setImgGetColor',data[0])
|
||||
}
|
||||
cleardata()
|
||||
}
|
||||
let setClear = ()=>{
|
||||
selectImgListData.selectStyle.id = ''
|
||||
selectImgListData.selectStyle.name = ''
|
||||
selectImgListData.selectStyle.value = ''
|
||||
}
|
||||
let setItemSelect = (item:any)=>{
|
||||
selectImgListData.imgList.forEach((item:any) => {
|
||||
item.isChecked = false
|
||||
});
|
||||
item.isChecked = true
|
||||
}
|
||||
return {
|
||||
selectImgList,
|
||||
selectImgListMask,
|
||||
...toRefs(selectImgListData),
|
||||
init,
|
||||
cancelDsign,
|
||||
setItemSelect,
|
||||
setOk,
|
||||
setClear,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// moodTemplateId: "", //模板id
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.selectImgList_modal {
|
||||
&.generalModel{
|
||||
.ant-modal-body {
|
||||
height: calc(55rem*1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.selectImgList_content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.selectImgList_content_bottom{
|
||||
--border-color: #c4c4c4;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
overflow-y: auto;
|
||||
.content_bottom_item{
|
||||
img{
|
||||
width: 16rem;
|
||||
height: 16rem;
|
||||
object-fit: contain;
|
||||
margin: 2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.content_bottom_item:nth-child(4n){
|
||||
margin-right: 0rem;
|
||||
}
|
||||
|
||||
.content_bottom_item .active{
|
||||
opacity: .5;
|
||||
transform: scale(.8);
|
||||
}
|
||||
}
|
||||
.selectImgList_ok{
|
||||
width: 60%;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
padding-top: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
>div{
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -730,6 +730,7 @@ export default defineComponent({
|
||||
models = {
|
||||
libraryId:this.printObject.relationId || null,
|
||||
templateId:this.printObject.templateId || null,
|
||||
sex:this.sex,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
...await this.getPrintLocation()
|
||||
}
|
||||
|
||||
@@ -718,6 +718,7 @@ export default defineComponent({
|
||||
libraryId:this.printObject.relationId || null,
|
||||
templateId:this.printObject.templateId || null,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
sex:this.sex,
|
||||
...this.getPrintLocation()
|
||||
}
|
||||
let cropper:any = this.$refs.cropper
|
||||
@@ -730,7 +731,7 @@ export default defineComponent({
|
||||
if(this.isShowMark){
|
||||
return
|
||||
}
|
||||
this.isShowMark = true
|
||||
// this.isShowMark = true
|
||||
Https.axiosPost(Https.httpUrls.libraryModelsDot, formData,{headers:{'Content-Type': 'multipart/form-data'}}).then(
|
||||
(rv: any) => {
|
||||
this.perviewUrl = rv
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div v-show="placementShow">
|
||||
<a-modal class="models_placement_component"
|
||||
<a-modal class="models_placement_component1"
|
||||
v-model:visible="placementShow"
|
||||
:footer="null"
|
||||
width="111.5rem"
|
||||
@@ -531,7 +531,7 @@ export default defineComponent({
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.models_placement_component{
|
||||
.models_placement_component1{
|
||||
|
||||
.ant-modal-close{
|
||||
width: 3.6rem;
|
||||
@@ -782,6 +782,8 @@ export default defineComponent({
|
||||
-ms-overflow-style: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
&::-webkit-scrollbar { width: 0 !important }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user