修改交互流程

src/app.tsx

@@ -54,6 +54,7 @@ class App extends Component {
       'pages/home/tempaltes/film_page',
       'pages/home/tempaltes/film_preview',
       'pages/home/tempaltes/film_edit',
+      'pages/home/tempaltes/film_edit_info',
       'pages/home/film/schedule_add/index',
       'pages/home/film/schedule_add/components/films/index',
       'pages/home/film/schedule_add/components/device/index',

src/common/index.ts

 export const FETCH_TIME_OUT = 5000
 // export const BASE_URL = 'https://server.bdideal.com'
+// export const WEBVIEW_URL = 'https://visual.bdideal.com'
 export const BASE_URL = 'https://dev-server.bdideal.com'
 export const WEBVIEW_URL = 'https://dev-visual.bdideal.com'
-// export const BASE_URL = 'http://172.16.4.219:8090'
 
 /** 蓝牙的服务 uuid */
 export const BLE_SERVICE_ID = '000088A0-0000-1000-8000-00805F9B34FB'

src/pages/home/film/film_list/index.tsx

 import api from '@/api/index'
 import { ComponentClass } from 'react'
-import { AtSwipeAction } from 'taro-ui'
+import { AtSwipeAction, AtActionSheet, AtActionSheetItem } from 'taro-ui'
 import { connect } from '@tarojs/redux'
 import { View, Text } from '@tarojs/components'
 import { showMyToast } from '@/common/utils'
@@ -10,7 +10,6 @@ import { getDeviceList } from '@/actions/asyncCounter'
 import FilmListItem from '@/conpoments/film_list_item'
 
 import './index.scss'
-
 type PageStateProps = {
   list: any[]
   count: number
@@ -32,7 +31,9 @@ export interface IMilmListItme {
 }
 
 interface PageState {
-  showTemplate: string
+  showTemplate: 'HORIZONTAL'
+  isOpened: false
+  chooseItem: {}
 }
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
@@ -55,28 +56,35 @@ interface Films {
 )
 class Films extends Component {
   protected page = 1
-
+  constructor(props) {
+    super(props)
+    this.setState({
+      isOpened: false,
+      chooseItem: {}
+    })
+  }
   async componentWillMount() {
     this.getData()
   }
   componentDidShow() {
     this.getData()
+    this.onClose()
   }
   async getData() {
     const { showTemplate } = this.state
-    this.props.getDeviceListData(this.page, showTemplate)
+    this.props.getDeviceListData(this.page, showTemplate || 'HORIZONTAL')
   }
 
-  async handleItem({ filmId }: IMilmListItme) {
+  async handleItem({ filmId }) {
+    this.setState({
+      isOpened: false
+    })
     Taro.showModal({ content: '确定要删除？' }).then(async ({ confirm }) => {
       if (confirm) {
         try {
           await api.common.removeFilm(filmId)
           this.getData()
           showMyToast({ title: '删除成功~' })
-        } catch (error) {
-          console.error(error)
-          showMyToast({ title: '失败成功~' })
         }
       }
     })
@@ -93,10 +101,45 @@ class Films extends Component {
     )
   }
 
-  goDetail({ filmId }: IMilmListItme) {
-    Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?filmId=${filmId}` })
+  goDetail(item: IMilmListItme) {
+    console.log(item)
+    if (process.env.TARO_ENV !== 'rn') {
+      Taro.hideTabBar().then(() => {
+        this.setState({
+          isOpened: true,
+          chooseItem: item
+        })
+      })
+    } else {
+      this.setState({
+        isOpened: true,
+        chooseItem: item
+      })
+    }
+
+    // Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?filmId=${item.filmId}` })
+  }
+  ActionSheetHandleCancel() {
+    this.setState({
+      isOpened: false
+    })
+  }
+  handleClickSheet(item) {
+    this.ActionSheetHandleCancel()
+    Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?filmId=${item.filmId}` })
+  }
+  changeInfo(item) {
+    this.ActionSheetHandleCancel()
+    Taro.navigateTo({ url: `/pages/home/tempaltes/film_edit_info?filmId=${item.filmId}` })
   }
 
+  onClose() {
+    this.ActionSheetHandleCancel()
+    if (process.env.TARO_ENV !== 'rn') {
+      Taro.showTabBar()
+    }
+    this.ActionSheetHandleCancel()
+  }
   async onDownRefresh(done: any) {
     this.page = 1
     await this.getData()
@@ -111,19 +154,33 @@ class Films extends Component {
     done()
   }
 
-  shouldComponentUpdate(nextProps: IProps) {
-    const { list } = this.props
-    const { showTemplate } = this.state
-    const { list: _list } = nextProps
-    return list !== _list || !!showTemplate
-  }
+  // shouldComponentUpdate(nextProps: IProps) {
+  //   const { list } = this.props
+  //   const { showTemplate } = this.state
+  //   const { list: _list } = nextProps
+  //   return list !== _list || !!showTemplate
+  // }
 
   render() {
     const { list, height, count } = this.props
-    let { showTemplate } = this.state
+    let { showTemplate, isOpened, chooseItem } = this.state
     showTemplate = showTemplate || 'HORIZONTAL'
     return (
       <View className="films">
+        <AtActionSheet
+          isOpened={isOpened}
+          title="设置影片"
+          onCancel={this.ActionSheetHandleCancel}
+          onClose={() => {
+            this.onClose()
+          }}
+        >
+          <AtActionSheetItem onClick={() => { this.handleClickSheet(chooseItem) }} >
+            编辑</AtActionSheetItem>
+          <AtActionSheetItem onClick={() => { this.changeInfo(chooseItem) }} >
+            设置信息</AtActionSheetItem>
+          <AtActionSheetItem onClick={() => this.handleItem(chooseItem)}>删除</AtActionSheetItem>
+        </AtActionSheet>
         <View className="film-search-bar">
           <View className="type-tab">
             <Text

src/pages/home/film/index.scss

 @import '@styles/var.scss';
 @import '~taro-ui/dist/style/components/tabs.scss';
+@import '~taro-ui/dist/style/components/action-sheet.scss';
 
 .at-tabs__item-underline {
   background: #ff9110 !important;

src/pages/home/film/index.tsx

@@ -35,7 +35,6 @@ class Device extends Component {
   }
   constructor(props) {
     super(props)
-
     const { windowHeight } = Taro.getSystemInfoSync()
     this.state = {
       current: 0,
@@ -49,10 +48,11 @@ class Device extends Component {
 
   render() {
     const { current, windowHeight } = this.state
+
     return (
       <AtTabs current={current} tabList={tabList} onClick={this.changePage} swipeable={false}>
         <AtTabsPane current={current} index={0}>
-          <View style={{ height: `${windowHeight}px` }}>
+          <View style={{ height: `${windowHeight + 70}px` }}>
             <FilmList height={windowHeight} />
           </View>
         </AtTabsPane>

src/pages/home/tempaltes/detail.tsx

@@ -86,7 +86,10 @@ class TempDetail extends Component {
   }
 
   createFilm = () => {
-    this.setState({ showModal: true })
+    Taro.navigateTo({
+      url: `/pages/home/tempaltes/film_detail?templateId=${this.$router.params.templateId}`
+    })
+    // this.setState({ showModal: true })
   }
 
   cancelModal = () => {

src/pages/home/tempaltes/film_detail.tsx

@@ -62,6 +62,10 @@ class FilmDetail extends Component {
     //     delta: -1
     //   })
     // }, 10000)
+    Taro.showLoading({
+      title: '资源加载中',
+      mask: true
+    })
   }
   componentDidShow() {
     // this.getData()
@@ -157,6 +161,9 @@ class FilmDetail extends Component {
       }
     })
   }
+  webviewLoad() {
+    Taro.hideLoading()
+  }
 
   render() {
     const { filmInfo, filmList, showModal, filmId } = this.state
@@ -218,6 +225,9 @@ class FilmDetail extends Component {
           src={`${WEBVIEW_URL}/tempaltes/edit?${
             templateId ? 'templateId=' + templateId : 'filmId=' + filmId
           }&token=${token.getToken()}`}
+          onLoad={() => {
+            this.webviewLoad()
+          }}
         />
       </View>
     )

src/pages/home/tempaltes/film_edit_info.tsx

+import { ComponentClass } from 'react'
+import Taro, { Component, Config } from '@tarojs/taro'
+import { View, Text, Button, Input } from '@tarojs/components'
+import { showMyToast } from '@/common/utils'
+import './scss/film_detail.scss'
+import api from '@/api/index'
+
+type PageStateProps = {}
+
+type PageDispatchProps = {}
+
+type PageOwnProps = {}
+
+type PageState = {
+  page: number
+  count: number
+  filmInfo: any
+  filmId: string
+  filmList: any[]
+  showModal: boolean
+  deviceList: any[]
+}
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps
+
+interface FilmDetail {
+  props: IProps
+  state: PageState
+}
+
+class FilmDetail extends Component {
+  config: Config = {
+    navigationBarTitleText: '设置信息'
+    // navigationStyle: undefined
+  }
+
+  constructor() {
+    super()
+    const filmId = this.$router.params.filmId
+    this.state = {
+      filmId,
+      page: 1,
+      count: 0,
+      filmInfo: {},
+      showModal: false,
+      filmList: [],
+      deviceList: []
+    }
+  }
+
+  componentWillMount() {
+    this.getData()
+  }
+  componentDidShow() {
+    this.getData()
+  }
+  async getData() {
+    const { filmId } = this.state
+    try {
+      const [filmInfo] = await Promise.all([api.common.getFilmDetailInfo(filmId)])
+      this.setState({
+        filmInfo
+      })
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  inputConfirm = async () => {
+    const {
+      filmInfo: { templateName, templateDescribe, filmId }
+    } = this.state
+    if (!templateName) {
+      showMyToast({ title: '视片名称不能为空~' })
+      return
+    }
+    try {
+      await api.common.updateFilmName(templateName, templateDescribe, filmId)
+      showMyToast({ title: '更新成功' })
+      setTimeout(() => {
+        Taro.navigateBack()
+      }, 500)
+    } catch (error) {
+      showMyToast({ title: '更新失败' })
+    }
+  }
+
+  showMyModal() {
+    this.setState({ showModal: true })
+  }
+
+  changeFilmName = ({ target }) => {
+    const { value } = target
+    const { filmInfo } = this.state
+    this.setState({
+      filmInfo: {
+        ...filmInfo,
+        filmName: value
+      }
+    })
+  }
+
+  changeDescribeName = ({ target }) => {
+    const { value } = target
+    const { filmInfo } = this.state
+    this.setState({
+      filmInfo: {
+        ...filmInfo,
+        filmDescribe: value
+      }
+    })
+  }
+
+  render() {
+    const { filmInfo, filmList, showModal, filmId } = this.state
+    filmInfo.templateName = filmInfo.filmName
+    filmInfo.templateDescribe = filmInfo.filmDescribe
+    console.log('film-detailRender')
+    return (
+      <View className="film-detail">
+        <View className="film-modal">
+          <Text className="film-modal-text">视片名称</Text>
+          <Input
+            placeholder="请输入视片名称"
+            className="film-modal-input"
+            value={filmInfo.templateName}
+            onInput={this.changeFilmName}
+          />
+          <Text className="film-modal-text">视片描述</Text>
+          <Input
+            placeholder="请输入视片描述"
+            className="film-modal-input"
+            value={filmInfo.templateDescribe}
+            onInput={this.changeDescribeName}
+          />
+        </View>
+        <Button
+          className="btn-max"
+          type="primary"
+          size="default"
+          onClick={() => {
+            this.inputConfirm()
+          }}
+        >
+          确定
+        </Button>
+      </View>
+    )
+  }
+}
+export default FilmDetail as ComponentClass<PageOwnProps, PageState>

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

@@ -7,6 +7,11 @@
   flex-direction: column;
   background-color: white;
 
+  .btn-max {
+    display: block;
+    width: 90%;
+  }
+
   &-scroll {
     flex: 1;
     overflow: auto;

src/pages/system/wifi_list/index.tsx

@@ -92,7 +92,7 @@ class WifiList extends Component {
   async getWifiList() {
     try {
       /** 设置监听获取WiFi列表的回调函数 */
-      Taro.showLoading({ title: '获取WLAN...' })
+      Taro.showLoading({ title: '获取WLAN...', mask: true })
 
       // 设置回调函数
       Ble.setCallBack({