优化 目录

config/index.js

@@ -10,7 +10,7 @@ const sassImporter = function (url) {
 
   const reg = /^@styles\/(.*)/
   return {
-    file: reg.test(url) ? path.resolve(__dirname, '..', 'src/constants/styles', url.match(reg)[1]) : url
+    file: reg.test(url) ? path.resolve(__dirname, '..', 'src/assets/styles', url.match(reg)[1]) : url
   }
 }
 
@@ -29,10 +29,11 @@ const config = {
     '@/': path.resolve(__dirname, '..', 'src'),
     '@/api': path.resolve(__dirname, '..', 'src/api'),
     '@/pages': path.resolve(__dirname, '..', 'src/pages'),
+    '@/common': path.resolve(__dirname, '..', 'src/common'),
     '@/actions': path.resolve(__dirname, '..', 'src/actions'),
     '@/constants': path.resolve(__dirname, '..', 'src/constants'),
     '@/conpoments': path.resolve(__dirname, '..', 'src/conpoments'),
-    '@styles': path.resolve(__dirname, '..', 'src/constants/styles'),
+    '@styles': path.resolve(__dirname, '..', 'src/assets/styles'),
   },
   plugins: {
     babel: {

src/api/axios.ts

 // import users from '@api/users'
 // import { concatParam } from '@/utils/utils'
-import { concatParam } from '../constants/utils'
+import { concatParam } from '../common/utils'
 // import $config, { message, requestCode, tokens } from '@/config'
 import { axios, CancelTokenStatic, AxiosInstance } from 'taro-axios'
 import { BASE_URL, FETCH_TIME_OUT, INTERFACE_REPEAT } from '../constants/counter'
-import token from '../constants/token'
+import token from '../common/token'
 
 const concatParamMethod = new Set(['post', 'put'])
 // let refreshTokenState = false // 刷新 token的状态

src/api/common.ts

@@ -61,6 +61,14 @@ class UsersApi extends ApiClient {
       url: `/myequipment/del/info/${equipmentId}`
     })
   }
+
+  /** 删除设备 */
+  removeFilm(filmId: string) {
+    return this.request({
+      method: 'GET',
+      url: `/template/del/film/info/${filmId}`
+    })
+  }
 }
 
 export default new UsersApi()

src/app.tsx

@@ -5,7 +5,7 @@ import { Provider } from '@tarojs/redux'
 import Index from './pages/index'
 
 import configStore from './store'
-import token from './constants/token'
+import token from './common/token'
 
 import './app.scss'
 // import 'taro-ui/dist/style/index.scss'
@@ -34,10 +34,11 @@ class App extends Component {
    */
   config: Config = {
     pages: [
+      'pages/home/user/index',
+      'pages/home/device/my_device/index',
       'pages/home/device/index',
       'pages/home/device/add/index',
       'pages/home/device/my_film/index',
-      'pages/home/user/index',
       'pages/home/tempaltes/film_detail',
       'pages/home/tempaltes/detail',
       'pages/home/tempaltes/index',
@@ -56,20 +57,20 @@ class App extends Component {
         {
           pagePath: 'pages/home/tempaltes/index',
           text: '模板市场',
-          iconPath: './constants/images/market.png',
-          selectedIconPath: './constants/images/market_ac.png'
+          iconPath: './assets/images/market.png',
+          selectedIconPath: './assets/images/market_ac.png'
         },
         {
           pagePath: 'pages/home/device/index',
           text: '设备与视片',
-          iconPath: './constants/images/device.png',
-          selectedIconPath: './constants/images/device_ac.png'
+          iconPath: './assets/images/device.png',
+          selectedIconPath: './assets/images/device_ac.png'
         },
         {
           pagePath: 'pages/home/user/index',
           text: '个人中心',
-          iconPath: './constants/images/personal.png',
-          selectedIconPath: './constants/images/personal_ac.png'
+          iconPath: './assets/images/personal.png',
+          selectedIconPath: './assets/images/personal_ac.png'
         }
       ]
     }

src/constants/utils.ts → src/common/utils.ts

@@ -31,7 +31,7 @@ export function checkPhone(phone) {
   return /^1[3456789]\d{9}$/.test(phone.toString())
 }
 
-export function myShowToast({ result, tips }: { result?: any; tips?: string }) {
+export function showMyToast({ result, tips }: { result?: any; tips?: string }) {
   if (!result && !tips) return
   Taro.showToast({ icon: 'none', title: result && result.msg ? result.msg : tips })
 }

src/conpoments/film_list_item/index.scss

+@import '@styles/var.scss';
+
+.films-item-wrapper {
+  padding: 20px;
+  display: flex;
+  // margin-bottom: 40px;
+  flex-direction: row;
+  background-color: white;
+}
+
+.img-box {
+  width: 320px;
+}
+
+.films-item-img {
+  width: 100%;
+  height: 180px;
+}
+
+.films-item-info {
+  flex: 1;
+  display: flex;
+  padding-left: 20px;
+  flex-direction: column;
+}

src/conpoments/film_list_item/index.tsx

+import { ComponentClass } from 'react'
+import Taro, { Component } from '@tarojs/taro'
+import { View, Text, Image } from '@tarojs/components'
+import { IMilmListItme } from '@/pages/home/device/film_list'
+
+import './index.scss'
+
+type PageStateProps = {}
+
+type PageDispatchProps = {}
+
+interface PageOwnProps extends IMilmListItme {
+  // filmName: string
+  // templateUrl: string
+  // equipmentCount: string
+  onClick: () => void
+}
+
+type PageState = {
+  name: string
+}
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps
+
+interface FilmListItem {
+  props: IProps
+  state: PageState
+}
+
+class FilmListItem extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      name: '小红'
+    }
+  }
+  render() {
+    const { templateUrl, filmName, equipmentCount, onClick } = this.props
+    return (
+      <View className="films-item-wrapper" onClick={onClick}>
+        <View className="img-box">
+          <Image className="films-item-img" src={templateUrl} />
+        </View>
+        <View className="films-item-info">
+          <Text>{filmName}</Text>
+          <Text>播放设备数量：{equipmentCount}</Text>
+        </View>
+      </View>
+    )
+  }
+}
+export default FilmListItem as ComponentClass<PageOwnProps, PageState>

src/constants/components/pageView.tsx

-import { ComponentClass } from 'react'
-import { View } from '@tarojs/components'
-import Taro, { Component } from '@tarojs/taro'
-import { getStatusBarHeight } from '../utils'
-
-import './scss/pageView.scss'
-
-type PageStateProps = {}
-
-type PageDispatchProps = {}
-
-type PageOwnProps = {
-  children: any
-}
-
-type PageState = {}
-
-type IProps = PageStateProps & PageDispatchProps & PageOwnProps
-
-interface PageView {
-  props: IProps
-  state: PageState
-}
-
-class PageView extends Component {
-  render() {
-    const StatusBarHeight = getStatusBarHeight()
-    return (
-      <View className="pageView" style={{ paddingTop: `${StatusBarHeight}px` }}>
-        {this.props.children}
-      </View>
-    )
-  }
-}
-export default PageView as ComponentClass<PageOwnProps, PageState>

src/constants/components/scss/pageView.scss

-.pageView {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-}

src/pages/home/device/add/index.tsx

@@ -2,8 +2,8 @@ import api from '@/api/index'
 import { ComponentClass } from 'react'
 import Taro, { Component, Config } from '@tarojs/taro'
 import { View, Text, Input, Button } from '@tarojs/components'
+import { showMyToast } from '@/common/utils'
 import './index.scss'
-import { myShowToast } from '@/constants/utils'
 
 type PageStateProps = {}
 
@@ -44,10 +44,10 @@ class AddDevicePIN extends Component {
     if (!PIN) return
     try {
       await api.common.addDevicePIN(PIN)
-      myShowToast({ tips: '添加成功~' })
+      showMyToast({ tips: '添加成功~' })
       // console.log({ res })
     } catch (error) {
-      myShowToast({ result: error, tips: '添加失败~' })
+      showMyToast({ result: error, tips: '添加失败~' })
       console.error(error)
     }
   }

src/pages/home/device/device_list/index.scss

@@ -2,7 +2,7 @@
 
 .my-device {
   width: 100%;
-  height: 1036px;
+  height: 100%;
   position: relative;
 }
 
@@ -19,20 +19,25 @@
   background-color: $bgColor;
 }
 
-.select-modal {
-  top: 20%;
-  left: 50%;
-  width: 400px;
-  // height: 160px;
+.select-modal-wrapper {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   display: flex;
   position: absolute;
-  // margin-top: -150px;
-  margin-left: -200px;
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  border: solid #ccc 1px;
-  // background-color: rgba($color: #000, $alpha: 0.7);
+  background-color: rgba($color: #000, $alpha: 0.7);
+  z-index: 2;
+}
+
+.select-modal {
+  width: 400px;
+  padding: 0 20px;
+  border-radius: 6px;
+  background-color: white;
 }
 
 .select-item {

src/pages/home/device/device_list/index.tsx

@@ -3,7 +3,7 @@ import { ComponentClass } from 'react'
 import { AtSwipeAction } from 'taro-ui'
 import Taro, { Component } from '@tarojs/taro'
 import DeviceItem from '@/conpoments/device_item'
-import { myShowToast } from '@/constants/utils'
+import { showMyToast } from '@/common/utils'
 import { View, Text, ScrollView } from '@tarojs/components'
 
 import './index.scss'
@@ -28,9 +28,9 @@ type PageOwnProps = {}
 type PageState = {
   page: number
   count: number
-  deviceList: IDeviceItem[]
   deviceCode: string
   showModal: boolean
+  deviceList: IDeviceItem[]
 }
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
@@ -51,6 +51,7 @@ class MyDevice extends Component {
       showModal: false
     }
     this.scanCode = this.scanCode.bind(this)
+    this.cancelModal = this.cancelModal.bind(this)
     this.selectAddDevice = this.selectAddDevice.bind(this)
   }
 
@@ -87,14 +88,18 @@ class MyDevice extends Component {
     const { equipmentId } = item
     if (text === '编辑') {
     } else if (text === '删除') {
-      try {
-        await api.common.removeDevice(equipmentId)
-        this.getDate()
-        myShowToast({ tips: '删除成功~' })
-      } catch (error) {
-        console.error(error)
-        myShowToast({ result: error, tips: '失败成功~' })
-      }
+      Taro.showModal({ content: '确定要删除？' }).then(async ({ confirm }) => {
+        if (confirm) {
+          try {
+            await api.common.removeDevice(equipmentId)
+            this.getDate()
+            showMyToast({ tips: '删除成功~' })
+          } catch (error) {
+            console.error(error)
+            showMyToast({ result: error, tips: '失败成功~' })
+          }
+        }
+      })
     }
   }
 
@@ -107,10 +112,10 @@ class MyDevice extends Component {
           scanType: ['qrCode', 'barCode']
         })
         await api.common.addDeviceToken(result)
-        myShowToast({ tips: '添加成功~' })
+        showMyToast({ tips: '添加成功~' })
         this.getDate()
       } catch (error) {
-        myShowToast({ result: error, tips: '添加失败~' })
+        showMyToast({ result: error, tips: '添加失败~' })
         console.error(error)
       }
     }
@@ -165,12 +170,14 @@ class MyDevice extends Component {
           </AtModalContent>
         </AtModal> */}
         {showModal ? (
-          <View className="select-modal">
-            <View className="select-item" onClick={this.scanCode}>
-              <Text>扫码添加设备</Text>
-            </View>
-            <View className="select-item" onClick={() => this.selectItem('')}>
-              <Text>输入PIN码添加设备</Text>
+          <View className="select-modal-wrapper" onClick={this.cancelModal}>
+            <View className="select-modal">
+              <View className="select-item" onClick={this.scanCode}>
+                <Text>扫码添加设备</Text>
+              </View>
+              <View className="select-item" onClick={() => this.selectItem('')}>
+                <Text>输入PIN码添加设备</Text>
+              </View>
             </View>
           </View>
         ) : null}

src/pages/home/device/device_select/index.scss

+@import '@styles/var.scss';

src/conpoments/test11/index.tsx → src/pages/home/device/device_select/index.tsx

 import { ComponentClass } from 'react'
 import Taro, { Component } from '@tarojs/taro'
 import { View, Text } from '@tarojs/components'
-// import './Text1.less'
+import './index.scss'
 
 type PageStateProps = {}
 
@@ -15,33 +15,25 @@ type PageState = {
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
 
-interface Text1 {
+interface DeviceSelect {
   props: IProps
   state: PageState
 }
 
-class Text1 extends Component {
+class DeviceSelect extends Component {
   constructor(props) {
     super(props)
     this.state = {
       name: '小红'
     }
   }
-  componentWillReceiveProps(nextProps) {}
-
-  componentWillUnmount() {}
-
-  componentDidShow() {}
-
-  componentDidHide() {}
 
   render() {
-    console.log('111111')
     return (
-      <View className="Text1">
+      <View className="DeviceSelect">
         <Text>hello world</Text>
       </View>
     )
   }
 }
-export default Text1 as ComponentClass<PageOwnProps, PageState>
+export default DeviceSelect as ComponentClass<PageOwnProps, PageState>

src/pages/home/device/film_list/index.scss

@@ -2,34 +2,10 @@
 
 .films {
   width: 100%;
-  height: 1036px;
+  height: 100%;
   background-color: $bgColor;
 }
 
-.films-item-wrapper {
-  padding: 20px;
-  display: flex;
-  margin-bottom: 40px;
-  flex-direction: row;
-  background-color: white;
-}
-
-.img-box {
-  width: 320px;
-}
-
-.films-item-img {
-  width: 100%;
-  height: 180px;
-}
-
-.films-item-info {
-  flex: 1;
-  display: flex;
-  padding-left: 20px;
-  flex-direction: column;
-}
-
 .scroll-view {
   height: 100%;
 }

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

 import api from '@/api/index'
 import { ComponentClass } from 'react'
+import { AtSwipeAction } from 'taro-ui'
 import Taro, { Component } from '@tarojs/taro'
+import { showMyToast } from '@/common/utils'
+import FilmListItem from '@/conpoments/film_list_item'
 import { View, Text, ScrollView, Image } from '@tarojs/components'
 
 import './index.scss'
@@ -11,10 +14,17 @@ type PageDispatchProps = {}
 
 type PageOwnProps = {}
 
-type PageState = {
+export interface IMilmListItme {
+  filmId: string
+  filmName: string
+  templateUrl: string
+  equipmentCount: number
+}
+
+interface PageState {
   page: number
   count: number
-  flimListData: any[]
+  flimListData: IMilmListItme[]
 }
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
@@ -35,6 +45,10 @@ class Films extends Component {
   }
 
   async componentWillMount() {
+    this.getData()
+  }
+
+  async getData() {
     try {
       const { page } = this.state
       const { count, list } = await api.common.getMyFilmsList(page)
@@ -53,7 +67,22 @@ class Films extends Component {
     return flimListData !== FD
   }
 
-  goDetail({ filmId }: any) {
+  async handleItem({ filmId }: IMilmListItme) {
+    Taro.showModal({ content: '确定要删除？' }).then(async ({ confirm }) => {
+      if (confirm) {
+        try {
+          await api.common.removeFilm(filmId)
+          this.getData()
+          showMyToast({ tips: '删除成功~' })
+        } catch (error) {
+          console.error(error)
+          showMyToast({ tips: '失败成功~' })
+        }
+      }
+    })
+  }
+
+  goDetail({ filmId }: IMilmListItme) {
     Taro.navigateTo({ url: `/pages/home/tempaltes/film_detail?filmId=${filmId}` })
   }
 
@@ -63,19 +92,21 @@ class Films extends Component {
       <View className="films">
         <ScrollView className="scroll-view" scrollY>
           {flimListData.map(item => (
-            <View
-              className="films-item-wrapper"
+            <AtSwipeAction
+              autoClose
               key={item.filmId}
-              onClick={() => this.goDetail(item)}
+              onClick={() => this.handleItem(item)}
+              options={[
+                {
+                  text: '删除',
+                  style: {
+                    backgroundColor: '#FF4949'
+                  }
+                }
+              ]}
             >
-              <View className="img-box">
-                <Image className="films-item-img" src={item.templateUrl} />
-              </View>
-              <View className="films-item-info">
-                <Text>{item.filmName}</Text>
-                <Text>播放设备数量：{item.equipmentCount}</Text>
-              </View>
-            </View>
+              <FilmListItem onClick={() => this.goDetail(item)} {...item} />
+            </AtSwipeAction>
           ))}
         </ScrollView>
       </View>

src/pages/home/device/index.tsx

 import FilmList from './film_list'
-import MyDevice from './my_device'
+import DeviceList from './device_list'
 import { ComponentClass } from 'react'
 import { AtTabs, AtTabsPane } from 'taro-ui'
 import Taro, { Component, Config } from '@tarojs/taro'
 
 import './index.scss'
+import { View } from '@tarojs/components'
 
 type PageStateProps = {}
 
@@ -14,6 +15,7 @@ type PageOwnProps = {}
 
 type PageState = {
   current: number
+  windowHeight: number
 }
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
@@ -31,8 +33,11 @@ class Device extends Component {
   }
   constructor(props) {
     super(props)
+
+    const { windowHeight } = Taro.getSystemInfoSync()
     this.state = {
-      current: 1
+      current: 1,
+      windowHeight: windowHeight - 43
     }
   }
 
@@ -41,19 +46,18 @@ class Device extends Component {
   }
 
   render() {
-    const { current } = this.state
+    const { current, windowHeight } = this.state
     return (
-      <AtTabs
-        current={current}
-        tabList={tabList}
-        onClick={this.changePage}
-        className="at-tabs-wrapper"
-      >
-        <AtTabsPane className="at-tabs-page" current={current} index={0}>
-          <FilmList />
+      <AtTabs current={current} tabList={tabList} onClick={this.changePage} swipeable={false}>
+        <AtTabsPane current={current} index={0}>
+          <View style={{ height: `${windowHeight}px` }}>
+            <FilmList />
+          </View>
         </AtTabsPane>
         <AtTabsPane className="at-tabs-page" current={current} index={1}>
-          <MyDevice />
+          <View style={{ height: `${windowHeight}px` }}>
+            <DeviceList />
+          </View>
         </AtTabsPane>
       </AtTabs>
     )

src/pages/home/device/my_device/index.tsx

 import { ComponentClass } from 'react'
 import DeviceList from '../device_list'
-import Taro, { Component } from '@tarojs/taro'
+import Taro, { Component, Config } from '@tarojs/taro'
 // import { View, Text } from '@tarojs/components'
 import './index.scss'
 
@@ -20,6 +20,9 @@ interface MyDevice {
 }
 
 class MyDevice extends Component {
+  config: Config = {
+    navigationBarTitleText: '我的设备'
+  }
   render() {
     return <DeviceList />
   }

src/pages/home/tempaltes/index.tsx

 import { ComponentClass } from 'react'
-import TempItem from './conpoments/temp_item/temp_item'
 import Taro, { Component, Config } from '@tarojs/taro'
-import PageView from '@/constants/components/pageView'
+import TempItem from './conpoments/temp_item/temp_item'
 import { View, Text, Input, ScrollView, Image } from '@tarojs/components'
 import './scss/index.scss'
 import api from '@/api/index'
-import token from '@/constants/token'
+import token from '@/common/token'
 
 type PageStateProps = {}
 

src/pages/home/user/index.tsx

@@ -38,11 +38,15 @@ class User extends Component {
   }
 
   async getUserInfo() {
-    if (process.env.TARO_ENV === 'weapp') {
-      const {
-        userInfo: { avatarUrl, nickName }
-      } = await Taro.getUserInfo()
-      this.setState({ avatarUrl, nickName })
+    if (process.env.TARO_ENV !== 'rn') {
+      try {
+        const {
+          userInfo: { avatarUrl, nickName }
+        } = await Taro.getUserInfo()
+        this.setState({ avatarUrl, nickName })
+      } catch (error) {
+        console.error(error)
+      }
     }
   }
 
@@ -66,12 +70,15 @@ class User extends Component {
         </View>
         <View className="item-wrapper">
           <View
-            onClick={() => this.goPage('/pages/home/device/my_film/index')}
             className="item-view"
+            onClick={() => this.goPage('/pages/home/device/my_film/index')}
           >
             <Text>我的视片</Text>
           </View>
-          <View className="item-view">
+          <View
+            className="item-view"
+            onClick={() => this.goPage('/pages/home/device/my_device/index')}
+          >
             <Text>我的设备</Text>
           </View>
         </View>

src/pages/index/index.tsx

@@ -2,7 +2,7 @@ import Home from '../home/'
 import Login from '../login'
 import { ComponentClass } from 'react'
 import { View } from '@tarojs/components'
-import token from '../../constants/token'
+import token from '../../common/token'
 import Taro, { Component, Config } from '@tarojs/taro'
 
 class Index extends Component {

src/pages/login/index.tsx

@@ -2,9 +2,9 @@ import api from '../../api'
 import { ComponentClass } from 'react'
 import { CheckBox } from 'react-native'
 import { connect } from '@tarojs/redux'
-import token from '../../constants/token'
+import token from '../../common/token'
 import { HONE } from '../../constants/router'
-import { checkPhone, myShowToast } from '../../constants/utils'
+import { checkPhone, showMyToast } from '../../common/utils'
 import Taro, { Component, Config } from '@tarojs/taro'
 import { View, Text, Input, Button, Checkbox, Label } from '@tarojs/components'
 
@@ -83,7 +83,7 @@ class Login extends Component {
         }, 1000)
       } catch (error) {
         // console.warn('获取验证码失败~', error)
-        myShowToast({ result: error, tips: '获取验证码失败~' })
+        showMyToast({ result: error, tips: '获取验证码失败~' })
       }
       // Taro.hideLoading()
     }
@@ -102,7 +102,7 @@ class Login extends Component {
       }
     } catch (error) {
       // console.warn('用户登录出错~', error)
-      myShowToast({ result: error, tips: '用户登录出错~' })
+      showMyToast({ result: error, tips: '用户登录出错~' })
     }
   }