|
@@ -2,13 +2,13 @@
|
|
|
<section class="space-y-6">
|
|
<section class="space-y-6">
|
|
|
<!-- 返回按钮 -->
|
|
<!-- 返回按钮 -->
|
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center justify-between">
|
|
|
- <div class="flex items-center gap-3">
|
|
|
|
|
|
|
+ <div class="flex items-center gap-2 sm:gap-3">
|
|
|
<button
|
|
<button
|
|
|
@click="goBack"
|
|
@click="goBack"
|
|
|
- class="flex items-center gap-2 text-white/80 hover:text-white transition"
|
|
|
|
|
|
|
+ class="flex items-center gap-1 sm:gap-2 text-white/80 hover:text-white transition whitespace-nowrap"
|
|
|
>
|
|
>
|
|
|
<svg
|
|
<svg
|
|
|
- class="w-5 h-5"
|
|
|
|
|
|
|
+ class="w-4 h-4 sm:w-5 sm:h-5 flex-shrink-0"
|
|
|
fill="none"
|
|
fill="none"
|
|
|
stroke="currentColor"
|
|
stroke="currentColor"
|
|
|
viewBox="0 0 24 24"
|
|
viewBox="0 0 24 24"
|
|
@@ -20,67 +20,34 @@
|
|
|
d="M15 19l-7-7 7-7"
|
|
d="M15 19l-7-7 7-7"
|
|
|
/>
|
|
/>
|
|
|
</svg>
|
|
</svg>
|
|
|
- <span class="text-sm">返回</span>
|
|
|
|
|
|
|
+ <span class="text-xs sm:text-sm">返回</span>
|
|
|
</button>
|
|
</button>
|
|
|
-
|
|
|
|
|
- <div class="relative">
|
|
|
|
|
- <button
|
|
|
|
|
- @click="toggleShare"
|
|
|
|
|
- class="p-2 rounded-lg bg-white/5 border border-white/10 text-white/70 hover:bg-white/10 hover:text-white transition"
|
|
|
|
|
- >
|
|
|
|
|
- <svg
|
|
|
|
|
- class="w-5 h-5"
|
|
|
|
|
- fill="none"
|
|
|
|
|
- stroke="currentColor"
|
|
|
|
|
- viewBox="0 0 24 24"
|
|
|
|
|
- >
|
|
|
|
|
- <path
|
|
|
|
|
- stroke-linecap="round"
|
|
|
|
|
- stroke-linejoin="round"
|
|
|
|
|
- stroke-width="2"
|
|
|
|
|
- d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"
|
|
|
|
|
- />
|
|
|
|
|
- </svg>
|
|
|
|
|
- </button>
|
|
|
|
|
-
|
|
|
|
|
- <!-- 分享提示弹窗 -->
|
|
|
|
|
- <div
|
|
|
|
|
- v-if="showShareModal"
|
|
|
|
|
- class="absolute top-0 left-full ml-2 z-50 bg-emerald-500 text-white px-3 py-1.5 rounded-lg shadow-lg flex items-center gap-1.5 whitespace-nowrap"
|
|
|
|
|
- >
|
|
|
|
|
- <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
|
|
|
|
- <path
|
|
|
|
|
- fill-rule="evenodd"
|
|
|
|
|
- d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1-0 011.414 0z"
|
|
|
|
|
- clip-rule="evenodd"
|
|
|
|
|
- />
|
|
|
|
|
- </svg>
|
|
|
|
|
- <span class="text-xs font-medium">已复制</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 购买按钮区域 -->
|
|
<!-- 购买按钮区域 -->
|
|
|
<div
|
|
<div
|
|
|
v-if="!isSinglePurchased && !isVip"
|
|
v-if="!isSinglePurchased && !isVip"
|
|
|
- class="flex items-center gap-1.5"
|
|
|
|
|
|
|
+ class="flex items-center gap-1 sm:gap-1.5"
|
|
|
>
|
|
>
|
|
|
<!-- 游客和免费用户显示试看时间信息 -->
|
|
<!-- 游客和免费用户显示试看时间信息 -->
|
|
|
- <div v-if="isGuestOrFree" class="text-xs text-white/60 px-2 py-1">
|
|
|
|
|
- 试看 {{ trialDuration }} 秒
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ v-if="isGuestOrFree"
|
|
|
|
|
+ class="text-2xs sm:text-xs text-white/60 px-1 sm:px-2 py-0.5 sm:py-1"
|
|
|
|
|
+ >
|
|
|
|
|
+ 试看{{ trialDuration }}秒
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 只有非游客用户才显示购买会员按钮 -->
|
|
<!-- 只有非游客用户才显示购买会员按钮 -->
|
|
|
<button
|
|
<button
|
|
|
v-if="!isGuest"
|
|
v-if="!isGuest"
|
|
|
@click="handleMembershipClick"
|
|
@click="handleMembershipClick"
|
|
|
- class="px-2 py-1 rounded-md bg-brand text-slate-900 text-xs font-medium hover:bg-brand/90 transition whitespace-nowrap min-w-fit"
|
|
|
|
|
|
|
+ class="px-1.5 sm:px-2 py-0.5 sm:py-1 rounded-md bg-brand text-slate-900 text-2xs sm:text-xs font-medium hover:bg-brand/90 transition whitespace-nowrap min-w-fit"
|
|
|
>
|
|
>
|
|
|
开通会员
|
|
开通会员
|
|
|
</button>
|
|
</button>
|
|
|
<button
|
|
<button
|
|
|
@click="handleSinglePurchaseClick"
|
|
@click="handleSinglePurchaseClick"
|
|
|
- class="px-3 py-2 rounded-lg bg-blue-500 text-white text-sm font-semibold hover:bg-blue-600 transition shadow-lg hover:shadow-xl flash-animation glow-animation hover:animate-none whitespace-nowrap min-w-fit"
|
|
|
|
|
|
|
+ class="px-2 sm:px-3 py-1 sm:py-2 rounded-lg bg-blue-500 text-white text-2xs sm:text-sm font-semibold hover:bg-blue-600 transition shadow-lg hover:shadow-xl flash-animation glow-animation hover:animate-none whitespace-nowrap min-w-fit"
|
|
|
>
|
|
>
|
|
|
单片购买
|
|
单片购买
|
|
|
</button>
|
|
</button>
|
|
@@ -654,7 +621,6 @@ const videoInfo = ref<any>({
|
|
|
const relatedVideos = ref<any[]>([]);
|
|
const relatedVideos = ref<any[]>([]);
|
|
|
|
|
|
|
|
// 状态管理
|
|
// 状态管理
|
|
|
-const showShareModal = ref(false);
|
|
|
|
|
const showTrialEndModal = ref(false);
|
|
const showTrialEndModal = ref(false);
|
|
|
const showMembershipPurchaseModal = ref(false);
|
|
const showMembershipPurchaseModal = ref(false);
|
|
|
const showSinglePurchaseModal = ref(false);
|
|
const showSinglePurchaseModal = ref(false);
|
|
@@ -687,20 +653,20 @@ const singleCurrentOrderNo = ref("");
|
|
|
// 检测是否为夸克浏览器
|
|
// 检测是否为夸克浏览器
|
|
|
const isQuarkBrowser = () => {
|
|
const isQuarkBrowser = () => {
|
|
|
const ua = navigator.userAgent.toLowerCase();
|
|
const ua = navigator.userAgent.toLowerCase();
|
|
|
- return ua.includes('quark');
|
|
|
|
|
|
|
+ return ua.includes("quark");
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
// 显示成功/错误提示的函数
|
|
// 显示成功/错误提示的函数
|
|
|
const showSuccess = (message: string) => {
|
|
const showSuccess = (message: string) => {
|
|
|
successMessage.value = message;
|
|
successMessage.value = message;
|
|
|
showSuccessDialog.value = true;
|
|
showSuccessDialog.value = true;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 夸克浏览器自动滚动到底部
|
|
// 夸克浏览器自动滚动到底部
|
|
|
if (isQuarkBrowser()) {
|
|
if (isQuarkBrowser()) {
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
|
window.scrollTo({
|
|
window.scrollTo({
|
|
|
top: document.documentElement.scrollHeight,
|
|
top: document.documentElement.scrollHeight,
|
|
|
- behavior: 'smooth'
|
|
|
|
|
|
|
+ behavior: "smooth",
|
|
|
});
|
|
});
|
|
|
}, 100);
|
|
}, 100);
|
|
|
}
|
|
}
|
|
@@ -709,13 +675,13 @@ const showSuccess = (message: string) => {
|
|
|
const showError = (message: string) => {
|
|
const showError = (message: string) => {
|
|
|
errorMessage.value = message;
|
|
errorMessage.value = message;
|
|
|
showErrorDialog.value = true;
|
|
showErrorDialog.value = true;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 夸克浏览器自动滚动到底部
|
|
// 夸克浏览器自动滚动到底部
|
|
|
if (isQuarkBrowser()) {
|
|
if (isQuarkBrowser()) {
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
|
window.scrollTo({
|
|
window.scrollTo({
|
|
|
top: document.documentElement.scrollHeight,
|
|
top: document.documentElement.scrollHeight,
|
|
|
- behavior: 'smooth'
|
|
|
|
|
|
|
+ behavior: "smooth",
|
|
|
});
|
|
});
|
|
|
}, 100);
|
|
}, 100);
|
|
|
}
|
|
}
|
|
@@ -836,25 +802,11 @@ const formatNumber = (num: string | number): string => {
|
|
|
|
|
|
|
|
// 返回上一页
|
|
// 返回上一页
|
|
|
const goBack = () => {
|
|
const goBack = () => {
|
|
|
|
|
+ // 使用router.back()返回上一页,而不是直接导航到主页
|
|
|
|
|
+ // 这样可以确保按照浏览历史顺序返回
|
|
|
router.back();
|
|
router.back();
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-// 分享视频(直接复制链接并显示提示)
|
|
|
|
|
-const toggleShare = async () => {
|
|
|
|
|
- try {
|
|
|
|
|
- const videoUrl = window.location.href;
|
|
|
|
|
- await navigator.clipboard.writeText(videoUrl);
|
|
|
|
|
- showShareModal.value = true;
|
|
|
|
|
-
|
|
|
|
|
- // 1秒后自动隐藏提示
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- showShareModal.value = false;
|
|
|
|
|
- }, 1000);
|
|
|
|
|
- } catch (error) {
|
|
|
|
|
- console.error("复制链接失败:", error);
|
|
|
|
|
- }
|
|
|
|
|
-};
|
|
|
|
|
-
|
|
|
|
|
// 播放视频
|
|
// 播放视频
|
|
|
const playVideo = (video: any) => {
|
|
const playVideo = (video: any) => {
|
|
|
const vipLevel = userStore.getVipLevel();
|
|
const vipLevel = userStore.getVipLevel();
|
|
@@ -896,13 +848,13 @@ const startTrial = () => {
|
|
|
// 处理顶部会员购买按钮点击
|
|
// 处理顶部会员购买按钮点击
|
|
|
const handleMembershipClick = () => {
|
|
const handleMembershipClick = () => {
|
|
|
showMembershipPurchaseModal.value = true;
|
|
showMembershipPurchaseModal.value = true;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 夸克浏览器自动滚动到底部
|
|
// 夸克浏览器自动滚动到底部
|
|
|
if (isQuarkBrowser()) {
|
|
if (isQuarkBrowser()) {
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
|
window.scrollTo({
|
|
window.scrollTo({
|
|
|
top: document.documentElement.scrollHeight,
|
|
top: document.documentElement.scrollHeight,
|
|
|
- behavior: 'smooth'
|
|
|
|
|
|
|
+ behavior: "smooth",
|
|
|
});
|
|
});
|
|
|
}, 100);
|
|
}, 100);
|
|
|
}
|
|
}
|
|
@@ -911,13 +863,13 @@ const handleMembershipClick = () => {
|
|
|
// 处理顶部单片购买按钮点击
|
|
// 处理顶部单片购买按钮点击
|
|
|
const handleSinglePurchaseClick = () => {
|
|
const handleSinglePurchaseClick = () => {
|
|
|
showSinglePurchaseModal.value = true;
|
|
showSinglePurchaseModal.value = true;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 夸克浏览器自动滚动到底部
|
|
// 夸克浏览器自动滚动到底部
|
|
|
if (isQuarkBrowser()) {
|
|
if (isQuarkBrowser()) {
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
|
window.scrollTo({
|
|
window.scrollTo({
|
|
|
top: document.documentElement.scrollHeight,
|
|
top: document.documentElement.scrollHeight,
|
|
|
- behavior: 'smooth'
|
|
|
|
|
|
|
+ behavior: "smooth",
|
|
|
});
|
|
});
|
|
|
}, 100);
|
|
}, 100);
|
|
|
}
|
|
}
|
|
@@ -929,13 +881,13 @@ const purchaseMembership = () => {
|
|
|
showTrialEndModal.value = false;
|
|
showTrialEndModal.value = false;
|
|
|
// 打开会员购买弹窗
|
|
// 打开会员购买弹窗
|
|
|
showMembershipPurchaseModal.value = true;
|
|
showMembershipPurchaseModal.value = true;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 夸克浏览器自动滚动到底部
|
|
// 夸克浏览器自动滚动到底部
|
|
|
if (isQuarkBrowser()) {
|
|
if (isQuarkBrowser()) {
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
|
window.scrollTo({
|
|
window.scrollTo({
|
|
|
top: document.documentElement.scrollHeight,
|
|
top: document.documentElement.scrollHeight,
|
|
|
- behavior: 'smooth'
|
|
|
|
|
|
|
+ behavior: "smooth",
|
|
|
});
|
|
});
|
|
|
}, 100);
|
|
}, 100);
|
|
|
}
|
|
}
|
|
@@ -1045,11 +997,11 @@ const purchaseVideo = async () => {
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
|
window.scrollTo({
|
|
window.scrollTo({
|
|
|
top: document.documentElement.scrollHeight,
|
|
top: document.documentElement.scrollHeight,
|
|
|
- behavior: 'smooth'
|
|
|
|
|
|
|
+ behavior: "smooth",
|
|
|
});
|
|
});
|
|
|
}, 100);
|
|
}, 100);
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
try {
|
|
try {
|
|
|
// 使用视频信息的真实ID
|
|
// 使用视频信息的真实ID
|
|
|
if (!videoInfo.value.id || videoInfo.value.id === "unknown") {
|
|
if (!videoInfo.value.id || videoInfo.value.id === "unknown") {
|