From 1773ee5d0ef2dda7810ab4434a96f9ba7cdc94af Mon Sep 17 00:00:00 2001 From: yujialong <479214531@qq.com> Date: Tue, 19 Nov 2024 15:14:00 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E5=85=A8=E5=B1=8F=E6=92=AD?= =?UTF-8?q?=E6=94=BE=E4=B8=8B=E6=B7=BB=E5=8A=A0=E6=92=AD=E6=94=BE=E5=88=97?= =?UTF-8?q?=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/UserExchangeModal/index.tsx | 14 ++-- src/pages/DisplayVideo/index.less | 68 ++++++++++++++++- src/pages/DisplayVideo/index.tsx | 88 ++++++++++++++++++---- src/pages/Subscribe/index.tsx | 14 ++-- 4 files changed, 154 insertions(+), 30 deletions(-) diff --git a/src/components/UserExchangeModal/index.tsx b/src/components/UserExchangeModal/index.tsx index f9a6c9f..9f5adb4 100644 --- a/src/components/UserExchangeModal/index.tsx +++ b/src/components/UserExchangeModal/index.tsx @@ -76,7 +76,7 @@ export default function UserExchangeModal({ isOpen, setIsOpen }: Props) { } const handleExchange = () => { - if(inputValue.length === 8){ + // if(inputValue.length === 8){ Taro.request({ url: 'https://interapi.jm-kid.com/api/product/exchange', method: 'POST', @@ -103,12 +103,12 @@ export default function UserExchangeModal({ isOpen, setIsOpen }: Props) { console.log('兑换失败=>', err) } }) - }else{ - Taro.showToast({ - title: '兑换码格式错误', - icon: 'none' - }) - } + // }else{ + // Taro.showToast({ + // title: '兑换码格式错误', + // icon: 'none' + // }) + // } } diff --git a/src/pages/DisplayVideo/index.less b/src/pages/DisplayVideo/index.less index 8cc0b9c..97dde43 100644 --- a/src/pages/DisplayVideo/index.less +++ b/src/pages/DisplayVideo/index.less @@ -13,7 +13,14 @@ .jimeiVideo { width: 100%; height: 100% - } + } + .select-epi { + z-index: 1000; + position: absolute; + bottom: 7.4rem; + right: 3rem; + color: #fff; + } } } @@ -100,3 +107,62 @@ } } } + +.fullDisplayList { + position: fixed; + top: 0; + right: 2rem; + // width: 90vw; + width: 12rem; + height: 100vh; + // white-space: nowrap; + padding: 1rem 1rem 0; + color: white; + // overflow: hidden; + background-color: rgba(0, 0, 0, .3); + .card-epi { + margin-bottom: .8rem; + font-size: 1.1rem; + } + .card-inner { + height: 90vh; + overflow-x: scroll; + } + ::-webkit-scrollbar { + display: none; + } + .card { + // display: inline-block; + // display: flex; + min-width: 12rem; + margin-bottom: 1rem; + + } + .card-image-wrap { + position: relative; + width: 12rem; + height: 6rem; + margin-bottom: .3rem; + border-radius: 1rem; + overflow: hidden; + } + .card-image { + width: 100%; + height: 100%; + } + .card-playing-mask { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + font-size: 1rem; + font-weight: 600; + text-align: center; + line-height: 5rem; + background-color: rgba(0, 0, 0, .6); + } + .card-title { + font-size: .9rem; + } +} diff --git a/src/pages/DisplayVideo/index.tsx b/src/pages/DisplayVideo/index.tsx index ef11161..2730e3e 100644 --- a/src/pages/DisplayVideo/index.tsx +++ b/src/pages/DisplayVideo/index.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from 'react' import Taro, { useLoad, useShareAppMessage, useShareTimeline } from '@tarojs/taro' -import { View, Text, Video, Image, ScrollView } from '@tarojs/components' +import { View, Text, Video, Image, ScrollView, CoverView, CoverImage } from '@tarojs/components' import './index.less' @@ -108,6 +108,10 @@ export default function Index() { const [isFree, setisFree] = useState(false) + const [isFullscreen, setIsFullscreen] = useState(false) + + const [playListOpen, setPlayListOpen] = useState(false) + useShareAppMessage((res) => { if (res.from === 'button') { console.log(res.target); @@ -346,6 +350,22 @@ export default function Index() { return result; } + // 视频全屏回调 + const fullScreenChange = (e: any) => { + const { fullScreen } = e.detail + fullScreen || setPlayListOpen(false) + setIsFullscreen(fullScreen) + } + + // 展示选集列表 + const showPlayList = () => { + setPlayListOpen(!playListOpen) + } + + const videoClick = () => { + setPlayListOpen(false) + } + return ( {/* pad小程序 */} @@ -353,21 +373,31 @@ export default function Index() { { !isFree ? - : + <> + + {isFullscreen && 选集} + : null } { @@ -411,6 +441,32 @@ export default function Index() { ) } + + {/* 全屏播放状态下的视频列表 */} + { + playListOpen && + + 选集 + + { + alldata.map((item : any, index: number) => + changedisplay(item, index)} > + + + {displayindex['index'] == index && 正在播放} + + {item['ResTitle']} + + ) + } + + + } ) } diff --git a/src/pages/Subscribe/index.tsx b/src/pages/Subscribe/index.tsx index 258019f..54e0f08 100644 --- a/src/pages/Subscribe/index.tsx +++ b/src/pages/Subscribe/index.tsx @@ -447,10 +447,11 @@ export default function Subscribe() { } // 套装删除 - const handleDelCollection = (item: any) => { + const handleDelCollection = (item: any, e: TouchEvent) => { + e.stopPropagation() if (item.SubscribedState === -1) { // 已过期，直接删除 - debugger + // debugger Taro.request({ url: 'https://interapi.jm-kid.com/api/mark/subscribed', method: 'POST', @@ -482,10 +483,11 @@ export default function Subscribe() { } // 单本删除 - const handleDelSingle = (item: any) => { + const handleDelSingle = (item: any, e: TouchEvent) => { + e.stopPropagation() if (item.SubscribedState === -1) { - // 已过期，直接删除 debugger + // 已过期，直接删除 Taro.request({ url: 'https://interapi.jm-kid.com/api/mark/subscribed', method: 'POST', @@ -630,7 +632,7 @@ export default function Subscribe() { { item.SubscribedState === -1 && ( - handleDelSingle(item)}> + handleDelSingle(item, e)}> 已 过 期 ) @@ -665,7 +667,7 @@ export default function Subscribe() { { item.SubscribedState === -1 && ( - handleDelCollection(item)}> + handleDelCollection(item, e)}> 已 过 期 )