From ae52d73588ba27604d6f9d77218c2d675a393885 Mon Sep 17 00:00:00 2001 From: king <2229249788@qq.com> Date: Fri, 8 Sep 2023 14:52:40 +0800 Subject: [PATCH] =?UTF-8?q?=E5=93=81=E7=89=8C=E6=94=B6=E8=97=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 4 +- src/api/brand.ts | 3 +- src/api/user.ts | 8 +- src/components/collect/collect.module.scss | 65 ++++++++++++- src/components/collect/collect.tsx | 45 ++++++++- .../videoInfo/components/catalogue.tsx | 17 ++-- src/pages/business/videoInfo/videoInfo.scss | 3 + src/pages/index/index.tsx | 3 +- src/pages/preview/brand/article/article.tsx | 2 +- src/pages/preview/brand/info/info.tsx | 2 +- src/pages/preview/brand/list/list.tsx | 89 ++++++++++-------- .../illness/article/article.module.scss | 23 +++-- src/pages/preview/illness/article/article.tsx | 51 ++++++---- src/static/img/catalogue.png | Bin 0 -> 424 bytes src/static/img/omit.png | Bin 0 -> 324 bytes types/user.d.ts | 14 +++ 16 files changed, 234 insertions(+), 95 deletions(-) create mode 100644 src/static/img/catalogue.png create mode 100644 src/static/img/omit.png diff --git a/.env b/.env index 86e2b46..51b63d7 100644 --- a/.env +++ b/.env @@ -1,5 +1,5 @@ #TARO_APP_API=https://yjx.dev.yaojiankang.top -TARO_APP_API=https://mooc.yaojiankang.top -#TARO_APP_API=https://shopfix.yaojiankang.top +#TARO_APP_API=https://mooc.yaojiankang.top +TARO_APP_API=https://shopfix.yaojiankang.top #TARO_APP_API=https://playedu.yaojiankang.top TARO_APP_LGOIN=true diff --git a/src/api/brand.ts b/src/api/brand.ts index 4848853..5c767ff 100644 --- a/src/api/brand.ts +++ b/src/api/brand.ts @@ -11,7 +11,8 @@ export type BrandRecord = { introductory_video_resource: any article_count: number created_at: string - page_view:number + page_view: number + collect: boolean } export type ArticleRecord = { title: string diff --git a/src/api/user.ts b/src/api/user.ts index 6d7996a..a7baa9b 100644 --- a/src/api/user.ts +++ b/src/api/user.ts @@ -94,8 +94,8 @@ export const userApi = { companyReplace(id: number) { return request(`/api/v1/company/replace/${id}`, "PATCH") }, - // /** 上传头像 */ - // putAvatar(file: string) { - // return request('/api/v1/user/avatar', "PUT", {file}) - // } + /** 收藏 */ + create(data: Create) { + return request("/api/v1/collect/create", "POST", data) + } } diff --git a/src/components/collect/collect.module.scss b/src/components/collect/collect.module.scss index 3262142..5ac8c34 100644 --- a/src/components/collect/collect.module.scss +++ b/src/components/collect/collect.module.scss @@ -3,11 +3,68 @@ align-items: center; color: #909795; font-size: 24rpx; + padding: 0 10rpx; +} + +.collectImage { + position: relative; + width: 32rpx; + height: 32rpx; + margin-right: 10rpx; Image { - width: 32rpx; - height: 32rpx; - margin-right: 10rpx; - //vertical-align: middle; + width: 100%; + height: 100%; + } +} + +.zoom { + top: 0; + left: 0; + position: absolute; + content: ''; + width: 32rpx; + height: 32rpx; + border-radius: 50%; + border: 1px solid #FF9E5F; + animation: Zooms 300ms ease forwards; + opacity: 1; + transform-origin: -100%, -100% 0; +} + +.pulse { + animation: Pulse 300ms; +} + +@keyframes Zooms { + 0% { + transform: scale(1); + } + 30% { + transform: scale(1.5); + left: -5%; + top: -5%; + opacity: 1; + } + 100% { + transform: scale(1.5); + left: -5%; + top: -5%; + opacity: 0; + } +} + +@keyframes Pulse { + 0% { + transform: scale(.2); + } + 60% { + transform: scale(1.2); + } + 80% { + transform: scale(.8); + } + 100% { + transform: scale(1); } } diff --git a/src/components/collect/collect.tsx b/src/components/collect/collect.tsx index 3c000a6..78c90fc 100644 --- a/src/components/collect/collect.tsx +++ b/src/components/collect/collect.tsx @@ -1,20 +1,57 @@ -import {FC} from "react"; +import {CSSProperties, FC, useCallback, useEffect, useState} from "react"; import star from '@/static/img/star.png' import starLine from '@/static/img/starLine.png' import {Image, View} from "@tarojs/components"; import styles from './collect.module.scss' +import {Profile} from "@/store" +import Taro from "@tarojs/taro"; +import {userApi} from "@/api"; interface Props { onClick?: () => void select?: boolean + stylesImage?: CSSProperties + styles?: CSSProperties + owner_id: number + owner_type: CreateOwnerType + textHidden?: boolean } /** 收藏 */ const Collect: FC = (props) => { + const {token} = Profile.useContainer() + const [loading, setLoading] = useState(false) + const [select, setSelect] = useState(props.select) + + useEffect(() => { + setSelect(props.select) + }, [props]) + + const change = useCallback(async () => { + if (!token) { + Taro.navigateTo({url: '/pages/login/login'}) + return + } + if (loading) return; + props.onClick?.() + console.log(select) + setSelect(!select) + setLoading(true) + await userApi.create({owner_id: props.owner_id, owner_type: props.owner_type}) + setTimeout(() => { + setLoading(false) + }, 300) + }, [loading, token, select]) + return ( - - - {props.select ? '已收藏' : '收藏'} + + + + + + {!props.textHidden && (select ? '已收藏' : '收藏')} ) } diff --git a/src/pages/business/videoInfo/components/catalogue.tsx b/src/pages/business/videoInfo/components/catalogue.tsx index 55a1a5b..fe66310 100644 --- a/src/pages/business/videoInfo/components/catalogue.tsx +++ b/src/pages/business/videoInfo/components/catalogue.tsx @@ -12,6 +12,8 @@ import hourRecord from "@/static/img/hourRecord.png" import CustomPageContainer from "@/components/custom-page-container/custom-page-container"; import {Profile} from "@/store"; import LoginView from "@/components/loginView"; +import Collect from "@/components/collect/collect"; +import omit from '@/static/img/omit.png' interface Props { data: CourseDepData | null @@ -45,11 +47,6 @@ const Catalogue: FC = ({data, setHors, id, playId}) => { } }) - - // function onPause() { - // videoEvents.setVideoState('pause') - // } - function jumCurHistory() { if (playId) { Taro.navigateTo({url: `/pages/business/hourHistory/hourHistory?courseId=${id}&hourId=${playId}`}) @@ -195,7 +192,15 @@ const Catalogue: FC = ({data, setHors, id, playId}) => { playing ? 播放中 : 立即学习 } - setShow(true)}>... + + setShow(true)}> + + 更多 + } diff --git a/src/pages/business/videoInfo/videoInfo.scss b/src/pages/business/videoInfo/videoInfo.scss index 1874753..ce38d75 100644 --- a/src/pages/business/videoInfo/videoInfo.scss +++ b/src/pages/business/videoInfo/videoInfo.scss @@ -76,6 +76,7 @@ } .Videobutton { + align-items: center; display: flex; background: #fff; position: fixed; @@ -84,6 +85,8 @@ bottom: env(safe-area-inset-bottom); box-sizing: border-box; padding: 10px 20px; + color: #909795; + font-size: 24rpx; } .more { diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 91bbaad..65c7e62 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -8,6 +8,7 @@ import NavigationBar from "@/components/navigationBar/navigationBar"; import Spin from "@/components/spinner"; import Img from "@/components/image/image"; import {beforeTime} from "@/utils/time"; +import {isBoolean} from "@tarojs/shared"; const category: TabList[] = [ {title: "企选课程", value: 'is_required'}, @@ -42,7 +43,7 @@ const AuditMode: FC = () => { const [enable, setEnable] = useState(true) useEffect(() => { publicApi.course({page: 1, pageSize: 10}).then(res => { - setAuditMode(res.audit_mode) + setAuditMode(isBoolean(res.audit_mode) ? res.audit_mode : res.audit_mode === 'true') setArticles(res.articles) setEnable(false) }) diff --git a/src/pages/preview/brand/article/article.tsx b/src/pages/preview/brand/article/article.tsx index f8b72a6..bc7f5c5 100644 --- a/src/pages/preview/brand/article/article.tsx +++ b/src/pages/preview/brand/article/article.tsx @@ -20,7 +20,7 @@ const article: FC = () => { const [ultra, setUltra] = useState(true) const globalData = Taro.getApp().globalData const pageHeight = globalData.windowHeight - globalData.textBarHeight - globalData.statusBarHeight - const {children} = useMemo(() => parse(articleInfo?.content || ''), [articleInfo]) + const {children, headings} = useMemo(() => parse(articleInfo?.content || ''), [articleInfo]) useEffect(() => { setTimeout(() => { diff --git a/src/pages/preview/brand/info/info.tsx b/src/pages/preview/brand/info/info.tsx index b824190..f8d2413 100644 --- a/src/pages/preview/brand/info/info.tsx +++ b/src/pages/preview/brand/info/info.tsx @@ -111,7 +111,7 @@ const BrandInfo: FC = () => { {brandInfo?.name} - + diff --git a/src/pages/preview/brand/list/list.tsx b/src/pages/preview/brand/list/list.tsx index 1ccaf2b..ab1e9ba 100644 --- a/src/pages/preview/brand/list/list.tsx +++ b/src/pages/preview/brand/list/list.tsx @@ -19,40 +19,40 @@ const BrandItem: FC<{ data: BrandRecord; onClick: VoidFunction }> = ({data, onCl /> } else if (data.brand_album) { media = } return ( - - - - - {data.name} - {beforeTime(data.created_at)}·加入 + + + + + + {data.name} + {beforeTime(data.created_at)}·加入 + - - - {media} - + + {media} + - - {data.graphic_introduction} + + {data.graphic_introduction} + @@ -60,7 +60,8 @@ const BrandItem: FC<{ data: BrandRecord; onClick: VoidFunction }> = ({data, onCl {data.article_count || 0} - + {JSON.stringify(data.collect)} + @@ -78,9 +79,13 @@ const BrandList: FC = () => { getData() }, [page]) - const getData = useCallback(async () => { + Taro.useDidShow(() => { + brands.length && getData(true) + }) + + const getData = useCallback(async (replace = false) => { try { - const res = await brandApi.list(page, 10) + const res = await brandApi.list(replace ? 1 : page, replace ? 10 * page : 10) if (page === 1) { if (res.list.length < 10) { setText('暂无更多') @@ -89,10 +94,16 @@ const BrandList: FC = () => { } } setTotal(res.total) - setBrands([ - ...brands, - ...res.list - ]) + const data = res.list.reduce((pre, cur) => { + const index = pre.findIndex(d => d.id === cur.id) + if (index > -1) { + pre.splice(index, 1, cur) + } else { + pre.push(cur) + } + return pre + }, JSON.parse(JSON.stringify(brands))) + setBrands(data) } catch (e) { } setLoading(false) @@ -111,22 +122,18 @@ const BrandList: FC = () => { } }, [total, brands])) - let content: ReactNode - if (brands.length) { - content = ( - <> - {brands.map(d => jumpInfo(d.id)}/>)} - {text} - - ) - } else { - content = - } return ( - {content} + { + brands.length ? + <> + {brands.map(d => jumpInfo(d.id)}/>)} + {text} + + : + } ) } diff --git a/src/pages/preview/illness/article/article.module.scss b/src/pages/preview/illness/article/article.module.scss index 1fbc3f1..0c16607 100644 --- a/src/pages/preview/illness/article/article.module.scss +++ b/src/pages/preview/illness/article/article.module.scss @@ -4,26 +4,25 @@ bottom: 0; width: 750rpx; box-sizing: border-box; - height: 180rpx; - padding-bottom: 60rpx; + height: 150rpx; + padding-bottom: env(safe-area-inset-bottom); display: flex; - justify-content: center; + justify-content: flex-end; align-items: center; background: #F5F8F7; + color: #909795; + font-size: 26rpx; - view { - width: 560rpx; - height: 76rpx; - background: #45D4A8; - border-radius: 38rpx 38rpx 38rpx 38rpx; - color: #fff; - font-weight: 500; - font-size: 40rpx; + View { + padding: 0 10px; text-align: center; - line-height: 76rpx; } } +.articleBox { + padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 150rpx) 30rpx; +} + .fixedBox { position: fixed; z-index: 100; diff --git a/src/pages/preview/illness/article/article.tsx b/src/pages/preview/illness/article/article.tsx index 172a5c1..ce221d6 100644 --- a/src/pages/preview/illness/article/article.tsx +++ b/src/pages/preview/illness/article/article.tsx @@ -8,6 +8,8 @@ import {Profile} from "@/store"; import {parse} from "@/utils/marked/marked"; import {beforeTime} from "@/utils/time"; import Img from "@/components/image/image"; +import catalogue from '@/static/img/catalogue.png' +import Collect from "@/components/collect/collect"; const article: FC = () => { const {token} = Profile.useContainer() @@ -32,7 +34,6 @@ const article: FC = () => { } function mao(id: string) { - console.log(id) setShow(false) Taro.nextTick(() => { query.select(`#${id}`).boundingClientRect() @@ -52,13 +53,24 @@ const article: FC = () => { return ( <> setShow(true)}> - 文章导航 + + + + + + 目录 + - + {articleInfo?.title} { @@ -74,7 +86,6 @@ const article: FC = () => { ) } - {children} { @@ -92,22 +103,26 @@ const article: FC = () => { } - { - setShow(false) - }} show={show} round={true} overlay={true} overlayStyle={'background:rgba(0,0,0,0.3)'}> + setShow(false)} + show={show} + round + overlay + overlayStyle={'background:rgba(0,0,0,0.3)'}> - {headings.length > 0 && - headings.map((d) => - { - mao(d.id) - }}>{d.text} - ) - } + {headings.length > 0 && headings.map((d) => mao(d.id)}> + {d.text} + + )} ) } + return helloWorld() } export default article diff --git a/src/static/img/catalogue.png b/src/static/img/catalogue.png new file mode 100644 index 0000000000000000000000000000000000000000..fe7be4333c1b481203924fdf39674fcd8bbfd545 GIT binary patch literal 424 zcmV;Z0ayNsP)Px$Vo5|nR9Hvtm%mEGP!z_$lWIXw7j>|>>SC;e;4C!V1))ZCbm{2m3%EJ-0mMZ# zzJQAhys&v*X(PBjb@4 zPzP{IgelYHY4i;Anfa)>ws-bh_h-dkJLnTIohG@(*xs${&m}fkZ3Pb?Y*;Khaw-Oz zq3e5z4Q@SNEKNGjE<1&cDRM7{a~`eMJ`)=pdEATw<;<9Z7J@?1lz^#z{Qkk*dvUcL zyaSjuU5$>Ofo|yf3wie9`_T0_)m}VNsDr7bLqS)=#N9X^G@|u`7x7|UivQ`x@66bo z-bOAVXi8BCS|?cPTyN8mPY4;mi2j<|!)61|#A5nN_Xy$f7T+}=OnWZ_q+5So4Er(~gGZ;Nk2 zM2Er3&t~%Z`)4X_`EzjEb7syHdld~e*mkn**i#a~Q^Z?P`Er586R8KERyFUoco*qv z=DuK`)r1FABhOX7-1S~f-r(fp?*+R(^cgPv<(!-%n;s;7$)x}HiydwY5|?T=xj*wj~@@&Z4B$9o0BGFH=Oon-^pelbaE^E U&XqgP14Dwr)78&qol`;+0I2qekpKVy literal 0 HcmV?d00001 diff --git a/types/user.d.ts b/types/user.d.ts index cf2ba55..17120db 100644 --- a/types/user.d.ts +++ b/types/user.d.ts @@ -95,5 +95,19 @@ interface HourHistory extends Curriculum { } } +/** + * 收藏类型,收藏类型 1文章 2视频 3课程 4其他(品牌) + */ +type CreateOwnerType = 1 | 2 | 3 | 4 + +/** 收藏 */ +interface Create { + /** + * 收藏id + */ + owner_id: number + owner_type: CreateOwnerType +} +