收藏页面

src/app.tsx

@@ -53,6 +53,7 @@ class App extends Component {
       'pages/home/tempaltes/film_preview',
       'pages/home/tempaltes/film_edit',
       'pages/home/tempaltes/detail',
+      'pages/home/tempaltes/collection',
       'pages/home/tempaltes/template_type',
       'pages/home/tempaltes/template_type_detail',
       'pages/home/index',

src/pages/home/tempaltes/collection.tsx

+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'
+import { getDeviceList } from '@/actions/asyncCounter'
+import FilmListItem from '@/conpoments/film_list_item'
+
+import './scss/index.scss'
+
+type PageStateProps = {
+  list: any[]
+  count: number
+}
+
+type PageDispatchProps = {
+  getDeviceListData: (page: number) => void
+}
+
+type PageOwnProps = {
+  height?: number
+}
+
+export interface IMilmListItme {
+  filmId: string
+  filmName: string
+  templateUrl: string
+  equipmentCount: number
+  showTempalte?: string
+}
+
+interface PageState {
+  showTempalte: string
+}
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps
+
+interface Collection {
+  props: IProps
+  state: PageState
+}
+
+@connect(
+  ({ counter }) => {
+    const { list, count } = counter.deviceData
+    return { list, count }
+  },
+  dispacth => ({
+    getDeviceListData(page: number) {
+      dispacth(getDeviceList(page))
+    }
+  })
+)
+class Collection extends Component {
+  config: Config = {
+    navigationBarTitleText: '收藏列表'
+  }
+  protected page = 1
+  constructor(props) {
+    super(props)
+    this.state = {
+      showTempalte: 'HORIZONTAL'
+    }
+  }
+  async componentWillMount() {
+    this.getData()
+  }
+  componentDidShow() {
+    this.getData()
+  }
+  async getData() {
+    this.props.getDeviceListData(this.page)
+  }
+  typeChange(state) {
+    this.setState({
+      showTempalte: state
+    })
+    console.log(state)
+  }
+  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: '失败成功~' })
+        }
+      }
+    })
+  }
+
+  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 { list: _list } = nextProps
+    return true
+  }
+
+  render() {
+    const { list, height, count } = this.props
+    const { showTempalte } = this.state
+    return (
+      <View className="films">
+        <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>
+          </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
+              key={item.filmId}
+              onClick={() => this.handleItem(item)}
+              options={[
+                {
+                  text: '删除',
+                  style: {
+                    backgroundColor: '#FF4949'
+                  }
+                }
+              ]}
+            >
+              <FilmListItem onClick={() => this.goDetail(item)} {...item} />
+            </AtSwipeAction>
+          ))}
+        </ListView>
+      </View>
+    )
+  }
+}
+export default Collection as ComponentClass<PageOwnProps, PageState>

src/pages/home/tempaltes/scss/index.scss

@@ -72,3 +72,36 @@
     }
   }
 }
+
+.film-search-bar {
+  // height: 120px;
+  padding: 20px 24px;
+  background-color: white;
+  position: relative;
+  text-align: center;
+
+  .menu-all {
+    height: 37px;
+    width: 38px;
+    position: absolute;
+    left: 30px;
+  }
+
+  .type-tab {
+    width: 100%;
+    text-align: center;
+    font-size: 28px;
+    color: #969799;
+
+    .type-tab-item {
+      padding: 0 20px;
+    }
+
+    .type-tab-item-active {
+      font-size: 38px;
+      color: #000;
+    }
+  }
+
+  @include eject(box-sizing, border-box);
+}

src/pages/home/user/index.tsx

@@ -109,6 +109,12 @@ class User extends Component {
           <View className="user-item-view">
             <Text>帮助</Text>
           </View>
+          <View
+            className="user-item-view"
+            onClick={() => this.goPage('/pages/home/tempaltes/collection')}
+          >
+            <Text>我的收藏</Text>
+          </View>
         </View>
         {/* <View className="user-item">
           <View className="user-item-view">