aida_front/src/component/modules/setBrandDNA.vue

<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>Brand</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>