From 5137d3297f319013df5b7186ded2538f5367ce06 Mon Sep 17 00:00:00 2001 From: king <2229249788@qq.com> Date: Thu, 7 Sep 2023 16:37:02 +0800 Subject: [PATCH] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=AF=BC=E8=88=AA=E6=9D=A1?= =?UTF-8?q?=E5=8A=A8=E7=94=BB=E5=92=8C=E6=96=87=E7=AB=A0header=E5=A4=B4?= =?UTF-8?q?=E9=83=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 4 +- src/api/brand.ts | 2 + src/app.scss | 2 +- src/pages/home/components/curRecommended.tsx | 22 ++- .../preview/brand/article/article.module.scss | 36 +++- src/pages/preview/brand/article/article.tsx | 32 +++- .../illness/article/article.module.scss | 43 +++-- src/pages/preview/illness/article/article.tsx | 22 ++- .../preview/search/search/components/list.tsx | 162 ++++++++--------- .../preview/search/search/index.config.ts | 5 +- .../preview/search/search/index.module.scss | 48 +++-- src/pages/preview/search/search/index.tsx | 164 ++++++++++-------- src/static/img/del.png | Bin 0 -> 400 bytes src/utils/time.tsx | 19 ++ 14 files changed, 352 insertions(+), 209 deletions(-) create mode 100644 src/static/img/del.png diff --git a/.env b/.env index 3852d45..86e2b46 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://yjx.dev.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 fe673cc..4848853 100644 --- a/src/api/brand.ts +++ b/src/api/brand.ts @@ -11,12 +11,14 @@ export type BrandRecord = { introductory_video_resource: any article_count: number created_at: string + page_view:number } export type ArticleRecord = { title: string page_view: number created_at: string content: string + brands: BrandRecord[] } export const brandApi = { diff --git a/src/app.scss b/src/app.scss index 5f2fd71..af88b78 100644 --- a/src/app.scss +++ b/src/app.scss @@ -270,7 +270,7 @@ .text-hover-danger { color: #a71d2a;} .text-light { color: #f8f9fa;} .text-hover-light { color: #cbd3da;} -.text-dark { color: #343a40;} +.text-dark { color: #323635;} .text-hover-dark{ color: #121416;} .text-body { color: #212529;} .text-muted { color: #909795;} diff --git a/src/pages/home/components/curRecommended.tsx b/src/pages/home/components/curRecommended.tsx index 7a638c1..95aa016 100644 --- a/src/pages/home/components/curRecommended.tsx +++ b/src/pages/home/components/curRecommended.tsx @@ -1,13 +1,29 @@ import {FC, ReactNode, useEffect, useState} from "react"; import {Image, View} from "@tarojs/components"; import {HomeApi} from "@/api"; -import {useReachBottom} from "@tarojs/taro"; +import Taro, {useReachBottom} from "@tarojs/taro"; import styles from "../home.module.scss"; import VideoCover from "@/components/videoCover/videoCover"; import courseTag from '@/static/img/courseTag.png' import {rfc33392time} from "@/utils/day"; import Img from "@/components/image/image"; +const toArticlePage = (d: any) => { + console.log({d}) + switch (d.owner_type) { + case 1: + Taro.navigateTo({ + url: `/pages/preview/brand/article/article?id=${d.id}` + }) + return + case 2: + Taro.navigateTo({ + url: `/pages/preview/illness/article/article?id=${d.id}` + }) + return + } +} + const CurRecommended: FC = () => { const [page, setPage] = useState(1) const [data, setData] = useState([]) @@ -44,9 +60,9 @@ const CurRecommended: FC = () => { 推荐文章 - {articles.map((d, i) => + {articles.map((d, i) => toArticlePage(d)}> {i > 0 && } - {d.title} + {d.title} {(d.intro || '').length > 40 && ( {d.intro} {d.cover && } diff --git a/src/pages/preview/brand/article/article.module.scss b/src/pages/preview/brand/article/article.module.scss index e28c2e9..c6d9d5f 100644 --- a/src/pages/preview/brand/article/article.module.scss +++ b/src/pages/preview/brand/article/article.module.scss @@ -1,30 +1,33 @@ -.fixedBox{ +.fixedBox { position: fixed; z-index: 1000; - top:0; + top: 0; width: 100vw; height: 100vh; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)); - &-inner{ + + &-inner { position: absolute; width: 100vw; - top:45vh; + top: 45vh; display: flex; flex-direction: column; align-items: center; - &-icon{ - image{ + + &-icon { + image { width: 32rpx; height: 32rpx; } } - &-box{ + + &-box { margin-top: 24rpx; width: 680rpx; - left:35rpx; + left: 35rpx; height: 76rpx; background-color: #45D4A8; - color:#fff; + color: #fff; line-height: 76rpx; text-align: center; font-size: 32rpx; @@ -34,3 +37,18 @@ } } + +.article { + font-size: 30rpx; + display: flex; + margin-bottom: 40rpx; +} + +.articleImag { + border-radius: 100rpx; +} + +.articleTitle { + font-size: 40rpx; + margin-bottom: 50rpx; +} diff --git a/src/pages/preview/brand/article/article.tsx b/src/pages/preview/brand/article/article.tsx index 25da6a9..f8b72a6 100644 --- a/src/pages/preview/brand/article/article.tsx +++ b/src/pages/preview/brand/article/article.tsx @@ -2,12 +2,14 @@ import {FC, useCallback, useEffect, useMemo, useState} from "react"; import {Image, Text, View} from "@tarojs/components"; import Taro, {useRouter} from "@tarojs/taro"; import {ArticleRecord, brandApi} from "@/api"; -import styles from "@/pages/preview/illness/article/article.module.scss"; +import styles from "./article.module.scss"; import down from "@/static/img/doubleDown.png"; import {Profile} from "@/store"; import {parse} from "@/utils/marked/marked"; import Empty from "@/components/empty/empty"; import Spin from "@/components/spinner"; +import {beforeTime} from "@/utils/time"; +import Img from "@/components/image/image"; const article: FC = () => { @@ -25,8 +27,8 @@ const article: FC = () => { const query = Taro.createSelectorQuery() query.select('#childrenNode').boundingClientRect((res) => { if (!Array.isArray(res)) { - console.log({childrenNode: res}) - setUltra(pageHeight * .45 <= res.height) + console.log({childrenNode: res}) + setUltra(pageHeight * .45 <= res.height) } }).exec() }, 300) @@ -59,8 +61,25 @@ const article: FC = () => { overflow: !token ? 'hidden' : 'auto' }}> + {articleInfo?.title} { - children.length > 0 ? children : + children.length > 0 ? + + { + articleInfo?.brands.map(d => + + + {d?.name} + + {beforeTime(articleInfo?.created_at)} . + 阅读 {articleInfo.page_view || 1} + + + ) + } + {children} + + : } @@ -71,9 +90,8 @@ const article: FC = () => { - { - Taro.navigateTo({url: '/pages/login/login'}) - }}> + Taro.navigateTo({url: '/pages/login/login'})}> 登录查看更多内容 diff --git a/src/pages/preview/illness/article/article.module.scss b/src/pages/preview/illness/article/article.module.scss index 6b00ae0..1fbc3f1 100644 --- a/src/pages/preview/illness/article/article.module.scss +++ b/src/pages/preview/illness/article/article.module.scss @@ -1,4 +1,4 @@ -.botmBox{ +.botmBox { z-index: 99; position: fixed; bottom: 0; @@ -10,7 +10,8 @@ justify-content: center; align-items: center; background: #F5F8F7; - view{ + + view { width: 560rpx; height: 76rpx; background: #45D4A8; @@ -22,33 +23,37 @@ line-height: 76rpx; } } -.fixedBox{ + +.fixedBox { position: fixed; z-index: 100; - top:0; + top: 0; width: 100vw; height: 100vh; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)); - &-inner{ + + &-inner { position: absolute; width: 100vw; - top:45vh; + top: 45vh; display: flex; flex-direction: column; align-items: center; - &-icon{ - image{ + + &-icon { + image { width: 32rpx; height: 32rpx; } } - &-box{ + + &-box { margin-top: 24rpx; width: 680rpx; - left:35rpx; + left: 35rpx; height: 76rpx; background-color: #45D4A8; - color:#fff; + color: #fff; line-height: 76rpx; text-align: center; font-size: 32rpx; @@ -58,3 +63,19 @@ } } + + +.article { + font-size: 30rpx; + display: flex; + margin-bottom: 40rpx; +} + +.articleImag { + border-radius: 100rpx; +} + +.articleTitle { + font-size: 40rpx; + margin-bottom: 50rpx; +} diff --git a/src/pages/preview/illness/article/article.tsx b/src/pages/preview/illness/article/article.tsx index ba0e38e..172a5c1 100644 --- a/src/pages/preview/illness/article/article.tsx +++ b/src/pages/preview/illness/article/article.tsx @@ -6,7 +6,8 @@ import styles from './article.module.scss' import down from '@/static/img/doubleDown.png' import {Profile} from "@/store"; import {parse} from "@/utils/marked/marked"; -import {formatDate} from "@/utils/time"; +import {beforeTime} from "@/utils/time"; +import Img from "@/components/image/image"; const article: FC = () => { const {token} = Profile.useContainer() @@ -58,9 +59,20 @@ const article: FC = () => { height: !token ? Taro.getWindowInfo().windowHeight - 60 + 'px' : 'auto', overflow: !token ? 'hidden' : 'auto' }}> - - {articleInfo?.title} - {formatDate(new Date(articleInfo?.created_at || 0), "YY-mm-dd hh:mm:dd")} + + {articleInfo?.title} + { + articleInfo?.brands.map(d => + + + {d?.name} + + {beforeTime(articleInfo?.created_at)} . + 阅读 {articleInfo.page_view || 1} + + + ) + } {children} @@ -93,11 +105,9 @@ const article: FC = () => { } - ) } - return helloWorld() } export default article diff --git a/src/pages/preview/search/search/components/list.tsx b/src/pages/preview/search/search/components/list.tsx index e99f42a..d07e620 100644 --- a/src/pages/preview/search/search/components/list.tsx +++ b/src/pages/preview/search/search/components/list.tsx @@ -4,17 +4,16 @@ import styles from './list.module.scss' import Taro from "@tarojs/taro"; import Empty from "@/components/empty/empty"; import Img from "@/components/image/image"; -import { SearchApi } from "@/api/search"; -import { AtLoadMore } from 'taro-ui' +import {SearchApi} from "@/api/search"; +import {AtLoadMore} from 'taro-ui' import {rfc33392time} from "@/utils/day"; import play from "@/static/img/play.png"; type Props = { - name:string - clear:boolean + name: string + clear: boolean } -const SearchList: FC = ({name,clear}) => { - console.log(name,'name') +const SearchList: FC = ({name, clear}) => { const globalData = Taro.getApp().globalData const [page, setPage] = useState(1) const [brands, setBrands] = useState([]) @@ -22,21 +21,21 @@ const SearchList: FC = ({name,clear}) => { const [text, setText] = useState('') const [loading, setLoading] = useState(true) - useEffect(()=>{ - if(!clear){ + useEffect(() => { + if (!clear) { setBrands([]) setLoading(true) } - },[clear]) + }, [clear]) useEffect(() => { - if(name && clear){ + if (name && clear) { getData() } - }, [page,name,clear]) + }, [page, name, clear]) const getData = useCallback(async () => { try { - const data = await SearchApi.list(page, 10,name) + const data = await SearchApi.list(page, 10, name) if (page === 1) { if (data.data.length < 10) { setText('没有更多了~') @@ -46,7 +45,7 @@ const SearchList: FC = ({name,clear}) => { setBrands([ ...data.data ]) - }else{ + } else { setBrands([ ...brands, ...data.data @@ -57,13 +56,13 @@ const SearchList: FC = ({name,clear}) => { } catch (e) { } setLoading(false) - }, [page,name]) + }, [page, name]) - function jumpInfo(id: number,type:string,health:any) { - console.log(type,'type') + function jumpInfo(id: number, type: string, health: any) { + console.log(type, 'type') let url = '' - switch (type){ + switch (type) { case 'brand': url = '/pages/preview/brand/info/info'; break; @@ -74,7 +73,7 @@ const SearchList: FC = ({name,clear}) => { url = '/pages/preview/illness/article/article' break case 'video_records': - return Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?url=${health.resources.url}&poster=${health.url_path}&title=${health.title}`}) + return Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?url=${health.resources.url}&poster=${health.url_path}&title=${health.title}`}) case 'courses': url = '/pages/business/videoInfo/videoInfo' break @@ -83,13 +82,13 @@ const SearchList: FC = ({name,clear}) => { } - function onScrollToLower(){ - if (brands?.length < total) { - setPage(page + 1) - getData().then() - } else { - setText('没有更多了~') - } + function onScrollToLower() { + if (brands?.length < total) { + setPage(page + 1) + getData().then() + } else { + setText('没有更多了~') + } } return ( @@ -97,68 +96,71 @@ const SearchList: FC = ({name,clear}) => { className='scrollview' scrollY scrollWithAnimation - style={{height:`${globalData.windowHeight-60}px`,backgroundColor:`#f5f5f5`}} + style={{height: `${globalData.pageHeight - 20}px`, backgroundColor: `#f5f5f5`}} onScrollToLower={onScrollToLower} > - { loading && } + {loading && } { brands.length >= 1 && !loading && - <> - {brands.map((d) => - jumpInfo(d.data.id,d.data.table,d.data['@data'])} className={styles.box} key={d.data.id}> - { - d.data.table === 'brand' && - <> - - - {d.data.title} - {d.data.content || '暂无品牌简介'} - - - } - { - d.data.table === 'article' && - <> - - {d.data['@data'].title} - {rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}阅读 - - - - } - { - d.data.table === 'video_records' && - <> - - - - {d.data['@data'].title} - {d.data['@data'].introduction} - 播放量: {d.data['@data'].video_view} - - - } - { - d.data.table === 'courses' && - <> - - - {d.data['@data'].title} - 课时:{d.data['@data'].class_hour}节 销量：{d.data['@data'].charge} - - - } - - + <> + {brands.map((d) => + jumpInfo(d.data.id, d.data.table, d.data['@data'])} className={styles.box} + key={d.data.id}> + { + d.data.table === 'brand' && + <> + + + {d.data.title} + {d.data.content || '暂无品牌简介'} + + + } + { + d.data.table === 'article' && + <> + + {d.data['@data'].title} + {rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}阅读 + + + + } + { + d.data.table === 'video_records' && + <> + + + + {d.data['@data'].title} + {d.data['@data'].introduction} + 播放量: {d.data['@data'].video_view} + + + } + { + d.data.table === 'courses' && + <> + + + {d.data['@data'].title} + 课时:{d.data['@data'].class_hour}节 + 销量：{d.data['@data'].charge} + + + } - - ) - } - {text} - + + ) + } + {text} + } - { !loading && brands.length === 0 && } + {!loading && brands.length === 0 && } ) } diff --git a/src/pages/preview/search/search/index.config.ts b/src/pages/preview/search/search/index.config.ts index 4fdde3a..0b7d560 100644 --- a/src/pages/preview/search/search/index.config.ts +++ b/src/pages/preview/search/search/index.config.ts @@ -1,5 +1,6 @@ export default definePageConfig({ navigationBarTitleText: '搜索', - navigationBarBackgroundColor:'#F2F8F6', - onReachBottomDistance: 50 + navigationBarBackgroundColor: '#F2F8F6', + onReachBottomDistance: 50, + navigationStyle: 'custom', }) diff --git a/src/pages/preview/search/search/index.module.scss b/src/pages/preview/search/search/index.module.scss index 9dddadd..fb4571b 100644 --- a/src/pages/preview/search/search/index.module.scss +++ b/src/pages/preview/search/search/index.module.scss @@ -1,42 +1,58 @@ -page{ - background-color:#F2F8F6; - padding-left: 30rpx; - .searchBox{ - width: 690rpx; +page { + background-color: #F2F8F6; + + .searchHeader { + margin-top: 10px; + padding: 0 20rpx; + display: flex; + align-items: center; + justify-content: space-between; + transition: all 200ms; + position: sticky; + z-index: 200 ; + overflow: hidden; + } + + .searchBox { + flex: 1; height: 68rpx; background: #FFFFFF; - border-radius: 32rpx 32rpx 32rpx 32rpx; + border-radius: 32rpx; box-sizing: border-box; display: flex; align-items: center; - padding:0 24rpx; - .input{ + padding: 0 24rpx; + + .input { font-size: 28rpx; - font-weight: 500; - margin-left: 24rpx; - flex:1; + margin-left: 20rpx; + flex: 1; } } - .titleBox{ + + .titleBox { margin-top: 60rpx; width: 100%; display: flex; box-sizing: border-box; padding-right: 30rpx; justify-content: space-between; - .title{ + + .title { font-size: 28rpx; font-weight: bold; color: #323635; } } - .contentBox{ + + .contentBox { display: flex; flex-wrap: wrap; - .items{ + + .items { display: inline-block; background: #FFFFFF; - border-radius:32rpx; + border-radius: 32rpx; padding: 10rpx 24rpx; font-size: 24rpx; font-weight: 500; diff --git a/src/pages/preview/search/search/index.tsx b/src/pages/preview/search/search/index.tsx index 554655f..a854d64 100644 --- a/src/pages/preview/search/search/index.tsx +++ b/src/pages/preview/search/search/index.tsx @@ -1,116 +1,136 @@ -import {Input, View, Text, PageContainer} from "@tarojs/components"; -import {FC, useEffect, useState} from "react"; -import { AtIcon } from 'taro-ui' +import {Input, View, Text, PageContainer, Image} from "@tarojs/components"; +import React, {FC, useEffect, useMemo, useState} from "react"; import styles from './index.module.scss' import Taro from "@tarojs/taro"; -import { useReady, useDidShow } from '@tarojs/taro' +import {useDidShow} from '@tarojs/taro' import SearchList from './components/list' +import search from '@/static/img/search.png' +import NavigationBar from "@/components/navigationBar/navigationBar"; +import del from '@/static/img/del.png' -const Search:FC = () => { +const Search: FC = () => { const [value, setValue] = useState('') const [recentSearch, setRecentSearch] = useState([]) - const [hotSearch,setHotSearch] = useState([]) + const [hotSearch] = useState([]) const [show, setShow] = useState(false) + const [focus, setFocus] = useState(false) - useReady(()=>{ - console.log('onReady') - }) - useDidShow(()=>{ - getRecentSearch() - }) + useDidShow(getRecentSearch) - useEffect(()=>{ - if(!show){ + useEffect(() => { + if (!show) { getRecentSearch() } - },[show]) + }, [show]) - function inpFn(e){ + function inpFn(e) { setValue(e.detail.value) } - function clearSearch(){ + function clearSearch() { Taro.removeStorageSync('recentSearch') getRecentSearch() } - function getRecentSearch () { + function getRecentSearch() { setRecentSearch(Taro.getStorageSync('recentSearch')) } + function getSearchItem(value) { setValue(value) - // Taro.navigateTo({ - // url:`/pages/preview/search/list/index?name=${value}` - // }) setShow(true) } - function searchInput(){ - if (value === "") return; - getSearchItem(value) - //记录最近搜索 - let recentSearch = Taro.getStorageSync('recentSearch') || []; - recentSearch.unshift(value); - Taro.setStorageSync('recentSearch', [...new Set(recentSearch)]) - } - + function searchInput() { + if (value === "") return; + getSearchItem(value) + //记录最近搜索 + let recentSearch = Taro.getStorageSync('recentSearch') || []; + recentSearch.unshift(value); + Taro.setStorageSync('recentSearch', [...new Set(recentSearch)]) + } + const searchStyles = useMemo((): React.CSSProperties | undefined => { + if (focus || show) { + return { + transform: "translateY(-43px)", + width: "70%", + } + } + }, [focus, show]) return ( - + <> + + - - { show ? - {value}: - - } + + setFocus(true)} + onBlur={() => setFocus(false)} + className={styles.input} + placeholder={(focus || show) ? '' : "输入关键字搜索"} + type='text' + confirmType='search' + onInput={inpFn} + onConfirm={searchInput}/> + + {focus || show ? setShow(false)}>取消 : null} + - { - recentSearch.length >= 1 && !show && - <> - - 最近搜索 - - + + { + recentSearch.length >= 1 && !show && + <> + + 搜索历史 + + { recentSearch.length && - recentSearch?.map(d => - - {getSearchItem(d)}} className="font-28" >{d} - ) + recentSearch?.map(d => + getSearchItem(d)} className="font-28">{d} + ) } - - } - { - hotSearch.length >= 1 && !show && - <> - - - 热门搜索 - - - - { - hotSearch.length && - hotSearch.map(d => - - {getSearchItem(d)}} className="font-28" >{d} - ) - } + + } + { + hotSearch.length >= 1 && !show && + <> + + + 热门搜索 - - - } + + + { + hotSearch.length && + hotSearch.map(d => + + { + getSearchItem(d) + }} className="font-28">{d} + ) + } + + + + } - { setShow(false)}} show={show} round={true} overlay={true} overlayStyle={'background:rgba(0,0,0,0)'} > - - + setShow(false)} + show={show} + overlay + overlayStyle={'background:rgba(0,0,0,0)'}> + + + + - ) } export default Search diff --git a/src/static/img/del.png b/src/static/img/del.png new file mode 100644 index 0000000000000000000000000000000000000000..d434ff845bb5db385f457bab326f7694093e5af3 GIT binary patch literal 400 zcmV;B0dM|^P)Px$N=ZaPR7gwhmd{SYKoG{i5sw%-D9?h4Mtv79YzbMT9K7w#0~#8_E*IWKj3)Rj z=mA5I#WBUiNZSp&RAXY=<7DRhb^h$`5G;1C1jtrk ztwNq)xFOD7(%%AxMo&R#xRk805Azd+Mn8gZTv*IWfG1x4anju2^!LDUG`#>nltTmG>J%9!qqmQbWGktoB<{) u{(k-NhQLh_)wTjN&lxm+o4s78SN;!-{7obF0O2420000= 365) { + return `${Math.floor(timeDifference / 365)}年前` + } else if (timeDifference >= 31) { + return `${Math.floor(timeDifference / 31)}月前` + } else if (timeDifference >= 7) { + return `${Math.floor(timeDifference / 7)}星期前` + } else { + return `${timeDifference}天前` + } +}