任务选择设备页面

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

@@ -14,7 +14,7 @@
     height: calc(100vh - 200px);
 
     &-view {
-      height: 100%;
+      height: calc(100vh - 200px);
     }
   }
 

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

@@ -165,7 +165,7 @@ class DeviceSelect extends Component {
       <View className="device-bind">
         <AtSearchBar value={searchValue} onChange={this.searchChange} />
         <View className="device-bind-scroll">
-          <ScrollView className="device-bind-scroll-view">
+          <ScrollView className="device-bind-scroll-view" scrollY>
             {list.map(item => (
               <View key={item.equipmentId}>
                 <Label className="device-bind-item" onClick={() => this.changeItem(item)}>

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

 @import '@styles/var.scss';
+@import '~taro-ui/dist/style/components/drawer.scss';
+@import '~taro-ui/dist/style/components/list.scss';
+@import '~taro-ui/dist/style/components/radio.scss';
+@import '~taro-ui/dist/style/components/icon.scss';
 
 .device-bind {
   width: 100%;
@@ -47,4 +51,36 @@
     // flex-direction: row;
     justify-content: space-between;
   }
+
+  .search-bar-container {
+    padding: 20px 30px;
+    display: flex;
+    align-items: center;
+
+    &-left {
+      padding-right: 60px;
+      padding-left: 0;
+      position: relative;
+
+      .triangle {
+        position: absolute;
+        top: 20px;
+        right: 10px;
+        // margin-top: 10px;
+        height: 0;
+        border: 20px solid transparent;
+        width: 0;
+        border-top-color: #333;
+        box-sizing: border-box;
+      }
+    }
+
+    &-input {
+      flex: 1;
+      height: 40px;
+      padding: 20px;
+      border: 1px solid #ddd;
+      border-radius: 50px;
+    }
+  }
 }

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

@@ -5,7 +5,9 @@ import { showMyToast } from '@/common/utils'
 import DeviceItem from '@/conpoments/device_item'
 import { getFilmList } from '@/actions/asyncCounter'
 import Taro, { Component, Config } from '@tarojs/taro'
-import { View, Text, ScrollView, Button, Checkbox, Label } from '@tarojs/components'
+import { View, Text, ScrollView, Button, Checkbox, Label, Input } from '@tarojs/components'
+import { AtDrawer } from 'taro-ui'
+
 import './index.scss'
 
 type PageStateProps = {
@@ -23,6 +25,9 @@ type PageState = {
   page: number
   filmId: string
   checked: Set<string>
+  showModal: boolean
+  groupList: any[]
+  activeIndex: number
 }
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
@@ -50,14 +55,18 @@ class DeviceSelect extends Component {
 
   constructor(props) {
     super(props)
-    const { filmId } = this.$router.params || ''
+    const { filmId } = this.$router.params
     this.state = {
       filmId,
       page: 1,
-      checked: new Set()
+      checked: new Set(),
+      showModal: false,
+      groupList: [],
+      activeIndex: 0
     }
     this.updateBind = this.updateBind.bind(this)
     this.changeAllCheck = this.changeAllCheck.bind(this)
+    this.showModalView = this.showModalView.bind(this)
     this.setState({
       checked: new Set(),
       showTempalte: 'HORIZONTAL'
@@ -80,12 +89,22 @@ class DeviceSelect extends Component {
 
   componentWillMount() {
     this.getData()
+    this.getGroupList()
   }
 
   getData() {
     const { page } = this.state
     this.props.getFilmListData(page)
   }
+  getGroupList() {
+    api.common.getGroupList().then(res => {
+      this.setState({
+        groupList: [{ equipmentGroupName: '全部', equipmentGroupId: '', equipmentCount: 0 }].concat(
+          res.list
+        )
+      })
+    })
+  }
 
   changeItem({ equipmentId }) {
     if (this.state.checked.has(equipmentId)) {
@@ -101,7 +120,22 @@ class DeviceSelect extends Component {
     }
     // console.log({ item })
   }
-
+  onClose() {
+    this.setState({
+      showModal: false
+    })
+  }
+  onItemClick(index) {
+    console.log(index)
+    this.setState({
+      activeIndex: index
+    })
+  }
+  showModalView() {
+    this.setState({
+      showModal: true
+    })
+  }
   async updateBind() {
     const { checked } = this.state
     const { list } = this.props
@@ -139,20 +173,26 @@ class DeviceSelect extends Component {
     }
   }
 
-  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 { checked, showModal, groupList } = this.state
     const { size } = checked
+    let items = groupList.map(item => {
+      return item.equipmentGroupName + ` (${item.equipmentCount})`
+    })
     return (
       <View className="device-bind">
+        <View className="search-bar-container">
+          <View className="search-bar-container-left" onClick={this.showModalView}>
+            <Text>全部( {1})</Text>
+            <Text className="triangle" />
+          </View>
+          <Input
+            className="search-bar-container-input"
+            placeholder="输入设备名称进行搜索"
+            type="text"
+          />
+        </View>
         <View className="device-bind-scroll">
           <ScrollView className="device-bind-scroll-view">
             {list.map(item => (
@@ -179,6 +219,17 @@ class DeviceSelect extends Component {
             确定
           </Button>
         </View>
+        <AtDrawer
+          show={showModal}
+          mask
+          onClose={() => {
+            this.onClose()
+          }}
+          items={items}
+          onItemClick={this.onItemClick}
+        >
+          aaa
+        </AtDrawer>
       </View>
     )
   }