搜索导航条动画和文章header头部

v2
king 1 year ago
parent 805b47435f
commit 5137d3297f
  1. 4
      .env
  2. 2
      src/api/brand.ts
  3. 2
      src/app.scss
  4. 22
      src/pages/home/components/curRecommended.tsx
  5. 36
      src/pages/preview/brand/article/article.module.scss
  6. 28
      src/pages/preview/brand/article/article.tsx
  7. 43
      src/pages/preview/illness/article/article.module.scss
  8. 22
      src/pages/preview/illness/article/article.tsx
  9. 58
      src/pages/preview/search/search/components/list.tsx
  10. 5
      src/pages/preview/search/search/index.config.ts
  11. 48
      src/pages/preview/search/search/index.module.scss
  12. 100
      src/pages/preview/search/search/index.tsx
  13. BIN
      src/static/img/del.png
  14. 19
      src/utils/time.tsx

@ -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

@ -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 = {

@ -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;}

@ -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<Curriculum[]>([])
@ -44,9 +60,9 @@ const CurRecommended: FC = () => {
<View className="mb-5">
<View className='text-center my-2'></View>
<View className='bg-white rounded-20 clip'>
{articles.map((d, i) => <View className='p-3 relative'>
{articles.map((d, i) => <View className='p-3 relative' onClick={() =>toArticlePage(d)}>
{i > 0 && <View className='absolute top left right divided ml-3 mr-3' />}
<View className="font-34 bold text-black">{d.title}</View>
<View className="font-34 text-black">{d.title}</View>
{(d.intro || '').length > 40 && (<View className='flex mt-1'>
<View className="flex-1 font-24 lh1_5">{d.intro}</View>
{d.cover && <Img className='ml-l' width={140} height={100} src={d.cover} errorType="acquiesce" />}

@ -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;
}

@ -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 = () => {
@ -59,8 +61,25 @@ const article: FC = () => {
overflow: !token ? 'hidden' : 'auto'
}}>
<View id="childrenNode">
<View className={styles.articleTitle}>{articleInfo?.title}</View>
{
children.length > 0 ? children : <Empty name='暂无数据'/>
children.length > 0 ?
<View>
{
articleInfo?.brands.map(d => <View className={styles.article}>
<Img src={d.logo} width={80} height={80} className={styles.articleImag}/>
<View className='ml-2'>
<View>{d?.name}</View>
<View className='flex mt-1 text-muted font-24'>
<View className='mr-2'>{beforeTime(articleInfo?.created_at)} . </View>
<View> {articleInfo.page_view || 1}</View>
</View>
</View>
</View>)
}
{children}
</View>
: <Empty name='暂无数据'/>
}
</View>
</View>
@ -71,9 +90,8 @@ const article: FC = () => {
<View className={styles['fixedBox-inner-icon']}>
<Image src={down}/>
</View>
<View className={styles['fixedBox-inner-box']} onClick={() => {
Taro.navigateTo({url: '/pages/login/login'})
}}>
<View className={styles['fixedBox-inner-box']}
onClick={() => Taro.navigateTo({url: '/pages/login/login'})}>
<Text></Text>
</View>
</View>

@ -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;
}

@ -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'
}}>
<View className='text-center'>
<View className='font-50 font-weight '>{articleInfo?.title}</View>
<View className='mt-2'>{formatDate(new Date(articleInfo?.created_at || 0), "YY-mm-dd hh:mm:dd")}</View>
<View>
<View className={styles.articleTitle}>{articleInfo?.title}</View>
{
articleInfo?.brands.map(d => <View className={styles.article}>
<Img src={d.logo} width={80} height={80} className={styles.articleImag} errorType="avatar"/>
<View className='ml-2'>
<View>{d?.name}</View>
<View className='flex mt-1 text-muted font-24'>
<View className='mr-2'>{beforeTime(articleInfo?.created_at)} . </View>
<View> {articleInfo.page_view || 1}</View>
</View>
</View>
</View>)
}
</View>
<View></View>
{children}
@ -93,11 +105,9 @@ const article: FC = () => {
}
</View>
</PageContainer>
</>
)
}
return helloWorld()
}
export default article

@ -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<Props> = ({name,clear}) => {
console.log(name,'name')
const SearchList: FC<Props> = ({name, clear}) => {
const globalData = Taro.getApp().globalData
const [page, setPage] = useState(1)
const [brands, setBrands] = useState<any[]>([])
@ -22,21 +21,21 @@ const SearchList: FC<Props> = ({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<Props> = ({name,clear}) => {
setBrands([
...data.data
])
}else{
} else {
setBrands([
...brands,
...data.data
@ -57,13 +56,13 @@ const SearchList: FC<Props> = ({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;
@ -83,7 +82,7 @@ const SearchList: FC<Props> = ({name,clear}) => {
}
function onScrollToLower(){
function onScrollToLower() {
if (brands?.length < total) {
setPage(page + 1)
getData().then()
@ -97,15 +96,16 @@ const SearchList: FC<Props> = ({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 && <AtLoadMore status={'loading'}/>}
{loading && <AtLoadMore status={'loading'}/>}
{
brands.length >= 1 && !loading &&
<>
{brands.map((d) =>
<View onClick={() => jumpInfo(d.data.id,d.data.table,d.data['@data'])} className={styles.box} key={d.data.id}>
<View onClick={() => jumpInfo(d.data.id, d.data.table, d.data['@data'])} className={styles.box}
key={d.data.id}>
{
d.data.table === 'brand' &&
<>
@ -121,7 +121,8 @@ const SearchList: FC<Props> = ({name,clear}) => {
<>
<View className={styles.articleLeftBox}>
<View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
<View className={styles.desc}>{rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}</View>
<View
className={styles.desc}>{rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}</View>
</View>
<Img width={172} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/>
</>
@ -129,7 +130,8 @@ const SearchList: FC<Props> = ({name,clear}) => {
{
d.data.table === 'video_records' &&
<>
<Img width={192} height={192} src={d.data['@data'].url_path} mode='aspectFill' className={styles.image}/>
<Img width={192} height={192} src={d.data['@data'].url_path} mode='aspectFill'
className={styles.image}/>
<Image src={play} className={styles.play} mode='aspectFit'/>
<View className={styles.videoRightBox}>
<View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
@ -144,21 +146,21 @@ const SearchList: FC<Props> = ({name,clear}) => {
<Img width={192} height={138} src={d.data['@data'].thumb} mode='aspectFill' className={styles.image}/>
<View className={styles.articleLeftBox}>
<View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
<View className={styles.desc}>:{d.data['@data'].class_hour} {d.data['@data'].charge}</View>
<View className={styles.desc}>:{d.data['@data'].class_hour}
{d.data['@data'].charge}</View>
</View>
</>
}
</View>
)
}
<View style={{width: '750rpx', textAlign: 'center', color: '#999'}} className="font-28 mt-3 mb-3">{text}</View>
<View style={{width: '750rpx', textAlign: 'center', color: '#999'}}
className="font-28 mt-3 mb-3">{text}</View>
</>
}
{ !loading && brands.length === 0 && <Empty name='空空如也'/>}
{!loading && brands.length === 0 && <Empty name='空空如也'/>}
</ScrollView>
)
}

@ -1,5 +1,6 @@
export default definePageConfig({
navigationBarTitleText: '搜索',
navigationBarBackgroundColor:'#F2F8F6',
onReachBottomDistance: 50
navigationBarBackgroundColor: '#F2F8F6',
onReachBottomDistance: 50,
navigationStyle: 'custom',
})

@ -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;

@ -1,52 +1,48 @@
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<string[]>([])
const [hotSearch,setHotSearch] = useState<any[]>([])
const [hotSearch] = useState<any[]>([])
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(){
function searchInput() {
if (value === "") return;
getSearchItem(value)
//记录最近搜索
@ -55,31 +51,48 @@ const Search:FC = () => {
Taro.setStorageSync('recentSearch', [...new Set(recentSearch)])
}
const searchStyles = useMemo((): React.CSSProperties | undefined => {
if (focus || show) {
return {
transform: "translateY(-43px)",
width: "70%",
}
}
}, [focus, show])
return (
<View className="flex flex-column">
<>
<NavigationBar text='搜索'/>
<View className={styles.searchHeader} style={searchStyles}>
<View className={styles.searchBox}>
<AtIcon value='search' size='20' color='#ccc'></AtIcon>
{ show ?
<Text className={styles.input} >{value}</Text>:
<Input className={styles.input} placeholder="输入关键字搜索" type={'text'} confirmType={'search'} onInput={inpFn} onConfirm={searchInput} />
}
<Image src={search} style={{width: '32rpx', height: '32rpx'}} mode='widthFix'/>
<Input
onFocus={() => setFocus(true)}
onBlur={() => setFocus(false)}
className={styles.input}
placeholder={(focus || show) ? '' : "输入关键字搜索"}
type='text'
confirmType='search'
onInput={inpFn}
onConfirm={searchInput}/>
</View>
{focus || show ? <View className='px-2 text-dark' onClick={() => setShow(false)}></View> : null}
</View>
<View className="flex flex-column px-2">
{
recentSearch.length >= 1 && !show &&
<>
<View className={styles.titleBox} >
<Text className={styles.title}></Text>
<AtIcon onClick={clearSearch} value='trash' size='16' color='#909795'></AtIcon>
<View className={styles.titleBox}>
<Text className={styles.title}></Text>
<Image src={del} mode='widthFix' style={{width: '16px'}} onClick={clearSearch}/>
</View>
<View className={styles.contentBox}>
{
recentSearch.length &&
recentSearch?.map(d =>
<View className={styles.items}>
<View onClick={()=>{getSearchItem(d)}} className="font-28" >{d}</View>
recentSearch?.map(d => <View className={styles.items}>
<View onClick={() => getSearchItem(d)} className="font-28">{d}</View>
</View>)
}
</View>
@ -88,7 +101,7 @@ const Search:FC = () => {
{
hotSearch.length >= 1 && !show &&
<>
<View className={`flex justify-between ${styles.titleBox}`} >
<View className={`flex justify-between ${styles.titleBox}`}>
<Text className="font-32 fwb"></Text>
</View>
@ -98,7 +111,9 @@ const Search:FC = () => {
hotSearch.length &&
hotSearch.map(d =>
<View className="py-1 px-2 rounded-40 mr-2 mb-2 bg-warning text-white">
<View onClick={()=>{getSearchItem(d)}} className="font-28" >{d}</View>
<View onClick={() => {
getSearchItem(d)
}} className="font-28">{d}</View>
</View>)
}
</View>
@ -106,11 +121,16 @@ const Search:FC = () => {
</>
}
<PageContainer onClickOverlay={()=>{ setShow(false)}} show={show} round={true} overlay={true} overlayStyle={'background:rgba(0,0,0,0)'} >
<SearchList name={value} clear={show} />
<PageContainer
onClickOverlay={() => setShow(false)}
show={show}
overlay
overlayStyle={'background:rgba(0,0,0,0)'}>
<SearchList name={value} clear={show}/>
</PageContainer>
</View>
</>
)
}
export default Search

Binary file not shown.

After

Width:  |  Height:  |  Size: 400 B

@ -147,3 +147,22 @@ export function everyDay(start_time: number, end_time: number, data: Record<numb
return []
}
}
/** 时间前 */
export function beforeTime(time?: string): string {
const initiateTime = new Date(time || 0).getTime()
const today = Date.now()
const timeDifference = Math.floor((today - initiateTime) / 86400000)
console.log(timeDifference)
if (timeDifference < 0) {
return '今天'
} else if (timeDifference >= 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}天前`
}
}

Loading…
Cancel
Save