创建页面

src/app.tsx

@@ -53,6 +53,8 @@ class App extends Component {
       'pages/home/tempaltes/film_preview',
       'pages/home/tempaltes/film_edit',
       'pages/home/film/schedule_add/index',
+      'pages/home/film/schedule_add/components/films/index',
+      'pages/home/film/schedule_add/components/device/index',
       'pages/home/tempaltes/detail',
       'pages/home/tempaltes/collection',
       'pages/home/tempaltes/template_type',

src/pages/home/film/schedule_add/components/films/index.scss

+@import '@styles/var.scss';
+
+.films {
+  width: 100%;
+  height: 100%;
+  background-color: $bgColor;
+
+  .scroll-view {
+    height: 100%;
+  }
+}

src/pages/home/film/schedule_add/components/films/index.tsx

+import api from '@/api/index'
+import { ComponentClass } from 'react'
+import { AtSwipeAction } from 'taro-ui'
+import { connect } from '@tarojs/redux'
+import { View } 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) => void
+}
+
+type PageOwnProps = {
+  height?: number
+}
+
+export interface IMilmListItme {
+  filmId: string
+  filmName: string
+  templateUrl: string
+  equipmentCount: number
+}
+
+interface PageState {}
+
+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) {
+      dispacth(getDeviceList(page))
+    }
+  })
+)
+class Films extends Component {
+  protected page = 1
+
+  async componentWillMount() {
+    this.getData()
+  }
+  componentDidShow() {
+    this.getData()
+  }
+  async getData() {
+    this.props.getDeviceListData(this.page)
+  }
+
+  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 list !== _list
+  }
+
+  render() {
+    const { list, height, count } = this.props
+    return (
+      <View className="films">
+        <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 Films as ComponentClass<PageOwnProps, PageState>

src/pages/home/film/schedule_add/index.tsx

@@ -52,7 +52,18 @@ class ScheduleAdd extends Component {
   componentDidShow() {}
 
   goDetail({ filmId }: IMilmListItme) {
-    Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?filmId=${filmId}` })
+    Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail` })
+  }
+  chooseFilm() {
+    // 'pages/home/film/schedule_add/components/device/index'
+    Taro.navigateTo({
+      url: `pages/home/film/schedule_add/components/device/index`
+    })
+  }
+  chooseDevice() {
+    Taro.navigateTo({
+      url: `pages/home/film/schedule_add/components/device/index`
+    })
   }
 
   scheduleNameChange(e) {
@@ -75,7 +86,9 @@ class ScheduleAdd extends Component {
           className="schedule-add-name"
         />
         <View className="schedule-add-title">视片</View>
-        <Button size="mini">选择视片</Button>
+        <Button size="mini" onClick={this.chooseFilm}>
+          选择视片
+        </Button>
         {filmList &&
           filmList.map((item, index) => {
             return <View key={index}>item 视片{index}</View>
@@ -86,7 +99,9 @@ class ScheduleAdd extends Component {
           deviceList.map((item, index) => {
             return <View key={index}>item 设备{index}</View>
           })}
-        <Button size="mini">选择设备</Button>
+        <Button size="mini" onClick={this.chooseDevice}>
+          选择设备
+        </Button>
       </View>
     )
   }

src/pages/home/tempaltes/collection.tsx

@@ -6,7 +6,6 @@ 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 CollectionTtem from '@/conpoments/collection_item'
 
 import './scss/index.scss'