添加 redux 状态管理功能，

添加 设备管理功能页面

src/actions/counter.ts

-import { ADD, MINUS } from '../constants/counter'
+import { ADD, MINUS, ADD_TEMP_LIST, ADD_DEVICE_LIST, ADD_FILM_LIST } from '../constants/counter'
 
 export const add = () => {
   return {
@@ -19,3 +19,30 @@ export function asyncAdd() {
     }, 2000)
   }
 }
+
+/** 修改模板市场数据 */
+export function changeTempList(list: any[], count: number) {
+  return {
+    list,
+    count,
+    type: ADD_TEMP_LIST
+  }
+}
+
+/** 修改我的视片数据 */
+export function changeDeviceList(list: any[], count: number) {
+  return {
+    list,
+    count,
+    type: ADD_DEVICE_LIST
+  }
+}
+
+/** 修改我的设备数据 */
+export function changeFilmData(list: any[], count: number) {
+  return {
+    list,
+    count,
+    type: ADD_FILM_LIST
+  }
+}

src/api/axios.ts

@@ -3,7 +3,7 @@
 import { concatParam } from '../common/utils'
 // import $config, { message, requestCode, tokens } from '@/config'
 import { axios, CancelTokenStatic, AxiosInstance } from 'taro-axios'
-import { BASE_URL, FETCH_TIME_OUT, INTERFACE_REPEAT } from '../constants/counter'
+import { BASE_URL, FETCH_TIME_OUT, INTERFACE_REPEAT } from '@/common'
 import token from '../common/token'
 
 const concatParamMethod = new Set(['post', 'put'])

src/api/common.ts

@@ -69,6 +69,14 @@ class UsersApi extends ApiClient {
       url: `/template/del/film/info/${filmId}`
     })
   }
+
+  /** 更改设备绑定显示 */
+  updateEquipmentBinding(filmIds: string[], filmId: string) {
+    return this.request({
+      url: `/template/update/equipment/binding/filmid`,
+      data: { equipmentId: filmId, filmId: filmIds }
+    })
+  }
 }
 
 export default new UsersApi()

src/app.tsx

@@ -34,14 +34,15 @@ class App extends Component {
    */
   config: Config = {
     pages: [
+      'pages/home/tempaltes/index',
+      'pages/home/device/index',
+      'pages/home/device/device_select/index',
       'pages/home/user/index',
       'pages/home/device/my_device/index',
-      'pages/home/device/index',
       'pages/home/device/add/index',
       'pages/home/device/my_film/index',
       'pages/home/tempaltes/film_detail',
       'pages/home/tempaltes/detail',
-      'pages/home/tempaltes/index',
       'pages/home/index',
       'pages/index/index'
       // 'pages/home/tempaltes/detail'

src/common/index.ts

+export const FETCH_TIME_OUT = 5000
+export const BASE_URL = 'https://server.bdideal.com'
+export const INTERFACE_REPEAT = '接口重复，请求已取消'

src/conpoments/film_list_item/index.tsx

@@ -10,15 +10,10 @@ type PageStateProps = {}
 type PageDispatchProps = {}
 
 interface PageOwnProps extends IMilmListItme {
-  // filmName: string
-  // templateUrl: string
-  // equipmentCount: string
-  onClick: () => void
+  onClick?: () => void
 }
 
-type PageState = {
-  name: string
-}
+type PageState = {}
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
 
@@ -28,16 +23,10 @@ interface FilmListItem {
 }
 
 class FilmListItem extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      name: '小红'
-    }
-  }
   render() {
     const { templateUrl, filmName, equipmentCount, onClick } = this.props
     return (
-      <View className="films-item-wrapper" onClick={onClick}>
+      <View className="films-item-wrapper" onClick={() => onClick && onClick()}>
         <View className="img-box">
           <Image className="films-item-img" src={templateUrl} />
         </View>

src/constants/counter.ts

 export const ADD = 'ADD'
 export const MINUS = 'MINUS'
-export const BASE_URL = 'https://server.bdideal.com'
-export const FETCH_TIME_OUT = 5000
-export const INTERFACE_REPEAT = '接口重复，请求已取消'
+export const ADD_TEMP_LIST = 'ADD_TEMP_LIST'
+export const ADD_FILM_LIST = 'ADD_FILM_LIST'
+export const ADD_DEVICE_LIST = 'ADD_DEVICE_LIST'

src/pages/home/device/device_list/index.tsx

@@ -7,6 +7,8 @@ import { showMyToast } from '@/common/utils'
 import { View, Text, ScrollView } from '@tarojs/components'
 
 import './index.scss'
+import { connect } from '@tarojs/redux'
+import { changeFilmData } from '@/actions/counter'
 
 export interface IDeviceItem {
   filmId: any
@@ -19,9 +21,14 @@ export interface IDeviceItem {
   equipmentState: string
 }
 
-type PageStateProps = {}
+type PageStateProps = {
+  list: any[]
+  count: number
+}
 
-type PageDispatchProps = {}
+type PageDispatchProps = {
+  changeFilmData: (list: any[], count: number) => void
+}
 
 type PageOwnProps = {}
 
@@ -40,6 +47,17 @@ interface MyDevice {
   state: PageState
 }
 
+@connect(
+  ({ counter }) => {
+    const { list, count } = counter.filmData
+    return { list, count }
+  },
+  dispacth => ({
+    changeFilmData(list: any[], count: number) {
+      dispacth(changeFilmData(list, count))
+    }
+  })
+)
 class MyDevice extends Component {
   constructor(props) {
     super(props)
@@ -64,7 +82,7 @@ class MyDevice extends Component {
     try {
       const { list, count } = await api.common.getMyDeviceList(page)
       this.cancelModal()
-      this.setState({ deviceList: list, count })
+      this.props.changeFilmData(list, count)
     } catch (error) {
       console.error(error)
     }
@@ -121,18 +139,21 @@ class MyDevice extends Component {
     }
   }
 
-  shouldComponentUpdate(_nextProps, _nextState) {
-    const { deviceList, showModal } = this.state
-    const { deviceList: _deviceList, showModal: _showModal } = _nextState
-    return deviceList !== _deviceList || showModal !== _showModal
+  shouldComponentUpdate(nextProps: IProps, _nextState) {
+    const { list } = this.props
+    const { list: _list } = nextProps
+    const { showModal } = this.state
+    const { showModal: _showModal } = _nextState
+    return list !== _list || showModal !== _showModal
   }
 
   render() {
-    const { deviceList, showModal } = this.state
+    const { list } = this.props
+    const { showModal } = this.state
     return (
       <View className="my-device">
         <ScrollView>
-          {deviceList.map(item => (
+          {list.map(item => (
             <AtSwipeAction
               autoClose
               key={item.equipmentId}

src/pages/home/device/device_select/index.scss

 @import '@styles/var.scss';
+
+.device-select {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.device-select-scroll-wrapper {
+  flex: 1;
+}
+
+.device-select-scroll-view {
+  height: 100%;
+}
+
+.device-select-item-wrapper {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.device-selec-check-box {
+  margin-left: 30px;
+}
+
+.device-selec-device-item {
+  flex: 1;
+}
+
+.device-select-bottom-bar {
+  // height: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}

src/pages/home/device/device_select/index.tsx

+import api from '@/api/index'
 import { ComponentClass } from 'react'
-import Taro, { Component } from '@tarojs/taro'
-import { View, Text } from '@tarojs/components'
+import { connect } from '@tarojs/redux'
+import DeviceItem from '@/conpoments/device_item'
+import Taro, { Component, Config } from '@tarojs/taro'
+import { View, Text, ScrollView, Button, Checkbox } from '@tarojs/components'
 import './index.scss'
+import { showMyToast } from '@/common/utils'
+import { changeFilmData } from '@/actions/counter'
 
-type PageStateProps = {}
+type PageStateProps = {
+  list: any[]
+  count: number
+}
 
-type PageDispatchProps = {}
+type PageDispatchProps = {
+  changeFilmData: (list: any[], conut: number) => void
+}
 
 type PageOwnProps = {}
 
 type PageState = {
-  name: string
+  page: number
+  filmId: string
+  checked: Set<string>
 }
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
@@ -20,18 +32,128 @@ interface DeviceSelect {
   state: PageState
 }
 
+@connect(
+  ({ counter }) => {
+    const { list, count } = counter.filmData
+    return { list, count }
+  },
+  dispatch => ({
+    changeFilmData(list: any[], count: number) {
+      dispatch(changeFilmData(list, count))
+    }
+  })
+)
 class DeviceSelect extends Component {
-  constructor(props) {
+  config: Config = {
+    navigationBarTitleText: '设备管理'
+  }
+
+  constructor(props: any) {
     super(props)
+    const { filmId } = this.$router.params || ''
     this.state = {
-      name: '小红'
+      filmId,
+      page: 1,
+      checked: new Set()
+    }
+    this.updateBind = this.updateBind.bind(this)
+    this.changeAllCheck = this.changeAllCheck.bind(this)
   }
+
+  async componentWillMount() {
+    const { page } = this.state
+    try {
+      const { list, count } = await api.common.getMyDeviceList(page)
+      this.props.changeFilmData(list, count)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  changeItem({ filmId }) {
+    if (this.state.checked.has(filmId)) {
+      this.state.checked.delete(filmId)
+      const newSet = this.state.checked
+      this.setState({
+        checked: new Set([...newSet])
+      })
+    } else {
+      this.setState({
+        checked: new Set([...this.state.checked, filmId])
+      })
+    }
+    // console.log({ item })
+  }
+
+  async updateBind() {
+    const { checked, filmId } = this.state
+    try {
+      await api.common.updateEquipmentBinding([...checked], filmId)
+      showMyToast({ tips: '修改成功~' })
+      Taro.navigateBack()
+      // console.log({ res })
+    } catch (error) {
+      console.error(error)
+      showMyToast({ tips: '修改失败~' })
+    }
+  }
+
+  changeAllCheck() {
+    const { list } = this.props
+    const { checked } = this.state
+    if (list.length === 0) return
+    if (checked.size !== list.length) {
+      // 没全选
+      const checkedId = list.reduce((previous, { equipmentId }) => {
+        previous.push(equipmentId)
+        return previous
+      }, [])
+      this.setState({
+        checked: new Set([...checkedId])
+      })
+    } else {
+      // 已全选
+      this.setState({
+        checked: new Set()
+      })
+    }
+  }
+
+  shouldComponentUpdate(nextProps: IProps, nextState: PageState) {
+    const { checked } = this.state
+    const { checked: _checked } = nextState
+    const { list } = this.props
+    const { list: _list } = nextProps
+    return checked !== _checked || list !== _list
   }
 
   render() {
+    const { list } = this.props
+    const { checked } = this.state
+    const { size } = checked
     return (
-      <View className="DeviceSelect">
-        <Text>hello world</Text>
+      <View className="device-select">
+        <View className="device-select-scroll-wrapper">
+          <ScrollView className="device-select-scroll-view">
+            {list.map(item => (
+              <View key={item.equipmentId} className="device-select-item-wrapper">
+                <Checkbox
+                  value=""
+                  className="device-selec-check-box"
+                  onClick={() => this.changeItem(item)}
+                  checked={checked.has(item.equipmentId)}
+                />
+                <View className="device-selec-device-item">
+                  <DeviceItem {...item} />
+                </View>
+              </View>
+            ))}
+          </ScrollView>
+        </View>
+        <View className="device-select-bottom-bar">
+          <Text onClick={this.changeAllCheck}>全选，共选择{size}台</Text>
+          <Button onClick={this.updateBind}>确定</Button>
+        </View>
       </View>
     )
   }

src/pages/home/device/film_list/index.tsx

 import api from '@/api/index'
 import { ComponentClass } from 'react'
 import { AtSwipeAction } from 'taro-ui'
-import Taro, { Component } from '@tarojs/taro'
+import { connect } from '@tarojs/redux'
 import { showMyToast } from '@/common/utils'
+import Taro, { Component } from '@tarojs/taro'
+import { changeDeviceList } from '@/actions/counter'
+import { View, ScrollView } from '@tarojs/components'
 import FilmListItem from '@/conpoments/film_list_item'
-import { View, Text, ScrollView, Image } from '@tarojs/components'
 
 import './index.scss'
 
-type PageStateProps = {}
+type PageStateProps = {
+  list: any[]
+  count: number
+}
 
-type PageDispatchProps = {}
+type PageDispatchProps = {
+  changeDeviceList: (list: any, count: number) => void
+}
 
 type PageOwnProps = {}
 
@@ -23,8 +30,6 @@ export interface IMilmListItme {
 
 interface PageState {
   page: number
-  count: number
-  flimListData: IMilmListItme[]
 }
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
@@ -34,14 +39,21 @@ interface Films {
   state: PageState
 }
 
+@connect(
+  ({ counter }) => {
+    const { list, count } = counter.deviceData
+    return { list, count }
+  },
+  dispacth => ({
+    changeDeviceList(list: any, count: number) {
+      dispacth(changeDeviceList(list, count))
+    }
+  })
+)
 class Films extends Component {
   constructor(props) {
     super(props)
-    this.state = {
-      page: 1,
-      count: 0,
-      flimListData: []
-    }
+    this.state = { page: 1 }
   }
 
   async componentWillMount() {
@@ -52,21 +64,12 @@ class Films extends Component {
     try {
       const { page } = this.state
       const { count, list } = await api.common.getMyFilmsList(page)
-      this.setState({
-        count,
-        flimListData: list
-      })
+      this.props.changeDeviceList(list, count)
     } catch (error) {
       console.error(error)
     }
   }
 
-  shouldComponentUpdate(_nextProps, _nextState) {
-    const { flimListData } = this.state
-    const { flimListData: FD } = _nextState
-    return flimListData !== FD
-  }
-
   async handleItem({ filmId }: IMilmListItme) {
     Taro.showModal({ content: '确定要删除？' }).then(async ({ confirm }) => {
       if (confirm) {
@@ -86,12 +89,18 @@ class Films extends Component {
     Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?filmId=${filmId}` })
   }
 
+  shouldComponentUpdate(nextProps: IProps) {
+    const { list } = this.props
+    const { list: _list } = nextProps
+    return list !== _list
+  }
+
   render() {
-    const { flimListData } = this.state
+    const { list } = this.props
     return (
       <View className="films">
         <ScrollView className="scroll-view" scrollY>
-          {flimListData.map(item => (
+          {list.map(item => (
             <AtSwipeAction
               autoClose
               key={item.filmId}

src/pages/home/device/index.tsx

@@ -36,7 +36,7 @@ class Device extends Component {
 
     const { windowHeight } = Taro.getSystemInfoSync()
     this.state = {
-      current: 1,
+      current: 0,
       windowHeight: windowHeight - 43
     }
   }

src/pages/home/tempaltes/conpoments/temp_item/temp_item.tsx

-import { ITempItem } from '../..'
+// import { ITempItem } from '../..'
 import { ComponentClass } from 'react'
 import Taro, { Component } from '@tarojs/taro'
+import { ITempItem } from '@/reducers/counter'
 import { View, Text, Image } from '@tarojs/components'
 
 import './index.scss'

src/pages/home/tempaltes/detail.tsx

 import api from '@/api/index'
-import { ITempItem } from '.'
 import { ComponentClass } from 'react'
 import Modal from '@/conpoments/modal'
+import { ITempItem } from '@/reducers/counter'
 import DetailTop from './conpoments/detail_top'
 import Taro, { Component, Config } from '@tarojs/taro'
 import TempItem from './conpoments/temp_item/temp_item'

src/pages/home/tempaltes/film_detail.tsx

@@ -42,6 +42,7 @@ class FilmDetail extends Component {
       filmInfo: {},
       filmList: []
     }
+    this.chengDevice = this.chengDevice.bind(this)
   }
 
   componentWillMount() {
@@ -67,6 +68,12 @@ class FilmDetail extends Component {
     }
   }
 
+  chengDevice() {
+    const { filmId } = this.state
+    const url = `/pages/home/device/device_select/index?filmId=${filmId}`
+    Taro.navigateTo({ url })
+  }
+
   shouldComponentUpdate(_nextProps: IProps, _nextState: PageState) {
     const { filmInfo, filmList } = this.state
     const { filmInfo: _filmInfo, filmList: _filmList } = _nextState
@@ -91,7 +98,7 @@ class FilmDetail extends Component {
           <Button type="primary" className="film-bottom-btn">
             修改视片
           </Button>
-          <Button type="primary" className="film-bottom-btn">
+          <Button type="primary" className="film-bottom-btn" onClick={this.chengDevice}>
             更改绑定设备
           </Button>
         </View>

src/pages/home/tempaltes/index.tsx

+import api from '@/api/index'
+import token from '@/common/token'
 import { ComponentClass } from 'react'
+import { connect } from '@tarojs/redux'
+import { changeTempList } from '@/actions/counter'
 import Taro, { Component, Config } from '@tarojs/taro'
 import TempItem from './conpoments/temp_item/temp_item'
-import { View, Text, Input, ScrollView, Image } from '@tarojs/components'
+import { View, Input, ScrollView } from '@tarojs/components'
+
 import './scss/index.scss'
-import api from '@/api/index'
-import token from '@/common/token'
 
-type PageStateProps = {}
+type PageStateProps = {
+  list: any[]
+  count: number
+}
 
-type PageDispatchProps = {}
+type PageDispatchProps = {
+  changeTempList: (list: any[], count: number) => void
+}
 
 type PageOwnProps = {}
 
-export interface ITempItem {
-  filmId: string
-  filmName?: string
-  templateId: string
-  templateUrl: string
-  templateName: string
-  equipmentCount?: number
-  clickItem?: () => void
-}
-
 type PageState = {
-  dataList: ITempItem[]
   page: number
-  count: number
 }
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
@@ -35,6 +31,17 @@ interface Tempaltes {
   state: PageState
 }
 
+@connect(
+  ({ counter }) => {
+    const { list, count } = counter.tempData
+    return { list, count }
+  },
+  dispatch => ({
+    changeTempList(list, count) {
+      dispatch(changeTempList(list, count))
+    }
+  })
+)
 class Tempaltes extends Component {
   config: Config = {
     navigationBarTitleText: '',
@@ -44,9 +51,7 @@ class Tempaltes extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      page: 1,
-      count: 0,
-      dataList: []
+      page: 1
     }
   }
 
@@ -62,26 +67,21 @@ class Tempaltes extends Component {
       //   })
       // console.log('token.getToken()', token.getToken())
       const { list, count } = await api.common.getTempList(this.state.page)
-      this.setState({
-        count,
-        dataList: list
-      })
+      this.props.changeTempList(list, count)
     } catch (error) {
       console.log({ error })
     }
   }
 
-  shouldComponentUpdate(_nextProps, nextState) {
-    const { dataList } = nextState
-    const { dataList: Dl } = this.state
-    return Dl !== dataList
+  shouldComponentUpdate(nextProps: IProps) {
+    const { list } = this.props
+    const { list: _list } = nextProps
+    return _list !== list
   }
 
   render() {
-    const { dataList } = this.state
-    // console.warn({ dataList })
+    const { list } = this.props
     return (
-      // <PageView>
       <View className="tempaltes">
         <View className="search-bar">
           <Input className="search" placeholder="请输入搜索关键词" />
@@ -89,17 +89,13 @@ class Tempaltes extends Component {
         <View className="scroll-view-wrapper">
           <ScrollView className="scroll-view" scrollY>
             <View className="list-wrapper">
-              {dataList.map(item => (
+              {list.map(item => (
                 <TempItem {...item} key={item.templateId} />
               ))}
-              {/* <View />
-              <View />
-              <View /> */}
             </View>
           </ScrollView>
         </View>
       </View>
-      // </PageView>
     )
   }
 }

src/pages/home/tempaltes/scss/film_detail.scss

@@ -23,13 +23,13 @@
 }
 
 .film-bottom-btn-wrapper {
-  height: 80px;
+  // height: 80px;
   display: flex;
   flex-direction: row;
 }
 
 .film-bottom-btn {
   flex: 1;
-  font-size: 26px;
+  // font-size: 26px;
   border-radius: 0;
 }

src/reducers/counter.ts

-import { ADD, MINUS } from '../constants/counter'
+import { ADD_TEMP_LIST, ADD_FILM_LIST, ADD_DEVICE_LIST } from '../constants/counter'
+import { number } from 'prop-types'
+
+export interface ITempItem {
+  filmId: string
+  filmName?: string
+  templateId: string
+  templateUrl: string
+  templateName: string
+  equipmentCount?: number
+  clickItem?: () => void
+}
+export interface IInitialState {
+  tempData: {
+    count: number
+    list: ITempItem[]
+  }
+}
 
 const INITIAL_STATE = {
-  num: 0
+  tempData: {
+    list: [],
+    count: 0
+  },
+  deviceData: {
+    list: [],
+    count: 0
+  },
+  filmData: {
+    list: [],
+    count: 0
+  }
 }
 
 export default function counter(state = INITIAL_STATE, action) {
   switch (action.type) {
-    case ADD:
+    case ADD_TEMP_LIST:
+      return {
+        ...state,
+        tempData: { list: action.list, count: action.count }
+      }
+    case ADD_DEVICE_LIST:
       return {
         ...state,
-        num: state.num + 1
+        deviceData: { list: action.list, count: action.count }
       }
-    case MINUS:
+    case ADD_FILM_LIST:
       return {
         ...state,
-        num: state.num - 1
+        filmData: { list: action.list, count: action.count }
       }
     default:
       return state