From 88f1eb3720e753140b061f5f9df7adaae71f7e1a Mon Sep 17 00:00:00 2001 From: sunlizhou <296190577@qq.com> Date: Mon, 22 Jan 2024 11:39:51 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E7=80=91=E5=B8=83=E6=B5=81?= =?UTF-8?q?=E8=A7=86=E9=A2=91=E5=B0=81=E9=9D=A2=E5=8A=A0=E8=BD=BD=E7=8A=B6?= =?UTF-8?q?=E6=80=81=E5=8F=8A=E8=AF=B7=E6=B1=82=E8=A7=86=E9=A2=91=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E6=98=AF=E5=90=A6=E9=9C=80=E8=A6=81=E6=9B=BF=E6=8D=A2?= =?UTF-8?q?=E6=9C=80=E6=96=B0=E8=B5=84=E6=BA=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.config.ts | 3 +- src/components/collect/collect.module.scss | 11 +- src/components/collect/collect.tsx | 8 +- src/components/image/image.tsx | 16 +- .../navigationBar/navigationBar.module.scss | 2 +- src/components/videoList/videoList.tsx | 68 ++++++--- src/components/videoPro/index.module.scss | 8 + src/components/videoPro/index.tsx | 69 +++++++-- src/components/water-full/index.module.scss | 73 +++++++++ src/components/water-full/index.tsx | 102 +++++++++++++ src/hooks/pubsub.ts | 1 + src/pages/business/waterFull/test.config.ts | 3 + src/pages/business/waterFull/test.tsx | 37 +++++ src/pages/home/home.tsx | 3 +- src/pages/preview/brand/info/info.tsx | 90 ++++++++++- src/pages/preview/health/health.module.scss | 21 ++- src/pages/preview/health/health.tsx | 17 ++- .../illness/sort/components/secondLevel.tsx | 65 ++++++-- src/pages/preview/illness/sort/sort.tsx | 37 +---- .../preview/profession/profession.module.scss | 13 +- src/pages/preview/profession/profession.tsx | 30 ++-- .../preview/videoFull/videoFull.module.scss | 15 +- src/pages/preview/videoFull/videoFull.tsx | 142 ++++++++++++------ src/utils/wfs.ts | 53 +++++++ types/home.d.ts | 6 + 25 files changed, 713 insertions(+), 180 deletions(-) create mode 100644 src/components/water-full/index.module.scss create mode 100644 src/components/water-full/index.tsx create mode 100644 src/pages/business/waterFull/test.config.ts create mode 100644 src/pages/business/waterFull/test.tsx create mode 100644 src/utils/wfs.ts diff --git a/src/app.config.ts b/src/app.config.ts index a9ee822..34465c2 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -68,7 +68,8 @@ export default defineAppConfig({ 'history/history', 'curHistory/curHistory', 'hourHistory/hourHistory', - 'courType/courType' + 'courType/courType', + 'waterFull/test', ] }, { diff --git a/src/components/collect/collect.module.scss b/src/components/collect/collect.module.scss index f811a84..b70a5ea 100644 --- a/src/components/collect/collect.module.scss +++ b/src/components/collect/collect.module.scss @@ -3,25 +3,18 @@ display: flex; align-items: center; color: #909795; - font-size: 24rpx; padding: 0 10rpx; } .collectImage { position: relative; - width: 32rpx; - height: 32rpx; margin-right: 10rpx; - //Image { - // width: 100%; - // height: 100%; - //} + } .zoom { - //top: 0; - //left: 0; + position: absolute; content: ''; width: 32rpx; diff --git a/src/components/collect/collect.tsx b/src/components/collect/collect.tsx index 2202713..8c9f48c 100644 --- a/src/components/collect/collect.tsx +++ b/src/components/collect/collect.tsx @@ -1,7 +1,7 @@ import {CSSProperties, FC, useCallback, useEffect, useState} from "react"; // import star from '@/static/img/star.png' // import starLine from '@/static/img/starLine.png' -import {View} from "@tarojs/components"; +import {View,Text} from "@tarojs/components"; import styles from './collect.module.scss' import {Profile} from "@/store" import Taro from "@tarojs/taro"; @@ -70,7 +70,11 @@ const Collect: FC = (props) => { {/**/} {/*{!props.textHidden && (select ? '已收藏' : '收藏')}*/} - {!props.textHidden && '收藏'} + { + !props.textHidden && + 收藏 + } + {/*{!props.textHidden && '收藏'}*/} ) } diff --git a/src/components/image/image.tsx b/src/components/image/image.tsx index 5c563a8..9c1019a 100644 --- a/src/components/image/image.tsx +++ b/src/components/image/image.tsx @@ -1,5 +1,5 @@ import {FC, useEffect, useState} from "react"; -import {Image, ImageProps, View} from "@tarojs/components"; +import { Image, ImageProps, View } from "@tarojs/components"; import shard from '@/static/img/shard.png' import Taro from "@tarojs/taro"; import avatar from '@/static/img/avatar.png' @@ -7,6 +7,7 @@ import healthShard from '@/static/img/healthShard.png' import professionShard from '@/static/img/professionShard.png' import brandSecond from '@/static/img/brandSecond.png' import courseShard from '@/static/img/courseShard.png' +import logo from '@/static/img/logo.svg' interface Props extends ImageProps { width?: number | string @@ -26,6 +27,9 @@ const Img: FC = ({src, mode = 'aspectFill', width, fallback = shard, ...p const imgAnimation = Taro.createAnimation({duration: 0}).opacity(0).step() const [animationData, setAnimationData] = useState(imgAnimation.export()) + console.log(height,'height') + console.log(loading,'loading') + useEffect(() => { if (!isError && props.fit) { Taro.getImageInfo({ @@ -39,6 +43,7 @@ const Img: FC = ({src, mode = 'aspectFill', width, fallback = shard, ...p setLoading(!!src) }, [src]) + useEffect(() => { if (props.errorImage) { setErrorUrl(props.errorImage) @@ -88,6 +93,15 @@ const Img: FC = ({src, mode = 'aspectFill', width, fallback = shard, ...p height: height ? typeof height === 'string' ? height : `${height}rpx` : "100%", backgroundColor: (isError || !loading) ? 'transparent' : '#F8F8F8', }}> + + { loading && + + + + } {!isError && = (props) => { - const [data, setData] = useState(props.data) + const [data, setData] = useState(props.data) + const [cover,setCover] = useState('') + console.log(data,'data现在的数据') useEffect(() => { - setData(props.data) - }, [props.data]) + + getWfsInfo(data.resource_id).then(res => { + setData((data) =>({...data, url_path:res.object.thumb,video_width:res.object.width,video_height:res.object.height})) + setCover(res.object.thumb) + }).catch(()=>{ + console.log('获取失败') + setData((data) => ({...data,video_width:data.resource.width,video_height:data.resource.height})) + }) + }, []) useEffect(() => { videoEvent.videoOn(data.id, ({view}) => { - setData({ + setData((data) => ({ ...data, video_view: view - }) + })) }) }, []) + + Taro.useUnload(() => { videoEvent.off(data.id) }) @@ -39,32 +51,38 @@ const VideoList: FC = (props) => { } return ( - - + <> + { data.video_height && data.video_width + && + + - - - {data.title} - {data.introduction} + + + {data.title} + {data.introduction} - - - - - {(data.video_view || 0)} - + + + + + {(data.video_view || 0)} + - - - {(data.collect_quantity || 0)} + + + {(data.collect_quantity || 0)} + + + + {formatMinute(data.duration || 0)} - - {formatMinute(data.duration || 0)} - - ) + } + + ) } export default VideoList diff --git a/src/components/videoPro/index.module.scss b/src/components/videoPro/index.module.scss index e69de29..d453ed8 100644 --- a/src/components/videoPro/index.module.scss +++ b/src/components/videoPro/index.module.scss @@ -0,0 +1,8 @@ +.progressBottom{ + bottom: calc(env(safe-area-inset-bottom) + 100rpx); + //bottom:0; + position: fixed; + z-index: 1000; + left:0; + right:0; +} diff --git a/src/components/videoPro/index.tsx b/src/components/videoPro/index.tsx index 4b63c20..6e34dc7 100644 --- a/src/components/videoPro/index.tsx +++ b/src/components/videoPro/index.tsx @@ -1,6 +1,6 @@ import React, {FC, useEffect, useRef, useState, useImperativeHandle} from "react"; import {Image, Text, Video, View} from "@tarojs/components"; -import "./index.module.scss" +import styles from "./index.module.scss" import Icon from "@/components/icon"; import {AtSlider} from "taro-ui"; import Taro from "@tarojs/taro"; @@ -11,9 +11,11 @@ type Props = { src: string onRef?: any showFull?: boolean + height?: number + progress2bottom?: boolean } -const VideoPro:FC = ({src,onRef,showFull}) => { +const VideoPro:FC = ({src,onRef,showFull,height,progress2bottom}) => { const globalData = Taro.getApp().globalData if(onRef){ @@ -27,7 +29,7 @@ const VideoPro:FC = ({src,onRef,showFull}) => { // 视频ui控制需要的响应式数据 const videoContext = useRef() - const [isPlay, setIsPlay] = useState(false) + const [isPlay, setIsPlay] = useState(true) const [duration,setDuration] = useState(0) // 视频长度 单位秒 const updateState = useRef(false) const [sliderValue,setSlidervalue] = useState(0) @@ -35,7 +37,9 @@ const VideoPro:FC = ({src,onRef,showFull}) => { const [total_duration, set_total_duration] = useState('00:00') const [showMenu,setShowMenu] = useState(true) const [isFull,setIsFull] = useState(false) - const time = useRef() + const time = useRef() + + const [videoHeight] = useState(height || 600) useEffect(() => { @@ -54,7 +58,7 @@ const VideoPro:FC = ({src,onRef,showFull}) => { function onTouchEnd(){ if(time.current) { clearTimeout(time.current) - time.current = null + time.current = undefined } time.current = setTimeout(() => { setShowMenu(false) @@ -140,6 +144,8 @@ const VideoPro:FC = ({src,onRef,showFull}) => { if (duration) { // 视频跳转到指定位置 videoContext.current.seek(e / 100 * duration); + videoContext.current.play() + setIsPlay(true) updateState.current = true setSlidervalue(e) } @@ -149,10 +155,11 @@ const VideoPro:FC = ({src,onRef,showFull}) => { } return ( - + + + + { duration > 0 && showMenu && progress2bottom && + <> + { + isPlay ? + {videoContext.current.pause();setIsPlay(false)}} /> : + {videoContext.current.play();setIsPlay(true)}} /> + } + {process_duration} + + + + + + + + + {total_duration} + { showFull && + <> + {isFull? videoContext.current.exitFullScreen() } src={unFull} /> + : videoContext.current.requestFullScreen({direction:90}) } />} + + } + + } + ) } diff --git a/src/components/water-full/index.module.scss b/src/components/water-full/index.module.scss new file mode 100644 index 0000000..608d4cf --- /dev/null +++ b/src/components/water-full/index.module.scss @@ -0,0 +1,73 @@ +.wang_product{ + width:100%; +} + +.wang_product .product_water .water { + border-radius: 16rpx !important; + //background-color: #ffffff; + overflow: hidden; +} + +.wang_product .product_water .water .image { + border-radius: 16rpx 16rpx 0 0 !important; + width: 100%; + overflow: hidden; +} + + + + +.wang_product .product_water.col_2_20 .water { + margin-bottom: 20rpx; +} + +.wang_product .product_water.col_2_20 .water.right { + margin-left: 10rpx; +} + +.wang_product .product_water.col_2_20 .water.left { + margin-right: 10rpx; +} + + + +/* 二列布局 */ +.wang_product .product_list[class*='col-2-'] .item image, +.wang_product .product_list[class*='col-2-'] .item .img-wrap { + width: 100%; + height: 400rpx; +} + +.wang_product .product_list[class*='col-2-'] .comment { + display: none; +} + +.wang_product .product_list[class*='col-2-'] .content { + height: 200rpx; +} + + + +.wang_product .product_list.col_2_20:after { + content: ''; + width: calc((100% - 20rpx) / 2); +} + +.wang_product .product_list.col_2_20 .item { + width: calc((100% - 20rpx) / 2); + margin-bottom: 20rpx; +} + +.wang_waterfall { + display: flex; + flex-direction: row; + align-items: flex-start; + .wang_column { + display: flex; + flex: 1; + flex-direction: column; + height: auto; + width: 50%; + } +} + diff --git a/src/components/water-full/index.tsx b/src/components/water-full/index.tsx new file mode 100644 index 0000000..619e330 --- /dev/null +++ b/src/components/water-full/index.tsx @@ -0,0 +1,102 @@ +import { FC, useEffect, useState } from 'react' +import { View } from '@tarojs/components' +import VideoList from '@/components/videoList/videoList' +import Taro from '@tarojs/taro' +import styles from './index.module.scss' + +type Props = { + data: any[] +} +const WaterFull: FC = ({data}) => { + const [leftList,setLeftList] = useState([]) + const [rightList,setRightList] = useState([]) + const [tempList,setTempList] = useState([]) + const [copyFlowList,setCopyFlowList] = useState([]) + const startLength = copyFlowList.length + // const query = Taro.createSelectorQuery() + + console.log(rightList.length,leftList.length,"高") + + + useEffect(() => { + setTempList(cloneData(data).splice(startLength)) + setCopyFlowList(cloneData(data)) + }, [data]); + + useEffect(() => { + let tempArr = cloneData(tempList) + splitData(tempArr) + }, [tempList]) + + + async function splitData(arr: any[]){ + + if (!arr.length) { + return + } + // let leftHeight = await getRect('#wang-left-column') + // let rightHeight = await getRect('#wang-right-column') + // console.log("左侧高度",leftHeight,) + let item = arr[0] + Taro.nextTick(() => { + arr.length % 2 == 0 ? setLeftList((data) => ([...data, item])) : setRightList((data) => ([...data, item])) + }) + // if (leftHeight < rightHeight) { + // console.log("左侧插入",leftHeight,rightHeight) + // setLeftList((data) => ([...data,item])) + // } else if (leftHeight > rightHeight) { + // console.log("右侧插入",leftHeight,rightHeight) + // setRightList((data) => ([...data,item])) + // } else { + // console.log("左侧插入") + // setLeftList((data) => ([...data,item])) + // } + // 移除临时列表的第一项 + arr.splice(0, 1) + // 如果临时数组还有数据，继续循环 + Taro.nextTick(() => { + if (arr.length) { + splitData(arr) // 在当前同步流程结束后，下一个时间片执行 + } + }) + + } + + // async function getRect(selector:string): Promise { + // return new Promise((resolve) => { + // + // query.select(selector).boundingClientRect() + // // 执行查询，获取结果 + // query.exec((res) => { + // if (res && res[0]) { + // console.log('Element height:',res, res[0].height) + // resolve(res[0].height) + // } + // }) + // }) + // } + function cloneData(data:unknown[]) { + return JSON.parse(JSON.stringify(data)) + } + + return ( + + + + + + + {leftList.map(d => )} + + + + + {rightList.map(d => )} + + + + + + ) +} +export default WaterFull diff --git a/src/hooks/pubsub.ts b/src/hooks/pubsub.ts index bae18e7..2d22673 100644 --- a/src/hooks/pubsub.ts +++ b/src/hooks/pubsub.ts @@ -8,6 +8,7 @@ export default function usePubsub() { const registers = new Map() const pub = (topic: Topic, data: any) => { + console.log("发布没有") Taro.eventCenter.trigger(topic, data) }; diff --git a/src/pages/business/waterFull/test.config.ts b/src/pages/business/waterFull/test.config.ts new file mode 100644 index 0000000..17eb8ee --- /dev/null +++ b/src/pages/business/waterFull/test.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: 'waterFull' +}) diff --git a/src/pages/business/waterFull/test.tsx b/src/pages/business/waterFull/test.tsx new file mode 100644 index 0000000..6028ec0 --- /dev/null +++ b/src/pages/business/waterFull/test.tsx @@ -0,0 +1,37 @@ +import VirtualList from '@tarojs/components/virtual-list' +import React, { Component } from 'react' +import { View } from '@tarojs/components' +function buildData(offset = 0) { + return Array(500) + .fill(0) + .map((_, i) => i + offset) +} + +const Row = React.memo(({ id, index, data }:{id: any,index:any,data:any}) => { + return ( + + Row {index} : {data[index]} + + ) +}) + +export default class Index extends Component { + state = { + data: buildData(0), + } + + render() { + const { data } = this.state + const dataLen = data.length + return ( + + ) + } +} diff --git a/src/pages/home/home.tsx b/src/pages/home/home.tsx index 050dde9..27c8131 100644 --- a/src/pages/home/home.tsx +++ b/src/pages/home/home.tsx @@ -71,8 +71,7 @@ const Home: FC = () => { } > - + diff --git a/src/pages/preview/brand/info/info.tsx b/src/pages/preview/brand/info/info.tsx index 7e481ec..2b9066c 100644 --- a/src/pages/preview/brand/info/info.tsx +++ b/src/pages/preview/brand/info/info.tsx @@ -22,6 +22,8 @@ const BrandInfo: FC = () => { const [page, setPage] = useState(1) const [total, setTotal] = useState(0) const [enable, setEnable] = useState(true) + // const [maxHeight,setMaxHeight] = useState(600) + // const [maxWidth,setMaxWidth] = useState(750) let VideoRef = React.createRef() Taro.useDidHide(() => { @@ -34,11 +36,45 @@ const BrandInfo: FC = () => { getData() }, [id]) + useEffect(() => { + // console.log(brandInfo,'brandInfo') + // let tempArr:any[] = [] + // if(brandInfo?.brand_album){ + // tempArr.push(brandInfo.brand_album.split(',').map(item => { + // return item.split('?')[1].split('&') + // })) + // } + // if(brandInfo?.introductory_video_resource){ + // tempArr.push([`width=${brandInfo?.introductory_video_resource.width}`,`height=${brandInfo?.introductory_video_resource.height}`]) + // } + // console.log(tempArr,'tempArr') + // tempArr?.reduce((accumulator, currentValue)=>{ + // return accumulator = accumulator > currentValue[1].split('=')[1] ? accumulator : currentValue + // }) + }, [brandInfo]); + const getData = async () => { try { const data = await brandApi.info(id) Taro.setNavigationBarTitle({title: data.name}) setBrandInfo(data) + if(data.introductory_video) { + Taro.request({ + url: `https://wfs.yaojiankang.top/files/${data.introductory_video}`, + success: function (res) { + if (res.data.ok) { + setBrandInfo((data) => ({ + ...data!, + introductory_video_resource: { + url: res.data.data.object.path, + width: res.data.data.object.width, + height: res.data.data.object.height, + } + })) + } + } + }) + } const data1 = await brandApi.articleList(id, page) setTotal(data1.total) setArticleList([ @@ -86,13 +122,58 @@ const BrandInfo: FC = () => { function onChange(e) { setCurIndex(+e.detail.current + 1) + VideoRef.current.func() } return ( { - (brandInfo?.introductory_video_resource?.url || brandInfo?.brand_album)?.length > 0 && + brandInfo?.introductory_video_resource?.url && !brandInfo?.brand_album?.length && + + + + } + { + !brandInfo?.introductory_video_resource?.url && brandInfo?.brand_album?.length && + <> + { + brandInfo?.brand_album?.length > 1 ? + <> + + + { + brandInfo.brand_album.split(',').map((d) => + + + ) + } + + + {curIndex} + / + {(brandInfo?.brand_album?.split(',').length || 0) + ((brandInfo && brandInfo.introductory_video_resource) ? 1 : 0)} + + + : + <> + { + brandInfo?.brand_album?.split(',').map((d) => + ) + } + + + } + + } + { + (brandInfo?.introductory_video_resource?.url && brandInfo?.brand_album?.length) && <> { indicatorDots={false} onChange={onChange} > - {brandInfo?.introductory_video_resource?.url && + - } + { - (brandInfo?.brand_album?.length || 0) > 0 - && brandInfo?.brand_album?.split(',').map((d) => + brandInfo.brand_album.split(',').map((d) => ) diff --git a/src/pages/preview/health/health.module.scss b/src/pages/preview/health/health.module.scss index ee04a0c..e20a002 100644 --- a/src/pages/preview/health/health.module.scss +++ b/src/pages/preview/health/health.module.scss @@ -1,17 +1,24 @@ -.container { - width: 100%; - padding: 0 20rpx; - box-sizing: border-box; - column-count: 2; - column-gap: 20rpx; +//.container { +// width: 100%; +// padding: 0 20rpx; +// box-sizing: border-box; +// column-count: 2; +// column-gap: 20rpx; +//} + +.container{ + width:100%; + padding: 0 20rpx; + box-sizing: border-box; } .health { border-radius: 10px; - padding-top: 20rpx; + //padding-top: 20rpx; position: relative; break-inside: avoid; overflow: hidden; + margin-bottom: 20rpx; } .play { diff --git a/src/pages/preview/health/health.tsx b/src/pages/preview/health/health.tsx index de4417f..a76cd48 100644 --- a/src/pages/preview/health/health.tsx +++ b/src/pages/preview/health/health.tsx @@ -1,18 +1,20 @@ import {FC, useEffect, useState} from "react"; -import {View} from "@tarojs/components"; +import { View } from "@tarojs/components"; import {HomeApi} from "@/api"; import {useReachBottom} from "@tarojs/taro"; import styles from './health.module.scss' import Empty from "@/components/empty/empty"; import Spin from "@/components/spinner"; -import VideoList from "@/components/videoList/videoList"; +// import VideoList from "@/components/videoList/videoList"; import PageScript from "@/components/pageScript/pageScript"; +import WaterFull from '@/components/water-full' const Health: FC = () => { const [page, setPage] = useState(1) const [data, setData] = useState([]) const [total, setTotal] = useState(0) const [enable, setEnable] = useState(true) + const [loadText,setLoadText] = useState('加载中~') async function getData(page: number) { try { @@ -22,6 +24,10 @@ const Health: FC = () => { ...res.data, ]) setTotal(res.total) + if(res.total < 10){ + setLoadText('没有更多了') + } + } catch (e) { } setEnable(false) @@ -29,6 +35,7 @@ const Health: FC = () => { useReachBottom(() => { data.length < total && setPage(page + 1) + data.length >= total && setLoadText('没有更多了') }) useEffect(() => { @@ -36,6 +43,7 @@ const Health: FC = () => { }, [page]) + return ( <> @@ -43,9 +51,10 @@ const Health: FC = () => { { data.length > 0 ? <> - {data.map(d => )} + {/*{data.map(d => )}*/} + - + : getData(1)} name='暂无数据'/> } diff --git a/src/pages/preview/illness/sort/components/secondLevel.tsx b/src/pages/preview/illness/sort/components/secondLevel.tsx index dcc31ba..d8c3831 100644 --- a/src/pages/preview/illness/sort/components/secondLevel.tsx +++ b/src/pages/preview/illness/sort/components/secondLevel.tsx @@ -5,27 +5,55 @@ import Empty from "@/components/empty/empty"; import {ScrollView, View} from "@tarojs/components"; import styles from "../sort.module.scss"; import Spin from "@/components/spinner"; +import { illnessApi } from '@/api/illness' interface Props { category: Category loading: boolean - onChange: (id?: number) => void - illness: Map + secondId: number } const prefix = 'SORT' -const SecondLevel: FC = ({category, loading, onChange, illness}) => { +const SecondLevel: FC = ({category, loading,secondId,}) => { + const [loadings,setLoadings] = useState(loading || true) const globalData = Taro.getApp().globalData - const [secondId, setSecondId] = useState(undefined) + const [id, setId] = useState(0) + const [illness, setIllness] = useState>(new Map) useEffect(() => { - if (!secondId) { - setSecondId(category.resource_category?.[0]?.id) - } - onChange(secondId || category.resource_category?.[0]?.id) - }, [secondId]) + setId(secondId) + }, [secondId]); + + useEffect(() => { + changeSecond(id) + }, [id]); + function changeSecond(secondId?: number) { + if (secondId) { + setLoadings(true) + illnessApi.list(secondId, 1, 500).then(res => { + const data = new Map(illness) + if (data.has(secondId)) { + const newIllness = data.get(secondId) + data.delete(secondId) + data.set(secondId, res.list.reduce((pre, cur) => { + const index = pre.findIndex(d => d.id === cur.id) + if (index === -1) { + pre.push(cur) + } else { + pre.splice(index, 1, cur) + } + return pre + }, newIllness || [])) + } else { + data.set(secondId, res.list) + } + setIllness(data) + setLoadings(false) + }) + } + } function jump(id: number) { Taro.navigateTo({url: '/pages/preview/illness/list/list?id=' + id}) } @@ -40,8 +68,8 @@ const SecondLevel: FC = ({category, loading, onChange, illness}) => { category.resource_category?.map(d => setSecondId(d.id)} - className={secondId === d.id && styles.select}> + onClick={() => setId(d.id)} + className={id === d.id && styles.select}> {d.name} ) } @@ -52,20 +80,25 @@ const SecondLevel: FC = ({category, loading, onChange, illness}) => { scrollY className={styles.tree} scrollWithAnimation> - + { - (secondId && illness.get(secondId)?.length) ? + (secondId && illness.get(id)?.length) ? <> { - illness.get(secondId)?.map(d => jump(d.id)}> {d.name} ) } - 暂无更多 + 暂无更多 + + : + <> + {!loadings && } - : + } diff --git a/src/pages/preview/illness/sort/sort.tsx b/src/pages/preview/illness/sort/sort.tsx index 96dd257..174e173 100644 --- a/src/pages/preview/illness/sort/sort.tsx +++ b/src/pages/preview/illness/sort/sort.tsx @@ -3,7 +3,6 @@ import {FC, useMemo, useState} from "react"; import {Category, HomeApi} from "@/api"; import Taro from "@tarojs/taro"; import Tabs, {TabList} from "@/components/tabs/tabs"; -import {illnessApi} from "@/api/illness"; import Empty from "@/components/empty/empty"; import Spin from "@/components/spinner"; import NavigationBar from "@/components/navigationBar/navigationBar"; @@ -13,9 +12,10 @@ import SecondLevel from "./components/secondLevel"; const Sort: FC = () => { const [data, setData] = useState([]) const [firstId, setFirstId] = useState(undefined) // 一级选中 - const [illness, setIllness] = useState>(new Map) + const [enable, setEnable] = useState(true) const [loading, setLoading] = useState(false) + const [secondId,setSecondId] = useState(0) const globalData = Taro.getApp().globalData async function getData() { @@ -24,6 +24,7 @@ const Sort: FC = () => { setData(res) if (res.length) { setFirstId(res[0].id) + setSecondId(res[0].resource_category?.[0].id ?? 0) } } catch (e) { setLoading(false) @@ -42,42 +43,18 @@ const Sort: FC = () => { function firstIdChange(id: number) { setFirstId(id) const resource_category = data.find(d => d.id === id)?.resource_category - changeSecond(resource_category?.[0]?.id) + setSecondId(resource_category?.[0]?.id ?? 0) } Taro.useLoad(getData) - function changeSecond(secondId?: number) { - if (secondId) { - setLoading(true) - illnessApi.list(secondId, 1, 1000).then(res => { - const data = new Map(illness) - if (data.has(secondId)) { - const newIllness = data.get(secondId) - data.delete(secondId) - data.set(secondId, res.list.reduce((pre, cur) => { - const index = pre.findIndex(d => d.id === cur.id) - if (index === -1) { - pre.push(cur) - } else { - pre.splice(index, 1, cur) - } - return pre - }, newIllness || [])) - } else { - data.set(secondId, res.list) - } - setIllness(data) - }) - } - setLoading(false) - } + function swiperChange(e) { const firstData = data[e.target.current] if (!firstData) return; setFirstId(firstData.id) - changeSecond(firstData?.resource_category?.[0]?.id) + setSecondId(firstData?.resource_category?.[0]?.id ?? 0) } @@ -96,7 +73,7 @@ const Sort: FC = () => { current={data.findIndex(d => d.id === firstId)}> { data.map(d => - + ) } diff --git a/src/pages/preview/profession/profession.module.scss b/src/pages/preview/profession/profession.module.scss index f1b2133..52fd651 100644 --- a/src/pages/preview/profession/profession.module.scss +++ b/src/pages/preview/profession/profession.module.scss @@ -1,10 +1,15 @@ -.container { +//.container { +// width: 100%; +// padding: 0 20rpx; +// box-sizing: border-box; +// columns: 2; +// column-gap: 20rpx; +// position: relative; +//} +.container{ width: 100%; padding: 0 20rpx; box-sizing: border-box; - columns: 2; - column-gap: 20rpx; - position: relative; } .height { diff --git a/src/pages/preview/profession/profession.tsx b/src/pages/preview/profession/profession.tsx index d7ea21f..3dd78d1 100644 --- a/src/pages/preview/profession/profession.tsx +++ b/src/pages/preview/profession/profession.tsx @@ -6,8 +6,9 @@ import Empty from "@/components/empty/empty"; import Taro from "@tarojs/taro"; import styles from './profession.module.scss' import Spin from "@/components/spinner"; -import VideoList from "@/components/videoList/videoList"; +// import VideoList from "@/components/videoList/videoList"; import PageScript from "@/components/pageScript/pageScript"; +import WaterFull from '@/components/water-full/index' interface KillData { data: VideList[] @@ -21,6 +22,7 @@ const Profession = () => { const [data, setData] = useState>(new Map) const [enable, setEnable] = useState(true) const [loading, setLoading] = useState(false) + const [loadText,setLoadText] = useState('加载中~') /** * more 开启加载更多 @@ -33,12 +35,16 @@ const Profession = () => { /** 无更多 */ if (more && categoryData && categoryData.data.length >= categoryData.total) { + setLoadText("没有更多了") return } try { setLoading(true) const res = await HomeApi.skillList(categoryId!, page, 10) + if(res.total < 10){ + setLoadText("没有更多了") + } const dataList = res.data.reduce((pre, cur) => { const index = pre.findIndex(d => d.id === cur.id) if (index === -1) { @@ -83,6 +89,7 @@ const Profession = () => { function swiperChange(e) { const categoryId = tabs[e.target.current].value setCategoryId(Number(categoryId)) + setLoadText("加载中~") } Taro.useLoad(getCategory) @@ -99,20 +106,19 @@ const Profession = () => { onScrollToLower={() => getData(true)} className={styles.height}> - { - data.data.map(d => ) - } + + {/*{*/} + {/* data.data.map(d => */} + {/* */} + {/* )*/} + {/*}*/} - + ) } - if(!tabs.length){ - return ( - - ) - } + return ( <> @@ -120,6 +126,10 @@ const Profession = () => { + { + !tabs.length && !enable && + + } d.value === categoryId)} diff --git a/src/pages/preview/videoFull/videoFull.module.scss b/src/pages/preview/videoFull/videoFull.module.scss index 1d37ee6..5c64dc5 100644 --- a/src/pages/preview/videoFull/videoFull.module.scss +++ b/src/pages/preview/videoFull/videoFull.module.scss @@ -2,19 +2,21 @@ page { background: #000 !important; min-height: 100vh; } - -.video { +.container{ width: 100%; height: 100vh; position: fixed; top: 0; left: 0; right: 0; - bottom: calc(env(safe-area-inset-bottom) + 200rpx); + bottom: calc(env(safe-area-inset-bottom) + 100rpx); margin: auto; background: #000; + display: flex; +} +.video{ + margin:auto; } - .text { position: fixed; z-index: 20; @@ -32,7 +34,6 @@ page { z-index: 10; width: 100%; color: #fff; - background: #000; bottom: env(safe-area-inset-bottom); padding: 0 50rpx; box-sizing: border-box; @@ -45,8 +46,8 @@ page { } .img { - width: 48rpx; - height: 48rpx; + width: 35rpx; + height: 35rpx; verticalAlign: middle; margin-right: 15rpx; } diff --git a/src/pages/preview/videoFull/videoFull.tsx b/src/pages/preview/videoFull/videoFull.tsx index 62917e7..d709a54 100644 --- a/src/pages/preview/videoFull/videoFull.tsx +++ b/src/pages/preview/videoFull/videoFull.tsx @@ -1,5 +1,5 @@ -import {Video, View, Text, Image} from "@tarojs/components"; -import {FC, useState} from "react"; +import { View, Text, Image} from "@tarojs/components"; +import React, {FC, useState} from "react"; import Taro from "@tarojs/taro"; import styles from './videoFull.module.scss' import {brandApi, HomeApi} from "@/api"; @@ -7,6 +7,8 @@ import Collect from "@/components/collect/collect"; import Spin from "@/components/spinner"; import VideoEvent from "@/hooks/videoEvent"; import palyWhite from '@/static/img/palyWhite.png' +import { getWfsInfo } from '@/utils/wfs' +import VideoPro from '@/components/videoPro' interface Params { id: string @@ -14,19 +16,62 @@ interface Params { const VideoFull: FC = () => { const {id} = Taro.useRouter().params as unknown as Params - const video = Taro.createVideoContext('myVideo') - const [palying, setpalying] = useState(false) + // const video = Taro.createVideoContext('myVideo') + // const [palying] = useState(false) const [data, setData] = useState(null) const [enable, setEnable] = useState(!Taro.getCurrentInstance().preloadData) const [timing, setTiming] = useState(undefined) + const height: number = (data?.resource?.height ?? 1)/(data?.resource?.width ?? 1)*750 + console.log(height,'height') + + let VideoRef = React.createRef() + Taro.useDidHide(() => { + console.log("页面隐藏",VideoRef.current.func) + // 视频被隐藏后自动暂停播放了，再打开自动继续播放了 + // VideoRef.current.func() + }) + + Taro.useShareAppMessage((res) => { + if(res.from === 'button'){ + + } + return { + title:data?.title ?? '信桂', + path: `/pages/preview/videoFull/videoFull?id=${id}` + } + }) + + Taro.useShareTimeline(() => { + return { + title: '信桂' + } + }) + Taro.useLoad(() => { const preloadData: VideList = Taro.getCurrentInstance().preloadData as VideList if (preloadData) { setData(preloadData) } - brandApi.videoInfo(id).then(res => { + + brandApi.videoInfo(id).then( async res => { + if(res.resource_id){ + await getWfsInfo(res.resource_id).then(resp => { + res.resource = { id: resp.id, name: resp.name, url: resp.object.path,thumb: resp.object.thumb,width:resp.object.width,height:resp.object.height } + }).catch(()=>{ + + }) + // await Taro.request({ + // url: `https://wfs.yaojiankang.top/files/${res.resource_id}`, + // success: function (resp) { + // if(resp.data.ok){ + // res.resource = { id: 0, name: '', url: '' } + // res.resource.url = resp.data.data.object.path + // } + // } + // }) + } if (!res?.resource?.url) { Taro.showModal({ title: '加载资源失败', @@ -67,49 +112,58 @@ const VideoFull: FC = () => { clearTimeout(timing) }) - function click() { - if (palying) { - video.pause() - } else { - video.play() - } - } - - function onError() { - Taro.showModal({ - title: '视频播放错误', - confirmText: '退出', - showCancel: true, - success() { - Taro.navigateBack() - } - }) - } + // function click() { + // if (palying) { + // video.pause() + // } else { + // video.play() + // } + // } + + // function onError() { + // Taro.showModal({ + // title: '视频播放错误', + // confirmText: '退出', + // showCancel: true, + // success() { + // Taro.navigateBack() + // } + // }) + // } return ( { data ? <> - : } diff --git a/src/utils/wfs.ts b/src/utils/wfs.ts new file mode 100644 index 0000000..7fe989f --- /dev/null +++ b/src/utils/wfs.ts @@ -0,0 +1,53 @@ +import Taro from '@tarojs/taro' + +/** 文件基本信息 */ +interface CloudFile { + id: number; + objectId: number; + directoryId: number; + appId: number; + name: string; + object: CloudObject; + createdBy: number; + createdAt: string; + updatedAt: string; +} + +/** 文件对象信息 */ +interface CloudObject { + id: number; + hash: string; + size: number; + path: string; + thumb: string; + mime: string; + width: number; + height: number; + duration: number; + createdAt: string; + updatedAt: string; +} + +const files: Record = Object.create(null) + +export function getWfsInfo(id: number):Promise{ + if (Reflect.has(files, id)) { + return Promise.resolve(files[id]) + } + return new Promise((resolve, reject) => { + Taro.request({ + url: `https://wfs.yaojiankang.top/files/${id}`, + success(res) { + if (res.data.ok) { + files[id] = res.data.data + resolve(res.data.data) + } else { + reject(res.data.msg) + } + }, + fail(err) { + reject(err.errMsg) + } + }) + }) +} diff --git a/types/home.d.ts b/types/home.d.ts index 13f8de8..ea44f1a 100644 --- a/types/home.d.ts +++ b/types/home.d.ts @@ -4,12 +4,15 @@ interface VideList { introduction: string url_path: string resource: Resource + resource_id: number /** 播放量 */ video_view: number publish_time:string collects:boolean duration:number collect_quantity:number + video_height?:number + video_width?:number } interface Brand { @@ -25,6 +28,9 @@ interface Resource { id: number name: string url: string + thumb: string + width?: number + height?: number } // interface Kill {