aida_front/src/component/Account/message/system.vue

<template>
	<div class="account_systemMessage">
		<div class="account_generalMessage_title modal_title_text">
			<!-- <span>系统消息</span> -->
			<div class="account_generalMessage_title_setting" @click="allRead">
				{{ $t("account.AllRead") }}
			</div>
		</div>
		<div
			class="account_generalMessage_item modal_title_text"
			v-for="item in dataList"
			:key="item.id"
			@click="setRead(item)"
		>
			<a-badge :dot="item.isRead == 0"></a-badge>
			<div class="account_generalMessage_item_title">
				<div class="account_generalMessage_item_title_text" :title="item.content">
					{{ item.content.title }}
				</div>
				<div class="modal_title_text_intro">{{ item.createTime }}</div>
			</div>
			<div class="modal_title_text_intro">
				{{ item.content.content }}
				<span v-if="item.content.link" class="account_generalMessage_item_link">{{
					item.content.link
				}}</span>
			</div>
		</div>
		<div
			class="account_generalMessage_item modal_title_text"
			style="display: flex; justify-content: center"
			v-if="dataList.length == 0 && isNoData"
		>
			{{ $t("account.dataNull") }}
		</div>
		<div class="page_loading_box" v-show="!isNoData">
			<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
			<span v-show="isShowMark">
				<a-spin size="large" />
			</span>
		</div>
	</div>
</template>
<script lang="ts">
import {
	defineComponent,
	computed,
	ref,
	reactive,
	nextTick,
	toRefs,
	createVNode,
	onMounted
} from "vue"
import { Https } from "@/tool/https"
import { useRouter, useRoute } from "vue-router"
import { useStore } from "vuex"
import { useI18n } from "vue-i18n"
import { isValidUrl } from "@/tool/util"
export default defineComponent({
	components: {},
	// emits:['putListData'],
	props: ["setReadStatus", "setAllmessage", "getHistory"],
	setup(prop, { emit }) {
		const router = useRouter()
		const store = useStore()
		let accountMessage = reactive({
			dataList: [],
			page: 1,
			size: 10,
			isNoData: false,
			isShowMark: false
		})
		let loadingDom: any = ref(null)
		let setmessageList = () => {
			accountMessage.isShowMark = true
			let data = {
				page: accountMessage.page,
				size: accountMessage.size
			}
			prop.getHistory(data)
				.then((rv: any) => {
					accountMessage.isShowMark = false

					if (rv.content.length == 0) {
						accountMessage.isNoData = true
					} else {
						rv.content.forEach((item: any) => {
							item.content = JSON.parse(item.content)
						})
						accountMessage.dataList.push(...rv.content)
					}
				})
				.catch(() => {
					accountMessage.isShowMark = false
					accountMessage.isNoData = true
				})
		}
		let setRead = (item: any) => {
			let content = item.content.content
			if (isValidUrl(content)) {
				if (import.meta.env.VITE_APP_BASE_URL === "https://develop.api.aida.com.hk") {
					content += "&env=dev"
				}
				window.open(content, "_blank")
			}

			prop.setReadStatus(item)
				.then((rv: any) => {
					item.isRead = 1
				})
				.catch((err: any) => {})
		}
		let allRead = () => {
			// emit('setAllmessage')
			prop.setAllmessage()
				.then(() => {
					accountMessage.dataList.forEach((item: any) => {
						item.isRead = 1
					})
				})
				.catch((err: any) => {})
		}
		// provide('exhibitionList',exhibitionList)
		onMounted(() => {
			accountMessage.isNoData = false
			accountMessage.page = 0
			let imgParent: any = document.querySelector(".account_systemMessage .page_loading")
			new IntersectionObserver(
				(entries, observer) => {
					// 如果不是相交，则直接返回
					// console.log(entries[0]);
					if (!entries[0].intersectionRatio) return
					accountMessage.page += 1
					setmessageList()
				}
				// { root:worksPage }
			).observe(loadingDom.value)
		})
		return {
			...toRefs(accountMessage),
			setmessageList,
			setRead,
			allRead,
			loadingDom
		}
	},
	data() {
		return {}
	}
})
</script>
<style lang="less" scoped>
.account_systemMessage {
	width: 100%;
	.account_generalMessage_item {
		font-size: var(--aida-fsize1-6);
		.account_generalMessage_item_title {
			display: flex;
			align-items: center;
			margin-bottom: 2rem;
			.account_generalMessage_item_title_text {
				max-width: 80%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.modal_title_text_intro {
				margin-left: 4rem;
			}
		}
	}
	.modal_title_text_intro {
		word-break: break-word;
		white-space: pre-wrap;
		font-family: Arial, sans-serif;
	}
}
</style>