fix

src/pages/home/tempaltes/film_detail.tsx

 import { ComponentClass } from 'react'
 import { ComponentClass } from 'react'
-import Taro, { Component } from '@tarojs/taro'
-import { View, Text } from '@tarojs/components'
-// import './Index.less'
+import Taro, { Component, Config } from '@tarojs/taro'
+import { View, Text, ScrollView, Button } from '@tarojs/components'
+import DetailTop from './conpoments/detail_top'
+
+import './scss/film_detail.scss'
+import api from '@/api/index'
 
 
 type PageStateProps = {}
 type PageStateProps = {}
 
 
@@ -10,37 +13,98 @@ type PageDispatchProps = {}
 type PageOwnProps = {}
 type PageOwnProps = {}
 
 
 type PageState = {
 type PageState = {
-  name: string
+  page: number
+  count: number
+  filmInfo: any
+  filmId: string
+  filmList: any[]
 }
 }
 
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
 
 
-interface Index {
+interface FilmDetail {
   props: IProps
   props: IProps
   state: PageState
   state: PageState
 }
 }
 
 
-class Index extends Component {
-  constructor(props) {
-    super(props)
+class FilmDetail extends Component {
+  config: Config = {
+    navigationBarTitleText: '视片详情'
+  }
+
+  constructor() {
+    super()
+    const filmId = this.$router.params.filmId || '32263ed8295746c99ab66282c26fbc65'
     this.state = {
     this.state = {
-      name: '小红'
+      filmId,
+      page: 1,
+      count: 0,
+      filmInfo: {},
+      filmList: []
     }
     }
+    this.chengDevice = this.chengDevice.bind(this)
   }
   }
-  componentWillReceiveProps(nextProps) {}
 
 
-  componentWillUnmount() {}
+  componentWillMount() {
+    this.getData()
+  }
 
 
-  componentDidShow() {}
+  async getData() {
+    const { page, filmId } = this.state
+    try {
+      const [filmInfo, filmList] = await Promise.all([
+        api.common.getFilmDetailInfo(filmId),
+        api.common.getFilmDetailList(filmId, page)
+      ])
+      console.log({ filmInfo, filmList })
+      const { list, count } = filmInfo
+      this.setState({
+        count,
+        filmInfo,
+        filmList: list
+      })
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  chengDevice() {
+    console.log('chengDevice')
+    const { filmId } = this.state
+    const url = `/pages/home/device/device_bind/index?filmId=${filmId}`
+    Taro.navigateTo({ url })
+  }
 
 
-  componentDidHide() {}
+  shouldComponentUpdate(_nextProps: IProps, _nextState: PageState) {
+    const { filmInfo, filmList } = this.state
+    const { filmInfo: _filmInfo, filmList: _filmList } = _nextState
+    return filmInfo !== _filmInfo || filmList !== _filmList
+  }
 
 
   render() {
   render() {
+    const { filmInfo, filmList } = this.state
+    filmInfo.templateName = filmInfo.filmName
+    filmInfo.templateDescribe = filmInfo.filmDescribe
     return (
     return (
-      <View className="Index">
-        <Text>hello world</Text>
+      <View className="film-detail">
+        <View className="film-detail-scroll">
+          <ScrollView className="film-detail-scroll-view" scrollY>
+            <DetailTop {...filmInfo} />
+            <View className="film-detail-list">
+              <Text>投放设备({filmList.length})</Text>
+            </View>
+          </ScrollView>
+        </View>
+        <View className="film-detail-bottom-bar">
+          <Button type="primary" className="film-detail-bottom-bar-btn">
+            修改视片
+          </Button>
+          <Button type="primary" className="film-detail-bottom-bar-btn" onClick={this.chengDevice}>
+            更改绑定设备
+          </Button>
+        </View>
       </View>
       </View>
     )
     )
   }
   }
 }
 }
-export default Index as ComponentClass<PageOwnProps, PageState>
+export default FilmDetail as ComponentClass<PageOwnProps, PageState>