Skip to content

W
wx-school-app
Commit 2b9e5b32 by 姜雷
Options

合并冲突

parents 342f78cb e204645e
Showing with 715 additions and 243 deletions
package.json
{
"name": "wx-school-app",
"version": "1.0.0",
"version": "1.0.6",
"private": true,
"description": "",
"scripts": {
......
src/app.scss
......@@ -99,4 +99,17 @@ button[disabled]:not([type]) {
height: 100%;
background-color: rgba(25, 25, 25, 0.2);
z-index: 99;
}
\ No newline at end of file
}
.blur {
filter: blur(10px);
}
.OrderBox {
box-sizing: border-box;
position: absolute;
top: 0;
width: 100%;
height: 100%;
padding: 0 32px;
z-index: 100;
background-color: rgba(255, 255, 255, 0.5);
}
src/common/checkOrderHOC.js 0 → 100644
import { fetchPayOrder, fetchOrderDetailAndPay } from '@/api/order';
import { View } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import { ComponentClass } from 'react';
function wrapCheckOrder() {
return function wrapComponent(
Component: ComponentClass<T>,
): ComponentClass<T> {
return class CheckOrder extends Component {
constructor(props) {
super(props);
this.state = {
showPayOrder: false,
accounts: [],
orderInfo: {
actualMoney: 0,
areaId: 0,
areaName: '',
consumeType: '',
createAt: '',
customerCellphone: '',
customerId: 0,
customerName: '',
deductionBean: 0,
deductionMoney: 0,
equipmentNum: '',
equipmentPosition: '',
id: 0,
operateId: 0,
operateName: '',
operationMode: '',
orderName: '',
orderNumber: '',
orderState: '',
outTradeNo: '',
payType: '',
payableMoney: 0,
serviceId: 0,
serviceName: '',
thirdDiscountMoney: 0,
thirdTradeNumber: '',
updateDate: '',
},
payInfos: {
paymentAndActiveInfos: [],
paymentConfId: 0,
},
};
}
componentWillMount() {
this.getPayState();
if (super.componentWillMount) {
super.componentWillMount();
}
}
getPayState() {
const { userinfo } = this.props;
fetchPayOrder({
customerId: userinfo.customerId,
})
.then(res => {
if (res.data.length) {
this.fetchOrder(res.data[0].id);
this.setState({ showPayOrder: true });
} else {
this.drawBarCode();
}
})
.catch(err => {
console.log(err);
});
}
fetchOrder(id: number) {
return fetchOrderDetailAndPay({
id,
})
.then(res => {
const { accounts, orderInfo, payInfos } = res;
this.setState({
accounts: accounts,
orderInfo: orderInfo,
payInfos: payInfos,
});
})
.catch(err => {
console.log(err);
});
}
render() {
const { showPayOrder, orderInfo, payInfos, accounts } = this.state;
console.log(showPayOrder);
return (
<View className=''>
{showPayOrder ? (
<View className='OrderBox'>
<OrderTitle price={orderInfo.payableMoney} />
<OrderInfo orderInfo={orderInfo} />
<OrderPayway
onPayDoneCallback={this.payDoneHandle}
userinfo={userinfo}
accounts={accounts}
orderInfo={orderInfo}
payInfos={payInfos}
/>
</View>
) : (
super.render()
)}
</View>
);
}
};
};
}
export default wrapCheckOrder;
src/components/MenuIcon/big/MenuIconBig.scss
......@@ -16,13 +16,13 @@
}
&.left {
.text-box {
margin-left: 114px;
margin-left: 50px;
}
}
&.right {
.text-box {
position: absolute;
right: 114px;
right: 50px;
}
}
.text {
......
src/images/home/img_bg@2x.png
src/images/home/img_bg@2x.png

33.2 KB | W: | H:

src/images/home/img_bg@2x.png

42.5 KB | W: | H:

src/images/home/img_bg@2x.png
src/images/home/img_bg@2x.png
src/images/home/img_bg@2x.png
src/images/home/img_bg@2x.png
  • 2-up
  • Swipe
  • Onion skin
src/pages/BarCode/BarCode.scss
......@@ -27,18 +27,6 @@ page {
color: #fff;
}
}
.OrderBox {
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
padding: 0 32px;
z-index: 100;
background-color: rgba(255, 255, 255, 0.5);
}
.blur {
filter: blur(10px);
}
.BarCodeBox {
position: relative;
background-color: #fff;
......
src/pages/BarCode/BarCode.tsx
......@@ -223,8 +223,18 @@ class BarCode extends Component {
}
drawBarCode() {
const { userinfo } = this.props;
const routeParams = this.$router.params;
let serviceId = '';
if (routeParams && routeParams.serviceId) {
serviceId =
routeParams.serviceId.length === 1
? '0' + routeParams.serviceId
: routeParams.serviceId;
}
console.log('serviceId: ', serviceId);
if (userinfo.idBar && userinfo.idBar.length > 2) {
let idBar = userinfo.idBar.substring(0, userinfo.idBar.length - 2) + '04';
let idBar =
userinfo.idBar.substring(0, userinfo.idBar.length - 2) + serviceId;
wxbarcode.barcode('BarCode', idBar, 646, 188);
wxbarcode.barcode('BarCodeBig', idBar, 700, 364);
} else {
......@@ -269,13 +279,6 @@ class BarCode extends Component {
} = this.state;
return (
<View className='BarCode'>
{showBackTag && (
<View className='BackTag' onClick={this.goBackPage}>
<Image className='icon' src={CodeIcon} />
<Text className='text'>隐藏条码</Text>
</View>
)}
{showPayOrder && (
<View className='OrderBox'>
<OrderTitle price={orderInfo.payableMoney} />
......@@ -289,38 +292,41 @@ class BarCode extends Component {
/>
</View>
)}
<View
className={`BarCodeBox ${showPayOrder ? 'blur' : ''} ${
showBig ? 'BarCodeBoxBig' : ''
}`}>
<Image
className='BarCodeBox-refresh'
src={RefreshIcon}
onClick={this.refreshCodeBar}
/>
{showPayOrder ? null : (
<View className={`BarCodeImg ${showBig ? 'BarCodeImgBig' : ''}`}>
<Canvas
className={`BarCodeCav ${showBig ? 'show' : ''}`}
canvasId='BarCodeBig'
/>
<Canvas
className={`BarCodeCav ${showBig ? '' : 'show'}`}
canvasId='BarCode'
/>
<View className={showPayOrder ? 'blur' : ''}>
{showBackTag && (
<View className='BackTag' onClick={this.goBackPage}>
<Image className='icon' src={CodeIcon} />
<Text className='text'>隐藏条码</Text>
</View>
)}
<View className='toggleBtn' onClick={this.toggleBigBarCode}>
<View className={`BarCodeBox ${showBig ? 'BarCodeBoxBig' : ''}`}>
<Image
className={`arricon ${showBig ? 'rever' : ''}`}
src={ArrIcon}
className='BarCodeBox-refresh'
src={RefreshIcon}
onClick={this.refreshCodeBar}
/>
{showPayOrder ? null : (
<View className={`BarCodeImg ${showBig ? 'BarCodeImgBig' : ''}`}>
<Canvas
className={`BarCodeCav ${showBig ? 'show' : ''}`}
canvasId='BarCodeBig'
/>
<Canvas
className={`BarCodeCav ${showBig ? '' : 'show'}`}
canvasId='BarCode'
/>
</View>
)}
<View className='toggleBtn' onClick={this.toggleBigBarCode}>
<Image
className={`arricon ${showBig ? 'rever' : ''}`}
src={ArrIcon}
/>
</View>
</View>
<View className='warnning'>
如扫描条码终端无响应，请刷新条码后重试！
</View>
</View>
<View className='warnning'>
如扫描条码终端无响应，请刷新条码后重试！
</View>
</View>
);
......
src/pages/Home/Home.scss
......@@ -30,12 +30,15 @@
.Home-UserBox {
position: relative;
height: 390px;
// height: 390px;
padding: 0 0 40px;
margin: 0 32px;
box-sizing: content-box;
.bg {
height: 390px;
&.big {
height: 428px;
}
}
.Home-UserBox-Setting {
position: absolute;
......@@ -73,12 +76,14 @@
margin: 0 auto;
}
.Home-UserBox-Bean {
padding: 32px 40px 0;
padding: 32px 40px 70px;
display: flex;
justify-content: space-around;
flex-flow: wrap;
font-size: 24px;
color: #666;
.Home-UserBox-BeanItem {
width: 40%;
display: flex;
align-items: center;
}
......
src/pages/Home/Home.tsx
......@@ -7,8 +7,10 @@ import ArrowIcon from '../../images/home/icon_dingdan@2x.png';
import AnnouncementBg from '../../images/home/img_gonggao_bg@2x.png';
import MoreIcon from '../../images/home/icon_more_right@2x.png';
import SettingIcon from '../../images/home/icon_shezhi@2x.png';
import AimiIcon from '../../images/home/ic_aimi@2x.png';
import HBeanIcon from '../../images/home/icon_chuifengdou@2x.png';
import TBeanIcon from '../../images/home/icon_tongyongdou@2x.png';
import WBeanIcon from '../../images/home/ic_yinshui@2x.png';
import SBeanIcon from '../../images/home/ic_xiyu@2x.png';
import UserHeaderM from '../../images/home/img_boy_touxiang@2x.png';
import UserHeaderF from '../../images/home/img_girl_touxiang@2x.png';
import WaterIconNormal from '../../images/menu/ic_zizhu@2x.png';
......@@ -41,6 +43,12 @@ import MenuIconNormal from '@/components/MenuIcon/normal/MenuIconNormal';
import MenuIconBlock from '@/components/MenuIcon/block/MenuIconBlock';
import MenuIconBig from '@/components/MenuIcon/big/MenuIconBig';
enum BeanType {
shower = 'shower',
hairDryer = 'hairDryer',
water = 'water',
}
type PageStateProps = {
userinfo: Customer;
};
......@@ -48,12 +56,17 @@ type PageDispatchProps = {
updateUserInfo: (e: UserState) => void;
};
type BeanAccount = {
money: number;
serviceId: string;
};
type PageState = {
barMenuVisiable: boolean;
commBean: number;
hairDryerBean: number;
beanAccount: BeanAccount[];
annItem: SectionItem;
serviceList: Service[];
filterBeanList: BeanAccount[];
};
type IProps = PageStateProps & PageDispatchProps;
......@@ -76,14 +89,9 @@ class Home extends Component {
super(props);
this.state = {
barMenuVisiable: false,
commBean: 0.0,
hairDryerBean: 0.0,
serviceList: [
// { serviceId: 3, serviceName: '饮水' },
// { serviceId: 4, serviceName: '吹风' },
// { serviceId: 5, serviceName: '洗浴' },
// { serviceId: 9, serviceName: '壁挂饮水' },
],
beanAccount: [],
serviceList: [],
filterBeanList: [],
annItem: {
id: 0,
styleType: '',
......@@ -106,26 +114,12 @@ class Home extends Component {
}
componentDidShow() {
this.getBeanCountData();
this.getInitData();
}
getInitData() {
this.getBeanCountData();
this.getServiceList();
const { userinfo } = this.props;
fetchAnn({
campusId: userinfo.areaId,
customerId: userinfo.customerId,
})
.then(res => {
if (res) {
this.setState({
annItem: res,
});
}
})
.catch(err => {
console.error(err);
});
this.getAnn();
}
getServiceList() {
......@@ -135,9 +129,14 @@ class Home extends Component {
areaId: userinfo.areaId,
type: ServiceTypeParams.wechatAppV,
}).then(res => {
console.log(res);
this.setState({
serviceList: res.data,
});
const { beanAccount } = this.state;
if (beanAccount && beanAccount.length) {
this.getFilterBeanList();
}
});
}
}
......@@ -152,18 +151,77 @@ class Home extends Component {
})
.then(res => {
const data = res.data;
let commBeanItem = data.find(item => item.serviceId === '1');
let hairDryerBeanItem = data.find(item => item.serviceId === '4');
let commBean = commBeanItem ? commBeanItem.money : 0.0;
let hairDryerBean = hairDryerBeanItem ? hairDryerBeanItem.money : 0.0;
this.setState({
commBean,
hairDryerBean,
beanAccount: data,
});
const { serviceList } = this.state;
if (serviceList && serviceList.length) {
this.getFilterBeanList();
}
})
.catch(console.error);
}
getAnn() {
const { userinfo } = this.props;
fetchAnn({
campusId: userinfo.areaId,
customerId: userinfo.customerId,
})
.then(res => {
if (res) {
this.setState({
annItem: res,
});
}
})
.catch(err => {
console.error(err);
});
}
getFilterBeanList() {
const { beanAccount, serviceList } = this.state;
let beanMap = {
[BeanType.water]: 0,
[BeanType.shower]: 0,
[BeanType.hairDryer]: 0,
};
let cfItem = beanAccount.find(
item => item.serviceId === '4' || item.serviceId === '12',
);
let xyItem = beanAccount.find(
item => item.serviceId === '5' || item.serviceId === '10',
);
let ysItem = beanAccount.find(
item =>
item.serviceId === '3' ||
item.serviceId === '11' ||
item.serviceId === '9',
);
for (let index = 0; index < serviceList.length; index++) {
const service = serviceList[index];
if (
service.serviceId === 3 ||
service.serviceId === 11 ||
service.serviceId === 9
) {
beanMap[BeanType.water] = ysItem ? ysItem.money : 0;
} else if (service.serviceId === 4 || service.serviceId === 12) {
beanMap[BeanType.hairDryer] = cfItem ? cfItem.money : 0;
} else if (service.serviceId === 5 || service.serviceId === 10) {
beanMap[BeanType.hairDryer] = xyItem ? xyItem.money : 0;
}
}
let arr: BeanAccount[] = Object.keys(beanMap).map(k => ({
serviceId: k,
money: beanMap[k],
}));
this.setState({
filterBeanList: arr,
});
}
goSetting() {
Taro.navigateTo({
url: '/pages/UserSetting/UserSetting',
......@@ -187,9 +245,9 @@ class Home extends Component {
});
}
goBarCode() {
goBarCode(serviceId: number) {
Taro.navigateTo({
url: '/pages/BarCode/BarCode',
url: `/pages/BarCode/BarCode?serviceId=${serviceId}`,
});
}
......@@ -235,12 +293,13 @@ class Home extends Component {
render() {
const { userinfo } = this.props;
const {
commBean,
hairDryerBean,
beanAccount,
annItem,
barMenuVisiable,
serviceList,
filterBeanList,
} = this.state;
let aimiItem = beanAccount.find(item => item.serviceId === '0');
return (
<View className='Home'>
{barMenuVisiable ? (
......@@ -260,7 +319,10 @@ class Home extends Component {
src={SettingIcon}
onClick={this.toggleBarMenu}
/>
<Image className='bg' src={UserBoxBg} />
<Image
className={`bg ${serviceList.length >= 2 ? 'big' : ''}`}
src={UserBoxBg}
/>
<View className='Home-UserBox-info'>
<View className='Home-UserBox-other'>
<View className='Home-UserBox-name'>{userinfo.customerName}</View>
......@@ -285,21 +347,55 @@ class Home extends Component {
</View>
<View className='Home-UserBox-line' />
<View className='Home-UserBox-Bean'>
<View className='Home-UserBox-BeanItem'>
<Image className='Home-UserBox-BeanIcon' src={HBeanIcon} />
<Text>吹风豆：</Text>
<Text className='Home-UserBox-BeanCount'>
{hairDryerBean.toFixed(2)}
</Text>
</View>
<View className='Home-UserBox-BeanItem'>
<Image className='Home-UserBox-BeanIcon' src={TBeanIcon} />
<Text>通用豆：</Text>
<Text className='Home-UserBox-BeanCount'>
{commBean.toFixed(2)}
</Text>
</View>
{aimiItem && (
<View className='Home-UserBox-BeanItem'>
<Image className='Home-UserBox-BeanIcon' src={AimiIcon} />
<Text>艾米豆：</Text>
<Text className='Home-UserBox-BeanCount'>
{aimiItem ? aimiItem.money.toFixed(2) : '0.00'}
</Text>
</View>
)}
{filterBeanList &&
filterBeanList.length &&
filterBeanList.map(beanItem =>
beanItem.serviceId === BeanType.water ? (
<View
key={beanItem.serviceId}
className='Home-UserBox-BeanItem'>
<Image className='Home-UserBox-BeanIcon' src={WBeanIcon} />
<Text>饮水豆：</Text>
<Text className='Home-UserBox-BeanCount'>
{beanItem.money ? beanItem.money.toFixed(2) : '0.00'}
</Text>
</View>
) : beanItem.serviceId === BeanType.hairDryer ? (
<View
key={beanItem.serviceId}
className='Home-UserBox-BeanItem'>
<Image className='Home-UserBox-BeanIcon' src={HBeanIcon} />
<Text>吹风豆：</Text>
<Text className='Home-UserBox-BeanCount'>
{beanItem.money ? beanItem.money.toFixed(2) : '0.00'}
</Text>
</View>
) : beanItem.serviceId === BeanType.shower ? (
<View
key={beanItem.serviceId}
className='Home-UserBox-BeanItem'>
<Image className='Home-UserBox-BeanIcon' src={SBeanIcon} />
<Text>洗浴豆：</Text>
<Text className='Home-UserBox-BeanCount'>
{beanItem.money ? beanItem.money.toFixed(2) : '0.00'}
</Text>
</View>
) : null,
)}
{serviceList && serviceList.length % 2 ? null : (
<View className='Home-UserBox-BeanItem' />
)}
</View>
<View className='Home-UserBox-Order'>
<Text className='Home-UserBox-Order-text'>我的订单</Text>
<View className='Home-UserBox-Order-right' onClick={this.goOrder}>
......@@ -317,7 +413,7 @@ class Home extends Component {
icon={WaterIconBig}
text={''}
side='right'
onClick={this.goBarCode}
onClick={() => this.goBarCode(service.serviceId)}
/>
) : service.serviceId === 4 || service.serviceId === 12 ? (
<MenuIconBig
......@@ -326,7 +422,7 @@ class Home extends Component {
icon={DryerIconBig}
text={service.serviceName}
side='right'
onClick={this.goBarCode}
onClick={() => this.goBarCode(service.serviceId)}
/>
) : service.serviceId === 5 || service.serviceId === 10 ? (
<MenuIconBig
......@@ -355,14 +451,14 @@ class Home extends Component {
key={service.serviceId}
icon={WaterIconBlock}
text={service.serviceName}
onClick={this.goBarCode}
onClick={() => this.goBarCode(service.serviceId)}
/>
) : service.serviceId === 4 || service.serviceId === 12 ? (
<MenuIconBlock
key={service.serviceId}
icon={DryerIconBlock}
text={service.serviceName}
onClick={this.goBarCode}
onClick={() => this.goBarCode(service.serviceId)}
/>
) : service.serviceId === 5 || service.serviceId === 10 ? (
<MenuIconBlock
......@@ -388,15 +484,15 @@ class Home extends Component {
<MenuIconNormal
key={service.serviceId}
icon={WaterIconNormal}
text={'饮水'}
onClick={this.goBarCode}
text={service.serviceName}
onClick={() => this.goBarCode(service.serviceId)}
/>
) : service.serviceId === 4 || service.serviceId === 12 ? (
<MenuIconNormal
key={service.serviceId}
icon={DryerIconNormal}
text={'吹风'}
onClick={this.goBarCode}
text={service.serviceName}
onClick={() => this.goBarCode(service.serviceId)}
/>
) : service.serviceId === 5 || service.serviceId === 10 ? (
<MenuIconNormal
......@@ -409,7 +505,7 @@ class Home extends Component {
<MenuIconNormal
key={service.serviceId}
icon={DispenserIconNormal}
text={'饮水'}
text={service.serviceName}
onClick={this.goDispenser}
/>
) : null,
......
src/pages/Shower/Shower.tsx
......@@ -22,6 +22,12 @@ import { SOCKET_URL } from '@/constants';
import { BluetoothDevice } from '@/types/Shower/Shower';
import { updateBluetoothDevice } from './actions';
import { ab2str, str2ab } from '@/utils/arrayBuffer';
import { CustomerBeanAccountVo, PaymentAndActiveInfo } from '@/api/baseClass';
import Order from '@/types/Order/Order';
import { fetchPayOrder, fetchOrderDetailAndPay } from '@/api/order';
import OrderTitle from '../Order/components/OrderTitle/OrderTitle';
import OrderInfo from '../Order/components/OrderInfo/OrderInfo';
import OrderPayway from '../Order/components/OrderPayway/OrderPayway';
type DeviceInfo = {
deviceId: string;
......@@ -44,13 +50,18 @@ type IProps = PageStateProps & PageDispatchProps;
type PageState = {
bluetoothState: boolean;
task: Taro.SocketTask | null;
timer: number | undefined;
reConnectting: boolean;
deviceInfo: DeviceInfo;
sockedDone: boolean;
deviceDone: boolean;
showerState: boolean;
showPayOrder: boolean;
accounts: CustomerBeanAccountVo[];
orderInfo: Order;
payInfos: {
paymentAndActiveInfos: PaymentAndActiveInfo[];
paymentConfId: number;
};
};
const StopCode = 1000;
......@@ -59,6 +70,9 @@ interface Shower {
state: PageState;
}
let timer: number | null = null;
let reConnectting: boolean = false;
let socketTask: Taro.SocketTask | null = null;
@connect(
({ userinfo, Shower }) => ({
userinfo,
......@@ -79,9 +93,6 @@ class Shower extends Component {
super(props);
this.state = {
bluetoothState: false,
task: null,
timer: undefined,
reConnectting: false,
sockedDone: false,
deviceDone: false,
showerState: false,
......@@ -94,12 +105,49 @@ class Shower extends Component {
writeId: '',
readId: '',
},
showPayOrder: false,
accounts: [],
orderInfo: {
actualMoney: 0,
areaId: 0,
areaName: '',
consumeType: '',
createAt: '',
customerCellphone: '',
customerId: 0,
customerName: '',
deductionBean: 0,
deductionMoney: 0,
equipmentNum: '',
equipmentPosition: '',
id: 0,
operateId: 0,
operateName: '',
operationMode: '',
orderName: '',
orderNumber: '',
orderState: '',
outTradeNo: '',
payType: '',
payableMoney: 0,
serviceId: 0,
serviceName: '',
thirdDiscountMoney: 0,
thirdTradeNumber: '',
updateDate: '',
},
payInfos: {
paymentAndActiveInfos: [],
paymentConfId: 0,
},
};
}
onShareAppMessage = shareHandle;
componentWillMount() {
this.getPayState();
this.openBluetooth();
this.connectDeviceSocket();
this.checkUsingDevice();
......@@ -107,19 +155,58 @@ class Shower extends Component {
componentWillUnmount() {
this.closeBluetooth();
this.closeDeviceSocket();
Taro.closeSocket();
timer && clearTimeout(timer);
timer = null;
reConnectting = false;
}
getPayState() {
const { userinfo } = this.props;
fetchPayOrder({
customerId: userinfo.customerId,
})
.then(res => {
if (res.data.length) {
this.fetchOrder(res.data[0].id);
this.setState({ showPayOrder: true });
}
})
.catch(err => {
console.log(err);
});
}
fetchOrder(id: number) {
return fetchOrderDetailAndPay({
id,
})
.then(res => {
const { accounts, orderInfo, payInfos } = res;
this.setState({
accounts: accounts,
orderInfo: orderInfo,
payInfos: payInfos,
});
})
.catch(err => {
console.log(err);
});
}
payDoneHandle() {
this.setState({
showPayOrder: false,
});
}
connectDeviceSocket() {
connectSocket(SOCKET_URL).then(task => {
socketTask = task;
task.onOpen(() => {
console.log('onOpen');
const { reConnectting } = this.state;
if (reConnectting) {
this.reConnectDeviceSocket(true);
}
this.setState({
task: task,
sockedDone: true,
});
task.send({ data: str2ab('{}') });
......@@ -149,14 +236,15 @@ class Shower extends Component {
}
});
task.onClose(e => {
console.log('socked关闭', e);
console.log('socked关闭', e, reConnectting, timer);
this.setState({
task: null,
sockedDone: false,
});
socketTask = null;
if (e.code === StopCode) {
console.log('正确结束socket连接');
} else {
console.log('开始重连socket');
this.reConnectDeviceSocket(false);
}
});
......@@ -164,13 +252,10 @@ class Shower extends Component {
}
reConnectDeviceSocket(cancel: boolean) {
const { timer, reConnectting } = this.state;
if (cancel) {
clearTimeout(timer);
this.setState({
timer: null,
reConnectting: false,
});
timer && clearTimeout(timer);
timer = null;
reConnectting = false;
return;
}
console.log(reConnectting, timer);
......@@ -179,57 +264,56 @@ class Shower extends Component {
this.connectDeviceSocket();
} else if (timer) {
clearTimeout(timer);
this.setState({
timer: null,
reConnectting: false,
});
reConnectting = false;
timer = null;
console.log('请保证网络正常');
Taro.showModal({
title: '警告',
content: '请保持网络畅通正常',
});
} else {
let newTimer = setTimeout(() => {
this.setState({
reConnectting: false,
});
timer = setTimeout(() => {
reConnectting = false;
}, 10000);
reConnectting = true;
console.log(reConnectting, timer);
this.setState({
timer: newTimer,
reConnectting: true,
});
this.connectDeviceSocket();
}
}
sendDeviceCode() {
const { task, sockedDone, deviceDone } = this.state;
const { sockedDone, deviceDone } = this.state;
const { bluetoothDevice } = this.props;
console.log('socket状态：', sockedDone, '蓝牙状态：', deviceDone);
if (sockedDone && task && deviceDone) {
if (sockedDone && socketTask && deviceDone) {
let deviceData = '{<' + bluetoothDevice.code + '>}';
console.log('发送设备编号:', deviceData);
task.send({
console.log('<---发送设备编号:', deviceData);
socketTask.send({
data: str2ab(deviceData),
success: msg => {
console.log('发送设备编号:', msg, '--->');
},
fail: err => {
console.log('发送设备编号:', err, '--->');
},
});
}
}
closeDeviceSocket() {
const { task } = this.state;
console.log('in close', task);
if (task) {
task.close({
console.log('in close', socketTask, timer);
if (socketTask) {
socketTask.close({
code: StopCode,
complete: () => {
this.setState({
task: null,
});
socketTask = null;
},
});
}
if (timer) {
clearTimeout(timer);
}
}
checkUsingDevice() {
......@@ -421,15 +505,20 @@ class Shower extends Component {
this.closeDeviceSocket();
this.closeBluetoothConnection();
} else {
const { task } = this.state;
if (
datastr.substring(0, 1) === '{' &&
datastr.substring(datastr.length - 1, datastr.length) === '}'
) {
console.log('发送完整数据： ', datastr);
if (task) {
task.send({
console.log('<---发送完整数据： ', datastr);
if (socketTask) {
socketTask.send({
data: str2ab(datastr),
success: msg => {
console.log('发送完整数据：', msg, '--->');
},
fail: err => {
console.log('发送完整数据：', err, '--->');
},
});
}
} else if (datastr.substring(0, 1) === '{') {
......@@ -441,10 +530,16 @@ class Shower extends Component {
) {
abStr += datastr;
console.log('接受尾部数据后： ', abStr);
console.log('发送完整数据： ', abStr);
if (task) {
task.send({
console.log('<---发送完整数据： ', abStr);
if (socketTask) {
socketTask.send({
data: str2ab(abStr),
success: msg => {
console.log('发送完整数据：', msg, '--->');
},
fail: err => {
console.log('发送完整数据：', err, '--->');
},
});
}
abStr = '';
......@@ -573,11 +668,16 @@ class Shower extends Component {
msg.substring(0, 1) === '{' &&
msg.substring(msg.length - 1, msg.length) === '}'
) {
const { task } = this.state;
console.log('发送给socket完整数据： ', msg);
task &&
task.send({
console.log('<---发送给socket完整数据： ', msg);
socketTask &&
socketTask.send({
data: str2ab(msg),
success: msg => {
console.log('发送给socket完整数据：', msg, '--->');
},
fail: err => {
console.log('发送给socket完整数据：', err, '--->');
},
});
} else if (msg.substring(0, 1) === '{') {
console.log('接受头部数据： ', msg);
......@@ -588,12 +688,17 @@ class Shower extends Component {
) {
abStr += msg;
console.log('接受尾部数据后： ', abStr);
console.log('发送给socket完整数据： ', abStr);
console.log('<---发送给socket完整数据： ', abStr);
const { task } = this.state;
task &&
task.send({
socketTask &&
socketTask.send({
data: str2ab(abStr),
success: msg => {
console.log('发送给socket完整数据：', msg, '--->');
},
fail: err => {
console.log('发送给socket完整数据：', err, '--->');
},
});
abStr = '';
} else {
......@@ -608,8 +713,8 @@ class Shower extends Component {
});
}
startUseShower(reConnect) {
if (reConnect) {
startUseShower(reConnect: boolean) {
if (!reConnect) {
Taro.showLoading({
title: '开启中',
mask: true,
......@@ -625,7 +730,15 @@ class Shower extends Component {
.then(res => {
const deviceId = res.deviceId;
const services = res.services;
let service = services[services.length - 1];
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: {
......@@ -685,52 +798,74 @@ class Shower extends Component {
render() {
const {
bluetoothDevice: { code, position },
userinfo,
} = this.props;
const { showerState } = this.state;
const {
showerState,
showPayOrder,
orderInfo,
accounts,
payInfos,
} = this.state;
return (
<View className='Shower'>
<View className='equipment-info-box'>
<View className='equipment-info'>
{code ? (
<View className='equipment-title matched'>已匹配设备</View>
) : (
<View className='equipment-title'>未匹配设备</View>
)}
<Image className='equipment-line' src={LineImg} />
{code ? (
<View className='equipment-list'>
<View className='equipment-item'>
<Text className='equipment-label'>设备编号：</Text>
<Text className='equipment-value'>{code}</Text>
{showPayOrder && (
<View className='OrderBox'>
<OrderTitle price={orderInfo.payableMoney} />
<OrderInfo orderInfo={orderInfo} />
<OrderPayway
onPayDoneCallback={this.payDoneHandle}
userinfo={userinfo}
accounts={accounts}
orderInfo={orderInfo}
payInfos={payInfos}
/>
</View>
)}
<View className={showPayOrder ? 'blur' : ''}>
<View className='equipment-info-box'>
<View className='equipment-info'>
{code ? (
<View className='equipment-title matched'>已匹配设备</View>
) : (
<View className='equipment-title'>未匹配设备</View>
)}
<Image className='equipment-line' src={LineImg} />
{code ? (
<View className='equipment-list'>
<View className='equipment-item'>
<Text className='equipment-label'>设备编号：</Text>
<Text className='equipment-value'>{code}</Text>
</View>
<View className='equipment-item'>
<Text className='equipment-label'>设备位置：</Text>
<Text className='equipment-value'>{position}</Text>
</View>
</View>
<View className='equipment-item'>
<Text className='equipment-label'>设备位置：</Text>
<Text className='equipment-value'>{position}</Text>
) : (
<View v-loading='loading' className='equipment-noCode'>
点击左下角扫一扫完成匹配
</View>
</View>
) : (
<View v-loading='loading' className='equipment-noCode'>
点击左下角扫一扫完成匹配
</View>
)}
)}
</View>
</View>
</View>
<View className='btn-box'>
<Image
className='shower-scan-btn'
src={ScanIcon}
onClick={this.scanEquipment}
/>
{code && !showerState ? (
<View className='btn-box'>
<Image
className='shower-start-btn'
src={ShowerStart}
onClick={() => this.startUseShower(false)}
className='shower-scan-btn'
src={ScanIcon}
onClick={this.scanEquipment}
/>
) : (
<Image className='shower-start-btn' src={ShowerCantStart} />
)}
{code && !showerState ? (
<Image
className='shower-start-btn'
src={ShowerStart}
onClick={() => this.startUseShower(false)}
/>
) : (
<Image className='shower-start-btn' src={ShowerCantStart} />
)}
</View>
</View>
</View>
);
......
src/pages/WaterDispenser/WaterDispenser.tsx
......@@ -21,6 +21,12 @@ import { Customer } from '@/types/Customer/Customer';
import { connect } from '@tarojs/redux';
import { ComponentClass } from 'react';
import { ResponseDataEntity } from '@/api';
import { CustomerBeanAccountVo, PaymentAndActiveInfo } from '@/api/baseClass';
import Order from '@/types/Order/Order';
import { fetchOrderDetailAndPay, fetchPayOrder } from '@/api/order';
import OrderTitle from '../Order/components/OrderTitle/OrderTitle';
import OrderInfo from '../Order/components/OrderInfo/OrderInfo';
import OrderPayway from '../Order/components/OrderPayway/OrderPayway';
export type DeviceInfo = {
code: string;
......@@ -36,6 +42,14 @@ type PageState = {
useList: DeviceInfo[];
timer: number | null;
showToggleTag: boolean;
showPayOrder: boolean;
accounts: CustomerBeanAccountVo[];
orderInfo: Order;
payInfos: {
paymentAndActiveInfos: PaymentAndActiveInfo[];
paymentConfId: number;
};
};
type IProps = PageStateProps;
......@@ -44,6 +58,7 @@ interface WaterDispenser {
props: IProps;
state: PageState;
}
@connect(({ userinfo }) => ({
userinfo,
}))
......@@ -59,10 +74,47 @@ class WaterDispenser extends Component {
useList: [],
timer: null,
showToggleTag: false,
showPayOrder: false,
accounts: [],
orderInfo: {
actualMoney: 0,
areaId: 0,
areaName: '',
consumeType: '',
createAt: '',
customerCellphone: '',
customerId: 0,
customerName: '',
deductionBean: 0,
deductionMoney: 0,
equipmentNum: '',
equipmentPosition: '',
id: 0,
operateId: 0,
operateName: '',
operationMode: '',
orderName: '',
orderNumber: '',
orderState: '',
outTradeNo: '',
payType: '',
payableMoney: 0,
serviceId: 0,
serviceName: '',
thirdDiscountMoney: 0,
thirdTradeNumber: '',
updateDate: '',
},
payInfos: {
paymentAndActiveInfos: [],
paymentConfId: 0,
},
};
}
componentWillMount() {
this.getPayState();
this.getUsedEquipment();
this.fetchPageConfig();
}
......@@ -71,6 +123,43 @@ class WaterDispenser extends Component {
this.clearTimer();
}
getPayState() {
const { userinfo } = this.props;
fetchPayOrder({
customerId: userinfo.customerId,
})
.then(res => {
if (res.data.length) {
this.fetchOrder(res.data[0].id);
this.setState({ showPayOrder: true });
}
})
.catch(err => {
console.log(err);
});
}
fetchOrder(id: number) {
return fetchOrderDetailAndPay({
id,
})
.then(res => {
const { accounts, orderInfo, payInfos } = res;
this.setState({
accounts: accounts,
orderInfo: orderInfo,
payInfos: payInfos,
});
})
.catch(err => {
console.log(err);
});
}
payDoneHandle() {
this.setState({
showPayOrder: false,
});
}
fetchPageConfig() {
const { userinfo } = this.props;
fetchPageConfig({
......@@ -113,7 +202,7 @@ class WaterDispenser extends Component {
toggleCodeState() {
Taro.redirectTo({
url: `/pages/BarCode/BarCode?backPage=${encodeURIComponent(
url: `/pages/BarCode/BarCode?serviceId=9&backPage=${encodeURIComponent(
'/pages/WaterDispenser/WaterDispenser',
)}`,
});
......@@ -225,7 +314,6 @@ class WaterDispenser extends Component {
);
})
.catch(err => {
Taro.hideLoading();
console.error('开启失败： ', err);
});
}
......@@ -251,45 +339,66 @@ class WaterDispenser extends Component {
deviceInfo: { code, position },
useList,
showToggleTag,
showPayOrder,
orderInfo,
accounts,
payInfos,
} = this.state;
const { userinfo } = this.props;
return (
<View className='WaterDispenser'>
{showToggleTag && (
<View className='WaterDispenser-tg' onClick={this.toggleCodeState}>
<Image className='icon' src={CodeIcon} />
<Text className='text'>显示条码</Text>
{showPayOrder && (
<View className='OrderBox'>
<OrderTitle price={orderInfo.payableMoney} />
<OrderInfo orderInfo={orderInfo} />
<OrderPayway
onPayDoneCallback={this.payDoneHandle}
userinfo={userinfo}
accounts={accounts}
orderInfo={orderInfo}
payInfos={payInfos}
/>
</View>
)}
<DeviceInfo size='small' code={code} position={position} />
<View className={showPayOrder ? 'blur' : ''}>
{showToggleTag && (
<View className='WaterDispenser-tg' onClick={this.toggleCodeState}>
<Image className='icon' src={CodeIcon} />
<Text className='text'>显示条码</Text>
</View>
)}
<DeviceInfo size='small' code={code} position={position} />
<View className='btn-box'>
<Image
className='shower-scan-btn'
src={ScanIcon}
onClick={this.scanEquipment}
/>
{code && !waterUsingState ? (
<View className='btn-box'>
<Image
className='shower-start-btn'
src={StartIcon}
onClick={this.waterBeginning}
className='shower-scan-btn'
src={ScanIcon}
onClick={this.scanEquipment}
/>
) : (
<Image className='shower-start-btn' src={CantStartIcon} />
)}
</View>
{code && !waterUsingState ? (
<Image
className='shower-start-btn'
src={StartIcon}
onClick={this.waterBeginning}
/>
) : (
<Image className='shower-start-btn' src={CantStartIcon} />
)}
</View>
<View className='LastUseList'>
<View className='LastUseList-title bb'>最近使用</View>
{useList.map(device => (
<EquipmentItem
key={device.code}
ex-class='bb'
code={device.code}
position={device.position}
onClick={this.getSelectedEquipment}
/>
))}
<View className='LastUseList'>
<View className='LastUseList-title bb'>最近使用</View>
{useList.map(device => (
<EquipmentItem
key={device.code}
ex-class='bb'
code={device.code}
position={device.position}
onClick={this.getSelectedEquipment}
/>
))}
</View>
</View>
</View>
);
......
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