编辑界面编写

src/app.tsx

@@ -47,6 +47,7 @@ class App extends Component {
       'pages/home/device/add/index',
       'pages/home/device/my_film/index',
       'pages/home/tempaltes/film_detail',
+      'pages/home/tempaltes/film_edit',
       'pages/home/tempaltes/detail',
       'pages/home/index',
       'pages/index/index'

src/conpoments/film_list_item/index.tsx

@@ -28,7 +28,7 @@ class FilmListItem extends Component {
     return (
       <View className="films-item" onClick={() => onClick && onClick()}>
         <View className="films-item-img-box">
-          <Image className="films-item-img" src={templateUrl} />
+          <Image className="films-item-img" src={templateUrl.split(',')[0]} />
         </View>
         <View className="films-item-info">
           <Text>{filmName}</Text>

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

+@import "@styles/var.scss";
+@import "~taro-ui/dist/style/components/accordion.scss";
+@import "~taro-ui/dist/style/components/icon.scss";
+
+.temp-top-img {
+  width: 100%;
+  // height: auto;
+}
+
+.temp-top-info-bar {
+  height: 20px;
+  background-color: $bgColor;
+}
+
+.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/edit_menu/index.tsx

+import { ComponentClass } from 'react'
+import Taro, { Component } from '@tarojs/taro'
+import { View, Input, Image, Button } from '@tarojs/components'
+import { AtAccordion, AtList } from 'taro-ui'
+import MenuItem from '../menu-item'
+import './index.scss'
+
+type PageStateProps = {}
+
+type PageDispatchProps = {}
+
+type PageOwnProps = {
+  schemaData: object
+  itemList: any
+  pageIndex: number
+  open: boolean
+  activeIndex: number
+}
+
+type PageState = {}
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps
+
+interface EditMenu {
+  props: IProps
+  state: PageState
+}
+
+class EditMenu extends Component {
+  constructor() {
+    super(...arguments)
+    this.setState({
+      open: false,
+      activeIndex: -1,
+      itemList: []
+    })
+    this.handleClick = this.handleClick.bind(this)
+  }
+  handleClick(value) {
+    console.log(arguments)
+    this.setState({
+      activeIndex: value
+    })
+  }
+  render() {
+    const { schemaData, itemList } = this.props
+    const activeIndex = this.state.activeIndex
+    console.log('activeIndex', activeIndex)
+    return (
+      <View className="edit-container">
+        <View className="temp-top-info">{itemList}</View>
+        {itemList.map((item, index) => {
+          return (
+            <AtAccordion
+              open={activeIndex === index}
+              onClick={() => {
+                this.handleClick(index)
+              }}
+              title={item.name}
+              key={index + item.name}
+            >
+              <AtList hasBorder={false}>
+                <MenuItem item={item} schemaData={schemaData} isList={false} />
+              </AtList>
+            </AtAccordion>
+          )
+        })}
+      </View>
+    )
+  }
+}
+export default EditMenu as ComponentClass<PageOwnProps, PageState>

src/pages/home/tempaltes/conpoments/menu-item/index.scss

+@import '@styles/var.scss';
+
+.menu-item {
+  &-input {
+    border: 1px solid #999;
+    height: 40px;
+    margin: 10px 5px;
+  }
+}

src/pages/home/tempaltes/conpoments/menu-item/index.tsx

+import { ComponentClass } from 'react'
+import Taro, { Component } from '@tarojs/taro'
+import { View, Text, Image, Input, Button } from '@tarojs/components'
+
+import './index.scss'
+
+type PageStateProps = {}
+
+type PageDispatchProps = {}
+
+type PageOwnProps = {
+  item: any
+  schemaData: object
+  isList: boolean
+}
+
+type PageState = {}
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps
+
+interface MenuItem {
+  props: IProps
+  state: PageState
+}
+
+class MenuItem extends Component {
+  constructor() {
+    super(arguments)
+    this.setState({
+      isList: false
+    })
+    this.isSchemaIndex = this.isSchemaIndex.bind(this)
+    this.checkType = this.checkType.bind(this)
+  }
+  isSchemaIndex(item) {
+    return item['schemaIndex'] ? item['schemaIndex'] : 0
+  }
+  checkType(item2, key) {
+    const { item } = this.props
+    return item.modelSchema[this.isSchemaIndex(item2)][key].type
+  }
+  listItem(item2) {}
+  render() {
+    const { item, schemaData, isList, setValue } = this.props
+    const mySet = setValue
+      ? setValue
+      : e => {
+          console.log(e.target.value)
+        }
+    // let str: any = ''
+    if (item.type === 'text') {
+      return (
+        <Input className="menu-item-input" value={schemaData[item.dataKey].value} onInput={mySet} />
+      )
+    } else if (item.type === 'image') {
+      return (
+        <View>
+          <Image src={schemaData[item.dataKey].value} />
+          <Button>上传图片</Button>
+        </View>
+      )
+    } else if (item.type === 'list') {
+      return (
+        <View>
+          {schemaData[item.dataKey].map((item2, index) => {
+            const item2Back = item2
+            return (
+              <View key={index + 123}>
+                {Object.keys(item2).map(key => {
+                  // const newKey = key
+                  return key !== 'schemaIndex' && key !== 'index' ? (
+                    <View key={key}>
+                      <View>
+                        序号
+                        {index}
+                        {key}
+                        <Button>删除</Button>
+                      </View>
+                      {/* <View>{this.checkType(item2Back, newKey)}</View> */}
+                      {/* <View>
+                        {item.modelSchema[this.isSchemaIndex(item2)][key].type === 'text' ? (
+                          <Input className="menu-item-input" value={item2[key]} />
+                        ) : null}
+                      </View> */}
+                      {/* item.modelSchema[this.isSchemaIndex(item2)][key].type ? (
+                          <View>
+                            <Image src={item2[key]} />
+                            <Button>上传图片</Button>
+                          </View>
+                        ) : null */}
+                      {/* <MenuItem
+                        item={item.modelSchema[this.isSchemaIndex(item2)][key]}
+                        schemaData={schemaData}
+                        isList={false}
+                      /> */}
+                    </View>
+                  ) : (
+                    ''
+                  )
+                  // if () {
+                  // } else {
+                  //   return <View key={key}>121321</View>
+                  // }
+                })}
+              </View>
+            )
+          })}
+        </View>
+      )
+    } else {
+      return ''
+    }
+    // return <View className="menu-item">{str}</View>
+  }
+}
+export default MenuItem as ComponentClass<PageOwnProps, PageState>

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

@@ -32,7 +32,7 @@ class TempItem extends Component {
     const { templateName, templateUrl: url, filmName, equipmentCount } = this.props
     return (
       <View className="temp-item" onClick={this.goDetail}>
-        <Image lazyLoad className="temp-img" src={url} />
+        <Image lazyLoad className="temp-img" src={url.split(',')[0]} />
         <Text className="temp-name">{templateName || filmName}</Text>
         {equipmentCount !== undefined ? (
           <Text className="equipment-count">播放设备：{equipmentCount}台</Text>

src/pages/home/tempaltes/film_detail.tsx

@@ -43,6 +43,7 @@ class FilmDetail extends Component {
       filmList: []
     }
     this.chengDevice = this.chengDevice.bind(this)
+    this.goEdit = this.goEdit.bind(this)
   }
 
   componentWillMount() {
@@ -75,6 +76,13 @@ class FilmDetail extends Component {
     Taro.navigateTo({ url })
   }
 
+  goEdit() {
+    console.log('chengDevice')
+    const { filmId } = this.state
+    const url = `/pages/home/tempaltes/film_edit?filmId=${filmId}`
+    Taro.navigateTo({ url })
+  }
+
   shouldComponentUpdate(_nextProps: IProps, _nextState: PageState) {
     const { filmInfo, filmList } = this.state
     const { filmInfo: _filmInfo, filmList: _filmList } = _nextState
@@ -96,7 +104,7 @@ class FilmDetail extends Component {
           </ScrollView>
         </View>
         <View className="film-detail-bottom-bar">
-          <Button type="primary" className="film-detail-bottom-bar-btn">
+          <Button type="primary" className="film-detail-bottom-bar-btn" onClick={this.goEdit}>
             修改视片
           </Button>
           <Button type="primary" className="film-detail-bottom-bar-btn" onClick={this.chengDevice}>

src/pages/home/tempaltes/film_edit.tsx

+import { ComponentClass } from 'react'
+import Taro, { Component, Config } from '@tarojs/taro'
+import { View, Text, ScrollView, Button, Image } from '@tarojs/components'
+import EditMenu from './conpoments/edit_menu'
+
+import './scss/film_edit.scss'
+import api from '@/api/index'
+
+type PageStateProps = {}
+
+type PageDispatchProps = {}
+
+type PageOwnProps = {}
+
+type PageState = {
+  page: number
+  count: number
+  filmInfo: any
+  filmId: string
+  filmData: any
+  pageIndex: number
+}
+
+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,
+      pageIndex: 0,
+      filmInfo: {},
+      filmData: {}
+    }
+    this.chengDevice = this.chengDevice.bind(this)
+  }
+
+  componentWillMount() {
+    this.getData()
+  }
+
+  async getData() {
+    const { page, filmId } = this.state
+    try {
+      const [filmInfo] = await Promise.all([api.common.getFilmDetailInfo(filmId)])
+      console.log({ filmInfo })
+      const { list, count } = filmInfo
+      const filmData =
+        JSON.parse(filmInfo.filmData) && JSON.parse(filmInfo.filmData).pageList
+          ? JSON.parse(filmInfo.filmData).pageList
+          : []
+      this.setState({
+        count,
+        filmInfo,
+        filmData
+      })
+    } catch (error) {
+      console.error(error)
+    }
+  }
+  changePage(index) {
+    this.setState({
+      pageIndex: index
+    })
+  }
+  chengDevice() {
+    console.log('chengDevice')
+    const { filmId } = this.state
+    const url = `/pages/home/device/device_bind/index?filmId=${filmId}`
+    Taro.navigateTo({ url })
+  }
+  changeFilmName = ({ target }) => {
+    const { value } = target
+    this.setState({ createFilmName: value })
+  }
+
+  changeDescribeName = ({ target }) => {
+    const { value } = target
+    this.setState({ createFilmDescribe: value })
+  }
+  shouldComponentUpdate(_nextProps: IProps, _nextState: PageState) {
+    const { filmInfo } = this.state
+    const { filmInfo: _filmInfo } = _nextState
+    return filmInfo !== _filmInfo
+  }
+
+  render() {
+    const { filmInfo, filmData, pageIndex } = this.state
+    filmInfo.templateName = filmInfo.filmName
+    filmInfo.templateDescribe = filmInfo.filmDescribe
+    return (
+      <View className="film-detail">
+        <View className="film-detail-scroll">
+          <View className="film-info">
+            <Text className="film-info-text">视片名称</Text>
+            <Input
+              placeholder="请输入视片名称"
+              className="film-info-input"
+              value={filmInfo.filmName}
+              onInput={this.changeFilmName}
+            />
+            <Text className="film-info-text">视片描述</Text>
+            <Input
+              placeholder="请输入视片描述"
+              className="film-info-input"
+              value={filmInfo.filmName}
+              onInput={this.changeDescribeName}
+            />
+          </View>
+          <ScrollView className="film-detail-scroll-view" scrollX>
+            <View className="page-container">
+              {filmData.map((item, index) => {
+                // const name = item.name
+                return (
+                  <View key={index} className="page-item">
+                    <Image src={item.thumb} className="page-thumb" />
+                    <View>{item.name}</View>
+                  </View>
+                )
+              })}
+            </View>
+          </ScrollView>
+          {filmData[pageIndex]}
+          <EditMenu {...filmData[pageIndex]} />
+        </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">
+            更改并同步到设备
+          </Button>
+        </View>
+      </View>
+    )
+  }
+}
+export default FilmDetail as ComponentClass<PageOwnProps, PageState>

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

-@import '@styles/var.scss';
+@import "@styles/var.scss";
 
 .film-detail {
   width: 100%;
@@ -9,7 +9,7 @@
 
   &-scroll {
     flex: 1;
-    overflow: hidden;
+    overflow: auto;
 
     &-view {
       height: 100%;

src/pages/home/tempaltes/scss/film_edit.scss

+@import '@styles/var.scss';
+@import '~taro-ui/dist/style/components/accordion.scss';
+@import '~taro-ui/dist/style/components/icon.scss';
+
+.film-detail {
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+
+  .film-info {
+    padding: 20px 20px 0 20px;
+
+    &-input {
+      border: 1px solid #eee;
+    }
+  }
+
+  .page-container {
+    display: flex;
+    padding: 20px 20px 0 20px;
+
+    .page-item {
+      margin-right: 30px;
+    }
+
+    .page-thumb {
+      width: 260px;
+      height: 180px;
+    }
+  }
+
+  &-scroll {
+    flex: 1;
+    overflow: hidden;
+
+    &-view {
+      height: 240px;
+    }
+  }
+
+  &-list {
+    padding: 20px 20px 0 20px;
+  }
+
+  &-bottom-bar {
+    display: flex;
+    flex-direction: row;
+
+    &-btn {
+      flex: 1;
+      border-radius: 0;
+    }
+  }
+}