Skip to content

W
wx-school-app
Commit 670c704d by kuangshu
Options

完善扫码页面支付逻辑

parent ac0c5f21
Showing with 536 additions and 128 deletions
src/api/announcement.ts
......@@ -34,7 +34,7 @@ class AllParmas {
campusId: number;
sectionId: number;
}
class AnnItem {
export class AnnItem {
id: number;
title: string;
multiImageType: '';
......
src/pages/Announcement/Announcement.tsx
......@@ -3,58 +3,124 @@ import { ComponentClass } from 'react';
import { View, ScrollView, Image, Text } from '@tarojs/components';
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 PageState = {};
type PageState = {
pageNum: number;
pageSize: number;
list: AnnItem[];
};
interface Announcement {
props: PageOwnProps;
props: PageStateProps & PageOwnProps;
state: PageState;
}
@connect(({ userinfo }) => ({
userinfo,
}))
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() {
const { list } = this.state;
return (
<ScrollView className='Announcement' scroll-y>
<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 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 className='Announcement-item'>
<Image className='Announcement-item-img' src='' />
{list.map(annItem => (
<View
key={annItem.id}
className='Announcement-item'
onClick={() => this.geAnnDetail(annItem.id)}
>
<Image
className='Announcement-item-img'
src={annItem.linkUrls[0]}
/>
<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>
<Text className='Announcement-item-title'>{annItem.title}</Text>
<Text className='Announcement-item-date'>
{annItem.updateTime}
</Text>
</View>
</View>
))}
</ScrollView>
);
}
......
src/pages/BarCode/BarCode.tsx
......@@ -9,7 +9,6 @@ import wxbarcode from 'wxbarcode';
import './BarCode.scss';
import { UserState } from '../../store/rootReducers/userinfo';
import { connect } from '@tarojs/redux';
import OrderPay from '../Order/OrderPay/OrderPay';
import {
fetchPayOrder,
fetchOrderDetailAndPay,
......@@ -17,6 +16,7 @@ import {
} from '../../api/order';
import OrderInfo from '../Order/components/OrderInfo/OrderInfo';
import OrderTitle from '../Order/components/OrderTitle/OrderTitle';
import OrderPayway from '../Order/components/OrderPayway/OrderPayway';
import { ConsumeOrder, PaymentAndActiveInfo } from '../../api/baseClass';
type PageStateProps = {
......@@ -157,6 +157,11 @@ class BarCode extends Component {
});
}
payDoneHandle() {
this.setState({
showPayOrder: false,
});
}
drawBarCode(showBig: boolean) {
const { userinfo } = this.props;
if (showBig) {
......@@ -175,31 +180,33 @@ class BarCode extends Component {
}
render() {
const { userinfo } = this.props;
const {
showPayOrder,
showBig,
orderInfo: {
payableMoney,
serviceName,
createAt,
orderNumber,
areaName,
equipmentNum,
equipmentPosition,
},
orderInfo,
payInfos,
deductionInfos,
} = this.state;
return (
<View className='BarCode'>
{showPayOrder && (
<View className='OrderBox'>
<OrderTitle price={payableMoney} />
<OrderTitle price={orderInfo.payableMoney} />
<OrderInfo
serviceName={serviceName}
createAt={createAt}
orderNumber={orderNumber}
areaName={areaName}
equipmentNum={equipmentNum}
equipmentPosition={equipmentPosition}
serviceName={orderInfo.serviceName}
createAt={orderInfo.createAt}
orderNumber={orderInfo.orderNumber}
areaName={orderInfo.areaName}
equipmentNum={orderInfo.equipmentNum}
equipmentPosition={orderInfo.equipmentPosition}
/>
<OrderPayway
payDoneCallback={this.payDoneHandle}
userinfo={userinfo}
orderId={orderInfo.id}
payInfos={payInfos}
deductionInfos={deductionInfos}
/>
</View>
)}
......
src/pages/Home/Home.tsx
......@@ -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() {
......@@ -109,7 +156,7 @@ class Home extends Component {
}
goAnn() {
Taro.navigateTo({
url: '/pages/Announcement/Announcement',
url: '/pages/Announcement/Announcement?sectionId=896',
});
}
......@@ -139,6 +186,10 @@ class Home extends Component {
})
.catch(console.log);
}
formatePhone = phone => {
let newPhone = phone.replace(/([0-9]{3})([0-9]{4})([0-9]{4})/, '$1****$3');
return newPhone;
};
render() {
const { userinfo } = this.props;
......@@ -166,7 +217,9 @@ class Home extends Component {
<View className='Home-UserBox-info'>
<View className='Home-UserBox-other'>
<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>
{userinfo.customerSex === '2' ? (
......@@ -221,10 +274,14 @@ class Home extends Component {
<Image className='more-icon' src={MoreIcon} />
</View>
</View>
{annItem.items.length && (
<View className='Home-Announcement-Content'>
<Text>元宵节感恩回馈</Text>
<Text className='ContentDate'>2019-02-22</Text>
<Text>{annItem.items[0].title}</Text>
<Text className='ContentDate'>
{annItem.items[0].updateTime}
</Text>
</View>
)}
</View>
) : null}
</View>
......
src/pages/Order/OrderPay/OrderPay.scss
......@@ -11,60 +11,4 @@
margin-bottom: 20px;
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;
}
}
src/pages/Order/OrderPay/OrderPay.tsx
......@@ -39,7 +39,7 @@ type PageProps = {
};
type PageState = {
prePay: boolean;
payWay: {
payWay: null | {
activeId: number | undefined;
amount: number | undefined;
avtiveComment: string;
......@@ -81,15 +81,7 @@ class OrderPay extends Component {
super(props);
this.state = {
prePay: true,
payWay: {
activeId: undefined,
amount: undefined,
avtiveComment: '',
deductionValue: 0,
isDeduction: undefined,
payType: '',
payVersion: '',
},
payWay: null,
accounts: [],
orderInfo: {
actualMoney: undefined,
......
src/pages/Order/components/OrderInfo/OrderInfo.tsx
......@@ -5,12 +5,14 @@ import { View, Text } from '@tarojs/components';
import './OrderInfo.scss';
type PageProps = {
orderInfo: {
serviceName: string;
createAt: string;
orderNumber: string;
areaName: string;
equipmentNum: string;
equipmentPosition: string;
};
};
interface OrderInfo {
......@@ -19,12 +21,14 @@ interface OrderInfo {
class OrderInfo extends Component {
render() {
const {
orderInfo: {
serviceName,
createAt,
orderNumber,
areaName,
equipmentNum,
equipmentPosition,
},
} = this.props;
return (
<View>
......
src/pages/Order/components/OrderPayway/OrderPayway.scss 0 → 100644
.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;
}
}
src/pages/Order/components/OrderPayway/OrderPayway.tsx 0 → 100644
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>;
src/pages/Order/components/OrderTitle/OrderTitle.tsx
......@@ -21,7 +21,7 @@ class OrderTitle extends Component {
<Image className='OrderTitle-icon' src={comLogo} />
<Text>成都多彩任意门科技有限公司</Text>
</View>
<View className='OrderTitle-price'>-{price}</View>
<View className='OrderTitle-price'>-{price ? price : ''}</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