AIProd/pages/Launches/FinanceDetail/index.vue

<template>
	<div id="normal-container">
		<IntegratedLayout>
			<div class="content">
				<div class="bread-menu">
					<span>AI Launches</span>
					<i class="el-icon-arrow-right"></i>
					<span class="crumbs gradient-color">{{newsDetail.title || ''}}</span>
				</div>
				<div class="title-text">{{ newsDetail.title || '' }}</div>
				<div class="flex mt-24">
					<div>
						<div class="terms-item">
							<div class="item-title">
								<img src="/ToolDetail/icon_star.png" alt="">
								<span>Score: </span>
								<div class="score color-01">{{ (newsDetail.rating || 0).toFixed(1) }}</div>
							</div>
						</div>
						<div class="terms-item">
							<div class="item-title">
								<img src="/ToolDetail/icon_note.png" alt="">
								<span>Introduction: </span>
							</div>
							<div class="item-content">
								{{ newsDetail.summary || '' }}
							</div>
						</div>
						<div class="terms-item">
							<div class="item-title">
								<img src="/ToolDetail/icon_clock.png" alt="">
								<span>Data update: </span>
							</div>
							<div class="item-content">{{ formatPublishTime(newsDetail.publishTime || '') }}</div>
						</div>
					</div>
				</div>
				<div class="tags">
					<div class="tag-item" v-for="(it, index) in tagList" :key="index">{{ it }}</div>
				</div>
				<div class="diver"></div>
				<div class="title">Special Financing</div>
				<div class="card content-box" v-if="newsDetail.extra && Array.isArray(newsDetail.extra.financing)">
					<SpecialFinanceItem v-for="(it, i) in newsDetail.extra.financing" :key="i" :item="it" />
				</div>
			</div>
		</IntegratedLayout>
	</div>
</template>

<script>
import CommentBtn from "@/pages/ToolDetail/components/CommentBtn.vue";
import SpecialFinanceItem from "@/pages/Launches/FinanceDetail/SpecialFinanceItem.vue";
import ThumbBtn from "@/pages/ToolDetail/components/ThumbBtn.vue";

export default {
	components: {ThumbBtn, CommentBtn, SpecialFinanceItem},
	data() {
		return {
			commentCount: 0,
			news_slug: '',
			newsDetail: {},
			financeDetail: {
				title: 'The Timeline Of Sketch',
				rating: 1,
				summary: 'The newly upgraded Sketch of Athens has optimized the loading speed of offline maps, added an AR real-scene navigation function, and expanded the hidden scenic spots recommended by local creators, making the exploration of Athens smoother, smarter and more in-depth',
				publishTime: 'Sep 03 2025',
				likeCount: 100,
			},
		}
	},
	methods: {
		formatPublishTime(timeString) {
			if (!timeString) return '';

			const date = new Date(timeString);
			const months = [
				'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
				'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
			];

			const month = months[date.getMonth()];
			const day = String(date.getDate()).padStart(2, '0');
			const year = date.getFullYear();

			return `${month} ${day} ${year}`;
		},
		stringJsonToObject(str) {
			// 将json字符串转为对象，捕获错误，当str为空或者转对象失败时默认返回空数组
			try {
				return JSON.parse(str);
			} catch (e) {
				console.error('Error parsing JSON string:', e);
				return [];
			}
		},
		// 获取新闻详情
		async getNewsDetail(newsSlug) {
			const {data: res} = await this.$api.article.getArticleDetail(newsSlug);
			const {code, data} = res;
			if (code === 0 && data) {
				this.newsDetail = {...data, extra: this.stringJsonToObject(data.extra || '[]')};
				// 处理socialLinks
				if (this.newsDetail.extra && Array.isArray(this.newsDetail.extra.socialLinks)) {
					const socialLinks = this.newsDetail.extra.socialLinks;
					// 查找Website选项的索引
					const websiteIndex = socialLinks.findIndex(item => item && item.key === 'Website');
					// 如果找到Website选项且不在第一个位置，则移到第一个位置
					if (websiteIndex !== -1 && websiteIndex !== 0) {
						const websiteItem = socialLinks.splice(websiteIndex, 1)[0];
						socialLinks.unshift(websiteItem);
					}
				}
			}
		}
	},
	watch: {
		'$route'(to, from) {
			// 当路由参数发生变化时重新加载数据
			if (to.query.news_slug !== from.query.news_slug) {
				this.news_slug = to.query.news_slug;
				if (this.news_slug) {
					this.getNewsDetail(this.news_slug);
				}
			}
		}
	},
	mounted() {
		this.news_slug = this.$route.query.news_slug;
		if (this.news_slug) {
			this.getNewsDetail(this.news_slug);
		}
	},
	computed: {
		tagList() {
			if (!this.newsDetail.tags) {
				return [];
			}
			return this.stringJsonToObject(this.newsDetail.tags || '[]');
		}
	},
}
</script>

<style scoped lang="scss">
.mt-24 {
	margin-top: 24px;
}
.color-01 {
	color: #7B61FF;
}
.card {
	padding: 50px 30px;
	background-color: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.08);
}
.title {
	margin-bottom: 20px;
	font-size: 30px;
	color: #1E293B;
	font-family: 'Poppins-SemiBold';
	font-weight: 600;
	&::before {
		content: '';
		display: inline-block;
		width: 6px;
		height: 26px;
		background: $header-backgroungd;
		margin-right: 8px;
		border-radius: 0 6px 6px 0;
	}
}
.content {
	padding-top: 25px;
	padding-bottom: 100px;

	.bread-menu {
		font-size: $mid-font-size;
		font-family: 'Poppins-Medium';
		margin-bottom: 25px;

		.crumbs {
			font-family: 'Poppins-SemiBold';
			font-weight: 600;
		}
	}

	.content-box {
		padding: 50px 30px;
	}

	.diver {
		margin-top: 20px;
		border-top: 4px solid #E2E8F0;
		margin-bottom: 20px;
	}

	.title-text {
		font-size: 34px;
		color: #1E293B;
		font-family: 'Poppins-SemiBold';
		font-weight: 600;
	}

	.rate-box {
		margin-top: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.btn-wrapper {
			display: flex;
			align-items: center;
			gap: 20px;
		}
	}

	.terms-item {
		margin-bottom: 30px;
		display: flex;
		align-items: flex-start;
		gap: 7px;

		.item-title {
			display: flex;
			align-items: center;
			gap: 8px;
			color: #1E293B;
			font-family: 'Poppins-Medium';

			img {
				width: 24px;
				height: 24px;
			}
		}

		.item-content {
			font-family: 'Poppins-Regular';
			color: #64748B;
		}
	}

	.tags {
		display: flex;
		overflow-x: auto;
		gap: 12px;
		scrollbar-width: none;
		-ms-overflow-style: none;
		user-select: none;
		flex-wrap: wrap;
		width: 80%;

		.tag-item {
			font-family: 'Poppins-Medium';
			flex-shrink: 0;
			padding: 4px 12px;
			border-radius: 12px;
			@include gradient-border($linear-gradient-start, $linear-gradient-end);
		}
	}
}
</style>