Skip to content

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

合并冲突

parents 342f78cb e204645e
Showing with 617 additions and 144 deletions
package.json
{ {
"name": "wx-school-app", "name": "wx-school-app",
"version": "1.0.0", "version": "1.0.6",
"private": true, "private": true,
"description": "", "description": "",
"scripts": { "scripts": {
......
src/app.scss
...@@ -100,3 +100,16 @@ button[disabled]:not([type]) { ...@@ -100,3 +100,16 @@ button[disabled]:not([type]) {
background-color: rgba(25, 25, 25, 0.2); background-color: rgba(25, 25, 25, 0.2);
z-index: 99; z-index: 99;
} }
.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 @@ ...@@ -16,13 +16,13 @@
} }
&.left { &.left {
.text-box { .text-box {
margin-left: 114px; margin-left: 50px;
} }
} }
&.right { &.right {
.text-box { .text-box {
position: absolute; position: absolute;
right: 114px; right: 50px;
} }
} }
.text { .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 { ...@@ -27,18 +27,6 @@ page {
color: #fff; 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 { .BarCodeBox {
position: relative; position: relative;
background-color: #fff; background-color: #fff;
......
src/pages/BarCode/BarCode.tsx
...@@ -223,8 +223,18 @@ class BarCode extends Component { ...@@ -223,8 +223,18 @@ class BarCode extends Component {
} }
drawBarCode() { drawBarCode() {
const { userinfo } = this.props; 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) { 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('BarCode', idBar, 646, 188);
wxbarcode.barcode('BarCodeBig', idBar, 700, 364); wxbarcode.barcode('BarCodeBig', idBar, 700, 364);
} else { } else {
...@@ -269,13 +279,6 @@ class BarCode extends Component { ...@@ -269,13 +279,6 @@ class BarCode extends Component {
} = this.state; } = this.state;
return ( return (
<View className='BarCode'> <View className='BarCode'>
{showBackTag && (
<View className='BackTag' onClick={this.goBackPage}>
<Image className='icon' src={CodeIcon} />
<Text className='text'>隐藏条码</Text>
</View>
)}
{showPayOrder && ( {showPayOrder && (
<View className='OrderBox'> <View className='OrderBox'>
<OrderTitle price={orderInfo.payableMoney} /> <OrderTitle price={orderInfo.payableMoney} />
...@@ -289,11 +292,14 @@ class BarCode extends Component { ...@@ -289,11 +292,14 @@ class BarCode extends Component {
/> />
</View> </View>
)} )}
<View className={showPayOrder ? 'blur' : ''}>
<View {showBackTag && (
className={`BarCodeBox ${showPayOrder ? 'blur' : ''} ${ <View className='BackTag' onClick={this.goBackPage}>
showBig ? 'BarCodeBoxBig' : '' <Image className='icon' src={CodeIcon} />
}`}> <Text className='text'>隐藏条码</Text>
</View>
)}
<View className={`BarCodeBox ${showBig ? 'BarCodeBoxBig' : ''}`}>
<Image <Image
className='BarCodeBox-refresh' className='BarCodeBox-refresh'
src={RefreshIcon} src={RefreshIcon}
...@@ -318,11 +324,11 @@ class BarCode extends Component { ...@@ -318,11 +324,11 @@ class BarCode extends Component {
/> />
</View> </View>
</View> </View>
<View className='warnning'> <View className='warnning'>
如扫描条码终端无响应，请刷新条码后重试！ 如扫描条码终端无响应，请刷新条码后重试！
</View> </View>
</View> </View>
</View>
); );
} }
} }
......
src/pages/Home/Home.scss
...@@ -30,12 +30,15 @@ ...@@ -30,12 +30,15 @@
.Home-UserBox { .Home-UserBox {
position: relative; position: relative;
height: 390px; // height: 390px;
padding: 0 0 40px; padding: 0 0 40px;
margin: 0 32px; margin: 0 32px;
box-sizing: content-box; box-sizing: content-box;
.bg { .bg {
height: 390px; height: 390px;
&.big {
height: 428px;
}
} }
.Home-UserBox-Setting { .Home-UserBox-Setting {
position: absolute; position: absolute;
...@@ -73,12 +76,14 @@ ...@@ -73,12 +76,14 @@
margin: 0 auto; margin: 0 auto;
} }
.Home-UserBox-Bean { .Home-UserBox-Bean {
padding: 32px 40px 0; padding: 32px 40px 70px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
flex-flow: wrap;
font-size: 24px; font-size: 24px;
color: #666; color: #666;
.Home-UserBox-BeanItem { .Home-UserBox-BeanItem {
width: 40%;
display: flex; display: flex;
align-items: center; align-items: center;
} }
......
src/pages/Home/Home.tsx
...@@ -7,8 +7,10 @@ import ArrowIcon from '../../images/home/icon_dingdan@2x.png'; ...@@ -7,8 +7,10 @@ import ArrowIcon from '../../images/home/icon_dingdan@2x.png';
import AnnouncementBg from '../../images/home/img_gonggao_bg@2x.png'; import AnnouncementBg from '../../images/home/img_gonggao_bg@2x.png';
import MoreIcon from '../../images/home/icon_more_right@2x.png'; import MoreIcon from '../../images/home/icon_more_right@2x.png';
import SettingIcon from '../../images/home/icon_shezhi@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 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 UserHeaderM from '../../images/home/img_boy_touxiang@2x.png';
import UserHeaderF from '../../images/home/img_girl_touxiang@2x.png'; import UserHeaderF from '../../images/home/img_girl_touxiang@2x.png';
import WaterIconNormal from '../../images/menu/ic_zizhu@2x.png'; import WaterIconNormal from '../../images/menu/ic_zizhu@2x.png';
...@@ -41,6 +43,12 @@ import MenuIconNormal from '@/components/MenuIcon/normal/MenuIconNormal'; ...@@ -41,6 +43,12 @@ import MenuIconNormal from '@/components/MenuIcon/normal/MenuIconNormal';
import MenuIconBlock from '@/components/MenuIcon/block/MenuIconBlock'; import MenuIconBlock from '@/components/MenuIcon/block/MenuIconBlock';
import MenuIconBig from '@/components/MenuIcon/big/MenuIconBig'; import MenuIconBig from '@/components/MenuIcon/big/MenuIconBig';
enum BeanType {
shower = 'shower',
hairDryer = 'hairDryer',
water = 'water',
}
type PageStateProps = { type PageStateProps = {
userinfo: Customer; userinfo: Customer;
}; };
...@@ -48,12 +56,17 @@ type PageDispatchProps = { ...@@ -48,12 +56,17 @@ type PageDispatchProps = {
updateUserInfo: (e: UserState) => void; updateUserInfo: (e: UserState) => void;
}; };
type BeanAccount = {
money: number;
serviceId: string;
};
type PageState = { type PageState = {
barMenuVisiable: boolean; barMenuVisiable: boolean;
commBean: number; beanAccount: BeanAccount[];
hairDryerBean: number;
annItem: SectionItem; annItem: SectionItem;
serviceList: Service[]; serviceList: Service[];
filterBeanList: BeanAccount[];
}; };
type IProps = PageStateProps & PageDispatchProps; type IProps = PageStateProps & PageDispatchProps;
...@@ -76,14 +89,9 @@ class Home extends Component { ...@@ -76,14 +89,9 @@ class Home extends Component {
super(props); super(props);
this.state = { this.state = {
barMenuVisiable: false, barMenuVisiable: false,
commBean: 0.0, beanAccount: [],
hairDryerBean: 0.0, serviceList: [],
serviceList: [ filterBeanList: [],
// { serviceId: 3, serviceName: '饮水' },
// { serviceId: 4, serviceName: '吹风' },
// { serviceId: 5, serviceName: '洗浴' },
// { serviceId: 9, serviceName: '壁挂饮水' },
],
annItem: { annItem: {
id: 0, id: 0,
styleType: '', styleType: '',
...@@ -106,26 +114,12 @@ class Home extends Component { ...@@ -106,26 +114,12 @@ class Home extends Component {
} }
componentDidShow() { componentDidShow() {
this.getBeanCountData(); this.getInitData();
} }
getInitData() { getInitData() {
this.getBeanCountData(); this.getBeanCountData();
this.getServiceList(); this.getServiceList();
const { userinfo } = this.props; this.getAnn();
fetchAnn({
campusId: userinfo.areaId,
customerId: userinfo.customerId,
})
.then(res => {
if (res) {
this.setState({
annItem: res,
});
}
})
.catch(err => {
console.error(err);
});
} }
getServiceList() { getServiceList() {
...@@ -135,9 +129,14 @@ class Home extends Component { ...@@ -135,9 +129,14 @@ class Home extends Component {
areaId: userinfo.areaId, areaId: userinfo.areaId,
type: ServiceTypeParams.wechatAppV, type: ServiceTypeParams.wechatAppV,
}).then(res => { }).then(res => {
console.log(res);
this.setState({ this.setState({
serviceList: res.data, serviceList: res.data,
}); });
const { beanAccount } = this.state;
if (beanAccount && beanAccount.length) {
this.getFilterBeanList();
}
}); });
} }
} }
...@@ -152,18 +151,77 @@ class Home extends Component { ...@@ -152,18 +151,77 @@ class Home extends Component {
}) })
.then(res => { .then(res => {
const data = res.data; 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({ this.setState({
commBean, beanAccount: data,
hairDryerBean,
}); });
const { serviceList } = this.state;
if (serviceList && serviceList.length) {
this.getFilterBeanList();
}
}) })
.catch(console.error); .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() { goSetting() {
Taro.navigateTo({ Taro.navigateTo({
url: '/pages/UserSetting/UserSetting', url: '/pages/UserSetting/UserSetting',
...@@ -187,9 +245,9 @@ class Home extends Component { ...@@ -187,9 +245,9 @@ class Home extends Component {
}); });
} }
goBarCode() { goBarCode(serviceId: number) {
Taro.navigateTo({ Taro.navigateTo({
url: '/pages/BarCode/BarCode', url: `/pages/BarCode/BarCode?serviceId=${serviceId}`,
}); });
} }
...@@ -235,12 +293,13 @@ class Home extends Component { ...@@ -235,12 +293,13 @@ class Home extends Component {
render() { render() {
const { userinfo } = this.props; const { userinfo } = this.props;
const { const {
commBean, beanAccount,
hairDryerBean,
annItem, annItem,
barMenuVisiable, barMenuVisiable,
serviceList, serviceList,
filterBeanList,
} = this.state; } = this.state;
let aimiItem = beanAccount.find(item => item.serviceId === '0');
return ( return (
<View className='Home'> <View className='Home'>
{barMenuVisiable ? ( {barMenuVisiable ? (
...@@ -260,7 +319,10 @@ class Home extends Component { ...@@ -260,7 +319,10 @@ class Home extends Component {
src={SettingIcon} src={SettingIcon}
onClick={this.toggleBarMenu} 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-info'>
<View className='Home-UserBox-other'> <View className='Home-UserBox-other'>
<View className='Home-UserBox-name'>{userinfo.customerName}</View> <View className='Home-UserBox-name'>{userinfo.customerName}</View>
...@@ -285,21 +347,55 @@ class Home extends Component { ...@@ -285,21 +347,55 @@ class Home extends Component {
</View> </View>
<View className='Home-UserBox-line' /> <View className='Home-UserBox-line' />
<View className='Home-UserBox-Bean'> <View className='Home-UserBox-Bean'>
{aimiItem && (
<View className='Home-UserBox-BeanItem'> <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} /> <Image className='Home-UserBox-BeanIcon' src={HBeanIcon} />
<Text>吹风豆：</Text> <Text>吹风豆：</Text>
<Text className='Home-UserBox-BeanCount'> <Text className='Home-UserBox-BeanCount'>
{hairDryerBean.toFixed(2)} {beanItem.money ? beanItem.money.toFixed(2) : '0.00'}
</Text> </Text>
</View> </View>
<View className='Home-UserBox-BeanItem'> ) : beanItem.serviceId === BeanType.shower ? (
<Image className='Home-UserBox-BeanIcon' src={TBeanIcon} /> <View
<Text>通用豆：</Text> key={beanItem.serviceId}
className='Home-UserBox-BeanItem'>
<Image className='Home-UserBox-BeanIcon' src={SBeanIcon} />
<Text>洗浴豆：</Text>
<Text className='Home-UserBox-BeanCount'> <Text className='Home-UserBox-BeanCount'>
{commBean.toFixed(2)} {beanItem.money ? beanItem.money.toFixed(2) : '0.00'}
</Text> </Text>
</View> </View>
) : null,
)}
{serviceList && serviceList.length % 2 ? null : (
<View className='Home-UserBox-BeanItem' />
)}
</View> </View>
<View className='Home-UserBox-Order'> <View className='Home-UserBox-Order'>
<Text className='Home-UserBox-Order-text'>我的订单</Text> <Text className='Home-UserBox-Order-text'>我的订单</Text>
<View className='Home-UserBox-Order-right' onClick={this.goOrder}> <View className='Home-UserBox-Order-right' onClick={this.goOrder}>
...@@ -317,7 +413,7 @@ class Home extends Component { ...@@ -317,7 +413,7 @@ class Home extends Component {
icon={WaterIconBig} icon={WaterIconBig}
text={''} text={''}
side='right' side='right'
onClick={this.goBarCode} onClick={() => this.goBarCode(service.serviceId)}
/> />
) : service.serviceId === 4 || service.serviceId === 12 ? ( ) : service.serviceId === 4 || service.serviceId === 12 ? (
<MenuIconBig <MenuIconBig
...@@ -326,7 +422,7 @@ class Home extends Component { ...@@ -326,7 +422,7 @@ class Home extends Component {
icon={DryerIconBig} icon={DryerIconBig}
text={service.serviceName} text={service.serviceName}
side='right' side='right'
onClick={this.goBarCode} onClick={() => this.goBarCode(service.serviceId)}
/> />
) : service.serviceId === 5 || service.serviceId === 10 ? ( ) : service.serviceId === 5 || service.serviceId === 10 ? (
<MenuIconBig <MenuIconBig
...@@ -355,14 +451,14 @@ class Home extends Component { ...@@ -355,14 +451,14 @@ class Home extends Component {
key={service.serviceId} key={service.serviceId}
icon={WaterIconBlock} icon={WaterIconBlock}
text={service.serviceName} text={service.serviceName}
onClick={this.goBarCode} onClick={() => this.goBarCode(service.serviceId)}
/> />
) : service.serviceId === 4 || service.serviceId === 12 ? ( ) : service.serviceId === 4 || service.serviceId === 12 ? (
<MenuIconBlock <MenuIconBlock
key={service.serviceId} key={service.serviceId}
icon={DryerIconBlock} icon={DryerIconBlock}
text={service.serviceName} text={service.serviceName}
onClick={this.goBarCode} onClick={() => this.goBarCode(service.serviceId)}
/> />
) : service.serviceId === 5 || service.serviceId === 10 ? ( ) : service.serviceId === 5 || service.serviceId === 10 ? (
<MenuIconBlock <MenuIconBlock
...@@ -388,15 +484,15 @@ class Home extends Component { ...@@ -388,15 +484,15 @@ class Home extends Component {
<MenuIconNormal <MenuIconNormal
key={service.serviceId} key={service.serviceId}
icon={WaterIconNormal} icon={WaterIconNormal}
text={'饮水'} text={service.serviceName}
onClick={this.goBarCode} onClick={() => this.goBarCode(service.serviceId)}
/> />
) : service.serviceId === 4 || service.serviceId === 12 ? ( ) : service.serviceId === 4 || service.serviceId === 12 ? (
<MenuIconNormal <MenuIconNormal
key={service.serviceId} key={service.serviceId}
icon={DryerIconNormal} icon={DryerIconNormal}
text={'吹风'} text={service.serviceName}
onClick={this.goBarCode} onClick={() => this.goBarCode(service.serviceId)}
/> />
) : service.serviceId === 5 || service.serviceId === 10 ? ( ) : service.serviceId === 5 || service.serviceId === 10 ? (
<MenuIconNormal <MenuIconNormal
...@@ -409,7 +505,7 @@ class Home extends Component { ...@@ -409,7 +505,7 @@ class Home extends Component {
<MenuIconNormal <MenuIconNormal
key={service.serviceId} key={service.serviceId}
icon={DispenserIconNormal} icon={DispenserIconNormal}
text={'饮水'} text={service.serviceName}
onClick={this.goDispenser} onClick={this.goDispenser}
/> />
) : null, ) : null,
......
src/pages/Shower/Shower.tsx
...@@ -22,6 +22,12 @@ import { SOCKET_URL } from '@/constants'; ...@@ -22,6 +22,12 @@ import { SOCKET_URL } from '@/constants';
import { BluetoothDevice } from '@/types/Shower/Shower'; import { BluetoothDevice } from '@/types/Shower/Shower';
import { updateBluetoothDevice } from './actions'; import { updateBluetoothDevice } from './actions';
import { ab2str, str2ab } from '@/utils/arrayBuffer'; 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 = { type DeviceInfo = {
deviceId: string; deviceId: string;
...@@ -44,13 +50,18 @@ type IProps = PageStateProps & PageDispatchProps; ...@@ -44,13 +50,18 @@ type IProps = PageStateProps & PageDispatchProps;
type PageState = { type PageState = {
bluetoothState: boolean; bluetoothState: boolean;
task: Taro.SocketTask | null;
timer: number | undefined;
reConnectting: boolean;
deviceInfo: DeviceInfo; deviceInfo: DeviceInfo;
sockedDone: boolean; sockedDone: boolean;
deviceDone: boolean; deviceDone: boolean;
showerState: boolean; showerState: boolean;
showPayOrder: boolean;
accounts: CustomerBeanAccountVo[];
orderInfo: Order;
payInfos: {
paymentAndActiveInfos: PaymentAndActiveInfo[];
paymentConfId: number;
};
}; };
const StopCode = 1000; const StopCode = 1000;
...@@ -59,6 +70,9 @@ interface Shower { ...@@ -59,6 +70,9 @@ interface Shower {
state: PageState; state: PageState;
} }
let timer: number | null = null;
let reConnectting: boolean = false;
let socketTask: Taro.SocketTask | null = null;
@connect( @connect(
({ userinfo, Shower }) => ({ ({ userinfo, Shower }) => ({
userinfo, userinfo,
...@@ -79,9 +93,6 @@ class Shower extends Component { ...@@ -79,9 +93,6 @@ class Shower extends Component {
super(props); super(props);
this.state = { this.state = {
bluetoothState: false, bluetoothState: false,
task: null,
timer: undefined,
reConnectting: false,
sockedDone: false, sockedDone: false,
deviceDone: false, deviceDone: false,
showerState: false, showerState: false,
...@@ -94,12 +105,49 @@ class Shower extends Component { ...@@ -94,12 +105,49 @@ class Shower extends Component {
writeId: '', writeId: '',
readId: '', 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; onShareAppMessage = shareHandle;
componentWillMount() { componentWillMount() {
this.getPayState();
this.openBluetooth(); this.openBluetooth();
this.connectDeviceSocket(); this.connectDeviceSocket();
this.checkUsingDevice(); this.checkUsingDevice();
...@@ -107,19 +155,58 @@ class Shower extends Component { ...@@ -107,19 +155,58 @@ class Shower extends Component {
componentWillUnmount() { componentWillUnmount() {
this.closeBluetooth(); 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() { connectDeviceSocket() {
connectSocket(SOCKET_URL).then(task => { connectSocket(SOCKET_URL).then(task => {
socketTask = task;
task.onOpen(() => { task.onOpen(() => {
console.log('onOpen'); console.log('onOpen');
const { reConnectting } = this.state;
if (reConnectting) { if (reConnectting) {
this.reConnectDeviceSocket(true); this.reConnectDeviceSocket(true);
} }
this.setState({ this.setState({
task: task,
sockedDone: true, sockedDone: true,
}); });
task.send({ data: str2ab('{}') }); task.send({ data: str2ab('{}') });
...@@ -149,14 +236,15 @@ class Shower extends Component { ...@@ -149,14 +236,15 @@ class Shower extends Component {
} }
}); });
task.onClose(e => { task.onClose(e => {
console.log('socked关闭', e); console.log('socked关闭', e, reConnectting, timer);
this.setState({ this.setState({
task: null,
sockedDone: false, sockedDone: false,
}); });
socketTask = null;
if (e.code === StopCode) { if (e.code === StopCode) {
console.log('正确结束socket连接'); console.log('正确结束socket连接');
} else { } else {
console.log('开始重连socket');
this.reConnectDeviceSocket(false); this.reConnectDeviceSocket(false);
} }
}); });
...@@ -164,13 +252,10 @@ class Shower extends Component { ...@@ -164,13 +252,10 @@ class Shower extends Component {
} }
reConnectDeviceSocket(cancel: boolean) { reConnectDeviceSocket(cancel: boolean) {
const { timer, reConnectting } = this.state;
if (cancel) { if (cancel) {
clearTimeout(timer); timer && clearTimeout(timer);
this.setState({ timer = null;
timer: null, reConnectting = false;
reConnectting: false,
});
return; return;
} }
console.log(reConnectting, timer); console.log(reConnectting, timer);
...@@ -179,57 +264,56 @@ class Shower extends Component { ...@@ -179,57 +264,56 @@ class Shower extends Component {
this.connectDeviceSocket(); this.connectDeviceSocket();
} else if (timer) { } else if (timer) {
clearTimeout(timer); clearTimeout(timer);
this.setState({ reConnectting = false;
timer: null, timer = null;
reConnectting: false,
});
console.log('请保证网络正常'); console.log('请保证网络正常');
Taro.showModal({ Taro.showModal({
title: '警告', title: '警告',
content: '请保持网络畅通正常', content: '请保持网络畅通正常',
}); });
} else { } else {
let newTimer = setTimeout(() => { timer = setTimeout(() => {
this.setState({ reConnectting = false;
reConnectting: false,
});
}, 10000); }, 10000);
reConnectting = true;
console.log(reConnectting, timer); console.log(reConnectting, timer);
this.setState({
timer: newTimer,
reConnectting: true,
});
this.connectDeviceSocket(); this.connectDeviceSocket();
} }
} }
sendDeviceCode() { sendDeviceCode() {
const { task, sockedDone, deviceDone } = this.state; const { sockedDone, deviceDone } = this.state;
const { bluetoothDevice } = this.props; const { bluetoothDevice } = this.props;
console.log('socket状态：', sockedDone, '蓝牙状态：', deviceDone); console.log('socket状态：', sockedDone, '蓝牙状态：', deviceDone);
if (sockedDone && task && deviceDone) { if (sockedDone && socketTask && deviceDone) {
let deviceData = '{<' + bluetoothDevice.code + '>}'; let deviceData = '{<' + bluetoothDevice.code + '>}';
console.log('发送设备编号:', deviceData); console.log('<---发送设备编号:', deviceData);
task.send({ socketTask.send({
data: str2ab(deviceData), data: str2ab(deviceData),
success: msg => {
console.log('发送设备编号:', msg, '--->');
},
fail: err => {
console.log('发送设备编号:', err, '--->');
},
}); });
} }
} }
closeDeviceSocket() { closeDeviceSocket() {
const { task } = this.state; console.log('in close', socketTask, timer);
console.log('in close', task); if (socketTask) {
if (task) { socketTask.close({
task.close({
code: StopCode, code: StopCode,
complete: () => { complete: () => {
this.setState({ socketTask = null;
task: null,
});
}, },
}); });
} }
if (timer) {
clearTimeout(timer);
}
} }
checkUsingDevice() { checkUsingDevice() {
...@@ -421,15 +505,20 @@ class Shower extends Component { ...@@ -421,15 +505,20 @@ class Shower extends Component {
this.closeDeviceSocket(); this.closeDeviceSocket();
this.closeBluetoothConnection(); this.closeBluetoothConnection();
} else { } else {
const { task } = this.state;
if ( if (
datastr.substring(0, 1) === '{' && datastr.substring(0, 1) === '{' &&
datastr.substring(datastr.length - 1, datastr.length) === '}' datastr.substring(datastr.length - 1, datastr.length) === '}'
) { ) {
console.log('发送完整数据： ', datastr); console.log('<---发送完整数据： ', datastr);
if (task) { if (socketTask) {
task.send({ socketTask.send({
data: str2ab(datastr), data: str2ab(datastr),
success: msg => {
console.log('发送完整数据：', msg, '--->');
},
fail: err => {
console.log('发送完整数据：', err, '--->');
},
}); });
} }
} else if (datastr.substring(0, 1) === '{') { } else if (datastr.substring(0, 1) === '{') {
...@@ -441,10 +530,16 @@ class Shower extends Component { ...@@ -441,10 +530,16 @@ class Shower extends Component {
) { ) {
abStr += datastr; abStr += datastr;
console.log('接受尾部数据后： ', abStr); console.log('接受尾部数据后： ', abStr);
console.log('发送完整数据： ', abStr); console.log('<---发送完整数据： ', abStr);
if (task) { if (socketTask) {
task.send({ socketTask.send({
data: str2ab(abStr), data: str2ab(abStr),
success: msg => {
console.log('发送完整数据：', msg, '--->');
},
fail: err => {
console.log('发送完整数据：', err, '--->');
},
}); });
} }
abStr = ''; abStr = '';
...@@ -573,11 +668,16 @@ class Shower extends Component { ...@@ -573,11 +668,16 @@ class Shower extends Component {
msg.substring(0, 1) === '{' && msg.substring(0, 1) === '{' &&
msg.substring(msg.length - 1, msg.length) === '}' msg.substring(msg.length - 1, msg.length) === '}'
) { ) {
const { task } = this.state; console.log('<---发送给socket完整数据： ', msg);
console.log('发送给socket完整数据： ', msg); socketTask &&
task && socketTask.send({
task.send({
data: str2ab(msg), data: str2ab(msg),
success: msg => {
console.log('发送给socket完整数据：', msg, '--->');
},
fail: err => {
console.log('发送给socket完整数据：', err, '--->');
},
}); });
} else if (msg.substring(0, 1) === '{') { } else if (msg.substring(0, 1) === '{') {
console.log('接受头部数据： ', msg); console.log('接受头部数据： ', msg);
...@@ -588,12 +688,17 @@ class Shower extends Component { ...@@ -588,12 +688,17 @@ class Shower extends Component {
) { ) {
abStr += msg; abStr += msg;
console.log('接受尾部数据后： ', abStr); console.log('接受尾部数据后： ', abStr);
console.log('发送给socket完整数据： ', abStr); console.log('<---发送给socket完整数据： ', abStr);
const { task } = this.state; socketTask &&
task && socketTask.send({
task.send({
data: str2ab(abStr), data: str2ab(abStr),
success: msg => {
console.log('发送给socket完整数据：', msg, '--->');
},
fail: err => {
console.log('发送给socket完整数据：', err, '--->');
},
}); });
abStr = ''; abStr = '';
} else { } else {
...@@ -608,8 +713,8 @@ class Shower extends Component { ...@@ -608,8 +713,8 @@ class Shower extends Component {
}); });
} }
startUseShower(reConnect) { startUseShower(reConnect: boolean) {
if (reConnect) { if (!reConnect) {
Taro.showLoading({ Taro.showLoading({
title: '开启中', title: '开启中',
mask: true, mask: true,
...@@ -625,7 +730,15 @@ class Shower extends Component { ...@@ -625,7 +730,15 @@ class Shower extends Component {
.then(res => { .then(res => {
const deviceId = res.deviceId; const deviceId = res.deviceId;
const services = res.services; 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; const serviceId = service.uuid;
this.setState(({ deviceInfo }: PageState) => ({ this.setState(({ deviceInfo }: PageState) => ({
deviceInfo: { deviceInfo: {
...@@ -685,10 +798,31 @@ class Shower extends Component { ...@@ -685,10 +798,31 @@ class Shower extends Component {
render() { render() {
const { const {
bluetoothDevice: { code, position }, bluetoothDevice: { code, position },
userinfo,
} = this.props; } = this.props;
const { showerState } = this.state; const {
showerState,
showPayOrder,
orderInfo,
accounts,
payInfos,
} = this.state;
return ( return (
<View className='Shower'> <View className='Shower'>
{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-box'>
<View className='equipment-info'> <View className='equipment-info'>
{code ? ( {code ? (
...@@ -733,6 +867,7 @@ class Shower extends Component { ...@@ -733,6 +867,7 @@ class Shower extends Component {
)} )}
</View> </View>
</View> </View>
</View>
); );
} }
} }
......
src/pages/WaterDispenser/WaterDispenser.tsx
...@@ -21,6 +21,12 @@ import { Customer } from '@/types/Customer/Customer'; ...@@ -21,6 +21,12 @@ import { Customer } from '@/types/Customer/Customer';
import { connect } from '@tarojs/redux'; import { connect } from '@tarojs/redux';
import { ComponentClass } from 'react'; import { ComponentClass } from 'react';
import { ResponseDataEntity } from '@/api'; 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 = { export type DeviceInfo = {
code: string; code: string;
...@@ -36,6 +42,14 @@ type PageState = { ...@@ -36,6 +42,14 @@ type PageState = {
useList: DeviceInfo[]; useList: DeviceInfo[];
timer: number | null; timer: number | null;
showToggleTag: boolean; showToggleTag: boolean;
showPayOrder: boolean;
accounts: CustomerBeanAccountVo[];
orderInfo: Order;
payInfos: {
paymentAndActiveInfos: PaymentAndActiveInfo[];
paymentConfId: number;
};
}; };
type IProps = PageStateProps; type IProps = PageStateProps;
...@@ -44,6 +58,7 @@ interface WaterDispenser { ...@@ -44,6 +58,7 @@ interface WaterDispenser {
props: IProps; props: IProps;
state: PageState; state: PageState;
} }
@connect(({ userinfo }) => ({ @connect(({ userinfo }) => ({
userinfo, userinfo,
})) }))
...@@ -59,10 +74,47 @@ class WaterDispenser extends Component { ...@@ -59,10 +74,47 @@ class WaterDispenser extends Component {
useList: [], useList: [],
timer: null, timer: null,
showToggleTag: false, 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() { componentWillMount() {
this.getPayState();
this.getUsedEquipment(); this.getUsedEquipment();
this.fetchPageConfig(); this.fetchPageConfig();
} }
...@@ -71,6 +123,43 @@ class WaterDispenser extends Component { ...@@ -71,6 +123,43 @@ class WaterDispenser extends Component {
this.clearTimer(); 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() { fetchPageConfig() {
const { userinfo } = this.props; const { userinfo } = this.props;
fetchPageConfig({ fetchPageConfig({
...@@ -113,7 +202,7 @@ class WaterDispenser extends Component { ...@@ -113,7 +202,7 @@ class WaterDispenser extends Component {
toggleCodeState() { toggleCodeState() {
Taro.redirectTo({ Taro.redirectTo({
url: `/pages/BarCode/BarCode?backPage=${encodeURIComponent( url: `/pages/BarCode/BarCode?serviceId=9&backPage=${encodeURIComponent(
'/pages/WaterDispenser/WaterDispenser', '/pages/WaterDispenser/WaterDispenser',
)}`, )}`,
}); });
...@@ -225,7 +314,6 @@ class WaterDispenser extends Component { ...@@ -225,7 +314,6 @@ class WaterDispenser extends Component {
); );
}) })
.catch(err => { .catch(err => {
Taro.hideLoading();
console.error('开启失败： ', err); console.error('开启失败： ', err);
}); });
} }
...@@ -251,9 +339,29 @@ class WaterDispenser extends Component { ...@@ -251,9 +339,29 @@ class WaterDispenser extends Component {
deviceInfo: { code, position }, deviceInfo: { code, position },
useList, useList,
showToggleTag, showToggleTag,
showPayOrder,
orderInfo,
accounts,
payInfos,
} = this.state; } = this.state;
const { userinfo } = this.props;
return ( return (
<View className='WaterDispenser'> <View className='WaterDispenser'>
{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' : ''}>
{showToggleTag && ( {showToggleTag && (
<View className='WaterDispenser-tg' onClick={this.toggleCodeState}> <View className='WaterDispenser-tg' onClick={this.toggleCodeState}>
<Image className='icon' src={CodeIcon} /> <Image className='icon' src={CodeIcon} />
...@@ -292,6 +400,7 @@ class WaterDispenser extends Component { ...@@ -292,6 +400,7 @@ class WaterDispenser extends Component {
))} ))}
</View> </View>
</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