Skip to content

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

合并冲突

parents 342f78cb e204645e
Showing with 327 additions and 86 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
...@@ -99,4 +99,17 @@ button[disabled]:not([type]) { ...@@ -99,4 +99,17 @@ button[disabled]:not([type]) {
height: 100%; height: 100%;
background-color: rgba(25, 25, 25, 0.2); background-color: rgba(25, 25, 25, 0.2);
z-index: 99; 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 @@ ...@@ -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,38 +292,41 @@ class BarCode extends Component { ...@@ -289,38 +292,41 @@ 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>
<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> </View>
)} )}
<View className='toggleBtn' onClick={this.toggleBigBarCode}> <View className={`BarCodeBox ${showBig ? 'BarCodeBoxBig' : ''}`}>
<Image <Image
className={`arricon ${showBig ? 'rever' : ''}`} className='BarCodeBox-refresh'
src={ArrIcon} 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>
<View className='warnning'>
如扫描条码终端无响应，请刷新条码后重试！
</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/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,45 +339,66 @@ class WaterDispenser extends Component { ...@@ -251,45 +339,66 @@ 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'>
{showToggleTag && ( {showPayOrder && (
<View className='WaterDispenser-tg' onClick={this.toggleCodeState}> <View className='OrderBox'>
<Image className='icon' src={CodeIcon} /> <OrderTitle price={orderInfo.payableMoney} />
<Text className='text'>显示条码</Text> <OrderInfo orderInfo={orderInfo} />
<OrderPayway
onPayDoneCallback={this.payDoneHandle}
userinfo={userinfo}
accounts={accounts}
orderInfo={orderInfo}
payInfos={payInfos}
/>
</View> </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'> <View className='btn-box'>
<Image
className='shower-scan-btn'
src={ScanIcon}
onClick={this.scanEquipment}
/>
{code && !waterUsingState ? (
<Image <Image
className='shower-start-btn' className='shower-scan-btn'
src={StartIcon} src={ScanIcon}
onClick={this.waterBeginning} onClick={this.scanEquipment}
/> />
) : ( {code && !waterUsingState ? (
<Image className='shower-start-btn' src={CantStartIcon} /> <Image
)} className='shower-start-btn'
</View> src={StartIcon}
onClick={this.waterBeginning}
/>
) : (
<Image className='shower-start-btn' src={CantStartIcon} />
)}
</View>
<View className='LastUseList'> <View className='LastUseList'>
<View className='LastUseList-title bb'>最近使用</View> <View className='LastUseList-title bb'>最近使用</View>
{useList.map(device => ( {useList.map(device => (
<EquipmentItem <EquipmentItem
key={device.code} key={device.code}
ex-class='bb' ex-class='bb'
code={device.code} code={device.code}
position={device.position} position={device.position}
onClick={this.getSelectedEquipment} onClick={this.getSelectedEquipment}
/> />
))} ))}
</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