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

changetags

Browse Source
This commit is contained in:
WanP
2025-11-03 10:53:55 +08:00
parent 5eb5c59e4b
commit c8aea3138c
4 changed files with 96 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/pages/news.vue
View File

@@ -1,76 +1,77 @@
<template>
<view v-if="loading" class="page">
<main v-if="loading" class="page">
<Head></Head>
<!-- 内容区 -->
<main class="content">
<!-- 新闻区域 -->
<section class="news">
<scroll-view>
<section class="content">
<!-- 新闻区域 -->
<section class="news">
<!-- 轮播图 -->
<swiper v-if="post.imgs && post.imgs.length > 0" :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="新闻图片"
@load="onImageLoad(i)" @error="onImageError(i)" />
<video v-else-if="item.type === 'video'" :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 v-if="item.loading" class="image-loading">
<text>图片加载中...</text>
<!-- 轮播图 -->
<swiper v-if="post.imgs && post.imgs.length > 0" :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="新闻图片"
@load="onImageLoad(i)" @error="onImageError(i)" />
<video v-else-if="item.type === 'video'" :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 v-if="item.loading" class="image-loading">
<text>图片加载中...</text>
</view>
<view v-if="item.error" class="image-error">
<text>图片加载失败</text>
</view>
</view>
<view v-if="item.error" class="image-error">
<text>图片加载失败</text>
</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">
<text class="date-text">{{ common.formatDate(post.time) }}</text>
</view>
<view class="spacerview"></view>
<view class="toseeall" @tap="handleInteraction">
<text class="toseealltext">查看全文</text>
<image src="@/static/imgs/arrowrightup/arrowrightup@3x.png" class="arrowrightupicon" mode="aspectFit"
alt="查看全文图标" />
</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">
<text class="date-text">{{ common.formatDate(post.time) }}</text>
</view>
<view class="spacerview"></view>
<view class="toseeall" @tap="handleInteraction">
<text class="toseealltext">查看全文</text>
<image src="@/static/imgs/arrowrightup/arrowrightup@3x.png" class="arrowrightupicon" mode="aspectFit"
alt="查看全文图标" />
</view>
</view>
</view>
</section>
</section>
</main>
<!-- 评论区域 + 互动区域 -->
<Comments :postid="post.id" />
<!-- 评论区域 + 互动区域 -->
<Comments :postid="post.id" />
</scroll-view>
<!-- 互动区域 -->
<!-- <Intereact :countLike="post.countLike" :collectsum="post.collectsum" /> -->
<!-- Findmore -->
<Findmore />
</view>
</main>
<!-- 错误显示 -->
<!-- <view v-else class="errorload">
@@ -234,7 +235,7 @@ page,
.page {
width: 100%;
max-width: 430px;
height: auto;
/* height: 100vh; */
display: flex;
flex-direction: column;
margin: 0 auto;

6
src/pages/post.vue
View File

@@ -1,5 +1,5 @@
<template>
<view v-if="loading" class="page">
<view v-if="finishloading" class="page">
<Head></Head>
<!-- 内容区 -->
@@ -97,7 +97,7 @@ const post = ref({})
// 播放状态
const isPlaying = ref(true) // 默认播放状态
// 资源加载状态
const loading = ref(false)
const finishloading = ref(false)
// 图片加载成功处理
const onImageLoad = (index) => {
@@ -261,7 +261,7 @@ onLoad(() => {
// post.value = data
console.log(data)
Object.assign(post.value, data)
loading.value = true
finishloading.value = true
})
} else {
// 如果没有媒体资源，设置空数组

34
src/pages/video.vue
View File

@@ -1,5 +1,5 @@
<template>
<main>
<main v-if="finishloading">
<!-- 视频容器 -->
@@ -87,6 +87,10 @@
<!-- Findmore -->
<!-- <Findmore /> -->
<view v-else class="loading-container">
<text>页面加载中...</text>
</view>
</template>
<script setup>
@@ -104,6 +108,9 @@ const formatDate = common.formatDate
const videoData = reactive({})
// 资源加载状态
const finishloading = ref(false)
// 折叠展开状态
const isExpanded = ref(false)
// const videoRef = ref(null)
@@ -268,6 +275,10 @@ onLoad(() => {
data.likesum = data.likeCount || 0
data.commentsum = data.commentCount || 0
data.sharesum = data.shareCount || 0
// 标记资源加载完成
finishloading.value = true
// 最后用data覆盖整个videoData
Object.assign(videoData, data)
@@ -304,9 +315,10 @@ onLoad(() => {
main {
display: flex;
flex-direction: column;
position: relative;
/* position: relative; */
max-width: 430px;
max-height: 980px;
height: 100vh;
/* max-height: 980px; */
margin: 0 auto;
}
@@ -320,8 +332,9 @@ main {
position: relative;
width: 100%;
max-width: 430px;
height: 100vh;
max-height: 980px;
height: 100%;
/* height: 100vh; */
/* max-height: 980px; */
flex-shrink: 0;
margin: 0 auto;
display: flex;
@@ -330,9 +343,9 @@ main {
video {
width: 100%;
height: 100%;
/* height: 100%; */
min-height: 680px;
object-fit: cover;
object-fit: contain;
display: flex;
flex-direction: column;
margin: 0 auto;
@@ -572,4 +585,11 @@ video {
.uni-video-cover-play-button::after {
content: '\ea24';
}
.loading-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>

15
src/stores/common.js
View File

@@ -2,6 +2,9 @@ import { defineStore } from 'pinia'
export const useCommonStore = defineStore('common', () => {
// 全局加载状态
// const finishloading = ref(false)
/* 提示类公共函数-后期替换为跳转应用或下载链接 */
const download = () => uni.showToast({ title: 'downloadapp', icon: 'none' })
const openapp = () => uni.showToast({ title: '打开APP', icon: 'none' })
@@ -41,12 +44,12 @@ export const useCommonStore = defineStore('common', () => {
if (atUsers && atUsers.length > 0) {
const nodes = []
let remainingContent = content
// 为每个@用户创建高亮节点
atUsers.forEach(user => {
const atText = `@${user}`
const atIndex = remainingContent.indexOf(atText)
if (atIndex !== -1) {
// 添加@前面的普通文本
if (atIndex > 0) {
@@ -55,7 +58,7 @@ export const useCommonStore = defineStore('common', () => {
text: remainingContent.substring(0, atIndex)
})
}
// 添加@高亮节点
nodes.push({
type: 'node',
@@ -63,12 +66,12 @@ export const useCommonStore = defineStore('common', () => {
attrs: { style: 'color:#0969DA;', 'data-name': user },
children: [{ type: 'text', text: atText }]
})
// 更新剩余内容
remainingContent = remainingContent.substring(atIndex + atText.length)
}
})
// 添加剩余文本
if (remainingContent) {
nodes.push({
@@ -76,7 +79,7 @@ export const useCommonStore = defineStore('common', () => {
text: remainingContent
})
}
return nodes
}