页面编辑

src/pages/home/tempaltes/film_edit.tsx

@@ -65,17 +65,34 @@ class FilmDetail extends Component {
   componentWillMount() {
     this.getData()
   }
-
+  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')
+  }
   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)
-          ? JSON.parse(filmInfo.filmData)
-          : {}
+      let filmData = JSON.parse(filmInfo.filmData) ? JSON.parse(filmInfo.filmData) : {}
       this.setState({
         count,
         filmInfo,
@@ -86,6 +103,7 @@ class FilmDetail extends Component {
       console.error(error)
     }
   }
+
   changePage(index) {
     console.log(index, 'changePage')
     const pageIndex = index
@@ -163,7 +181,7 @@ class FilmDetail extends Component {
     filmInfo.templateName = filmInfo.filmName
     filmInfo.templateDescribe = filmInfo.filmDescribe
     const pageList = filmData.pageList
-    console.log('film-edit render')
+    console.log('film-edit render', pageList)
     return (
       <View className="film-detail">
         <View className="film-detail-scroll">
@@ -202,9 +220,9 @@ class FilmDetail extends Component {
               })}
             </View>
           </ScrollView>
-          {/* <View>
-            <Button onClick={this.editPage}>编辑页面</Button>
-          </View> */}
+          <View>
+            <Button onClick={this.editPage}>页面管理</Button>
+          </View>
           {/* {filmData[pageIndex]} */}
           {/* {pageIndex} */}
           <EditMenu {...pageList[pageIndex]} setValue={this.setValue} />

src/pages/home/tempaltes/film_page.tsx

 import { ComponentClass } from 'react'
 import Taro, { Component, Config } from '@tarojs/taro'
-import { View, Image, Button, MovableArea, MovableView } from '@tarojs/components'
-
+import { View, Image, Button, Text, ScrollView, MovableArea, MovableView } from '@tarojs/components'
+import { AtModal } from 'taro-ui'
+import { axios } from 'taro-axios'
+import './scss/film_page.scss'
 type PageStateProps = {}
 
 type PageDispatchProps = {}
@@ -11,6 +13,8 @@ type PageOwnProps = {}
 type PageState = {
   filmData: any
   resourceUrl: string
+  opened: boolean
+  pageList: any[]
 }
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
@@ -31,7 +35,9 @@ class FilmPage extends Component {
       filmData: {
         pageList: []
       },
-      resourceUrl: ''
+      pageList: [],
+      resourceUrl: '',
+      opened: false
     }
   }
 
@@ -45,6 +51,12 @@ class FilmPage extends Component {
     try {
       const filmData = JSON.parse(Taro.getStorageSync('filmData'))
       const resourceUrl = Taro.getStorageSync('resourceUrl')
+      axios.get(resourceUrl).then(res => {
+        console.log(res)
+        this.setState({
+          pageList: res.data.pageList
+        })
+      })
       console.log(filmData, resourceUrl)
       this.setState({
         filmData,
@@ -54,31 +66,83 @@ class FilmPage extends Component {
       console.error(error)
     }
   }
+  showModal() {
+    this.setState({
+      opened: true
+    })
+  }
+  addItem(index) {
+    const { filmData, pageList } = this.state
+    console.log(filmData.pageList)
+    let newPageList = filmData.pageList
+    newPageList.push(pageList[index])
+    this.setState({
+      filmData: {
+        ...filmData,
+        pageList: newPageList
+      },
+      opened: false
+    })
+  }
 
+  delItem(index) {
+    const { filmData } = this.state
+    let pageList = filmData.pageList
+    pageList.splice(index, 1)
+    this.setState({
+      filmData: {
+        ...filmData,
+        pageList: pageList
+      }
+    })
+  }
+
+  enter() {
+    const { filmData } = this.state
+    Taro.setStorage({ key: 'filmData', data: JSON.stringify(filmData) }).then(() => {
+      Taro.navigateBack()
+    })
+  }
   render() {
-    const { filmData, filmList } = this.state
+    const { filmData, pageList, opened } = this.state
     return (
-      <View className="film-detail">
+      <View className="film-pages">
         <View className="film-detail-scroll">
-          <MovableArea style="height: 500px; width: 100%; background: red;">
-            {filmData.pageList.map((item, index) => {
+          {filmData.pageList.map((item, index) => {
+            return (
+              <View key={index} className="page-item">
+                <Button className="page-item-del" onClick={() => this.delItem(index)}>
+                  删除
+                </Button>
+                <Image src={item.thumb} className="page-item-thumb" />
+                <Text className="page-item-name">{item.name}</Text>
+              </View>
+            )
+          })}
+          {/* <MovableArea style="height: 500px; width: 100%; background: red;">
+            direction="all" damping={3000}
+            friction={1}
+            x={0}
+            y={0}
+          </MovableArea> */}
+        </View>
+        <AtModal isOpened={opened}>
+          <ScrollView scrollY className="add-page-container">
+            {pageList.map((item, index) => {
               return (
-                <MovableView
-                  direction="all"
-                  damping={3000}
-                  friction={1}
-                  key={index}
-                  style="height: 100px; width: 100%; background: blue;"
-                >
-                  {/* <Image src={item.thumb} /> */}
-                  {item.thumb}
-                </MovableView>
+                <View key={index} className="page-item" onClick={() => this.addItem(index)}>
+                  <Image src={item.thumb} className="page-item-thumb" />
+                  <Text className="page-item-name">{item.name}</Text>
+                </View>
               )
             })}
-          </MovableArea>
-        </View>
+          </ScrollView>
+        </AtModal>
+        <Button className="add-page" onClick={this.showModal}>
+          添加
+        </Button>
         <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.enter}>
             确认更改
           </Button>
         </View>

src/pages/home/tempaltes/scss/film_page.scss

+@import '~taro-ui/dist/style/components/modal.scss';
+
 .film-pages {
   width: 100%;
+  position: relative;
+
+  .add-page-container {
+    max-height: 60vh;
+    overflow: auto;
+  }
+
+  .add-page {
+    position: fixed;
+    bottom: 200px;
+    right: 30px;
+    width: 100px;
+    height: 100px;
+    text-align: center;
+    border-radius: 50%;
+    line-height: 100px;
+    font-size: 20px;
+    z-index: 111;
+  }
+
+  .page-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    position: relative;
+
+    &-del {
+      position: absolute;
+      top: 5px;
+      right: 20px;
+      width: 60px;
+      height: 60px;
+      text-align: center;
+      border-radius: 50%;
+      line-height: 60px;
+      font-size: 20px;
+    }
+
+    &-thumb {
+      width: 500px;
+      height: 280px;
+    }
+
+    &-name {
+      flex: 1;
+      padding-left: 10px;
+    }
+  }
 }