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

1
dist/css/180.2125670a.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/css/257.afe63ca8.css vendored
View File

File diff suppressed because one or more lines are too long

1
dist/css/310.ab1ae8dd.css vendored
View File

File diff suppressed because one or more lines are too long

1
dist/css/468.bf097f98.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
dist/css/674.dae8a4a9.css → dist/css/750.65c8ad73.css vendored
View File

File diff suppressed because one or more lines are too long

1
dist/css/826.3dbf20b0.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/css/826.7e1c9b2a.css vendored
View File

File diff suppressed because one or more lines are too long

1
dist/css/946.0f5612ee.css vendored
View File

File diff suppressed because one or more lines are too long

1
dist/css/946.6b599249.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/css/949.3b1596c4.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/css/949.893ba7ce.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/app.d89b5b7b.css → dist/css/app.75908b6d.css vendored
View File

File diff suppressed because one or more lines are too long

BIN
dist/img/裁剪后1.aaa6c811.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
dist/img/裁剪后2.1d40a106.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
dist/img/裁剪后3.1fa5ced1.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

2
dist/index.html vendored
View File

@@ -1 +1 @@
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>AiDA</title><link rel="stylesheet" href="./css/googleapis.css"><link rel="stylesheet" href="./css/roboto.css"><script defer="defer" src="/js/chunk-vendors.9c1ca004.js"></script><script defer="defer" src="/js/app.8b46e86f.js"></script><link href="/css/chunk-vendors.5e9dbdc9.css" rel="stylesheet"><link href="/css/app.d89b5b7b.css" rel="stylesheet"></head><body><script src="./js/color-thief.js"></script><noscript><strong>We're sorry but aida doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html> <!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>AiDA</title><link rel="stylesheet" href="./css/googleapis.css"><link rel="stylesheet" href="./css/roboto.css"><script defer="defer" src="/js/chunk-vendors.9c1ca004.js"></script><script defer="defer" src="/js/app.2f8a659a.js"></script><link href="/css/chunk-vendors.5e9dbdc9.css" rel="stylesheet"><link href="/css/app.75908b6d.css" rel="stylesheet"></head><body><script src="./js/color-thief.js"></script><noscript><strong>We're sorry but aida doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>

59
dist/js/180.db93bd6f.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

59
dist/js/257.4bf7d67b.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/310.17dcb770.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/468.6361b38d.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
dist/js/674.e9b2d808.js → dist/js/750.89beba87.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/946.a255e9e7.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/946.b6c37147.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
dist/js/949.fafa687a.js → dist/js/949.19361b7a.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/app.8b46e86f.js → dist/js/app.2f8a659a.js vendored
View File

File diff suppressed because one or more lines are too long

BIN
src/assets/images/homePage/111111.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 89 KiB

BIN
src/assets/images/homePage/裁剪后1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
src/assets/images/homePage/裁剪后2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
src/assets/images/homePage/裁剪后3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

7
src/assets/style/style.css
View File

@@ -303,6 +303,7 @@ li {
bottom: 0; bottom: 0;
top: auto; top: auto;
margin: 0 9rem; margin: 0 9rem;
z-index: 10001;
} }
.modal_component.ant-modal { .modal_component.ant-modal {
top: 0; top: 0;
@@ -385,6 +386,12 @@ li {
.operate_file_block .select_img_type .category_list .category_item:hover { .operate_file_block .select_img_type .category_list .category_item:hover {
background: linear-gradient(-137deg, #eeefdb, #e7dbed); background: linear-gradient(-137deg, #eeefdb, #e7dbed);
} }
.ant-modal-wrap {
z-index: 10003 ;
}
.driver-overlay-animated {
z-index: 10002 !important;
}
.habit :deep(.ant-btn:hover), .habit :deep(.ant-btn:hover),
:deep(.ant-btn:focus), :deep(.ant-btn:focus),
:deep(.ant-btn:active), :deep(.ant-btn:active),

10
src/assets/style/style.less
View File

@@ -340,6 +340,7 @@ ul,li{
bottom: 0; bottom: 0;
top: auto; top: auto;
margin: 0 9rem; margin: 0 9rem;
z-index: 10001;
} }
//弹窗公共样式 //弹窗公共样式
@@ -442,9 +443,12 @@ ul,li{
} }
} }
} }
// .ant-modal-wrap{ .ant-modal-wrap{
// z-index: 10001; z-index: 10003 ;
// } }
.driver-overlay-animated{
z-index: 10002 !important;
}
// .ant-select-dropdown{ // .ant-select-dropdown{
// z-index: 10001; // z-index: 10001;
// } // }

26
src/component/Detail/DesignDetail.vue
View File

@@ -1,7 +1,8 @@
<template> <template>
<div> <div>
<!-- designDetailShow --> <!-- designDetailShow -->
<a-modal class="design_detail_modal_component" <a-modal class="design_detail_modal_component Guide_1_18"
:class="[driver__.driver?'hideEvents':'']"
v-model:visible="designDetailShow" v-model:visible="designDetailShow"
:footer="null" :footer="null"
width="65%" width="65%"
@@ -25,18 +26,18 @@
<div class="detail_modal_body_img"> <div class="detail_modal_body_img">
<!-- <img class="detial_img" :src="designItemDetail.designItemUrl"> --> <!-- <img class="detial_img" :src="designItemDetail.designItemUrl"> -->
<div v-show="imgDesignImg" class="detail_modal_body"> <div v-show="imgDesignImg" class="detail_modal_body Guide_1_19" :class="[driver__.driver?'hideEvents':'']">
<div class="detail_modal_body_nav"> <div class="detail_modal_body_nav">
<div v-for="item,index in designItemDetail?.clothes" :class="{active:item.clothesOpen}" @click="clothesOpen(index)"> <div v-for="item,index in designItemDetail?.clothes" :class="{active:item.clothesOpen}" @click="clothesOpen(index)">
<img :src="item?.path" alt=""> <img :src="item?.path" alt="">
</div> </div>
</div> </div>
<div class="detail_modal_model_content"> <div class="detail_modal_model_content">
<div class="detail_modal_item_back" :class="{active:body}" v-for="item,index in frontBack.back" :style="item.style"> <div class="detail_modal_item_back Guide_" :class="{active:body}" v-for="item,index in frontBack.back" :style="item.style">
<img :src="item.imageUrl" alt=""> <img :src="item.imageUrl" alt="">
</div> </div>
<img class="detail_modal_model" :src="frontBack.body?.layersObject[0]?.imageUrl" alt=""> <img class="detail_modal_model" :src="frontBack.body?.layersObject[0]?.imageUrl" alt="">
<div class="detail_modal_item_front" :class="{active:body}" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)"> <div class="detail_modal_item_front Guide_" :class="{active:body}" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)">
<img :src="item.imageUrl" alt=""> <img :src="item.imageUrl" alt="">
</div> </div>
</div> </div>
@@ -62,7 +63,7 @@
{{ $t('DesignDetail.Submit') }} {{ $t('DesignDetail.Submit') }}
</div> </div>
</div> </div>
<div class="detail_modal_body_category"> <div class="detail_modal_body_category Guide_1_20" :class="[driver__.driver?'hideEvents':'']">
<div v-show="designOrder" class="detail_modal_right_top scroll_style"> <div v-show="designOrder" class="detail_modal_right_top scroll_style">
<div class="clothes_detail_item clothes_detail_item_apparel"> <div class="clothes_detail_item clothes_detail_item_apparel">
<div class="clothes_item_header"> <div class="clothes_item_header">
@@ -127,7 +128,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent,computed,ref,provide } from 'vue' import { defineComponent,computed,ref,provide,nextTick } from 'vue'
import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue' import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
import magnifyingGlass from '@/component/Detail/magnifyingGlass.vue' import magnifyingGlass from '@/component/Detail/magnifyingGlass.vue'
import setDesignItem from '@/component/Detail/setDesignItem.vue' import setDesignItem from '@/component/Detail/setDesignItem.vue'
@@ -135,6 +136,7 @@ import Draggable from 'vuedraggable'
import { Https } from "@/tool/https"; import { Https } from "@/tool/https";
import {getUploadUrl,isMoible} from '@/tool/util' import {getUploadUrl,isMoible} from '@/tool/util'
import { useStore } from "vuex"; import { useStore } from "vuex";
import { openGuide,driverObj__ } from "@/tool/guide";
import GO from '@/tool/GO'; import GO from '@/tool/GO';
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie"; import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
@@ -177,6 +179,10 @@ export default defineComponent({
let setRevocationShow = ref(false)//判断是不是第一次进来和切换下一张 let setRevocationShow = ref(false)//判断是不是第一次进来和切换下一张
let oppositeRevocationShow:any = ref() let oppositeRevocationShow:any = ref()
let revocationShow:any = ref() let revocationShow:any = ref()
let driver__:any = computed(()=>{
return store.state.Guide.guide
})
provide('driver__',driver__)
let {t} = useI18n() let {t} = useI18n()
return{ return{
@@ -196,6 +202,7 @@ export default defineComponent({
setRevocationShow, setRevocationShow,
oppositeRevocationShow, oppositeRevocationShow,
revocationShow, revocationShow,
driver__,
t, t,
} }
}, },
@@ -336,10 +343,17 @@ export default defineComponent({
this.generateHighDesignImg = rv.highDesignUrl this.generateHighDesignImg = rv.highDesignUrl
this.designDetailShow = true this.designDetailShow = true
this.loadingShow = false this.loadingShow = false
if(this.driver__.driver){
nextTick().then(()=>{
driverObj__.moveTo(18);
})
}
} }
).catch(rv=>{ ).catch(rv=>{
this.loadingShow = false this.loadingShow = false
}) })
}, },
async setImgSize(){ async setImgSize(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail)) let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))

188
src/component/Detail/DesignDetailAlter.vue
View File

@@ -162,10 +162,12 @@
<span>{{ $t('DesignDetailAlter.Palette') }}</span> <span>{{ $t('DesignDetailAlter.Palette') }}</span>
</div> </div>
<div class="color_setting_block"> <div class="color_setting_block">
<Sketch class="sketch_color" v-model="selectColor" :show.sync="colorPickerVisible"/> <!-- <Sketch class="sketch_color" v-model="selectColor" :show.sync="colorPickerVisible"/> -->
<!-- <Chrome class="chrome_color" v-model="selectColor"></Chrome> --> <!-- <Chrome class="chrome_color" v-model="selectColor"></Chrome> -->
<Chrome class="chrome_color" v-model="selectColor"></Chrome>
<!-- <Slider class="sileder_color" v-model="selectColor"></Slider> --> <!-- <Slider class="sileder_color" v-model="selectColor"></Slider> -->
<div class="color_block"> <!-- <div class="color_block">
<div class="color_left" @click="colorBlockHex = !colorBlockHex"> <div class="color_left" @click="colorBlockHex = !colorBlockHex">
<div v-show="colorBlockHex"> <div v-show="colorBlockHex">
{{ $t('DesignDetailAlter.HEX') }} {{ $t('DesignDetailAlter.HEX') }}
@@ -189,7 +191,7 @@
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
@@ -261,7 +263,7 @@ import GO from "@/tool/GO";
import { useStore } from "vuex"; import { useStore } from "vuex";
import { LoadingOutlined } from '@ant-design/icons-vue'; import { LoadingOutlined } from '@ant-design/icons-vue';
import { message,Upload} from 'ant-design-vue'; import { message,Upload} from 'ant-design-vue';
import { Sketch} from '@ans1998/vue3-color' import { Sketch, Chrome} from '@ans1998/vue3-color'
import {getUploadUrl,rgbToHsv} from '@/tool/util' import {getUploadUrl,rgbToHsv} from '@/tool/util'
import DesignDetailEnd from './DesignDetailEnd.vue'; import DesignDetailEnd from './DesignDetailEnd.vue';
import { getCookie } from "@/tool/cookie"; import { getCookie } from "@/tool/cookie";
@@ -269,7 +271,7 @@ import { useI18n } from 'vue-i18n';
export default defineComponent({ export default defineComponent({
props: ["msg"], props: ["msg"],
components:{ components:{
Draggable,Sketch,DesignDetailEnd Draggable,Sketch,DesignDetailEnd,Chrome
}, },
setup(prop) { setup(prop) {
const store = useStore(); const store = useStore();
@@ -443,8 +445,12 @@ export default defineComponent({
mounted () { mounted () {
this.token = getCookie("token") || ""; this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl(); this.uploadUrl = getUploadUrl();
let dropperDom = document.getElementsByClassName("detail_modal_body_select")[0].getElementsByClassName('vc-sketch-color-wrap')[0] const backIcon = document.createElement('div');
dropperDom.addEventListener('click',async ()=>{ backIcon.classList.add('vc-sketch-color-wrap')
let dropperDom = document.getElementsByClassName("detail_modal_body_select")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
console.log(dropperDom);
dropperDom.appendChild(backIcon);
backIcon.addEventListener('click',async ()=>{
try { try {
const dropper = new EyeDropper(); const dropper = new EyeDropper();
const result = await dropper.open(); const result = await dropper.open();
@@ -454,7 +460,6 @@ export default defineComponent({
const g = parseInt(hex.substring(2, 4), 16); const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16); const b = parseInt(hex.substring(4, 6), 16);
this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex} this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
// 返回RGB格式的字符串
// return `rgb(${r}, ${g}, ${b})`; // return `rgb(${r}, ${g}, ${b})`;
// box.style.backgroundColor = label.textContent = result.sRGBHex; // box.style.backgroundColor = label.textContent = result.sRGBHex;
} catch (e) { } catch (e) {
@@ -1314,8 +1319,7 @@ export default defineComponent({
} }
} }
.color_setting_block{ .color_setting_block{
// width: 16.5rem; width: 16.5rem;
width: 18rem;
margin: auto; margin: auto;
background: #f0eaee; background: #f0eaee;
@@ -1323,89 +1327,113 @@ export default defineComponent({
overflow: hidden; overflow: hidden;
// box-shadow: 2px 2px 8px #000; // box-shadow: 2px 2px 8px #000;
box-shadow: 2px 2px 8px rgba(0,0,0,.3); box-shadow: 2px 2px 8px rgba(0,0,0,.3);
background: linear-gradient(70deg, #eee4f3, #f3f4e6); .chrome_color{
.sketch_color{ width: 16.5rem;
box-shadow: none; // height: 16.5rem;
width: 18rem; overflow: hidden;
background: rgba(0,0,0,0); background: linear-gradient(70deg, #eee4f3, #f3f4e6);
padding-top: 1rem !important;
padding: 0; .vc-chrome-saturation-wrap{
.vc-sketch{ height: 100%;
}
.vc-sketch-saturation-wrap{
width: 16rem; width: 16rem;
height: 16rem; height: 16rem;
max-height: 17rem; max-height: 17rem;
max-width: 17rem; max-width: 17rem;
margin: auto; margin: .7rem auto;
padding-bottom: 0; padding-bottom: 0;
} }
.vc-sketch-presets{
display: none;
}
.vc-botton-container{
display: none;
}
.vc-chrome-body{ .vc-chrome-body{
display: none; padding: 0;
}
.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-sketch-color-wrap{
// display: none;
// }
.vc-sketch-controls{
width: 90%; width: 90%;
margin: .5rem auto; margin: 0.5rem auto;
.vc-sketch-hue-wrap,.vc-sketch-alpha-wrap{ margin: 0 auto;
.vc-hue{ background: rgba(0,0,0,0);
border-radius: 1.5rem; 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-alpha{ .vc-chrome-fields{
border-radius: 1.5rem; .vc-chrome-field{
overflow: hidden; 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-image: url(@../../../../assets/images/homePage/裁剪后1.jpg);
background-image: url(@../../../../assets/images/homePage/裁剪后2.jpg);
background-image: url(@../../../../assets/images/homePage/裁剪后3.jpg);
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-alpha-wrap{ .vc-chrome-controls{
margin-top: .5rem; 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;
}
.vc-alpha{
border-radius: 15px;
overflow: hidden;
}
}
.vc-chrome-hue-wrap{
margin-bottom: .5rem;
}
} }
} }
}
.chrome_color{
width: 16.5rem;
height: 16.5rem;
overflow: hidden;
.vc-chrome-saturation-wrap{
height: 100%;
}
.vc-chrome-saturation-wrap .vc-saturation-circle{ .vc-chrome-saturation-wrap .vc-saturation-circle{
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;

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

@@ -22,10 +22,10 @@
<span>{{ $t('ColorboardUpload.Palette') }}</span> <span>{{ $t('ColorboardUpload.Palette') }}</span>
</div> </div>
<div class="color_setting_block"> <div class="color_setting_block">
<Sketch class="sketch_color" v-model="selectColor" :show.sync="colorPickerVisible"/> <!-- <Sketch class="sketch_color" v-model="selectColor" :show.sync="colorPickerVisible"/> -->
<!-- <Chrome class="chrome_color" v-model="selectColor"></Chrome> --> <Chrome class="chrome_color" v-model="selectColor"></Chrome>
<!-- <Slider class="sileder_color" v-model="selectColor"></Slider> --> <!-- <Slider class="sileder_color" v-model="selectColor"></Slider> -->
<div class="color_block"> <!-- <div class="color_block">
<div class="color_left" @click="colorBlockHex = !colorBlockHex"> <div class="color_left" @click="colorBlockHex = !colorBlockHex">
<div v-show="colorBlockHex"> <div v-show="colorBlockHex">
{{ $t('ColorboardUpload.HEX') }} {{ $t('ColorboardUpload.HEX') }}
@@ -48,7 +48,7 @@
<div class="rgb_item">{{getSelectRGB(selectColor).b}}</div> <div class="rgb_item">{{getSelectRGB(selectColor).b}}</div>
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
<!-- <div class="color_review_block"> <!-- <div class="color_review_block">
<div class="clear_button" @click="clearCurrentColor()">Clear</div> <div class="clear_button" @click="clearCurrentColor()">Clear</div>
@@ -117,7 +117,7 @@
</div> </div>
</template> </template>
<script> <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 { Https } from "@/tool/https";
import GO from "@/tool/GO"; import GO from "@/tool/GO";
import { defineComponent, h,ref,inject } from 'vue' import { defineComponent, h,ref,inject } from 'vue'
@@ -133,7 +133,7 @@ export default defineComponent({
components:{ components:{
Chrome, Chrome,
Slider, Slider,
Sketch Sketch,
}, },
setup(){ setup(){
let fileList = ref([]) let fileList = ref([])
@@ -214,8 +214,11 @@ export default defineComponent({
mounted(){ mounted(){
this.token = getCookie('token') || '' this.token = getCookie('token') || ''
this.uploadUrl = getUploadUrl() this.uploadUrl = getUploadUrl()
let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-sketch-color-wrap')[0] const backIcon = document.createElement('div');
dropperDom.addEventListener('click',async ()=>{ 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 { try {
const dropper = new EyeDropper(); const dropper = new EyeDropper();
const result = await dropper.open(); const result = await dropper.open();
@@ -231,26 +234,26 @@ export default defineComponent({
} catch (e) { } catch (e) {
message.info(this.t('ColorboardUpload.jsContent1')) message.info(this.t('ColorboardUpload.jsContent1'))
} }
}) },false)
this.clearSelectColor() this.clearSelectColor()
// if ("EyeDropper" in window) { if ("EyeDropper" in window) {
// console.log(true); console.log(true);
// } }
// else { else {
// console.log(false); console.log(false);
// } }
}, },
methods:{ methods:{
clearSelectColor(){ clearSelectColor(){
let colorBg0 = document.getElementsByClassName('colorboard_upload_modal')[0].getElementsByClassName('color_block_bg')[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] // let colorBg1 = document.getElementsByClassName('colorboard_upload_modal')[0].getElementsByClassName('color_block_bg')[1]
if(this.selectColor?.rgba?.r || this.selectColor?.rgb?.r){ // if(this.selectColor?.rgba?.r || this.selectColor?.rgb?.r){
colorBg0.style.opacity = 1 // colorBg0.style.opacity = 1
colorBg1.style.opacity = 1 // colorBg1.style.opacity = 1
}else{ // }else{
colorBg0.style.opacity = 0 // colorBg0.style.opacity = 0
colorBg1.style.opacity = 0 // colorBg1.style.opacity = 0
} // }
}, },
//选择不同的色块 //选择不同的色块
selectColorItem(index,color){ selectColorItem(index,color){
@@ -674,69 +677,97 @@ export default defineComponent({
overflow: hidden; overflow: hidden;
// box-shadow: 2px 2px 8px #000; // box-shadow: 2px 2px 8px #000;
box-shadow: 2px 2px 8px rgba(0,0,0,.3); 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); 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{ .vc-chrome-controls{
// display: none; align-items: center;
// } flex-direction: row-reverse;
.vc-sketch-controls{ .vc-chrome-color-wrap{
width: 90%; // width: 3.6rem;
margin: .5rem auto; width: auto;
.vc-sketch-hue-wrap,.vc-sketch-alpha-wrap{ .vc-chrome-active-color,.vc-checkerboard{
width: 3rem;
height: 3rem;
}
}
.vc-chrome-hue-wrap,.vc-chrome-alpha-wrap{
.vc-hue{ .vc-hue{
border-radius: 15px; border-radius: 15px;
} }
@@ -745,24 +776,17 @@ export default defineComponent({
overflow: hidden; overflow: hidden;
} }
} }
.vc-sketch-alpha-wrap{ .vc-chrome-hue-wrap{
margin-top: .5rem; margin-bottom: .5rem;
} }
} }
} }
.chrome_color{ .vc-chrome-saturation-wrap .vc-saturation-circle{
width: 16.5rem; width: 1rem;
height: 16.5rem; height: 1rem;
overflow: hidden; }
}
.vc-chrome-saturation-wrap{
height: 100%;
}
.vc-chrome-saturation-wrap .vc-saturation-circle{
width: 1rem;
height: 1rem;
}
}
.sileder_color{ .sileder_color{
margin-top:1.3rem; 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 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="lager_img_item" v-for="(design) in likeDesignCollectionList" :key="design.designItemUrl">
<div class="all_img_item_block"> <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> </div>
</div> </div>

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

@@ -49,6 +49,9 @@
<SketchboardUpload ref="SketchboardUpload" v-show="collectionStep === 4"></SketchboardUpload> <SketchboardUpload ref="SketchboardUpload" v-show="collectionStep === 4"></SketchboardUpload>
<!-- <MarketingSketchUpload ref="MarketingSketchUpload" v-show="collectionStep === 5"></MarketingSketchUpload> --> <!-- <MarketingSketchUpload ref="MarketingSketchUpload" v-show="collectionStep === 5"></MarketingSketchUpload> -->
</div> </div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
</a-modal> </a-modal>
</div> </div>
@@ -64,6 +67,7 @@ import SketchboardUpload from '@/component/HomePage/SketchboardUpload.vue'
import MarketingSketchUpload from '@/component/HomePage/MarketingSketchUpload.vue' import MarketingSketchUpload from '@/component/HomePage/MarketingSketchUpload.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'; import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal,message } from 'ant-design-vue'; import { Modal,message } from 'ant-design-vue';
import { Https } from "@/tool/https";
import {useStore} from 'vuex' import {useStore} from 'vuex'
import { openGuide,driverObj__ } from "@/tool/guide"; import { openGuide,driverObj__ } from "@/tool/guide";
import GO from "@/tool/GO"; import GO from "@/tool/GO";
@@ -84,9 +88,11 @@ export default defineComponent({
return store.state.Guide.guide return store.state.Guide.guide
}) })
provide('driver__',driver__) provide('driver__',driver__)
let isShowMark = ref(false)
return { return {
driver__, driver__,
t, t,
isShowMark,
} }
}, },
@@ -167,21 +173,46 @@ export default defineComponent({
//完成 //完成
finishCollection(){ finishCollection(){
let colorBoards = this.store.state.UploadFilesModule.colorBoards this.isShowMark = true
let sketchList = this.store.state.UploadFilesModule.sketchboard
if(!colorBoards || colorBoards?.length < 1){ let arr:any = []
message.info(this.$t('collectionModal.jsContent3')) sketchList.forEach((item:any) => {
return 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') this.store.commit('clearAllId')
GO.id = 0 GO.id = 0
this.showCollectionModal =false this.showCollectionModal =false
this.collectionStep = 1 this.collectionStep = 1
this.$emit('finishCollection') this.$emit('finishCollection')
if(this.driver__.driver){ if(this.driver__.driver){
driverObj__.moveNext() 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) => {
// });
} }
} }
}) })

40
src/tool/guide.js
View File

@@ -5,6 +5,10 @@ import { useStore } from "vuex";
let driverIndex__ = 0 let driverIndex__ = 0
let store let store
let element let element
let data = {
index:driverIndex__,
driver:true,
}
const driverObj__ = driver({ const driverObj__ = driver({
steps: [ steps: [
{ element: '#Guide_1_1', popover: { title: 'Title', description: 'Description' } }, { element: '#Guide_1_1', popover: { title: 'Title', description: 'Description' } },
@@ -23,6 +27,11 @@ const driverObj__ = driver({
{ element: '.Guide_1_2', popover: { title: 'Title', description: 'Description' } }, { element: '.Guide_1_2', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_14', popover: { title: 'Title', description: 'Description' } }, { element: '.Guide_1_14', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_15', popover: { title: 'Title', description: 'Description' } }, { element: '.Guide_1_15', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_16', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_17', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_18', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_19', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_20', popover: { title: 'Title', description: 'Description' } },
], ],
// showProgress: true,//控制总页数和当前页数是否显示 // showProgress: true,//控制总页数和当前页数是否显示
@@ -35,12 +44,15 @@ const driverObj__ = driver({
overlayOpacity:.4, overlayOpacity:.4,
overlay: true, overlay: true,
onPopoverRender: (popover, options) => {//每个步骤的元素和所有信息 onPopoverRender: (popover, options) => {//每个步骤的元素和所有信息
// console.log(popover,options); console.log(popover,options);
if(element){ if(element){
element.classList.remove('Guide_') element.classList.remove('Guide_')
} }
popover.previousButton.style.display = 'none' popover.previousButton.style.display = 'none'
if(options.state.activeIndex >= 1 && options.state.activeIndex <= 2){ if(
options.state.activeIndex >= 1 && options.state.activeIndex <= 2 ||
options.state.activeIndex >= 18 && options.state.activeIndex <= 19
){
popover.footer.style.display = 'block' popover.footer.style.display = 'block'
addDiv(options.state.activeElement) addDiv(options.state.activeElement)
}else{ }else{
@@ -49,15 +61,24 @@ const driverObj__ = driver({
} }
// console.log(options.state.activeIndex); // console.log(options.state.activeIndex);
driverIndex__ = driverObj__.getState().activeIndex driverIndex__ = driverObj__.getState().activeIndex
let data = { data.index = driverIndex__
index:driverIndex__,
driver:true,
}
store?.commit("setGuide", data); store?.commit("setGuide", data);
element = options.state.activeElement element = options.state.activeElement
element.classList.add('Guide_') element.classList.add('Guide_')
}, },
//销毁前
onDestroyStarted:()=>{
// data.driver = false
store?.commit("setGuide", data);
driverObj__.destroy();//销毁方法
},
//销毁前
onDestroyed:()=>{
},
// onNextClick:(element, step, options) =>{ // onNextClick:(element, step, options) =>{
// console.log(element,step,options); // console.log(element,step,options);
// driverObj__.moveNext() // driverObj__.moveNext()
@@ -100,7 +121,12 @@ function removeDiv(element){
const openGuide = () =>{ const openGuide = () =>{
// driverObj__.drive(); // driverObj__.drive();
store = useStore() store = useStore()
// driverObj__.moveTo(18);
let data = {
index:driverIndex__,
driver:false,
}
store?.commit("setGuide", data);
// driverObj__.moveNext(); // driverObj__.moveNext();
// driverObj__.movePrevious(); // driverObj__.movePrevious();
} }

2
src/tool/https.js
View File

@@ -158,7 +158,7 @@ export const Https = {
generateLike:'/api/generate/like',//喜欢ganerate图片 generateLike:'/api/generate/like',//喜欢ganerate图片
generateDislike:'/api/generate/dislike',//喜欢ganerate图片 generateDislike:'/api/generate/dislike',//喜欢ganerate图片
elementUpload:`/api/element/upload`,//上传图片 elementUpload:`/api/element/upload`,//上传图片
sketchBoardsBoundingBox:`/design/sketchBoardsBoundingBox`,//裁剪sketch图片 sketchBoardsBoundingBox:`/api/design/sketchBoardsBoundingBox`,//裁剪sketch图片
}, },
axiosGet(url,config) { axiosGet(url,config) {

51
src/views/HomeView.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="home_page"> <div class="home_page .Guide_1_16">
<HeaderComponent></HeaderComponent> <HeaderComponent></HeaderComponent>
<div class="page_content"> <div class="page_content">
<!-- <img class="page_content_bg" src="@/assets/images/homePage/bg.png" /> --> <!-- <img class="page_content_bg" src="@/assets/images/homePage/bg.png" /> -->
@@ -69,11 +69,11 @@
</div> </div>
<div class="right_content_body"> <div class="right_content_body">
<div class="right_content_img_block scroll_style" v-mousewheel :class="{active:designCollectionList.length != 0}"> <div class="right_content_img_block scroll_style Guide_1_17" v-mousewheel :class="{active:designCollectionList.length != 0}">
<div class="right_content_img_item"> <div class="right_content_img_item">
<!-- <draggable <!-- <draggable
group="people" > --> group="people" > -->
<div class="content_img_block" v-for="( <div class="content_img_block hideEvents" v-for="(
design, index design, index
) in designCollectionList" :key="design?.designItemId" @click=" ) in designCollectionList" :key="design?.designItemId" @click="
designDetail( designDetail(
@@ -82,16 +82,17 @@
designCollectionList, designCollectionList,
'dislike' 'dislike'
) )
"> ">
<div class="content_img_flex"> <div class="content_img_flex">
<img class="content_img" :src="design.designOutfitUrl" /> <img class="content_img" :src="design.designOutfitUrl" />
</div> </div>
<div class="icon iconfont icon-jushoucang icon_like" @click.stop=" <div class="icon iconfont icon-jushoucang icon_like" @click.stop="
likeDesignCollection( likeDesignCollection(
design, design,
index index
) )
"></div> ">
</div>
</div> </div>
<!-- </draggable> --> <!-- </draggable> -->
@@ -293,6 +294,9 @@ export default defineComponent({
let isShowOperate = ref(false) let isShowOperate = ref(false)
let userInfo:any = {} let userInfo:any = {}
let {t} = useI18n() let {t} = useI18n()
let driver__:any = computed(()=>{
return store.state.Guide.guide
})
return { return {
store, store,
likeDesignCollectionList, likeDesignCollectionList,
@@ -306,6 +310,7 @@ export default defineComponent({
isShowOperate, isShowOperate,
userInfo, userInfo,
t, t,
driver__
}; };
}, },
data() { data() {
@@ -437,6 +442,14 @@ export default defineComponent({
let collectionModal: any = this.$refs.collectionModal; let collectionModal: any = this.$refs.collectionModal;
this.store.commit("clearAllData"); this.store.commit("clearAllData");
collectionModal.changeCollectionModal(true); collectionModal.changeCollectionModal(true);
console.log(this.driver__.driver);
if(this.driver__.driver){
nextTick().then(()=>{
driverObj__.moveNext();
})
}
}, },
//recollection //recollection
@@ -510,6 +523,11 @@ export default defineComponent({
return; return;
} }
let data = this.getDesignData(""); let data = this.getDesignData("");
if(this.driver__.driver){
nextTick().then(()=>{
driverObj__.moveNext();
})
}
Https.axiosPost(Https.httpUrls.designCollection, data) Https.axiosPost(Https.httpUrls.designCollection, data)
.then((rv: any) => { .then((rv: any) => {
@@ -527,6 +545,11 @@ export default defineComponent({
this.store.commit("setDesignId", rv.designId); this.store.commit("setDesignId", rv.designId);
// this.designProgress = 0; // this.designProgress = 0;
this.startDesignType = "design"; this.startDesignType = "design";
if(this.driver__.driver){
nextTick().then(()=>{
driverObj__.moveNext();
})
}
} }
}) })
.catch((res) => { .catch((res) => {
@@ -975,6 +998,8 @@ export default defineComponent({
type: type, type: type,
}; };
designDetail.showDesignDetailModal(data); designDetail.showDesignDetailModal(data);
}, },
//完成单个图片设计 //完成单个图片设计

8
src/views/LibraryPage.vue
View File

@@ -591,7 +591,7 @@ export default defineComponent({
generateDetailId:item.id, generateDetailId:item.id,
level1Type:this.selectCode, level1Type:this.selectCode,
level2Type: designType, level2Type: designType,
gender:this.sex.name, gender:this.sex.value,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
} }
Https.axiosPost(Https.httpUrls.generateLike, data).then( Https.axiosPost(Https.httpUrls.generateLike, data).then(
@@ -923,7 +923,7 @@ export default defineComponent({
file:event.file, file:event.file,
level1Type:this.selectCode, level1Type:this.selectCode,
level2Type:designType, level2Type:designType,
sex:this.selectCode == 'Sketchboard' ? this.sex.name:'', sex:this.selectCode == 'Sketchboard' ? this.sex.value:'',
modelType:'', modelType:'',
checkMd5:1, checkMd5:1,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
@@ -992,7 +992,7 @@ export default defineComponent({
level1Type:this.selectCode, level1Type:this.selectCode,
level2Type:designType, level2Type:designType,
page:this.currentPage, page:this.currentPage,
modelSex:this.sex.name?this.sex.name:'', modelSex:this.sex.value?this.sex.value:'',
pictureName:this.searchPictureName, pictureName:this.searchPictureName,
size:this.pageSize, size:this.pageSize,
intersection:this.intersection, intersection:this.intersection,
@@ -1123,7 +1123,7 @@ export default defineComponent({
text:this.captionGeneration, text:this.captionGeneration,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
version:this.selectCode == 'Printboard'?this.printModel.num:1,//为1就是Print version:this.selectCode == 'Printboard'?this.printModel.num:1,//为1就是Print
gender:this.selectCode == 'Sketchboard'?this.sex.name:'', gender:this.selectCode == 'Sketchboard'?this.sex.value:'',
} }
if(generateType == 'image'||generateType == 'text-image'){ if(generateType == 'image'||generateType == 'text-image'){
if(generageImg?.id){ if(generageImg?.id){