日程列表

src/app.tsx

@@ -52,6 +52,7 @@ class App extends Component {
       'pages/home/tempaltes/film_page',
       'pages/home/tempaltes/film_preview',
       'pages/home/tempaltes/film_edit',
+      'pages/home/film/schedule_add/index',
       'pages/home/tempaltes/detail',
       'pages/home/tempaltes/collection',
       'pages/home/tempaltes/template_type',

src/pages/home/film/index.tsx

 import FilmList from './film_list'
+import ScheduleList from './schedule_list'
 import { ComponentClass } from 'react'
 import { AtTabs, AtTabsPane } from 'taro-ui'
 import Taro, { Component, Config } from '@tarojs/taro'
@@ -24,7 +25,7 @@ interface Device {
   state: PageState
 }
 
-const tabList = [{ title: '我的视片' }, { title: 'XX任务' }]
+const tabList = [{ title: '我的视片' }, { title: '日程列表' }]
 class Device extends Component {
   config: Config = {
     navigationBarTitleText: '',
@@ -54,7 +55,9 @@ class Device extends Component {
           </View>
         </AtTabsPane>
         <AtTabsPane className="at-tabs-page" current={current} index={1}>
-          <View style={{ height: `${windowHeight}px` }}>XX任务</View>
+          <View style={{ height: `${windowHeight}px` }}>
+            <ScheduleList height={windowHeight} />
+          </View>
         </AtTabsPane>
       </AtTabs>
     )

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

+@import '@styles/var.scss';
+
+.schedule-add {
+  width: 100%;
+  padding: 20px;
+
+  &-title {
+    font-size: 30px;
+    margin: 10px 0;
+  }
+
+  &-name {
+    // font-size: 30px;
+    // margin: 10px 0;
+    width: 90%;
+    border: 1px solid #eee;
+    padding: 5px;
+    border-radius: 4px;
+  }
+}

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

+import api from '@/api/index'
+import { ComponentClass } from 'react'
+import { connect } from '@tarojs/redux'
+import { View, Text, Input, Button } from '@tarojs/components'
+import { showMyToast } from '@/common/utils'
+import Taro, { Component, Config } from '@tarojs/taro'
+
+import './index.scss'
+
+type PageStateProps = {}
+
+type PageDispatchProps = {}
+
+type PageOwnProps = {
+  height?: number
+}
+
+export interface IMilmListItme {
+  filmId: string
+  filmName: string
+  templateUrl: string
+  equipmentCount: number
+}
+
+interface PageState {
+  deviceList: []
+  filmList: []
+  scheduleName: string
+}
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps
+
+interface ScheduleAdd {
+  props: IProps
+  state: PageState
+}
+
+class ScheduleAdd extends Component {
+  config: Config = {
+    navigationBarTitleText: '新建日程'
+  }
+  protected page = 1
+  constructor() {
+    super(...arguments)
+    this.setState({
+      deviceList: [],
+      filmList: [],
+      scheduleName: ''
+    })
+  }
+  async componentWillMount() {}
+  componentDidShow() {}
+
+  goDetail({ filmId }: IMilmListItme) {
+    Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?filmId=${filmId}` })
+  }
+
+  scheduleNameChange(e) {
+    const value = e.target.value
+    this.setState({
+      scheduleName: value
+    })
+  }
+
+  render() {
+    const { list, height, count } = this.props
+    const { deviceList, filmList, scheduleName } = this.state
+    return (
+      <View className="schedule-add">
+        <View className="schedule-add-title">任务名称</View>
+        <Input
+          placeholder="请输入任务名称"
+          onInput={this.scheduleNameChange}
+          value={scheduleName}
+          className="schedule-add-name"
+        />
+        <View className="schedule-add-title">视片</View>
+        <Button size="mini">选择视片</Button>
+        {filmList &&
+          filmList.map((item, index) => {
+            return <View key={index}>item 视片{index}</View>
+          })}
+        <View className="schedule-add-title">播放设备</View>
+
+        {deviceList &&
+          deviceList.map((item, index) => {
+            return <View key={index}>item 设备{index}</View>
+          })}
+        <Button size="mini">选择设备</Button>
+      </View>
+    )
+  }
+}
+export default ScheduleAdd as ComponentClass<PageOwnProps, PageState>

src/pages/home/film/schedule_list/index.scss

+@import '@styles/var.scss';
+
+.films {
+  width: 100%;
+  height: 100%;
+  background-color: $bgColor;
+  position: relative;
+
+  .scroll-view {
+    height: 100%;
+  }
+
+  .schedule-list-add-btn {
+    right: 30px;
+    bottom: 200px;
+    width: 108px;
+    height: 108px;
+    display: flex;
+    color: white;
+    font-size: 30px;
+    position: absolute;
+    border-radius: 60px;
+    align-items: center;
+    justify-content: center;
+    background-color: $bgColor;
+    background-image: linear-gradient(176deg, #ffab20 0%, #ff720e 97%);
+  }
+}

src/pages/home/film/schedule_list/index.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 } 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 Schedule {
+  props: IProps
+  state: PageState
+}
+
+@connect(
+  ({ counter }) => {
+    const { list, count } = counter.deviceData
+    return { list, count }
+  },
+  dispacth => ({
+    getDeviceListData(page: number) {
+      dispacth(getDeviceList(page))
+    }
+  })
+)
+class Schedule 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
+  }
+
+  addSchedule() {
+    Taro.navigateTo({ url: `/pages/home/film/schedule_add/index?type=add` })
+  }
+
+  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 className="schedule-list-add-btn">
+          <Text className="icon" onClick={this.addSchedule}>
+            新建
+          </Text>
+        </View>
+      </View>
+    )
+  }
+}
+export default Schedule as ComponentClass<PageOwnProps, PageState>