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">{{ $t("event.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 modal_title_text-header flex space-between">
					<div>{{ eventsDetail.title }}</div>
					<div class="detail-btn" v-if="eventsDetail.id === 3" @click="openDetail">
						{{ $t("event.detail") }}
					</div>
				</div>
				<div class="modal_title_text content" 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 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 { t, locale } = useI18n()
		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 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
				})
		}
		const openDetail = () => {
			let language = locale.value === "ENGLISH" ? "en" : "zh"
			let url = `https://aida-global-design-awards.com.hk/${language}`
			window.open(url, "_blank")

		//	router.push("/award/index")
		}
		onMounted(() => {
			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.eventId) {
					filter.eventsDetail = item
				}
			})
		})
		return {
			...toRefs(filter),
			likeFile,
			setBack,
			openButton,
			openDetail
		}
	},
	directives: {
		detailText: {
			mounted(el, binding) {
				el.innerHTML = binding.value
			}
		}
	},
	async mounted() {}
})
</script>
<style lang="less">
.eventsDetail_page {
	min-height: 100%;
	width: 100%;
	padding: 0 6rem;
	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: 0.4rem;
				font-weight: 600;
				&-header {
					display: flex;
					flex-wrap: wrap;
					align-items: flex-end;
					justify-content: space-between;
					gap: 1rem;
					> div:first-child {
						flex: 1;
						min-width: 0;
					}
				}
				.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;
			}
		}
	}
}
.detail-btn {
	// width: 11rem;
	padding: 0 1.4rem;
	height: 4rem;
	line-height: 4rem;
	text-align: center;
	color: #fff;
	border-radius: 2rem;
	background-color: #000;
	font-size: 1.4rem;
	white-space: nowrap;
	cursor: pointer;
}
</style>