Skip to content

W
wx-school-app
Commit 155d8039 by 姜雷
Options

进入服务前添加订单查询

parent 3f88493f
Showing with 453 additions and 116 deletions
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/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
......@@ -279,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} />
......@@ -299,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/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;
......@@ -48,6 +54,14 @@ type PageState = {
sockedDone: boolean;
deviceDone: boolean;
showerState: boolean;
showPayOrder: boolean;
accounts: CustomerBeanAccountVo[];
orderInfo: Order;
payInfos: {
paymentAndActiveInfos: PaymentAndActiveInfo[];
paymentConfId: number;
};
};
const StopCode = 1000;
......@@ -91,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();
......@@ -110,6 +161,43 @@ class Shower extends Component {
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;
......@@ -702,52 +790,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({
......@@ -250,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