film_edit.tsx 8.79 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
  }
56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
  addPage(index?) {
    const { filmData, pageIndex } = this.state
    let newPageList = JSON.parse(JSON.stringify(filmData.pageList))
    newPageList.splice(pageIndex, 0, filmData.pageList[pageIndex])
    console.log(newPageList, 'newPageList', 'pageIndex')
    this.setState({
      filmData: {
        ...filmData,
        pageList: newPageList
      }
    })
  }

  delPage(index?) {
    const { filmData, pageIndex } = this.state
    let pageList = filmData.pageList
    pageList.splice(pageIndex, 1)
    this.setState({
      filmData: {
        ...filmData,
        pageList: pageList
      },
      pageIndex: 0
    })
  }
hank committed
81
  editPage() {
82 83 84 85 86 87 88 89 90 91 92 93
    // 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 })
    //   })
    // })
    const { filmData }  = this.state
    let pageList =   filmData.pageList || []
    if (pageList.length) {
      Taro.showActionSheet({
        itemList: ['新增本页', '删除本页']
hank committed
94
      })
95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111
        .then(res => {
          if (res.tapIndex === 0) {
            this.addPage()
          }
          if (res.tapIndex === 1) {
            this.delPage()
          }
          console.log(res.errMsg, res.tapIndex)
        })
        .catch(err => console.log(err.errMsg))
    } else {
      Taro.showToast({
        title: '当页面数量为1时不可删除',
        icon: 'none',
        duration: 1000
      })
     }
hank committed
112
  }
hank committed
113 114 115 116 117 118
  goPreview() {
    const { filmInfo } = this.state
    Taro.navigateTo({
      url: `/pages/home/tempaltes/film_preview?frameUrl=${filmInfo.frameUrl}&filmId=${filmInfo.filmId}`
    })
  }
hank committed
119 120 121
  componentWillMount() {
    this.getData()
  }
hank committed
122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142
  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
143 144 145 146 147 148
  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
149
      let filmData = JSON.parse(filmInfo.filmData) ? JSON.parse(filmInfo.filmData) : {}
hank committed
150 151 152
      this.setState({
        count,
        filmInfo,
hank committed
153
        resourceUrl: filmInfo.resourceUrl,
hank committed
154 155 156 157 158 159
        filmData
      })
    } catch (error) {
      console.error(error)
    }
  }
hank committed
160

hank committed
161
  changePage(index) {
hank committed
162 163
    console.log(index, 'changePage')
    const pageIndex = index
hank committed
164
    this.setState({
hank committed
165 166 167 168
      // filmInfo: {
      //   filmName: this.state.filmInfo.filmName,
      //   filmDescribe: this.state.filmInfo.filmDescribe
      // },
hank committed
169
      pageIndex: pageIndex
hank committed
170
    })
hank committed
171 172 173 174 175 176 177
    // this.setState({
    //   filmInfo: {
    //     filmName: this.state.filmInfo.filmName,
    //     filmDescribe: this.state.filmInfo.filmDescribe
    //   },
    //   pageIndex: pageIndex
    // })
hank committed
178
  }
hank committed
179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199
  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
200
  setValue(schemaData) {
hank committed
201 202 203 204
    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
205
    this.setState({
hank committed
206 207 208 209 210
      filmData: currentData,
      filmInfo: {
        filmName: this.state.filmInfo.filmName,
        filmDescribe: this.state.filmInfo.filmDescribe
      }
hanjixin committed
211
    })
hank committed
212
  }
hanjixin committed
213

hank committed
214 215
  changeFilmName = ({ target }) => {
    const { value } = target
hank committed
216 217 218 219 220 221 222
    console.log(this.state.filmData)
    this.setState({
      filmInfo: {
        filmName: value,
        filmDescribe: this.state.filmInfo.filmDescribe
      }
    })
hank committed
223 224 225 226
  }

  changeDescribeName = ({ target }) => {
    const { value } = target
hank committed
227 228 229 230 231 232
    this.setState({
      filmInfo: {
        filmDescribe: value,
        filmName: this.state.filmInfo.filmName
      }
    })
hank committed
233
  }
hank committed
234 235 236 237 238
  // shouldComponentUpdate(_nextProps: IProps, _nextState: PageState) {
  //   const { filmInfo } = this.state
  //   const { filmInfo: _filmInfo } = _nextState
  //   return filmInfo !== _filmInfo
  // }
hank committed
239 240 241 242 243

  render() {
    const { filmInfo, filmData, pageIndex } = this.state
    filmInfo.templateName = filmInfo.filmName
    filmInfo.templateDescribe = filmInfo.filmDescribe
hank committed
244
    const pageList = filmData.pageList || []
245
    console.log('film-edit render', filmInfo)
hank committed
246 247 248
    return (
      <View className="film-detail">
        <View className="film-detail-scroll">
249
          {/* <View className="film-info">
hank committed
250 251 252 253 254 255 256 257 258 259 260
            <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
261
              value={filmInfo.filmDescribe}
hank committed
262 263
              onInput={this.changeDescribeName}
            />
264 265 266
          </View> */}
          <ScrollView className="film-detail-scroll-view" className={filmInfo.templateShow === 'VERTICAL' ? 'film-detail-scroll-view2' : 'film-detail-scroll-view'} scrollX>
            <View className="page-container" className={filmInfo.templateShow === 'VERTICAL' ? 'page-container page-container2' : 'page-container'}>
hank committed
267
              {pageList.map((item, index) => {
hank committed
268 269
                // const name = item.name
                return (
hank committed
270 271
                  <View
                    key={index + item.name}
hank committed
272
                    className={index === pageIndex ? 'page-item page-item-active' : 'page-item'}
hank committed
273 274 275 276
                    onClick={() => {
                      this.changePage(index)
                    }}
                  >
277
                    <Image src={item.thumb}  className={filmInfo.templateShow === 'VERTICAL' ? 'page-thumb2' : 'page-thumb'} />
hank committed
278 279 280 281 282 283
                    <View>{item.name}</View>
                  </View>
                )
              })}
            </View>
          </ScrollView>
hank committed
284 285 286
          <View>
            <Button onClick={this.editPage}>页面管理</Button>
          </View>
hank committed
287
          {/* {filmData[pageIndex]} */}
hank committed
288
          {/* {pageIndex} */}
hank committed
289
          <EditMenu {...pageList[pageIndex]} frameUrl={filmInfo.frameUrl} setValue={this.setValue} />
hank committed
290 291
        </View>
        <View className="film-detail-bottom-bar">
hank committed
292
          <Button type="primary" className="film-detail-bottom-bar-btn" onClick={this.goPreview}>
hank committed
293 294
            预览视片
          </Button>
hank committed
295
          <Button type="primary" className="film-detail-bottom-bar-btn" onClick={this.updateFilm}>
hank committed
296 297 298 299 300 301 302 303
            更改并同步到设备
          </Button>
        </View>
      </View>
    )
  }
}
export default FilmDetail as ComponentClass<PageOwnProps, PageState>