From 4cc69d9c2f4a9c1a1a72d489565f8dda76c49096 Mon Sep 17 00:00:00 2001 From: king <2229249788@qq.com> Date: Fri, 8 Sep 2023 17:21:44 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E8=AF=BE=E7=A8=8B=E5=92=8C?= =?UTF-8?q?=E6=92=AD=E6=94=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/brand.ts | 6 +- src/api/home.ts | 12 +-- src/components/image/image.module.scss | 12 --- src/components/image/image.tsx | 21 ++-- .../videoList/videoList.module.scss | 27 +++++ src/components/videoList/videoList.tsx | 35 ++++++ .../preview/brand/article/article.module.scss | 7 +- src/pages/preview/health/health.tsx | 29 ++--- .../preview/profession/profession.module.scss | 9 ++ src/pages/preview/profession/profession.tsx | 32 +++--- .../preview/videoFull/videoFull.module.scss | 17 ++- src/pages/preview/videoFull/videoFull.tsx | 102 ++++++++++++------ src/static/img/healthShard.png | Bin 0 -> 28505 bytes src/static/img/professionShard.png | Bin 0 -> 21271 bytes src/static/img/组 498@2x.png | Bin 0 -> 111956 bytes src/static/img/组 499@2x.png | Bin 0 -> 8126 bytes types/home.d.ts | 17 +-- types/user.d.ts | 4 + 18 files changed, 218 insertions(+), 112 deletions(-) delete mode 100644 src/components/image/image.module.scss create mode 100644 src/components/videoList/videoList.module.scss create mode 100644 src/components/videoList/videoList.tsx create mode 100644 src/static/img/healthShard.png create mode 100644 src/static/img/professionShard.png create mode 100644 src/static/img/组 498@2x.png create mode 100644 src/static/img/组 499@2x.png diff --git a/src/api/brand.ts b/src/api/brand.ts index 2ee9b29..ca82074 100644 --- a/src/api/brand.ts +++ b/src/api/brand.ts @@ -20,7 +20,7 @@ export type ArticleRecord = { created_at: string content: string brands: BrandRecord[] - collect:boolean + collect: boolean } export const brandApi = { @@ -45,4 +45,8 @@ export const brandApi = { articleInfo(id: number) { return request(`/home/v1/article/${id}`, "GET") }, + /** 品牌 & 健康详情 */ + videoInfo(id: number | string) { + return request(`/home/v1/health/${id}`, "GET") + } } diff --git a/src/api/home.ts b/src/api/home.ts index 701819b..178b06b 100644 --- a/src/api/home.ts +++ b/src/api/home.ts @@ -31,8 +31,8 @@ export interface AdwareType { export interface HomeData { adverts: AdwareType[] - skill: Kill[] - health: Health[] + skill: VideList[] + health: VideList[] brand: { list: Brand[] } @@ -56,10 +56,10 @@ export const HomeApi = { }, /** 健康管理 */ healthTop(count: number) { - return request('/home/v1/health/top', "GET", {count}) + return request('/home/v1/health/top', "GET", {count}) }, health(page: number, page_size: number) { - return request<{ data: Health[], total: number }>('/home/v1/health/index', "GET", {page, page_size}) + return request<{ data: VideList[], total: number }>('/home/v1/health/index', "GET", {page, page_size}) }, /** 增加播放量 */ healthSetPlay(id) { @@ -71,13 +71,13 @@ export const HomeApi = { }, /** 技能 */ skillTop(count: number) { - return request('/home/v1/skill/top', "GET", {count}) + return request('/home/v1/skill/top', "GET", {count}) }, skillCategory() { return request('/home/v1/skill/category', "GET") }, skillList(categoryId: number, page: number, page_size: number) { - return request<{ data: Kill[], total: number }>('/home/v1/skill/index', "GET", {categoryId, page, page_size}) + return request<{ data: VideList[], total: number }>('/home/v1/skill/index', "GET", {categoryId, page, page_size}) }, skillSetPlay(id: number) { return request(`/home/v1/skill/set_play/${id}`, "PUT") diff --git a/src/components/image/image.module.scss b/src/components/image/image.module.scss deleted file mode 100644 index 44a776b..0000000 --- a/src/components/image/image.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -.imgBox { - position: relative; -} - -.imgError { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - margin: auto; -} diff --git a/src/components/image/image.tsx b/src/components/image/image.tsx index de4c186..9f8a290 100644 --- a/src/components/image/image.tsx +++ b/src/components/image/image.tsx @@ -1,15 +1,16 @@ import {FC, useEffect, useState} from "react"; import {Image, ImageProps, View} from "@tarojs/components"; import shard from '@/static/img/shard.png' -import styles from './image.module.scss' import Taro from "@tarojs/taro"; import avatar from '@/static/img/avatar.png' +import healthShard from '@/static/img/healthShard.png' +import professionShard from '@/static/img/professionShard.png' interface Props extends ImageProps { width?: number | string height?: number | string fallback?: string - errorType?: "acquiesce" | 'avatar' + errorType?: ImgErrType } const Img: FC = ({src, mode = 'aspectFill', width, height, fallback = shard, ...props}) => { @@ -34,6 +35,12 @@ const Img: FC = ({src, mode = 'aspectFill', width, height, fallback = sha case "avatar": setErrorUrl(avatar) break + case 'health': + setErrorUrl(healthShard) + break + case 'profession': + setErrorUrl(professionShard) + break } }, [props.errorType]) @@ -53,11 +60,11 @@ const Img: FC = ({src, mode = 'aspectFill', width, height, fallback = sha return ( + className={`${props?.className}`}> {!isError && = ({src, mode = 'aspectFill', width, height, fallback = sha { isError && !loading && } diff --git a/src/components/videoList/videoList.module.scss b/src/components/videoList/videoList.module.scss new file mode 100644 index 0000000..2387711 --- /dev/null +++ b/src/components/videoList/videoList.module.scss @@ -0,0 +1,27 @@ +.container { + width: 100%; + padding: 20rpx; + box-sizing: border-box; + columns: 2; + column-gap: 20rpx; +} + +.health { + break-inside: avoid; + background: #fff; + border-radius: 10px; + overflow: hidden; + margin-bottom: 20rpx; + position: relative; +} + +.play { + position: absolute; + min-height: 70rpx !important; + z-index: 9999; + width: 40rpx !important; + height: 40rpx !important; + top: 20rpx; + right: 20rpx; + background: transparent !important; +} diff --git a/src/components/videoList/videoList.tsx b/src/components/videoList/videoList.tsx new file mode 100644 index 0000000..942390f --- /dev/null +++ b/src/components/videoList/videoList.tsx @@ -0,0 +1,35 @@ +import {FC} from "react"; +import styles from "@/pages/preview/health/health.module.scss"; +import {Image, Text, View} from "@tarojs/components"; +import Img from "@/components/image/image"; +import play from "@/static/img/play-back.png"; +import {formatDate} from "@/utils/time"; +import Taro from "@tarojs/taro"; + +interface Props { + data: VideList + errorType?: ImgErrType +} + +const VideoList: FC = ({data, errorType}) => { + function jump() { + Taro.preload(data) + Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?id=${data.id}`}) + } + + return ( + + + + + {data.title} + {data.introduction} + + {formatDate(new Date(data.publish_time), "YY-MM-dd")} + {data.video_view}观看 + + + ) +} + +export default VideoList diff --git a/src/pages/preview/brand/article/article.module.scss b/src/pages/preview/brand/article/article.module.scss index f88807c..9b0d9ed 100644 --- a/src/pages/preview/brand/article/article.module.scss +++ b/src/pages/preview/brand/article/article.module.scss @@ -1,3 +1,7 @@ +page{ + background: #fff !important; +} + .fixedBox { position: fixed; z-index: 1000; @@ -74,8 +78,5 @@ } .articleBox { - background: #fff; - min-height: calc(100vh - env(safe-area-inset-bottom) + 180rpx); - box-sizing: border-box; padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 150rpx) 30rpx; } diff --git a/src/pages/preview/health/health.tsx b/src/pages/preview/health/health.tsx index fcf18cb..d07188e 100644 --- a/src/pages/preview/health/health.tsx +++ b/src/pages/preview/health/health.tsx @@ -1,24 +1,25 @@ import {FC, useEffect, useState} from "react"; -import {Image, Text, View} from "@tarojs/components"; +import {View} from "@tarojs/components"; import {HomeApi} from "@/api"; -import Taro, {useReachBottom} from "@tarojs/taro"; +import {useReachBottom} from "@tarojs/taro"; import styles from './health.module.scss' -import play from '@/static/img/play-back.png' import Empty from "@/components/empty/empty"; import Spin from "@/components/spinner"; -import Img from "@/components/image/image"; -import {formatDate} from "@/utils/time"; +import VideoList from "@/components/videoList/videoList"; const Health: FC = () => { const [page, setPage] = useState(1) - const [data, setData] = useState([]) + const [data, setData] = useState([]) const [total, setTotal] = useState(0) const [enable, setEnable] = useState(true) async function getData(page: number) { try { const res = await HomeApi.health(page, 10) - setData(res.data) + setData([ + ...data, + ...res.data + ]) setTotal(res.total) } catch (e) { } @@ -33,10 +34,6 @@ const Health: FC = () => { getData(page) }, [page]) - function jump(health: Health) { - HomeApi.healthSetPlay(health.id) - Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?url=${health.resource.url}&poster=${health.url_path}&title=${health.title}`}) - } return ( <> @@ -45,15 +42,7 @@ const Health: FC = () => { { data.length > 0 ? <> - {data.map(d => jump(d)}> - - - {d.title} - - {formatDate(new Date(d.publish_time), "YY-MM-dd")} - {d.video_view}观看 - - )} + {data.map(d => )} 暂无更多 diff --git a/src/pages/preview/profession/profession.module.scss b/src/pages/preview/profession/profession.module.scss index a1ee13c..8c828f4 100644 --- a/src/pages/preview/profession/profession.module.scss +++ b/src/pages/preview/profession/profession.module.scss @@ -1,3 +1,12 @@ +.container { + width: 100%; + padding: 20rpx; + box-sizing: border-box; + columns: 2; + column-gap: 20rpx; + position: relative; +} + .height { height: calc(100vh - 80rpx - env(safe-area-inset-bottom)); overflow: hidden; diff --git a/src/pages/preview/profession/profession.tsx b/src/pages/preview/profession/profession.tsx index 7ee3f03..d5cd9c8 100644 --- a/src/pages/preview/profession/profession.tsx +++ b/src/pages/preview/profession/profession.tsx @@ -6,10 +6,10 @@ import Empty from "@/components/empty/empty"; import Taro from "@tarojs/taro"; import styles from './profession.module.scss' import Spin from "@/components/spinner"; -import Img from "@/components/image/image"; +import VideoList from "@/components/videoList/videoList"; interface KillData { - data: Kill[] + data: VideList[] total: number page: number } @@ -19,6 +19,7 @@ const Profession = () => { const [categoryId, setCategoryId] = useState(null) const [data, setData] = useState>(new Map) const [enable, setEnable] = useState(true) + const [loading, setLoading] = useState(false) /** * more 开启加载更多 @@ -35,6 +36,7 @@ const Profession = () => { } try { + setLoading(true) const res = await HomeApi.skillList(categoryId!, page, 10) const dataList = res.data.reduce((pre, cur) => { const index = pre.findIndex(d => d.id === cur.id) @@ -54,6 +56,7 @@ const Profession = () => { setData(oldData) } catch (e) { } + setLoading(false) } useEffect(() => { @@ -75,10 +78,6 @@ const Profession = () => { setCategoryId(tab.tab?.value as number) } - function jump(kill: Kill) { - HomeApi.skillSetPlay(kill.id) - Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?url=${kill.resource.url}&poster=${kill.url_path}&title=${kill.resource.name}`}) - } function swiperChange(e) { const categoryId = tabs[e.target.current].value @@ -89,21 +88,21 @@ const Profession = () => { function KillList(data: KillData): JSX.Element { if (!data?.data?.length) { - return + return ( + + ) } return ( getData(true)} className={styles.height}> - { - data.data.map(d => - jump(d)}> - - {d?.resource?.name} - - ) - } + + + { + data.data.map(d => ) + } + 暂无更多 ) @@ -123,7 +122,8 @@ const Profession = () => { className={styles.height} style={{paddingTop: '10px'}}> { - tabs.map(d => + tabs.map(d => + {KillList(data.get(Number(d.value))!)} ) } diff --git a/src/pages/preview/videoFull/videoFull.module.scss b/src/pages/preview/videoFull/videoFull.module.scss index 217a8ec..59613a0 100644 --- a/src/pages/preview/videoFull/videoFull.module.scss +++ b/src/pages/preview/videoFull/videoFull.module.scss @@ -1,3 +1,8 @@ +page { + background: #000 !important; + min-height: 100vh; +} + .video { width: 100%; height: 100vh; @@ -5,15 +10,19 @@ top: 0; left: 0; right: 0; - bottom: 0; + bottom: calc(env(safe-area-inset-bottom) + 250rpx); margin: auto; background: #000; } .title { position: fixed; - z-index: 9999; - top: 20rpx; - left: 20rpx; + z-index: 10; + bottom: env(safe-area-inset-bottom); + width: 100%; color: #fff; + padding: 0 30rpx; + box-sizing: border-box; + background: #000; + width: 100%; } diff --git a/src/pages/preview/videoFull/videoFull.tsx b/src/pages/preview/videoFull/videoFull.tsx index e44d64e..2349c9c 100644 --- a/src/pages/preview/videoFull/videoFull.tsx +++ b/src/pages/preview/videoFull/videoFull.tsx @@ -2,28 +2,52 @@ import {Video, View} from "@tarojs/components"; import {FC, useState} from "react"; import Taro from "@tarojs/taro"; import styles from './videoFull.module.scss' +import {brandApi} from "@/api"; +import Collect from "@/components/collect/collect"; +import Spin from "@/components/spinner"; interface Params { - url: string - poster?: string - title?: string + id: string } const VideoFull: FC = () => { - const params = Taro.useRouter().params as unknown as Params + const {id} = Taro.useRouter().params as unknown as Params const video = Taro.createVideoContext('myVideo') const [palying, setpalying] = useState(false) + const [data, setData] = useState(null) + const [enable, setEnable] = useState(!Taro.getCurrentInstance().preloadData) Taro.useLoad(() => { - console.log(params) - if (!params.url) { - Taro.showModal({ - title: '播放地址错', - success() { - Taro.navigateBack() - } - }) + const preloadData: VideList = Taro.getCurrentInstance().preloadData as VideList + if (preloadData) { + setData(preloadData) } + brandApi.videoInfo(id).then(res => { + if (!res?.resource?.url) { + Taro.showModal({ + title: '加载资源失败', + confirmText: '退出', + showCancel: true, + success() { + Taro.navigateBack() + } + }) + } + setData(res) + }).catch(() => { + if (!preloadData) { + Taro.showModal({ + title: '加载资源失败', + confirmText: '退出', + showCancel: true, + success() { + Taro.navigateBack() + } + }) + } + }).finally(() => { + setEnable(false) + }) }) function click() { @@ -46,28 +70,38 @@ const VideoFull: FC = () => { } return ( - <> - {params.title && {params.title}} -