film_edit.tsx 6.81 KB
Newer Older
hank committed
1 2
import { ComponentClass } from 'react'
import Taro, { Component, Config } from '@tarojs/taro'
hank committed
3
import { View, Text, ScrollView, Button, Image, Input } from '@tarojs/components'
hank committed
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
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
hank committed
19
  pageIndex: any
hank committed
20 21
  filmId: string
  filmData: any
hank committed
22
  pageInfo: {}
hank committed
23
  resourceUrl: string
hank committed
24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface FilmDetail {
  props: IProps
  state: PageState
}

class FilmDetail extends Component {
  config: Config = {
    navigationBarTitleText: '编辑视片'
  }

  constructor() {
hank committed
39
    super(...arguments)
hank committed
40 41 42
    const filmId = this.$router.params.filmId || '32263ed8295746c99ab66282c26fbc65'
    this.state = {
      filmId,
hank committed
43
      page: 0,
hank committed
44 45
      count: 0,
      pageIndex: 0,
hank committed
46
      resourceUrl: '',
hank committed
47
      filmInfo: {},
hank committed
48 49 50 51
      filmData: {},
      pageInfo: {
        pageIndex: 0
      }
hank committed
52
    }
hanjixin committed
53
    this.setValue = this.setValue.bind(this)
hank committed
54
    this.updateFilm = this.updateFilm.bind(this)
hank committed
55
  }
hank committed
56 57 58 59 60 61 62 63 64
  editPage() {
    const { resourceUrl, filmData } = this.state
    const url = `/pages/home/tempaltes/film_page`
    Taro.setStorage({ key: 'filmData', data: JSON.stringify(filmData) }).then(() => {
      Taro.setStorage({ key: 'resourceUrl', data: resourceUrl }).then(() => {
        Taro.navigateTo({ url })
      })
    })
  }
hank committed
65 66 67
  componentWillMount() {
    this.getData()
  }
hank committed
68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
  componentDidShow() {
    let {filmData, filmInfo}  = this.state
    if (Taro.getStorageSync('filmData')) {
      filmData = JSON.parse(Taro.getStorageSync('filmData'))
      console.log(filmData.pageList.length)
      this.setState({
        filmData,
        filmInfo: {
          ...filmInfo
        }
      }, () => {
        this.render()
      })
      Taro.removeStorageSync('filmData')
      Taro.removeStorageSync('resourceUrl')
    }
  },
  componentDidMount() {
    Taro.removeStorageSync('filmData')
    Taro.removeStorageSync('resourceUrl')
  }
hank committed
89 90 91 92 93 94
  async getData() {
    const { page, filmId } = this.state
    try {
      const [filmInfo] = await Promise.all([api.common.getFilmDetailInfo(filmId)])
      console.log({ filmInfo })
      const { list, count } = filmInfo
hank committed
95
      let filmData = JSON.parse(filmInfo.filmData) ? JSON.parse(filmInfo.filmData) : {}
hank committed
96 97 98
      this.setState({
        count,
        filmInfo,
hank committed
99
        resourceUrl: filmInfo.resourceUrl,
hank committed
100 101 102 103 104 105
        filmData
      })
    } catch (error) {
      console.error(error)
    }
  }
hank committed
106

hank committed
107
  changePage(index) {
hank committed
108 109
    console.log(index, 'changePage')
    const pageIndex = index
hank committed
110
    this.setState({
hank committed
111 112 113 114 115
      filmInfo: {
        filmName: this.state.filmInfo.filmName,
        filmDescribe: this.state.filmInfo.filmDescribe
      },
      pageIndex: pageIndex
hank committed
116 117
    })
  }
hank committed
118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138
  updateFilm() {
    const { filmDescribe, filmId, filmName } = this.state.filmInfo
    console.log(filmId, 'filmId', this.state.filmInfo)
    let filmDatas = JSON.parse(JSON.stringify(this.state.filmData))
    // filmDatas.pageList = this.state.filmData.pageList
    api.common
      .updateFilmInfo({
        filmDescribe,
        filmId: this.$router.params.filmId,
        filmName,
        filmData: JSON.stringify(filmDatas)
      })
      .then(() => {
        Taro.showToast({
          title: '成功',
          icon: 'success',
          duration: 1000
        })
        Taro.navigateBack()
      })
  }
hanjixin committed
139
  setValue(schemaData) {
hank committed
140 141 142 143
    let currentData = JSON.parse(JSON.stringify(this.state.filmData))
    JSON.parse(JSON.stringify(this.state.filmData))
    currentData.pageList[this.state.pageIndex].schemaData = schemaData
    console.log(schemaData)
hanjixin committed
144
    this.setState({
hank committed
145 146 147 148 149
      filmData: currentData,
      filmInfo: {
        filmName: this.state.filmInfo.filmName,
        filmDescribe: this.state.filmInfo.filmDescribe
      }
hanjixin committed
150
    })
hank committed
151
  }
hanjixin committed
152

hank committed
153 154
  changeFilmName = ({ target }) => {
    const { value } = target
hank committed
155 156 157 158 159 160 161
    console.log(this.state.filmData)
    this.setState({
      filmInfo: {
        filmName: value,
        filmDescribe: this.state.filmInfo.filmDescribe
      }
    })
hank committed
162 163 164 165
  }

  changeDescribeName = ({ target }) => {
    const { value } = target
hank committed
166 167 168 169 170 171
    this.setState({
      filmInfo: {
        filmDescribe: value,
        filmName: this.state.filmInfo.filmName
      }
    })
hank committed
172 173 174 175 176 177 178 179 180 181 182
  }
  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
hank committed
183
    const pageList = filmData.pageList
hank committed
184
    console.log('film-edit render', pageList)
hank committed
185 186 187 188 189 190 191 192 193 194 195 196 197 198 199
    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"
hank committed
200
              value={filmInfo.filmDescribe}
hank committed
201 202 203 204 205
              onInput={this.changeDescribeName}
            />
          </View>
          <ScrollView className="film-detail-scroll-view" scrollX>
            <View className="page-container">
hank committed
206
              {pageList.map((item, index) => {
hank committed
207 208
                // const name = item.name
                return (
hank committed
209 210
                  <View
                    key={index + item.name}
hank committed
211
                    className={index === pageIndex ? 'page-item page-item-active' : 'page-item'}
hank committed
212 213 214 215
                    onClick={() => {
                      this.changePage(index)
                    }}
                  >
hank committed
216 217 218 219 220 221 222
                    <Image src={item.thumb} className="page-thumb" />
                    <View>{item.name}</View>
                  </View>
                )
              })}
            </View>
          </ScrollView>
hank committed
223 224 225
          <View>
            <Button onClick={this.editPage}>页面管理</Button>
          </View>
hank committed
226
          {/* {filmData[pageIndex]} */}
hank committed
227
          {/* {pageIndex} */}
hank committed
228
          <EditMenu {...pageList[pageIndex]} setValue={this.setValue} />
hank committed
229 230 231 232 233
        </View>
        <View className="film-detail-bottom-bar">
          <Button type="primary" className="film-detail-bottom-bar-btn">
            预览视片
          </Button>
hank committed
234
          <Button type="primary" className="film-detail-bottom-bar-btn" onClick={this.updateFilm}>
hank committed
235 236 237 238 239 240 241 242
            更改并同步到设备
          </Button>
        </View>
      </View>
    )
  }
}
export default FilmDetail as ComponentClass<PageOwnProps, PageState>