xuye929/AIProd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

后期修改完善，上线版本

Browse Source
This commit is contained in:
qiuxiao
2025-11-12 18:11:11 +08:00
parent c54f9c9976
commit 8f57683dd5
98 changed files with 2110 additions and 867 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
pages/Launches/Detail/index.vue
View File

@ -2,86 +2,83 @@
<div id="normal-container">
<IntegratedLayout>
<div class="content">
<div class="title-text">{{ news_detail.title || '' }}</div>
<div class="rate-box">
<Rate v-model="news_detail.rating" readonly />
<div class="flex" style="gap: 20px">
<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 class="flex-1">
<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 class="tags">
<div class="tag-item" v-for="(it, index) in tagList" :key="index">{{ it }}</div>
</div>
</div>
<div class="flex gap-20">
<ThumbBtn :like-count="newsDetail.likeCount || 0" :id="newsDetail.id || 0" type="article" @like-success="refreshToolDetail" />
<CommentBtn :comment-count="commentCount" />
</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">
{{ news_detail.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">{{ news_detail.publishTime || '' }}</div>
</div>
<div class="terms-item">
<div class="item-title">
<img src="/ToolDetail/like_icon.png" alt="">
<span>Like: </span>
</div>
<div class="item-content">{{ news_detail.likeCount || 0 }}</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="container flex">
<div class="left-content flex-1 flex flex-col">
<!--<div class="sketch flex justify-between">-->
<!-- <div class="flex items-center" style="gap: 8px">-->
<!-- <img style="width: 18px; height: 18px" src="/launches/detail/icon_fly.png" alt="" />-->
<!-- <div class="text">This is the <span style="color: #7B61FF">6</span> release of Sketch</div>-->
<!-- </div>-->
<!-- <div class="flex items-center more">-->
<!-- <div>View more</div>-->
<!-- <img src="/launches/detail/icon_arrow.png" alt="" />-->
<!-- </div>-->
<!--</div>-->
<div class="card flex-1">
<div class="article-content">
<div v-html="news_detail.content || ''"></div>
<div v-html="newsDetail.content || ''"></div>
</div>
</div>
</div>
<div class="right-content">
<div class="card">
<div class="flex items-center" style="margin-top: 20px">
<div class="flex items-center mt-20">
<img alt="" src="/launches/detail/icon_hourse.png" class="icon" />
<div class="content-title">Company Information</div>
</div>
<div class="diver-line"></div>
<ProjectItem :item="{name: 'Sketch.com', iconUrl: '/launches/web/sketch.png'}" />
<ProjectItem :item="{name: 'Github.com', iconUrl: '/launches/web/github.png'}" />
<ProjectItem :item="{name: 'Facebook.com', iconUrl: '/launches/web/facebook.png'}" />
<ProjectItem :item="{name: 'Instagram.com', iconUrl: '/launches/web/instagram.png'}" />
<ProjectItem :item="{name: 'Twitter.com', iconUrl: '/launches/web/twitter.png'}" />
<div class="more flex items-center justify-between" style="margin-top: 20px">
<div>A total of 8 projects were released</div>
<img src="/launches/detail/icon_arrow.png" alt="" />
<div v-if="newsDetail.extra && Array.isArray(newsDetail.extra.socialLinks)" class="mt-30">
<ProjectItem v-for="(item, index) in newsDetail.extra.socialLinks" :key="index" :item="item" />
</div>
<!--<div class="more flex items-center justify-between mt-20">-->
<!-- <div>A total of 8 projects were released</div>-->
<!-- <img src="/launches/detail/icon_arrow.png" alt="" />-->
<!--</div>-->
</div>
<div class="card" style="margin-top: 20px">
<div class="flex items-center" style="margin-top: 20px">
<div class="card mt-20">
<div class="flex items-center mt-20">
<img alt="" src="/launches/detail/icon_finance.png" class="icon" />
<div class="content-title">Special Financing</div>
</div>
<div class="diver-line"></div>
<FinanceItem />
<FinanceItem />
<FinanceItem />
<div class="flex justify-end" style="margin-top: 30px">
<div class="more flex items-center justify-between" style="gap: 14px">
<div class="scroll">
<div v-if="newsDetail.extra && Array.isArray(newsDetail.extra.financing)">
<FinanceItem v-for="(item, index) in newsDetail.extra.financing" :key="index" :item="item" :slug="news_slug" />
</div>
</div>
<div class="flex justify-end mt-30">
<div class="more flex items-center justify-between gap-14" @click="goToFinanceDetail">
<div>View more</div>
<img src="/launches/detail/icon_arrow.png" alt="" />
</div>
@ -97,29 +94,14 @@
</div>
</div>
<div class="card">
<div class="flex-between-center list">
<RelatedTool :item="{
title: 'Figma',
summary: 'Easily create highly interactive prototypes',
likeCount: 123,
rating: 4.5
}" />
<RelatedTool :item="{
title: 'Figma',
summary: 'Easily create highly interactive prototypes',
likeCount: 123,
rating: 4.5
}" />
<RelatedTool :item="{
title: 'Figma',
summary: 'Easily create highly interactive prototypes',
likeCount: 123,
rating: 4.5
}" />
<div class="list">
<div class="item" v-for="(item, index) in otherList" :key="index">
<RelatedTool :item="item" />
</div>
</div>
</div>
</div>
<Comment comment-type="article" :id="news_detail.id" @update:commentCount="handleCommentCountUpdate" />
<Comment comment-type="article" :id="newsDetail.id" @update:commentCount="handleCommentCountUpdate" />
</div>
</IntegratedLayout>
</div>
@ -131,25 +113,59 @@ import Comment from "@/pages/ToolDetail/Comment/index.vue";
import RelatedTool from "@/pages/Launches/Detail/RelatedTool.vue";
import ProjectItem from "@/pages/Launches/Detail/ProjectItem.vue";
import FinanceItem from "@/pages/Launches/Detail/FinanceItem.vue";
import ThumbBtn from "@/pages/ToolDetail/components/ThumbBtn.vue";
export default {
components: {FinanceItem, ProjectItem, RelatedTool, CommentBtn, Comment},
components: {ThumbBtn, FinanceItem, ProjectItem, RelatedTool, CommentBtn, Comment},
data() {
return {
news_detail: {},
newsDetail: {},
commentCount: 0,
news_slug: '',
otherList: [],
}
},
methods: {
// 刷新工具详情数据
refreshToolDetail() {
if (this.news_slug) {
this.getNewsDetail(this.news_slug);
}
},
// 获取新闻详情
async getNewsDetail(newsSlug) {
const {data: res} = await this.$api.article.getArticleDetail(newsSlug);
const {code, data} = res;
if (code === 0 && data) {
this.news_detail = {...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);
}
}
}
},
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 {
@ -161,63 +177,116 @@ export default {
},
goToViewMore() {
// 返回上一页
this.$router.go(-1);
this.$router.push('/launches');
},
handleCommentCountUpdate(count) {
this.commentCount = count;
},
goToFinanceDetail() {
if (!this.news_slug) {
return false;
}
this.$router.push('/finance-detail?news_slug=' + this.news_slug)
},
async getArticleListData() {
const params = {page: 1, limit: 4, articleType: 'launches'};
const {data: res} = await this.$api.article.getArticleList(params);
const {code, data} = res;
if (code === 0 && data.list && Array.isArray(data.list)) {
let processedList = [...data.list];
// 判断列表中是否有与当前详情id一致的项
if (this.newsDetail && this.newsDetail.id) {
const currentIdIndex = processedList.findIndex(item => item && item.id === this.newsDetail.id);
if (currentIdIndex !== -1) {
// 有一致的id，删除该项
processedList.splice(currentIdIndex, 1);
} else if (processedList.length > 0) {
// 没有一致的id，删除最后一个项
processedList = processedList.slice(0, -1);
}
}
this.otherList = processedList;
}
},
async onLoad() {
this.news_slug = this.$route.query.news_slug;
if (this.news_slug) {
await this.getNewsDetail(this.news_slug);
await this.getArticleListData();
}
}
},
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);
}
this.onLoad();
}
}
},
mounted() {
this.news_slug = this.$route.query.news_slug;
if (this.news_slug) {
this.getNewsDetail(this.news_slug);
}
this.onLoad();
},
computed: {
tagList() {
if (!this.news_detail.tags) {
if (!this.newsDetail.tags) {
return [];
}
return this.stringJsonToObject(this.news_detail.tags || '[]');
return this.stringJsonToObject(this.newsDetail.tags || '[]');
}
},
}
</script>
<style scoped lang="scss">
.mt-24 {
margin-top: 24px;
}
.color-01 {
color: #7B61FF;
}
.mt-20 {
margin-top: 20px;
}
.mt-30 {
margin-top: 30px;
}
.card {
padding: 20px;
background-color: #FFFFFF;
border-radius: 12px;
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.08);
}
.scroll {
max-height: 500px; overflow-y: auto; overflow-x: hidden;
}
.content {
padding-top: 100px;
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;
}
}
.diver {
margin-top: 20px;
margin-top: 30px;
border-top: 4px solid #E2E8F0;
margin-bottom: 20px;
margin-bottom: 30px;
}
.title-text {
font-size: 34px;
color: #1E293B;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
font-weight: 600;
margin-top: 80px;
}
.rate-box {
@ -244,7 +313,7 @@ export default {
align-items: center;
gap: 8px;
color: #1E293B;
font-family: 'Poppins-Medium', serif;
font-family: 'Poppins-Medium';
img {
width: 24px;
@ -253,7 +322,7 @@ export default {
}
.item-content {
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
color: #64748B;
}
}
@ -269,7 +338,7 @@ export default {
width: 80%;
.tag-item {
font-family: 'Poppins-Medium', serif;
font-family: 'Poppins-Medium';
flex-shrink: 0;
padding: 4px 12px;
border-radius: 12px;
@ -290,7 +359,7 @@ export default {
.content-title {
margin-left: 6px;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
font-size: 24px;
color: #1E293B;
font-weight: 600;
@ -306,9 +375,13 @@ export default {
border-radius: 6px;
padding: 8px 15px;
border: 1px solid #e2e8f0;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
color: #64748B;
&:active {
opacity: 0.8;
}
img {
width: 16px;
height: 16px;
@ -322,7 +395,7 @@ export default {
background-color: #F5F4FF;
border-radius: 12px;
.text {
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
color: #64748B;
font-size: 18px;
}
@ -332,7 +405,7 @@ export default {
border-radius: 6px;
padding: 8px 15px;
border: 1px solid #e2e8f0;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
color: #64748B;
img {
@ -344,13 +417,13 @@ export default {
}
}
.related {
margin-top: 60px;
margin-top: 40px;
.related-title {
.title {
margin-bottom: 20px;
font-size: 30px;
color: #1E293B;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
font-weight: 600;
&::before {
content: '';
@ -367,12 +440,19 @@ export default {
text-align: right;
color: $grey-color;
font-size: $mid-font-size;
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
}
}
.list {
gap: 60px;
margin: 40px 10px 40px 10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
.item {
width: 100%;
overflow: hidden;
min-height: 110px;
}
}
}
}