Skip to content

M
mr-julyedu
Commit 904554c4 by xuzhenghua
Options

detail

parents ec0fb063 a04430d7
Showing with 1342 additions and 176 deletions
.gitignore
......@@ -18,6 +18,7 @@
.env.development.local
.env.test.local
.env.production.local
.vscode/
npm-debug.log*
yarn-debug.log*
......
src/assets/css/index.scss
......@@ -483,4 +483,17 @@ input[type="radio"]:checked:before {
background: #1abc9c;
border-radius: 50%;
border: none;
}
.directions-p {
font-size: 14px;
line-height: 21px;
color: #555555;
font-weight: 300;
}
.directions-div {
font-size: 13px;
line-height: 24px;
color: #333333;
font-weight: 600;
}
\ No newline at end of file
src/assets/font/iconfont.css
......@@ -495,6 +495,10 @@
content: "\e67d";
}
.iconaccounttip:before {
content: "\e61b";
}
.iconcelluar:before {
content: "\e680";
}
......
src/common/OrderList/orderlist.scss
......@@ -43,8 +43,6 @@
}
.order-des {
position: absolute;
bottom: 0;
height: 24px;
line-height: 33px;
......
src/components/my/index.js
......@@ -19,6 +19,7 @@ class My extends PureComponent {
}
}
render() {
let { history } = this.props;
return (
<div className="flex-container">
<Flex>
......@@ -99,7 +100,6 @@ class My extends PureComponent {
</Item>
</Link>
</List>
<Link to='/scholarship'>
<List renderHeader={() => ''}>
......@@ -113,6 +113,7 @@ class My extends PureComponent {
</Item>
</List>
</Link>
</Flex.Item>
</Flex>
<WhiteSpace size="lg"/>
......
src/components/order/index.js
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'
import { Link } from 'react-router-dom'
import { Flex, NavBar, List, WingBlank, Toast } from 'antd-mobile';
import { OrderItem } from '@/common/index';
import { Link } from 'react-router-dom';
import { http, api } from "@/utils";
import {throttle} from 'lodash';
import "./order.scss"
const Item = List.Item;
const mockData = [
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
content: '涵盖ML主流算法及其应用-文字超过一行换行',
newprice: '980',
price: '1280',
id: '110'
}
]
function OrderList(props) {
const listData = props.list;
return (
......@@ -43,11 +17,11 @@ function OrderList(props) {
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title'>{item.title}</p>
<p className='order-content'>{item.content}</p>
<p className='order-title' style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.course_title}</p>
<p className='order-content' style={{ WebkitBoxOrient: 'vertical', WebkitLineClamp: '2', wordBreak: 'break-all', overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box' }}>{item.simpledescription}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.newprice}</span>
<span className='order-price'>¥{item.price}</span>
<span className='order-newprice'>¥{item.price1}</span>
<span className='order-price'>¥{item.price0}</span>
</p>
</div>
)
......@@ -60,8 +34,13 @@ function OrderList(props) {
arrow="horizontal"
onClick={() => { }}
>
优惠券
</Item>
<Link to='/coupons'>
<Flex justify='between'>
<span style={{color: '#333', fontSize: '15px'}}>优惠券</span>
<span style={{fontSize: '14px', color: '#999999'}}>{item.coupon_num === 0 ? '无' : `${item.coupon_num}张可用`}</span>
</Flex>
</Link>
</Item>
</List>
</div>
</OrderItem>
......@@ -76,87 +55,229 @@ class Order extends Component {
constructor(props) {
super(props);
this.state = {
perfect: true
perfect: this.props.location.state,
user_account: 0.00, // 账户余额
total_sale: 0.00, // 需要支付总金额
discount: 0.00, //
useBalance: false,
orderList: [],
info: false,
offset: 0,
}
}
handleClick = () => {
console.log(1);
// 提交订单
submitOrder = () => {
if (!this.state.perfect) {
Toast.info('请完善报名信息！');
}
if(this.state.orderList.lengtjh === 0) {
Toast.info('没有要提交的订单！');
return;
}
}
render() {
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{"height": "44px"}}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
// 使用余额
useBalance = () => {
let useBalanceFlag = this.state.useBalance;
this.setState({
useBalance: !useBalanceFlag
});
if(!useBalanceFlag){
this.cacheObj = {
...this.state
}
}
// console.log(useBalance);
let totalSale = parseFloat(this.cacheObj.total_sale),
userAccount = parseFloat(this.cacheObj.user_account);
if(!useBalanceFlag) {
if(totalSale > userAccount) {
this.setState({
offset: userAccount.toFixed(2),
total_sale: (totalSale - userAccount).toFixed(2),
discount: userAccount.toFixed(2),
});
}else{
this.setState({
offset: totalSale.toFixed(2),
total_sale: 0,
discount: totalSale.toFixed(2),
});
}
}else{
this.setState({
offset: this.cacheObj.offset,
total_sale: this.cacheObj.total_sale,
discount: this.cacheObj.discount,
});
}
this.computedMoney();
}
// 计算金额、优惠金额、优惠券等
computedMoney = () => {
};
// 展示余额抵扣规则
showInfo = () => {
this.setState((prevState)=>({
info: !prevState.info
}));
};
componentDidMount() {
http.get(`${api.home}/m/order/preorder`).then((res) => {
console.log(res);
if (res.data.code !== 200) {
return;
}
const { course, total_sale, user_account, user_info, discount } = res.data.data;
this.dataCache = JSON.parse(JSON.stringify(res.data.data));
console.log(course);
this.setState({
perfect: user_info,
orderList: course,
user_account,
total_sale,
discount,
});
})
// // 获取报名信息 获取课程列表 获取用户账户余额
// Promise.race([http.get(), http.get(), http.get()]).then(res=>{
// });
};
render() {
const {
perfect,
orderList,
user_account,
total_sale,
discount,
useBalance,
info,
offset,
} = this.state;
return (
<div className="order-wrapper">
<Flex>
<Flex.Item>
<NavBar
style={{ "height": "44px" }}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
课程报名
</NavBar>
{
!this.state.perfect &&
<Link to='/orderinfo' className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
{
!this.state.perfect &&
<Link to='/orderinfo' className="order-information">
<i className="iconfont iconiconfront-6 order-addsize"></i>
<div className="order-infotext">完善报名信息</div>
<i className="iconfont iconiconfront-70 order-next"></i>
</Link>
}
{
this.state.perfect &&
<div className="order-information2">
<WingBlank>
<Link to={{
pathname: '/orderinfo',
state: this.state.perfect
}
} >
<Flex align='center' justify='between' style={{ height: '80px' }}>
<i className="iconfont iconiconfront-20 user-icon"></i>
<Flex direction='column' justify='between' align='start' className="order-cell">
<div className="name">{`姓名：${perfect.real_name}`}</div>
<div>{`电话：${perfect.cellphone}`}</div>
</Flex>
<Flex align='start' className="order-cell">
<div>{`QQ：${perfect.qq}`}</div>
</Flex>
</Flex>
</Link>
}
{
this.state.perfect &&
<div className="order-information2">
<i className="iconfont iconiconfront-20"></i>
<div className="order-cell">
<div className="name">姓名: 张三</div>
<div>电话: 13266532323</div>
</div>
<div className="order-cell">
<div>QQ: 1084251364</div>
</div>
</div>
}
<div className="order-list">
<OrderList list={mockData}/>
</WingBlank>
</div>
}
<div className="order-list">
<OrderList list={orderList} compute={this.computedMoney}/>
</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" onClick={this.showInfo}></i>
</Flex>
{
useBalance ? (
<div>
<span style={{ color: '#FF2121', fontSize: '15px', marginRight: "6px" }}>{`-${offset}`}</span>
<i className="iconfont icondanseshixintubiao-5" onClick={throttle(this.useBalance, 600)}></i>
</div>
) : (
<i className="iconfont iconiconfront-3" onClick={this.useBalance}></i>
)
}
</Flex>
</Item>
</List>
</div>
<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">{`￥${total_sale}`}</span>
</div>
<div className="order-balance">
<List>
<Item
onClick={() => { }}
className="order-prefer-text"
extra={<i className="iconfont icondanseshixintubiao-5"></i>}
>
余额抵扣
<span className="order-balanceprice"> (账户余额: <i className="order-money">1元</i>)</span>
<i className="iconfont iconiconfront-22"></i>
</Item>
</List>
<div className="order-preprice">
<span className="order-preprice-title">已优惠:</span>
<span className="order-preprice-price">{`¥${discount}`}</span>
</div>
<div className="order-bar">
<div className="order-course">
<span className="order-course-text">2门课程</span>
</div>
<div className="order-bar-text">
<div className="order-amount">
<span className="order-amount-title">合计:</span>
<span className="order-amount-price">¥ 30.50</span>
</div>
<div className="order-preprice">
<span className="order-preprice-title">已优惠:</span>
<span className="order-preprice-price">¥ 200.50</span>
</div>
</div>
<button type="button" className="order-button">
<span className="order-button-text">提交订单</span>
</div>
{
perfect ? (
<button type="button" className="order-button has-info">
<span className="order-button-text" onClick={this.submitOrder}>提交订单</span>
</button>
</div>
</Flex.Item>
</Flex>
</div>
) : (
)
}
<button type="button" className="order-button">
<span className="order-button-text" onClick={this.submitOrder}>提交订单</span>
</button>
)
}
</div>
</Flex.Item>
</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>
)
}
}
......
src/components/order/order.scss
.order-wrapper {
width: 100%;
height: 100vh;
margin-bottom: 50px;
background-color: $bg_f5f5f5;
......@@ -31,21 +32,40 @@
background-size: 80px;
}
.order-cell {
width: 50%;
height: 45px;
font-size: $font_14;
color: $color_333;
margin-left: 20px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
.order-information2 {
height: 80px;
background-color: #FFF;
margin-top: 8px;
position: relative;
.user-icon {
font-size: 28px;
}
.name {
margin-bottom: 10px;
.order-cell {
height: 50px;
font-size: 13px;
color: $color_333;
line-height: 20px;
.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;
......@@ -61,7 +81,7 @@
.order-list {
margin-top: 8px;
background-color: $white;
background-color: #F5F5F5;
.public-content {
padding: 10px 15px;
}
......@@ -72,13 +92,18 @@
height: 22px;
line-height: 22px;
margin-left: 10px;
font-size: $font_16;
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 {
height: 16px;
......@@ -88,16 +113,11 @@
}
.order-content {
margin-top: 10px;
color: $color_666;
font-size: $font_14;
line-height: 18px;
}
.order-des {
margin-top: 10px;
}
.order-newprice {
color: $redprice;
font-size: $font_16;
......@@ -170,6 +190,9 @@
-webkit-text-size-adjust: 100%;
border: 1px solid transparent;
}
.has-info {
background-color: #FF3131;
}
.v-list-item {
margin-top: 8px;
......@@ -181,6 +204,9 @@
}
.order-prefer {
.am-list-content {
font-size: 15px !important;
}
.am-list-line {
padding: 0 15px;
}
......
src/components/order/orderDes.js 0 → 100644
import React, { Component } from 'react'
export default class orderDes extends Component {
render() {
return (
<div>
</div>
)
}
}
function orderDes(props) {
const listData = props.list;
return (
<div>
{
listData.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title' style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.course_title}</p>
<p className='order-content' style={{ WebkitBoxOrient: 'vertical', WebkitLineClamp: '2', wordBreak: 'break-all', overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box' }}>{item.simpledescription}</p>
<p className='order-des'>
<span className='order-newprice'>¥{item.price1}</span>
<span className='order-price'>¥{item.price0}</span>
</p>
</div>
)
return (
<OrderItem {...item} key={index} info={Info}>
<div className="order-prefer">
<List key={index}>
<Item
arrow="horizontal"
onClick={() => { }}
>
<Link to='/coupons'>
<Flex justify='between'>
<span style={{color: '#333', fontSize: '15px'}}>优惠券</span>
<span style={{fontSize: '14px', color: '#999999'}}>{item.coupon_num === 0 ? '无' : `${item.coupon_num}张可用`}</span>
</Flex>
</Link>
</Item>
</List>
</div>
</OrderItem>
)
})
}
</div>
);
}
\ No newline at end of file
src/components/order/orderinfo.js
import React, { Component } from 'react';
import { Flex, NavBar, List, InputItem, Button, WhiteSpace, WingBlank } from 'antd-mobile';
import { Flex, NavBar, List, InputItem, Button, WhiteSpace, WingBlank, Toast } from 'antd-mobile';
import { Formik, Field, Form, withFormik } from 'formik';
import { http, api } from "@/utils";
class orderinfo extends Component {
render() {
const { getFieldProps } = this.props.form;
return (
<Flex>
<Flex.Item>
const InnerForm = ({
values,
errors,
touched,
setFieldValue,
handleBlur,
handleSubmit,
isSubmitting,
}) => (
<form>
<InputItem
clear
name="real_name"
onChange={(value) => setFieldValue('real_name', value)}
placeholder="请输入您的真实姓名"
value={values.real_name}
>姓名</InputItem>
<InputItem
clear
type='phone'
name='cellphone'
placeholder="请输入您的手机号码"
onChange={(value) => setFieldValue('cellphone', value)}
value={values.cellphone}
>电话</InputItem>
<InputItem
clear
name='qq'
placeholder="请输入您的QQ号码"
maxLength='15'
onChange={(value) => setFieldValue('qq', value)}
value={values.qq}
>QQ</InputItem>
<div style={{ marginTop: '21px' }}>
<WingBlank>
<Button type='primary' onClick={handleSubmit}>确认</Button>
</WingBlank>
</div>
</form>
);
const MyForm = withFormik({
mapPropsToValues: props => ({ ...props.userInfo }),
validate: (values, props) => {
const errors = {};
return errors;
},
handleSubmit: (
values,
FormBag
) => {
if (!values.real_name) {
Toast.info('请输入姓名！', undefined, undefined, false);
return;
}
if (!values.cellphone) {
Toast.info('请输入手机号！', undefined, undefined, false);
return;
} else if (!/1\d{10}/g.test(values.cellphone.replace(/\s+/g, ''))) {
Toast.info('请输入正确的手机号！', undefined, undefined, false);
return;
}
if (!values.qq) {
Toast.info('请输入QQ号！', undefined, undefined, false);
return;
} else if (!/\d{5,}/g.test(values.qq)) {
Toast.info('请输入正确QQ号！', undefined, undefined, false);
return;
}
http.post(`${api.home}/m/order/saveUserInfo`, values).then(res=>{
if(res.data.code !== 200) {
Toast.info(res.data.msg, undefined, undefined, false);
return;
}
Toast.info('保存成功！', undefined, undefined, false);
FormBag.props.history.push({
pathname: '/order',
state: values
});
});
},
})(InnerForm);
class Orderinfo extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<NavBar
style={{ "height": "44px" }}
style={{ "height": "44px", backgroundColor: '#F7F9FC' }}
className="order-tab"
mode="light"
icon={<i className="iconfont iconiconfront-68"></i>}
>
报名信息
</NavBar>
<div>
<List>
<InputItem
{...getFieldProps('autofocus')}
clear
placeholder="请输入您的真实姓名"
ref={el => this.autoFocusInst = el}
>电话</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的手机号码"
ref={el => this.inputRef = el}
>姓名</InputItem>
<InputItem
{...getFieldProps('focus')}
clear
placeholder="请输入您的QQ号码"
ref={el => this.inputRef = el}
>QQ</InputItem>
</List>
<WhiteSpace />
<div style={{marginTop: '21px'}}>
<WingBlank>
<Button type="primary">确认</Button>
</WingBlank>
</div>
</div>
</Flex.Item>
</Flex>
)
}
}
</NavBar>
<MyForm history={this.props.history} userInfo={this.props.location.state}/>
</div>
)
}
};
export default orderinfo;
\ No newline at end of file
export default Orderinfo;
\ No newline at end of file
src/components/order/payOrder/PayOrder.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WingBlank, WhiteSpace, List, Radio } from 'antd-mobile';
import {api, http} from '@/utils';
import { OrderItem } from '@/common/index';
import './PayOrder.scss';
const Item = List.Item;
const Brief = Item.Brief;
const RadioItem = Radio.RadioItem;
let mockData = [
{ value: 0, label: '支付宝', icon: 'iconzhifubaox-'},
{ value: 1, label: '微信支付', icon: 'iconweixinzhifu'},
{ value: 2, label: '花呗分期', icon: 'iconhuabei'},
];
export default class PayOrder extends Component {
constructor(props) {
super(props);
this.state = {
money: 1000.00,
payType: 0,
}
}
onChange = (value) => {
this.setState({
payType: value,
});
};
componentDidMount() {
http.get(`${api.home}/m/order/preorder`).then((res) => {
console.log(res);
if (res.data.code !== 200) {
return;
}
const { course, total_sale, user_account, user_info, discount } = res.data.data;
// this.setState({
// perfect: user_info,
// orderList: course,
// user_account,
// total_sale,
// discount,
// });
})
}
render() {
const { money, payType } = this.state;
return (
<div className='pay-order'>
<WhiteSpace size='sm'></WhiteSpace>
<div className='order-number'>
<WingBlank>
<Flex justify='between' align='center' style={{ height: '44px' }}>
<span>订单号</span>
<span className='number'>20160815850565</span>
</Flex>
</WingBlank>
</div>
<WhiteSpace size='md'></WhiteSpace>
<div className='order-number'>
<WingBlank>
<Flex justify='between' align='center' style={{ height: '44px' }}>
<span>支付金额</span>
<span className='money'>{`￥${money}`}</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'>请在24小时内完成支付，否则届时系统将关闭该订单。</div>
<div className='pay-button'>确认支付</div>
</div>
)
}
}
src/components/order/payOrder/PayOrder.scss 0 → 100644
.pay-order {
width: 100%;
height: 100vh;
background-color: #f5f5f5;
.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-header {
color: #333333;
font-size: 15px;
background-color: #fff;
}
.iconzhifubaox- {
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;
}
}
.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;
}
}
src/components/scholarship/CategoryItem/CategoryItem.js 0 → 100644
import React, { Component } from 'react';
import {Flex, WingBlank} from 'antd-mobile';
import './CategoryItem.scss';
export default class CategoryItem extends Component {
constructor(props) {
super(props);
}
render() {
const {course_title, price1, price0, first_level_tip, image_name, upgrade, upgradeImg} = this.props;
return (
<WingBlank>
<div className={'category'}>
<div className={'imageContainer'}>
<img className={'image'} src={image_name}></img>
{
upgrade ? (
<img src={upgradeImg}></img>
) : (null)
}
</div>
<div className={'content'}>
<Flex direction='column' justify='around' align='start' style={{height: '90px'}}>
<p className={'text-overflow-one'}>{course_title}</p>
<p><span className={'priceNow'}>{`￥${price1}`}</span><span className={'pricePrimary'}>{`￥${price0}`}</span></p>
<div className={'shareMoney'} >{`分享赚${first_level_tip}元`}</div>
</Flex>
</div>
</div>
</WingBlank>
)
}
}
src/components/scholarship/CategoryItem/CategoryItem.scss 0 → 100644
.category {
display: flex;
align-items: flex-start;
height: 90px;
background-color: #fff;
margin-top: 15px;
.imageContainer {
flex: 0 0 auto;
width: 125px;
height: 90px;
border-radius: 3px;
margin-right: 15px;
.image {
width: 125px;
height: 90px;
border-radius: 3px;
}
}
.content {
flex: 1 1 auto;
.priceNow {
color: #ff3131;
font-size: 15px;
margin-right: 15px;
}
.pricePrimary {
color: #999999;
font-size: 12px;
text-decoration: line-through;
}
.shareMoney {
height: 28px;
line-height: 28px;
text-align: center;
width: 90px;
color: #fff;
font-size: 12px;
background-color: #ff4000;
border-radius: 3px;
}
}
}
src/components/scholarship/DrawDocument/DrawDocument.js 0 → 100644
import React, { Component } from 'react';
import { Flex, WhiteSpace, WingBlank } from 'antd-mobile';
import './DrawDocument.scss'
export default class DrawDocument extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className={'drawDocument'}>
<div>
<WingBlank className={'navbar'}>
<i className={'iconfont iconiconfront-68 back'} onClick={this.props.history.goBack}></i>
<div className={"common-ft-15"}>规则说明</div>
</WingBlank>
</div>
<div className={'content'}>
<WingBlank>
<div className={'directions-div'}>分销规则</div>
<WhiteSpace size='md'></WhiteSpace>
<p className={'directions-p'}>点击『分享赚钱』生成您的专属海报，把专属海报分享到微信、微博、QQ、知乎、贴吧等，他人通过您的海报购买后您可获得相应的佣金奖励。</p>
<WhiteSpace size='lg'></WhiteSpace>
<WhiteSpace size='lg'></WhiteSpace>
<div className={'directions-div'}>提现规则</div>
<WhiteSpace size='md'></WhiteSpace>
<p className={'directions-p'}>1. 已开始的直播课程，用户购买后佣金会实时转入您的账号余额；</p>
<p className={'directions-p'}>2. 尚未开课的直播课程，用户购买后归属您的佣金户暂时存放在『待确认金额』中，直到该课程正式开课。如果用户没有退款，对应的订单金额会自动转入您的账号余额，否则该佣金会自动收回；</p>
<p className={'directions-p'}>3. 余额中的金额可随时提现。</p>
</WingBlank>
</div>
<div className={'bottom'}>
<WingBlank>
<Flex justify='between' align='center' style={{height: '44px'}}>
<p className={'tip'}>收支明细及待确认金额请前往App查看</p>
<div className={'app'}>在APP打开</div>
</Flex>
</WingBlank>
</div>
</div>
)
}
}
src/components/scholarship/DrawDocument/DrawDocument.scss 0 → 100644
.drawDocument {
background-color: #F7F9FC;
.navbar {
font-size: 16px;
color: #333333;
height: 44px;
position: relative;
i {
font-size: 22px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
div {
margin: 0 auto;
height: 44px;
line-height: 44px;
text-align: center;
}
}
.content {
background-color: #FFF;
padding-top: 20px;
}
.bottom {
height: 44px;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
right: 0;
.tip {
color: #555555;
font-size: 12px;
padding-left: 5px;
}
.app {
width: 88px;
height: 22px;
line-height: 22px;
text-align: center;
border: 1px solid #0099FF;
border-radius: 11px;
font-size: 12px;
color: #0099FF;
}
}
}
\ No newline at end of file
src/components/scholarship/SortItem/SortItem.js 0 → 100644
import React, { Component } from 'react';
import { Flex } from 'antd-mobile';
import './SortItem.scss';
// const Item = FLex.Item;
const FIRST = 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/order/PC/jin1_icon.png';
const SECOND = 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/order/PC/yin2_icon.png';
const THIRD = 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/order/PC/tong_icon.png';
export default class SortItem extends Component {
constructor(props) {
super(props);
}
render() {
const { sortNum, avatar_file, user_name, total_account } = this.props;
let sortImgSrc = '';
if(sortNum === 1) {
sortImgSrc = FIRST;
}
if(sortNum === 2) {
sortImgSrc = SECOND;
}
if(sortNum === 3) {
sortImgSrc = THIRD;
}
return (
<div>
<Flex align='center' className={'sortItem'} style={{backgroundColor: '#FFF'}}>
<div className={'num'}>
<Flex justify='center'>
{
Number(sortNum) > 3 ? (sortNum) : (<img src={sortImgSrc} style={{width: '18px', height: '22px'}}></img>)
}
</Flex>
</div>
<div className={'avatar'}>
<Flex justify='start'>
<img src={avatar_file} className={'avatarImg'}></img>
<span className={'text-overflow-one'} style={{color: '#333333'}}>{user_name}</span>
</Flex>
</div>
<div className={'money'}>
<Flex justify='center'>{`${total_account}元`}</Flex>
</div>
</Flex>
</div>
)
}
}
src/components/scholarship/SortItem/SortItem.scss 0 → 100644
.sortItem {
height: 44px;
border-bottom: 1px solid #E7EAF1;
color: #333333;
font-size: 12px;
.num {
width: 25%;
font-size: 15px;
}
.avatar {
width: 40%;
.avatarImg {
width: 22px;
height:22px;
border-radius:50%;
margin-right:10px;
}
}
.money {
width: 35%;
font-size: 13px;
color: #FF2121
}
}
\ No newline at end of file
src/components/scholarship/index.js 0 → 100644
import React, { Component } from 'react';
import { Tabs, WhiteSpace, List, Flex, WingBlank, Modal, ListView } from 'antd-mobile';
import './scholarship.scss';
import { is_weixin, http, api } from "@/utils";
import CategoryItem from './CategoryItem/CategoryItem.js';
import SortItem from './SortItem/SortItem.js';
import { connect } from 'react-redux';
const Item = List.Item;
class _Scholarship extends Component {
constructor(props) {
super(props);
this.state = {
un_affirm: 0,
affirm: 0.00,
drawCashHtml: false,
drawCashWechat: false,
waitMoneyDetail: false,
codeSrc: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png',
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
page: 1,
useBodyScroll: true,
isLoading: false,
showNoData: false,
hasMore: true,
}
this.downImage = React.createRef();
this.tabIndex = 0;
this.searchObject = {};
this.rData = [];
}
tabList = [
{ title: '课程列表', sub: '1' },
{ title: '分销榜单', sub: '2' },
];
// 返回上一页
goback = () => {
this.props.history.push('/my');
}
// 关闭弹框
closeModal = () => {
this.setState({
drawCashWechat: false,
drawCashHtml: false,
waitMoneyDetail: false,
});
};
// 显示代收款提示modal
showDetail = () => {
this.setState({
waitMoneyDetail: true,
});
}
// 提现按钮 根据是否在微信环境中显示提示
drawCash = () => {
if (is_weixin()) {
this.setState({
drawCashWechat: true
});
} else {
this.setState({
drawCashHtml: true,
});
}
};
// 去登陆
toLogin = () => {
this.props.history.push('/passport');
};
// 跳转到规则说明页
showDocument = () => {
this.props.history.push('/document');
};
// 保存二维码 TODO 失败
saveImage = () => {
this.downImage.current.click();
};
onEndReached = () => {
if (this.state.isLoading || !this.state.hasMore) {
return;
}
this.setState({
isLoading: true,
});
let apiUrl = `${api.home}/m/dist/course_list`;
if (this.tabIndex === 1) { apiUrl = `${api.home}/m/dist/commission_ranking_list` };
http.get(apiUrl).then((res) => {
if (res.data.code !== 200) {
this.setState({ isLoading: false });
return;
}
let newData = [];
if(this.tabIndex === 0) {
if (!res.data.data.list || res.data.data.list.length === 0) {
this.setState({ isLoading: false, hasMore: false, showNoData: this.searchObject.page === 1 });
return;
}
newData = res.data.data.list;
} else {
if (!res.data.data || res.data.data.length === 0) {
this.setState({ isLoading: false, hasMore: false, showNoData: this.searchObject.page === 1 });
return;
}
newData = res.data.data;
}
this.searchObject.page++;
this.rData = [...this.rData, ...newData];
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.rData),
isLoading: false,
// hasMore: newData.length >= 10,
hasMore: false
});
})
.catch(() => {
this.setState({ isLoading: false });
});
}
componentDidMount() {
if (this.state.useBodyScroll) {
document.body.style.overflow = 'auto';
} else {
document.body.style.overflow = 'hidden';
}
http.get(`${api.home}/m/user_account`).then(res=>{
if(res.data.code === 200) {
this.setState({
...res.data.data
});
}
});
this.onEndReached();
}
render() {
const row = (
rowData,
rowID
) => {
return <CategoryItem {...rowData} key={rowID} />;
};
const row1 = (
rowData,
rowID
) => {
return <SortItem {...rowData} sortNum={this.rData.indexOf(rowData) + 1} key={rowID} />;
};
const separator = (sectionID, rowID) => (
<div key={`${sectionID}-${rowID}`}>
<WhiteSpace />
</div>
);
const {
un_affirm,
affirm,
drawCashHtml,
drawCashWechat,
waitMoneyDetail,
codeSrc,
} = this.state;
const { hasError } = this.props.user;
return (
<div className={'scholarship'}>
<div className={'account-container'}>
<WhiteSpace></WhiteSpace>
<WingBlank>
<Flex justify='between'>
<i className={'iconfont iconiconfront-68 back'} onClick={this.goback}></i>
<span className={"common-ft-15"}>账户资金</span>
<i className={'iconfont iconaccounttip tip-info'} onClick={this.showDocument}></i>
</Flex>
</WingBlank>
<WhiteSpace></WhiteSpace>
<WingBlank>
<span className={'common-ft-14'}>
可提现余额：
</span>
</WingBlank>
<WhiteSpace></WhiteSpace>
{
hasError ? (
<>
<WhiteSpace></WhiteSpace>
<Flex justify='center'>
<div className={'login-check'} onClick={this.toLogin}>登录后查看</div>
</Flex>
</>
) : (
<>
<Flex justify='center' align='baseline' style={{ height: '20px', lineHeight: '20px' }}>
<span className={'common-ft-25'}>{affirm}</span>
<span className={'common-ft-15'}>元</span>
</Flex>
<WhiteSpace></WhiteSpace>
<Flex justify='center'>
<div className={'draw-cash'} onClick={this.drawCash}>提现</div>
</Flex>
</>
)
}
</div>
<div className={'over-am-list-item'} >
{
hasError ? (null) : (
<>
<div>
<List>
<Item
arrow="horizontal"
style={{ padding: '0 0 0 15px' }}
onClick={this.showDetail}
>
<Flex direction='row' justify='between'>
<span className={'common-ft-15'}>待确认金额</span>
<span className={'money'}>{un_affirm}</span>
</Flex>
</Item>
</List>
</div>
<WhiteSpace></WhiteSpace>
</>
)
}
<div style={{ backgroundColor: '#FFF' }}>
<Tabs tabs={this.tabList}
initialPage={0}
// onChange={this.changeTab}
onChange={(tab, index) => {
this.tabIndex = index;
this.pageIndex = 1;
this.rData = [];
this.searchObject.page = 1;
this.setState(
{
isLoading: false,
hasMore: true,
dataSource: this.state.dataSource.cloneWithRows(this.rData),
},
() => {
this.onEndReached();
}
);
}}
>
<div style={{ marginTop: '15px', backgroundColor: '#FFF' }}>
{
this.state.dataSource._cachedRowCount !== 0 ? (
<ListView
useBodyScroll={this.state.useBodyScroll}
dataSource={this.state.dataSource}
renderRow={row}
renderBodyComponent={() => <div />}
onEndReached={this.onEndReached}
pageSize={4}
onEndReachedThreshold={100}
/>
) : (
null
)
}
</div>
<div>
<Flex justify='center' align='center' className={'runtimeList'}>榜单实时更新，仅显示前50名</Flex>
{
this.state.dataSource._cachedRowCount !== 0 ? (
<ListView
useBodyScroll={this.state.useBodyScroll}
dataSource={this.state.dataSource}
renderRow={row1}
renderBodyComponent={() => <div />}
onEndReached={this.onEndReached}
pageSize={4}
onEndReachedThreshold={100}
/>
) : (
null
)
}
</div>
</Tabs>
</div>
</div>
<Modal
visible={drawCashWechat}
transparent
maskClosable={true}
onClose={this.closeModal}
title="提现"
footer={[{ text: '确认', onPress: () => { this.closeModal() } }]}
className={'wechatModal'}
style={{ width: '300px' }}
>
<p style={{ fontSize: '13px', color: '#666666' }}>
提现金额将通过微信零钱转账给您，识别下方二维码，关注【七月在线】服务号申请提现。
</p>
<WhiteSpace size='sm'></WhiteSpace>
<Flex justify='center'>
<img src={codeSrc} style={{ width: '90px', height: '90px', backgroundColor: '#666' }} alt="二维码" />
</Flex>
</Modal>
<Modal
visible={drawCashHtml}
transparent
maskClosable={true}
onClose={this.closeModal}
title="提现"
footer={[
{ text: '取消', onPress: () => { this.closeModal() } },
{ text: '保存二维码', onPress: () => { this.saveImage() } }
]}
style={{ width: '300px' }}
>
<p style={{ fontSize: '13px', color: '#666666' }}>
提现金额将通过微信零钱转账给您，请微信扫码关注【七月在线】服务号后申请提现。
</p>
<WhiteSpace size='sm'></WhiteSpace>
<Flex justify='center'>
<img src={codeSrc} style={{ width: '90px', height: '90px' }} alt="二维码" />
</Flex>
</Modal>
<Modal
visible={waitMoneyDetail}
transparent
maskClosable={true}
onClose={this.closeModal}
title="待确认金额"
footer={[
{ text: '知道了', onPress: () => { this.closeModal() } }
]}
style={{ width: '300px' }}
>
<p style={{ fontSize: '13px', color: '#666666', textAlign: 'left', lineHeight: '20px' }}>
1.尚未开课的直播课程，用户购买后归属您的佣金会暂时存放在『待确认金额』中。
</p>
<p style={{ fontSize: '13px', color: '#666666', textAlign: 'left', lineHeight: '20px' }}>
2.该课程正式开课时，如果用户没有退款，对应的订单金额会自动转入您的账号余额，否则该佣金会自动收回。
</p>
<WhiteSpace></WhiteSpace>
<Flex style={{ fontSize: '13px', color: '#000' }} justify='center'>
<span>待确认订单详情可</span>
<span style={{ color: '#0099FF', marginLeft: '10px' }}>前往APP查看</span>
</Flex>
</Modal>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
user: {
...state.user
},
};
};
const mapDispatchToProps = (dispatch) => {
return {};
};
export const Scholarship = connect(
mapStateToProps,
mapDispatchToProps
)(_Scholarship);
src/components/scholarship/scholarship.scss 0 → 100644
.scholarship {
background-color: #f5f5f5;
font-size: 15px;
.common-ft-14 {
font-size: 14px;
}
.common-ft-15 {
font-size: 15px;
}
.common-ft-25 {
font-size: 25px;
}
.account-container {
background-color: #18b4ed;
width: 100%;
height: 158px;
color: #fff;
.back,
.tip-info {
font-size: 22px;
}
.draw-cash {
width: 80px;
height: 30px;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 15px;
color: #fff;
font-size: 16px;
text-align: center;
list-style: 30px;
}
.login-check {
width: 90px;
height: 30px;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 14px;
color: #FFF;
line-height: 30px;
text-align: center;
}
}
.runtimeList {
height: 30px;
background-color: #FFF4CE;
color: #333333;
font-size: 12px;
text-align: center;
line-height: 30px;
}
.money {
font-size: 13px;
color: $bg_ff3131;
}
}
src/router/router-config.js
......@@ -14,7 +14,10 @@ import Detail from '@/components/detail/index'
import Examination from '@/components/examination'
import ShopCart from '@/components/shopCart';
import BargainMiddlePage from '@/components/bargainMiddlePage';
import Passport from '@/components/passport'
import Passport from '@/components/passport';
import {Scholarship} from '@/components/scholarship/index';
import DrawDocument from '@/components/scholarship/DrawDocument/DrawDocument';
import PayOrder from '@/components/order/payOrder/PayOrder'
const Coupons = loadable(() => import(/* webpackChunkName: 'coupons'*/ '@/components/coupons'))
const Study = loadable(() => import(/* webpackChunkName: 'study'*/'@/components/study'))
......@@ -96,6 +99,14 @@ export default [
component: Video
},
{
path: '/scholarship',
component: Scholarship
},
{
path: '/document',
component: DrawDocument
},
{
path: '/shareposter',
component: sharePoster
},
......@@ -109,4 +120,8 @@ export default [
component: Purchased,
isPrivate: true
},
{
path: '/payOrder',
component: PayOrder
},
]
\ 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