模板页面对接

project.config.json

 {
-  "miniprogramRoot": "dist/",
-  "projectname": "taroDemo",
-  "description": "",
-  "appid": "wxc3dfc37466838046",
-  "setting": {
-    "urlCheck": false,
-    "es6": false,
-    "postcss": false,
-    "minified": false,
-    "newFeature": true,
-    "autoAudits": false,
-    "checkInvalidKey": true,
-    "coverView": true,
-    "checkSiteMap": true,
-    "uploadWithSourceMap": true,
-    "babelSetting": {
-      "ignore": [],
-      "disablePlugins": [],
-      "outputPath": ""
-    }
-  },
-  "compileType": "miniprogram",
-  "simulatorType": "wechat",
-  "simulatorPluginLibVersion": {},
-  "condition": {}
-}
+	"miniprogramRoot": "dist/",
+	"projectname": "taroDemo",
+	"description": "",
+	"appid": "wxc3dfc37466838046",
+	"setting": {
+		"urlCheck": false,
+		"es6": false,
+		"postcss": false,
+		"minified": false,
+		"newFeature": true,
+		"autoAudits": false,
+		"checkInvalidKey": true,
+		"coverView": true,
+		"checkSiteMap": true,
+		"uploadWithSourceMap": true,
+		"babelSetting": {
+			"ignore": [],
+			"disablePlugins": [],
+			"outputPath": ""
+		}
+	},
+	"compileType": "miniprogram",
+	"simulatorType": "wechat",
+	"simulatorPluginLibVersion": {},
+	"condition": {}
+}
\ No newline at end of file

src/api/template.ts

@@ -23,18 +23,27 @@ class TeplateApi extends ApiClient {
     return this.request({
       method: 'post',
       url: `/template/get/type/template/list?p=${page}&c=${limit}`,
-      data: {}
+      data: {
+        templateCount: 4,
+        templateShow: 'HORIZONTAL'
+      }
     })
   }
 
-  getTempalteList(page: number = 1, limit: number = 20) {
+  getTempalteList(
+    typeId: string = '',
+    tagId: string = '',
+    templateShow: string = 'HORIZONTAL',
+    page: number = 1,
+    limit: number = 20
+  ) {
     return this.request({
       method: 'post',
       url: `/template/get/template/list?p=${page}&c=${limit}`,
       data: {
-        typeId: '',
-        tagId: '',
-        templateShow: ''
+        typeId,
+        tagId,
+        templateShow
       }
     })
   }

src/app.tsx

@@ -50,6 +50,8 @@ class App extends Component {
       'pages/home/tempaltes/film_page',
       'pages/home/tempaltes/film_edit',
       'pages/home/tempaltes/detail',
+      'pages/home/tempaltes/template_type',
+      'pages/home/tempaltes/template_type_detail',
       'pages/home/index',
       'pages/index/index'
       // 'pages/home/tempaltes/detail'

src/common/enum.ts

+export enum SHOWTYPE {
+  HORIZONTAL = '横屏',
+  VERTICAL = '竖屏',
+  OTHER = '异形屏'
+}

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

+@import '@styles/var.scss';
+
+.home-item {
+  width: 100%;
+  margin-bottom: 20px;
+
+  &-title {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 20px;
+    font-size: 20px;
+  }
+
+  .title-name {
+    font-size: 28px;
+  }
+
+  &-list {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+.home-img {
+  @include eject(display, block);
+
+  width: 100%;
+  height: 185px;
+  background-color: #ccc;
+}
+
+.home-name {
+  width: 100%;
+  font-size: 28px;
+  padding-top: 10px;
+  background-color: white;
+
+  @include eject(display, block);
+  @include eject(box-sizing, border-box);
+}
+
+.equipment-count {
+  color: #bbb;
+  font-size: 26px;
+}

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

+// import { ITempItem } from '../..'
+import { ComponentClass } from 'react'
+import Taro, { Component } from '@tarojs/taro'
+import { View, Text, ScrollView } from '@tarojs/components'
+import TempItem from '../temp_item'
+
+import './index.scss'
+
+type IProps = {
+  templateInfo: [any]
+  typeName?: string
+  typeId: string
+  clickItem?: () => void
+}
+
+interface PageState {}
+interface PageOwnProps {}
+
+interface HomeItem {
+  props: IProps
+  state: PageState
+}
+
+class HomeItem extends Component {
+  goAll = () => {
+    const { typeId, typeName } = this.props
+    // Taro.navigateTo({ url: '/pages/home/device/my_film/index' })
+    if (typeId) {
+      Taro.navigateTo({
+        url: `/pages/home/tempaltes/template_type_detail?typeId=${typeId}&typeName=${typeName}`
+      })
+      // Taro.navigateTo({ url: `/pages/home/device/my_film/index` })
+    }
+  }
+
+  render() {
+    const { templateInfo, typeName } = this.props
+    return (
+      <View className="home-item">
+        <ScrollView scrollY>
+          <View className="home-item-title">
+            <Text className="title-name">{typeName ? typeName : ''}</Text>
+            <Text className="btn-all" onClick={this.goAll}>
+              查看全部
+            </Text>
+          </View>
+          <View className="home-item-list">
+            {templateInfo.map(item => {
+              return <TempItem {...item} key={item.templateId} />
+            })}
+          </View>
+        </ScrollView>
+      </View>
+    )
+  }
+}
+export default HomeItem as ComponentClass<PageOwnProps, PageState>

src/pages/home/tempaltes/index.tsx

@@ -2,9 +2,10 @@ import { ComponentClass } from 'react'
 import { connect } from '@tarojs/redux'
 import { getTempList } from '@/actions/asyncCounter'
 import Taro, { Component, Config } from '@tarojs/taro'
-import TempItem from './conpoments/temp_item'
+// import TempItem from './conpoments/temp_item'
+import HomeItem from './conpoments/home_item'
 import { View, Input, ScrollView } from '@tarojs/components'
-
+import Api from '@/api/index'
 import './scss/index.scss'
 import token from '@/common/token'
 
@@ -21,6 +22,7 @@ type PageOwnProps = {}
 
 type PageState = {
   page: number
+  list: []
 }
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
@@ -50,7 +52,8 @@ class Tempaltes extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      page: 1
+      page: 1,
+      list: []
     }
   }
 
@@ -59,6 +62,12 @@ class Tempaltes extends Component {
   }
   async componentWillMount() {
     console.log('componentWillMount')
+    Api.tempalte.getHomeList().then(res => {
+      this.setState({
+        list: res.list
+      })
+      console.log(res, 'getHomeList')
+    })
     this.getData()
   }
 
@@ -80,7 +89,8 @@ class Tempaltes extends Component {
   }
 
   render() {
-    const { list } = this.props
+    // const { list } = this.props
+    const { list } = this.state
     return (
       <View className="temp">
         <View className="temp-search-bar">
@@ -90,7 +100,7 @@ class Tempaltes extends Component {
           <ScrollView className="temp-content-scroll" scrollY>
             <View className="temp-content-scroll-list">
               {list.map(item => (
-                <TempItem {...item} key={item.templateId} />
+                <HomeItem {...item} key={item.typeId} />
               ))}
             </View>
           </ScrollView>

src/pages/home/tempaltes/indexBack.tsx

+import { ComponentClass } from 'react'
+import { connect } from '@tarojs/redux'
+import { getTempList } from '@/actions/asyncCounter'
+import Taro, { Component, Config } from '@tarojs/taro'
+import TempItem from './conpoments/temp_item'
+import { View, Input, ScrollView } from '@tarojs/components'
+import Api from '@/api/index'
+import './scss/index.scss'
+import token from '@/common/token'
+
+type PageStateProps = {
+  list: any[]
+  count: number
+}
+
+type PageDispatchProps = {
+  getTempListData: (page: number) => void
+}
+
+type PageOwnProps = {}
+
+type PageState = {
+  page: number
+}
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps
+
+interface Tempaltes {
+  props: IProps
+  state: PageState
+}
+
+@connect(
+  ({ counter }) => {
+    const { list, count } = counter.tempData
+    return { list, count }
+  },
+  dispatch => ({
+    getTempListData(page: number) {
+      dispatch(getTempList(page))
+    }
+  })
+)
+class Tempaltes extends Component {
+  config: Config = {
+    navigationBarTitleText: '',
+    navigationStyle: process.env.TARO_ENV === 'rn' ? 'custom' : 'default'
+  }
+  // protected page = 1
+  constructor(props) {
+    super(props)
+    this.state = {
+      page: 1
+    }
+  }
+
+  componentDidMount() {
+    // !token.isLogon() && Taro.navigateTo({ url: '/pages/login/index' })
+  }
+  async componentWillMount() {
+    console.log('componentWillMount')
+    Api.tempalte.getHomeList().then(res => {
+      console.log(res, 'getHomeList')
+    })
+    this.getData()
+  }
+
+  componentDidShow() {
+    this.setState({
+      page: 1
+    })
+    this.getData()
+  }
+  getData() {
+    const { page } = this.state
+    this.props.getTempListData(page)
+  }
+
+  shouldComponentUpdate(nextProps: IProps) {
+    const { list } = this.props
+    const { list: _list } = nextProps
+    return _list !== list
+  }
+
+  render() {
+    const { list } = this.props
+    return (
+      <View className="temp">
+        <View className="temp-search-bar">
+          <Input className="temp-search-bar-search" placeholder="请输入搜索关键词" />
+        </View>
+        <View className="temp-content">
+          <ScrollView className="temp-content-scroll" scrollY>
+            <View className="temp-content-scroll-list">
+              {list.map(item => (
+                <TempItem {...item} key={item.templateId} />
+              ))}
+            </View>
+          </ScrollView>
+        </View>
+      </View>
+    )
+  }
+}
+export default Tempaltes as ComponentClass<PageOwnProps, PageState>

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

@@ -39,9 +39,9 @@
       @include eject(box-sizing, border-box);
 
       &-list {
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: row;
+        // display: flex;
+        // flex-wrap: wrap;
+        // flex-direction: row;
         justify-content: space-between;
       }
     }

src/pages/home/tempaltes/scss/type_detail.scss

+@import '@styles/var.scss';
+
+.temp-detail {
+  width: 100%;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  background-color: white;
+
+  .radio-group {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 20px;
+
+    .radio-list__label {
+      margin-right: 20px;
+    }
+  }
+
+  .type-list {
+    // display: flex;
+    flex-wrap: wrap;
+    padding: 20px;
+    position: relative;
+    justify-content: space-evenly;
+
+    &-item {
+      display: inline-block;
+      margin-right: 20px;
+      font-size: 30px !important;
+    }
+  }
+
+  &-scroll {
+    flex: 1;
+    overflow: hidden;
+    padding-bottom: 90px;
+
+    &-view {
+      height: 100%;
+    }
+  }
+
+  &-list {
+    padding: 20px 20px 0 20px;
+
+    &-title {
+      margin-bottom: 20px;
+
+      @include eject(display, block);
+    }
+
+    &-content {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+      justify-content: space-between;
+      padding: 20px;
+    }
+  }
+
+  &-bottom-btn {
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 90px;
+    border-radius: 0;
+    position: absolute;
+    background-color: $primary-color;
+  }
+}

src/pages/home/tempaltes/template_type.tsx

+import api from '@/api/index'
+// import DetailTop from './conpoments/detail_top'
+import { ITempItem } from '@/reducers/counter'
+import { ComponentClass } from 'react'
+import Taro, { Component, Config } from '@tarojs/taro'
+import { getWindiwHeight, showMyToast } from '@/common/utils'
+import { View, Text, ScrollView, Button, Input } from '@tarojs/components'
+import ListView from '@/conpoments/list_view'
+import TempDetailContent from './conpoments/temp_detail_content'
+
+import './scss/detail.scss'
+import { SHOWTYPE } from '@/common/enum'
+type PageOwnProps = {}
+export interface IDetailData {
+  frameId: string
+  frameUrl: string
+  resourceId: string
+  resourceUrl: string
+  templateDescribe: string
+  templateId: string
+  templateName: string
+  templateUrl: string
+}
+
+type PageState = {
+  count: number
+  detailData: any
+  showModal: boolean
+  typeId: string
+  tagId: string
+  tempList: any[]
+  templateShow: string
+  filmDataList: any[]
+  windowHeight: number
+  createFilmName: string
+  createFilmDescribe: string
+  tagsList: any[]
+}
+
+interface TemplateTypeDetail {
+  props: ITempItem
+  state: PageState
+}
+
+class TemplateTypeDetail extends Component {
+  config: Config = {
+    navigationBarTitleText: ''
+  }
+  protected page = 1
+  constructor(props: any) {
+    super(props)
+    const typeId = this.$router.params.typeId
+    this.state = {
+      count: 0,
+      detailData: {},
+      showModal: false,
+      filmDataList: [],
+      typeId,
+      templateShow: 'HORIZONTAL',
+      tempList: [],
+      tagId: '',
+      tagsList: [
+        {
+          '': '全部'
+        }
+      ],
+      createFilmName: '',
+      createFilmDescribe: '',
+      windowHeight: getWindiwHeight()
+    }
+  }
+
+  componentWillMount() {
+    const typeName = this.$router.params.typeName
+    Taro.setNavigationBarTitle({ title: typeName })
+    this.getData()
+    // console.log('object', Taro.get)
+  }
+
+  async getData() {
+    const {
+      typeId,
+      templateShow,
+      tempList: [],
+      tagId
+    } = this.state
+    if (!typeId) return
+    try {
+      const [detailData, tempData, tagList] = await Promise.all([
+        api.tempalte.getTypeListCount(typeId, tagId),
+        api.tempalte.getTempalteList(typeId, tagId, templateShow, this.page),
+        api.tempalte.getTagList(typeId)
+      ])
+      console.log(tagList, detailData, SHOWTYPE)
+      const { list, count } = tempData
+      this.setState({
+        count,
+        filmDataList: list,
+        detailData: detailData
+      })
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  createFilm = () => {
+    this.setState({ showModal: true })
+  }
+
+  cancelModal = () => {
+    this.setState({ showModal: false })
+  }
+
+  inputConfirm = async () => {
+    const { createFilmDescribe, createFilmName, templateId } = this.state
+    if (!createFilmName) {
+      showMyToast({ title: '视片名称不能为空~' })
+      return
+    }
+    try {
+      await api.common.createFilm(createFilmDescribe, createFilmName, templateId)
+      this.getData()
+      this.cancelModal()
+      showMyToast({ title: '创建成功' })
+    } catch (error) {
+      showMyToast({ title: '创建失败' })
+    }
+  }
+
+  changeFilmName = ({ target }) => {
+    const { value } = target
+    this.setState({ createFilmName: value })
+  }
+
+  changeDescribeName = ({ target }) => {
+    const { value } = target
+    this.setState({ createFilmDescribe: value })
+  }
+
+  async pullingDown(done) {
+    this.page = 1
+    await this.getData()
+    setTimeout(() => {
+      done()
+    }, 500)
+  }
+
+  async pullingUp(done) {
+    this.page++
+    await this.getData()
+    done()
+  }
+
+  shouldComponentUpdate(_nextProps: ITempItem, _nextState: PageState) {
+    const { detailData, filmDataList, showModal } = this.state
+    const { detailData: DD, filmDataList: FD, showModal: SM } = _nextState
+    return FD !== filmDataList || DD !== detailData || SM !== showModal
+  }
+
+  render() {
+    const { detailData, filmDataList, windowHeight, count } = this.state
+
+    return (
+      <View
+        className="temp-detail"
+        style={{ height: process.env.TARO_ENV === 'rn' ? windowHeight : '100%' }}
+      >
+        <View className="temp-detail-scroll">
+          {process.env.TARO_ENV === 'rn' ? (
+            <ScrollView scrollY className="temp-detail-scroll-view">
+              <TempDetailContent detailData={detailData} filmDataList={filmDataList} />
+            </ScrollView>
+          ) : (
+            <ListView
+              count={count}
+              dataListLength={filmDataList.length}
+              pullingUp={done => this.pullingUp(done)}
+              pullingDown={done => this.pullingDown(done)}
+            >
+              <TempDetailContent detailData={detailData} filmDataList={filmDataList} />
+              <View style={{ height: '20px' }} />
+            </ListView>
+          )}
+        </View>
+      </View>
+    )
+  }
+}
+
+// interface IProps {
+//   detailData: any
+//   filmDataList: any[]
+// }
+
+// function TempDetailContent(props: IProps) {
+//   const { detailData, filmDataList } = props
+//   return (
+//     <View>
+//       <DetailTop {...detailData} />
+//       <View className="temp-detail-list">
+//         <Text className="temp-detail-list-title">我的视片({filmDataList.length})</Text>
+//         <View className="temp-detail-list-content">
+//           {filmDataList.map(item => (
+//             <TempItem {...item} key={item.templateId} />
+//           ))}
+//         </View>
+//       </View>
+//     </View>
+//   )
+// }
+
+export default TemplateTypeDetail as ComponentClass<PageOwnProps, PageState>

src/pages/home/tempaltes/template_type_detail.tsx

+import api from '@/api/index'
+// import DetailTop from './conpoments/detail_top'
+import { ITempItem } from '@/reducers/counter'
+import { ComponentClass } from 'react'
+import Taro, { Component, Config } from '@tarojs/taro'
+import { getWindiwHeight, showMyToast } from '@/common/utils'
+import { View, Text, ScrollView, Button, Radio, RadioGroup, Label } from '@tarojs/components'
+import ListView from '@/conpoments/list_view'
+import TempItem from './conpoments/temp_item'
+
+import './scss/type_detail.scss'
+import { SHOWTYPE } from '@/common/enum'
+type PageOwnProps = {}
+export interface IDetailData {
+  frameId: string
+  frameUrl: string
+  resourceId: string
+  resourceUrl: string
+  templateDescribe: string
+  templateId: string
+  templateName: string
+  templateUrl: string
+}
+
+type PageState = {
+  count: number
+  typeData: any
+  showModal: boolean
+  typeId: string
+  tagId: string
+  tempList: any[]
+  templateShow: string
+  filmDataList: any[]
+  createFilmName: string
+  createFilmDescribe: string
+  tagsList: any[]
+}
+
+interface TemplateTypeDetail {
+  props: ITempItem
+  state: PageState
+}
+
+class TemplateTypeDetail extends Component {
+  config: Config = {
+    navigationBarTitleText: ''
+  }
+  protected page = 1
+  constructor(props: any) {
+    super(props)
+    const typeId = this.$router.params.typeId
+    this.state = {
+      count: 0,
+      typeData: [],
+      showModal: false,
+      filmDataList: [],
+      typeId,
+      templateShow: 'HORIZONTAL',
+      tempList: [],
+      tagId: '',
+      tagsList: [
+        {
+          '': '全部'
+        }
+      ],
+      createFilmName: '',
+      createFilmDescribe: ''
+    }
+    this.radioChange = this.radioChange.bind(this)
+    this.tagIdChange = this.tagIdChange.bind(this)
+    this.typeChange = this.typeChange.bind(this)
+  }
+
+  componentWillMount() {
+    const typeName = this.$router.params.typeName
+    Taro.setNavigationBarTitle({ title: typeName })
+    this.getData()
+    // console.log('object', Taro.get)
+  }
+
+  getTemplate(tagId2, showType?) {
+    const {
+      typeId,
+      templateShow,
+      tempList: [],
+      tagId
+    } = this.state
+    this.setState({
+      page: 1
+    })
+    api.tempalte
+      .getTempalteList(
+        typeId,
+        tagId2 ? tagId2 : tagId,
+        showType ? showType : templateShow,
+        this.page
+      )
+      .then(res => {
+        this.setState({
+          tempList: res.list,
+          filmDataList: res.list,
+          count: res.list.count
+        })
+      })
+  }
+  async getData() {
+    const {
+      typeId,
+      templateShow,
+      tempList: [],
+      tagId
+    } = this.state
+    if (!typeId) return
+    try {
+      let [typeData, tempData, tagList] = await Promise.all([
+        api.tempalte.getTypeListCount(typeId, tagId),
+        api.tempalte.getTempalteList(typeId, tagId, templateShow, this.page),
+        api.tempalte.getTagList(typeId)
+      ])
+      tagList.unshift({
+        tagId: '',
+        tagName: '全部',
+        checked: true
+      })
+      console.log(typeData)
+      const { list, count } = tempData
+      this.setState({
+        count,
+        typeData,
+        tagsList: tagList,
+        filmDataList: list
+      })
+    } catch (error) {
+      console.error(error)
+    }
+  }
+  typeChange(type) {
+    this.setState({
+      templateShow: type
+    })
+    this.getTemplate(null, type)
+  }
+  tagIdChange(id) {
+    console.log(id)
+    this.setState({
+      tagId: id
+    })
+    this.getTemplate(id)
+  }
+  radioChange(e) {
+    console.log(e)
+  }
+  cancelModal = () => {
+    this.setState({ showModal: false })
+  }
+
+  async pullingDown(done) {
+    this.page = 1
+    await this.getData()
+    setTimeout(() => {
+      done()
+    }, 500)
+  }
+
+  async pullingUp(done) {
+    this.page++
+    await this.getData()
+    done()
+  }
+
+  shouldComponentUpdate(_nextProps: ITempItem, _nextState: PageState) {
+    const { detailData, filmDataList, showModal } = this.state
+    const { detailData: DD, filmDataList: FD, showModal: SM } = _nextState
+    return FD !== filmDataList || DD !== detailData || SM !== showModal
+  }
+
+  render() {
+    const { typeData, filmDataList, windowHeight, count, tagsList } = this.state
+    console.log(tagsList, filmDataList)
+    return (
+      <View
+        className="temp-detail"
+        style={{ height: process.env.TARO_ENV === 'rn' ? windowHeight : '100%' }}
+      >
+        <View className="temp-detail-scroll">
+          <View className="radio-list">
+            <RadioGroup className="radio-group">
+              {tagsList.map((item, i) => {
+                return (
+                  <Label
+                    className="radio-list__label"
+                    key={item.tagId}
+                    onClick={() => {
+                      this.tagIdChange(item.tagId)
+                    }}
+                  >
+                    <Radio
+                      style="display:none"
+                      className="radio-list__radio"
+                      value={item.tagId}
+                      checked={item.checked}
+                    />
+                    <Button
+                      size="mini"
+                      onClick={() => {
+                        console.log('change')
+                        this.tagIdChange(item.tagId)
+                      }}
+                    >
+                      {item.tagName}
+                    </Button>
+                  </Label>
+                )
+              })}
+            </RadioGroup>
+          </View>
+          <View className="type-list">
+            {typeData.map(item => {
+              return (
+                <Button
+                  size="mini"
+                  className="type-list-item"
+                  key={item.typeName}
+                  onClick={() => {
+                    console.log('change')
+                    this.typeChange(item.typeName)
+                  }}
+                >
+                  {SHOWTYPE[item.typeName]}
+                </Button>
+              )
+            })}
+          </View>
+          {process.env.TARO_ENV === 'rn' ? (
+            <ScrollView scrollY className="temp-detail-scroll-view">
+              <View className="temp-detail-list-content">
+                {filmDataList &&
+                  filmDataList.map(item => <TempItem {...item} key={item.templateId} />)}
+              </View>
+            </ScrollView>
+          ) : (
+            <ListView
+              count={count}
+              dataListLength={filmDataList.length}
+              pullingUp={done => this.pullingUp(done)}
+              pullingDown={done => this.pullingDown(done)}
+            >
+              <View className="temp-detail-list-content">
+                {filmDataList &&
+                  filmDataList.map(item => <TempItem {...item} key={item.templateId} />)}
+              </View>
+              <View style={{ height: '20px' }} />
+            </ListView>
+          )}
+        </View>
+      </View>
+    )
+  }
+}
+
+// interface IProps {
+//   detailData: any
+//   filmDataList: any[]
+// }
+
+// function TempDetailContent(props: IProps) {
+//   const { detailData, filmDataList } = props
+//   return (
+//     <View>
+//       <DetailTop {...detailData} />
+//       <View className="temp-detail-list">
+//         <Text className="temp-detail-list-title">我的视片({filmDataList.length})</Text>
+//         <View className="temp-detail-list-content">
+//           {filmDataList.map(item => (
+//             <TempItem {...item} key={item.templateId} />
+//           ))}
+//         </View>
+//       </View>
+//     </View>
+//   )
+// }
+
+export default TemplateTypeDetail as ComponentClass<PageOwnProps, PageState>