aida_front/src/component/Events/eventsDetail.vue

<template>
    <div class="eventsDetail_page" :class="{active:isScroll}">
		<div class="eventsDetail_title ">
			<div class="modal_title_text" @click="setBack">
				<i class="fi fi-sr-left"></i>
				<div class="eventsDetail_title_text">Back</div>
			</div>
		</div>
		<div class="eventsDetail_content">
			<div class="eventsDetail_content_left">
				<fullScreenImg :src="eventsDetail.imgUrl" width="100%" :center="true"></fullScreenImg>
			</div>
			<div class="eventsDetail_content_right">
				<div class="modal_title_text">
					<div>{{ eventsDetail.title }}</div>
				</div>
				<div class="modal_title_text" v-for="item in eventsDetail.textList">
					<div class="eventsDetail_content_right_btn_box">
						<div class="eventsDetail_content_right_btn" v-for="buttonItem,buttonIndex in item?.button" @click="openButton(buttonItem,buttonIndex)">
							<div v-show="!loadingShow[buttonIndex]" class="started_btn">{{ buttonItem.text }}</div>
							<div v-show="loadingShow[buttonIndex]" class="started_btn"><i class="fi fi-br-loading"></i></div>
						</div>
					</div>
					<div class="modal_title_text_intro" v-for="introItem in item?.paragraph" :class="{active:introItem.display == 'flex'}" v-detailText="introItem.text">
					</div>
				</div>
			</div>
		</div>
	
    </div>
</template>
<script lang="ts">
import { LoadingOutlined } from "@ant-design/icons-vue";
import { defineComponent,h ,toRefs,ref,reactive,onMounted,nextTick,provide,computed} from 'vue'
// import HeaderComponent from "@/component/HomePage/Header.vue";
// import RobotAssist from "@/component/HomePage/RobotAssist.vue";
import { Https } from "@/tool/https";
import { message, Upload, Modal } from "ant-design-vue";
import fullScreenImg from '@/component/HomePage/fullScreenImg.vue'
import { useRouter } from 'vue-router';
import { useI18n } from "vue-i18n";
import generalMenu from "@/component/HomePage/generalMenu.vue";
import eventData from "@/assets/json/events.json";
import eventDataCn from "@/assets/json/events_cn.json";
import { useStore } from "vuex";
export default defineComponent({
    components: {
		generalMenu,
		fullScreenImg,
    },
	props:{
		isScroll:{
			 type:Boolean,
			 default:true,
		 },
	},
    setup() {
		const router = useRouter();
        const store = useStore();
		let filter:any = reactive({
			eventsDetail: {
			},
			getListDate:{
				"getLikePortfolio": 0,
				"getMyPortfolio": 0,
				page:1,
				size:10,
			},
			isShowMark:false,
			isNoData:false,//如果数据为空就不加载
			loadingShow:{},
		})
		let systemUser = computed(()=>{
			return store.state.UserHabit.systemUser
		})
		let likeFile = (item:any,type:string) => {
		}
		let setBack = ()=>{
			router.go(-1);
			// router.push('/home/events')
		} 
		let openButton = (data:any,index:number)=>{
			if(filter.loadingShow[index]){
				return
			}
			filter.loadingShow[index] = true
			Https.axiosGet(data.https).then(
                (rv: any) => {
					if(rv){
						message.success(data.success)
						filter.loadingShow[index] = false
					}
                }
            ).catch(res=>{
                filter.loadingShow[index] = false
            });
		}
		onMounted (()=>{
			const { t, locale } = useI18n();
			const currentLocale = locale.value;
			let eventLangData:any
			if(currentLocale == 'ENGLISH'){
				eventLangData = eventData
			}else{
				eventLangData = eventDataCn
			}
			eventLangData.eventsItem.forEach((item:any)=>{
				if(item.id == router.currentRoute.value.query.id){
					filter.eventsDetail = item;
				}
			})
		})
        return {
			...toRefs(filter),
			systemUser,
			likeFile,
			setBack,
			openButton,
        }
    },
	directives:{
		detailText:{
			mounted (el,binding) {
				el.innerHTML = binding.value
			}
		}
	},
    async mounted(){
	
    },
})
</script>
<style lang="less">
.eventsDetail_page {
	min-height: 100%;
    width: 100%;
	padding: 0 9rem;
	padding-top: 5rem;

	&.active{
		display: flex;
		flex-direction: column;
		height: 100%;
		.eventsDetail_content{
			overflow-y: auto;
			width: 100%;
		}
	}
	@media (max-width: 768px) {
		padding-top: 0;
		min-height: auto;
		padding-bottom: 10rem;
	}
	.eventsDetail_title{
		display: flex;
		padding: 2rem 0rem;
		align-items: center;
		position: sticky;
		top: 0;
		z-index: 222;
		background: #fff;
		.modal_title_text{
			cursor: pointer;
			display: flex;
			margin-bottom: 0;
		}
		.modal_title_text:hover .eventsDetail_title_text{
			text-decoration: underline;
		}
		i{
			display: flex;
			align-items: center;
			margin-right: 1rem;
		}
	}
	.eventsDetail_content{
		border-top: 1px solid #f0f0f0;
		display: flex;
		justify-content: space-between;
		padding-top: 8rem;
		@media (max-width: 768px) {
			flex-direction: column;
		}
		.eventsDetail_content_left,.eventsDetail_content_right{
			width: 50%;
			@media (max-width: 768px) {
				width: 100%;
			}
		}
		.eventsDetail_content_left{
			width: 40%;
			max-height: 60rem;
			@media (max-width: 768px) {
				width: 100%;
			}
			.ant-image{
				// height: auto;
				height: 100%;
			}
			.eventsDetail_content_left_img{
				width: 100%;
				cursor: zoom-in;
			}
		}
		.eventsDetail_content_right{
			.modal_title_text{
				letter-spacing: .4rem;
				font-weight: 600;
				.modal_title_text_intro{
					display: block;
					&.active{
						display: flex;
						justify-content: space-between;
					}
					li{
						width: 48%;
						
					}
					em{
						// font-family: auto;
					}
					a{
						display: inline;
					}
				}
				.eventsDetail_content_right_btn_box{
					display: flex;
					justify-content: space-evenly;
					.eventsDetail_content_right_btn{
					}
				}
				
			}
			.modal_title_text:last-child{
			}
			.modal_title_text:last-child::after{
				content: "";
				display: block;
				border-top: 3px solid;
				height: 6rem;
			}
		}
	}
}
</style>