From aa4e006b00f8c71bf3ec596615874db79bee1fab Mon Sep 17 00:00:00 2001 From: king <2229249788@qq.com> Date: Wed, 13 Sep 2023 16:46:49 +0800 Subject: [PATCH] =?UTF-8?q?1.=E4=BF=AE=E6=94=B9=E5=BC=B9=E7=AA=97=E5=B1=85?= =?UTF-8?q?=E4=B8=AD=E5=8A=A8=E7=94=BB=202.=E4=BF=AE=E6=94=B9=E6=94=B6?= =?UTF-8?q?=E8=97=8F=E5=A4=9A=E6=AC=A1=E8=A7=A6=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/collect/collect.tsx | 21 ++++- .../custom-page-container.module.scss | 4 +- .../custom-page-container.tsx | 10 ++- .../textCollapse/collapse.module.scss | 2 +- src/components/textCollapse/collapse.tsx | 76 +++++++++--------- src/components/videoList/videoList.tsx | 29 ++++--- .../preview/brand/article/article.module.scss | 4 +- src/pages/preview/brand/info/info.tsx | 4 +- src/pages/preview/health/health.module.scss | 24 ++++++ src/static/img/palyWhite.png | Bin 0 -> 478 bytes src/static/img/starWhite.png | Bin 0 -> 690 bytes 11 files changed, 112 insertions(+), 62 deletions(-) create mode 100644 src/static/img/palyWhite.png create mode 100644 src/static/img/starWhite.png diff --git a/src/components/collect/collect.tsx b/src/components/collect/collect.tsx index a1c57fb..974cf0e 100644 --- a/src/components/collect/collect.tsx +++ b/src/components/collect/collect.tsx @@ -18,6 +18,17 @@ interface Props { onUpdate?: (v: boolean) => void } +const versions = new Map() + +const collect = async (scope: string, params: Create, setSelect: (v: boolean) => void, value: boolean) => { + const localVersion = (versions.get(scope) || 0) + 1 + versions.set(scope, localVersion) + await userApi.create(params) + if (localVersion === versions.get(scope)) { + setSelect(value) + } +} + /** 收藏 */ const Collect: FC = (props) => { const {token} = Profile.useContainer() @@ -33,12 +44,16 @@ const Collect: FC = (props) => { Taro.navigateTo({url: '/pages/login/login'}) return } - if (loading) return; props.onClick?.() - await userApi.create({owner_id: props.owner_id, owner_type: props.owner_type}) setSelect(!select) setLoading(true) - props.onUpdate?.(!select) + collect(`${props.owner_id}#${props.owner_type}`, { + owner_id: props.owner_id, + owner_type: props.owner_type, + }, (v) => { + setSelect(v) + props.onUpdate?.(v) + }, !select) setTimeout(() => { setLoading(false) }, 300) diff --git a/src/components/custom-page-container/custom-page-container.module.scss b/src/components/custom-page-container/custom-page-container.module.scss index 7cce758..add4bf3 100644 --- a/src/components/custom-page-container/custom-page-container.module.scss +++ b/src/components/custom-page-container/custom-page-container.module.scss @@ -84,11 +84,11 @@ @keyframes childrenCenter { from { - transform: scale(0); + transform: scale(0) translateY(calc(-50% - 100px)); padding: 0; } to { - transform: scale(1); + transform: scale(1) translateY(calc(-50% - 100px)); padding: 0 30px; } } diff --git a/src/components/custom-page-container/custom-page-container.tsx b/src/components/custom-page-container/custom-page-container.tsx index 35140d0..9bb02d1 100644 --- a/src/components/custom-page-container/custom-page-container.tsx +++ b/src/components/custom-page-container/custom-page-container.tsx @@ -49,7 +49,9 @@ export const PageContainerInner: FC = (props) => { case 'center': style.width = '90%' style.borderRadius = '10px' - style.padding = '0' + style.padding = '0 !important' + style.top = '50%' + // style.transform = 'translateY(-100px) !important' break } @@ -89,14 +91,14 @@ export const PageContainerInner: FC = (props) => { const CustomPageContainer: FC = (props) => { if (props.position === 'center') { - return + return } if (process.env.TARO_ENV !== 'h5') { - return ( + return ( {props.children} ) } - return (); + return (); } export default CustomPageContainer diff --git a/src/components/textCollapse/collapse.module.scss b/src/components/textCollapse/collapse.module.scss index e937475..0d038b2 100644 --- a/src/components/textCollapse/collapse.module.scss +++ b/src/components/textCollapse/collapse.module.scss @@ -1,4 +1,4 @@ -.expansion{ +.expansion { display: inline-block; padding: 0 10rpx; color: #00d6ac; diff --git a/src/components/textCollapse/collapse.tsx b/src/components/textCollapse/collapse.tsx index dac317a..843ad6b 100644 --- a/src/components/textCollapse/collapse.tsx +++ b/src/components/textCollapse/collapse.tsx @@ -8,44 +8,43 @@ interface Props { text: string } -const LineEllipsis:FC = ({text}:Props) => { +const LineEllipsis: FC = ({text}: Props) => { const [disabled, setDisabled] = useState(false) const [isExpansioned, setIsExpansioned] = useState(false) const [overflow, setOverflow] = useState(false) - useEffect(()=>{ + useEffect(() => { init() - },[text]) + }, [text]) - function init () { + function init() { Taro.nextTick(() => { const query = Taro.createSelectorQuery() query.select('#Text').boundingClientRect() query.exec((res) => { - console.log({res}) const height = res[0].height - if(height <= 30) { + if (height <= 105) { setDisabled(true) - }else{ + } else { setOverflow(true) } }) }) } - function handleExpend (e?: ITouchEvent) { + function handleExpend(e?: ITouchEvent) { e && e.stopPropagation(); setOverflow(false) setIsExpansioned(true) } - function handleHide (e?: ITouchEvent) { + function handleHide(e?: ITouchEvent) { e && e.stopPropagation(); setOverflow(true) setIsExpansioned(false) - }; + } - function toggle () { + function toggle() { if (disabled) return; if (isExpansioned) { handleHide(); @@ -54,37 +53,36 @@ const LineEllipsis:FC = ({text}:Props) => { } } - return ( - - - {text} - {!overflow && isExpansioned && ( - - 收起 - - )} - - {overflow && ( - - ...展开 + return ( + + + {text} + {!overflow && isExpansioned && ( + + 收起 )} - ); - // } + {overflow && ( + + . . . 展开 + + )} + + ) } export default LineEllipsis; diff --git a/src/components/videoList/videoList.tsx b/src/components/videoList/videoList.tsx index cf0d7d9..baae6ce 100644 --- a/src/components/videoList/videoList.tsx +++ b/src/components/videoList/videoList.tsx @@ -2,10 +2,10 @@ import {FC, useEffect, useState} 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"; import videoEvent from "@/hooks/videoEvent"; +import palyWhite from '@/static/img/palyWhite.png' +import starWhite from '@/static/img/starWhite.png' interface Props { data: VideList @@ -40,13 +40,24 @@ const VideoList: FC = (props) => { return ( - - - {data.title} - {data.introduction} - - {formatDate(new Date(data.publish_time), "YY-MM-dd")} - {(data.video_view || 0)}观看 + + {data.title} + {data.introduction} + + + + + + {(data.video_view || 0)} + + + + + {(data.video_view || 0)} + + + + 1:00 ) diff --git a/src/pages/preview/brand/article/article.module.scss b/src/pages/preview/brand/article/article.module.scss index 164b692..9a0dacc 100644 --- a/src/pages/preview/brand/article/article.module.scss +++ b/src/pages/preview/brand/article/article.module.scss @@ -46,9 +46,9 @@ page{ z-index: 99; position: fixed; bottom: 0; - width: 690rpx; + width: 650rpx; height: 100rpx; - padding: 0 30rpx env(safe-area-inset-bottom); + padding: 0 50rpx env(safe-area-inset-bottom); display: flex; justify-content: flex-end; align-items: center; diff --git a/src/pages/preview/brand/info/info.tsx b/src/pages/preview/brand/info/info.tsx index 2c43491..84432da 100644 --- a/src/pages/preview/brand/info/info.tsx +++ b/src/pages/preview/brand/info/info.tsx @@ -1,6 +1,6 @@ import {FC, useCallback, useEffect, useState} from "react"; import {Swiper, SwiperItem, Text, Video, View} from "@tarojs/components"; -import { brandApi, BrandRecord} from "@/api"; +import {brandApi, BrandRecord} from "@/api"; import styles from './info.module.scss' import Taro, {useReachBottom, useRouter} from "@tarojs/taro"; import LineEllipsis from "@/components/textCollapse/collapse"; @@ -112,7 +112,7 @@ const BrandInfo: FC = () => { {brandInfo?.name} - + diff --git a/src/pages/preview/health/health.module.scss b/src/pages/preview/health/health.module.scss index 2387711..5c28c7d 100644 --- a/src/pages/preview/health/health.module.scss +++ b/src/pages/preview/health/health.module.scss @@ -25,3 +25,27 @@ right: 20rpx; background: transparent !important; } + +.info { + font-size: 24rpx; + padding: 0 20rpx; + height: 52rpx; + display: flex; + align-items: center; + justify-content: space-between; + position: absolute; + top: 0; + left: 0; + width: 100%; + transform: translateY(-100%); + box-sizing: border-box; + color: #fff; + background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%); + + Image { + width: 24rpx; + height: 24rpx; + margin-right: 10rpx; + vertical-align: inherit; + } +} diff --git a/src/static/img/palyWhite.png b/src/static/img/palyWhite.png new file mode 100644 index 0000000000000000000000000000000000000000..004820a8d75fe48baec0e72db0a724b5558078d7 GIT binary patch literal 478 zcmV<40U`d0P)Px$m`OxIR7gv;l|LwjQ5eR5PZ-ezXa zz!H!J-hqCHD5T{Y=m5qgc@$MIGs^(mKpyCIz#OpQHux5Q<2WfN;<6+ zrkNc9gGm6lKzmHk`+Y&ueK}CA0N4EhmL;u}iM*x=qMDCD0X&Vz*L$E2L&D7}w9Z z4rbxvXA#3$mGtxPx%Y)M2xR7gvml|hJ2aTLaXUs+gCvoK|0qZCRZlw#qPr3Ga{7FbD*5Ne9a2vNw$ zNOr_zqs+omnFUd%P!=P~#zL8eGQ~n2ebc$G>&?4!@0(NqUcLMOpYMF!ZL0Nq_5}tL}ooN5pYp1SlLDa6rbAA)wRt z+vzjF>qH!pbh3$qx;qhZ(-L+@4B*1P$QnEX4lk5Rj+BSMzLapQP*EA=39!FckaYeS z*xPn4O||==gGtZnDy7BhX-TqF`LEFuq|kQ1q@Q*9P8Ib5KT16_>wFGCUUofpc(6&D zYzSbPTkaE*TIDx$Mnyz?PEDIZFMVJJQ$nxcrP zq?#&OpASEDsw^V9rna-l2Z8&*sH9_A6L+QmAI{PFMBL7mdPvfPDh8*3 z>pqgsM8tt~>VvWtMH zsm|(NYQ_&INDqw9}rk5p+7Z1w65#hCYHm9+BW>C_-@}0_!77=~DG+Nc& Yf6w|21+