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

addapi

Browse Source
This commit is contained in:
WanP
2025-10-27 15:03:40 +08:00
parent 45ceb9c77d
commit 5eb5c59e4b
18 changed files with 1340 additions and 636 deletions
Download Patch File Download Diff File Expand all files Collapse all files

499
src/pages/video.vue
View File

@@ -1,191 +1,152 @@
<template>
<view class="videopage">
<main>
<Head></Head>
<video id="videoid" ref="videoRef" :src="videoData.videoUrl" :danmu-list="videoData.danmuList" enable-danmu loop
:muted="isMuted" :show-mute-btn="true" :controls="false" object-fit="contain" @tap="pausevideo"></video>
<!-- 播放按钮 - 使用浏览器复制的样式 -->
<view v-if="!isPlaying" class="uni-video-cover" @tap="pausevideo">
<view class="uni-video-cover-play-button uni-video-icon"></view>
</view>
<!-- 视频容器 -->
<section class="video-container">
<!-- 视频信息 -->
<view class="videoinfo">
<view class="vedioinfohead">
<text class="username">@{{ videoData.userName }}</text>
<text class="datetime">{{ formatDate(videoData.date) }}</text>
</view>
<Head></Head>
<view class="content-container">
<text class="content" :class="{ 'expanded': isExpanded }">{{ videoData.copywriting }}</text>
<view class="flodbtncontainer">
<image v-if="videoData.copywriting.length > 30" class="expand-btn" :class="{ 'rotated': isExpanded }"
:src="isExpanded ? '/static/imgs/foldicon/flodicon@3x.webp' : '/static/imgs/foldicon/flodicon@3x.webp'"
mode="aspectFit" @tap="toggleExpand"></image>
<video id="videoid" :src="videoData.videoUrl" :danmu-list="videoData.danmuList" enable-danmu loop :muted="isMuted"
:show-mute-btn="true" :controls="false" object-fit="contain" @tap="pausevideo">
<!-- 播放按钮 - 直接使用浏览器复制的样式 -->
<section v-if="!isPlaying" class="uni-video-cover" @tap="pausevideo">
<view class="uni-video-cover-play-button uni-video-icon"></view>
</section>
</video>
<!-- 右侧交互按钮 -->
<view class="interaction-panel">
<!-- 头像+关注 -->
<view class="user-section">
<image :src="videoData.userImg" class="user-avatar" mode="aspectFill"></image>
<view class="follow-btn-container" @tap="() => handleInteraction('follow')">
<image src="/static/imgs/followbtn/btn@3x.webp" mode="aspectFit" style="height: 24px;"></image>
</view>
</view>
</view>
</view>
<!-- 右侧交互按钮 -->
<view class="interaction-panel">
<!-- 头像+关注 -->
<view class="user-section">
<image :src="videoData.userImg" class="user-avatar" mode="aspectFill"></image>
<view class="follow-btn-container" @tap="() => handleInteraction('follow')">
<image src="/static/imgs/followbtn/btn@3x.webp" mode="aspectFit"></image>
<!-- 点赞按钮 -->
<view class="action-btn" @tap="() => handleInteraction('like')">
<image src="/static/imgs/likeicon2/icon-2@3x.webp" class="action-icon" mode="aspectFit"></image>
<text class="action-count">{{ formatCount(videoData.likesum) }}</text>
</view>
<!-- 评论按钮 -->
<view class="action-btn" @tap="() => handleInteraction('comment')">
<image src="/static/imgs/commenticon/icon-2@3x.webp" class="action-icon" mode="aspectFit"></image>
<text class="action-count">{{ formatCount(videoData.commentsum) }}</text>
</view>
<!-- 分享按钮 -->
<view class="action-btn" @tap="() => handleInteraction('share')">
<image src="/static/imgs/shareicon/icon-2@3x.webp" class="action-icon" mode="aspectFit"></image>
<text class="action-count">{{ formatCount(videoData.sharesum) }}</text>
</view>
<!-- 静音按钮 -->
<image :src="isMuted ? '/static/imgs/mutebtn/mutebtn@3x.webp' : '/static/imgs/unmutebtn/unmutebtn@3x.webp'"
class="mutebtn" mode="aspectFit" @tap="toggleMute"></image>
</view>
<!-- 点赞按钮 -->
<view class="action-btn" @tap="() => handleInteraction('like')">
<image src="/static/imgs/likeicon2/icon-2@3x.webp" class="action-icon" mode="aspectFit"></image>
<text class="action-count">{{ formatCount(videoData.likesum) }}</text>
</view>
<!-- 视频信息 -->
<section class="videoinfo">
<view class="vedioinfohead" @tap="() => handleInteraction('user')">
<text class="username">{{ '@' + videoData.userName }}</text>
<time class="datetime">{{ formatDate(videoData.date) }}</time>
</view>
<!-- 评论按钮 -->
<view class="action-btn" @tap="() => handleInteraction('comment')">
<image src="/static/imgs/commenticon/icon-2@3x.webp" class="action-icon" mode="aspectFit"></image>
<text class="action-count">{{ formatCount(videoData.commentsum) }}</text>
</view>
<view class="content-container">
<text class="content" :class="{ 'expanded': isExpanded }">{{ isExpanded ? videoData.copywriting :
truncatedText }}</text>
<view class="flodbtncontainer">
<image v-if="showExpandButton" class="expand-btn" :class="{ 'rotated': isExpanded }"
:src="isExpanded ? '/static/imgs/foldicon/flodicon@3x.webp' : '/static/imgs/expandicon/expandicon@3x.webp'"
mode="aspectFit" @tap="toggleExpand"></image>
</view>
</view>
</section>
<!-- 分享按钮 -->
<view class="action-btn" @tap="() => handleInteraction('share')">
<image src="/static/imgs/shareicon/icon-2@3x.webp" class="action-icon" mode="aspectFit"></image>
<text class="action-count">{{ formatCount(videoData.sharesum) }}</text>
</view>
</section>
<!-- 静音按钮 -->
<image :src="isMuted ? '/static/imgs/mutebtn/mutebtn@3x.webp' : '/static/imgs/unmutebtn/unmutebtn@3x.webp'"
class="mutebtn" mode="aspectFit" @tap="toggleMute"></image>
</view>
</view>
<!-- 评论区域 + 互动区域 -->
<Comments :comments="videoData.comments" :showInteraction="true" :collectsum="videoData.collectsum"
:likesum="videoData.likesum" />
<!-- 评论区域 + 互动区域 -->
<Comments :postid="videoData.id" />
<view class="spacerview"></view>
<!-- 互动区域 -->
<!-- <Intereact /> -->
</main>
<!-- Findmore -->
<Findmore />
<!-- <Findmore /> -->
</template>
<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { ref, reactive, getCurrentInstance, computed } from 'vue'
import { useCommonStore } from '@/stores/common.js'
import Head from '@/pages/head/head.vue'
import Comments from '@/pages/comments/comments.vue'
import Findmore from '@/pages/findmore/findmore.vue'
import Intereact from '@/pages/intereact/intereact.vue'
import { getPostList, getPostVideo, getUserImg } from '@/api/api.js'
const common = useCommonStore()
const formatCount = common.formatCount
const formatDate = common.formatDate
const videoData = reactive({})
// 折叠展开状态
const isExpanded = ref(false)
const videoRef = ref(null)
// const videoRef = ref(null)
// 静音状态
const isMuted = ref(false)
// 播放状态
const isPlaying = ref(true) // 默认播放状态
// 视频数据（包含弹幕）
const videoData = reactive({
userId: 1000012,
userName: '蔡徐坤',
userImg: '/static/logo.png',
date: '2024-01-15',
copywriting: '鸡你太美！练习时长两年半的个人练习生!鸡你太美！练习时长两年半的个人练习生!鸡你太美！练习时长两年半的个人练习生!',
likesum: 1145140,
collectsum: 114514,
commentsum: 114514,
sharesum: 1145,
videoUrl: '/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: []
// 计算属性：是否需要显示展开按钮
const showExpandButton = computed(() => {
if (!videoData.copywriting) return false
// 考虑中文字符，每个中文字符算2个字符宽度
const textLength = videoData.copywriting.replace(/[^\x00-\xff]/g, '**').length
return textLength > 30
})
// 计算属性：截断后的文本
const truncatedText = computed(() => {
if (!videoData.copywriting) return ''
if (!showExpandButton.value) return videoData.copywriting
// 智能截断，保留完整的中文字符
let result = ''
let charCount = 0
for (let i = 0; i < videoData.copywriting.length; i++) {
const char = videoData.copywriting[i]
// 中文字符算2个字符，其他算1个
charCount += /[^\x00-\xff]/.test(char) ? 2 : 1
if (charCount <= 30) {
result += char
} else {
break
}
],
danmuList: [
{ text: '鸡你太美！', color: '#FFFFFF', time: 1 },
{ text: '练习时长两年半', color: '#FF0000', time: 1 },
{ text: '个人练习生', color: '#00FF00', time: 1 },
{ text: '坤坤加油！', color: '#FFFF00', time: 3 },
{ text: '篮球高手', color: '#FFA500', time: 3 },
{ text: '坤坤跳舞真帅', color: '#FF69B4', time: 5 },
{ text: '这舞步绝了', color: '#00FFFF', time: 5 },
{ text: '音乐太洗脑了', color: '#FFD700', time: 7 },
{ text: '坤坤我爱你', color: '#FF1493', time: 7 },
{ text: '练习生之光', color: '#7CFC00', time: 9 },
{ text: '这节奏太上头', color: '#FF6347', time: 9 },
{ text: '坤坤的招牌动作', color: '#9370DB', time: 11 },
{ text: '鸡你太美循环中', color: '#20B2AA', time: 11 },
{ text: '两年半的功力', color: '#FF4500', time: 13 },
{ text: '坤坤的舞姿', color: '#DA70D6', time: 13 },
{ text: '这歌太魔性了', color: '#32CD32', time: 15 },
{ text: '练习生天花板', color: '#FF8C00', time: 15 },
{ text: '坤坤的台风', color: '#00BFFF', time: 17 },
{ text: '鸡你太美经典', color: '#FF00FF', time: 17 },
{ text: '坤坤的舞台魅力', color: '#FFDAB9', time: 19 },
{ text: '这舞步太经典', color: '#98FB98', time: 19 },
{ text: '坤坤的招牌笑容', color: '#FFB6C1', time: 21 },
{ text: '练习生传奇', color: '#87CEFA', time: 21 },
{ text: '坤坤的舞蹈功底', color: '#FFA07A', time: 23 },
{ text: '坤坤太帅了', color: '#FF1493', time: 25 },
{ text: '这舞步太丝滑', color: '#00CED1', time: 25 },
{ text: '坤坤的节奏感', color: '#FF69B4', time: 27 },
{ text: '鸡你太美神曲', color: '#32CD32', time: 27 },
{ text: '坤坤的舞台表现', color: '#FF4500', time: 29 },
{ text: '这舞蹈太经典', color: '#9370DB', time: 29 },
{ text: '坤坤的粉丝来了', color: '#FFD700', time: 2 },
{ text: '鸡你太美循环播放', color: '#00BFFF', time: 4 },
{ text: '坤坤的舞蹈功底', color: '#FF6347', time: 6 },
{ text: '这歌太魔性了', color: '#20B2AA', time: 8 },
{ text: '坤坤的招牌动作', color: '#FF8C00', time: 10 },
{ text: '练习时长两年半', color: '#FF00FF', time: 12 },
{ text: '坤坤的舞台魅力', color: '#98FB98', time: 14 },
{ text: '鸡你太美经典', color: '#FFB6C1', time: 16 },
{ text: '坤坤的舞姿', color: '#87CEFA', time: 18 },
{ text: '这节奏太上头', color: '#FFA07A', time: 20 },
{ text: '坤坤的台风', color: '#FF1493', time: 22 },
{ text: '鸡你太美神曲', color: '#00CED1', time: 24 },
{ text: '坤坤的舞蹈功底', color: '#FF69B4', time: 26 },
{ text: '这舞步太丝滑', color: '#32CD32', time: 28 },
{ text: '坤坤太帅了', color: '#FF4500', time: 30 }
]
}
// 如果截断后的文本和原文本相同，不需要加省略号
if (result === videoData.copywriting) {
return result
}
return result + '...'
})
// 切换展开状态
@@ -226,30 +187,163 @@ const toggleMute = () => {
}
}
onLoad(() => {
const params = 'video_only'
getPostList(params).then(res => {
try {
// 检查响应状态
if (res.statusCode === 200 && res.data) {
const data = res.data.data
console.log('视频数据:', data)
// 创建Promise数组来处理异步资源
const resourcePromises = []
// 处理视频资源 - 直接取第一个视频
if (data.videos && Array.isArray(data.videos) && data.videos.length > 0) {
const video = data.videos[0] // 直接取第一个视频
resourcePromises.push(getPostVideo(video.original_url).then(videoRes => {
if (videoRes.statusCode === 200 && videoRes.data) {
// 使用uni.arrayBufferToBase64方法，参考post.vue的实现
const base64 = uni.arrayBufferToBase64(videoRes.data)
const videoUrl = 'data:video/mp4;base64,' + base64
return {
type: 'video',
src: videoUrl,
original_url: video.original_url,
loading: true,
error: false
}
}
return null
}).catch(error => {
console.warn('获取视频失败:', error)
uni.showToast({
title: '视频加载失败',
icon: 'error'
})
return null
}))
}
// 处理用户头像
if (data.user && data.user.avatar) {
resourcePromises.push(getUserImg(data.user.avatar).then(avatarRes => {
if (avatarRes.statusCode === 200 && avatarRes.data) {
// 将arrayBuffer转换为base64
const base64 = uni.arrayBufferToBase64(avatarRes.data)
const userImgUrl = 'data:image/webp;base64,' + base64
return {
type: 'avatar',
url: userImgUrl
}
}
return null
}).catch(error => {
console.warn('获取用户头像失败:', error)
return null
}))
}
// 等待所有资源加载完成
Promise.all(resourcePromises).then(results => {
// 处理视频结果
const videoResults = results.filter(result => result && result.type === 'video')
if (videoResults.length > 0) {
// 使用第一个视频作为主视频
const mainVideo = videoResults[0]
videoData.videoUrl = mainVideo.src
}
// 处理头像结果
const avatarResult = results.find(result => result && result.type === 'avatar')
if (avatarResult) {
videoData.userImg = avatarResult.url
}
// 更新视频数据 - 沿用data对象
data.userName = data.user?.nickName || '匿名用户'
data.date = data.time || data.date || ''
data.copywriting = data.textContent || ''
data.likesum = data.likeCount || 0
data.commentsum = data.commentCount || 0
data.sharesum = data.shareCount || 0
// 最后用data覆盖整个videoData
Object.assign(videoData, data)
}).catch(error => {
console.error('资源加载失败:', error)
uni.showToast({
title: '资源加载失败',
icon: 'error'
})
})
} else {
throw new Error(`请求失败: ${res.statusCode}`)
}
} catch (error) {
console.error('获取视频数据失败:', error)
uni.showToast({
title: '加载视频失败',
icon: 'error'
})
}
}).catch(error => {
console.error('获取视频列表失败:', error)
uni.showToast({
title: '网络连接异常',
icon: 'error'
})
})
})
</script>
<style scoped>
.videopage {
main {
display: flex;
flex-direction: column;
position: relative;
max-width: 430px;
max-height: 980px;
margin: 0 auto;
}
.spacerview {
flex: 1;
pointer-events: none
}
/* 视频容器 */
.video-container {
position: relative;
width: 100%;
max-width: 430px;
height: 100vh;
max-height: 980px;
flex-shrink: 0;
margin: 0 auto;
display: flex;
flex-direction: column;
}
video {
width: 100%;
height: 100%;
min-height: 680px;
object-fit: cover;
display: flex;
flex-direction: column;
margin: 0 auto;
position: relative;
}
.videopage video {
width: 100%;
max-width: 430px;
height: 100%;
min-height: 680px;
max-height: 980px;
object-fit: cover;
z-index: 0;
flex: 1;
}
::v-deep .uni-video-cover {
background-color: transparent;
cursor: pointer;
z-index: 1;
}
::v-deep .uni-video-cover-play-button {
@@ -258,12 +352,13 @@ const toggleMute = () => {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1;
}
/* 弹幕区域 */
::v-deep .uni-video-danmu {
height: 15% !important;
z-index: 2;
margin: 32px 0 0;
}
@@ -277,6 +372,7 @@ const toggleMute = () => {
align-items: center;
gap: 16px;
z-index: 2;
pointer-events: auto;
}
/* 用户信息区域 */
@@ -321,10 +417,7 @@ const toggleMute = () => {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px;
border-radius: 8px;
transition: background-color 0.3s;
text-align: center;
}
.action-icon {
@@ -333,6 +426,11 @@ const toggleMute = () => {
}
.action-count {
width: 100%;
height: 17px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #fff;
font-weight: 600;
@@ -352,11 +450,12 @@ const toggleMute = () => {
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
gap: 8px;
z-index: 2;
}
.vedioinfohead {
@@ -365,34 +464,25 @@ const toggleMute = () => {
gap: 8px;
}
.username,
.datetime {
display: flex;
align-items: center;
height: 100%;
}
.username {
font-size: 17px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
/* font-family: 'SFPro'; */
color: #fff;
display: flex;
align-items: center;
height: 24px;
white-space: nowrap;
flex-shrink: 0;
line-height: 1;
}
.datetime {
font-size: 11px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: rgba(255, 255, 255, 0.6);
display: flex;
align-items: center;
height: 24px;
white-space: nowrap;
flex-shrink: 0;
}
.content {
@@ -460,7 +550,6 @@ const toggleMute = () => {
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1;
}
.uni-video-icon {
@@ -480,40 +569,6 @@ const toggleMute = () => {
cursor: pointer;
}
.uni-video-cover-play-button::after {
content: '\ea24';
}
.uni-video-cover {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1;
}
.uni-video-icon {
font-family: 'uni-video-icon';
text-align: center;
}
.uni-video-cover-play-button {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
line-height: 75px;
font-size: 56px;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
}
.uni-video-cover-play-button::after {
content: '\ea24';
}