collection.tsx 4.85 KB
Newer Older
hank committed
1 2 3 4 5 6 7 8
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, Config } from '@tarojs/taro'
hank committed
9
import CollectionTtem from '@/conpoments/collection_item'
hank committed
10 11 12 13

import './scss/index.scss'

type PageStateProps = {
hank committed
14 15
  list?: any[]
  count?: number
hank committed
16 17 18
}

type PageDispatchProps = {
hank committed
19
  getDeviceListData?: (page: number) => void
hank committed
20 21 22 23 24 25 26
}

type PageOwnProps = {
  height?: number
}

export interface IMilmListItme {
hank committed
27
  templateId: string
hank committed
28 29 30 31
  filmName: string
  templateUrl: string
  equipmentCount: number
  showTempalte?: string
hank committed
32
  collectId?: string
hank committed
33 34 35 36
}

interface PageState {
  showTempalte: string
hank committed
37 38
  list: any[]
  count: number
hank committed
39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface Collection {
  props: IProps
  state: PageState
}

class Collection extends Component {
  config: Config = {
    navigationBarTitleText: '收藏列表'
  }
  protected page = 1
  constructor(props) {
    super(props)
    this.state = {
hank committed
56 57 58
      showTempalte: 'HORIZONTAL',
      count: 0,
      list: []
hank committed
59 60 61 62 63 64 65 66 67
    }
  }
  async componentWillMount() {
    this.getData()
  }
  componentDidShow() {
    this.getData()
  }
  async getData() {
hank committed
68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
    // this.props.getDeviceListData(this.page)
    const { showTempalte, list } = this.state
    api.common.getCollectionList(showTempalte, this.page).then(res => {
      const { count } = res
      const newList = res.list
      if (this.page === 1) {
        this.setState({
          list: newList,
          count
        })
      } else {
        this.setState({
          list: list.concat(newList),
          count
        })
      }
    })
hank committed
85 86
  }
  typeChange(state) {
hank committed
87 88 89 90 91 92 93 94 95
    this.setState(
      {
        showTempalte: state
      },
      async () => {
        this.page = 1
        await this.getData()
      }
    )
hank committed
96
  }
hank committed
97
  async handleItem({ collectId }: IMilmListItme) {
hank committed
98 99 100
    Taro.showModal({ content: '确定要删除?' }).then(async ({ confirm }) => {
      if (confirm) {
        try {
hank committed
101
          await api.common.cancelCollection(collectId)
hank committed
102 103 104 105 106 107 108 109 110 111
          this.getData()
          showMyToast({ title: '删除成功~' })
        } catch (error) {
          console.error(error)
          showMyToast({ title: '失败成功~' })
        }
      }
    })
  }

hank committed
112 113
  goDetail({ templateId }: IMilmListItme) {
    Taro.navigateTo({ url: `/pages/home/tempaltes/detail?templateId=${templateId}` })
hank committed
114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130
  }

  async onDownRefresh(done: any) {
    this.page = 1
    await this.getData()
    setTimeout(() => {
      done()
    }, 500)
  }

  async onScrollToLower(done: any) {
    this.page++
    await this.getData()
    done()
  }

  render() {
hank committed
131 132
    const { height } = this.props
    const { list, count, showTempalte } = this.state
hank committed
133
    return (
hank committed
134
      <View className="films collections">
hank committed
135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158
        <View className="temp-search-bar">
          <View className="type-tab">
            <Text
              onClick={() => {
                this.typeChange('HORIZONTAL')
              }}
              className={
                showTempalte === 'HORIZONTAL'
                  ? 'type-tab-item type-tab-item-active'
                  : 'type-tab-item'
              }
            >
              横版
            </Text>
            <Text
              onClick={() => {
                this.typeChange('VERTICAL')
              }}
              className={
                showTempalte === 'VERTICAL' ? 'type-tab-item type-tab-item-active' : 'type-tab-item'
              }
            >
              竖版
            </Text>
hank committed
159 160 161 162 163 164 165 166 167 168
            <Text
              onClick={() => {
                this.typeChange('OTHER')
              }}
              className={
                showTempalte === 'OTHER' ? 'type-tab-item type-tab-item-active' : 'type-tab-item'
              }
            >
              异形屏
            </Text>
hank committed
169 170 171 172 173 174 175 176 177 178 179 180
          </View>
        </View>
        <ListView
          count={count}
          height={height}
          dataListLength={list.length}
          pullingUp={done => this.onScrollToLower(done)}
          pullingDown={done => this.onDownRefresh(done)}
        >
          {list.map(item => (
            <AtSwipeAction
              autoClose
hank committed
181
              key={item.templateId}
hank committed
182 183 184
              onClick={() => this.handleItem(item)}
              options={[
                {
hank committed
185
                  text: '取消收藏',
hank committed
186 187 188 189 190 191
                  style: {
                    backgroundColor: '#FF4949'
                  }
                }
              ]}
            >
hank committed
192 193 194 195 196
              <CollectionTtem
                onClick={() => this.goDetail(item)}
                {...item}
                templateShow={showTempalte}
              />
hank committed
197 198 199 200 201 202 203 204
            </AtSwipeAction>
          ))}
        </ListView>
      </View>
    )
  }
}
export default Collection as ComponentClass<PageOwnProps, PageState>