xing
/
video
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

文章列表返回时的刷新

Browse Source
v2
一杯沧海 1 year ago
parent b33c7170ea
commit 3844bbc0ca
3 changed files with 290 additions and 146 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 89
      src/pages/manage/meetings/list.tsx
  2. 4
      src/pages/preview/collect/collect.tsx
  3. 343
      src/pages/preview/search/search/index.tsx

89
src/pages/manage/meetings/list.tsx
Unescape View File

@ -0,0 +1,89 @@
import {FC, useState} from "react";
import {Image, View} from "@tarojs/components";
import {Meeting, meetingAPi} from "@/api";
import Taro from "@tarojs/taro";
import styles from "@/pages/manage/meetings/list.module.scss";
import {formatDate} from "@/utils/time";
import Empty from "@/components/empty/empty";
import MyButton from "@/components/button/MyButton";
import Icon from "@/components/icon";
import meetingBefore from "@/static/img/beforeMeeting.png"
import meet from "@/static/img/meeting.png"
import usePubsub from "@/hooks/pubsub";
import Spin from "@/components/spinner";
const MeetingsList: FC = () => {
const [meeting, setMeeting] = useState<Meeting[]>([])
const {sub} = usePubsub()
const [enable ,setEnable] = useState(true)
const getData = async () => {
try {
const data = await meetingAPi.unstopsList()
setMeeting(data)
setEnable(false)
} catch (e) {
}
}
function jumpInfo(item: Meeting) {
Taro.navigateTo({url: `/pages/manage/spotMeeting/spotMeeting?id=${item.id}`})
}
Taro.useLoad(() => {
getData()
sub('deleteMeeting', (id) => {
setMeeting((data) => {
return data.filter(d => d.id === id)
})
})
sub('updateMeetingList', getData)
sub('updateMeetingList', () => {
console.log('二次更新')
})
})
return (
<View className='p-2'>
<Spin overlay enable={enable} ></Spin>
{
meeting.length ?
meeting.map((d) => <View onClick={() => jumpInfo(d)} className={styles.meeting} key={d.id}>
<View className="absolute z1 flex justify-end align-center right top bottom mr-2">
{
d.status === 0
? <Image style={{width: '88rpx', height: '88rpx'}} src={meetingBefore}></Image>
: <Image style={{width: '88rpx', height: '88rpx'}} src={meet}></Image>
}
</View>
<View className="z2 absolute">
<View className='font-32 bold mb-2' style={{color: '#606563'}}>{d.name}</View>
<View className="font-24"
style={{color: '#909795'}}>{formatDate(new Date(d.estimate_start_time), "MM-dd hh:mm")} 至 {formatDate(new Date(d.estimate_end_time), "MM-dd hh:mm")}</View>
</View>
</View>)
: <Empty name='暂无未完成的现场会'/>
}
<View className="mt-10 flex flex-column align-center">
<MyButton
formType='submit'
fillet
width={200}
className={styles.button}
onClick={() => {
Taro.navigateTo({
url: '/pages/manage/meetings/form/form'
})
}}
loading={false}>新建现场会</MyButton>
<View
className='text-center text-muted my-3'
onClick={() => Taro.navigateTo({url: '/pages/manage/meetings/meetings'})}>
历史列表 <Icon name='chevron-right'/>
</View>
</View>
</View>
)
}
export default MeetingsList

4
src/pages/preview/collect/collect.tsx
Unescape View File

@ -1,6 +1,6 @@
import {Image, ScrollView, Swiper, SwiperItem, View} from "@tarojs/components"; import {Image, ScrollView, Swiper, SwiperItem, View} from "@tarojs/components";
import {userApi} from "@/api"; import {userApi} from "@/api";
import {useCallback, useEffect, useState} from "react"; import {useEffect, useState} from "react";
import Tabs, {OnChangOpt, TabList} from "@/components/tabs/tabs"; import Tabs, {OnChangOpt, TabList} from "@/components/tabs/tabs";
import Empty from "@/components/empty/empty"; import Empty from "@/components/empty/empty";
import Taro from "@tarojs/taro"; import Taro from "@tarojs/taro";
@ -23,6 +23,7 @@ const Profession = () => {
const [data, setData] = useState<Map<number, KillData>>(new Map) const [data, setData] = useState<Map<number, KillData>>(new Map)
const [enable, setEnable] = useState(true) const [enable, setEnable] = useState(true)
console.log('Profession组件重新渲染')
/** /**
* more 开启加载更多 * more 开启加载更多
@ -65,7 +66,6 @@ const Profession = () => {
useEffect(() => { useEffect(() => {
console.log(categoryId,'categoryId')
categoryId && getData() categoryId && getData()
}, [categoryId]) }, [categoryId])

343
src/pages/preview/search/search/index.tsx
Unescape View File

@ -1,151 +1,206 @@
import {Input, View, Text, PageContainer, Image} from "@tarojs/components"; // import {Input, View, Text, PageContainer, Image} from "@tarojs/components";
import {FC, useEffect, useMemo, useState} from "react"; // import {FC, useEffect, useMemo, useState} from "react";
import styles from './index.module.scss' // import styles from './index.module.scss'
import Taro from "@tarojs/taro"; // import Taro from "@tarojs/taro";
import {useDidShow} from '@tarojs/taro' // import {useDidShow} from '@tarojs/taro'
import SearchList from './components/list' // import SearchList from './components/list'
import NavigationBar from "@/components/navigationBar/navigationBar"; // import NavigationBar from "@/components/navigationBar/navigationBar";
import search from '@/static/img/search.png' // import search from '@/static/img/search.png'
import del from '@/static/img/del.png' // import del from '@/static/img/del.png'
//
//
const Search: FC = () => { // const Search: FC = () => {
const [value, setValue] = useState('') // const [value, setValue] = useState('')
const [recentSearch, setRecentSearch] = useState<string[]>([]) // const [recentSearch, setRecentSearch] = useState<string[]>([])
const [hotSearch] = useState<any[]>([]) // const [hotSearch] = useState<any[]>([])
const [show, setShow] = useState(false) // const [show, setShow] = useState(false)
const [focus, setFocus] = useState(false) // const [focus, setFocus] = useState(false)
//
//
useDidShow(getRecentSearch) // useDidShow(getRecentSearch)
//
useEffect(() => { // useEffect(() => {
!show && getRecentSearch() // !show && getRecentSearch()
}, [show]) // }, [show])
//
function inpFn(e) { // function inpFn(e) {
setValue(e.detail.value) // setValue(e.detail.value)
} // }
//
function clearSearch() { // function clearSearch() {
Taro.removeStorageSync('recentSearch') // Taro.removeStorageSync('recentSearch')
getRecentSearch() // getRecentSearch()
Taro.showToast({title: '删除成功'}) // Taro.showToast({title: '删除成功'})
} // }
//
function getRecentSearch() { // function getRecentSearch() {
setRecentSearch(Taro.getStorageSync('recentSearch')) // setRecentSearch(Taro.getStorageSync('recentSearch'))
} // }
//
function getSearchItem(value) { // function getSearchItem(value) {
setValue(value) // setValue(value)
setShow(true) // setShow(true)
} // }
//
function searchInput() { // function searchInput() {
if (value === "") return; // if (value === "") return;
getSearchItem(value) // getSearchItem(value)
//记录最近搜索 // //记录最近搜索
let recentSearch = Taro.getStorageSync('recentSearch') || []; // let recentSearch = Taro.getStorageSync('recentSearch') || [];
recentSearch.unshift(value); // recentSearch.unshift(value);
Taro.setStorageSync('recentSearch', [...new Set(recentSearch)]) // Taro.setStorageSync('recentSearch', [...new Set(recentSearch)])
} // }
//
function cancelSearch(){ // function cancelSearch(){
setValue('') // setValue('')
setShow(false) // setShow(false)
setFocus(false) // setFocus(false)
Taro.navigateBack() // Taro.navigateBack()
} // }
//
//
const searchStyles = useMemo((): React.CSSProperties | undefined => { // const searchStyles = useMemo((): React.CSSProperties | undefined => {
if (focus || show) { // if (focus || show) {
return { // return {
// transform: "translateY(-43px)", // // transform: "translateY(-43px)",
// width: "100%", // // width: "100%",
} // }
} // }
}, [focus, show]) // }, [focus, show])
//
//
// return (
// <View className="flex flex-column">
// <NavigationBar cancelBack={true} backgroundColor={'#F2F8F6'} text='搜索'/>
// <View className={styles.searchHeader} style={searchStyles}>
// <View className={styles.searchBox}>
// <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'
// value={value}
// confirmType='search'
// onInput={inpFn}
// onConfirm={searchInput}/>
//
// </View>
// <View className='px-2 text-dark' onClick={cancelSearch}>取消</View>
// {/*{focus || show ? <View className='px-2 text-dark' onClick={cancelSearch}>取消</View> : null}*/}
// </View>
//
//
// {
// recentSearch.length >= 1 && !show &&
// <View className='px-2'>
// <View className={styles.titleBox}>
// <Text className={styles.title}>最近搜索</Text>
// <Image
// src={del}
// mode='widthFix'
// style={{width: '16px', height: '16px', padding: '0 20rpx'}}
// onClick={clearSearch}/>
// </View>
// <View className={styles.contentBox}>
// {
// recentSearch.length > 0 &&
// recentSearch?.map(d =>
// <View className={styles.items}>
// <View onClick={() => getSearchItem(d)} className="font-28">{d}</View>
// </View>)
// }
// </View>
// </View>
// }
// {
// hotSearch.length >= 1 && !show &&
// <>
// <View className={`flex justify-between ${styles.titleBox}`}>
//
// <Text className="font-32 fwb">热门搜索</Text>
// </View>
// <View className="wid100 pt-3 pl-3 box-b">
// <View className="wid100 flex flex-wrap">
// {
// 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>)
// }
// </View>
// </View>
// </>
// }
//
// <PageContainer
// onBeforeLeave={cancelSearch}
// onClickOverlay={cancelSearch}
// show={show}
// round
// overlay
// overlayStyle={'background:rgba(0,0,0,0)'}>
// {show && <SearchList name={value} clear={show}/>}
// </PageContainer>
// </View>
// )
// }
// export default Search
import {FC, useState, useMemo, memo, useCallback} from "react";
import {Button, Text, View} from "@tarojs/components";
type Props = {
items: number[]
}
const Inner:FC<Props> = memo(({items}) =>
{
console.log('子组件渲染')
return ( return (
<View className="flex flex-column"> <View>
<NavigationBar cancelBack={true} backgroundColor={'#F2F8F6'} text='搜索'/> { items.length &&
<View className={styles.searchHeader} style={searchStyles}> items.map(d => <Text key={d} >{d}</Text>)
<View className={styles.searchBox}>
<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'
value={value}
confirmType='search'
onInput={inpFn}
onConfirm={searchInput}/>
</View>
<View className='px-2 text-dark' onClick={cancelSearch}>取消</View>
{/*{focus || show ? <View className='px-2 text-dark' onClick={cancelSearch}>取消</View> : null}*/}
</View>
{
recentSearch.length >= 1 && !show &&
<View className='px-2'>
<View className={styles.titleBox}>
<Text className={styles.title}>最近搜索</Text>
<Image
src={del}
mode='widthFix'
style={{width: '16px', height: '16px', padding: '0 20rpx'}}
onClick={clearSearch}/>
</View>
<View className={styles.contentBox}>
{
recentSearch.length > 0 &&
recentSearch?.map(d =>
<View className={styles.items}>
<View onClick={() => getSearchItem(d)} className="font-28">{d}</View>
</View>)
}
</View>
</View>
} }
{ </View>
hotSearch.length >= 1 && !show && )
<> })
<View className={`flex justify-between ${styles.titleBox}`}>
<Text className="font-32 fwb">热门搜索</Text> type Props1 = {
</View> change:(e) => void
<View className="wid100 pt-3 pl-3 box-b"> }
<View className="wid100 flex flex-wrap"> const NewInner:FC<Props1> = memo(({change}) => {
{ console.log('子组件渲染')
hotSearch.length && return (
hotSearch.map(d => <Button onClick={(e) => {change(e)}}>1111111</Button>
<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>)
}
</View>
</View>
</>
}
<PageContainer const Search: FC = () => {
onBeforeLeave={cancelSearch} const [b,setB]=useState(1)
onClickOverlay={cancelSearch} const [todos]=useState([1,2,3,4,5])
show={show} const [tab,setTab] = useState(1)
round console.log('父组件渲染')
overlay const mNum = useMemo(() => todos.filter(d => d !== tab),[todos,tab])
overlayStyle={'background:rgba(0,0,0,0)'}>
{show && <SearchList name={value} clear={show}/>} const change = useCallback((e:any) => {
</PageContainer> console.log(e)
console.log(b,'b')
setB( b + 1)
},[b])
return (
<View style={{marginTop:'200px'}}>
<Text>{b}</Text>
{/*<Button onClick={()=>{setTab(2);setB(b=> b + 1)}}>==2</Button>*/}
{/*<Button onClick={()=>{setTab(3);setB(b=> b + 1)}}>==3</Button>*/}
{/*<Button onClick={()=>{setTab(4);setB(b=> b + 1)}}>==4</Button>*/}
{/*<Button onClick={()=>{setTab(1);setB(b=> b + 1)}}>==1</Button>*/}
{/*<Inner items={mNum}></Inner>*/}
<NewInner change={change}></NewInner>
</View> </View>
) )
} }

Write Preview
Loading…
Cancel
Save