Skip to content

M
mr-julyedu
Commit a3d6fb2e by zhanghaozhe
Options

优惠券

parent 967f31f1
Showing with 445 additions and 6 deletions
src/common/deposit/end-expansion-alert/index.js
......@@ -3,7 +3,7 @@ import { Modal } from 'antd-mobile'
import './index.scss'
export default function ({
start_amount,
amount,
limit_amount,
onCancel = () => {
},
......@@ -12,7 +12,7 @@ export default function ({
const content = (
<>
<div className="end-expansion-alert-ques">
{`你的${start_amount}元优惠券正在膨胀中，
{`你的${amount}元优惠券正在膨胀中，
确定要结束膨胀吗？`}
</div>
<div className="end-expansion-alert-hint">
......
src/components/coupons/Coupon/index.js
......@@ -26,10 +26,10 @@ class Coupon extends PureComponent {
}
stopExpanding = (id, e) => {
const {start_amount, limit_amount} = this.props
const {amount, limit_amount} = this.props
e.stopPropagation()
showAlert({
start_amount,
amount,
limit_amount,
onConfirm: () => {
http.post(`${API.home}/m/end_expansion`, {
......
src/components/deposit-order/index.js 0 → 100644
import React, { Component } from 'react';
import { Flex, List, Toast } from 'antd-mobile';
import { OrderItem } from '@/common/index';
import { Link } from 'react-router-dom';
import { http, getParam } from "@/utils";
import {HeaderBar} from '../../common';
import "./index.scss"
const Item = List.Item;
function OrderList(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
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>);
if(props.locationState && props.locationState.group) {
NewPrice = (<span className='order-newprice'>¥{props.groupPrice}</span>);
}
const Info = (
<div className="order-info">
<p
className='order-title'
style={{
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
}}
onClick={() => props.toDetail(course_id)}
>
{course_title}
</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'>
{NewPrice}
<span className={'price-des'}>（预付定金）</span>
</p>
</div>
);
return (
<OrderItem
{...item}
src={image_name}
id={course_id}
key={index}
info={Info}
isaist={props.isaist}
toDetail={props.toDetail}
>
{
(props.locationState && (props.locationState.type || props.locationState.simple)) ? (
<div className="order-prefer">
<List key={index}>
<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>
</Item>
</List>
</div>
) : null
}
</OrderItem>
)
})
}
</div>
);
}
class Order extends Component {
constructor(props) {
super(props);
this.state = {
groupPrice: '',
total: 0.00, // 需要支付总金额
discount: 0.00, //
useBalance: false,
orderList: [],
info: false,
offset: 0,
depositPrice: 0,
course_id: 165
};
}
// 提交订单
submitOrder = () => {
http.post(`${API["base-api"]}/m/deposit/create`, {
plat_form: 5,
source: 1, //来源 1-详情页 2-活动页,
course_id: this.state.course_id
})
}
componentDidMount() {
http.post(`${API["base-api"]}/m/deposit/preorder`, {
course_id: this.state.course_id
})
.then(res => {
const {data} = res
if(data.errno == 200){
this.setState({
orderList: [data.data.course],
depositPrice: data.data.course['sale_price']
})
}else {
Toast.info(data.msg)
}
})
};
toCourseDetail = (id) => {
const { dispatch, history } = this.props;
// dispatch(getCourses(id, () => {
history.push(`/detail?id=${id}`)
// }));
}
render() {
const {
orderList,
discount,
groupPrice,
depositPrice
} = this.state;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<HeaderBar title='课程报名' arrow={true} />
<div className="order-list">
<OrderList
list={orderList}
courseId={getParam('id')}
locationState={this.props.location.state}
groupPrice={groupPrice}
toDetail={this.toCourseDetail}
/>
</div>
<ul className={'deposit-limit-time'}>
<li>· 7月17日 00:00:00开始支付尾款</li>
<li>· 代金券只能在支付尾款时使用</li>
</ul>
<div className="order-bar">
<div className="order-course">
<span className="order-course-text">{`${orderList.length}门课程`}</span>
</div>
<div className="order-bar-text">
<div className="order-amount">
<span className="order-amount-title">合计:</span>
<span className="order-amount-price">{`￥${depositPrice}`}</span>
</div>
<div className="order-preprice">
<span className="order-preprice-title">已优惠:</span>
<span className="order-preprice-price">{`¥${discount}`}</span>
</div>
</div>
<button type="button" className="order-button has-info">
<span className="order-button-text" onClick={this.submitOrder}>确定订单</span>
</button>
</div>
</Flex.Item>
</Flex>
</div>
)
}
}
export default Order;
src/components/deposit-order/index.scss 0 → 100644
.order-wrapper {
width: 100%;
height: 100vh;
margin-bottom: 50px;
background-color: $bg_f5f5f5;
.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: 8px;
}
.price-des{
color: #999;
font-size: 11px;
}
}
.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;
}
.v-list-item {
margin-top: 8px;
padding: 10px 15px 0 15px;
.content {
border-bottom: none;
}
}
.order-prefer {
.am-list-body{
&::after{
display: none;
}
}
.am-list-content {
font-size: 15px !important;
}
.am-list-line {
padding: 0 15px;
}
}
.am-list-item .am-list-line .am-list-content {
color: $color_333;
}
.order-list {
.am-list-item {
padding-left: 0 !important;
}
}
.deposit-limit-time{
background: #fff;
padding: 11px 15px;
border-top: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
font-size: 13px;
color: #666;
line-height: 1.7;
}
}
src/router/router-config.js
......@@ -168,5 +168,9 @@ export default [
{
path: '/aist-share',
component: loadable(() => import(/* webpackChunkName: 'aist-share'*/'@/components/share-page/aist-share'))
},
{
path: '/deposit-order',
component: loadable(() => import(/* webpackChunkName: 'deposit-order' */ '@/components/deposit-order'))
}
]
\ No newline at end of file
]
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