Commit 670c704d by kuangshu

完善扫码页面支付逻辑

parent ac0c5f21
...@@ -34,7 +34,7 @@ class AllParmas { ...@@ -34,7 +34,7 @@ class AllParmas {
campusId: number; campusId: number;
sectionId: number; sectionId: number;
} }
class AnnItem { export class AnnItem {
id: number; id: number;
title: string; title: string;
multiImageType: ''; multiImageType: '';
......
...@@ -3,58 +3,124 @@ import { ComponentClass } from 'react'; ...@@ -3,58 +3,124 @@ import { ComponentClass } from 'react';
import { View, ScrollView, Image, Text } from '@tarojs/components'; import { View, ScrollView, Image, Text } from '@tarojs/components';
import AnnIcon from '../../images/icon/ann_tongzhi_icon@2x.png'; import AnnIcon from '../../images/icon/ann_tongzhi_icon@2x.png';
import { fetchAllAnn, AnnItem } from '../../api/announcement';
import { connect } from '@tarojs/redux';
import { UserState } from '../../store/rootReducers/userinfo';
import './Announcement.scss';
type PageStateProps = {
userinfo: UserState;
};
type PageOwnProps = {}; type PageOwnProps = {};
type PageState = {}; type PageState = {
pageNum: number;
pageSize: number;
list: AnnItem[];
};
interface Announcement { interface Announcement {
props: PageOwnProps; props: PageStateProps & PageOwnProps;
state: PageState; state: PageState;
} }
@connect(({ userinfo }) => ({
userinfo,
}))
class Announcement extends Component { class Announcement extends Component {
constructor(props) {
super(props);
this.state = {
pageNum: 1,
pageSize: 10,
list: [],
};
}
componentWillMount() {
const { userinfo } = this.props;
const { sectionId } = this.$router.params;
fetchAllAnn({
campusId: userinfo.areaId,
sectionId: sectionId,
})
.then(res => {
const data = res.data;
this.setState({
...data,
});
})
.catch(err => {
console.log(err);
this.setState({
pageNum: 1,
pageSize: 10,
pages: 1,
total: 2,
list: [
{
id: 301070,
title: 'ASFDSGSD大苏打',
multiImageType: 'SINGLE',
source: '关机开不开地方',
linkUrls: ['sqwerqwerqwefsf'],
linkType: 'DEFAULT',
jumpUrl: '',
urlParameters: {},
sort: 1,
enabled: true,
loadAd: false,
mandatoryPrompt: false,
effectTime: 1529431320000,
expirationTime: 1530129600000,
createTime: '2018-06-01 10:41:11',
updateTime: '2019-01-25 09:43:17',
},
{
id: 301073,
title: '啊实打实的阿斯顿',
multiImageType: 'SINGLE',
source: '个撒大',
linkUrls: ['sqwerqwerqwefsf'],
linkType: 'DEFAULT',
jumpUrl: '',
urlParameters: {},
sort: 2,
enabled: true,
loadAd: false,
mandatoryPrompt: false,
createTime: '2018-06-12 10:52:15',
updateTime: '2019-01-25 09:47:39',
},
],
});
});
}
geAnnDetail(id: number) {
console.log(id);
}
render() { render() {
const { list } = this.state;
return ( return (
<ScrollView className='Announcement' scroll-y> <ScrollView className='Announcement' scroll-y>
<View className='Announcement-item'> {list.map(annItem => (
<Image className='Announcement-item-img' src='' /> <View
<View className='Announcement-item-Content'> key={annItem.id}
<Image className='Announcement-item-icon' src={AnnIcon} /> className='Announcement-item'
<Text className='Announcement-item-title'>关于饮水豆使用说明</Text> onClick={() => this.geAnnDetail(annItem.id)}
<Text className='Announcement-item-date'>1543-54-87</Text> >
</View> <Image
</View> className='Announcement-item-img'
<View className='Announcement-item'> src={annItem.linkUrls[0]}
<Image className='Announcement-item-img' src='' /> />
<View className='Announcement-item-Content'> <View className='Announcement-item-Content'>
<Image className='Announcement-item-icon' src={AnnIcon} /> <Image className='Announcement-item-icon' src={AnnIcon} />
<Text className='Announcement-item-title'>关于饮水豆使用说明</Text> <Text className='Announcement-item-title'>{annItem.title}</Text>
<Text className='Announcement-item-date'>1543-54-87</Text> <Text className='Announcement-item-date'>
</View> {annItem.updateTime}
</View> </Text>
<View className='Announcement-item'> </View>
<Image className='Announcement-item-img' src='' />
<View className='Announcement-item-Content'>
<Image className='Announcement-item-icon' src={AnnIcon} />
<Text className='Announcement-item-title'>关于饮水豆使用说明</Text>
<Text className='Announcement-item-date'>1543-54-87</Text>
</View>
</View>
<View className='Announcement-item'>
<Image className='Announcement-item-img' src='' />
<View className='Announcement-item-Content'>
<Image className='Announcement-item-icon' src={AnnIcon} />
<Text className='Announcement-item-title'>关于饮水豆使用说明</Text>
<Text className='Announcement-item-date'>1543-54-87</Text>
</View>
</View>
<View className='Announcement-item'>
<Image className='Announcement-item-img' src='' />
<View className='Announcement-item-Content'>
<Image className='Announcement-item-icon' src={AnnIcon} />
<Text className='Announcement-item-title'>关于饮水豆使用说明</Text>
<Text className='Announcement-item-date'>1543-54-87</Text>
</View> </View>
</View> ))}
</ScrollView> </ScrollView>
); );
} }
......
...@@ -9,7 +9,6 @@ import wxbarcode from 'wxbarcode'; ...@@ -9,7 +9,6 @@ import wxbarcode from 'wxbarcode';
import './BarCode.scss'; import './BarCode.scss';
import { UserState } from '../../store/rootReducers/userinfo'; import { UserState } from '../../store/rootReducers/userinfo';
import { connect } from '@tarojs/redux'; import { connect } from '@tarojs/redux';
import OrderPay from '../Order/OrderPay/OrderPay';
import { import {
fetchPayOrder, fetchPayOrder,
fetchOrderDetailAndPay, fetchOrderDetailAndPay,
...@@ -17,6 +16,7 @@ import { ...@@ -17,6 +16,7 @@ import {
} from '../../api/order'; } from '../../api/order';
import OrderInfo from '../Order/components/OrderInfo/OrderInfo'; import OrderInfo from '../Order/components/OrderInfo/OrderInfo';
import OrderTitle from '../Order/components/OrderTitle/OrderTitle'; import OrderTitle from '../Order/components/OrderTitle/OrderTitle';
import OrderPayway from '../Order/components/OrderPayway/OrderPayway';
import { ConsumeOrder, PaymentAndActiveInfo } from '../../api/baseClass'; import { ConsumeOrder, PaymentAndActiveInfo } from '../../api/baseClass';
type PageStateProps = { type PageStateProps = {
...@@ -157,6 +157,11 @@ class BarCode extends Component { ...@@ -157,6 +157,11 @@ class BarCode extends Component {
}); });
} }
payDoneHandle() {
this.setState({
showPayOrder: false,
});
}
drawBarCode(showBig: boolean) { drawBarCode(showBig: boolean) {
const { userinfo } = this.props; const { userinfo } = this.props;
if (showBig) { if (showBig) {
...@@ -175,31 +180,33 @@ class BarCode extends Component { ...@@ -175,31 +180,33 @@ class BarCode extends Component {
} }
render() { render() {
const { userinfo } = this.props;
const { const {
showPayOrder, showPayOrder,
showBig, showBig,
orderInfo: { orderInfo,
payableMoney, payInfos,
serviceName, deductionInfos,
createAt,
orderNumber,
areaName,
equipmentNum,
equipmentPosition,
},
} = this.state; } = this.state;
return ( return (
<View className='BarCode'> <View className='BarCode'>
{showPayOrder && ( {showPayOrder && (
<View className='OrderBox'> <View className='OrderBox'>
<OrderTitle price={payableMoney} /> <OrderTitle price={orderInfo.payableMoney} />
<OrderInfo <OrderInfo
serviceName={serviceName} serviceName={orderInfo.serviceName}
createAt={createAt} createAt={orderInfo.createAt}
orderNumber={orderNumber} orderNumber={orderInfo.orderNumber}
areaName={areaName} areaName={orderInfo.areaName}
equipmentNum={equipmentNum} equipmentNum={orderInfo.equipmentNum}
equipmentPosition={equipmentPosition} equipmentPosition={orderInfo.equipmentPosition}
/>
<OrderPayway
payDoneCallback={this.payDoneHandle}
userinfo={userinfo}
orderId={orderInfo.id}
payInfos={payInfos}
deductionInfos={deductionInfos}
/> />
</View> </View>
)} )}
......
...@@ -94,7 +94,54 @@ class Home extends Component { ...@@ -94,7 +94,54 @@ class Home extends Component {
}); });
} }
}) })
.catch(console.error); .catch(err => {
this.setState({
annItem: {
id: 896,
styleType: 'ANNOUNCEMENT',
name: '公告1',
titleTypeRemark: '无',
titleType: 'NONE',
titleContent: '',
sort: 3,
updateTime: 1528770103000,
itemsCount: 10,
items: [
{
id: 301070,
title: 'ASFDSGSD大苏打',
multiImageType: 'SINGLE',
source: '关机开不开地方',
linkUrls: ['sqwerqwerqwefsf'],
linkType: 'DEFAULT',
jumpUrl: '',
urlParameters: {},
sort: 1,
loadAd: false,
mandatoryPrompt: false,
createTime: '2018-06-01 10:41:11',
updateTime: '2019-01-25 09:43:17',
},
{
id: 301073,
title: '啊实打实的阿斯顿',
multiImageType: 'SINGLE',
source: '个撒大',
linkUrls: ['sqwerqwerqwefsf'],
linkType: 'DEFAULT',
jumpUrl: '',
urlParameters: {},
sort: 2,
loadAd: false,
mandatoryPrompt: false,
createTime: '2018-06-12 10:52:15',
updateTime: '2019-01-25 09:47:39',
},
],
},
});
console.error(err);
});
} }
goSetting() { goSetting() {
...@@ -109,7 +156,7 @@ class Home extends Component { ...@@ -109,7 +156,7 @@ class Home extends Component {
} }
goAnn() { goAnn() {
Taro.navigateTo({ Taro.navigateTo({
url: '/pages/Announcement/Announcement', url: '/pages/Announcement/Announcement?sectionId=896',
}); });
} }
...@@ -139,6 +186,10 @@ class Home extends Component { ...@@ -139,6 +186,10 @@ class Home extends Component {
}) })
.catch(console.log); .catch(console.log);
} }
formatePhone = phone => {
let newPhone = phone.replace(/([0-9]{3})([0-9]{4})([0-9]{4})/, '$1****$3');
return newPhone;
};
render() { render() {
const { userinfo } = this.props; const { userinfo } = this.props;
...@@ -166,7 +217,9 @@ class Home extends Component { ...@@ -166,7 +217,9 @@ class Home extends Component {
<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>
<View className='Home-UserBox-tel'>{userinfo.customerPhone}</View> <View className='Home-UserBox-tel'>
{this.formatePhone(userinfo.customerPhone)}
</View>
<View className='Home-UserBox-addr'>{userinfo.areaName}</View> <View className='Home-UserBox-addr'>{userinfo.areaName}</View>
</View> </View>
{userinfo.customerSex === '2' ? ( {userinfo.customerSex === '2' ? (
...@@ -221,10 +274,14 @@ class Home extends Component { ...@@ -221,10 +274,14 @@ class Home extends Component {
<Image className='more-icon' src={MoreIcon} /> <Image className='more-icon' src={MoreIcon} />
</View> </View>
</View> </View>
<View className='Home-Announcement-Content'> {annItem.items.length && (
<Text>元宵节感恩回馈</Text> <View className='Home-Announcement-Content'>
<Text className='ContentDate'>2019-02-22</Text> <Text>{annItem.items[0].title}</Text>
</View> <Text className='ContentDate'>
{annItem.items[0].updateTime}
</Text>
</View>
)}
</View> </View>
) : null} ) : null}
</View> </View>
......
...@@ -11,60 +11,4 @@ ...@@ -11,60 +11,4 @@
margin-bottom: 20px; margin-bottom: 20px;
border-top: 1px dashed #f2f2f2; border-top: 1px dashed #f2f2f2;
} }
.OrderPay-payway {
display: flex;
align-items: center;
height: 80px;
font-size: 28px;
.OrderPay-icon {
width: 40px;
height: 40px;
margin-right: 20px;
}
.OrderPay-text {
flex: 1;
}
.OrderPay-check {
box-sizing: border-box;
width: 28px;
height: 28px;
border: 6px solid #c8c8c8;
border-radius: 50%;
}
.checked {
border-color: #ffd506;
background-color: #ffd506;
}
}
.OrderPay-payinfo {
display: flex;
height: 60px;
line-height: 60px;
justify-content: space-between;
font-size: 28px;
color: #333;
}
.OrderPay-DeductionInfo {
position: relative;
margin-top: 12px;
padding-left: 22px;
height: 60px;
line-height: 60px;
background-color: #ffe4e4;
font-size: 22px;
color: #ff1010;
}
.OrderPay-DeductionInfo::before {
content: '';
position: absolute;
top: -12px;
left: 120px;
border-bottom: 12px solid #ffe4e4;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
}
.OrderPay-next {
margin-top: 40px;
border-radius: 24px;
}
} }
...@@ -39,7 +39,7 @@ type PageProps = { ...@@ -39,7 +39,7 @@ type PageProps = {
}; };
type PageState = { type PageState = {
prePay: boolean; prePay: boolean;
payWay: { payWay: null | {
activeId: number | undefined; activeId: number | undefined;
amount: number | undefined; amount: number | undefined;
avtiveComment: string; avtiveComment: string;
...@@ -81,15 +81,7 @@ class OrderPay extends Component { ...@@ -81,15 +81,7 @@ class OrderPay extends Component {
super(props); super(props);
this.state = { this.state = {
prePay: true, prePay: true,
payWay: { payWay: null,
activeId: undefined,
amount: undefined,
avtiveComment: '',
deductionValue: 0,
isDeduction: undefined,
payType: '',
payVersion: '',
},
accounts: [], accounts: [],
orderInfo: { orderInfo: {
actualMoney: undefined, actualMoney: undefined,
......
...@@ -5,12 +5,14 @@ import { View, Text } from '@tarojs/components'; ...@@ -5,12 +5,14 @@ import { View, Text } from '@tarojs/components';
import './OrderInfo.scss'; import './OrderInfo.scss';
type PageProps = { type PageProps = {
serviceName: string; orderInfo: {
createAt: string; serviceName: string;
orderNumber: string; createAt: string;
areaName: string; orderNumber: string;
equipmentNum: string; areaName: string;
equipmentPosition: string; equipmentNum: string;
equipmentPosition: string;
};
}; };
interface OrderInfo { interface OrderInfo {
...@@ -19,12 +21,14 @@ interface OrderInfo { ...@@ -19,12 +21,14 @@ interface OrderInfo {
class OrderInfo extends Component { class OrderInfo extends Component {
render() { render() {
const { const {
serviceName, orderInfo: {
createAt, serviceName,
orderNumber, createAt,
areaName, orderNumber,
equipmentNum, areaName,
equipmentPosition, equipmentNum,
equipmentPosition,
},
} = this.props; } = this.props;
return ( return (
<View> <View>
......
.OrderPayway {
.OrderPay-payway {
display: flex;
align-items: center;
height: 80px;
font-size: 28px;
.OrderPay-icon {
width: 40px;
height: 40px;
margin-right: 20px;
}
.OrderPay-text {
flex: 1;
}
.OrderPay-check {
box-sizing: border-box;
width: 28px;
height: 28px;
border: 6px solid #c8c8c8;
border-radius: 50%;
}
.checked {
border-color: #ffd506;
background-color: #ffd506;
}
}
.OrderPay-payinfo {
display: flex;
height: 60px;
line-height: 60px;
justify-content: space-between;
font-size: 28px;
color: #333;
}
.OrderPay-DeductionInfo {
position: relative;
margin-top: 12px;
padding-left: 22px;
height: 60px;
line-height: 60px;
background-color: #ffe4e4;
font-size: 22px;
color: #ff1010;
}
.OrderPay-DeductionInfo::before {
content: '';
position: absolute;
top: -12px;
left: 120px;
border-bottom: 12px solid #ffe4e4;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
}
.OrderPay-next {
margin-top: 40px;
border-radius: 24px;
}
}
import Taro, { Component } from '@tarojs/taro';
import { ComponentClass } from 'react';
import { Button, View, Image, Text } from '@tarojs/components';
import { UserState } from '../../../../store/rootReducers/userinfo';
import { PaymentAndActiveInfo } from '../../../../api/baseClass';
import { confirmPay } from '../../../../api/order';
import payWayWxLogo from '../../../../images/order/pay_wechat_icon@2x.png';
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 './OrderPayway.scss';
import AES from 'crypto-js/aes';
import Utf8 from 'crypto-js/enc-utf8';
import ECBmode from 'crypto-js/mode-ecb';
import PaddingPkcs7 from 'crypto-js/pad-pkcs7';
import { getPayType } from '../../../../utils/payType';
type PageOwnProps = {
payDoneCallback: () => void;
userinfo: UserState;
orderId: number;
payInfos: {
paymentAndActiveInfos: PaymentAndActiveInfo[];
paymentConfId: number;
};
deductionInfos: {
amiAccount: number;
beanAccount: number;
deductionMoney: number;
deductionType: string;
orderMoney: number;
payMoney: number;
payType: string;
remainAccount: number;
titlePerfix: string;
};
};
type PageState = {
prePay: boolean;
payWay: null | {
activeId: number | undefined;
amount: number | undefined;
avtiveComment: string;
deductionValue: number | undefined;
isDeduction: number | undefined;
payType: string;
payVersion: string;
};
};
interface OrderPayway {
props: PageOwnProps;
state: PageState;
}
class OrderPayway extends Component {
constructor(props) {
super(props);
this.state = {
prePay: true,
payWay: null,
};
}
changePayWay(payWay: PaymentAndActiveInfo) {
this.setState({
payWay: payWay,
});
}
changePayState() {
const { payWay } = this.state;
if (payWay) {
this.setState({
prePay: false,
});
} else {
Taro.showToast({
title: '请选择支付方式',
icon: 'none',
});
}
}
callNativePay() {
const {
userinfo: { customerId },
orderId,
payInfos,
payDoneCallback,
} = this.props;
const { payWay } = this.state;
confirmPay({
orderId: orderId,
payType: payWay.payType,
[payWay.activeId ? 'activeId' : 'notUse']: payWay.activeId,
returnUrl: '',
callType: '3',
paymentConfId: payInfos.paymentConfId,
})
.then(res => {
console.log(res);
const { payStr } = res;
if (payStr) {
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);
payDoneCallback();
},
fail(res) {
Taro.showToast({
title: res.msg || '发起支付失败',
icon: 'none',
});
},
});
} else {
payDoneCallback();
}
})
.catch(err => {
console.log(err);
Taro.showToast({
title: err.msg || '发起支付失败',
icon: 'none',
});
});
}
render() {
const { prePay, payWay } = this.state;
const {
payInfos: { paymentAndActiveInfos },
deductionInfos,
} = this.props;
const payInfoList = paymentAndActiveInfos.filter(
item =>
item.payType === '2' ||
item.payType === '6' ||
item.payType === '7' ||
item.payType === '8'
);
const payInfo = prePay
? null
: payInfoList.find(item => item.payType === payWay.payType);
return (
<View className='OrderPayway'>
{prePay ? (
payInfoList.length ? (
payInfoList.map((payway, index) => (
<View
key={index}
className='OrderPay-payway'
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)}(余额:
{deductionInfos.amiAccount.toFixed(2)})
</Text>
) : (
<Text className='OrderPay-text'>
{getPayType(payway.payType)}(余额:
{deductionInfos.beanAccount
? deductionInfos.beanAccount.toFixed(2)
: '0.00'}
)
</Text>
)}
<View
className={`OrderPay-check ${
payWay && payWay.payType === payway.payType ? 'checked' : ''
}`}
/>
</View>
))
) : null
) : (
<View>
<View className='OrderPay-payinfo'>
<Text>订单金额</Text>
<Text>{deductionInfos.payMoney}</Text>
</View>
{deductionInfos.deductionType === '1' ? (
<View>
<View className='OrderPay-payinfo'>
<Text>
{deductionInfos.titlePerfix}豆抵扣金额(余额:
{deductionInfos.beanAccount.toFixed(2)}
</Text>
<Text>{deductionInfos.deductionMoney.toFixed(2)}</Text>
</View>
<View className='OrderPay-DeductionInfo'>
豆抵扣总消费额的
{payWay && payWay.deductionValue
? payWay.deductionValue * 100
: 0}
%,不满0.01元,累计算1分
</View>
</View>
) : deductionInfos.deductionType === '2' ? (
<View>
<View className='OrderPay-payinfo'>
<Text>
通用豆抵扣金额(余额:{deductionInfos.beanAccount.toFixed(2)}
</Text>
<Text>{deductionInfos.deductionMoney.toFixed(2)}</Text>
</View>
<View className='OrderPay-DeductionInfo'>
豆抵扣总消费额的
{payWay && payWay.deductionValue
? payWay.deductionValue * 100
: 0}
%,不满0.01元,累计算1分
</View>
</View>
) : deductionInfos.deductionType === '3' ? (
<View className='OrderPay-payinfo'>
<Text>
艾米抵扣金额(余额:{deductionInfos.amiAccount.toFixed(2)}
</Text>
<Text>{deductionInfos.deductionMoney.toFixed(2)}</Text>
</View>
) : null}
<View className='OrderPay-payinfo'>
<Text>{payInfo ? payInfo.payTypeName : ''}金额</Text>
<Text>{deductionInfos.payMoney}</Text>
</View>
</View>
)}
{prePay ? (
<Button
className='button OrderPay-next'
onClick={this.changePayState}
>
下一步
</Button>
) : (
<Button className='button OrderPay-next' onClick={this.callNativePay}>
确认支付
</Button>
)}
</View>
);
}
}
export default OrderPayway as ComponentClass<PageOwnProps, PageState>;
...@@ -21,7 +21,7 @@ class OrderTitle extends Component { ...@@ -21,7 +21,7 @@ class OrderTitle extends Component {
<Image className='OrderTitle-icon' src={comLogo} /> <Image className='OrderTitle-icon' src={comLogo} />
<Text>成都多彩任意门科技有限公司</Text> <Text>成都多彩任意门科技有限公司</Text>
</View> </View>
<View className='OrderTitle-price'>-{price}</View> <View className='OrderTitle-price'>-{price ? price : ''}</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