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> <template>
<view v-if="loading" class="page"> <main v-if="loading" class="page">
<Head></Head> <Head></Head>
<!-- 内容区 --> <!-- 内容区 -->
<main class="content"> <scroll-view>
<!-- 新闻区域 --> <section class="content">
<section class="news"> <!-- 新闻区域 -->
<section class="news">
<!-- 轮播图 --> <!-- 轮播图 -->
<swiper v-if="post.imgs && post.imgs.length > 0" :indicator-dots="false" :autoplay="false" :interval="3000" <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"> :duration="1000" :circular="true" class="swiper-banner" @change="onChange">
<swiper-item v-for="(item, i) in post.imgs" :key="i"> <swiper-item v-for="(item, i) in post.imgs" :key="i">
<view class="swiper-center"> <view class="swiper-center">
<image v-if="item.type === 'img'" :src="item.src" class="swiper-item" mode="aspectFit" alt="新闻图片" <image v-if="item.type === 'img'" :src="item.src" class="swiper-item" mode="aspectFit" alt="新闻图片"
@load="onImageLoad(i)" @error="onImageError(i)" /> @load="onImageLoad(i)" @error="onImageError(i)" />
<video v-else-if="item.type === 'video'" :src="item.src" class="swiper-item" object-fit="contain" muted <video v-else-if="item.type === 'video'" :src="item.src" class="swiper-item" object-fit="contain" muted
style="pointer-events:none;" alt="新闻视频" /> style="pointer-events:none;" alt="新闻视频" />
<cover-view class="swiper-mask" @tap="common.openapp"> <cover-view class="swiper-mask" @tap="common.openapp">
</cover-view> </cover-view>
<!-- 图片加载状态 --> <!-- 图片加载状态 -->
<view v-if="item.loading" class="image-loading"> <view v-if="item.loading" class="image-loading">
<text>图片加载中...</text> <text>图片加载中...</text>
</view>
<view v-if="item.error" class="image-error">
<text>图片加载失败</text>
</view>
</view> </view>
<view v-if="item.error" class="image-error"> </swiper-item>
<text>图片加载失败</text> </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>
</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> </view>
</view>
</section>
</section> </section>
</main> <!-- 评论区域 + 互动区域 -->
<Comments :postid="post.id" />
<!-- 评论区域 + 互动区域 --> </scroll-view>
<Comments :postid="post.id" />
<!-- 互动区域 --> <!-- 互动区域 -->
<!-- <Intereact :countLike="post.countLike" :collectsum="post.collectsum" /> --> <!-- <Intereact :countLike="post.countLike" :collectsum="post.collectsum" /> -->
<!-- Findmore --> <!-- Findmore -->
<Findmore /> <Findmore />
</view> </main>
<!-- 错误显示 --> <!-- 错误显示 -->
<!-- <view v-else class="errorload"> <!-- <view v-else class="errorload">
@@ -234,7 +235,7 @@ page,
.page { .page {
width: 100%; width: 100%;
max-width: 430px; max-width: 430px;
height: auto; /* height: 100vh; */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 auto; margin: 0 auto;

6
src/pages/post.vue
View File

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

34
src/pages/video.vue
View File

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

3
src/stores/common.js
View File

@@ -2,6 +2,9 @@ import { defineStore } from 'pinia'
export const useCommonStore = defineStore('common', () => { export const useCommonStore = defineStore('common', () => {
// 全局加载状态
// const finishloading = ref(false)
/* 提示类公共函数-后期替换为跳转应用或下载链接 */ /* 提示类公共函数-后期替换为跳转应用或下载链接 */
const download = () => uni.showToast({ title: 'downloadapp', icon: 'none' }) const download = () => uni.showToast({ title: 'downloadapp', icon: 'none' })
const openapp = () => uni.showToast({ title: '打开APP', icon: 'none' }) const openapp = () => uni.showToast({ title: '打开APP', icon: 'none' })