Skip to content

W
wx-school-app
Commit 64a695e5 by kuangshu
Options

改造订单支付页面

parent 670c704d
Showing with 17 additions and 245 deletions
src/pages/BarCode/BarCode.tsx
...@@ -193,14 +193,7 @@ class BarCode extends Component { ...@@ -193,14 +193,7 @@ class BarCode extends Component {
{showPayOrder && ( {showPayOrder && (
<View className='OrderBox'> <View className='OrderBox'>
<OrderTitle price={orderInfo.payableMoney} /> <OrderTitle price={orderInfo.payableMoney} />
<OrderInfo <OrderInfo orderInfo={orderInfo} />
serviceName={orderInfo.serviceName}
createAt={orderInfo.createAt}
orderNumber={orderInfo.orderNumber}
areaName={orderInfo.areaName}
equipmentNum={orderInfo.equipmentNum}
equipmentPosition={orderInfo.equipmentPosition}
/>
<OrderPayway <OrderPayway
payDoneCallback={this.payDoneHandle} payDoneCallback={this.payDoneHandle}
userinfo={userinfo} userinfo={userinfo}
......
src/pages/Order/OrderPay/OrderPay.tsx
import { ComponentClass } from 'react'; import { ComponentClass } from 'react';
import Taro, { Component, Config } from '@tarojs/taro'; import Taro, { Component, Config } from '@tarojs/taro';
import { View, Text, Image, Button } from '@tarojs/components'; import { View } from '@tarojs/components';
import OrderTitle from '../components/OrderTitle/OrderTitle'; import OrderTitle from '../components/OrderTitle/OrderTitle';
import OrderInfo from '../components/OrderInfo/OrderInfo'; import OrderInfo from '../components/OrderInfo/OrderInfo';
import payWayWxLogo from '../../../images/order/pay_wechat_icon@2x.png'; import { fetchOrderDetailAndPay, fetchDeductionInfo } from '../../../api/order';
import payWayAimiLogo from '../../../images/order/pay_aimi_icon@2x.png';
import payWayHairLogo from '../../../images/order/pay_chuifengdou_icon@2x.png';
import payWayComLogo from '../../../images/order/pay_tongyongdou_icon@2x.png';
import {
fetchOrderDetail,
fetchOrderDetailAndPay,
fetchDeductionInfo,
confirmPay,
} from '../../../api/order';
import './OrderPay.scss'; import './OrderPay.scss';
import { import {
ConsumeOrder, ConsumeOrder,
PaymentAndActiveVo,
CustomerBeanAccountVo, CustomerBeanAccountVo,
PaymentAndActiveInfo, PaymentAndActiveInfo,
ConsumeOrderDeductionInfoVo,
} from '../../../api/baseClass'; } from '../../../api/baseClass';
import { getPayType } from '../../../utils/payType';
import { connect } from '@tarojs/redux'; import { connect } from '@tarojs/redux';
import { UserState } from 'src/store/rootReducers/userinfo'; import { UserState } from 'src/store/rootReducers/userinfo';
import AES from 'crypto-js/aes'; import OrderPayway from '../components/OrderPayway/OrderPayway';
import Utf8 from 'crypto-js/enc-utf8';
import ECBmode from 'crypto-js/mode-ecb';
import PaddingPkcs7 from 'crypto-js/pad-pkcs7';
type PageStateProps = { type PageStateProps = {
userinfo: UserState; userinfo: UserState;
...@@ -39,15 +24,6 @@ type PageProps = { ...@@ -39,15 +24,6 @@ type PageProps = {
}; };
type PageState = { type PageState = {
prePay: boolean; prePay: boolean;
payWay: null | {
activeId: number | undefined;
amount: number | undefined;
avtiveComment: string;
deductionValue: number | undefined;
isDeduction: number | undefined;
payType: string;
payVersion: string;
};
accounts: CustomerBeanAccountVo[]; accounts: CustomerBeanAccountVo[];
orderInfo: ConsumeOrder; orderInfo: ConsumeOrder;
payInfos: { payInfos: {
...@@ -81,7 +57,6 @@ class OrderPay extends Component { ...@@ -81,7 +57,6 @@ class OrderPay extends Component {
super(props); super(props);
this.state = { this.state = {
prePay: true, prePay: true,
payWay: null,
accounts: [], accounts: [],
orderInfo: { orderInfo: {
actualMoney: undefined, actualMoney: undefined,
...@@ -171,221 +146,25 @@ class OrderPay extends Component { ...@@ -171,221 +146,25 @@ class OrderPay extends Component {
}); });
} }
changePayState() { payDoneHandle() {
const { payWay } = this.state; Taro.navigateBack();
if (payWay) {
this.setState({
prePay: false,
});
} else {
Taro.showToast({
title: '请选择支付方式',
icon: 'none',
});
}
}
changePayWay(payWay: PaymentAndActiveInfo) {
this.setState({
payWay: payWay,
});
}
callNativePay() {
const {
userinfo: { customerId },
} = this.props;
const { orderInfo, payWay, payInfos } = this.state;
confirmPay({
orderId: orderInfo.id,
payType: payWay.payType,
[payWay.activeId ? 'activeId' : 'notUse']: payWay.activeId,
returnUrl: '',
callType: '1',
paymentConfId: payInfos.paymentConfId,
})
.then(res => {
console.log(res);
const { payStr } = res;
const key = customerId.toString().padEnd(16, '0');
console.log(key);
const payData = JSON.parse(
AES.decrypt(payStr, Utf8.parse(key), {
mode: ECBmode,
padding: PaddingPkcs7,
}).toString(Utf8)
);
console.log(payData);
Taro.requestPayment({
timeStamp: payData.msg.timestamp.toString(),
nonceStr: payData.msg.noncestr,
package: payData.msg.package,
signType: 'MD5',
paySign: payData.msg.sign,
success(res) {
console.log(res);
},
fail(res) {
Taro.showToast({
title: res.msg || '发起支付失败',
icon: 'none',
});
},
});
})
.catch(err => {
console.log(err);
Taro.showToast({
title: err.msg || '发起支付失败',
icon: 'none',
});
});
} }
render() { render() {
const { const { userinfo } = this.props;
prePay, const { orderInfo, payInfos, deductionInfos } = this.state;
payWay,
orderInfo: {
payableMoney,
serviceName,
createAt,
orderNumber,
areaName,
equipmentNum,
equipmentPosition,
},
payInfos: { paymentAndActiveInfos },
deductionInfos: {
payMoney,
deductionType,
titlePerfix,
deductionMoney,
beanAccount,
amiAccount,
},
} = this.state;
const payInfoList = paymentAndActiveInfos.filter(
item =>
item.payType === '2' ||
item.payType === '6' ||
item.payType === '7' ||
item.payType === '8'
);
const payInfo = prePay
? {}
: payInfoList.find(item => item.payType === payWay.payType);
return ( return (
<View className='OrderPay topBr'> <View className='OrderPay topBr'>
<OrderTitle price={payableMoney} /> <OrderTitle price={orderInfo.payableMoney} />
<OrderInfo <OrderInfo orderInfo={orderInfo} />
serviceName={serviceName}
createAt={createAt}
orderNumber={orderNumber}
areaName={areaName}
equipmentNum={equipmentNum}
equipmentPosition={equipmentPosition}
/>
<View className='OrderPay-line' /> <View className='OrderPay-line' />
{prePay ? ( <OrderPayway
payInfoList.length ? ( payDoneCallback={this.payDoneHandle}
payInfoList.map((payway, index) => ( userinfo={userinfo}
<View orderId={orderInfo.id}
key={index} payInfos={payInfos}
className='OrderPay-payway' deductionInfos={deductionInfos}
onClick={() => this.changePayWay(payway)} />
>
{payway.payType === '2' ? (
<Image className='OrderPay-icon' src={payWayWxLogo} />
) : payway.payType === '6' ? (
<Image className='OrderPay-icon' src={payWayAimiLogo} />
) : payway.payType === '7' ? (
<Image className='OrderPay-icon' src={payWayHairLogo} />
) : payway.payType === '8' ? (
<Image className='OrderPay-icon' src={payWayComLogo} />
) : null}
{payway.payType === '2' ? (
<Text className='OrderPay-text'>
{getPayType(payway.payType)}
</Text>
) : payway.payType === '6' ? (
<Text className='OrderPay-text'>
{getPayType(payway.payType)}(余额：{amiAccount.toFixed(2)})
</Text>
) : (
<Text className='OrderPay-text'>
{getPayType(payway.payType)}(余额：
{beanAccount ? beanAccount.toFixed(2) : '0.00'})
</Text>
)}
<View
className={`OrderPay-check ${
payWay.payType === payway.payType ? 'checked' : ''
}`}
/>
</View>
))
) : null
) : (
<View>
<View className='OrderPay-payinfo'>
<Text>订单金额</Text>
<Text>{payMoney}</Text>
</View>
{deductionType === '1' ? (
<View>
<View className='OrderPay-payinfo'>
<Text>
{titlePerfix}豆抵扣金额（余额:{beanAccount.toFixed(2)}）
</Text>
<Text>{deductionMoney.toFixed(2)}</Text>
</View>
<View className='OrderPay-DeductionInfo'>
豆抵扣总消费额的
{payWay.deductionValue ? payWay.deductionValue * 100 : 0}
%，不满0.01元，累计算1分
</View>
</View>
) : deductionType === '2' ? (
<View>
<View className='OrderPay-payinfo'>
<Text>通用豆抵扣金额（余额:{beanAccount.toFixed(2)}）</Text>
<Text>{deductionMoney.toFixed(2)}</Text>
</View>
<View className='OrderPay-DeductionInfo'>
豆抵扣总消费额的
{payWay.deductionValue ? payWay.deductionValue * 100 : 0}
%，不满0.01元，累计算1分
</View>
</View>
) : deductionType === '3' ? (
<View className='OrderPay-payinfo'>
<Text>艾米抵扣金额（余额:{amiAccount.toFixed(2)}）</Text>
<Text>{deductionMoney.toFixed(2)}</Text>
</View>
) : null}
<View className='OrderPay-payinfo'>
<Text>{payInfo.payTypeName}金额</Text>
<Text>{payMoney}</Text>
</View>
</View>
)}
{prePay ? (
<Button
className='button OrderPay-next'
onClick={this.changePayState}
>
下一步
</Button>
) : (
<Button className='button OrderPay-next' onClick={this.callNativePay}>
确认支付
</Button>
)}
</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