import api from '@/api/index' import { ComponentClass } from 'react' import { AtSwipeAction } from 'taro-ui' import { connect } from '@tarojs/redux' import { View, Text } from '@tarojs/components' import { showMyToast } from '@/common/utils' import ListView from '@/conpoments/list_view' import Taro, { Component } from '@tarojs/taro' import { getDeviceList } from '@/actions/asyncCounter' import FilmListItem from '@/conpoments/film_list_item' import './index.scss' type PageStateProps = { list: any[] count: number } type PageDispatchProps = { getDeviceListData: (page: number, showTemplate: string) => void } type PageOwnProps = { height?: number } export interface IMilmListItme { filmId: string filmName: string templateUrl: string equipmentCount: number } interface PageState { showTemplate: string } type IProps = PageStateProps & PageDispatchProps & PageOwnProps interface Films { props: IProps state: PageState } @connect( ({ counter }) => { const { list, count } = counter.deviceData return { list, count } }, dispacth => ({ getDeviceListData(page: number, showTemplate: string) { dispacth(getDeviceList(page, showTemplate)) } }) ) class Films extends Component { protected page = 1 async componentWillMount() { this.getData() } componentDidShow() { this.getData() } async getData() { const { showTemplate } = this.state this.props.getDeviceListData(this.page, showTemplate) } async handleItem({ filmId }: IMilmListItme) { Taro.showModal({ content: '确定要删除?' }).then(async ({ confirm }) => { if (confirm) { try { await api.common.removeFilm(filmId) this.getData() showMyToast({ title: '删除成功~' }) } catch (error) { console.error(error) showMyToast({ title: '失败成功~' }) } } }) } typeChange(value) { this.setState( { showTemplate: value }, () => { this.page = 1 this.getData() } ) } goDetail({ filmId }: IMilmListItme) { Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?filmId=${filmId}` }) } async onDownRefresh(done: any) { this.page = 1 await this.getData() setTimeout(() => { done() }, 500) } async onScrollToLower(done: any) { this.page++ await this.getData() done() } shouldComponentUpdate(nextProps: IProps) { const { list } = this.props const { showTemplate } = this.state const { list: _list } = nextProps return list !== _list || !!showTemplate } render() { const { list, height, count } = this.props let { showTemplate } = this.state showTemplate = showTemplate || 'HORIZONTAL' return ( <View className="films"> <View className="film-search-bar"> <View className="type-tab"> <Text onClick={() => { this.typeChange('HORIZONTAL') }} className={ showTemplate === 'HORIZONTAL' ? 'type-tab-item type-tab-item-active' : 'type-tab-item' } > 横版 </Text> <Text onClick={() => { this.typeChange('VERTICAL') }} className={ showTemplate === 'VERTICAL' ? 'type-tab-item type-tab-item-active' : 'type-tab-item' } > 竖版 </Text> <Text onClick={() => { this.typeChange('OTHER') }} className={ showTemplate === 'OTHER' ? 'type-tab-item type-tab-item-active' : 'type-tab-item' } > 异形屏 </Text> </View> </View> <ListView count={count} height={height && height - 60} dataListLength={list.length} pullingUp={done => this.onScrollToLower(done)} pullingDown={done => this.onDownRefresh(done)} > {list.map(item => ( <AtSwipeAction autoClose key={item.filmId} onClick={() => this.handleItem(item)} options={[ { text: '删除', style: { backgroundColor: '#FF4949' } } ]} > <FilmListItem onClick={() => this.goDetail(item)} {...item} /> </AtSwipeAction> ))} </ListView> </View> ) } } export default Films as ComponentClass<PageOwnProps, PageState>