添加 视片详情

src/api/common.ts

@@ -20,6 +20,16 @@ class UsersApi extends ApiClient {
   createFilm(filmName: string, filmDescribe: string, templateId: string) {
     return this.request({ url: '/template/add/film', data: { filmDescribe, filmName, templateId } })
   }
+
+  /** 获取视片详情列表 */
+  getFilmDetailList(id: string, page: number) {
+    return this.request({ method: 'GET', url: `/template/get/equipment/list/${id}?p=${page}&c=10` })
+  }
+
+  /** 获取视片详情 */
+  getFilmDetailInfo(id: string) {
+    return this.request({ method: 'GET', url: `/template/get/film/info/${id}` })
+  }
 }
 
 export default new UsersApi()

src/app.tsx

@@ -33,6 +33,7 @@ class App extends Component {
    */
   config: Config = {
     pages: [
+      'pages/home/tempaltes/film_detail',
       'pages/home/tempaltes/detail',
       'pages/home/tempaltes/index',
       'pages/home/index',

src/pages/home/tempaltes/conpoments/detail_top/index.scss

+@import '@styles/var.scss';
+
+.temp-top-img {
+  width: 100%;
+  // height: auto;
+}
+
+.temp-top-info-bar {
+  height: 20px;
+  background-color: $bdColor;
+}
+
+.temp-top-text-wrapper {
+  padding-left: 20px;
+  padding-bottom: 20px;
+}
+
+.temp-top-title {
+  font-size: 28px;
+  color: $text-color;
+}
+
+.temp-top-describe {
+  color: #ccc;
+  font-size: 26px;
+}

src/pages/home/tempaltes/conpoments/detail_top/index.tsx

+import { ComponentClass } from 'react'
+import Taro, { Component } from '@tarojs/taro'
+import { View, Text, Image } from '@tarojs/components'
+
+import './index.scss'
+
+type PageStateProps = {}
+
+type PageDispatchProps = {}
+
+type PageOwnProps = {
+  templateUrl: string
+  templateName: string
+  templateDescribe: string
+}
+
+type PageState = {}
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps
+
+interface DerailTop {
+  props: IProps
+  state: PageState
+}
+
+class DerailTop extends Component {
+  render() {
+    const { templateUrl, templateName, templateDescribe } = this.props
+    return (
+      <View className="derail-top">
+        <View className="temp-top-info">
+          <Image className="temp-top-img" src={templateUrl} />
+          <View className="temp-top-text-wrapper">
+            <Text className="temp-top-title">{templateName}</Text>
+            <View>
+              <Text className="temp-top-describe">{templateDescribe}</Text>
+            </View>
+          </View>
+        </View>
+        <View className="temp-top-info-bar" />
+      </View>
+    )
+  }
+}
+export default DerailTop as ComponentClass<PageOwnProps, PageState>

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

+import { ITempItem } from '../..'
 import { ComponentClass } from 'react'
 import Taro, { Component } from '@tarojs/taro'
 import { View, Text, Image } from '@tarojs/components'
-import './scss/temp_item.scss'
-import { ITempItem } from '.'
+
+import './index.scss'
 
 type IProps = ITempItem
 
@@ -17,9 +18,13 @@ interface TempItem {
 
 class TempItem extends Component {
   goDetail = () => {
-    const { templateId } = this.props
+    const { templateId, filmId } = this.props
+    if (filmId) {
+      Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?filmId=${filmId}` })
+    } else {
       Taro.navigateTo({ url: `/pages/home/tempaltes/detail?templateId=${templateId}` })
     }
+  }
 
   render() {
     const { templateName, templateUrl: url, filmName, equipmentCount } = this.props

src/pages/home/tempaltes/detail.tsx

 import api from '@/api/index'
 import { ITempItem } from '.'
-import TempItem from './temp_item'
 import { ComponentClass } from 'react'
 import Modal from '@/conpoments/modal'
+import DetailTop from './conpoments/detail_top'
 import Taro, { Component, Config } from '@tarojs/taro'
+import TempItem from './conpoments/temp_item/temp_item'
 import { View, Text, Swiper, Image, ScrollView, Button, Input } from '@tarojs/components'
 
 import './scss/detail.scss'
@@ -120,21 +121,12 @@ class TempDetail extends Component {
 
   render() {
     const { detailData, filmDataList, showModal } = this.state
-    const { templateUrl, templateName, templateDescribe } = detailData
+    // const { templateUrl, templateName, templateDescribe } = detailData
     return (
       <View className="temp-detail">
         <View className="scroll-wrapper">
           <ScrollView scrollY className="scroll-view">
-            <View className="temp-top-info">
-              <Image className="temp-top-img" src={templateUrl} />
-              <View className="temp-top-text-wrapper">
-                <Text className="temp-top-title">{templateName}</Text>
-                <View>
-                  <Text className="temp-top-describe">{templateDescribe}</Text>
-                </View>
-              </View>
-            </View>
-            <View className="temp-top-info-bar" />
+            <DetailTop {...detailData} />
             <View className="film-list-warpper">
               <Text className="film-list-title">我的视片({filmDataList.length})</Text>
               <View className="film-list">

src/pages/home/tempaltes/film_detail.tsx

+import { ComponentClass } from 'react'
+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 PageDispatchProps = {}
+
+type PageOwnProps = {}
+
+type PageState = {
+  page: number
+  count: number
+  filmInfo: any
+  filmId: string
+  filmList: any[]
+}
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps
+
+interface FilmDetail {
+  props: IProps
+  state: PageState
+}
+
+class FilmDetail extends Component {
+  config: Config = {
+    navigationBarTitleText: '视片详情'
+  }
+
+  constructor() {
+    super()
+    const filmId = this.$router.params.filmId || '32263ed8295746c99ab66282c26fbc65'
+    this.state = {
+      filmId,
+      page: 1,
+      count: 0,
+      filmInfo: {},
+      filmList: []
+    }
+  }
+
+  componentWillMount() {
+    this.getData()
+  }
+
+  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)
+    }
+  }
+
+  shouldComponentUpdate(_nextProps: IProps, _nextState: PageState) {
+    const { filmInfo, filmList } = this.state
+    const { filmInfo: _filmInfo, filmList: _filmList } = _nextState
+    return filmInfo !== _filmInfo || filmList !== _filmList
+  }
+
+  render() {
+    const { filmInfo, filmList } = this.state
+    filmInfo.templateName = filmInfo.filmName
+    filmInfo.templateDescribe = filmInfo.filmDescribe
+    return (
+      <View className="film-detail">
+        <View className="scroll-wrapper">
+          <ScrollView className="scroll-view" scrollY>
+            <DetailTop {...filmInfo} />
+            <View className="film-list-wrapper">
+              <Text>投放设备({filmList.length})</Text>
+            </View>
+          </ScrollView>
+        </View>
+        <View className="film-bottom-btn-wrapper">
+          <Button type="primary" className="film-bottom-btn">
+            修改视片
+          </Button>
+          <Button type="primary" className="film-bottom-btn">
+            更改绑定设备
+          </Button>
+        </View>
+      </View>
+    )
+  }
+}
+export default FilmDetail as ComponentClass<PageOwnProps, PageState>

src/pages/home/tempaltes/index.tsx

 import { ComponentClass } from 'react'
-import TempItem from './temp_item'
+import TempItem from './conpoments/temp_item/temp_item'
 import Taro, { Component, Config } from '@tarojs/taro'
 import PageView from '@/constants/components/pageView'
 import { View, Text, Input, ScrollView, Image } from '@tarojs/components'
@@ -14,11 +14,13 @@ type PageDispatchProps = {}
 type PageOwnProps = {}
 
 export interface ITempItem {
+  filmId: string
   filmName?: string
   templateId: string
   templateUrl: string
   templateName: string
   equipmentCount?: number
+  clickItem?: () => void
 }
 
 type PageState = {

src/pages/home/tempaltes/scss/detail.scss

@@ -17,31 +17,6 @@
   height: 100%;
 }
 
-.temp-top-img {
-  width: 100%;
-  // height: auto;
-}
-
-.temp-top-info-bar {
-  height: 20px;
-  background-color: $bdColor;
-}
-
-.temp-top-text-wrapper {
-  padding-left: 20px;
-  padding-bottom: 20px;
-}
-
-.temp-top-title {
-  font-size: 28px;
-  color: $text-color;
-}
-
-.temp-top-describe {
-  color: #ccc;
-  font-size: 26px;
-}
-
 .film-list-warpper {
   // padding-top: 20px;
   // padding-left: 20px;

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

+@import '@styles/var.scss';
+
+.film-detail {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+}
+
+.scroll-wrapper {
+  flex: 1;
+  overflow: hidden;
+}
+
+.scroll-view {
+  height: 100%;
+}
+
+.film-list-wrapper {
+  // height: 3000px;
+  padding: 20px 20px 0 20px;
+}
+
+.film-bottom-btn-wrapper {
+  height: 80px;
+  display: flex;
+  flex-direction: row;
+}
+
+.film-bottom-btn {
+  flex: 1;
+  font-size: 26px;
+  border-radius: 0;
+}