Skip to content

M
mr-julyedu
Commit 437e88fb by zhanghaozhe
Options

定金

parent 199214f8
Showing with 497 additions and 485 deletions
src/components/order/deposit/final-order/index.js
...@@ -13,404 +13,416 @@ const RadioItem = Radio.RadioItem ...@@ -13,404 +13,416 @@ const RadioItem = Radio.RadioItem
const Item = Flex.Item const Item = Flex.Item
function OrderList({courses, toggleSelectedCourse}) { function OrderList({courses, toggleSelectedCourse}) {
return ( return (
<Flex wrap={'wrap'}> <Flex wrap={'wrap'}>
{courses.length && courses.map(course => { {courses.length && courses.map(course => {
const {image_name: img, course_id, coupon_desc, coupon_num} = course const {image_name: img, course_id, coupon_desc, coupon_num} = course
const info = ( const info = (
<div className="info"> <div className="info">
<div className="title">{course.course_title}</div> <div className="title">{course.course_title}</div>
<div className="des"> <div className="des">
<div className={'deposit-discount'}> <div className={'deposit-discount'}>
定金折扣：<span className={'price'}>-¥{course.deduction_amount}</span> 定金折扣：<span className={'price'}>-¥{course.deduction_amount}</span>
</div> </div>
{ {
course.coupon_amount != 0 && course.coupon_amount != 0 &&
<div className={'coupon-amount'}> <div className={'coupon-amount'}>
使用优惠券：<span className={'price'}>-¥{course.coupon_amount}</span> 使用优惠券：<span className={'price'}>-¥{course.coupon_amount}</span>
</div> </div>
} }
</div> </div>
<div className="prices"> <div className="prices">
<span className={'sale-price price'}>¥{course.sale_price}</span> <span className={'sale-price price'}>¥{course.sale_price}</span>
<span className={'former-price'}>¥{course.price1}</span> <span className={'former-price'}>¥{course.price1}</span>
</div> </div>
</div> </div>
) )
return ( return (
<React.Fragment key={course.course_id}> <React.Fragment key={course.course_id}>
<Item className={'order-item'}> <Item className={'order-item'}>
<Flex className="select-bar" justify={'between'}> <Flex className="select-bar" justify={'between'}>
<Item> <Item>
<Checkbox defaultChecked onChange={() => { <Checkbox defaultChecked onChange={() => {
toggleSelectedCourse(course) toggleSelectedCourse(course)
}}/> }}/>
</Item> </Item>
<Item className={'final-payment-hint'}> <Item className={'final-payment-hint'}>
待付尾款 待付尾款
</Item> </Item>
</Flex> </Flex>
<VlistBase img={img} <VlistBase img={img}
handleClick={() => { handleClick={() => {
}} }}
info={info} info={info}
/> />
</Item> </Item>
<div className="order-prefer"> <div className="order-prefer">
<List key={course_id}> <List key={course_id}>
<List.Item <List.Item
arrow="horizontal" arrow="horizontal"
onClick={() => { onClick={() => {
}} }}
> >
<Link to={{ <Link to={{
pathname: `/coupons`, pathname: `/coupons`,
search: `?id=${course_id}`, search: `?id=${course_id}`,
state: { state: {
from: '/order' from: '/order'
} }
}}> }}>
<Flex justify='between'> <Flex justify='between'>
<span <span
style={{ style={{
color: '#333', color: '#333',
fontSize: '15px' fontSize: '15px'
}} }}
>优惠券</span> >优惠券</span>
<span <span
style={{ style={{
fontSize: '14px', fontSize: '14px',
color: '#999999' color: '#999999'
}} }}
> >
{!coupon_desc ? (coupon_num === 0 ? '无' : `${coupon_num}张可用`) : (coupon_desc)} {!coupon_desc ? (coupon_num === 0 ? '无' : `${coupon_num}张可用`) : (coupon_desc)}
</span> </span>
</Flex> </Flex>
</Link> </Link>
</List.Item> </List.Item>
</List> </List>
</div> </div>
</React.Fragment> </React.Fragment>
) )
})} })}
</Flex> </Flex>
) )
} }
let mockData = [] let mockData = []
if (browser.isWeixin) { if (browser.isWeixin) {
mockData = [ mockData = [
{value: 1, label: '微信支付', icon: 'iconweixinzhifu'} {value: 1, label: '微信支付', icon: 'iconweixinzhifu'}
] ]
} else { } else {
mockData = [ mockData = [
{value: 1, label: '微信支付', icon: 'iconweixinzhifu'}, {value: 1, label: '微信支付', icon: 'iconweixinzhifu'},
{value: 0, label: '支付宝', icon: 'iconalipay'}, {value: 0, label: '支付宝', icon: 'iconalipay'},
] ]
} }
class FinalDepositOrder extends Component { class FinalDepositOrder extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
pay_amount: 0, pay_amount: 0,
payType: 1, payType: 1,
stageNumber: 0, stageNumber: 0,
orderId: getParam('oid'), orderId: getParam('oid'),
categoryList: [], categoryList: [],
selectedCourses: [], selectedCourses: [],
salePrice: '', salePrice: '',
user_account: '', user_account: '',
useBalance: false, useBalance: false,
info: false, info: false,
order_id: '', order_id: '',
moneyOffRules: [], moneyOffRules: [],
finalEndTime: '', finalEndTime: '',
offset: 0, offset: 0,
appliedMoneyOffRule: {} appliedMoneyOffRule: {}
}
}
onChange = (value) => {
this.setState({
payType: value,
checkPeriod: false,
})
if (value === 2) {
this.setState({
huabei: true,
})
}
} }
// 确定购买 }
pay = () => {
const {payType, order_id} = this.state onChange = (value) => {
if (payType === 0) { this.setState({
this.alipayPay(order_id) payType: value,
} else if (payType === 1) { checkPeriod: false,
this.weixinPay(order_id) })
} if (value === 2) {
this.setState({
huabei: true,
})
} }
}
//提交 // 确定购买
submit = () => { pay = () => {
this.createOrder().then(res => { const {payType, order_id} = this.state
if (res.data.errno == 200) { if (payType === 0) {
this.setState({ this.alipayPay(order_id)
order_id: res.data.data.order_id } else if (payType === 1) {
}, () => { this.weixinPay(order_id)
if (res.data.data.pay_jump === 1) {
this.props.history.push('/purchased')
} else {
this.pay()
}
})
} else {
Toast.info(res.data.msg)
}
})
} }
}
//创建订单 //提交
createOrder = () => { submit = () => {
const {selectedCourses, salePrice, useBalance, user_account} = this.state this.createOrder().then(res => {
return http.post(`${API["base-api"]}/m/deposit/final/create`, { if (res.data.errno == 200) {
course_ids: selectedCourses.map(item => item.course_id), this.setState({
cut_amount: 0, order_id: res.data.data.order_id
pay_amount: salePrice, }, () => {
is_deduction: useBalance ? 1 : 0, if (res.data.data.pay_jump === 1) {
deduction_amount: useBalance ? user_account : 0, this.props.history.push('/purchased')
plat_form: 5, } else {
source: getParam('source') this.pay()
}
}) })
} } else {
// 微信支付 Toast.info(res.data.msg)
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" }
//创建订单
createOrder = () => {
const {selectedCourses, salePrice, useBalance, user_account} = this.state
return http.post(`${API["base-api"]}/m/deposit/final/create`, {
course_ids: selectedCourses.map(item => item.course_id),
cut_amount: 0,
pay_amount: salePrice,
is_deduction: useBalance ? 1 : 0,
deduction_amount: useBalance ? user_account : 0,
plat_form: 5,
source: getParam('source')
})
}
// 微信支付
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) => {
if (res.data.errno === 0) {
window.location.href = res.data.data.url + "&redirect_url=" + encodeURIComponent(window.location.href + "&weixinpay=1").toLowerCase()
} else { } else {
// 微信外部-支付 Toast.info(res.data.msg, 2)
http.get(`${API['base-api']}/pay/wxpay/wap_charge/oid/${orderId}`).then((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 isweixinPay = () => {
let weixin_code = getParam('code') let _this = this
if (weixin_code) { let weixin_code = getParam('code')
if (getParam('oid') === undefined) { if (weixin_code) {
return if (getParam('oid') === undefined) {
} else { return
http.get(`${API['base-api']}/pay/wxpay/pub_charge/oid/${getParam('oid')}/code/${weixin_code}`).then((res) => { } else {
if (res.data.errno === 0) { http.get(`${API['base-api']}/pay/wxpay/pub_charge/oid/${getParam('oid')}/code/${weixin_code}`).then((res) => {
let data = res.data.data if (res.data.errno === 0) {
let data = res.data.data
function onBridgeReady() {
WeixinJSBridge.invoke( function onBridgeReady() {
'getBrandWCPayRequest', { WeixinJSBridge.invoke(
appId: data.appId, //公众号名称，由商户传入 'getBrandWCPayRequest', {
timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数 appId: data.appId, //公众号名称，由商户传入
nonceStr: data.nonceStr, //随机串 timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
package: data.package, nonceStr: data.nonceStr, //随机串
signType: data.signType, //微信签名方式： package: data.package,
paySign: data.paySign //微信签名 signType: data.signType, //微信签名方式：
}, paySign: data.paySign //微信签名
function (res) { },
if (res.err_msg == "get_brand_wcpay_request:ok") { function (res) {
Toast.info('支付成功', 2) if (res.err_msg == "get_brand_wcpay_request:ok") {
_this.intervalPayStatus = setInterval(function () { Toast.info('支付成功', 2)
http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => { _this.intervalPayStatus = setInterval(function () {
if (res.data.errno === 401) { http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => {
clearInterval(_this.intervalPayStatus) if (res.data.errno === 401) {
_this.intervalPayStatus = null clearInterval(_this.intervalPayStatus)
_this.props.history.replace(`/expand/callback?order_id=${getParam('oid')}`) _this.intervalPayStatus = null
} _this.props.history.replace(`/expand/callback?order_id=${getParam('oid')}`)
})
}, 1000)
} else {
alert('支付失败')
}
}
)
} }
})
if (typeof WeixinJSBridge == "undefined") { }, 1000)
if (document.addEventListener) { } else {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false) alert('支付失败')
} 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
window.location.href = '/expand/callback?order_id=' + getParam('oid')
} }
}) )
}, 1000) }
}
// 支付宝支付 if (typeof WeixinJSBridge == "undefined") {
alipayPay = (orderId) => { if (document.addEventListener) {
http.get(`${API['base-api']}/pay/alipay/wap_charge_new/oid/${orderId}`).then((res) => { document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
if (res.data.errno === 0) { } else if (document.attachEvent) {
this.payCallback() document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
window.location = res.data.data.url document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
}
} else { } else {
Toast.info(res.data.msg, 2) onBridgeReady()
} }
} else {
Toast.info(res.data.msg, 2)
}
}) })
}
} }
}
componentDidMount() {
// 支付完成之后获取状态
if (getParam('weixinpay')) { payCallback = () => {
this.payCallback() const _this = this
} // 支付回调
// 定时器轮训获取订单状态
if (browser.isWeixin) { _this.intervalPayStatus = setInterval(function () {
this.isweixinPay(getParam('oid')) http.get(`${API['base-api']}/m/orderState/oid/${getParam('oid')}`).then(res => {
if (res.data.errno === 401) {
clearInterval(_this.intervalPayStatus)
_this.intervalPayStatus = null
window.location.href = '/expand/callback?order_id=' + getParam('oid')
} }
})
http.get(`${API["base-api"]}/m/deposit/final/preorder`) }, 1000)
.then(res => { }
const {data} = res
if (data.errno == 200) { // 支付宝支付
this.setState({ alipayPay = (orderId) => {
categoryList: [...data.data.courses], http.get(`${API['base-api']}/pay/alipay/wap_charge_new/oid/${orderId}`).then((res) => {
salePrice: this.getTotalPrice({ if (res.data.errno === 0) {
courses: [...data.data.courses], this.payCallback()
moneyOffRules: data.data['full_rule'] window.location = res.data.data.url
}), } else {
selectedCourses: [...data.data.courses], Toast.info(res.data.msg, 2)
user_account: data.data.user_account, }
moneyOffRules: data.data['full_rule'], })
finalEndTime: data.data['final_end_time'] }
})
} else { componentDidMount() {
Toast.info(data.msg)
} if (getParam('weixinpay')) {
}) this.payCallback()
} }
// 展示余额抵扣规则 if (browser.isWeixin) {
showInfo = () => { this.isweixinPay(getParam('oid'))
this.setState((prevState) => ({
info: !prevState.info
}))
} }
http.get(`${API["base-api"]}/m/deposit/final/preorder`)
toggleSelectedCourse = course => { .then(res => {
this.setState(prevState => { const {data} = res
const {selectedCourses} = prevState if (data.errno == 200) {
let index = prevState.selectedCourses.findIndex(item => item.course_id == course.course_id) this.setState({
if (index == -1) { categoryList: [...data.data.courses],
selectedCourses.push(course) salePrice: this.getTotalPrice({
} else { courses: [...data.data.courses],
selectedCourses.splice(index, 1) moneyOffRules: data.data['full_rule']
} }),
return {selectedCourses, salePrice: this.getTotalPrice(selectedCourses)} selectedCourses: [...data.data.courses],
}) user_account: data.data.user_account,
} moneyOffRules: data.data['full_rule'],
finalEndTime: data.data['final_end_time']
//获取支付价格 })
getTotalPrice = ( } else {
{ Toast.info(data.msg)
courses = this.state.selectedCourses,
useBalance = this.state.useBalance,
moneyOffRules = this.state.moneyOffRules
} = {}
) => {
let totalPrice = 0
totalPrice += courses.reduce((accu, item) => {
return accu + parseFloat(item['sale_price'])
}, 0)
totalPrice = this.moneyOff(totalPrice, moneyOffRules)
if (useBalance) {
totalPrice -= parseFloat(this.state.user_account)
}
return totalPrice < 0 ? 0 : totalPrice.toFixed(2)
}
moneyOff = (totalPrice, moneyOffRules = this.state.moneyOffRules) => {
let rules = moneyOffRules.sort((a, b) => b.full_amount - a.full_amount)
let result = parseFloat(totalPrice)
for (let i = 0; i < rules.length; i++) {
let rule = rules[i]
if (result >= rule.full_amount) {
this.setState({
appliedMoneyOffRule: rule
})
return result - parseFloat(rule.cut_amount)
}
} }
return result })
}
// 展示余额抵扣规则
showInfo = () => {
this.setState((prevState) => ({
info: !prevState.info
}))
}
toggleSelectedCourse = course => {
this.setState(prevState => {
const {selectedCourses} = prevState
let index = prevState.selectedCourses.findIndex(item => item.course_id == course.course_id)
if (index == -1) {
selectedCourses.push(course)
} else {
selectedCourses.splice(index, 1)
}
let totalPrice = this.getTotalPrice(selectedCourses)
return {selectedCourses, salePrice: totalPrice, offset: this.getBalanceOffset(totalPrice)}
})
}
//获取支付价格
getTotalPrice = (
{
courses = this.state.selectedCourses,
useBalance = this.state.useBalance,
moneyOffRules = this.state.moneyOffRules
} = {}
) => {
let totalPrice = this.getOriginTotalPrice()
totalPrice = this.moneyOff(totalPrice, moneyOffRules)
if (useBalance) {
totalPrice -= parseFloat(this.state.user_account)
} }
return totalPrice < 0 ? 0 : totalPrice.toFixed(2)
//使用余额 }
useBalance = () => {
this.setState(prevState => { //满减计算
const useBalance = !prevState.useBalance moneyOff = (totalPrice, moneyOffRules = this.state.moneyOffRules) => {
let offset = parseFloat(this.state.user_account) - parseFloat(this.getTotalPrice()) let rules = moneyOffRules.sort((a, b) => b.full_amount - a.full_amount)
offset = offset > 0 ? this.getTotalPrice() : this.state.user_account let result = parseFloat(totalPrice)
return { for (let i = 0; i < rules.length; i++) {
useBalance, let rule = rules[i]
salePrice: this.getTotalPrice({useBalance}), if (result >= rule.full_amount) {
offset this.setState({
} appliedMoneyOffRule: rule
}) })
return result - parseFloat(rule.cut_amount)
}
} }
return result
render() { }
const {
orderId, //使用余额
salePrice, useBalance = () => {
payType, this.setState(prevState => {
categoryList, const useBalance = !prevState.useBalance
user_account, let totalPrice = this.getTotalPrice({useBalance})
useBalance, return {
info, useBalance,
finalEndTime, salePrice: totalPrice,
offset, offset: this.getBalanceOffset(totalPrice)
appliedMoneyOffRule }
} = this.state })
return (
<div className='pay-order'> }
<HeaderBar title='课程报名' arrow={true}></HeaderBar>
<WhiteSpace size='sm'></WhiteSpace> getOriginTotalPrice = ({courses = this.state.selectedCourses} = {}) => {
{/*<div className='order-number'> return courses.reduce((accu, item) => {
return accu + parseFloat(item['sale_price'])
}, 0)
}
getBalanceOffset = () => {
let originalTotalPrice = this.getOriginTotalPrice()
let offset = parseFloat(this.state.user_account) - parseFloat(originalTotalPrice)
offset = offset >= 0 ? originalTotalPrice : this.state.user_account
return offset
}
render() {
const {
orderId,
salePrice,
payType,
categoryList,
user_account,
useBalance,
info,
finalEndTime,
offset,
appliedMoneyOffRule
} = this.state
return (
<div className='pay-order'>
<HeaderBar title='课程报名' arrow={true}></HeaderBar>
<WhiteSpace size='sm'></WhiteSpace>
{/*<div className='order-number'>
<WingBlank> <WingBlank>
<Flex justify='between' align='center' style={{height: '44px'}}> <Flex justify='between' align='center' style={{height: '44px'}}>
<span>订单号</span> <span>订单号</span>
...@@ -418,135 +430,135 @@ class FinalDepositOrder extends Component { ...@@ -418,135 +430,135 @@ class FinalDepositOrder extends Component {
</Flex> </Flex>
</WingBlank> </WingBlank>
</div>*/} </div>*/}
<WhiteSpace size='md'></WhiteSpace> <WhiteSpace size='md'></WhiteSpace>
<div className={'order-list'}> <div className={'order-list'}>
<OrderList courses={categoryList} <OrderList courses={categoryList}
toggleSelectedCourse={this.toggleSelectedCourse} toggleSelectedCourse={this.toggleSelectedCourse}
/> />
</div> </div>
<div className="order-balance"> <div className="order-balance">
<List> <List>
<Item <Item
className="order-prefer-text" className="order-prefer-text"
> >
<Flex justify='between'> <Flex justify='between'>
<Flex align='center'> <Flex align='center'>
<span>余额抵扣</span> <span>余额抵扣</span>
<span className="order-balanceprice"> (余额: <i <span className="order-balanceprice"> (余额: <i
className="order-money">{`${user_account}元`}</i>)</span> className="order-money">{`${user_account}元`}</i>)</span>
<i className="iconfont iconiconfront-22 question-mark" onClick={this.showInfo}></i> <i className="iconfont iconiconfront-22 question-mark" onClick={this.showInfo}></i>
</Flex> </Flex>
<Flex> <Flex>
{ {
useBalance ? ( useBalance ? (
<> <>
<span style={{ <span style={{
color: '#FF2121', color: '#FF2121',
fontSize: '15px', fontSize: '15px',
marginRight: "6px" marginRight: "6px"
}}>{`-¥${offset}`}</span> }}>{`-¥${offset}`}</span>
<i className={`iconfont icondanseshixintubiao-5 balance-used`} <i className={`iconfont icondanseshixintubiao-5 balance-used`}
onClick={this.useBalance}></i> onClick={this.useBalance}></i>
</> </>
) : ( ) : (
<i className='circle-icon' onClick={this.useBalance}></i> <i className='circle-icon' onClick={this.useBalance}></i>
) )
} }
</Flex> </Flex>
</Flex> </Flex>
</Item> </Item>
</List> </List>
</div> </div>
<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/>
{
appliedMoneyOffRule.full_amount &&
<div className="money-off">
<WingBlank>
<Flex justify='end' align='center' style={{height: '44px'}}>
<span>满{appliedMoneyOffRule.full_amount}减{appliedMoneyOffRule.cut_amount}：</span>
<span className='money'>{`-￥${appliedMoneyOffRule.cut_amount}`}</span>
</Flex>
</WingBlank>
</div>
}
<WhiteSpace size='md'></WhiteSpace> <WhiteSpace size='md'></WhiteSpace>
<div className='order-number'> <List renderHeader={() => '支付方式'} className='pay-type-list'>
<WingBlank> {mockData.map(i => (
<Flex justify='between' align='center' style={{height: '44px'}}> <RadioItem
<span>支付金额</span> thumb={<i className={`iconfont ${i.icon} ${payType === i.value ? 'checked' : ''}`}></i>}
<span className='money'>{`￥${salePrice}`}</span> key={i.value}
</Flex> checked={payType === i.value}
</WingBlank> onChange={() => this.onChange(i.value)}>
</div> {i.label}
<WhiteSpace/> </RadioItem>
{ ))}
appliedMoneyOffRule.full_amount && </List>
<div className="money-off"> <div className='pay-tip'>{`${finalEndTime}结束支付尾款`}</div>
<WingBlank>
<Flex justify='end' align='center' style={{height: '44px'}}> <div className='pay-button' onClick={this.submit}>确认支付</div>
<span>满{appliedMoneyOffRule.full_amount}减{appliedMoneyOffRule.cut_amount}：</span>
<span className='money'>{`-￥${appliedMoneyOffRule.cut_amount}`}</span>
</Flex>
</WingBlank>
</div>
}
<WhiteSpace size='md'></WhiteSpace> {
<List renderHeader={() => '支付方式'} className='pay-type-list'> info ? (
{mockData.map(i => ( <div style={{
<RadioItem position: 'fixed',
thumb={<i className={`iconfont ${i.icon} ${payType === i.value ? 'checked' : ''}`}></i>} top: 0,
key={i.value} left: 0,
checked={payType === i.value} width: '100%',
onChange={() => this.onChange(i.value)}> height: '100%',
{i.label} backgroundColor: 'rgba(0, 0, 0, 0.8)',
</RadioItem> zIndex: '99'
))} }}>
</List> <div style={{
<div className='pay-tip'>{`${finalEndTime}结束支付尾款`}</div> padding: '20px',
backgroundColor: '#FFF',
<div className='pay-button' onClick={this.submit}>确认支付</div> width: '300px',
height: '170px',
{ margin: '0 auto',
info ? ( position: 'absolute',
<div style={{ left: '50%',
position: 'fixed', top: '50%',
top: 0, transform: 'translate(-50%, -50%)'
left: 0, }}>
width: '100%', <Flex direction='column' justify='between' align='center' style={{height: '100%'}}>
height: '100%', <p style={{fontSize: '16px', color: '#333333'}}>余额抵扣说明</p>
backgroundColor: 'rgba(0, 0, 0, 0.8)', <p style={{
zIndex: '99' lineHeight: '20px',
}}> fontSize: '13px',
<div style={{ color: '#666666'
padding: '20px', }}>分销课程或者参与七月在线的相关活动，可获得资金奖励。账户资金可直接提现，也可抵扣课程费用。</p>
backgroundColor: '#FFF', <div onClick={this.showInfo} style={{
width: '300px', width: '260px',
height: '170px', height: '30px',
margin: '0 auto', lineHeight: '30px',
position: 'absolute', textAlign: 'center',
left: '50%', borderRadius: '3px',
top: '50%', border: '1px solid #0099FF',
transform: 'translate(-50%, -50%)' color: '#0099FF',
}}> fontSize: '15px'
<Flex direction='column' justify='between' align='center' style={{height: '100%'}}> }}>知道了
<p style={{fontSize: '16px', color: '#333333'}}>余额抵扣说明</p> </div>
<p style={{ </Flex>
lineHeight: '20px', </div>
fontSize: '13px',
color: '#666666'
}}>分销课程或者参与七月在线的相关活动，可获得资金奖励。账户资金可直接提现，也可抵扣课程费用。</p>
<div onClick={this.showInfo} style={{
width: '260px',
height: '30px',
lineHeight: '30px',
textAlign: 'center',
borderRadius: '3px',
border: '1px solid #0099FF',
color: '#0099FF',
fontSize: '15px'
}}>知道了
</div>
</Flex>
</div>
</div>
) : null
}
</div> </div>
) ) : null
} }
</div>
)
}
} }
export default WithFullSize(FinalDepositOrder) export default WithFullSize(FinalDepositOrder)
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