Skip to content

M
mr-julyedu
Commit 904554c4 by xuzhenghua
Options

detail

parents ec0fb063 a04430d7
Showing with 732 additions and 67 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/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/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