Skip to content

M
mr-julyedu
Commit de88cb5e by zhanghaozhe
Options

定金

parent 455c9694
Showing with 1360 additions and 46 deletions
src/components/Index/expandActiveToast/index.js
...@@ -42,7 +42,7 @@ class ExpandActiveToast extends Component { ...@@ -42,7 +42,7 @@ class ExpandActiveToast extends Component {
<div className="expand-toast-swiper"> <div className="expand-toast-swiper">
<p>您有<span className="red">{this.state.expandLength}个</span>待支付尾款的课程 再不支付就要过期了！</p> <p>您有<span className="red">{this.state.expandLength}个</span>待支付尾款的课程 再不支付就要过期了！</p>
</div> </div>
<Link to='/expandorder?sourcenum=1'>查看</Link> <Link to='/final-deposit-order?source=1'>查看</Link>
<img <img
onClick={e => this.cleseExpand()} onClick={e => this.cleseExpand()}
......
src/components/detail/btnstatus/index.js
...@@ -253,7 +253,7 @@ class BtnStatus extends Component { ...@@ -253,7 +253,7 @@ class BtnStatus extends Component {
} else { } else {
if(type == 1){ if(type == 1){
this.props.history.push( this.props.history.push(
'/deposit-order', `/deposit-order?oid=${getParam('id')}&source=${1}`,
{ {
id: getParam('id'), id: getParam('id'),
isexpand: 1, isexpand: 1,
...@@ -264,7 +264,7 @@ class BtnStatus extends Component { ...@@ -264,7 +264,7 @@ class BtnStatus extends Component {
let timeStamp = Date.parse(new Date()) / 1000; let timeStamp = Date.parse(new Date()) / 1000;
if (timeStamp >= info.start_timestamp) { if (timeStamp >= info.start_timestamp) {
this.props.history.push( this.props.history.push(
'/expandorder', '/final-deposit-order?source=1',
{ {
id: getParam('id'), id: getParam('id'),
sourcenum: 1 sourcenum: 1
......
src/components/expand/share.js
...@@ -90,7 +90,7 @@ class ExpandShare extends Component { ...@@ -90,7 +90,7 @@ class ExpandShare extends Component {
this.props.history.push('/passport/login') this.props.history.push('/passport/login')
} else { } else {
this.props.history.push( this.props.history.push(
'/course/smallOrder', `/deposit-order?oid=${getParam('id')}&source=${1}`,
{ {
id: courseId, id: courseId,
isexpand: 1, isexpand: 1,
...@@ -109,7 +109,7 @@ class ExpandShare extends Component { ...@@ -109,7 +109,7 @@ class ExpandShare extends Component {
let timeStamp = Date.parse(new Date()) / 1000; let timeStamp = Date.parse(new Date()) / 1000;
if (timeStamp >= time) { if (timeStamp >= time) {
this.props.history.push( this.props.history.push(
'/expandorder', '/final-deposit-order?source=1',
{ {
id: courseId, id: courseId,
sourcenum: 1 sourcenum: 1
......
src/components/order/deposit/deposit-order/index.js
import React, { Component } from 'react'; import React, { Component } from 'react'
import { Flex, List, Toast } from 'antd-mobile'; import { Flex, List, Toast } from 'antd-mobile'
import { OrderItem } from '@common/index'; import { OrderItem } from '@common/index'
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom'
import { http, getParam } from "@/utils"; import { http, getParam } from "@/utils"
import {HeaderBar} from '@common/index'; import { HeaderBar } from '@common/index'
import "./index.scss" import "./index.scss"
const Item = List.Item; const Item = List.Item
function OrderList(props) { function OrderList(props) {
const listData = props.list; const listData = props.list
return ( return (
<div> <div>
{ {
listData.map((item, index) => { listData.map((item, index) => {
const { is_coupon, course_id, image_name, sale_price, simpledescription, course_title, coupon_num, coupon_desc} = item; const {is_coupon, course_id, image_name, sale_price, simpledescription, course_title, coupon_num, coupon_desc} = item
let NewPrice = (<span className='order-newprice'>¥{sale_price}</span>); let NewPrice = (<span className='order-newprice'>¥{sale_price}</span>)
if(props.locationState && props.locationState.group) { if (props.locationState && props.locationState.group) {
NewPrice = (<span className='order-newprice'>¥{props.groupPrice}</span>); NewPrice = (<span className='order-newprice'>¥{props.groupPrice}</span>)
} }
const Info = ( const Info = (
<div className="order-info"> <div className="order-info">
...@@ -34,13 +34,20 @@ function OrderList(props) { ...@@ -34,13 +34,20 @@ function OrderList(props) {
> >
{course_title} {course_title}
</p> </p>
<p className='order-content' style={{ WebkitBoxOrient: 'vertical', WebkitLineClamp: '2', wordBreak: 'break-all', overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box' }}>{simpledescription}</p> <p className='order-content' style={{
WebkitBoxOrient: 'vertical',
WebkitLineClamp: '2',
wordBreak: 'break-all',
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box'
}}>{simpledescription}</p>
<p className='order-des'> <p className='order-des'>
{NewPrice} {NewPrice}
<span className={'price-des'}>（预付定金）</span> <span className={'price-des'}>（预付定金）</span>
</p> </p>
</div> </div>
); )
return ( return (
<OrderItem <OrderItem
...@@ -58,14 +65,16 @@ function OrderList(props) { ...@@ -58,14 +65,16 @@ function OrderList(props) {
<List key={index}> <List key={index}>
<Item <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={{
...@@ -94,12 +103,12 @@ function OrderList(props) { ...@@ -94,12 +103,12 @@ function OrderList(props) {
}) })
} }
</div> </div>
); )
} }
class Order extends Component { class Order extends Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { this.state = {
groupPrice: '', groupPrice: '',
total: 0.00, // 需要支付总金额 total: 0.00, // 需要支付总金额
...@@ -109,47 +118,71 @@ class Order extends Component { ...@@ -109,47 +118,71 @@ class Order extends Component {
info: false, info: false,
offset: 0, offset: 0,
depositPrice: 0, depositPrice: 0,
course_id: 165 course_id: getParam('oid'),
}; user_account: '',
}
} }
// 提交订单 // 提交订单
submitOrder = () => { submitOrder = () => {
http.post(`${API["base-api"]}/m/deposit/create`, { http.post(`${API["base-api"]}/m/deposit/create`, {
plat_form: 5, plat_form: 5,
source: 1, //来源 1-详情页 2-活动页, source: getParam('source'), //来源 1-详情页 2-活动页,
course_id: this.state.course_id course_id: this.state.course_id,
is_deduction: this.state.useBalance ? 1 : 0
}).then(res => { }).then(res => {
const {data} = res const {data} = res
if(data.errno == 200){ if (data.errno == 200) {
this.props.history.replace({pathname: '/deposit-pay-order',search: `?oid=${data.data['order_id']}`}) if(data.data['pay_jump']){
this.props.history.replace(`/expand/callback?order_id=${data.data['order_id']}`)
}else { }else {
this.props.history.replace({pathname: '/deposit-pay-order', search: `?oid=${data.data['order_id']}`})
}
} else {
Toast.info(data.msg) Toast.info(data.msg)
} }
}) })
} }
showInfo = () => {
this.setState((prevState) => ({
info: !prevState.info
}))
}
componentDidMount() { componentDidMount() {
http.post(`${API["base-api"]}/m/deposit/preorder`, { http.post(`${API["base-api"]}/m/deposit/preorder`, {
course_id: this.state.course_id course_id: this.state.course_id
}) })
.then(res => { .then(res => {
const {data} = res const {data} = res
if(data.errno == 200){ if (data.errno == 200) {
this.setState({ this.setState({
orderList: [data.data.course], orderList: [data.data.course],
depositPrice: data.data.course['sale_price'] depositPrice: data.data.course['sale_price'],
user_account: data.data['user_account']
}) })
}else { } else {
Toast.info(data.msg) Toast.info(data.msg)
} }
}) })
}; };
toCourseDetail = (id) => { toCourseDetail = (id) => {
const { dispatch, history } = this.props; const {history} = this.props
// dispatch(getCourses(id, () => {
history.push(`/detail?id=${id}`) history.push(`/detail?id=${id}`)
// })); }
useBalance = () => {
let {user_account, depositPrice} = this.state
let offset = parseFloat(user_account) - parseFloat(depositPrice)
offset = offset > 0 ? depositPrice : offset
this.setState(prevState => ({useBalance: !prevState.useBalance, offset}))
}
updateUserAccount = () => {
} }
render() { render() {
...@@ -157,14 +190,18 @@ class Order extends Component { ...@@ -157,14 +190,18 @@ class Order extends Component {
orderList, orderList,
discount, discount,
groupPrice, groupPrice,
depositPrice depositPrice,
} = this.state; user_account,
useBalance,
info,
offset
} = this.state
return ( return (
<div className="order-wrapper"> <div className="order-wrapper">
<Flex> <Flex>
<Flex.Item> <Flex.Item>
<HeaderBar title='课程报名' arrow={true} /> <HeaderBar title='课程报名' arrow={true}/>
<div className="order-list"> <div className="order-list">
<OrderList <OrderList
list={orderList} list={orderList}
...@@ -174,6 +211,42 @@ class Order extends Component { ...@@ -174,6 +211,42 @@ class Order extends Component {
toDetail={this.toCourseDetail} toDetail={this.toCourseDetail}
/> />
</div> </div>
<div className="order-balance">
<List>
<Item
className="order-prefer-text"
>
<Flex justify='between'>
<Flex align='center'>
<span>余额抵扣</span>
<span className="order-balanceprice"> (余额: <i
className="order-money">{`${user_account}元`}</i>)</span>
<i className="iconfont iconiconfront-22 question-mark"
onClick={this.showInfo}></i>
</Flex>
<Flex>
{
useBalance ? (
<>
<span style={{
color: '#FF2121',
fontSize: '15px',
marginRight: "6px"
}}>{`-¥${offset}`}</span>
<i className={`iconfont icondanseshixintubiao-5 balance-used`}
onClick={this.useBalance}></i>
</>
) : (
<i className='circle-icon' onClick={this.useBalance}></i>
)
}
</Flex>
</Flex>
</Item>
</List>
</div>
<ul className={'deposit-limit-time'}> <ul className={'deposit-limit-time'}>
<li>· 7月17日 00:00:00开始支付尾款</li> <li>· 7月17日 00:00:00开始支付尾款</li>
<li>· 代金券只能在支付尾款时使用</li> <li>· 代金券只能在支付尾款时使用</li>
...@@ -198,6 +271,51 @@ class Order extends Component { ...@@ -198,6 +271,51 @@ class Order extends Component {
</div> </div>
</Flex.Item> </Flex.Item>
</Flex> </Flex>
{
info ? (
<div style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
backgroundColor: 'rgba(0, 0, 0, 0.8)',
zIndex: '99'
}}>
<div style={{
padding: '20px',
backgroundColor: '#FFF',
width: '300px',
height: '170px',
margin: '0 auto',
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)'
}}>
<Flex direction='column' justify='between' align='center' style={{height: '100%'}}>
<p style={{fontSize: '16px', color: '#333333'}}>余额抵扣说明</p>
<p style={{
lineHeight: '20px',
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>
) )
...@@ -205,4 +323,4 @@ class Order extends Component { ...@@ -205,4 +323,4 @@ class Order extends Component {
} }
export default Order; export default Order
src/components/order/deposit/deposit-order/index.scss
...@@ -233,4 +233,68 @@ ...@@ -233,4 +233,68 @@
line-height: 1.7; line-height: 1.7;
} }
.order-balance {
line-height: 44px;
background: #fff;
margin: 8px 0;
.am-list-item {
padding-left: 0 !important;
}
.am-list-line {
padding: 0 15px;
}
.am-list-content {
color: $color_333;
font-size: $font_16;
.iconiconfront-22 {
font-size: 18px;
margin-left: 15px;
}
}
.order-balanceprice {
color: $color_666;
font-size: $font_12;
.order-money {
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.iconiconfront-22.question-mark {
font-size: 24px;
margin-left: 15px;
}
.am-list-body {
&::before, &::after {
display: none;
}
}
.balance-used {
font-size: 24px;
color: #0099FF;
}
.circle-icon {
width: 20px;
height: 20px;
border: 1px solid #BFBFBF;
border-radius: 50%;
margin-right: 2px;
}
}
} }
src/components/order/deposit/final-order/index.js
import React, { Component } from 'react' import React, { Component } from 'react'
import { Checkbox, Flex, List, Radio, Toast, WhiteSpace, WingBlank } from 'antd-mobile'
import { browser, getParam, http, is_weixin } from '@/utils'
import { HeaderBar } from '@common/index'
import VlistBase from '@/common/v-list-base'
import './index.scss'
import { WithFullSize } from '@/HOCs'
import { Link } from "react-router-dom"
const RadioItem = Radio.RadioItem
const Item = Flex.Item
function OrderList({courses, toggleSelectedCourse}) {
return (
<Flex direction={'column'} wrap={'wrap'}>
{courses.length && courses.map(course => {
const {image_name: img, course_id, coupon_desc, coupon_num} = course
const info = (
<div className="info">
<div className="title">{course.course_title}</div>
<div className="des">
<div className={'deposit-discount'}>
定金折扣：<span className={'price'}>-¥{course.deduction_amount}</span>
</div>
{
course.coupon_amount != 0 &&
<div className={'coupon-amount'}>
使用优惠券：<span className={'price'}>-¥{course.coupon_amount}</span>
</div>
}
</div>
<div className="prices">
<span className={'sale-price price'}>¥{course.sale_price}</span>
<span className={'former-price'}>¥{course.price1}</span>
</div>
</div>
)
return (
<React.Fragment key={course.course_id}>
<Item className={'order-item'}>
<Flex className="select-bar" justify={'between'}>
<Item>
<Checkbox defaultChecked onChange={() => {
toggleSelectedCourse(course)
}}/>
</Item>
<Item className={'final-payment-hint'}>
待付尾款
</Item>
</Flex>
<VlistBase img={img}
handleClick={() => {
}}
info={info}
/>
</Item>
<div className="order-prefer">
<List key={course_id}>
<List.Item
arrow="horizontal"
onClick={() => {
}}
>
<Link to={{
pathname: `/coupons`,
search: `?id=${course_id}`,
state: {
from: '/order'
}
}}>
<Flex justify='between'>
<span
style={{
color: '#333',
fontSize: '15px'
}}
>优惠券</span>
<span
style={{
fontSize: '14px',
color: '#999999'
}}
>
{!coupon_desc ? (coupon_num === 0 ? '无' : `${coupon_num}张可用`) : (coupon_desc)}
</span>
</Flex>
</Link>
</List.Item>
</List>
</div>
</React.Fragment>
)
})}
</Flex>
)
}
let mockData = []
if (browser.isWeixin) {
mockData = [
{value: 1, label: '微信支付', icon: 'iconweixinzhifu'}
]
} else {
mockData = [
{value: 1, label: '微信支付', icon: 'iconweixinzhifu'},
{value: 0, label: '支付宝', icon: 'iconalipay'},
]
}
class FinalDepositOrder extends Component {
constructor(props) {
super(props)
this.state = {
pay_amount: 0,
payType: 1,
stageNumber: 0,
orderId: getParam('oid'),
categoryList: [],
selectedCourses: [],
salePrice: '',
user_account: '',
useBalance: false,
info: false,
order_id: '',
moneyOffRules: [],
finalEndTime: '',
offset: 0
}
}
onChange = (value) => {
this.setState({
payType: value,
checkPeriod: false,
})
if (value === 2) {
this.setState({
huabei: true,
})
}
}
// 确定购买
pay = () => {
const {payType, order_id} = this.state
if (payType === 0) {
this.alipayPay(order_id)
} else if (payType === 1) {
this.weixinPay(order_id)
}
}
//提交
submit = () => {
this.createOrder().then(res => {
if (res.data.errno == 200) {
this.setState({
order_id: res.data.data.order_id
}, () => {
if (res.data.data.pay_jump === 1) {
this.props.history.push('/purchased')
} else {
this.pay()
}
})
} else {
Toast.info(res.data.msg)
}
})
}
//创建订单
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 {
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
_this.props.history.replace(`/expand/callback?order_id=${getParam('oid')}`)
}
})
}, 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
window.location.href = '/expand/callback?order_id=' + getParam('oid')
}
})
}, 1000)
}
// 支付宝支付
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() {
if (getParam('weixinpay')) {
this.payCallback()
}
if (browser.isWeixin) {
this.isweixinPay(getParam('oid'))
}
http.get(`${API["base-api"]}/m/deposit/final/preorder`)
.then(res => {
const {data} = res
if (data.errno == 200) {
this.setState({
categoryList: [...data.data.courses],
salePrice: this.getTotalPrice({
courses: [...data.data.courses],
moneyOffRules: data.data['full_rule']
}),
selectedCourses: [...data.data.courses],
user_account: data.data.user_account,
moneyOffRules: data.data['full_rule'],
finalEndTime: data.data['final_end_time']
})
} else {
Toast.info(data.msg)
}
})
}
// 展示余额抵扣规则
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)
}
return {selectedCourses, salePrice: this.getTotalPrice(selectedCourses)}
})
}
//获取支付价格
getTotalPrice = (
{
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.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) {
return result - parseFloat(rule.cut_amount)
}
}
return result
}
//使用余额
useBalance = () => {
this.setState(prevState => {
const useBalance = !prevState.useBalance
let offset = parseFloat(this.state.user_account) - parseFloat(this.getTotalPrice())
offset = offset > 0 ? offset : this.state.user_account
return {
useBalance,
salePrice: this.getTotalPrice({useBalance}),
offset
}
})
}
class DepositFinalOrder extends Component {
render() { render() {
const {
orderId,
salePrice,
payType,
categoryList,
user_account,
useBalance,
info,
finalEndTime,
offset
} = this.state
return ( return (
<div> <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>
<div className={'order-list'}>
<OrderList courses={categoryList}
toggleSelectedCourse={this.toggleSelectedCourse}
/>
</div>
<div className="order-balance">
<List>
<Item
className="order-prefer-text"
>
<Flex justify='between'>
<Flex align='center'>
<span>余额抵扣</span>
<span className="order-balanceprice"> (余额: <i
className="order-money">{`${user_account}元`}</i>)</span>
<i className="iconfont iconiconfront-22 question-mark" onClick={this.showInfo}></i>
</Flex>
<Flex>
{
useBalance ? (
<>
<span style={{
color: '#FF2121',
fontSize: '15px',
marginRight: "6px"
}}>{`-¥${offset}`}</span>
<i className={`iconfont icondanseshixintubiao-5 balance-used`}
onClick={this.useBalance}></i>
</>
) : (
<i className='circle-icon' onClick={this.useBalance}></i>
)
}
</Flex>
</Flex>
</Item>
</List>
</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 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.label}
</RadioItem>
))}
</List>
<div className='pay-tip'>{`${finalEndTime}结束支付尾款`}</div>
<div className='pay-button' onClick={this.submit}>确认支付</div>
{
info ? (
<div style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
backgroundColor: 'rgba(0, 0, 0, 0.8)',
zIndex: '99'
}}>
<div style={{
padding: '20px',
backgroundColor: '#FFF',
width: '300px',
height: '170px',
margin: '0 auto',
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)'
}}>
<Flex direction='column' justify='between' align='center' style={{height: '100%'}}>
<p style={{fontSize: '16px', color: '#333333'}}>余额抵扣说明</p>
<p style={{
lineHeight: '20px',
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>
) )
} }
} }
export default DepositFinalOrder export default WithFullSize(FinalDepositOrder)
src/components/order/deposit/final-order/index.scss
.pay-order {
width: 100%;
background-color: #f5f5f5;
box-sizing: content-box;
padding-bottom: 44px;
.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;
}
}
/*.agreement {
margin-top: 8px;
background: #fff;
.am-checkbox-agree{
.am-checkbox {
left: unset;
right: 6px;
}
.am-checkbox-agree-label{
margin-left: 3px;
}
}
}*/
.price {
color: #FF3131;
margin-right: 10px;
font-size: 12px;
&.sale-price {
font-size: 15px;
}
}
.former-price {
text-decoration: line-through;
color: #999;
}
.pay-tip {
width: 100%;
padding: 21px;
text-align: center;
font-size: 12px;
color: #ff3131;
}
.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;
}
}
.select-bar {
background: #fff;
padding: 11px 15px;
border-bottom: 1px solid #E5E5E5;
.am-flexbox-item {
flex: 0 1 auto;
}
.final-payment-hint {
padding: 4px 6px 5px;
background: $bg-active;
border-radius: 3px;
color: #fff;
}
}
.order-item {
}
.v-list-base-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;
.title {
font-size: 15px;
color: $color_333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 16px;
line-height: 16px;
margin-bottom: 16px;
}
.contact {
font-size: 14px;
color: $color_666;
margin-top: 14px;
}
.des {
color: #999;
.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;
}
}
& .prices:last-child {
position: absolute;
bottom: 0;
}
}
}
//order.scss
.order-balance {
height: 44px;
line-height: 44px;
padding: 0 15px;
background: #fff;
.am-list-item {
padding-left: 0 !important;
}
.am-list-line {
padding: 0 15px;
}
.am-list-content {
color: $color_333;
font-size: $font_16;
.iconiconfront-22 {
font-size: 18px;
margin-left: 15px;
}
}
.order-balanceprice {
color: $color_666;
font-size: $font_12;
.order-money {
color: #ff2121;
font-size: $font_12 !important;
font-weight: normal;
font-style: inherit;
vertical-align: middle;
margin: 0;
}
}
.iconiconfront-22.question-mark {
font-size: 24px;
margin-left: 15px;
}
.am-list-body {
&::before, &::after {
display: none;
}
}
.balance-used {
font-size: 24px;
color: #0099FF;
}
.circle-icon {
width: 20px;
height: 20px;
border: 1px solid #BFBFBF;
border-radius: 50%;
margin-right: 2px;
}
}
.order-prefer {
width: 100%;
margin-bottom: 6px;
.am-list-body {
&::after {
display: none;
}
}
.am-list-content {
font-size: 15px !important;
}
}
/*.order-tab {
color: $black;
background: $bg_f7f9fc;
}
.order-information {
display: flex;
width: 100%;
overflow: hidden;
padding: 29px 15px;
color: $color_555;
background-color: $bg_fff;
position: relative;
}
.order-information::before {
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-information2 {
height: 80px;
background-color: #FFF;
margin-top: 8px;
position: relative;
.user-icon {
font-size: 28px;
flex-basis: 40px;
}
.order-cell {
height: 50px;
font-size: 13px;
color: $color_333;
line-height: 20px;
flex: 1 1 auto;
.name {
margin-bottom: 10px;
}
}
}
.order-information2::before {
content: '';
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
}
.order-addsize {
font-size: 22px !important;
margin-bottom: 0px;
height: 22px;
color: $active;
line-height: 22px;
}
.order-next {
line-height: 22px;
margin-bottom: 0px;
}
.order-list {
margin-top: 8px;
background-color: #F5F5F5;
.public-content {
padding: 10px 15px;
}
}
.order-infotext {
flex: 1;
height: 22px;
line-height: 22px;
margin-left: 10px;
font-size: $font_14;
color: $color_555;
}
.order-info {
color: $color_666;
font-size: $font_14;
min-width: 160px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-around;
.order-title {
color: $color_333;
font-size: $font_16;
}
.order-content {
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-newprice {
color: $redprice;
font-size: $font_16;
margin-right: 15px;
}
.order-price {
color: $color_999;
font-size: $font_12;
text-decoration: line-through;
}
}
.order-bar {
width: 100%;
position: fixed;
bottom: 0;
z-index: 2;
height: 50px;
display: flex;
font-size: 14px;
align-items: center;
background-color: $bg_fff;
}
.order-course {
margin-left: 20px;
.order-course-text {
font-size: $font_16;
color: $color_333;
}
}
.order-bar-text {
flex: 1;
text-align: right;
color: #323233;
padding-right: 20px;
.order-amount {
font-size: $font_14;
color: $color_333;
.order-amount-price {
color: $redprice;
}
}
.order-preprice {
font-size: $font_12;
color: $color_555;
}
}
.order-button {
width: 110px;
height: 50px;
display: inline-block;
padding: 0;
background-color: $bg_ff9898;
color: $white;
line-height: 48px;
font-size: 16px;
border-radius: 0px;
text-align: center;
box-sizing: border-box;
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
border: 1px solid transparent;
}
.has-info {
background-color: #FF3131;
}
.am-list-item .am-list-line .am-list-content {
color: $color_333;
}
.order-list {
.am-list-item {
padding-left: 0 !important;
}
}
*/
}
src/router/router-config.js
import loadable from '@loadable/component' import loadable from '@loadable/component'
import Index from '@/components/Index'; import Index from '@/components/Index'
import My from '@/components/my'; import My from '@/components/my'
import Passport from '@/components/passport'; import Passport from '@/components/passport'
import Scholarship from '@/components/scholarship'; import Scholarship from '@/components/scholarship'
const Coupons = loadable(() => import(/* webpackChunkName: 'coupons'*/ '@/components/coupons')) const Coupons = loadable(() => import(/* webpackChunkName: 'coupons'*/ '@/components/coupons'))
const Study = loadable(() => import(/* webpackChunkName: 'study'*/'@/components/study')) const Study = loadable(() => import(/* webpackChunkName: 'study'*/'@/components/study'))
...@@ -171,14 +171,21 @@ export default [ ...@@ -171,14 +171,21 @@ export default [
path: '/aist-share', path: '/aist-share',
component: loadable(() => import(/* webpackChunkName: 'aist-share'*/'@/components/share-page/aist-share')) component: loadable(() => import(/* webpackChunkName: 'aist-share'*/'@/components/share-page/aist-share'))
}, },
//定金订单页面
{ {
path: '/deposit-order', path: '/deposit-order',
component: loadable(() => import(/* webpackChunkName: 'deposit-order' */ '@components/order/deposit/deposit-order')) component: loadable(() => import(/* webpackChunkName: 'deposit-order' */ '@components/order/deposit/deposit-order'))
}, },
//定金支付页面
{ {
path: '/deposit-pay-order', path: '/deposit-pay-order',
component: loadable(() => import(/* webpackChunkName: 'deposit-pay-order' */ '@components/order/deposit/deposit-pay-order')) component: loadable(() => import(/* webpackChunkName: 'deposit-pay-order' */ '@components/order/deposit/deposit-pay-order'))
}, },
//尾款支付页面
{
path: '/final-deposit-order',
component: loadable(() => import(/* webpackChunkName: 'deposit-pay-order' */ '@components/order/deposit/final-order'))
},
// 定金支付之后 // 定金支付之后
{ {
path: '/expand/callback', path: '/expand/callback',
......
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