aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2023-11-24-dist

Browse Source
This commit is contained in:
X1627315083
2023-11-24 16:18:44 +08:00
parent dc2385a5a5
commit e908818d8d
40 changed files with 454 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
src/component/HomePage/ColorboardUpload.vue
View File

@@ -22,10 +22,10 @@
<span>{{ $t('ColorboardUpload.Palette') }}</span>
</div>
<div class="color_setting_block">
<Sketch class="sketch_color" v-model="selectColor" :show.sync="colorPickerVisible"/>
<!-- <Chrome class="chrome_color" v-model="selectColor"></Chrome> -->
<!-- <Sketch class="sketch_color" v-model="selectColor" :show.sync="colorPickerVisible"/> -->
<Chrome class="chrome_color" v-model="selectColor"></Chrome>
<!-- <Slider class="sileder_color" v-model="selectColor"></Slider> -->
<div class="color_block">
<!-- <div class="color_block">
<div class="color_left" @click="colorBlockHex = !colorBlockHex">
<div v-show="colorBlockHex">
{{ $t('ColorboardUpload.HEX') }}
@@ -48,7 +48,7 @@
<div class="rgb_item">{{getSelectRGB(selectColor).b}}</div>
</div>
</div>
</div>
</div> -->
</div>
<!-- <div class="color_review_block">
<div class="clear_button" @click="clearCurrentColor()">Clear</div>
@@ -117,7 +117,7 @@
</div>
</template>
<script>
import { Chrome,Slider,Sketch,Material,Compact,Swatches,Photoshop } from '@ans1998/vue3-color'
import { Chrome,Slider,Sketch,Material,Compact,Swatches,} from '@ans1998/vue3-color'
import { Https } from "@/tool/https";
import GO from "@/tool/GO";
import { defineComponent, h,ref,inject } from 'vue'
@@ -133,7 +133,7 @@ export default defineComponent({
components:{
Chrome,
Slider,
Sketch
Sketch,
},
setup(){
let fileList = ref([])
@@ -214,8 +214,11 @@ export default defineComponent({
mounted(){
this.token = getCookie('token') || ''
this.uploadUrl = getUploadUrl()
let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-sketch-color-wrap')[0]
dropperDom.addEventListener('click',async ()=>{
const backIcon = document.createElement('div');
backIcon.classList.add('vc-sketch-color-wrap')
let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
dropperDom.appendChild(backIcon);
backIcon.addEventListener('click',async ()=>{
try {
const dropper = new EyeDropper();
const result = await dropper.open();
@@ -231,26 +234,26 @@ export default defineComponent({
} catch (e) {
message.info(this.t('ColorboardUpload.jsContent1'))
}
})
},false)
this.clearSelectColor()
// if ("EyeDropper" in window) {
// console.log(true);
// }
// else {
// console.log(false);
// }
if ("EyeDropper" in window) {
console.log(true);
}
else {
console.log(false);
}
},
methods:{
clearSelectColor(){
let colorBg0 = document.getElementsByClassName('colorboard_upload_modal')[0].getElementsByClassName('color_block_bg')[0]
let colorBg1 = document.getElementsByClassName('colorboard_upload_modal')[0].getElementsByClassName('color_block_bg')[1]
if(this.selectColor?.rgba?.r || this.selectColor?.rgb?.r){
colorBg0.style.opacity = 1
colorBg1.style.opacity = 1
}else{
colorBg0.style.opacity = 0
colorBg1.style.opacity = 0
}
// let colorBg0 = document.getElementsByClassName('colorboard_upload_modal')[0].getElementsByClassName('color_block_bg')[0]
// let colorBg1 = document.getElementsByClassName('colorboard_upload_modal')[0].getElementsByClassName('color_block_bg')[1]
// if(this.selectColor?.rgba?.r || this.selectColor?.rgb?.r){
// colorBg0.style.opacity = 1
// colorBg1.style.opacity = 1
// }else{
// colorBg0.style.opacity = 0
// colorBg1.style.opacity = 0
// }
},
//选择不同的色块
selectColorItem(index,color){
@@ -674,69 +677,97 @@ export default defineComponent({
overflow: hidden;
// box-shadow: 2px 2px 8px #000;
box-shadow: 2px 2px 8px rgba(0,0,0,.3);
.chrome_color{
width: 16.5rem;
// height: 16.5rem;
overflow: hidden;
background: linear-gradient(70deg, #eee4f3, #f3f4e6);
.sketch_color{
box-shadow: none;
width: 18rem;
background: rgba(0,0,0,0);
padding-top: 1rem !important;
max-width: 17rem;
padding: 0;
.vc-sketch{
}
.vc-sketch-saturation-wrap{
width: 16rem;
height: 16rem;
max-height: 17rem;
max-width: 17rem;
margin: auto;
padding-bottom: 0;
}
.vc-sketch-presets{
display: none;
}
.vc-botton-container{
display: none;
}
.vc-chrome-body{
display: none;
}
.vc-sketch-field{
display: none;
.vc-input__input{
text-align: center;
padding: .4rem 0;
border-radius: 5px;
}
}
.vc-sketch-color-wrap{
border-radius: 5px;
box-shadow: inset 0 0 0 1px #ccc;
.vc-sketch-active-color{
}
.vc-sketch-active-color{
display: none;
}
.vc-checkerboard{
display: none;
}
}
.vc-sketch-color-wrap{
background-image: url(@../../../../assets/images/homePage/dropper.png);
background-size: 1.5rem;
background-repeat: no-repeat;
background-position: 50%;
cursor: pointer;
.vc-chrome-saturation-wrap{
height: 100%;
width: 16rem;
height: 16rem;
max-height: 17rem;
max-width: 17rem;
margin: .7rem auto;
padding-bottom: 0;
}
.vc-chrome-body{
padding: 0;
width: 90%;
margin: 0.5rem auto;
margin: 0 auto;
background: rgba(0,0,0,0);
margin-bottom: 2rem;
// display: none;
.vc-chrome-fields-wrap{
margin-top: 5%;
padding: 0;
position: relative;
.vc-chrome-toggle-btn{
width: 3.2rem;
.vc-chrome-toggle-icon{
height: auto;
margin-right: -0.4rem;
margin-top: 0rem;
display: flex;
flex-direction: column;
align-items: center;
svg{
width: 2.4rem !important;
height: 2.4rem !important;
}
}
}
.vc-chrome-fields{
.vc-chrome-field{
padding-left: .6rem;
}
.vc-input__label{
font-size: 1.6rem;
}
.vc-input__input{
font-size: 1.1rem;
height: 2.1rem;
}
}
.ant-upload-list{
}
.vc-sketch-color-wrap{
background-image: url(@../../../../assets/images/homePage/dropper.png);
background-size: 1.5rem;
background-repeat: no-repeat;
background-position: 50%;
cursor: pointer;
margin: 0;
width: 2.2rem;
height: 2.2rem;
padding: .7rem;
border: 1px solid;
position: absolute;
bottom: -.5rem;
right: .5rem;
border-radius: .5rem;
}
.vc-chrome-fields{
.vc-input__label{
margin-top: 1rem;
}
}
}
// .vc-sketch-color-wrap{
// display: none;
// }
.vc-sketch-controls{
width: 90%;
margin: .5rem auto;
.vc-sketch-hue-wrap,.vc-sketch-alpha-wrap{
.vc-chrome-controls{
align-items: center;
flex-direction: row-reverse;
.vc-chrome-color-wrap{
// width: 3.6rem;
width: auto;
.vc-chrome-active-color,.vc-checkerboard{
width: 3rem;
height: 3rem;
}
}
.vc-chrome-hue-wrap,.vc-chrome-alpha-wrap{
.vc-hue{
border-radius: 15px;
}
@@ -745,24 +776,17 @@ export default defineComponent({
overflow: hidden;
}
}
.vc-sketch-alpha-wrap{
margin-top: .5rem;
.vc-chrome-hue-wrap{
margin-bottom: .5rem;
}
}
}
.chrome_color{
width: 16.5rem;
height: 16.5rem;
overflow: hidden;
.vc-chrome-saturation-wrap .vc-saturation-circle{
width: 1rem;
height: 1rem;
}
}
.vc-chrome-saturation-wrap{
height: 100%;
}
.vc-chrome-saturation-wrap .vc-saturation-circle{
width: 1rem;
height: 1rem;
}
}
.sileder_color{
margin-top:1.3rem;

2
src/component/HomePage/ExportNewCoolection.vue
View File

@@ -66,7 +66,7 @@
<div v-show="exportNav[4].change" class="img_block_item img_block_item_sketch_like h50">
<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">
<img class="all_img_content" :src="design.designOutfitUrl">
</div>
</div>
</div>

49
src/component/HomePage/collectionModal.vue
View File

@@ -49,6 +49,9 @@
<SketchboardUpload ref="SketchboardUpload" v-show="collectionStep === 4"></SketchboardUpload>
<!-- <MarketingSketchUpload ref="MarketingSketchUpload" v-show="collectionStep === 5"></MarketingSketchUpload> -->
</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
</a-modal>
</div>
@@ -64,6 +67,7 @@ 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 { Https } from "@/tool/https";
import {useStore} from 'vuex'
import { openGuide,driverObj__ } from "@/tool/guide";
import GO from "@/tool/GO";
@@ -84,9 +88,11 @@ export default defineComponent({
return store.state.Guide.guide
})
provide('driver__',driver__)
let isShowMark = ref(false)
return {
driver__,
t,
isShowMark,
}
},
@@ -167,21 +173,46 @@ export default defineComponent({
//完成
finishCollection(){
let colorBoards = this.store.state.UploadFilesModule.colorBoards
if(!colorBoards || colorBoards?.length < 1){
message.info(this.$t('collectionModal.jsContent3'))
return
}
this.isShowMark = true
let sketchList = this.store.state.UploadFilesModule.sketchboard
let arr:any = []
sketchList.forEach((item:any) => {
let obj = {
designType:item.resData.designType,
isPin:item.pin,
level2Type:item.category,
sketchBoardId:item.id
}
arr.push(obj)
});
let data = {sketchBoards:arr}
this.store.commit('clearAllId')
GO.id = 0
this.showCollectionModal =false
this.collectionStep = 1
this.$emit('finishCollection')
this.showCollectionModal =false
this.collectionStep = 1
this.$emit('finishCollection')
if(this.driver__.driver){
driverObj__.moveNext()
}
// let elList = document.querySelectorAll('.img_block_item_sketch img')
// Https.axiosPost(Https.httpUrls.sketchBoardsBoundingBox, data)
// .then((rv: any) => {
// elList.forEach((item:any)=>{
// item.src = item.src
// })
// this.store.commit('clearAllId')
// GO.id = 0
// this.showCollectionModal =false
// this.collectionStep = 1
// this.$emit('finishCollection')
// if(this.driver__.driver){
// driverObj__.moveNext()
// }
// })
// .catch((res) => {
// });
}
}
})