Skip to content

W
wx-school-app-public
Commit 25a0bf16 by 姜雷
Options

添加设备连接页面

parent 1c50ca0f
Showing with 1233 additions and 98 deletions
.prettierrc 0 → 100644
{
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": true,
"arrowParens": "avoid",
"requirePragma": false,
"proseWrap": "preserve"
}
src/api/device.ts
import { baseFetch, ResponseDataEntity } from '.'; import { baseFetch, ResponseDataEntity } from '.';
import { Rate } from '../types/Device/Device';
export enum ScanTrigger {
false = 0,
true = 1,
}
type Params = { type Params = {
customerId: number; customerId: number;
equipmentNum: string; equipmentNum: string;
serviceId: number; serviceId: number;
isScanTrigger: ScanTrigger;
}; };
type DeviceInfoResponse = { type DeviceInfoResponse = {
code: string; code: string;
...@@ -29,7 +36,7 @@ type DeviceInfoResponse = { ...@@ -29,7 +36,7 @@ type DeviceInfoResponse = {
positionId: string; positionId: string;
// 位置id // 位置id
rates: RateInfoResponse[]; rates: Rate[];
// 是否纯蓝牙设备 1：是，0：否 // 是否纯蓝牙设备 1：是，0：否
isOnlyBluetooth: number; isOnlyBluetooth: number;
...@@ -40,13 +47,6 @@ type DeviceInfoResponse = { ...@@ -40,13 +47,6 @@ type DeviceInfoResponse = {
// 区域名称 // 区域名称
areaName: string; areaName: string;
}; };
type RateInfoResponse = {
mark: string;
// 费率描述
name: string;
// 费率名称
};
type SmaproPrepayConfig = { type SmaproPrepayConfig = {
createAt: string; createAt: string;
// 创建时间 // 创建时间
...@@ -84,7 +84,7 @@ type ResponseData = { ...@@ -84,7 +84,7 @@ type ResponseData = {
}; };
export const getDeviceConfig = ( export const getDeviceConfig = (
entity: Params, entity: Params
): Promise<ResponseDataEntity<ResponseData>> => ): Promise<ResponseDataEntity<ResponseData>> =>
baseFetch({ baseFetch({
url: '/smapro/prepay/config/wxmini', url: '/smapro/prepay/config/wxmini',
......
src/app.tsx
...@@ -27,6 +27,7 @@ class App extends Component { ...@@ -27,6 +27,7 @@ class App extends Component {
'pages/scanEnter/scanEnter', 'pages/scanEnter/scanEnter',
'pages/index/index', 'pages/index/index',
'pages/pay/pay', 'pages/pay/pay',
'pages/connect/connect',
], ],
window: { window: {
backgroundTextStyle: 'light', backgroundTextStyle: 'light',
......
src/pages/connect/connect.scss 0 → 100644
.Connect {
.Connect-info {
padding: 40px 32px;
font-size: 28px;
color: #333;
padding-bottom: 30px;
border-bottom: 1px dotted #e1e1e1;
.Connect-info-item {
line-height: 60px;
display: flex;
justify-content: space-between;
.Connect-info-rate {
line-height: 40px;
.Connect-info-rate-item {
display: flex;
}
.Connect-info-rate-name {
margin-right: 5px;
}
.Connect-info-rate-mark {
width: 250px;
text-align: right;
}
}
.Connect-info-position {
text-align: right;
width: 500px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.Connect-tip {
margin: 38px 32px 30px;
color: #ff4b4b;
font-size: 24px;
line-height: 34px;
}
.Connect-tip2 {
padding: 36px 22px;
margin: 38px 32px 30px;
color: #999;
font-size: 24px;
line-height: 30px;
border: 1px solid #a4a4a4;
border-radius: 30px;
vertical-align: middle;
}
.Connect-money {
display: flex;
flex-wrap: wrap;
width: 714px;
margin: 0 auto;
.Connect-money-item {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 218px;
height: 110px;
font-size: 28px;
border-radius: 24px;
border: 1px solid #ccc;
margin-bottom: 16px;
margin-right: 16px;
&.seleted {
border-color: #6180f4;
color: #6180f4;
}
}
}
.Connect-btn {
margin: 20px 32px 80px;
}
.Connect-Message {
box-sizing: border-box;
width: 100%;
padding: 50px 42px;
font-size: 26px;
height: 440px;
overflow-y: auto;
.Connect-Message-item {
margin-bottom: 28px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.info {
color: #1596e0;
}
.success {
color: #15e0ae;
}
.error {
color: #ec2929;
}
}
}
src/pages/connect/connect.tsx 0 → 100644
import Taro, { Component, Config } from '@tarojs/taro';
import { ComponentClass } from 'react';
import { View, Text, Button, ScrollView } from '@tarojs/components';
import { getPayOrder } from '../../api/Order/pay';
import { connect } from '@tarojs/redux';
import {
Device,
DeviceRefundMode,
OnlyBluetooth,
} from '../../types/Device/Device';
import PrepayConfig from '../../types/Order/Order';
import { Customer } from '../../types/Customer/Customer';
import AES from 'crypto-js/aes';
import Utf8 from 'crypto-js/enc-utf8';
import ECBmode from 'crypto-js/mode-ecb';
import PaddingPkcs7 from 'crypto-js/pad-pkcs7';
// import { paySuccess } from '../../api/Order/paySuccess';
import './connect.scss';
import { str2ab, ab2str } from '@/utils/arrayBuffer';
import { SOCKET_URL } from '@/constants';
enum ContorlCode {
using = '1',
broken = '2',
usable = '3',
opened = '4',
}
type UploadMessage = {
deviceCode: string;
userId: string;
type: number;
contorlCode?: ContorlCode;
data: string;
};
enum MessageType {
info = 'info',
success = 'success',
error = 'error',
}
type Message = {
type: MessageType;
text: string;
};
enum BlueToothError {
BlueToothNotOpen = 'BlueToothNotOpen',
DeviceNotFound = 'DeviceNotFound',
}
type DeviceInfo = {
deviceId: string;
uuid: string;
isPrimary: boolean;
serviceId: string;
notifyId: string;
writeId: string;
readId: string;
};
type PageStateProps = {
device: Device;
prepayConfig: PrepayConfig[];
userinfo: Customer;
};
type PageDispatchProps = {};
type PageState = {
payId: undefined | number;
bluetoothState: boolean;
deviceInfo: DeviceInfo;
sockedDone: boolean;
deviceDone: boolean;
showerState: boolean;
messageQueue: Message[];
lastMessage: string;
canPay: boolean;
};
type PageOwnProps = {};
type Iprop = PageStateProps & PageDispatchProps & PageOwnProps;
interface Connect {
props: Iprop;
state: PageState;
}
const StopCode = 1000;
let timer: NodeJS.Timeout | null = null;
let reConnectting: boolean = false;
let socketTask: Taro.SocketTask | null = null;
@connect(({ device, prepayConfig, userinfo }) => ({
device,
prepayConfig,
userinfo,
}))
class Connect extends Component {
config: Config = {
navigationBarTitleText: '设备链接',
};
constructor(props) {
super(props);
this.state = {
payId: undefined,
bluetoothState: false,
sockedDone: false,
deviceDone: false,
showerState: false,
deviceInfo: {
deviceId: '',
uuid: '',
isPrimary: false,
serviceId: '',
notifyId: '',
writeId: '',
readId: '',
},
messageQueue: [],
lastMessage: '',
canPay: false,
};
this.checkBluetoothAndWs();
}
componentWillMount() {
const { prepayConfig } = this.props;
if (prepayConfig.length) {
this.setState({
payId: prepayConfig[0].id,
});
}
}
componentWillUnmount() {
// this.closeBluetooth();
// this.closeDeviceSocket();
}
connectDeviceSocket() {
this.addMessageItem({
type: MessageType.info,
text: '服务器连接中...',
});
Taro.connectSocket({ url: SOCKET_URL }).then(task => {
socketTask = task;
task.onOpen(() => {
this.addMessageItem({
type: MessageType.success,
text: '服务器连接成功',
});
console.log('onOpen');
if (reConnectting) {
this.reConnectDeviceSocket(true);
}
this.setState({
sockedDone: true,
});
task.send({ data: str2ab('{}') });
this.sendDeviceCode();
});
task.onMessage(res => {
this.addMessageItem({
type: MessageType.info,
text: '正在与设备通信...',
});
const msg: string = ab2str(res.data);
console.log('获取socket消息: ', msg);
const msgObj: UploadMessage = JSON.parse(msg);
if (msgObj.type === 1) {
if (msgObj.data.length > 20) {
for (
let index = 0;
index <= Math.floor(msgObj.data.length / 20);
index++
) {
let str = msgObj.data.substring(index * 20, (index + 1) * 20);
this.sendMessageToDevice(str);
}
} else {
this.sendMessageToDevice(msgObj.data);
}
} else if (msgObj.type === 0) {
if (msgObj.contorlCode === ContorlCode.using) {
Taro.showModal({
title: '提示',
content: '设备正在使用',
});
} else if (msgObj.contorlCode === ContorlCode.broken) {
Taro.showModal({
title: '提示',
content: '设备已损坏',
});
} else if (msgObj.contorlCode === ContorlCode.usable) {
this.setState({
canPay: true,
});
} else if (msgObj.contorlCode === ContorlCode.opened) {
Taro.showModal({
title: '提示',
content: '设备已启动',
});
} else {
}
} else {
}
});
task.onClose(e => {
this.addMessageItem({
type: MessageType.error,
text: '服务器连接失败，请稍后扫码重试',
});
console.log('socked关闭', e, reConnectting, timer);
this.setState({
sockedDone: false,
});
socketTask = null;
if (e.code === StopCode) {
console.log('正确结束socket连接');
} else {
console.log('开始重连socket');
this.reConnectDeviceSocket(false);
}
});
});
}
reConnectDeviceSocket(cancel: boolean) {
if (cancel) {
timer && clearTimeout(timer);
timer = null;
reConnectting = false;
return;
}
console.log(reConnectting, timer);
if (reConnectting) {
this.connectDeviceSocket();
} else if (timer) {
clearTimeout(timer);
reConnectting = false;
timer = null;
console.log('请保证网络正常');
Taro.showModal({
title: '警告',
content: '请保持网络畅通正常',
});
} else {
timer = setTimeout(() => {
reConnectting = false;
}, 10000);
reConnectting = true;
console.log(reConnectting, timer);
this.connectDeviceSocket();
}
}
sendDeviceCode() {
const { sockedDone, deviceDone } = this.state;
const { device } = this.props;
console.log('socket状态：', sockedDone, '蓝牙状态：', deviceDone);
if (sockedDone && socketTask && deviceDone) {
let deviceData = '{<' + device.code + '>}';
console.log('<---发送设备编号:', deviceData);
socketTask.send({
data: str2ab(deviceData),
success: msg => {
console.log('发送设备编号:', msg, '--->');
},
fail: err => {
console.log('发送设备编号:', err, '--->');
},
});
}
}
closeDeviceSocket() {
console.log('in close', socketTask, timer);
if (socketTask) {
socketTask.close({
code: StopCode,
complete: () => {
socketTask = null;
},
});
}
if (timer) {
clearTimeout(timer);
}
}
checkBluetoothAndWs() {
this.closeBluetooth()
.then(() => {
console.log('打开蓝牙和WebSocket');
this.openBluetooth();
this.connectDeviceSocket();
})
.catch(err => {
console.log(err);
console.log(err, '打开蓝牙和WebSocket');
this.openBluetooth();
this.connectDeviceSocket();
});
}
openBluetooth() {
this.addMessageItem({
type: MessageType.info,
text: '蓝牙链接中...',
});
Taro.openBluetoothAdapter()
.then(res => {
console.log(res);
this.setState(
{
bluetoothState: true,
},
() => {
this.startConnectDevice();
}
);
})
.catch(err => {
this.addMessageItem({
type: MessageType.error,
text: '蓝牙连接失败，请稍后扫码重试',
});
Taro.showModal({
title: '温馨提示',
content: '为了更好的体验本次服务,请打开手机蓝牙!',
});
console.error(err);
Taro.onBluetoothAdapterStateChange(res => {
console.log('adapterState changed, now is', res);
if (res.available) {
this.setState({
bluetoothState: true,
});
}
});
});
}
checkBluetoothState() {
const { bluetoothState } = this.state;
return bluetoothState;
}
closeBluetoothConnection() {
const { deviceInfo } = this.state;
this.setState({
showerState: false,
});
Taro.closeBLEConnection({
deviceId: deviceInfo.deviceId,
})
.then(() => {
this.setState({
deviceDone: false,
});
})
.catch(err => {
console.log('断开蓝牙连接失败！');
console.error(err);
});
}
closeBluetooth() {
return Taro.closeBluetoothAdapter();
}
warnBluetoothOpen() {
return Taro.showModal({
title: '警告',
content: '为保障正常使用，请打开蓝牙功能',
});
}
startDevicesDiscovery() {
console.log('in startDevicesDiscovery', this.checkBluetoothState());
if (this.checkBluetoothState()) {
return Taro.startBluetoothDevicesDiscovery()
.then(() => {
const {
code,
// isOnlyBluetooth
} = this.props.device;
let timer: NodeJS.Timeout | null = null;
return new Promise((resolve, reject) => {
// if (isOnlyBluetooth) {
// timer = setTimeout(() => {
// reject({ msg: BlueToothError.DeviceNotFound });
// }, 10000);
// } else {
timer = setTimeout(() => {
reject({ msg: BlueToothError.DeviceNotFound });
}, 5000);
// }
Taro.onBluetoothDeviceFound(res => {
const devices = res.devices;
if (devices[0].name === code) {
let deviceId = devices[0].deviceId;
Taro.stopBluetoothDevicesDiscovery();
this.setState({
deviceId,
});
if (timer) {
clearInterval(timer);
}
resolve(deviceId);
}
});
});
})
.catch(err => {
// Taro.stopBluetoothDevicesDiscovery();
if (timer) {
clearInterval(timer);
}
Taro.hideLoading();
console.error('startBluetoothDevicesDiscovery: ', err);
// if (err.msg === BlueToothError.DeviceNotFound) {
Taro.stopBluetoothDevicesDiscovery();
// this.sendStartShower();
throw err;
// } else {
// return this.warnBluetoothOpen();
// }
});
} else {
Taro.hideLoading();
return this.warnBluetoothOpen().then(res => {
if (res.confirm) {
// const { isOnlyBluetooth } = this.props.bluetoothDevice;
// if (!isOnlyBluetooth) {
// Taro.showLoading({
// title: '开启中',
// mask: true,
// });
// return new Promise((resolve, reject) => {
// setTimeout(() => {
// this.sendStartShower();
// reject();
// }, 5000);
// });
// }
}
throw BlueToothError.BlueToothNotOpen;
});
}
}
createConnection(deviceId: string) {
const { userinfo } = this.props;
console.log(deviceId);
return new Promise((resolve, reject) => {
Taro.createBLEConnection({
deviceId,
});
let abStr = '';
Taro.onBLECharacteristicValueChange(res => {
console.log(
`characteristic ${res.characteristicId} has changed, now is ${res.value}`
);
console.log(res.value);
let datastr = ab2str(res.value);
console.log('获取bluetooth消息： ', datastr);
if (datastr === '<>') {
console.log('结束蓝牙以及socket: ', datastr);
// this.closeDeviceSocket();
this.closeBluetoothConnection();
} else {
if (
datastr.substring(0, 1) === '{' &&
datastr.substring(datastr.length - 1, datastr.length) === '}'
) {
console.log('<---发送完整数据： ', datastr);
if (socketTask) {
let sendData: UploadMessage = {
deviceCode: deviceId,
userId: userinfo.customerId.toString(),
type: 1,
data: datastr,
};
socketTask.send({
data: JSON.stringify(sendData),
success: msg => {
console.log('发送完整数据：', msg, '--->');
},
fail: err => {
console.log('发送完整数据：', err, '--->');
},
});
}
} else if (datastr.substring(0, 1) === '{') {
abStr = datastr;
} else if (
abStr.length &&
datastr.substring(datastr.length - 1, datastr.length) === '}'
) {
abStr += datastr;
console.log('<---发送完整数据： ', abStr);
let sendData: UploadMessage = {
deviceCode: deviceId,
userId: userinfo.customerId.toString(),
type: 1,
data: abStr,
};
if (socketTask) {
socketTask.send({
data: JSON.stringify(sendData),
success: msg => {
console.log('发送完整数据：', msg, '--->');
},
fail: err => {
console.log('发送完整数据：', err, '--->');
},
});
}
abStr = '';
} else {
console.log('弃掉数据：', datastr);
}
}
});
Taro.onBLEConnectionStateChange(res => {
// const { showerState } = this.state;
console.log(
`device ${res.deviceId} state has changed, connected: ${res.connected}`
);
if (res.connected) {
this.setState({
deviceDone: true,
showerState: true,
});
resolve(res.deviceId);
} else {
console.log(res);
this.setState({
deviceDone: false,
});
// if (showerState) {
this.reConnectDeviceBluetooth(); // 只要断了就重连
// }
reject('蓝牙未成功连接');
}
});
});
}
sendMessageToDevice(msg: string) {
const { deviceInfo } = this.state;
console.log(msg, str2ab(msg).byteLength);
if (deviceInfo.writeId) {
Taro.writeBLECharacteristicValue({
deviceId: deviceInfo.deviceId,
serviceId: deviceInfo.serviceId,
characteristicId: deviceInfo.writeId,
value: str2ab(msg),
});
}
}
reConnectDeviceBluetooth() {
if (this.checkBluetoothState()) {
const { deviceInfo } = this.state;
this.createConnection(deviceInfo.deviceId);
}
}
getDeviceServices(deviceId: string) {
return Taro.getBLEDeviceServices({
deviceId: deviceId,
}).then(services => {
return { deviceId: deviceId, services: services.services };
});
}
getDeviceCharacter({
deviceId,
serviceId,
}: {
deviceId: string;
serviceId: string;
}) {
return Taro.getBLEDeviceCharacteristics({
deviceId,
serviceId,
}).then(res => {
let notifyId = '',
writeId = '',
readId = '';
for (let i = 0; i < res.characteristics.length; i++) {
let charc = res.characteristics[i];
if (charc.properties.notify) {
notifyId = charc.uuid;
}
if (charc.properties.write) {
writeId = charc.uuid;
}
if (charc.properties.write) {
readId = charc.uuid;
}
}
return {
notifyId,
writeId,
readId,
};
});
}
openNotify({ notifyId, writeId, readId }) {
this.setState(({ deviceInfo }: PageState) => ({
deviceInfo: {
...deviceInfo,
notifyId,
writeId,
readId,
},
}));
const { deviceInfo } = this.state;
return Taro.notifyBLECharacteristicValueChange({
deviceId: deviceInfo.deviceId,
serviceId: deviceInfo.serviceId,
characteristicId: notifyId,
state: true,
});
}
userWarnningHandle(thresholdPrompt, money, beanAmount) {
Taro.hideLoading();
console.log('in userWarnningHandle');
let arr = [money, beanAmount];
let i = -1;
return Taro.showModal({
title: '提示',
content: thresholdPrompt.replace(/(\{.*?\})/g, () => {
i++;
return arr[i];
}),
}).then(res => {
if (res.confirm) {
Taro.showLoading({
title: '开启中',
mask: true,
});
return Promise.resolve();
} else {
return Promise.reject();
}
});
}
startConnectDevice() {
const { sockedDone } = this.state;
if (!sockedDone) {
this.connectDeviceSocket();
}
this.startDevicesDiscovery()
.then((deviceId: string) => this.createConnection(deviceId))
.then(this.getDeviceServices)
.then(res => {
const deviceId = res.deviceId;
const services = res.services;
let service = services.find(
item =>
item.uuid.toLocaleLowerCase() ===
'6e401103-b5a3-f393-e0a9-e50e24dcca9e'
);
if (!service) {
service = services[0];
}
console.log('获取全部services: ', services, '. serviceId: ', service);
const serviceId = service.uuid;
this.setState(({ deviceInfo }: PageState) => ({
deviceInfo: {
...deviceInfo,
deviceId,
serviceId,
},
}));
return this.getDeviceCharacter({
deviceId,
serviceId,
});
})
.then(res => this.openNotify(res))
.then(() => {
this.addMessageItem({
type: MessageType.success,
text: '蓝牙连接成功',
});
this.sendDeviceCode();
// if (!reConnect) {
// setTimeout(() => {
// this.sendStartShower();
// }, 2000);
// }
})
.catch(err => {
console.error(err);
Taro.hideLoading();
});
}
sendStartShower() {
console.log('开启洗浴');
// const { code } = this.props.device;
// const { userinfo } = this.props;
// startShowerEquipment({
// deviceCode: code,
// customerId: userinfo.customerId.toString(),
// customerName: userinfo.customerName,
// customerPhone: userinfo.customerPhone,
// })
// .then(res => {
// console.log(res);
// Taro.showToast({
// title: '开启成功！',
// });
// this.setState({
// showerState: true,
// });
// })
// .catch(err => {
// console.error(err);
// Taro.showToast({
// title: err.msg || '开启失败！',
// icon: 'none',
// });
// this.closeBluetoothConnection();
// });
}
selectPayConfig(id: number) {
this.setState({
payId: id,
});
}
showerPayHandle() {
this.closeBluetooth();
return Taro.showModal({
title: '提示',
content: '设备蓝牙或网络连接失败...请稍后再试',
showCancel: false,
}).then(res => {
console.log(res);
this.openBluetooth();
});
}
payHandle(phoneData) {
const {
device,
userinfo: { customerId },
} = this.props;
const { payId, deviceDone, sockedDone } = this.state;
if (payId) {
if (device.isOnlyBluetooth && device.isOnlyBluetooth === 1) {
if (this.checkIsShower()) {
console.log(deviceDone, sockedDone);
if (!deviceDone || !sockedDone) {
return this.showerPayHandle();
}
}
}
let entity = {
equipmentNum: device.originCode,
equipmentPos: device.position,
payType: '2',
serviceId: device.serviceId,
smaproCustomerId: customerId,
smaproPrepayConfigId: payId,
areaId: device.areaId,
areaName: device.areaName,
};
if (phoneData) {
entity = { ...entity, ...phoneData };
}
getPayOrder(entity)
.then(res => {
console.log('res: ', res);
const { payStr } = res;
let key = customerId.toString();
while (key.length < 16) {
key = key + '0';
}
const payData = JSON.parse(
AES.decrypt(payStr, Utf8.parse(key), {
mode: ECBmode,
padding: PaddingPkcs7,
}).toString(Utf8)
);
console.log('payData:', payData);
Taro.requestPayment({
timeStamp: payData.msg.timeStamp.toString(),
nonceStr: payData.msg.nonceStr,
package: payData.msg.package,
signType: payData.msg.signType,
paySign: payData.msg.paySign,
}).then(res => {
console.log(res);
// paySuccess({ orderId: outTradeNo });
// Taro.showLoading({
// title: '设备连接中',
// mask: true,
// });
Taro.showToast({
title: '支付成功！',
icon: 'success',
mask: true,
});
this.gobackHandle();
});
})
.catch(err => {
Taro.showToast({
title: '发起支付失败!',
icon: 'none',
});
console.error(err);
});
} else {
Taro.showToast({
title: '请选择预付金额',
icon: 'none',
});
}
}
gobackHandle() {
if (this.checkIsShower()) {
setTimeout(() => {
Taro.navigateTo({
url: '/pages/index/index?', // 需要问号不然回到首页可以取到业务参数
});
}, 2000);
setTimeout(() => {
this.closeBluetooth();
this.closeDeviceSocket();
}, 10000);
} else {
setTimeout(() => {
Taro.navigateTo({
url: '/pages/index/index?', // 需要问号不然回到首页可以取到业务参数
});
}, 2000);
}
}
getPhoneHandle(e) {
console.log(e);
const { encryptedData, iv } = e.detail;
if (encryptedData && iv) {
console.log('获得手机权限');
this.payHandle({
encryptedData,
iv,
});
}
}
addMessageItem(msg: Message) {
this.setState({
messageQueue: [...this.state.messageQueue, msg],
lastMessage: 'Connect-Message-item' + this.state.messageQueue.length,
});
}
render() {
const { device, prepayConfig, userinfo } = this.props;
const { payId, messageQueue, lastMessage, canPay } = this.state;
return device.isOnlyBluetooth && !canPay ? (
<View className="Connect">
<View className="Connect-info">
<View className="Connect-info-item">
<Text>服务类型</Text>
<Text>{device.serviceName ? device.serviceName : ''}</Text>
</View>
<View className="Connect-info-item">
<Text>设备编号</Text>
<Text>{device.code ? device.code : ''}</Text>
</View>
<View className="Connect-info-item">
<Text>设备位置</Text>
<Text className="Connect-info-position">{device.position}</Text>
</View>
</View>
<ScrollView
scroll-y
scroll-into-view={lastMessage}
className="Connect-Message">
{messageQueue.map((item, index) => (
<View
key={'Connect-Message-item' + index}
id={'Connect-Message-item' + index}
className={'Connect-Message-item ' + item.type}>
{item.text}
</View>
))}
</ScrollView>
<View className="Connect-tip2">
{device.refundMode === DeviceRefundMode.notRefund
? '说明：设备成功开启后，未使用金额将不会退换！'
: '说明：如本次预付款未全部使用，系统将在使用结束后半小时内自动退还剩余金额，请留意查收！'}
</View>
</View>
) : (
<View className="Connect">
<View className="Connect-info">
<View className="Connect-info-item">
<Text>服务类型</Text>
<Text>{device.serviceName ? device.serviceName : ''}</Text>
</View>
<View className="Connect-info-item">
<Text>设备编号</Text>
<Text>{device.code ? device.code : ''}</Text>
</View>
<View className="Connect-info-item">
<Text>设备位置</Text>
<Text className="Connect-info-position">{device.position}</Text>
</View>
{device.rates.length && (
<View className="Connect-info-item">
<Text>适用费率</Text>
<View className="Connect-info-rate">
{device.rates.map(item => (
<View key="name" className="Connect-info-rate-item">
<Text className="Connect-info-rate-name">
{item.duration}分钟
</Text>
<Text className="Connect-info-rate-mark">
{item.money}元
</Text>
</View>
))}
</View>
</View>
)}
</View>
<View className="Connect-tip">
{device.refundMode === DeviceRefundMode.notRefund
? '温馨提示：设备成功开启后，未使用金额将不会退换！'
: '温馨提示：如本次预付款未全部使用，系统将在使用结束后半小时内自动退还剩余金额，请留意查收！'}
</View>
<View className="Connect-money">
{prepayConfig &&
prepayConfig.length &&
prepayConfig.map(payConfig => (
<View
key="id"
className={`Connect-money-item ${
payConfig.id == payId ? 'seleted' : ''
}`}
onClick={() => this.selectPayConfig(payConfig.id)}>
{payConfig.prepayMoney}元
</View>
))}
</View>
{userinfo.isAuth ? (
<Button className="Connect-btn" onClick={this.payHandle}>
确定支付
</Button>
) : (
<Button
className="Connect-btn"
open-type="getPhoneNumber"
onGetphonenumber={this.getPhoneHandle}>
确定支付
</Button>
)}
<ad unit-id="adunit-8d48f17389f7e2aa"></ad>
</View>
);
}
}
export default Connect as ComponentClass<Iprop, PageState>;
src/pages/index/index.tsx
import { ComponentClass } from "react"; import { ComponentClass } from 'react';
import Taro, { Component, Config } from "@tarojs/taro"; import Taro, { Component, Config } from '@tarojs/taro';
import { View, Image } from "@tarojs/components"; import { View, Image } from '@tarojs/components';
import scanIcon from "../../images/icon_s@2x.png"; import './index.scss';
import { registerAndLogin } from '../../api/customer';
import "./index.scss"; import { getDeviceConfig, ScanTrigger } from '../../api/device';
import { registerAndLogin } from "../../api/customer"; import { UserState, updateUserInfo } from '../../store/rootReducers/userinfo';
import { getDeviceConfig } from "../../api/device"; import { connect } from '@tarojs/redux';
import { UserState, updateUserInfo } from "../../store/rootReducers/userinfo"; import { Customer } from '../../types/Customer/Customer';
import { connect } from "@tarojs/redux";
import { Customer } from "../../types/Customer/Customer";
import { import {
DeviceState, DeviceState,
updateDeviceData, updateDeviceData,
resetDeviceData resetDeviceData,
} from "../../store/rootReducers/device"; } from '../../store/rootReducers/device';
import PrepayConfig from "../../types/Order/Order"; import PrepayConfig from '../../types/Order/Order';
import { updatePayData } from "../../store/rootReducers/prepayConfig"; import { updatePayData } from '../../store/rootReducers/prepayConfig';
import { getPathParams } from "@/utils/path"; import { getPathParams } from '@/utils/path';
type DeviceEntity = { type DeviceEntity = {
serviceId: number; serviceId: number;
...@@ -50,7 +48,7 @@ interface Index { ...@@ -50,7 +48,7 @@ interface Index {
@connect( @connect(
({ userinfo }) => ({ ({ userinfo }) => ({
userinfo userinfo,
}), }),
dispatch => ({ dispatch => ({
updateUserInfo(data: UserState) { updateUserInfo(data: UserState) {
...@@ -64,18 +62,18 @@ interface Index { ...@@ -64,18 +62,18 @@ interface Index {
}, },
resetDeviceData() { resetDeviceData() {
dispatch(resetDeviceData()); dispatch(resetDeviceData());
} },
}) })
) )
class Index extends Component { class Index extends Component {
config: Config = { config: Config = {
navigationBarTitleText: "多彩自助服务" navigationBarTitleText: '多彩自助服务',
}; };
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
errorText: "" errorText: '',
}; };
} }
...@@ -85,15 +83,15 @@ class Index extends Component { ...@@ -85,15 +83,15 @@ class Index extends Component {
let queryArr = Object.keys(this.$router.params); let queryArr = Object.keys(this.$router.params);
console.log(this.$router.params); console.log(this.$router.params);
let scene: string = queryArr.length > 0 ? queryArr[0] : ""; let scene: string = queryArr.length > 0 ? queryArr[0] : '';
console.log("scene:", scene); console.log('scene:', scene);
if (codeStr) { if (codeStr) {
// Taro.showLoading(); // Taro.showLoading();
let params = getPathParams(codeStr); let params = getPathParams(codeStr);
console.log("code", params); console.log('code', params);
if (params["code"]) { if (params['code']) {
let entity = this.getDeviceEntity(params["code"]); let entity = this.getDeviceEntity(params['code']);
if (entity) { if (entity) {
this.getDeviceConfigHandle(entity); this.getDeviceConfigHandle(entity);
} }
...@@ -108,7 +106,7 @@ class Index extends Component { ...@@ -108,7 +106,7 @@ class Index extends Component {
} }
} else { } else {
Taro.redirectTo({ Taro.redirectTo({
url: "/pages/scanEnter/scanEnter" url: '/pages/scanEnter/scanEnter',
}); });
} }
}); });
...@@ -119,7 +117,7 @@ class Index extends Component { ...@@ -119,7 +117,7 @@ class Index extends Component {
let equipmentNum = paramStr.slice(2); let equipmentNum = paramStr.slice(2);
return { return {
serviceId, serviceId,
equipmentNum equipmentNum,
}; };
} }
...@@ -127,18 +125,18 @@ class Index extends Component { ...@@ -127,18 +125,18 @@ class Index extends Component {
const { updateUserInfo } = this.props; const { updateUserInfo } = this.props;
return Taro.login().then(res => { return Taro.login().then(res => {
console.log("login info:", res); console.log('login info:', res);
const { code } = res; const { code } = res;
return registerAndLogin({ return registerAndLogin({
code code,
// userName: '', // userName: '',
}).then(res => { }).then(res => {
const { token, customerId, isAuth } = res; const { token, customerId, isAuth } = res;
updateUserInfo({ updateUserInfo({
token, token,
customerId, customerId,
isAuth isAuth,
}); });
}); });
}); });
...@@ -147,24 +145,24 @@ class Index extends Component { ...@@ -147,24 +145,24 @@ class Index extends Component {
scanHandle() { scanHandle() {
Taro.scanCode({ Taro.scanCode({
onlyFromCamera: true, onlyFromCamera: true,
scanType: ["qrCode"] scanType: ['qrCode'],
}) })
.then(res => { .then(res => {
console.log(res); console.log(res);
const { path, result } = res; const { path, result } = res;
if (path) { if (path) {
let queryArr = path.split("?"); let queryArr = path.split('?');
let queryStr = queryArr.length >= 2 ? queryArr[1] : ""; let queryStr = queryArr.length >= 2 ? queryArr[1] : '';
console.log(result, queryArr, queryStr); console.log(result, queryArr, queryStr);
const entity = this.getDeviceEntity(queryStr); const entity = this.getDeviceEntity(queryStr);
this.getDeviceConfigHandle(entity); this.getDeviceConfigHandle(entity);
} else { } else {
Taro.showToast({ Taro.showToast({
title: "请扫描正确的小程序", title: '请扫描正确的小程序',
icon: "none" icon: 'none',
}); });
this.setState({ this.setState({
errorText: "请扫描正确的小程序" errorText: '请扫描正确的小程序',
}); });
} }
}) })
...@@ -179,19 +177,20 @@ class Index extends Component { ...@@ -179,19 +177,20 @@ class Index extends Component {
userinfo, userinfo,
updateDeviceData, updateDeviceData,
updatePayData, updatePayData,
resetDeviceData resetDeviceData,
} = this.props; } = this.props;
return getDeviceConfig({ return getDeviceConfig({
customerId: userinfo.customerId, customerId: userinfo.customerId,
equipmentNum: equipmentNum, equipmentNum: equipmentNum,
serviceId: serviceId serviceId: serviceId,
isScanTrigger: ScanTrigger.false,
}) })
.then(res => { .then(res => {
Taro.hideLoading(); Taro.hideLoading();
console.log(res); console.log(res);
const { deviceInfoResponse, prepayConfigs } = res; const { deviceInfoResponse, prepayConfigs } = res;
if (deviceInfoResponse.isUsed) { if (deviceInfoResponse.isUsed) {
console.log("设备使用中"); console.log('设备使用中');
return; return;
} }
if (deviceInfoResponse) { if (deviceInfoResponse) {
...@@ -205,18 +204,16 @@ class Index extends Component { ...@@ -205,18 +204,16 @@ class Index extends Component {
} else { } else {
updatePayData([]); updatePayData([]);
} }
Taro.redirectTo({ this.goNextPage(serviceId);
url: "/pages/pay/pay"
});
}) })
.catch(err => { .catch(err => {
console.error(err); console.error(err);
Taro.showToast({ Taro.showToast({
title: err.msg || "请扫描正确的设备码", title: err.msg || '请扫描正确的设备码',
icon: "none" icon: 'none',
}); });
this.setState({ this.setState({
errorText: err.msg || "请扫描正确的设备码" errorText: err.msg || '请扫描正确的设备码',
}); });
}); });
} }
...@@ -235,14 +232,26 @@ class Index extends Component { ...@@ -235,14 +232,26 @@ class Index extends Component {
scanErrorWeQRcode() { scanErrorWeQRcode() {
Taro.showToast({ Taro.showToast({
title: "请扫描正确的小程序", title: '请扫描正确的小程序',
icon: "none" icon: 'none',
}); });
this.setState({ this.setState({
errorText: "请扫描正确的小程序" errorText: '请扫描正确的小程序',
}); });
} }
goNextPage(serviceId: number) {
if (serviceId === 30 || serviceId === 31) {
Taro.redirectTo({
url: '/pages/connect/connect',
});
} else {
Taro.redirectTo({
url: '/pages/pay/pay',
});
}
}
render() { render() {
const { errorText } = this.state; const { errorText } = this.state;
return ( return (
......
src/pages/scanEnter/scanEnter.tsx
import { ComponentClass } from "react"; import { ComponentClass } from 'react';
import Taro, { Component, Config } from "@tarojs/taro"; import Taro, { Component, Config } from '@tarojs/taro';
import { View, Image } from "@tarojs/components"; import { View, Image } from '@tarojs/components';
import scanIcon from "../../images/icon_s@2x.png"; import scanIcon from '../../images/icon_s@2x.png';
import "./scanEnter.scss"; import './scanEnter.scss';
import { registerAndLogin } from "../../api/customer"; import { registerAndLogin } from '../../api/customer';
import { getDeviceConfig } from "../../api/device"; import { getDeviceConfig, ScanTrigger } from '../../api/device';
import { UserState, updateUserInfo } from "../../store/rootReducers/userinfo"; import { UserState, updateUserInfo } from '../../store/rootReducers/userinfo';
import { connect } from "@tarojs/redux"; import { connect } from '@tarojs/redux';
import { Customer } from "../../types/Customer/Customer"; import { Customer } from '../../types/Customer/Customer';
import { import {
DeviceState, DeviceState,
updateDeviceData, updateDeviceData,
resetDeviceData resetDeviceData,
} from "../../store/rootReducers/device"; } from '../../store/rootReducers/device';
import PrepayConfig from "../../types/Order/Order"; import PrepayConfig from '../../types/Order/Order';
import { updatePayData } from "../../store/rootReducers/prepayConfig"; import { updatePayData } from '../../store/rootReducers/prepayConfig';
import { getPathParams } from "@/utils/path"; import { getPathParams } from '@/utils/path';
type DeviceEntity = { type DeviceEntity = {
serviceId: number; serviceId: number;
...@@ -47,7 +47,7 @@ interface ScanEnter { ...@@ -47,7 +47,7 @@ interface ScanEnter {
@connect( @connect(
({ userinfo }) => ({ ({ userinfo }) => ({
userinfo userinfo,
}), }),
dispatch => ({ dispatch => ({
updateUserInfo(data: UserState) { updateUserInfo(data: UserState) {
...@@ -61,12 +61,12 @@ interface ScanEnter { ...@@ -61,12 +61,12 @@ interface ScanEnter {
}, },
resetDeviceData() { resetDeviceData() {
dispatch(resetDeviceData()); dispatch(resetDeviceData());
} },
}) })
) )
class ScanEnter extends Component { class ScanEnter extends Component {
config: Config = { config: Config = {
navigationBarTitleText: "多彩自助服务" navigationBarTitleText: '多彩自助服务',
}; };
componentWillMount() { componentWillMount() {
...@@ -90,7 +90,7 @@ class ScanEnter extends Component { ...@@ -90,7 +90,7 @@ class ScanEnter extends Component {
let equipmentNum = paramStr.slice(2); let equipmentNum = paramStr.slice(2);
return { return {
serviceId, serviceId,
equipmentNum equipmentNum,
}; };
} }
...@@ -98,17 +98,17 @@ class ScanEnter extends Component { ...@@ -98,17 +98,17 @@ class ScanEnter extends Component {
const { updateUserInfo } = this.props; const { updateUserInfo } = this.props;
return Taro.login().then(res => { return Taro.login().then(res => {
console.log("login info:", res); console.log('login info:', res);
const { code } = res; const { code } = res;
return registerAndLogin({ return registerAndLogin({
code code,
// userName: '', // userName: '',
}).then(res => { }).then(res => {
const { token, customerId, isAuth } = res; const { token, customerId, isAuth } = res;
updateUserInfo({ updateUserInfo({
token, token,
customerId, customerId,
isAuth isAuth,
}); });
}); });
}); });
...@@ -117,26 +117,26 @@ class ScanEnter extends Component { ...@@ -117,26 +117,26 @@ class ScanEnter extends Component {
scanHandle() { scanHandle() {
Taro.scanCode({ Taro.scanCode({
onlyFromCamera: true, onlyFromCamera: true,
scanType: ["qrCode"] scanType: ['qrCode'],
}) })
.then(res => { .then(res => {
console.log(res); console.log(res);
const { path, result } = res; const { path, result } = res;
let param = getPathParams(result); let param = getPathParams(result);
if (path) { if (path) {
let queryArr = path.split("?"); let queryArr = path.split('?');
let queryStr = queryArr.length >= 2 ? queryArr[1] : ""; let queryStr = queryArr.length >= 2 ? queryArr[1] : '';
console.log(result, queryArr, queryStr); console.log(result, queryArr, queryStr);
const entity = this.getDeviceEntity(queryStr); const entity = this.getDeviceEntity(queryStr);
this.getDeviceConfigHandle(entity); this.getDeviceConfigHandle(entity);
} else if (param["code"]) { } else if (param['code']) {
console.log(param["code"]); console.log(param['code']);
const entity = this.getDeviceEntity(param["code"]); const entity = this.getDeviceEntity(param['code']);
this.getDeviceConfigHandle(entity); this.getDeviceConfigHandle(entity);
} else { } else {
Taro.showToast({ Taro.showToast({
title: "请扫描正确的小程序", title: '请扫描正确的小程序',
icon: "none" icon: 'none',
}); });
} }
}) })
...@@ -151,19 +151,20 @@ class ScanEnter extends Component { ...@@ -151,19 +151,20 @@ class ScanEnter extends Component {
userinfo, userinfo,
updateDeviceData, updateDeviceData,
updatePayData, updatePayData,
resetDeviceData resetDeviceData,
} = this.props; } = this.props;
return getDeviceConfig({ return getDeviceConfig({
customerId: userinfo.customerId, customerId: userinfo.customerId,
equipmentNum: equipmentNum, equipmentNum: equipmentNum,
serviceId: serviceId serviceId: serviceId,
isScanTrigger: ScanTrigger.true,
}) })
.then(res => { .then(res => {
Taro.hideLoading(); Taro.hideLoading();
console.log(res); console.log(res);
const { deviceInfoResponse, prepayConfigs } = res; const { deviceInfoResponse, prepayConfigs } = res;
if (deviceInfoResponse.isUsed) { if (deviceInfoResponse.isUsed) {
console.log("设备使用中"); console.log('设备使用中');
return; return;
} }
if (deviceInfoResponse) { if (deviceInfoResponse) {
...@@ -177,15 +178,13 @@ class ScanEnter extends Component { ...@@ -177,15 +178,13 @@ class ScanEnter extends Component {
} else { } else {
updatePayData([]); updatePayData([]);
} }
Taro.navigateTo({ this.goNextPage(serviceId);
url: "/pages/pay/pay"
});
}) })
.catch(err => { .catch(err => {
console.error(err); console.error(err);
Taro.showToast({ Taro.showToast({
title: err.msg || "请扫描正确的设备码", title: err.msg || '请扫描正确的设备码',
icon: "none" icon: 'none',
}); });
}); });
} }
...@@ -202,6 +201,18 @@ class ScanEnter extends Component { ...@@ -202,6 +201,18 @@ class ScanEnter extends Component {
this.scanHandle(); this.scanHandle();
} }
goNextPage(serviceId: number) {
if (serviceId === 30 || serviceId === 31) {
Taro.redirectTo({
url: '/pages/connect/connect',
});
} else {
Taro.redirectTo({
url: '/pages/pay/pay',
});
}
}
render() { render() {
return ( return (
<View className="ScanEnter"> <View className="ScanEnter">
......
src/types/Device/Device.ts
...@@ -2,10 +2,25 @@ export enum DeviceRefundMode { ...@@ -2,10 +2,25 @@ export enum DeviceRefundMode {
needRefund = 1, needRefund = 1,
notRefund = 2, notRefund = 2,
} }
export enum OnlyBluetooth {
false = 0,
true = 1,
}
export type Rate = { export type Rate = {
mark: string; mark: string;
// 费率描述
name: string; name: string;
// 费率名称
duration: number;
// 消费时长，单位分钟
money: number;
// 费率金额
}; };
export type Device = { export type Device = {
refundMode: DeviceRefundMode; refundMode: DeviceRefundMode;
originCode: string; originCode: string;
...@@ -20,7 +35,7 @@ export type Device = { ...@@ -20,7 +35,7 @@ export type Device = {
rates: Rate[]; rates: Rate[];
serviceId: number; serviceId: number;
serviceName: string; serviceName: string;
isOnlyBluetooth: number; isOnlyBluetooth: OnlyBluetooth;
areaId: number; areaId: number;
areaName: string; areaName: string;
}; };
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 to comment