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

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

@@ -1,7 +1,8 @@
<template>
<div>
<!-- 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"
:footer="null"
width="65%"
@@ -25,18 +26,18 @@
<div class="detail_modal_body_img">
<!-- <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 v-for="item,index in designItemDetail?.clothes" :class="{active:item.clothesOpen}" @click="clothesOpen(index)">
<img :src="item?.path" alt="">
</div>
</div>
<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="">
</div>
<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="">
</div>
</div>
@@ -62,7 +63,7 @@
{{ $t('DesignDetail.Submit') }}
</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 class="clothes_detail_item clothes_detail_item_apparel">
<div class="clothes_item_header">
@@ -127,7 +128,7 @@
</template>
<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 magnifyingGlass from '@/component/Detail/magnifyingGlass.vue'
import setDesignItem from '@/component/Detail/setDesignItem.vue'
@@ -135,6 +136,7 @@ import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import {getUploadUrl,isMoible} from '@/tool/util'
import { useStore } from "vuex";
import { openGuide,driverObj__ } from "@/tool/guide";
import GO from '@/tool/GO';
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
@@ -177,6 +179,10 @@ export default defineComponent({
let setRevocationShow = ref(false)//判断是不是第一次进来和切换下一张
let oppositeRevocationShow:any = ref()
let revocationShow:any = ref()
let driver__:any = computed(()=>{
return store.state.Guide.guide
})
provide('driver__',driver__)
let {t} = useI18n()
return{
@@ -196,6 +202,7 @@ export default defineComponent({
setRevocationShow,
oppositeRevocationShow,
revocationShow,
driver__,
t,
}
},
@@ -336,10 +343,17 @@ export default defineComponent({
this.generateHighDesignImg = rv.highDesignUrl
this.designDetailShow = true
this.loadingShow = false
if(this.driver__.driver){
nextTick().then(()=>{
driverObj__.moveTo(18);
})
}
}
).catch(rv=>{
this.loadingShow = false
})
},
async setImgSize(){
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>
</div>
<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> -->
<div class="color_block">
<!-- <div class="color_block">
<div class="color_left" @click="colorBlockHex = !colorBlockHex">
<div v-show="colorBlockHex">
{{ $t('DesignDetailAlter.HEX') }}
@@ -189,7 +191,7 @@
</div>
</div>
</div>
</div> -->
</div>
</div>
@@ -261,7 +263,7 @@ import GO from "@/tool/GO";
import { useStore } from "vuex";
import { LoadingOutlined } from '@ant-design/icons-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 DesignDetailEnd from './DesignDetailEnd.vue';
import { getCookie } from "@/tool/cookie";
@@ -269,7 +271,7 @@ import { useI18n } from 'vue-i18n';
export default defineComponent({
props: ["msg"],
components:{
Draggable,Sketch,DesignDetailEnd
Draggable,Sketch,DesignDetailEnd,Chrome
},
setup(prop) {
const store = useStore();
@@ -443,8 +445,12 @@ export default defineComponent({
mounted () {
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
let dropperDom = document.getElementsByClassName("detail_modal_body_select")[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("detail_modal_body_select")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
console.log(dropperDom);
dropperDom.appendChild(backIcon);
backIcon.addEventListener('click',async ()=>{
try {
const dropper = new EyeDropper();
const result = await dropper.open();
@@ -454,7 +460,6 @@ export default defineComponent({
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
// 返回RGB格式的字符串
// return `rgb(${r}, ${g}, ${b})`;
// box.style.backgroundColor = label.textContent = result.sRGBHex;
} catch (e) {
@@ -1314,8 +1319,7 @@ export default defineComponent({
}
}
.color_setting_block{
// width: 16.5rem;
width: 18rem;
width: 16.5rem;
margin: auto;
background: #f0eaee;
@@ -1323,89 +1327,113 @@ export default defineComponent({
overflow: hidden;
// box-shadow: 2px 2px 8px #000;
box-shadow: 2px 2px 8px rgba(0,0,0,.3);
background: linear-gradient(70deg, #eee4f3, #f3f4e6);
.sketch_color{
box-shadow: none;
width: 18rem;
background: rgba(0,0,0,0);
padding-top: 1rem !important;
padding: 0;
.vc-sketch{
}
.vc-sketch-saturation-wrap{
.chrome_color{
width: 16.5rem;
// height: 16.5rem;
overflow: hidden;
background: linear-gradient(70deg, #eee4f3, #f3f4e6);
.vc-chrome-saturation-wrap{
height: 100%;
width: 16rem;
height: 16rem;
max-height: 17rem;
max-width: 17rem;
margin: auto;
margin: .7rem 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-sketch-color-wrap{
// display: none;
// }
.vc-sketch-controls{
padding: 0;
width: 90%;
margin: .5rem auto;
.vc-sketch-hue-wrap,.vc-sketch-alpha-wrap{
.vc-hue{
border-radius: 1.5rem;
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-alpha{
border-radius: 1.5rem;
overflow: hidden;
.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-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{
margin-top: .5rem;
.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;
}
.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{
width: 1rem;
height: 1rem;