Skip to content

visualcloud / Vmatrix-client-taro

Go to a project
Commit 606437a5 by lirandong
Options

添加 设备列表

parent bf547533
Showing with 240 additions and 199 deletions
src/conpoments/device_item/index.tsx
import { ComponentClass } from 'react' import { ComponentClass } from 'react'
import Taro, { Component } from '@tarojs/taro' import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components' import { View, Text, Image } from '@tarojs/components'
import { IDeviceItem } from '@/pages/home/device/my_device'
import './index.scss' import './index.scss'
type PageStateProps = {} type PageStateProps = {}
type PageDispatchProps = {} type PageDispatchProps = {}
type PageOwnProps = { interface PageOwnProps extends IDeviceItem {}
deviceInfo: any
}
type PageState = {} type PageState = {}
...@@ -22,9 +22,9 @@ interface DeviceItem { ...@@ -22,9 +22,9 @@ interface DeviceItem {
class DeviceItem extends Component { class DeviceItem extends Component {
render() { render() {
console.log('deviceInfo', this.props.deviceInfo) // const { deviceInfo = {} } = this.props
const { equipmentName, equipmentState, equipmentUrl: url } = this.props.deviceInfo const { equipmentName, equipmentState, equipmentUrl: url } = this.props
console.log({ url }) // console.log({ url })
return ( return (
<View className="device-item"> <View className="device-item">
<View className="device-item-img-wrapper"> <View className="device-item-img-wrapper">
......
src/constants/utils.ts
...@@ -31,9 +31,9 @@ export function checkPhone(phone) { ...@@ -31,9 +31,9 @@ export function checkPhone(phone) {
return /^1[3456789]\d{9}$/.test(phone.toString()) return /^1[3456789]\d{9}$/.test(phone.toString())
} }
export function showErrorToast({ error, tips }: { error?: any; tips?: string }) { export function myShowToast({ result, tips }: { result?: any; tips?: string }) {
if (!error && !tips) return if (!result && !tips) return
Taro.showToast({ icon: 'none', title: error && error.msg ? error.msg : tips }) Taro.showToast({ icon: 'none', title: result && result.msg ? result.msg : tips })
} }
export function getStatusBarHeight() { export function getStatusBarHeight() {
......
src/pages/home/device/add/index.tsx
...@@ -3,7 +3,7 @@ import { ComponentClass } from 'react' ...@@ -3,7 +3,7 @@ import { ComponentClass } from 'react'
import Taro, { Component, Config } from '@tarojs/taro' import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text, Input, Button } from '@tarojs/components' import { View, Text, Input, Button } from '@tarojs/components'
import './index.scss' import './index.scss'
import { showErrorToast } from '@/constants/utils' import { myShowToast } from '@/constants/utils'
type PageStateProps = {} type PageStateProps = {}
...@@ -44,10 +44,10 @@ class AddDevicePIN extends Component { ...@@ -44,10 +44,10 @@ class AddDevicePIN extends Component {
if (!PIN) return if (!PIN) return
try { try {
await api.common.addDevicePIN(PIN) await api.common.addDevicePIN(PIN)
showErrorToast({ tips: '添加成功~' }) myShowToast({ tips: '添加成功~' })
// console.log({ res }) // console.log({ res })
} catch (error) { } catch (error) {
showErrorToast({ error, tips: '添加失败~' }) myShowToast({ result: error, tips: '添加失败~' })
console.error(error) console.error(error)
} }
} }
......
src/pages/home/device/device_list/index.scss 0 → 100644
@import '@styles/var.scss';
.my-device {
width: 100%;
height: 1036px;
position: relative;
}
.add-device {
right: 80px;
bottom: 80px;
width: 120px;
height: 120px;
display: flex;
position: absolute;
border-radius: 60px;
align-items: center;
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/device_list/index.tsx 0 → 100644
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 { myShowToast } from '@/constants/utils'
import { View, Text, ScrollView } from '@tarojs/components'
import './index.scss'
export interface IDeviceItem {
filmId: any
filmName: any
mqttTopic: string
equipmentType: any
equipmentId: string
equipmentUrl: string
equipmentName: string
equipmentState: string
}
type PageStateProps = {}
type PageDispatchProps = {}
type PageOwnProps = {}
type PageState = {
page: number
count: number
deviceList: IDeviceItem[]
deviceCode: string
showModal: boolean
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps
interface MyDevice {
props: IProps
state: PageState
}
class MyDevice extends Component {
constructor(props) {
super(props)
this.state = {
page: 1,
count: 0,
deviceCode: '',
deviceList: [],
showModal: false
}
this.scanCode = this.scanCode.bind(this)
this.selectAddDevice = this.selectAddDevice.bind(this)
}
async componentWillMount() {
this.getDate()
}
async getDate() {
const { page } = this.state
try {
const { list, count } = await api.common.getMyDeviceList(page)
this.cancelModal()
this.setState({ deviceList: list, count })
} catch (error) {
console.error(error)
}
}
selectAddDevice() {
this.setState({ showModal: !this.state.showModal })
}
cancelModal() {
this.setState({ showModal: false })
}
selectItem(url: string) {
this.cancelModal()
Taro.navigateTo({ url })
}
async handleItem(item: IDeviceItem, info) {
const { text } = info
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: '失败成功~' })
}
}
}
async scanCode() {
this.cancelModal()
if (Taro.getEnv() !== Taro.ENV_TYPE.RN) {
try {
const { result } = await Taro.scanCode({
onlyFromCamera: true,
scanType: ['qrCode', 'barCode']
})
await api.common.addDeviceToken(result)
myShowToast({ tips: '添加成功~' })
this.getDate()
} catch (error) {
myShowToast({ result: 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>
{deviceList.map(item => (
<AtSwipeAction
autoClose
key={item.equipmentId}
onClick={info => this.handleItem(item, info)}
options={[
{
text: '编辑',
style: {
backgroundColor: '#6190E8'
}
},
{
text: '删除',
style: {
backgroundColor: '#FF4949'
}
}
]}
>
<DeviceItem {...item} />
</AtSwipeAction>
))}
</ScrollView>
<View className="add-device" onClick={this.selectAddDevice}>
<Text className="icon">添加</Text>
</View>
{/* <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>
)
}
}
export default MyDevice as ComponentClass<PageOwnProps, PageState>
src/pages/home/device/my_device/index.scss
@import '@styles/var.scss'; @import '@styles/var.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%;
height: 1036px;
position: relative;
}
.add-device {
right: 80px;
bottom: 80px;
width: 120px;
height: 120px;
display: flex;
position: absolute;
border-radius: 60px;
align-items: center;
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 api from '@/api/index'
import { ComponentClass } from 'react' import { ComponentClass } from 'react'
import { AtSwipeAction } from 'taro-ui' import DeviceList from '../device_list'
import Taro, { Component } from '@tarojs/taro' import Taro, { Component } from '@tarojs/taro'
import DeviceItem from '@/conpoments/device_item' // import { View, Text } from '@tarojs/components'
import { showErrorToast } from '@/constants/utils'
import { View, Text, ScrollView } from '@tarojs/components'
import './index.scss' import './index.scss'
type PageStateProps = {} type PageStateProps = {}
...@@ -14,13 +10,7 @@ type PageDispatchProps = {} ...@@ -14,13 +10,7 @@ type PageDispatchProps = {}
type PageOwnProps = {} type PageOwnProps = {}
type PageState = { type PageState = {}
page: number
count: number
deviceList: any[]
deviceCode: string
showModal: boolean
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps type IProps = PageStateProps & PageDispatchProps & PageOwnProps
...@@ -30,135 +20,8 @@ interface MyDevice { ...@@ -30,135 +20,8 @@ interface MyDevice {
} }
class MyDevice extends Component { class MyDevice extends Component {
constructor(props) {
super(props)
this.state = {
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() { render() {
const { deviceList, showModal } = this.state return <DeviceList />
return (
<View className="my-device">
<ScrollView>
{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" onClick={this.selectAddDevice}>
<Text className="icon">添加</Text>
</View>
{/* <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>
)
} }
} }
export default MyDevice as ComponentClass<PageOwnProps, PageState> export default MyDevice as ComponentClass<PageOwnProps, PageState>
src/pages/login/index.tsx
...@@ -4,7 +4,7 @@ import { CheckBox } from 'react-native' ...@@ -4,7 +4,7 @@ import { CheckBox } from 'react-native'
import { connect } from '@tarojs/redux' import { connect } from '@tarojs/redux'
import token from '../../constants/token' import token from '../../constants/token'
import { HONE } from '../../constants/router' import { HONE } from '../../constants/router'
import { checkPhone, showErrorToast } from '../../constants/utils' import { checkPhone, myShowToast } from '../../constants/utils'
import Taro, { Component, Config } from '@tarojs/taro' import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text, Input, Button, Checkbox, Label } from '@tarojs/components' import { View, Text, Input, Button, Checkbox, Label } from '@tarojs/components'
...@@ -83,7 +83,7 @@ class Login extends Component { ...@@ -83,7 +83,7 @@ class Login extends Component {
}, 1000) }, 1000)
} catch (error) { } catch (error) {
// console.warn('获取验证码失败~', error) // console.warn('获取验证码失败~', error)
showErrorToast({ error, tips: '获取验证码失败~' }) myShowToast({ result: error, tips: '获取验证码失败~' })
} }
// Taro.hideLoading() // Taro.hideLoading()
} }
...@@ -102,7 +102,7 @@ class Login extends Component { ...@@ -102,7 +102,7 @@ class Login extends Component {
} }
} catch (error) { } catch (error) {
// console.warn('用户登录出错~', error) // console.warn('用户登录出错~', error)
showErrorToast({ error, tips: '用户登录出错~' }) myShowToast({ result: error, tips: '用户登录出错~' })
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment