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

调整部分bug

Browse Source
This commit is contained in:
X1627315083
2025-05-28 10:28:07 +08:00
parent 608a4dec89
commit 9fc2bcaedf
78 changed files with 2034 additions and 10193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

295
src/component/modules/habitSetStyle.vue Normal file
View File

@@ -0,0 +1,295 @@
<template>
<a-modal
class="habitSetStyle_modal generalModel"
v-model:visible="habitSetStyle"
:footer="null"
width="50%"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="true"
:keyboard="false"
:destroyOnClose="true"
:zIndex="1000"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="habitSetStyle_content" v-hoverAnmi>
<div class="modal_title_text">
<div>{{ $t('Habit.Style') }}</div>
<div class="modal_title_text_intro"></div>
</div>
<div class="habitSetStyle_content_bottom">
<div class="content_bottom_item" v-for="item in mannequinStyle">
<div class="content_bottom_item_border" :class="{active:item.name == selectStyle.name}" @click="setItemSelect(item)">
{{ item.name}}
</div>
</div>
</div>
<div class="habitSetStyle_ok">
<div class="started_btn" @click="setClear()">
{{ $t('Habit.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 { message,Modal } from "ant-design-vue";
import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
import { Https } from "@/tool/https";
// import domTurnImg from '@/tool/domTurnImg'
import { downloadIamge } from "@/tool/util";
import { useI18n } from "vue-i18n";
export default defineComponent({
emits:['setParentData','setWorkspaceStyle'],
props:{
mannequinStyle:{
type:Array,
default:()=>[]
}
},
setup(props,{emit}) {
let habitSetStyle: any = ref(false);//弹窗
let habitSetStyleMask:any = ref(false)//弹窗遮罩
let oldDataId = ''
let habitSetStyleData:any = reactive({
styleList:[],
selectStyle:{
name:'',
id:'',
},
selectStyleName:'',
isShowMark:false,
})
const {t} = useI18n()
let getStyleList = ()=>{
habitSetStyleData.isShowMark = true
Https.axiosPost(Https.httpUrls.getStyleList, {}).then(
(rv) => {
habitSetStyleData.isShowMark = false
rv.forEach((item:any) => {
let name = item.value
item.value = item.name
item.name = name
});
habitSetStyleData.styleList = rv
}
).catch(res=>{
habitSetStyleData.isShowMark = false
});
}
let init = (data:any)=>{
habitSetStyle.value = true
// if(habitSetStyleData.styleList.length == 0){
// getStyleList()
// }
oldDataId = data.styleId
habitSetStyleData.selectStyle.id = data.styleId
habitSetStyleData.selectStyle.name = data.styleName
// habitSetStyleData.selectStyleId = 'feng2'
}
let setCover = (item:any)=>{
habitSetStyleData.subPublishDate.coverId = item.designOutfitId
habitSetStyleData.selectDate.url = item.url
}
let cleardata = ()=>{
habitSetStyle.value = false
habitSetStyleData.isShowMark = false
// setParentData()
}
let setParentData = ()=>{
emit('setParentData')
}
let cancelDsign = ()=>{
cleardata()
}
let setOk= ()=>{
let data = {
id:habitSetStyleData.selectStyle.id,
name:habitSetStyleData.selectStyle.name,
value:habitSetStyleData.selectStyle.value,
isRevampModel:false,
}
if(oldDataId == data.id){
cleardata()
}else{
// let _this = this
// Modal.confirm({
// title: t('Habit.jsContent3'),
// icon: createVNode(ExclamationCircleOutlined),
// okText: 'Yes',
// cancelText: 'No',
// mask:false,
// centered:true,
// zIndex:1050,
// onOk() {
// data.isRevampModel = true
// emit('setWorkspaceStyle',data)
// cleardata()
// },
// onCancel() {
// emit('setWorkspaceStyle',data)
// cleardata()
// },
// });
emit('setWorkspaceStyle',data)
cleardata()
}
}
let setClear = ()=>{
habitSetStyleData.selectStyle.id = ''
habitSetStyleData.selectStyle.name = ''
habitSetStyleData.selectStyle.value = ''
}
let setItemSelect = (item:any)=>{
habitSetStyleData.selectStyle = Object.assign({},item)
}
return {
habitSetStyle,
habitSetStyleMask,
...toRefs(habitSetStyleData),
init,
setCover,
cancelDsign,
setItemSelect,
setOk,
setClear,
};
},
data() {
return {
// moodTemplateId: "", //模板id
};
},
directives:{
hoverAnmi:{
updated (el) {
var elements = document.querySelectorAll(".habitSetStyle_modal .content_bottom_item");
el.addEventListener("mousemove", function (event:any) {
// 获取鼠标位置
var mouseX = event.pageX;
var mouseY = event.pageY;
// 遍历元素并输出距离鼠标的坐标
for (var i = 0; i < elements.length; i++) {
var element:any = elements[i];
var rect = element.getBoundingClientRect();
var elementX = rect.left + window.pageXOffset;
var elementY = rect.top + window.pageYOffset;
var distanceX = mouseX - elementX;
var distanceY = mouseY - elementY;
// 将距离值设置到每一个卡片元素上面
element.style.setProperty('--x', distanceX + 'px');
element.style.setProperty('--y', distanceY + 'px');
}
});
}
}
},
mounted() {
},
methods: {
},
});
</script>
<style lang="less">
.habitSetStyle_modal {
&.generalModel{
.ant-modal-body {
}
}
.habitSetStyle_content{
display: flex;
flex-direction: column;
height: 100%;
.habitSetStyle_content_bottom{
--border-color: #c4c4c4;
display: flex;
flex: 1;
flex-wrap: wrap;
align-content: flex-start;
.content_bottom_item{
width: calc((100% / 4) - (.8 * 1rem));
// width: calc(100% / 4);
// padding: 0 1rem;
border-radius: 2rem;
margin-right: 1rem;
margin-bottom: 1rem;
height: 10rem;
background: #f3f3f3;
position: relative;
cursor: pointer;
.content_bottom_item_border {
position: absolute;
inset: .2rem;
background: #f3f3f3;
border-radius: 2rem;
color: #595959;
font-weight: 600;
font-size: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
}
.content_bottom_item:nth-child(4n){
margin-right: 0rem;
}
.content_bottom_item::before {
content: '';
position: absolute;
width: calc(100% + .2rem);
height: calc(100% + .2rem);
top: 50%;
left: 50%;
border-radius: 2rem;
transform: translate(-50%, -50%);
background: radial-gradient(50px circle at var(--x) var(--y),#000 0,transparent 100%);;
}
.content_bottom_item .active{
background: #000;
color: #fff;
}
}
.habitSetStyle_ok{
width: 60%;
text-align: center;
margin: 0 auto;
display: flex;
justify-content: space-around;
>div{
width: 40%;
}
}
}
}
</style>

293
src/component/modules/setBrandDNA.vue Normal file
View File

@@ -0,0 +1,293 @@
<template>
<a-modal
class="setBrandDNA_modal generalModel"
v-model:visible="setBrandDNA"
:footer="null"
width="50%"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="true"
:keyboard="false"
:destroyOnClose="true"
:zIndex="1000"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
</svg>
</div>
</div>
<div class="setBrandDNA_content">
<div class="modal_title_text">
<div>{{ $t('Habit.Style') }}</div>
<div class="modal_title_text_intro"></div>
</div>
<div class="setBrandDNA_content_bottom">
<div class="content_bottom_item" v-for="item in styleList">
<div class="content_bottom_item_border" :class="{active:item.id == selectStyle.id}" @click="setItemSelect(item)">
{{ item.brandName}}
</div>
</div>
<div v-show="!isNoData" class="material_content_list_loding">
<span class="page_loading" v-show="!isShowLoading"></span>
<span v-show="isShowLoading">
<a-spin size="large" />
</span>
</div>
<img v-show="isNoData && isNull" src="@/assets/images/homePage/null_img.png">
</div>
<div class="setBrandDNA_ok">
<div class="started_btn" @click="setClear()">
{{ $t('Habit.Clear') }}
</div>
<div class="started_btn" @click="setOk()">
OK
</div>
</div>
</div>
</a-modal>
</template>
<script lang="ts">
import { defineComponent,watch,createVNode, h, ref ,toRefs,onMounted,reactive,triggerRef, nextTick} from "vue";
import { message,Modal } from "ant-design-vue";
import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
import { Https } from "@/tool/https";
// import domTurnImg from '@/tool/domTurnImg'
import { downloadIamge } from "@/tool/util";
import { useI18n } from "vue-i18n";
export default defineComponent({
emits:['setWorkspaceBrandDNA'],
props:{
},
setup(props,{emit}) {
let setBrandDNA: any = ref(false);//弹窗
let setBrandDNAMask:any = ref(false)//弹窗遮罩
let oldDataId = ''
let setBrandDNAData:any = reactive({
styleList:[],
selectStyle:{
name:'',
id:'',
},
isNoData:false,
isShowLoading:false,
isNull:false,
page:1,
size:10,
observer:null,
})
const {t} = useI18n()
let getStyleList = ()=>{
let data = {
page:setBrandDNAData.page,
size:setBrandDNAData.size,
}
setBrandDNAData.isShowLoading = true
Https.axiosPost( Https.httpUrls.brandDNAPage, data).then(
(rv) => {
if(data.page == 1 && rv.content.length == 0){
setBrandDNAData.isNull = true
}else{
setBrandDNAData.isNull = false
}
if (rv.content.length > 0) {
setBrandDNAData.isNull = false
setBrandDNAData.styleList.push(...rv.content)
} else {
setBrandDNAData.isNoData = true
}
setBrandDNAData.isShowLoading = false
}
).catch(res=>{
setBrandDNAData.isShowMark = false
if(data.page == 1){
setBrandDNAData.isNull = true
}
setBrandDNAData.isNoData = true
});
}
let setPorfolioDom = ()=>{
setBrandDNAData.observer = new IntersectionObserver(
(entries, observer) => {
// 如果不是相交，则直接返回
if (!entries[0].intersectionRatio) return;
getStyleList()
console.log(123)
setBrandDNAData.page += 1
},
);
}
let init = (data:any)=>{
setBrandDNA.value = true
oldDataId = data.userBrandDna
setBrandDNAData.selectStyle.id = data.userBrandDna
nextTick(()=>{
let imgParent:any = document.querySelector('.setBrandDNA_modal .material_content_list_loding .page_loading')
setBrandDNAData.observer.observe(imgParent)
})
}
let setCover = (item:any)=>{
setBrandDNAData.subPublishDate.coverId = item.designOutfitId
setBrandDNAData.selectDate.url = item.url
}
let cleardata = ()=>{
setBrandDNA.value = false
setBrandDNAData.observer.disconnect();
}
let cancelDsign = ()=>{
cleardata()
}
let setOk= ()=>{
let data = {
id:setBrandDNAData.selectStyle.id,
name:setBrandDNAData.selectStyle.name,
img:setBrandDNAData.selectStyle.img,
isRevampModel:false,
}
if(oldDataId == data.id){
cleardata()
}else{
emit('setWorkspaceBrandDNA',data)
cleardata()
}
}
let setClear = ()=>{
setBrandDNAData.selectStyle.id = ''
setBrandDNAData.selectStyle.name = ''
setBrandDNAData.selectStyle.img = ''
}
let setItemSelect = (item:any)=>{
setBrandDNAData.selectStyle.id = item.id
setBrandDNAData.selectStyle.name = item.brandName
setBrandDNAData.selectStyle.img = item.minioUrl
}
onMounted(()=>{
setBrandDNAData.isShowLoading = false
setBrandDNAData.isNoData = false
setPorfolioDom()
})
return {
setBrandDNA,
setBrandDNAMask,
...toRefs(setBrandDNAData),
init,
setCover,
cancelDsign,
setItemSelect,
setOk,
setClear,
};
},
data() {
return {
// moodTemplateId: "", //模板id
};
},
directives:{
},
mounted() {
},
methods: {
},
});
</script>
<style lang="less">
.setBrandDNA_modal {
&.generalModel{
.ant-modal-body {
}
}
.setBrandDNA_content{
display: flex;
flex-direction: column;
height: 100%;
.setBrandDNA_content_bottom{
--border-color: #c4c4c4;
display: flex;
flex: 1;
flex-wrap: wrap;
align-content: flex-start;
> .material_content_list_loding{
text-align: center;
height: 50px;
width: 100%;
.page_loading{
display: block;
width: 50px;
height: 50px;
margin: 0 auto;
}
img{
height: calc(10rem*1.2);
}
}
.content_bottom_item{
width: calc((100% / 4) - (.8 * 1rem));
// width: calc(100% / 4);
// padding: 0 1rem;
border-radius: 2rem;
margin-right: 1rem;
margin-bottom: 1rem;
height: 10rem;
background: #f3f3f3;
position: relative;
cursor: pointer;
.content_bottom_item_border {
position: absolute;
inset: .2rem;
background: #f3f3f3;
border-radius: 2rem;
color: #595959;
font-weight: 600;
font-size: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
}
.content_bottom_item:nth-child(4n){
margin-right: 0rem;
}
.content_bottom_item::before {
content: '';
position: absolute;
width: calc(100% + .2rem);
height: calc(100% + .2rem);
top: 50%;
left: 50%;
border-radius: 2rem;
transform: translate(-50%, -50%);
background: radial-gradient(50px circle at var(--x) var(--y),#000 0,transparent 100%);;
}
.content_bottom_item .active{
background: #000;
color: #fff;
}
}
.setBrandDNA_ok{
width: 60%;
text-align: center;
margin: 0 auto;
display: flex;
justify-content: space-around;
>div{
width: 40%;
}
}
}
}
</style>