Skip to content

M
mr-julyedu
Commit 2b925964 by zhanghaozhe
Options

定金支付页

parent eab140dc
Showing with 735 additions and 1 deletions
src/components/deposit-order/index.js
...@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom'; ...@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
import { http, getParam } from "@/utils"; import { http, getParam } from "@/utils";
import {HeaderBar} from '../../common'; import {HeaderBar} from '../../common';
import "./index.scss" import "./index.scss"
const Item = List.Item; const Item = List.Item;
......
src/components/deposit-pay-order/index.js 0 → 100644
import React, { Component } from 'react'
import { Flex, WingBlank, WhiteSpace, List, Radio, Toast, Checkbox } from 'antd-mobile'
import { http, getParam, is_weixin, browser } from '@/utils'
import { OrderItem, HeaderBar } from '@/common/index'
import { Link } from 'react-router-dom'
import './index.scss'
import { VList } from '@/common'
const Item = List.Item
const Brief = Item.Brief
const RadioItem = Radio.RadioItem
let mockData = []
if (browser.isWeixin) {
mockData = [
{value: 1, label: '微信支付', icon: 'iconweixinzhifu'}
]
} else {
mockData = [
{value: 1, label: '微信支付', icon: 'iconweixinzhifu'},
{value: 0, label: '支付宝', icon: 'iconalipay'},
]
}
export default class PayOrder extends Component {
constructor(props) {
super(props)
this.state = {
pay_amount: 0,
payType: 1,
stageNumber: 0,
checkPeriod: false,
singleMoney: 0,
periodNumber: 0,
orderId: getParam('oid'),
huabei: false,
fenqiList: [
{value: 'zhifubao', qishu: '3', lilv: '2.30%', everyMoney: 300, feiyong: 2.3},
{value: 'weixin', qishu: '6', lilv: '4.50%', everyMoney: 150, feiyong: 4.5},
{value: 'huabei', qishu: '9', lilv: '7.50%', everyMoney: 100, feiyong: 7.5},
],
categoryList: [],
agree: false
}
}
// 支付成功后，判断并重定向
redirectAfterPay = () => {
// status:0成功，1失败
const status = getParam('status')
const type = getParam('type')
const oid = getParam('oid')
const {history} = this.props
if (status || type) {
if (parseInt(status, 10) === 0) {
// type订单类型 0普通订单 1团购 2小团 3砍价 4单集购买 5定金课定金 6定金课尾款
if (parseInt(type, 10) === 2) {
history.push(`/togroup?id=${oid}`)
} else if (parseInt(type, 10) === 4) {
courseId && window.localStorage.setItem('payCourse', courseId)
const courseId = window.localStorage.getItem('payCourse')
courseId && history.push(`/detail?id=${courseId}`, {oid})
} else {
history.push('/purchased')
}
} else {
Toast.info('支付异常', 2)
}
}
}
onChange = (value) => {
this.setState({
payType: value,
checkPeriod: false,
})
if (value === 2) {
this.setState({
huabei: true,
})
}
}
checkStaging = (item) => {
// console.log(item);
this.setState({
huabei: false,
stageNumber: item.value,
singleMoney: item.everyTotal,
periodNumber: item.stage,
checkPeriod: true,
})
}
print = (...e) => {
console.log(e)
}
// 确定购买
pay = () => {
const {payType, orderId} = this.state
if (payType === 0) {
this.alipayPay(orderId)
} else if (payType === 1) {
this.weixinPay(orderId)
}
// else { // 花呗分期暂时不做
// this.huabeiPay(orderId)
// }
}
// 微信支付
weixinPay = (orderId) => {
// 微信内部-支付
if (is_weixin()) {
window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx23dac6775ac82877&redirect_uri=" + encodeURIComponent(window.location.href + "&aa=bb").toLowerCase() + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
} else {
// 微信外部-支付
http.get(`${API['base-api']}/pay/wxpay/wap_charge/oid/${orderId}`).then((res) => {
// console.log(res);
if (res.data.errno === 0) {
window.location.href = res.data.data.url + "&redirect_url=" + encodeURIComponent(window.location.href + "&weixinpay=1").toLowerCase()
} else {
Toast.info(res.data.msg, 2)
}
})
}
}
// 微信内部支付
isweixinPay = () => {
let _this = this
let weixin_code = getParam('code')
if (weixin_code) {
if (getParam('oid') === undefined) {
return
} else {
http.get(`${API['base-api']}/pay/wxpay/pub_charge/oid/${getParam('oid')}/code/${weixin_code}`).then((res) => {
if (res.data.errno === 0) {
let data = res.data.data
function onBridgeReady() {
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
appId: data.appId, //公众号名称，由商户传入
timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
nonceStr: data.nonceStr, //随机串
package: data.package,
signType: data.signType, //微信签名方式：
paySign: data.paySign //微信签名
},
function (res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
Toast.info('支付成功', 2)
_this.intervalPayStatus = setInterval(function () {
http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => {
if (res.data.errno === 401) {
clearInterval(_this.intervalPayStatus)
_this.intervalPayStatus = null
// 获取课程类型
http.get(`${API['base-api']}/m/app_order/detail/${getParam('oid')}`).then(res => {
if (Number(res.data.data.course_type) === 2) {
_this.props.history.replace(`/togroup?id=${getParam('oid')}`)
} else {
// 跳转到已购课程 /purchased 不需要传递任何参数
_this.props.history.replace(`/purchased`)
}
})
}
})
}, 1000)
} else {
alert('支付失败')
}
}
)
}
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
}
} else {
onBridgeReady()
}
} else {
Toast.info(res.data.msg, 2)
}
})
}
}
}
// 支付完成之后获取状态
payCallback = () => {
const _this = this
// 支付回调
// 定时器轮训获取订单状态
_this.intervalPayStatus = setInterval(function () {
http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => {
if (res.data.errno === 401) {
clearInterval(_this.intervalPayStatus)
_this.intervalPayStatus = null
// 获取课程类型
http.get(`${API['base-api']}/m/app_order/detail/${getParam('oid')}`).then(res => {
if (Number(res.data.data.course_type) === 2) {
_this.props.history.replace(`/togroup?id=${getParam('oid')}`)
} else {
// 跳转到已购课程 /purchased 不需要传递任何参数
_this.props.history.replace(`/purchased`)
}
})
}
})
}, 1000)
}
onBridgeReady1 = (data) => {
let _this = this
data = data || _this.BridgeData
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": "wx23dac6775ac82877", //公众号名称，由商户传入
"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
"nonceStr": data.nonceStr, //随机串
"package": data.package,
"signType": data.signType, //微信签名方式：
"paySign": data.paySign //微信签名
},
function (res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
Toast.info('支付成功', 2)
_this.payCallback()
} else {
alert('支付失败')
}
}
)
}
// 支付宝支付
alipayPay = (orderId) => {
http.get(`${API['base-api']}/pay/alipay/wap_charge_new/oid/${orderId}`).then((res) => {
if (res.data.errno === 0) {
this.payCallback()
window.location = res.data.data.url
} else {
Toast.info(res.data.msg, 2)
}
})
}
componentDidMount() {
http.post(`${API["base-api"]}/m/deposit/detail`, {
order_id: this.state.orderId
}).then(res => {
const {data} = res
if (data.errno == 200) {
this.setState({
categoryList: [data.data.course_info],
salePrice: data.data.course_info.sale_price
})
} else {
Toast.info(data.msg)
}
})
/*this.redirectAfterPay()
let data = {}
if(this.props.location.state && this.props.location.state.group){
data = {
order_id: this.state.orderId,
type: 2
}
} else {
data = {
order_id: this.state.orderId,
}
}
http.post(`${API['base-api']}/m/order/detail`,data).then((res) => {
if (res.data.errno !== 200) {
Toast.info(res.data.msg, 2);
return;
}
const {course, pay_amount} = res.data.data;
const fenqiList = [];
[1, 2, 3].map((item) => {
let obj = {};
obj.value = item;
if (item === 1) {
obj.stage = 3; //期数
obj.moneyRate = '2.30%'; // 分期费率展示
obj.rate = 0.023; // 分期费率计算
obj.periodic = (pay_amount / 3).toFixed(2); // 每期本金
} else if (item === 2) {
obj.stage = 6; //期数
obj.moneyRate = '4.50%'; // 分期费率展示
obj.rate = 0.045; // 分期费率计算
obj.periodic = (pay_amount / 6).toFixed(2); // 每期本金
} else {
obj.stage = 12; //期数
obj.moneyRate = '7.50%'; // 分期费率展示
obj.rate = 0.075; // 分期费率计算
obj.periodic = (pay_amount / 9).toFixed(2); // 每期本金
}
obj.serviceFee = ((pay_amount * obj.rate) / obj.stage).toFixed(2); // 每期的手续费 = 总金额 * 费率 / 期数
obj.everyTotal = (parseFloat(obj.periodic) + parseFloat(obj.serviceFee)).toFixed(2);// 每期总费用 = 每期本金 + 每期手续费
fenqiList.push(obj);
});
// console.log(fenqiList);
// { value: 'zhifubao', qishu: '3', lilv: '2.30%', everyMoney: 300, feiyong: 2.3 },
// { value: 'weixin', qishu: '6', lilv: '4.50%', everyMoney: 150, feiyong: 4.5 },
// { value: 'huabei', qishu: '9', lilv: '7.50%', everyMoney: 100, feiyong: 7.5 },
this.setState({
pay_amount,
categoryList: course,
fenqiList,
});
});
if (getParam('is_class') === 1 || getParam('weixinpay')) {
this.payCallback()
}
if (is_weixin()) {
this.setState({
payType: 1
})
this.isweixinPay()
}*/
}
toggleAgree = (e) => {
console.log(e)
this.setState((prevState) => ({agree: !prevState.agree}))
}
render() {
const {
orderId,
salePrice,
payType,
checkPeriod,
singleMoney,
periodNumber,
categoryList,
} = this.state
return (
<div className='pay-order'>
<HeaderBar title='确认支付' arrow={true}></HeaderBar>
<WhiteSpace size='sm'></WhiteSpace>
<div className='order-number'>
<WingBlank>
<Flex justify='between' align='center' style={{height: '44px'}}>
<span>订单号</span>
<span className='number'>{orderId}</span>
</Flex>
</WingBlank>
</div>
<WhiteSpace size='md'></WhiteSpace>
{
categoryList.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title text-overflow-one'>
<Link to={`/detail?id=${item.course_id}`}>{item.course_title}</Link>
</p>
<p className='order-content text-overflow-2'>{item.simpledescription}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.sale_price}</span>
<span className={'price-des'}>（预付定金）</span>
</p>
</div>
)
return (
<VList handleClick={this.print} key={index} img={item.image_name}
id={item.course_id}
info={Info}></VList>
)
})
}
<WhiteSpace size='md'></WhiteSpace>
<div className='order-number'>
<WingBlank>
<Flex justify='between' align='center' style={{height: '44px'}}>
<span>支付金额</span>
<span className='money'>{`￥${salePrice}`}</span>
</Flex>
</WingBlank>
</div>
<WhiteSpace size='md'></WhiteSpace>
<List renderHeader={() => '支付方式'} className='pay-type-list'>
{mockData.map(i => (
<RadioItem
thumb={<i className={`iconfont ${i.icon} ${payType === i.value ? 'checked' : ''}`}></i>}
key={i.value}
checked={payType === i.value}
onChange={() => this.onChange(i.value)}>
{
i.value === 2 ? (
<Flex direction='column' align='start' style={{width: '100%', marginTop: '6px'}}>
<Flex direction='row' justify='between'
style={{width: '100%', paddingRight: '30px'}}>
<span style={{color: '#555555', fontSize: '14px'}}>{i.label}</span>
{
checkPeriod ? (
<span style={{
color: '#333333',
fontSize: '12px'
}}>{`${singleMoney}元 × ${periodNumber}期`}</span>
) : null
}
</Flex>
<Flex justify='start'>
<span style={{color: '#999999', fontSize: '12px'}}>支付上限受限于您的花呗额度</span>
</Flex>
</Flex>
) : (i.label)
}
</RadioItem>
))}
</List>
<Flex>
<Flex.Item>
<Checkbox.AgreeItem>
我已同意定金不退
</Checkbox.AgreeItem>
</Flex.Item>
</Flex>
<div className='pay-tip'>请在15分钟内完成支付，否则届时系统将关闭该订单。</div>
<div className='pay-button' onClick={this.pay}>确认支付</div>
</div>
)
}
}
src/components/deposit-pay-order/index.scss 0 → 100644
.pay-order {
width: 100%;
background-color: #f5f5f5;
margin-bottom: 50px;
.order-number {
background-color: #fff;
span {
font-size: 15px;
color: #333333;
}
.number {
font-size: 12px;
color: #666666;
}
.money {
color: #ff3131;
}
}
.pay-type-list {
.am-list-body {
&::after {
display: none;
}
}
.am-list-header {
color: #333333;
font-size: 15px;
background-color: #fff;
}
.iconalipay {
font-size: 22px;
color: #01aaef;
}
.iconweixinzhifu {
font-size: 22px;
color: #3baf34;
}
.iconhuabei {
font-size: 22px;
color: #01aaef;
}
.am-radio-inner {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #c1c1c1;
}
.am-radio-inner:after {
display: block;
border-color: #fff;
top: 0;
right: 6px;
}
.am-radio.am-radio-checked .am-radio-inner {
background-color: #009aff;
border-radius: 50%;
width: 20px;
height: 20px;
}
.am-radio.am-radio-checked .am-radio-inner:after {
display: block;
}
.am-checkbox-agree .am-checkbox{
left: unset;
right: 10px;
}
}
.pay-tip {
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 12px;
color: #ff3131;
background-color: #fff4ce;
}
.pay-button {
position: fixed;
bottom: 0;
width: 100%;
height: 44px;
line-height: 44px;
text-align: center;
color: #fff;
font-size: 18px;
background-color: #18b4ed;
z-index: 9;
}
.check-staging {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, $alpha: 0.6);
z-index: 19;
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
border-radius: 6px;
background-color: #FFF;
padding-bottom: 10px;
.check-title {
color: #333333;
font-size: 16px;
text-align: center;
width: 100%;
height: 44px;
line-height: 44px;
border-bottom: 1px solid #DDDDDD;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
}
.am-list-item .am-list-line .am-list-extra {
flex-basis: 16%;
}
.am-radio-inner {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #BFBFBF;
background-color: #fff;
}
.am-radio-inner:after {
display: block;
border-color: #fff;
top: 0;
right: 6px;
}
.am-radio.am-radio-checked .am-radio-inner {
background-color: #009aff;
border: 1px solid #FFF;
border-radius: 50%;
width: 20px;
height: 20px;
}
.am-radio.am-radio-checked .am-radio-inner:after {
display: block;
}
}
.order-info {
position: relative;
flex: 1;
.order-title {
font-size: 16px;
color: $color_333;
}
.order-content {
font-size: 14px;
color: $color_666;
margin-top: 14px;
line-height: 18px;
}
.order-des {
height: 24px;
line-height: 33px;
position: absolute;
bottom: 0;
.order-newprice {
font-size: 16px;
color: $redprice;
}
.order-price {
font-size: 12px;
color: $color_999;
margin-left: 15px;
text-decoration: line-through;
}
}
}
.v-list-item {
padding: 10px 15px;
background-color: #fff;
.content {
border: none;
padding-bottom: 0;
.cover {
flex: inherit;
width: 42.2%;
img {
width: 100%;
height: 100%;
}
.course-status {
background-color: rgba(224, 46, 36, 0.6);
}
}
.price-des{
color: #999;
font-size: 11px;
}
}
.info {
width: 52.3%;
position: relative;
display: block;
.title {
font-size: 16px;
color: $color_333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 16px;
line-height: 16px;
}
.contact {
font-size: 14px;
color: $color_666;
margin-top: 14px;
}
.des {
position: absolute;
bottom: 0;
.course-price {
.price {
color: $red;
font-size: 12px;
}
.new {
color: $red;
font-size: 16px;
}
.old {
color: $color_999;
font-size: 12px;
display: inline-block;
margin-left: 15px;
text-decoration: line-through;
}
}
.isbuy {
display: inline-block;
width: 61px;
height: 18px;
background-color: $bg_active;
border-radius: 9px;
color: $white;
font-size: 12px;
text-align: center;
line-height: 18px;
}
}
}
}
}
src/router/router-config.js
...@@ -172,5 +172,9 @@ export default [ ...@@ -172,5 +172,9 @@ export default [
{ {
path: '/deposit-order', path: '/deposit-order',
component: loadable(() => import(/* webpackChunkName: 'deposit-order' */ '@/components/deposit-order')) component: loadable(() => import(/* webpackChunkName: 'deposit-order' */ '@/components/deposit-order'))
} },
{
path: '/deposit-pay-order',
component: loadable(() => import(/* webpackChunkName: 'deposit-pay-order' */ '@/components/deposit-pay-order'))
},
] ]
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