LJX/test-subject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

addnews

Browse Source
This commit is contained in:
WanP
2025-10-15 18:04:12 +08:00
parent 51c1bd0a48
commit 89171696ff
9 changed files with 361 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

347
src/pages/components/news/news.vue Normal file
View File

@@ -0,0 +1,347 @@
<template>
<view class="page">
<Head></Head>
<!-- 内容区 -->
<view class="content">
<!-- 新闻区域 -->
<view class="news">
<!-- 轮播图 -->
<swiper v-if="post.imgs && post.imgs.length" :indicator-dots="false" :autoplay="false" :interval="3000"
:duration="1000" :circular="true" class="swiper-banner" @change="onChange">
<swiper-item v-for="(item, i) in post.imgs" :key="i">
<view class="swiper-center">
<image v-if="item.type === 'img'" :src="item.src" class="swiper-item" mode="aspectFit" alt="新闻图片" />
<video v-else :src="item.src" class="swiper-item" object-fit="contain" muted style="pointer-events:none;"
alt="新闻视频" />
<cover-view class="swiper-mask" @tap="common.openapp">
</cover-view>
</view>
</swiper-item>
</swiper>
<!-- 外部指示点:2个及以上才显示 -->
<view v-if="post.imgs && post.imgs.length > 1" class="dots-bar">
<view v-for="(dot, i) in post.imgs" :key="i" class="dot" :class="{ active: i === current }" />
</view>
<!-- 新闻标题 -->
<view v-if="post.title" class="newstitle">
<text class="title">{{ post.title }}</text>
</view>
<!-- 底部文案 -->
<view v-if="post.copywriting && post.date" class="newsbottom">
<text class="copywriting">{{ post.copywriting }}</text>
<view class="meta-info">
<text v-if="post.source" class="source">{{ post.source }}</text>
<text v-if="post.source" class="date-text">·</text>
<view class="datetextview">
<uni-dateformat :date="Date.parse(post.date.replace(/-/g, '/'))" :threshold="[0, 0]" format="yyyy-MM-dd"
class="date-text" />
<text class="date-text">{{ post.time }}</text>
</view>
<view class="spacerview"></view>
<view class="toseeall">
<text class="toseealltext">查看全文</text>
<image src="@/static/imgs/arrowrightup/arrowrightup@3x.png" class="arrowrightupicon" mode="aspectFit"
alt="查看全文图标" />
</view>
</view>
</view>
</view>
</view>
<!-- 评论区域 + 互动区域 -->
<Comments :comments="post.comments" :showInteraction="true" :collectsum="post.collectsum" :likesum="post.likesum" />
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useCommonStore } from '@/stores/common.js'
import Head from '@/pages/components/head/head.vue'
import Comments from '@/pages/components/comments/comments.vue'
const common = useCommonStore()
// 当前 dot
const current = ref(0)
const onChange = e => current.value = e.detail.current
// 动态数据
const post = ref({})
// 模拟获取数据函数
const fetchPostData = async () => {
try {
// 使用uni.request替代axios
const response = await new Promise((resolve, reject) => {
uni.request({
url: '', // 这里可以填写实际API地址
method: 'GET',
timeout: 1000,
success: resolve,
fail: reject
})
})
// 处理数据...
const mockData = {
userId: 1000011,
userName: 'Kun Chang-Min',
userImg: '/static/logo.png',
date: '2024-12-03',
time: '14:00',
title: '智能体是人类智慧的延伸，它们将成为我们最强大的工具，也是最亲密的朋友。',
source: '36氪',
copywriting: '智能体是人类智慧的延伸，它们将成为我们最强大的工具，也是最亲密的朋友。',
current: 0,
isfollow: false,
collectsum: 114514,
likesum: 114514,
imgs: [
{ type: 'video', src: '/static/videos/beauty.mp4' }
],
comments: [
{
id: 101,
userName: 'Brad Lewin',
atUsers: ['JackyLove'],
content: '今天天气真不错~',
date: '2024-12-01',
likeCount: 99999,
showChild: false,
children: [
{ id: 201, userName: 'Alice', content: '快智能体是人类智慧的延伸，它们将成为我们最强大的工具，也是最亲密的朋友。智能体是人类智慧的延伸', atUsers: ['Brad Lewin', 'JackyLove'], date: '2024-12-01', likeCount: 2 },
{ id: 202, userName: 'Bob', content: '我同意你的观点。我记得喜欢这个版本。这个新版本对我来说Nothing好处', atUsers: [], date: '2024-12-01', likeCount: 1 }
]
},
{
id: 102,
userName: 'Leanne Simpson',
atUsers: ['Theshy'],
content: '有人一起开黑吗？',
date: '2024-12-02',
likeCount: 1145140,
showChild: false,
children: [
{ id: 203, userName: 'Carol', content: '带我一个', atUsers: [], date: '2024-12-02', likeCount: 3 }
]
},
{
id: 103,
userName: 'Tom Hardy',
atUsers: [],
content: '主评论3：分享一张今晚的月亮。',
date: '2024-12-03',
likeCount: 999,
showChild: false,
children: []
}
]
}
// 将模拟数据赋值给post
post.value = mockData
} catch (error) {
console.error('获取数据失败:', error)
// 如果获取失败，使用默认数据
post.value = {
userId: 1000011,
userName: 'Kun Chang-Min',
userImg: '/static/logo.png',
date: '2024-12-03',
title: '人工智能技术的最新突破',
source: '科技日报',
copywriting: '智能体是人类智慧的延伸，它们将成为我们最强大的工具，也是最亲密的朋友。',
current: 0,
isfollow: false,
collectsum: 114514,
likesum: 114514,
imgs: [
{ type: 'img', src: '/static/logo.png' }
],
comments: []
}
}
}
// 组件挂载时获取数据
onMounted(() => {
fetchPostData()
})
</script>
<style scoped>
page,
.page {
display: flex;
position: relative;
flex-direction: column;
margin: 0;
height: 100vh;
}
.spacerview {
flex: 1;
height: 0;
pointer-events: none
}
.content {
flex-shrink: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.news {
width: 100%;
flex-shrink: 0;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.swiper-banner {
width: 100%;
height: 357px
}
swiper-item {
display: flex;
align-items: center;
justify-content: center
}
.swiper-center {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center
}
.swiper-item {
width: 100%;
height: 100%
}
.swiper-center {
position: relative;
}
.swiper-mask {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: transparent;
}
.dots-bar {
display: flex;
justify-content: center;
gap: 6px;
padding: 8px 0 0;
}
.dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(0, 0, 0, .2);
transition: background .3s
}
.dot.active {
background: #333
}
.newstitle {
padding: 16px 16px 0;
}
.title {
font-family: PingFangSC;
font-size: 20px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.6;
letter-spacing: 0.6px;
color: #000;
}
.newsbottom {
padding: 16px 16px 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.copywriting {
font-family: PingFangSC;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.86;
letter-spacing: 0.4px;
color: #000;
}
.meta-info {
display: flex;
align-items: center;
gap: 4px;
}
.source,
.date-text {
font-family: PingFangSC;
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
color: #666;
}
.datetextview {
display: flex;
align-items: center;
gap: 8px;
}
.toseeall {
display: flex;
align-items: center;
}
.toseealltext {
font-family: PingFangSC;
font-size: 13px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.46px;
color: #7c45ed;
}
.arrowrightupicon {
width: 18px;
height: 18px;
}
</style>

312
src/pages/components/postpage/postpage.vue
View File

@@ -30,8 +30,8 @@
</swiper-item>
</swiper>
<!-- 外部指示点 -->
<view v-if="post.imgs && post.imgs.length" class="dots-bar">
<!-- 外部指示点:2个及以上才显示 -->
<view v-if="post.imgs && post.imgs.length > 1" class="dots-bar">
<view v-for="(dot, i) in post.imgs" :key="i" class="dot" :class="{ active: i === current }" />
</view>
@@ -47,12 +47,7 @@
</view>
<!-- 评论区域 + 互动区域 -->
<Comments
:comments="post.comments"
:showInteraction="true"
:collectsum="post.collectsum"
:likesum="post.likesum"
/>
<Comments :comments="post.comments" :showInteraction="true" :collectsum="post.collectsum" :likesum="post.likesum" />
</view>
@@ -99,7 +94,7 @@ const fetchPostData = async () => {
likesum: 114514,
imgs: [
{ type: 'img', src: '/static/logo.png' },
{ type: 'video', src: '/static/videos/啊米诺斯.mp4' },
{ type: 'video', src: '/static/videos/beauty.mp4' },
{ type: 'img', src: '/static/imgs/comment.webp' },
{ type: 'img', src: '/static/imgs/image-138.webp' }
],
@@ -322,310 +317,11 @@ swiper-item {
}
.date-text {
color: #b1aeb2;
}
.comment {
padding: 16px;
}
.commenthead {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 29px;
margin-bottom: 28px;
}
.commentcount {
width: fit-content;
height: 100%;
font-family: PingFangSC;
font-size: 14px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
color: #333;
}
.headswitch {
width: 102px;
height: 100%;
flex-grow: 0;
display: flex;
align-items: center;
justify-content: space-around;
border-radius: 24px;
padding: 2px;
box-sizing: border-box;
background-color: #f0eef1;
}
.headswitch .inact,
.act {
width: 48px;
height: 23px;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFangSC;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #110c13;
}
.headswitch .inact {
border-radius: 24px;
background-color: #fff;
}
.commentdetail {
width: 100%;
margin-bottom: 12px;
display: flex;
}
.commentdetailleft {
width: 31.7px;
height: 31.7px;
margin-right: 12.2px;
}
.commentdetailleft image {
width: 100%;
height: 100%;
border-radius: 50%;
}
.commentdetailright {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.maincomment {
display: flex;
flex: 1;
flex-direction: row;
}
.commentdetailcontent {
display: flex;
flex-direction: column;
}
.commentusername {
width: fit-content;
height: 18px;
font-family: PingFangSC;
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
color: #b1aeb2;
}
.commentusercontent {
font-family: PingFangSC;
font-size: 13px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
margin: 4px 0 10px;
color: #000;
}
.date-reply {
height: 17px;
display: flex;
align-items: center;
gap: 8px;
}
.date-text,
.replytext {
display: flex;
align-items: center;
height: 17px;
line-height: 17px;
font-size: 12px;
}
.date-text {
color: #b1aeb2;
}
.replytext {
color: #918e93;
}
.commentlike {
height: 43px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6.7px;
padding: 2px 0;
box-sizing: border-box;
}
.commentlikecount {
min-width: 40px;
height: 17px;
font-family: PingFangSC;
font-size: 12px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 17px;
letter-spacing: normal;
text-align: center;
padding: 0 4px;
color: #918e93;
}
.commentchildcontainer {
width: 100%;
display: flex;
flex-direction: column;
margin: 14px 0 0;
}
.commentchild {
display: flex;
flex-direction: row;
margin-bottom: 8px;
}
.commentchildleft {
width: 23.5px;
height: 23.5px;
margin-right: 8.2px;
}
.commentchildleft image {
width: 100%;
height: 100%;
border-radius: 50%;
}
.commentchildright {
flex: 1;
display: flex;
flex-direction: column;
}
.expandcomment {
width: 96px;
height: 17px;
display: flex;
align-items: center;
flex-direction: row;
gap: 8px;
}
.expandcommenttext {
flex: 1;
font-family: PingFangSC;
font-size: 12px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
color: #110c13;
}
.interaction {
width: 100%;
border: solid 1px #faf9fb;
background-color: #faf9fb;
display: flex;
align-items: center;
padding: 11.5px 16px;
flex-direction: row;
box-sizing: border-box;
}
.editarea {
flex: 1;
height: 40px;
background-color: #fff;
border-radius: 24px;
gap: 12px;
padding: 0 20px;
box-sizing: border-box;
display: flex;
align-items: center;
}
.editicon {
width: 13.3px;
height: 14.6px;
flex-shrink: 0;
align-self: center;
}
.edittext {
flex: 1;
flex-grow: 0;
font-family: PingFangSC;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 40px;
letter-spacing: normal;
text-align: left;
color: #918e93;
white-space: nowrap;
}
.collection,
.like {
height: 40px;
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
}
.collectionicon,
.likeicon {
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
}
.collectioncount,
.likecount {
height: 17px;
font-family: SFPro;
font-size: 17px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
color: #000;
}
</style>

7
src/pages/index/index.vue
View File

@@ -3,7 +3,8 @@
<!-- 内容区 -->
<view class="maincontent">
<!-- <Postpage /> -->
<Videopage />
<!-- <Videopage /> -->
<News />
</view>
<!-- Findmore组件 -->
@@ -15,11 +16,9 @@
<script setup>
import Postpage from '@/pages/components/postpage/postpage.vue'
import Videopage from '@/pages/components/videopage/videopage.vue';
import News from '@/pages/components/news/news.vue';
import Findmore from '@/pages/components/findmore/findmore.vue';
import { useCommonStore } from '@/stores/common.js'
const common = useCommonStore()
</script>
<style scoped>