aida_front/src/component/Detail/habitSetStyle.vue

<template>
	<a-modal
		class="habitSetStyle_modal generalModel"
		v-model:visible="habitSetStyle"
		:footer="null"
		width="50%"
		:maskClosable="false"
		:centered="true"
		:closable="false"
		:mask="habitSetStyleMask"
		:keyboard="false"
		:destroyOnClose="true"
		:zIndex="1050"
	>
	<div class="generalModel_btn">
		<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
			<i class="fi fi-rr-cross-small"></i>
		</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 styleList">
				<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 { getCookie } from "@/tool/cookie";
import { message,Modal } from "ant-design-vue";
import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";

import { Https } from "@/tool/https";
import { getCookie,setCookie } from "@/tool/cookie";
// import domTurnImg from '@/tool/domTurnImg'
import { downloadIamge } from "@/tool/util";
import { useI18n } from "vue-i18n";
export default defineComponent({
emits:['setParentData','setWorkspaceStyle'],

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()
				},
			});
		}
	}
	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 {
			height: calc(55rem*1.2);
		}
	}
	
	.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),#39215b 0,transparent 100%);;
			}
			.content_bottom_item .active{
				background: #39215b;
				color: #fff;
			}
		}
		.habitSetStyle_ok{
			width: 60%;
			text-align: center;
			margin: 0 auto;
			display: flex;
			justify-content: space-around;
			>div{
				width: 40%;
			}
		}
	}
	
}
</style>