1374 lines
32 KiB
Vue
1374 lines
32 KiB
Vue
<template>
|
||
<view class="video-container" @touchstart="onTouchStart" @touchend="onTouchEnd">
|
||
<video
|
||
id="video-element"
|
||
class="video-player"
|
||
:src="videoUrl"
|
||
:autoplay="autoplay"
|
||
:muted="muted"
|
||
:controls="false"
|
||
loop
|
||
object-fit="cover"
|
||
@play="onVideoPlay"
|
||
@pause="onVideoPause"
|
||
@ended="onVideoEnd"
|
||
@timeupdate="onTimeUpdate"
|
||
@loadedmetadata="onVideoReady"
|
||
@click="onVideoTap"
|
||
></video>
|
||
|
||
<!-- 顶部控制栏 -->
|
||
<view class="top-controls" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||
<view class="left-controls">
|
||
<view class="back-btn" @click="onBack">
|
||
<text class="icon-back">‹</text>
|
||
</view>
|
||
<text class="time-display">{{ currentTime }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 视频内容区域 -->
|
||
<view class="video-content" @click="onPlayPause">
|
||
<view :class="['play-indicator', isPlaying ? 'hide' : 'show']">
|
||
<text class="play-icon">▶</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部信息区域 -->
|
||
<view class="bottom-info">
|
||
<!-- 文章加载状态 -->
|
||
<view class="article-status" v-if="isLoadingArticle || articleError">
|
||
<view class="loading-indicator" v-if="isLoadingArticle">
|
||
<text class="loading-text">正在加载文章详情...</text>
|
||
</view>
|
||
<view class="error-message" v-if="articleError">
|
||
<text class="error-text">{{ articleError }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 创作者信息 -->
|
||
<view class="creator-info">
|
||
<image class="creator-avatar" :src="creatorAvatar" @click="onCreatorTap" />
|
||
<view class="creator-details">
|
||
<text class="creator-name">{{ creatorName }}</text>
|
||
<view :class="['follow-btn', isFollowing ? 'following' : '']" @click="onFollow">
|
||
{{ isFollowing ? '已关注' : '关注' }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 视频描述 -->
|
||
<view class="video-info" v-if="videoDescription">
|
||
<view :class="['video-description', isDescriptionExpanded ? 'expanded' : '']" @click="onToggleDescription">
|
||
{{ videoDescription }}
|
||
</view>
|
||
<view class="expand-toggle" @click="onToggleDescription" v-if="videoDescription.length > 50">
|
||
<text class="iconfont" :class="isDescriptionExpanded ? 'icon-xiangshang' : 'icon-xiangxia'"></text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 互动区域 -->
|
||
<view class="interaction-area">
|
||
<view class="like-section">
|
||
<view :class="['like-btn', isLiked ? 'liked' : '']" @click="onLike">
|
||
<text class="heart-icon">{{ isLiked ? '❤️' : '🤍' }}</text>
|
||
</view>
|
||
<text class="like-count">{{ likeCount }}</text>
|
||
</view>
|
||
<view class="action-buttons">
|
||
<view class="consult-btn" @click="onConsult">立即咨询</view>
|
||
<view class="action-btn" @click="onCreateSimilar">做同款</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- AI生成内容标识 -->
|
||
<view class="ai-notice">
|
||
<text class="ai-notice-text">内容由AI生成</text>
|
||
</view>
|
||
|
||
<!-- 进度条 -->
|
||
<view class="progress-bar">
|
||
<view class="progress-track">
|
||
<view class="progress-fill" :style="{ width: progress + '%' }"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 悬浮操作按钮 -->
|
||
<view class="floating-actions">
|
||
<view class="floating-btn download-btn" @click="onDownload">
|
||
<text class="floating-label">下载</text>
|
||
</view>
|
||
<view class="floating-btn share-btn" @click="onShare">
|
||
<text class="floating-label">分享</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import api from '@/api/models-api.js';
|
||
import { mapGetters } from 'vuex';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
videoUrl: 'https://jxz.uj345.cc/videos/video1.mp4',
|
||
currentTime: '00:25',
|
||
progress: 45,
|
||
isPlaying: false,
|
||
autoplay: false,
|
||
muted: false,
|
||
creatorName: '开心海浪',
|
||
creatorAvatar: '/static/images/creator-avatar.png',
|
||
isFollowing: false,
|
||
videoDescription: '女孩自然的姿势贴地快速飞行，飞向湖面，镜头跟随其后,女孩自然的姿势贴地快速飞行，飞向湖面，镜头跟随其后,女孩自然的姿势贴地快速飞行，飞向湖面，镜头跟随其后',
|
||
isDescriptionExpanded: false,
|
||
isLiked: false,
|
||
likeCount: 2778,
|
||
videoContext: null,
|
||
isVideoReady: false,
|
||
playPromise: null,
|
||
articleData: null,
|
||
isLoadingArticle: false,
|
||
articleError: null,
|
||
currentArticleId: null,
|
||
touchStartY: 0,
|
||
touchEndY: 0,
|
||
isSwipeEnabled: true,
|
||
statusBarHeight: 0,
|
||
};
|
||
},
|
||
computed: mapGetters(['chatUrl']),
|
||
onLoad(options) {
|
||
const articleId = options.id;
|
||
this.setData({
|
||
currentArticleId: articleId,
|
||
});
|
||
const sys = uni.getSystemInfoSync();
|
||
const sbh = sys.statusBarHeight;
|
||
this.statusBarHeight = (sbh && sbh > 0) ? sbh : (sys.platform === 'ios' ? 44 : 24);
|
||
if (articleId) {
|
||
console.log('开始加载文章详情，ID:', articleId);
|
||
this.loadArticleDetail(articleId);
|
||
} else {
|
||
console.log('未提供文章ID，跳过文章详情加载');
|
||
}
|
||
setTimeout(() => {
|
||
this.videoContext = uni.createVideoContext('video-element', this);
|
||
this.setData({
|
||
isVideoReady: true,
|
||
});
|
||
}, 1000);
|
||
},
|
||
onShow() {
|
||
setTimeout(() => {
|
||
if (this.videoContext && this.isVideoReady) {
|
||
this.safePlay();
|
||
}
|
||
}, 300);
|
||
},
|
||
onHide() {
|
||
if (this.videoContext && this.isVideoReady) {
|
||
this.safePause();
|
||
}
|
||
},
|
||
methods: {
|
||
sanitizeText(str) {
|
||
if (!str || typeof str !== 'string') return '';
|
||
try {
|
||
// 去除所有 HTML 标签，避免 WXML 解析原始 `<` `>` 造成语法错误
|
||
const noTags = str.replace(/<[^>]*>/g, '');
|
||
// 保险处理：将残留的尖括号转义为实体
|
||
return noTags.replace(/</g, '<').replace(/>/g, '>');
|
||
} catch (e) {
|
||
return String(str);
|
||
}
|
||
},
|
||
// 处理头像URL，添加前缀
|
||
getAvatarUrl(avatarUrl) {
|
||
if (!avatarUrl || avatarUrl === '/static/images/avatar-default.png') {
|
||
return '/static/images/avatar-default.png';
|
||
}
|
||
// 如果已经是完整URL，直接返回
|
||
if (avatarUrl.startsWith('http://') || avatarUrl.startsWith('https://')) {
|
||
return avatarUrl;
|
||
}
|
||
// 如果是相对路径，添加前缀
|
||
const prefix = 'https://uthink2025.oss-cn-shanghai.aliyuncs.com/';
|
||
// 如果URL已经以/开头，去掉开头的/
|
||
const cleanUrl = avatarUrl.startsWith('/') ? avatarUrl.substring(1) : avatarUrl;
|
||
return prefix + cleanUrl;
|
||
},
|
||
loadVideoData() {
|
||
setTimeout(() => {
|
||
this.setData({
|
||
videoUrl: '/videos/sample-video.mp4',
|
||
});
|
||
}, 500);
|
||
},
|
||
loadArticleDetail(articleId) {
|
||
console.log('loadArticleDetail 被调用，参数:', articleId);
|
||
this.setData({
|
||
isLoadingArticle: true,
|
||
articleError: null,
|
||
});
|
||
console.log('设置加载状态为 true');
|
||
api.getArticleById(articleId).then(response => {
|
||
console.log('API响应原始数据:', response);
|
||
const data = response.data || response;
|
||
console.log('文章详情数据:', data);
|
||
const rawDesc = data.prompt || data.content || data.title || data.synopsis || this.videoDescription;
|
||
const safeDesc = this.sanitizeText(rawDesc);
|
||
|
||
// 获取作者头像
|
||
const authorAvatar = this.getAvatarUrl(data.authorAvatar || data.avatar || '');
|
||
|
||
// 获取作者名称
|
||
const authorName = data.authorName || data.author || this.creatorName;
|
||
|
||
// 获取点赞数
|
||
const likeCount = data.likeCount || data.visit || this.likeCount;
|
||
|
||
this.setData({
|
||
articleData: data,
|
||
isLoadingArticle: false,
|
||
videoDescription: safeDesc,
|
||
creatorName: authorName,
|
||
creatorAvatar: authorAvatar,
|
||
videoUrl: data.videoUrl || this.videoUrl,
|
||
likeCount: likeCount,
|
||
});
|
||
console.log('页面数据更新完成，当前 articleData:', this.articleData);
|
||
console.log('当前 isLoadingArticle:', this.isLoadingArticle);
|
||
console.log('作者头像:', authorAvatar);
|
||
}).catch(error => {
|
||
console.error('文章详情获取失败:', error);
|
||
this.setData({
|
||
articleError: error.message || '获取文章详情失败',
|
||
isLoadingArticle: false,
|
||
});
|
||
console.log('错误状态设置完成，articleError:', this.articleError);
|
||
uni.showToast({
|
||
title: '获取文章详情失败',
|
||
icon: 'none',
|
||
duration: 2000,
|
||
});
|
||
});
|
||
},
|
||
onBack() {
|
||
uni.navigateBack();
|
||
},
|
||
// 下载视频
|
||
onDownload() {
|
||
if (!this.videoUrl) {
|
||
uni.showToast({
|
||
title: '视频地址不存在',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
uni.showLoading({
|
||
title: '下载中...',
|
||
mask: true
|
||
});
|
||
|
||
// 下载视频文件
|
||
uni.downloadFile({
|
||
url: this.videoUrl,
|
||
success: (res) => {
|
||
if (res.statusCode === 200) {
|
||
// 保存到相册
|
||
uni.saveVideoToPhotosAlbum({
|
||
filePath: res.tempFilePath,
|
||
success: () => {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '已保存到相册',
|
||
icon: 'success',
|
||
duration: 2000
|
||
});
|
||
},
|
||
fail: (error) => {
|
||
uni.hideLoading();
|
||
console.error('保存到相册失败:', error);
|
||
|
||
// 如果是权限问题，提示用户开启权限
|
||
if (error.errMsg.includes('auth')) {
|
||
uni.showModal({
|
||
title: '需要相册权限',
|
||
content: '请在设置中开启相册权限',
|
||
confirmText: '去设置',
|
||
success: (modalRes) => {
|
||
if (modalRes.confirm) {
|
||
uni.openSetting();
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: '保存失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '下载失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
fail: (error) => {
|
||
uni.hideLoading();
|
||
console.error('下载失败:', error);
|
||
uni.showToast({
|
||
title: '下载失败，请重试',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 分享视频
|
||
onShare() {
|
||
uni.showActionSheet({
|
||
itemList: ['分享到微信', '分享到朋友圈', '复制链接'],
|
||
success: (res) => {
|
||
if (res.tapIndex === 0) {
|
||
// 分享到微信好友
|
||
this.shareToWechat();
|
||
} else if (res.tapIndex === 1) {
|
||
// 分享到朋友圈
|
||
this.shareToMoments();
|
||
} else if (res.tapIndex === 2) {
|
||
// 复制链接
|
||
this.copyLink();
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 分享到微信好友
|
||
shareToWechat() {
|
||
// #ifdef MP-WEIXIN
|
||
// 小程序中使用按钮的 open-type="share"
|
||
uni.showToast({
|
||
title: '请使用右上角分享',
|
||
icon: 'none'
|
||
});
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
uni.showToast({
|
||
title: '请使用浏览器分享功能',
|
||
icon: 'none'
|
||
});
|
||
// #endif
|
||
|
||
// #ifdef APP-PLUS
|
||
// App中可以调用原生分享
|
||
uni.share({
|
||
provider: 'weixin',
|
||
scene: 'WXSceneSession',
|
||
type: 2,
|
||
title: this.videoDescription || '精彩视频分享',
|
||
summary: `来自 ${this.creatorName} 的视频`,
|
||
href: this.videoUrl,
|
||
imageUrl: this.articleData?.imageInput || '',
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '分享成功',
|
||
icon: 'success'
|
||
});
|
||
},
|
||
fail: (err) => {
|
||
console.error('分享失败:', err);
|
||
uni.showToast({
|
||
title: '分享失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
// 分享到朋友圈
|
||
shareToMoments() {
|
||
// #ifdef MP-WEIXIN
|
||
uni.showToast({
|
||
title: '请使用右上角分享到朋友圈',
|
||
icon: 'none'
|
||
});
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
uni.showToast({
|
||
title: '请使用浏览器分享功能',
|
||
icon: 'none'
|
||
});
|
||
// #endif
|
||
|
||
// #ifdef APP-PLUS
|
||
uni.share({
|
||
provider: 'weixin',
|
||
scene: 'WXSceneTimeline',
|
||
type: 2,
|
||
title: this.videoDescription || '精彩视频分享',
|
||
summary: `来自 ${this.creatorName} 的视频`,
|
||
href: this.videoUrl,
|
||
imageUrl: this.articleData?.imageInput || '',
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '分享成功',
|
||
icon: 'success'
|
||
});
|
||
},
|
||
fail: (err) => {
|
||
console.error('分享失败:', err);
|
||
uni.showToast({
|
||
title: '分享失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
// 复制链接
|
||
copyLink() {
|
||
const shareUrl = this.currentArticleId
|
||
? `https://yourapp.com/pages/ai-generate/video?id=${this.currentArticleId}`
|
||
: 'https://yourapp.com/pages/ai-generate/video';
|
||
|
||
uni.setClipboardData({
|
||
data: shareUrl,
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '链接已复制',
|
||
icon: 'success'
|
||
});
|
||
},
|
||
fail: () => {
|
||
uni.showToast({
|
||
title: '复制失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
onVideoTap(e) {
|
||
if (e && e.stopPropagation) {
|
||
e.stopPropagation();
|
||
}
|
||
this.onPlayPause();
|
||
},
|
||
onVideoLongPress(e) {
|
||
if (e && e.stopPropagation) {
|
||
e.stopPropagation();
|
||
}
|
||
uni.showActionSheet({
|
||
itemList: ['举报', '不感兴趣', '保存到相册'],
|
||
success: res => {
|
||
const actions = ['举报', '不感兴趣', '保存到相册'];
|
||
uni.showToast({
|
||
title: actions[res.tapIndex],
|
||
icon: 'none',
|
||
});
|
||
},
|
||
});
|
||
},
|
||
onPlayPause(e) {
|
||
if (e && e.stopPropagation) {
|
||
e.stopPropagation();
|
||
}
|
||
if (!this.videoContext || !this.isVideoReady) {
|
||
console.warn('视频上下文未准备就绪');
|
||
return;
|
||
}
|
||
if (this.isPlaying) {
|
||
this.safePause();
|
||
} else {
|
||
this.safePlay();
|
||
}
|
||
},
|
||
safePlay() {
|
||
if (!this.videoContext || !this.isVideoReady) {
|
||
return;
|
||
}
|
||
if (this.isPlaying) {
|
||
return;
|
||
}
|
||
try {
|
||
this.videoContext.play();
|
||
} catch (error) {
|
||
console.error('播放失败:', error);
|
||
}
|
||
},
|
||
safePause() {
|
||
if (!this.videoContext || !this.isVideoReady) {
|
||
return;
|
||
}
|
||
if (!this.isPlaying) {
|
||
return;
|
||
}
|
||
try {
|
||
this.videoContext.pause();
|
||
} catch (error) {
|
||
console.error('暂停失败:', error);
|
||
}
|
||
},
|
||
onVideoReady() {
|
||
console.log('视频元数据加载完成');
|
||
this.setData({
|
||
isVideoReady: true,
|
||
});
|
||
},
|
||
onVideoPlay() {
|
||
console.log('视频开始播放');
|
||
this.setData({
|
||
isPlaying: true,
|
||
});
|
||
},
|
||
onVideoPause() {
|
||
console.log('视频暂停');
|
||
this.setData({
|
||
isPlaying: false,
|
||
});
|
||
},
|
||
onTimeUpdate(e) {
|
||
const { currentTime, duration } = e.detail;
|
||
const progress = (currentTime / duration) * 100;
|
||
const minutes = Math.floor(currentTime / 60);
|
||
const seconds = Math.floor(currentTime % 60);
|
||
const timeStr = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||
this.setData({
|
||
currentTime: timeStr,
|
||
progress: progress,
|
||
});
|
||
},
|
||
onVideoEnd() {
|
||
this.setData({
|
||
isPlaying: false,
|
||
progress: 0,
|
||
});
|
||
},
|
||
onCreatorTap() {
|
||
uni.showToast({
|
||
title: `查看${this.creatorName}的主页`,
|
||
icon: 'none',
|
||
});
|
||
},
|
||
onFollow() {
|
||
const isFollowing = !this.isFollowing;
|
||
this.setData({
|
||
isFollowing: isFollowing,
|
||
});
|
||
uni.showToast({
|
||
title: isFollowing ? '关注成功' : '取消关注',
|
||
icon: 'success',
|
||
});
|
||
},
|
||
onLike() {
|
||
const isLiked = !this.isLiked;
|
||
const likeCount = isLiked ? this.likeCount + 1 : this.likeCount - 1;
|
||
this.setData({
|
||
isLiked: isLiked,
|
||
likeCount: likeCount,
|
||
});
|
||
if (isLiked) {
|
||
uni.vibrateShort();
|
||
}
|
||
},
|
||
onCreateSimilar() {
|
||
const description = this.videoDescription;
|
||
const encodedDescription = encodeURIComponent(description);
|
||
uni.navigateTo({
|
||
url: `/pages/ai-generate/oneclick?description=${encodedDescription}&from=video`,
|
||
});
|
||
},
|
||
onConsult() {
|
||
const url = this.chatUrl;
|
||
if (!url) {
|
||
uni.showToast({ title: '暂无客服链接', icon: 'none' });
|
||
return;
|
||
}
|
||
// 统一跳转到内置网页容器
|
||
uni.navigateTo({
|
||
url: `/pages/users/web_page/index?webUel=${encodeURIComponent(url)}&title=客服`
|
||
});
|
||
},
|
||
onViewHistory() {
|
||
uni.navigateTo({
|
||
url: '/pages/ai-generate/assets',
|
||
});
|
||
},
|
||
onTouchStart(e) {
|
||
if (!this.isSwipeEnabled || this.isLoadingArticle) return;
|
||
this.setData({
|
||
touchStartY: e.touches[0].clientY,
|
||
});
|
||
},
|
||
onTouchEnd(e) {
|
||
if (!this.isSwipeEnabled || this.isLoadingArticle) return;
|
||
const touchEndY = e.changedTouches[0].clientY;
|
||
const deltaY = touchEndY - this.touchStartY;
|
||
const minSwipeDistance = 50;
|
||
this.setData({
|
||
touchEndY: touchEndY,
|
||
});
|
||
if (Math.abs(deltaY) > minSwipeDistance) {
|
||
if (deltaY > 0) {
|
||
this.loadPreviousArticle();
|
||
} else {
|
||
this.loadNextArticle();
|
||
}
|
||
}
|
||
},
|
||
loadPreviousArticle() {
|
||
const currentId = parseInt(this.currentArticleId);
|
||
if (currentId && currentId > 1) {
|
||
const previousId = currentId - 1;
|
||
console.log('加载上一篇文章，ID:', previousId);
|
||
this.loadArticleDetail(previousId);
|
||
this.setData({
|
||
currentArticleId: previousId.toString(),
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: '已经是第一篇了',
|
||
icon: 'none',
|
||
});
|
||
}
|
||
},
|
||
loadNextArticle() {
|
||
const currentId = parseInt(this.currentArticleId);
|
||
if (currentId) {
|
||
const nextId = currentId + 1;
|
||
console.log('加载下一篇文章，ID:', nextId);
|
||
this.loadArticleDetail(nextId);
|
||
this.setData({
|
||
currentArticleId: nextId.toString(),
|
||
});
|
||
}
|
||
},
|
||
onToggleDescription() {
|
||
this.setData({
|
||
isDescriptionExpanded: !this.isDescriptionExpanded,
|
||
});
|
||
},
|
||
onShareAppMessage() {
|
||
try {
|
||
// 获取分享标题，优先使用articleData.title
|
||
let shareTitle = '精彩视频分享'; // 默认标题
|
||
if (this.articleData && this.articleData.title) {
|
||
shareTitle = this.articleData.title;
|
||
// 限制标题长度，微信建议不超过28个字符
|
||
if (shareTitle.length > 28) {
|
||
shareTitle = shareTitle.substring(0, 25) + '...';
|
||
}
|
||
} else if (this.creatorName) {
|
||
shareTitle = `${this.creatorName}的作品`;
|
||
}
|
||
|
||
// 获取分享缩略图，优先使用articleData.imageInput
|
||
let shareImageUrl = '/static/images/video-share.png'; // 默认缩略图
|
||
if (this.articleData && this.articleData.imageInput) {
|
||
shareImageUrl = this.articleData.imageInput;
|
||
}
|
||
|
||
// 构建分享路径，包含当前文章ID
|
||
const sharePath = this.currentArticleId
|
||
? `/pages/ai-generate/video?id=${this.currentArticleId}`
|
||
: '/pages/ai-generate/assets';
|
||
|
||
console.log('分享配置:', {
|
||
title: shareTitle,
|
||
path: sharePath,
|
||
imageUrl: shareImageUrl
|
||
});
|
||
|
||
return {
|
||
title: shareTitle,
|
||
path: sharePath,
|
||
imageUrl: shareImageUrl,
|
||
};
|
||
} catch (error) {
|
||
console.error('分享配置失败:', error);
|
||
// 发生错误时返回默认配置
|
||
return {
|
||
title: '精彩视频分享',
|
||
path: '/pages/ai-generate/video',
|
||
imageUrl: '/static/images/video-share.png',
|
||
};
|
||
}
|
||
},
|
||
onShareTimeline() {
|
||
try {
|
||
// 获取分享标题，优先使用articleData.title
|
||
let shareTitle = '精彩视频分享'; // 默认标题
|
||
if (this.articleData && this.articleData.title) {
|
||
shareTitle = this.articleData.title;
|
||
// 朋友圈分享标题建议更简洁，限制在20个字符内
|
||
if (shareTitle.length > 20) {
|
||
shareTitle = shareTitle.substring(0, 17) + '...';
|
||
}
|
||
} else if (this.creatorName) {
|
||
shareTitle = `${this.creatorName}的作品`;
|
||
}
|
||
|
||
// 获取分享缩略图，优先使用articleData.imageInput
|
||
let shareImageUrl = '/static/images/video-share.png'; // 默认缩略图
|
||
if (this.articleData && this.articleData.imageInput) {
|
||
shareImageUrl = this.articleData.imageInput;
|
||
}
|
||
|
||
console.log('朋友圈分享配置:', {
|
||
title: shareTitle,
|
||
imageUrl: shareImageUrl
|
||
});
|
||
|
||
return {
|
||
title: shareTitle,
|
||
imageUrl: shareImageUrl,
|
||
};
|
||
} catch (error) {
|
||
console.error('朋友圈分享配置失败:', error);
|
||
// 发生错误时返回默认配置
|
||
return {
|
||
title: '精彩视频分享',
|
||
imageUrl: '/static/images/video-share.png',
|
||
};
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
this.loadVideoData();
|
||
setTimeout(() => {
|
||
uni.stopPullDownRefresh();
|
||
}, 1000);
|
||
},
|
||
setData(data) {
|
||
let that = this;
|
||
Object.keys(data).forEach(key => {
|
||
that[key] = data[key];
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
/* 视频播放页面样式 */
|
||
.video-container {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: #000000; margin-top: 80rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* AI生成内容标识 */
|
||
.ai-notice {
|
||
position: fixed;
|
||
right: 12px;width: 100px;
|
||
height: 30px; top: 92px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8rpx;
|
||
padding: 12rpx 24rpx;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
border: 1rpx solid rgba(66, 202, 77, 0.5);
|
||
border-radius: 40rpx;
|
||
backdrop-filter: blur(10rpx);
|
||
z-index: 100;
|
||
}
|
||
|
||
.ai-notice-icon {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.ai-notice-text {
|
||
font-size: 20rpx;
|
||
color: #42ca4d;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.video-player {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 顶部控制栏 */
|
||
.top-controls {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 48px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
padding: 0 16px 16px;
|
||
background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 100%);
|
||
z-index: 10;
|
||
}
|
||
|
||
.left-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.back-btn {
|
||
width: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.icon-back {
|
||
font-size: 24px;
|
||
color: #ffffff;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 文章详情样式 */
|
||
.article-status {
|
||
margin-bottom: 16px;
|
||
padding: 12px 16px;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.loading-indicator {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.loading-text {
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.error-message {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.error-text {
|
||
color: #ff6b6b;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.article-detail {
|
||
margin-bottom: 16px;
|
||
padding: 16px;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
border-radius: 12px;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.article-header {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.article-title {
|
||
color: #ffffff;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.article-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
gap: 12px;
|
||
}
|
||
|
||
.publish-time {
|
||
color: #ffffff;
|
||
font-size: 12px;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.article-category {
|
||
color: #4CAF50;
|
||
font-size: 12px;
|
||
background: rgba(76, 175, 80, 0.2);
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.article-content {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.content-text {
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.article-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.tag-item {
|
||
color: #2196F3;
|
||
font-size: 12px;
|
||
background: rgba(33, 150, 243, 0.2);
|
||
padding: 4px 8px;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.time-display {
|
||
font-size: 14px;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.right-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.signal-icons {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.signal, .wifi, .battery {
|
||
font-size: 14px;
|
||
color: #ffffff;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.share-btn {
|
||
width: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.icon-share {
|
||
font-size: 18px;
|
||
color: #ffffff;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 视频内容区域 */
|
||
.video-content {
|
||
flex: 1;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.video-element {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.play-indicator {
|
||
position: absolute;
|
||
width: 80px;
|
||
height: 80px;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
border-radius: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: opacity 0.3s ease;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.play-indicator.hide {
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.play-indicator.show {
|
||
opacity: 1;
|
||
}
|
||
|
||
.play-icon {
|
||
font-size: 32px;
|
||
color: #ffffff;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
/* 底部信息区域 */
|
||
.bottom-info {
|
||
position: absolute;
|
||
bottom: 60rpx;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 11px;
|
||
background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%);
|
||
z-index: 10;
|
||
}
|
||
|
||
/* 创作者信息 */
|
||
.creator-info {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.creator-avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 20px;
|
||
margin-right: 12px;
|
||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.creator-details {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.creator-name {
|
||
font-size: 16px;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.follow-btn {
|
||
padding: 6px 16px;
|
||
background: #ffffff;
|
||
color: #333333;
|
||
border-radius: 16px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.follow-btn.following {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* 视频描述信息 */
|
||
.video-info {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.info-tags {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.tag {
|
||
padding: 4px 8px;
|
||
border-radius: 12px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.tag-info {
|
||
background: rgba(79, 172, 254, 0.8);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.tag-ai {
|
||
background: rgba(118, 75, 162, 0.8);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.video-description {
|
||
font-size: 14px;
|
||
color: #ffffff;
|
||
line-height: 1.4;
|
||
opacity: 0.9;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
line-clamp: 2;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
word-break: break-all;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.video-description.expanded {
|
||
-webkit-line-clamp: unset;
|
||
line-clamp: unset;
|
||
overflow: visible;
|
||
}
|
||
|
||
/* 展开/收起切换按钮 */
|
||
.expand-toggle {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 8px;
|
||
padding: 4px 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.expand-toggle .iconfont {
|
||
font-size: 16px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.expand-toggle:active .iconfont {
|
||
color: rgba(255, 255, 255, 1);
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
/* 互动操作区 */
|
||
.interaction-area {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.like-section {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.like-btn {
|
||
width: 44px;
|
||
height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 8px;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.like-btn:active {
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
.heart-icon {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.like-count {
|
||
font-size: 16px;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
/* 悬浮操作按钮 */
|
||
.floating-actions {
|
||
position: fixed;
|
||
right: 16px;
|
||
bottom: 35%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
z-index: 100;
|
||
}
|
||
|
||
.floating-btn {
|
||
width: 42px;
|
||
height: 42px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 4px;
|
||
background: linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.25) 100%);
|
||
border: 2px solid rgba(255, 255, 255, 0.15);
|
||
border-radius: 50%;
|
||
backdrop-filter: blur(20px);
|
||
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4),
|
||
0 4px 8px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.floating-btn:active {
|
||
transform: scale(0.92);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
|
||
0 2px 4px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
/* 下载按钮 */
|
||
.download-btn {
|
||
background: linear-gradient(135deg, rgba(76, 175, 80, 0.2) 0%, rgba(56, 142, 60, 0.4) 100%);
|
||
border-color: rgba(139, 195, 74, 0.3);
|
||
}
|
||
|
||
.download-btn:active {
|
||
background: linear-gradient(135deg, rgba(76, 175, 80, 1) 0%, rgba(56, 142, 60, 0.9) 100%);
|
||
}
|
||
|
||
/* 分享按钮 */
|
||
.share-btn {
|
||
background: linear-gradient(135deg, rgba(33, 150, 243, 0.2) 0%, rgba(25, 118, 210, 0.4) 100%);
|
||
border-color: rgba(100, 181, 246, 0.3);
|
||
}
|
||
|
||
.share-btn:active {
|
||
background: linear-gradient(135deg, rgba(33, 150, 243, 1) 0%, rgba(25, 118, 210, 0.9) 100%);
|
||
}
|
||
|
||
/* CSS绘制的下载图标 */
|
||
.icon-download {
|
||
width: 20px;
|
||
height: 20px;
|
||
position: relative;
|
||
}
|
||
|
||
.icon-download::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 0;
|
||
width: 3px;
|
||
height: 14px;
|
||
background: #ffffff;
|
||
transform: translateX(-50%);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.icon-download::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 0;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 5px solid transparent;
|
||
border-right: 5px solid transparent;
|
||
border-top: 6px solid #ffffff;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
/* CSS绘制的分享图标 */
|
||
.icon-share {
|
||
width: 20px;
|
||
height: 20px;
|
||
position: relative;
|
||
}
|
||
|
||
.icon-share::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 0;
|
||
width: 3px;
|
||
height: 14px;
|
||
background: #ffffff;
|
||
transform: translateX(-50%);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.icon-share::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 0;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 5px solid transparent;
|
||
border-right: 5px solid transparent;
|
||
border-bottom: 6px solid #ffffff;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.floating-label {
|
||
font-size: 12px;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
letter-spacing: 0.3px;
|
||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.consult-btn {
|
||
padding: 12px 24px;
|
||
background: rgba(255, 255, 255, 0.15);
|
||
color: #ffffff;
|
||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||
border-radius: 24px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
transition: transform 0.2s ease, background 0.2s ease;
|
||
}
|
||
|
||
.consult-btn:active {
|
||
transform: scale(0.95);
|
||
background: rgba(255, 255, 255, 0.25);
|
||
}
|
||
|
||
.action-btn {
|
||
padding: 12px 24px;
|
||
background: #ffffff;
|
||
color: #333333;
|
||
border-radius: 24px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.action-btn:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
/* 进度条 */
|
||
.progress-bar {
|
||
width: 100%;
|
||
}
|
||
|
||
.progress-track {
|
||
width: 100%;
|
||
height: 2px;
|
||
background: rgba(255, 255, 255, 0.3);
|
||
border-radius: 1px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: #ffffff;
|
||
border-radius: 1px;
|
||
transition: width 0.1s ease;
|
||
}
|
||
|
||
/* 点赞动画 */
|
||
@keyframes likeAnimation {
|
||
0% {
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
transform: scale(1.3);
|
||
}
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
.like-btn.liked .heart-icon {
|
||
animation: likeAnimation 0.6s ease;
|
||
}
|
||
</style> |