gdxz/uniapp-app
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

12.10提交

Browse Source
This commit is contained in:
zoujiandong
2025-12-10 17:33:39 +08:00
parent 22104881f1
commit c86aa03f01
28 changed files with 3237 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages_app/videoDetail/videoDetail.vue
+226 -40
View File
@@ -11,7 +11,7 @@
>
<template #right>
<view class="nav-actions" v-if="from != 'download'">
<view class="collect-img" @click="shareToggle">
<view class="collect-img" @click="shareToggle" style="margin-right: 20rpx;">
<image class="share-img-icon" :src="shareIcon" mode="aspectFill" />
</view>
<view class="collect-img" @click="toCollection">
@@ -26,16 +26,17 @@
</uni-nav-bar>
</view>
<!-- <video
v-if="showVideo && !isAndroid"
<video
v-if="showVideo"
class="player-wrapper"
:style="{width: videoWidth + 'px'}"
:src="videoSrc"
controls
object-fit="contain"
:autoplay="false"
></video> -->
<sunny-video
@error="onVideoError"
></video>
<!-- <sunny-video
v-if="showVideo"
class="player-wrapper"
:src="videoSrc"
@@ -43,7 +44,7 @@
:videoWidth="videoWidth"
:seekTime="0"
@fullscreenchange="onFullscreenChange"
/>
/> -->
<!-- 标签切换 -->
<cover-view class="tabs" v-if="from != 'download'" :style="{ opacity:isFullScreen?0:1, width: videoWidth + 'px' }" >
@@ -62,7 +63,9 @@
>
评论
<cover-view class="tab-line" v-if="activeTab === 'comment'"></cover-view>
</cover-view>
<cover-view class="line"></cover-view>
</cover-view>
<view class="video-detail-page" v-if="from != 'download'">
<!-- <scroll-view
@@ -97,7 +100,7 @@
<view class="content">{{ c.content }}</view>
<view class="time">{{ c.time }}</view>
<view v-if="c.children && c.children.length" class="child-list">
<view class="child-item" v-for="(r, i) in c.children" :key="i">
<view class="child-item" v-for="(r, i) in getVisibleChildren(c)" :key="i">
<image
class="avatar small"
:src="r.avatar"
@@ -109,9 +112,19 @@
<view class="time">{{ r.time }}</view>
</view>
</view>
<view
class="toggle-children"
v-if="c.children.length > 3"
@click="toggleChildren(c)"
>
{{ c.showAllChildren ? "--收起" : "--展开更多回复" }}
</view>
</view>
</view>
<view class="reply-btn" @click="onReply(c)">回复</view>
<uni-icons type="trash" size="30" color="#8b2316" @click="onDelete(c)" v-if="current_user_id==c.user_uuid"></uni-icons>
<!-- <view class="reply-btn" @click="onReply(c)"v-if="current_user_id==c.user_uuid">删除</view> -->
<view class="reply-btn" @click="onReply(c)" v-else>回复</view>
</view>
<!-- 加载状态/没有更多 -->
<view v-if="loading" class="list-loading">加载中...</view>
@@ -124,7 +137,7 @@
</view>
</view>
<!-- 底部区域：信息页为下载条，评论页为上传图片+输入+发送 -->
<!-- 底部区域：信息页为下载条，评论页为上传图片+输入+发送 -->
<view v-if="activeTab === 'info' && from != 'download'" class="bottom-download" @click="onDownload">
<text class="download-text" v-if="!hasDownload"
>点击下载<text v-if="!isVideoDownloadRecord && welfareNum <= 0"
@@ -167,6 +180,17 @@
@close="notEnoughVisible = false"
@confirm="notEnoughConfirm"
></unidialog>
<!-- 删除确认弹窗 -->
<view v-if="showDeleteModal" class="delete-modal-mask" @click="closeDeleteModal">
<view class="delete-modal-content" @click.stop>
<view class="delete-modal-title">确认删除</view>
<view class="delete-modal-text">确定要删除这条评论吗？</view>
<view class="delete-modal-buttons">
<view class="delete-modal-btn cancel-btn" @click="closeDeleteModal">取消</view>
<view class="delete-modal-btn confirm-btn" @click="confirmDelete">删除</view>
</view>
</view>
</view>
<!-- 分享弹窗 -->
<uni-popup ref="shareRef" type="bottom" safeArea backgroundColor="#fff">
<view class="share-popup">
@@ -200,7 +224,7 @@
<script setup>
import { ref, nextTick } from "vue";
import uniVideo from "@/components/uniVideo/uniVideo.vue";
//import uniVideo from "@/components/uniVideo/uniVideo.vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import unidialog from "@/components/dialog/dialog.vue";
import collectImg from "@/static/icon_book_collect_sel.png";
@@ -211,6 +235,7 @@ import wxImg from "@/static/share_weixin.png";
import friendImg from "@/static/share_wxc.png";
import logoImg from "@/static/weiboShare.png";
import isAndroid from "@/utils/platform.js";
import avastarImg from "@/static/avastar.png";
import api from "@/api/api";
import docUrl from "@/utils/docUrl";
import navTo from "@/utils/navTo";
@@ -225,6 +250,9 @@ const pointContent = ref("");
const notEnoughVisible = ref(false);
const notEnoughContent = ref("");
const welfareNum = ref(0);
// 删除弹窗相关
const showDeleteModal = ref(false);
const currentDeleteItem = ref(null);
const showVideo = ref(false);
const videoWidth = ref(375);
const hasDownload = ref(false);
@@ -233,11 +261,14 @@ let downList = uni.getStorageSync("downLoadVideo") || [];
const downLoadList = ref(downList);
const isFullScreen = ref(false);
//import DomVideoPlayer from 'uniapp-video-player'
import sunnyVideo from "@/uni_modules/sunny-video/components/sunny-video/sunny-video.vue";
//import sunnyVideo from "@/uni_modules/sunny-video/components/sunny-video/sunny-video.vue";
import downloadStore from "@/store/downloadStoreVideo.js";
const downloadTasks = ref([]);
let userInfo = uni.getStorageSync("userInfo");
const current_user_id = ref(userInfo.uuid);
// 添加下载任务
const addDownloadTask = (item) => {
// 使用store添加任务
const taskIndex = downloadStore.addTask(item);
// 同步任务列表
@@ -256,6 +287,7 @@ const startDownload = (index) => {
const taskItem = downloadStore.getTask(index);
if (!taskItem) return;
hasDownload.value = true;
isVideoDownloadRecord.value=true;
downLoadStatus.value = 'loading';
const task = uni.downloadFile({
url: taskItem.url,
@@ -339,9 +371,14 @@ const syncTasksFromStore = () => {
const notEnoughConfirm = () => {
notEnoughVisible.value = false;
navTo({
url: "/pages_app/buyPoint/buyPoint",
uni.sendNativeEvent('buyPointPage', {
msg: 'buyPointPage'
},ret => {
console.log(ret);
});
// navTo({
// url: "/pages_app/buyPoint/buyPoint",
// });
};
const pointConfirm = () => {
pointVisible.value = false;
@@ -377,12 +414,6 @@ const onLoadedmetadata = (e) => {
showCancel: false,
});
};
const onVideoError = (e) => {
uni.showModal({
content: JSON.stringify(e),
showCancel: false,
});
};
// 接收页面参数
const pageParams = ref({});
const useWelfareNum = async () => {
@@ -402,6 +433,13 @@ const useWelfareNum = async () => {
});
}
};
const onVideoError = (e) => {
// uni.showToast({
// title: "视频加载失败",
// icon: "none",
// });
videoSrc.value= videoSrc.value.replace('.mp4', '.m3u8');
};
const videoDetail = async () => {
const res = await api.videoDetail({ video_uuid: video_uuid.value });
if (res.code == 200) {
@@ -409,13 +447,16 @@ const videoDetail = async () => {
videoInfo.value = res.video;
//hasDownload.value = downLoadList.value.includes(video_uuid.value);
let vid = res.video.polyv_uuid;
let vid =res.video.polyv_uuid || extractPolyvVid(res.video.content);
console.log(222222);
console.log(vid);
let uuid = vid.substring(0, 10);
let index = vid.lastIndexOf("_");
let f = vid.substring(index - 1, index);
let id = vid.substring(0, index + 1);
//videoSrc.value = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4';
videoSrc.value = `http://mpv.videocc.net/${uuid}/${f}/${id}1.mp4`;
console.log(videoSrc.value);
showVideo.value = true;
shareLink.value =
otherHost +
@@ -487,7 +528,7 @@ const videoCommentListV2 = async () => {
});
if (res && res.code == 200 && Array.isArray(res.data)) {
const mapped = res.data.map(mapComment);
commentList.value = mapped.reverse();
commentList.value = mapped;
noMore.value = true;
} else {
noMore.value = true;
@@ -528,6 +569,7 @@ onShow(() => {
console.log('runing');
console.log(downloadTasks.value[i].status);
hasDownload.value = true;
isVideoDownloadRecord.value=true;
if(downloadTasks.value[i].status == 'completed') {
downLoadStatus.value = 'completed';
}else if(downloadTasks.value[i].status == 'downloading') {
@@ -535,13 +577,10 @@ onShow(() => {
title: '视频缓存中',
icon: 'none',
});
hasDownload.value = true;
downLoadStatus.value = 'loading';
}else if(downloadTasks.value[i].status == 'paused') {
hasDownload.value = true;
downLoadStatus.value = 'loading';
}else if(downloadTasks.value[i].status == 'failed') {
hasDownload.value = true;
downLoadStatus.value = 'loading';
}
}
@@ -789,6 +828,7 @@ const switchTab = (tab) => {
};
const payVideoDownload = async () => {
const res = await api.payVideoDownload({ video_uuid: video_uuid.value });
console.log(res);
if (res.code == 200) {
addDownloadTask({
url: videoSrc.value,
@@ -805,9 +845,13 @@ const payVideoDownload = async () => {
};
const onDownload = () => {
if(videoSrc.value.includes('.m3u8')) {
uni.showToast({ title: "该视频不支持下载", icon: "none" });
return;
}
if (!isVideoDownloadRecord.value) {
if(welfareNum.value <= 0) {
pointContent.value = `当前需要${videoInfo.value.point}积分兑换，若删除可以再次缓存`;
pointContent.value = `该视频需要${videoInfo.value.point}积分兑换，若删除，可以再次免费缓存`;
uni.getNetworkType({
success: function (res) {
if (res.networkType != "none") {
@@ -834,9 +878,15 @@ const onDownload = () => {
} else {
if (hasDownload.value) {
navTo({
url: "/pages_app/downLoadVideo/downLoadVideo",
});
if(downLoadStatus.value == 'completed') {
navTo({
url: "/pages_app/downLoadVideo/downLoadVideo",
});
} else {
navTo({
url: "/pages_app/downLoadVideo/downLoadVideo?type=2",
});
}
} else {
addDownloadTask({
url: videoSrc.value,
@@ -865,6 +915,12 @@ const addCommentV2 = async () => {
}
};
const onReply = (c) => {
console.log('onReply');
console.log(c);
if(!c.user_uuid){
uni.showToast({ title: "该评论无法回复", icon: "none" });
return;
}
navTo({
url:
"/pages_app/reply/reply?comment_partent=" +
@@ -875,6 +931,15 @@ const onReply = (c) => {
video_uuid.value,
});
};
const extractPolyvVid = (htmlStr) => {
const vidRegex = /["']?vid["']?\s*:\s*["']([^"']+)["']/i;
// 执行匹配
const match = htmlStr.match(vidRegex);
// 直接返回第一个分组（vid值），无匹配则返回null
return match ? match[1] : null;
}
// 评论输入
const commentText = ref("");
@@ -886,28 +951,66 @@ const sendComment = () => {
addCommentV2();
};
// 子评论展开收起
const getVisibleChildren = (comment) => {
if (!comment.children || !comment.children.length) return [];
return comment.showAllChildren ? comment.children : comment.children.slice(0, 3);
};
const toggleChildren = (comment) => {
comment.showAllChildren = !comment.showAllChildren;
// 触发视图更新
commentList.value = [...commentList.value];
};
// 上拉加载
const page = ref(1);
const pageSize = ref(10);
const loading = ref(false);
const noMore = ref(false);
const onDelete = (c) => {
currentDeleteItem.value = c;
showDeleteModal.value = true;
};
// 关闭删除弹窗
const closeDeleteModal = () => {
showDeleteModal.value = false;
currentDeleteItem.value = null;
};
// 确认删除
const confirmDelete = async () => {
console.log(currentDeleteItem.value);
if (!currentDeleteItem.value) return;
const res = await api.deleteComment({
uuid: currentDeleteItem.value.comment_uuid,
});
if (res.code == 200) {
uni.showToast({ title: "删除成功", icon: "none" });
videoCommentListV2();
closeDeleteModal();
}
};
const onScrollToLower = async () => {
if (activeTab.value !== "comment" || loading.value || noMore.value) return;
// 如需分页，可在此按页码调用接口并 push 结果
};
const toFullUrl = (p) => {
if (!p) return "/static/icon_home_my_public.png";
if (!p) return avastarImg;
return p.startsWith("http") ? p : docUrl + p;
};
const mapComment = (item) => {
return {
avatar: toFullUrl(item.photo || ""),
name: item.name || "匿名",
name: item.name || "账号已注销",
content: item.content || "",
time: item.create_date || "",
user_uuid: item.user_uuid || "",
comment_uuid: item.comment_uuid || "",
showAllChildren: false,
children: Array.isArray(item.childs) ? item.childs.map(mapComment) : [],
};
};
@@ -920,9 +1023,6 @@ $bg-color: #f7f7f7;
$text-primary: #333;
$text-secondary: #666;
$theme-color: #8b2316;
.collect-img {
/* margin-top:50rpx; */
}
.navbox {
:deep(.uni-navbar__header-btns-right) {
width: 100px !important;
@@ -943,11 +1043,11 @@ $theme-color: #8b2316;
.nav-actions {
display: flex;
align-items: center;
gap: 20rpx;
}
.video-detail-page {
border-top: 2rpx solid #cccccc;
background: $bg-color;
overflow: hidden;
}
@@ -979,8 +1079,15 @@ $theme-color: #8b2316;
width: 100%;
z-index: 99;
z-index: 66;
.line{
position: absolute;
height:2rpx;
bottom:0;
background: #cccccc;
width: 100%;
z-index:999;
}
.tab {
width: 120rpx;
position: relative;
@@ -1037,7 +1144,7 @@ $theme-color: #8b2316;
}
.intro {
// background: #fff;
padding: 40rpx 28rpx 100rpx;
padding: 60rpx 28rpx 100rpx;
// margin-top: calc(var(--status-bar-height) + 44px + 220px + 88rpx);
// height: calc(100vh - var(--status-bar-height) - 44px - 220px - 88rpx);
// overflow-y: scroll;
@@ -1082,7 +1189,7 @@ $theme-color: #8b2316;
// height: calc(100vh - var(--status-bar-height) - 44px - 220px - 88rpx);
// overflow-y: scroll;
// padding-bottom: 100rpx;
padding: 20rpx 20rpx 40rpx;
padding: 60rpx 20rpx 40rpx;
.empty {
text-align: center;
@@ -1161,6 +1268,11 @@ $theme-color: #8b2316;
border-radius: 12rpx;
margin-right: 16rpx;
}
.toggle-children {
color: #8b2316;
font-size: 26rpx;
margin-top: 12rpx;
}
}
.bottom-spacer {
@@ -1184,7 +1296,7 @@ $theme-color: #8b2316;
}
.download-text {
color: #fff;
font-size: 30rpx;
font-size: 32rpx;
}
}
@@ -1303,4 +1415,78 @@ $theme-color: #8b2316;
.share-cancel:active {
background-color: #f5f5f5;
}
// 删除确认弹窗
.delete-modal-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.delete-modal-content {
width: 600rpx;
background-color: #fff;
border-radius: 24rpx;
padding: 60rpx 40rpx 40rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
}
.delete-modal-title {
font-size: 36rpx;
font-weight: 600;
color: #333;
text-align: center;
margin-bottom: 30rpx;
}
.delete-modal-text {
font-size: 28rpx;
color: #666;
text-align: center;
line-height: 1.6;
margin-bottom: 50rpx;
word-break: break-all;
}
.delete-modal-buttons {
display: flex;
gap: 20rpx;
}
.delete-modal-btn {
flex: 1;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12rpx;
font-size: 32rpx;
font-weight: 500;
transition: all 0.3s ease;
}
.cancel-btn {
background-color: #f5f5f5;
color: #333;
&:active {
background-color: #e0e0e0;
}
}
.confirm-btn {
background-color: #8b2316;
color: #fff;
&:active {
background-color: #6b1a0f;
}
}
</style>