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 {userApi} from "@/api";
import {useCallback, useEffect, useState} from "react";
import {useEffect, useState} from "react";
import Tabs, {OnChangOpt, TabList} from "@/components/tabs/tabs";
import Empty from "@/components/empty/empty";
import Taro from "@tarojs/taro";
@ -23,6 +23,7 @@ const Profession = () => {
const [data, setData] = useState<Map<number, KillData>>(new Map)
const [enable, setEnable] = useState(true)
console.log('Profession组件重新渲染')
/**
* more 开启加载更多
@ -65,7 +66,6 @@ const Profession = () => {
useEffect(() => {
console.log(categoryId,'categoryId')
categoryId && getData()
}, [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 {FC, useEffect, useMemo, useState} from "react";
import styles from './index.module.scss'
import Taro from "@tarojs/taro";
import {useDidShow} from '@tarojs/taro'
import SearchList from './components/list'
import NavigationBar from "@/components/navigationBar/navigationBar";
import search from '@/static/img/search.png'
import del from '@/static/img/del.png'
const Search: FC = () => {
const [value, setValue] = useState('')
const [recentSearch, setRecentSearch] = useState<string[]>([])
const [hotSearch] = useState<any[]>([])
const [show, setShow] = useState(false)
const [focus, setFocus] = useState(false)
useDidShow(getRecentSearch)
useEffect(() => {
!show && getRecentSearch()
}, [show])
function inpFn(e) {
setValue(e.detail.value)
}
function clearSearch() {
Taro.removeStorageSync('recentSearch')
getRecentSearch()
Taro.showToast({title: '删除成功'})
}
function getRecentSearch() {
setRecentSearch(Taro.getStorageSync('recentSearch'))
}
function getSearchItem(value) {
setValue(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 cancelSearch(){
setValue('')
setShow(false)
setFocus(false)
Taro.navigateBack()
}
const searchStyles = useMemo((): React.CSSProperties | undefined => {
if (focus || show) {
return {
// transform: "translateY(-43px)",
// width: "100%",
}
}
}, [focus, show])
// import {Input, View, Text, PageContainer, Image} from "@tarojs/components";
// import {FC, useEffect, useMemo, useState} from "react";
// import styles from './index.module.scss'
// import Taro from "@tarojs/taro";
// import {useDidShow} from '@tarojs/taro'
// import SearchList from './components/list'
// import NavigationBar from "@/components/navigationBar/navigationBar";
// import search from '@/static/img/search.png'
// import del from '@/static/img/del.png'
//
//
// const Search: FC = () => {
// const [value, setValue] = useState('')
// const [recentSearch, setRecentSearch] = useState<string[]>([])
// const [hotSearch] = useState<any[]>([])
// const [show, setShow] = useState(false)
// const [focus, setFocus] = useState(false)
//
//
// useDidShow(getRecentSearch)
//
// useEffect(() => {
// !show && getRecentSearch()
// }, [show])
//
// function inpFn(e) {
// setValue(e.detail.value)
// }
//
// function clearSearch() {
// Taro.removeStorageSync('recentSearch')
// getRecentSearch()
// Taro.showToast({title: '删除成功'})
// }
//
// function getRecentSearch() {
// setRecentSearch(Taro.getStorageSync('recentSearch'))
// }
//
// function getSearchItem(value) {
// setValue(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 cancelSearch(){
// setValue('')
// setShow(false)
// setFocus(false)
// Taro.navigateBack()
// }
//
//
// const searchStyles = useMemo((): React.CSSProperties | undefined => {
// if (focus || show) {
// return {
// // transform: "translateY(-43px)",
// // width: "100%",
// }
// }
// }, [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 (
<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>
<View>
{ items.length &&
items.map(d => <Text key={d} >{d}</Text>)
}
{
hotSearch.length >= 1 && !show &&
<>
<View className={`flex justify-between ${styles.titleBox}`}>
</View>
)
})
<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>
</>
}
type Props1 = {
change:(e) => void
}
const NewInner:FC<Props1> = memo(({change}) => {
console.log('子组件渲染')
return (
<Button onClick={(e) => {change(e)}}>1111111</Button>
)
})
<PageContainer
onBeforeLeave={cancelSearch}
onClickOverlay={cancelSearch}
show={show}
round
overlay
overlayStyle={'background:rgba(0,0,0,0)'}>
{show && <SearchList name={value} clear={show}/>}
</PageContainer>
const Search: FC = () => {
const [b,setB]=useState(1)
const [todos]=useState([1,2,3,4,5])
const [tab,setTab] = useState(1)
console.log('父组件渲染')
const mNum = useMemo(() => todos.filter(d => d !== tab),[todos,tab])
const change = useCallback((e:any) => {
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>
)
}

Write Preview
Loading…
Cancel
Save