fix

project.config.json

@@ -4,7 +4,7 @@
 	"description": "",
 	"appid": "wxc3dfc37466838046",
 	"setting": {
-		"urlCheck": false,
+		"urlCheck": true,
 		"es6": false,
 		"postcss": false,
 		"minified": false,

src/api/common.ts

@@ -35,6 +35,32 @@ class UsersApi extends ApiClient {
   getMyFilmsList(page: number) {
     return this.request({ url: `/myfilm/get/list`, data: { p: page, c: 10 } })
   }
+
+  /** 获取我的设备列表 */
+  getMyDeviceList(page: number) {
+    return this.request({ url: '/myequipment/get/list', data: { p: page, c: 10 } })
+  }
+
+  /** 添加新设备-PIN */
+  addDevicePIN(pin: string) {
+    return this.request({ method: 'GET', url: `/myequipment/add/equipment/num/info/${pin}` })
+  }
+
+  /** 添加新设备-token */
+  addDeviceToken(centerToken: string) {
+    return this.request({
+      method: 'GET',
+      url: `/myequipment/add/equipment/token/info/${centerToken}`
+    })
+  }
+
+  /** 删除设备 */
+  removeDevice(equipmentId: string) {
+    return this.request({
+      method: 'GET',
+      url: `/myequipment/del/info/${equipmentId}`
+    })
+  }
 }
 
 export default new UsersApi()

src/app.scss

-view {
-  // display: flex;
-  // box-sizing: border-box;
-}
+@import '~taro-ui/dist/style/components/swipe-action.scss';
+// view {
+//   // display: flex;
+//   // box-sizing: border-box;
+// }
 
 page {
   width: 100%;

src/app.tsx

@@ -8,6 +8,7 @@ import configStore from './store'
 import token from './constants/token'
 
 import './app.scss'
+// import 'taro-ui/dist/style/index.scss'
 
 // 如果需要在 h5 环境中开启 React Devtools
 // 取消以下注释：
@@ -34,6 +35,7 @@ class App extends Component {
   config: Config = {
     pages: [
       'pages/home/device/index',
+      'pages/home/device/add/index',
       'pages/home/device/my_film/index',
       'pages/home/user/index',
       'pages/home/tempaltes/film_detail',

src/conpoments/device_item/index.scss

+@import '@styles/var.scss';
+
+.device-item {
+  // height: 100%;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding: 20px;
+}
+
+.device-item-img-wrapper {
+  width: 320px;
+  height: 180px;
+  padding: 4.5px 8px;
+  border-radius: 8px;
+  box-sizing: border-box;
+  border: 1px solid $border-color;
+}
+
+.device-item-img {
+  width: 100%;
+  height: 100%;
+}
+
+.device-item-info {
+  flex: 1;
+  display: flex;
+  padding-left: 40px;
+  flex-direction: column;
+}

src/conpoments/device_item/index.tsx

+import { ComponentClass } from 'react'
+import Taro, { Component } from '@tarojs/taro'
+import { View, Text, Image } from '@tarojs/components'
+import './index.scss'
+
+type PageStateProps = {}
+
+type PageDispatchProps = {}
+
+type PageOwnProps = {
+  deviceInfo: any
+}
+
+type PageState = {}
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps
+
+interface DeviceItem {
+  props: IProps
+  state: PageState
+}
+
+class DeviceItem extends Component {
+  render() {
+    console.log('deviceInfo', this.props.deviceInfo)
+    const { equipmentName, equipmentState, equipmentUrl: url } = this.props.deviceInfo
+    console.log({ url })
+    return (
+      <View className="device-item">
+        <View className="device-item-img-wrapper">
+          <Image className="device-item-img" src={url} />
+        </View>
+        <View className="device-item-info">
+          <Text className="device-item-info-name">{equipmentName}</Text>
+          <Text className="device-item-info-state">
+            {equipmentState === 'ONLINE' ? '在线' : '离线'}
+          </Text>
+        </View>
+      </View>
+    )
+  }
+}
+export default DeviceItem as ComponentClass<PageOwnProps, PageState>

src/conpoments/modal/index.tsx

@@ -37,6 +37,7 @@ class Modal extends Component {
 
   render() {
     const { title, children, confirmText, cancelText, onCancel, onConfirm } = this.props
+    console.log({ onConfirm })
     return (
       <View className="modal" onClick={this.cancel}>
         <View className="modal-wrapper">

src/conpoments/test11/index.tsx

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

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

+@import '@styles/var.scss';
+
+.add-device-pin {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 20px 40px 0 40px;
+}
+
+.add-device-pin-title {
+  display: block;
+}
+
+.add-device-pin-input {
+  width: 100%;
+  height: 60px;
+  padding: 10px;
+  margin: 20px 0;
+  border-radius: 6px;
+  box-sizing: border-box;
+  border: 1px solid $border-color;
+}
+
+.add-device-pin-tips {
+  font-size: 26px;
+  text-decoration: underline;
+}
+
+.add-device-pin-btn {
+  margin-top: 100px;
+}

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

+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 './index.scss'
+import { showErrorToast } from '@/constants/utils'
+
+type PageStateProps = {}
+
+type PageDispatchProps = {}
+
+type PageOwnProps = {}
+
+type PageState = {
+  PIN: string
+}
+
+type IProps = PageStateProps & PageDispatchProps & PageOwnProps
+
+interface AddDevicePIN {
+  props: IProps
+  state: PageState
+}
+
+class AddDevicePIN extends Component {
+  config: Config = {
+    navigationBarTitleText: '添加新设备'
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      PIN: ''
+    }
+  }
+
+  setPIN = ({ target }) => {
+    const { value } = target
+    this.setState({ PIN: value })
+  }
+
+  addDevice = async () => {
+    const { PIN } = this.state
+    if (!PIN) return
+    try {
+      await api.common.addDevicePIN(PIN)
+      showErrorToast({ tips: '添加成功~' })
+      // console.log({ res })
+    } catch (error) {
+      showErrorToast({ error, tips: '添加失败~' })
+      console.error(error)
+    }
+  }
+
+  render() {
+    return (
+      <View className="add-device-pin">
+        <Text className="add-device-pin-title">请输入PIN码（区分大小写）</Text>
+        <Input
+          onInput={this.setPIN}
+          className="add-device-pin-input"
+          placeholder="请输入PIN码（区分大小写）"
+        />
+        <Text className="add-device-pin-tips">什么是PIN码？</Text>
+        <Button className="add-device-pin-btn" onClick={this.addDevice} type="primary">
+          确定
+        </Button>
+      </View>
+    )
+  }
+}
+export default AddDevicePIN as ComponentClass<PageOwnProps, PageState>

src/pages/home/device/index.tsx

@@ -26,7 +26,7 @@ interface Device {
 const tabList = [{ title: '我的视片' }, { title: '我的设备' }]
 class Device extends Component {
   config: Config = {
-    navigationBarTitleText: '设备与视片',
+    navigationBarTitleText: '',
     navigationStyle: process.env.TARO_ENV === 'rn' ? 'custom' : 'default'
   }
   constructor(props) {

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

 @import '@styles/var.scss';
-@import '~taro-ui/dist/style/components/icon.scss';
+// @import '~taro-ui/dist/style/components/icon.scss';
+// @import '~taro-ui/dist/style/components/modal.scss';
+// @import '~taro-ui/dist/style/components/swipe-action.scss';
+// @import '../../../../../node_modules/taro-ui/dist/style/components/swipe-action.scss';
 
 .my-device {
   width: 100%;
@@ -19,3 +22,23 @@
   justify-content: center;
   background-color: $bgColor;
 }
+
+.select-modal {
+  top: 20%;
+  left: 50%;
+  width: 400px;
+  // height: 160px;
+  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);
+}
+
+.select-item {
+  padding: 20px 0;
+}

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

-import { AtIcon } from 'taro-ui'
+import api from '@/api/index'
 import { ComponentClass } from 'react'
+import { AtSwipeAction } from 'taro-ui'
 import Taro, { Component } from '@tarojs/taro'
+import DeviceItem from '@/conpoments/device_item'
+import { showErrorToast } from '@/constants/utils'
 import { View, Text, ScrollView } from '@tarojs/components'
 
-// import './icon.scss'
 import './index.scss'
 
 type PageStateProps = {}
@@ -13,7 +15,11 @@ type PageDispatchProps = {}
 type PageOwnProps = {}
 
 type PageState = {
-  name: string
+  page: number
+  count: number
+  deviceList: any[]
+  deviceCode: string
+  showModal: boolean
 }
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
@@ -27,22 +33,130 @@ class MyDevice extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      name: '小红'
+      page: 1,
+      count: 0,
+      deviceCode: '',
+      deviceList: [],
+      showModal: false
     }
   }
 
+  async componentWillMount() {
+    const { page } = this.state
+    try {
+      const { list, count } = await api.common.getMyDeviceList(page)
+      this.cancelModal()
+      console.log({ list, count })
+      this.setState({ deviceList: list, count }, () => {
+        this.addDevice()
+      })
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  addDevice() {
+    const { deviceCode } = this.state
+    if (!deviceCode) return
+    api.common.addDevicePIN(deviceCode)
+  }
+
+  selectAddDevice = () => {
+    this.setState({ showModal: !this.state.showModal })
+  }
+
+  cancelModal() {
+    this.setState({ showModal: false })
+  }
+
+  selectItem(url: string) {
+    this.cancelModal()
+    Taro.navigateTo({ url })
+  }
+
+  handleItem = info => {
+    const { text } = info
+    if (text === '编辑') {
+    } else if (text === '删除') {
+      api.common.removeDevice()
+    }
+  }
+
+  scanCode = async () => {
+    if (Taro.getEnv() !== Taro.ENV_TYPE.RN) {
+      try {
+        const { result } = await Taro.scanCode({
+          onlyFromCamera: true,
+          scanType: ['qrCode', 'barCode']
+        })
+        await api.common.addDeviceToken(result)
+        showErrorToast({ tips: '添加成功~' })
+      } catch (error) {
+        showErrorToast({ error, tips: '添加失败~' })
+        console.error(error)
+      }
+    }
+  }
+
+  shouldComponentUpdate(_nextProps, _nextState) {
+    const { deviceList, showModal } = this.state
+    const { deviceList: _deviceList, showModal: _showModal } = _nextState
+    return deviceList !== _deviceList || showModal !== _showModal
+  }
+
   render() {
+    const { deviceList, showModal } = this.state
     return (
       <View className="my-device">
         <ScrollView>
-          <Text>1111</Text>
-          {/* <View className="at-icon at-icon-settings" /> */}
+          {deviceList.length > 0 ? (
+            <AtSwipeAction
+              onClick={this.handleItem}
+              autoClose
+              options={[
+                {
+                  text: '编辑',
+                  style: {
+                    backgroundColor: '#6190E8'
+                  }
+                },
+                {
+                  text: '删除',
+                  style: {
+                    backgroundColor: '#FF4949'
+                  }
+                }
+              ]}
+            >
+              {deviceList.map(item => (
+                <DeviceItem key={item.equipmentId} deviceInfo={item} />
+              ))}
+            </AtSwipeAction>
+          ) : null}
         </ScrollView>
-        <View className="add-device">
-          {/* <AtIcon value="clock" size="30" color="#000" /> */}
-          {/* <Text className="icon">添加</Text> */}
+        <View className="add-device" onClick={this.selectAddDevice}>
+          <Text className="icon">添加</Text>
         </View>
-        {/* <Text>hello world</Text> */}
+        {/* <AtModal isOpened>
+          <AtModalContent>
+            <View className="select-item" onClick={() => this.selectItem('')}>
+              <Text>扫码添加设备</Text>
+            </View>
+            <View className="select-item" onClick={() => this.selectItem('')}>
+              <Text>输入PIN码添加设备</Text>
+            </View>
+          </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>
+          </View>
+        ) : null}
       </View>
     )
   }