Skip to content

M
mr-julyedu
Commit 77713388 by wangshuo
Options

转奖学金页面以及接口

parent c4ebb26d
Showing with 699 additions and 4 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
......@@ -484,3 +484,16 @@ input[type="radio"]:checked:before {
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
......@@ -499,3 +499,7 @@
content: "\e67d";
}
.iconaccounttip:before {
content: "\e61b";
}
src/components/Index/index.js
......@@ -35,7 +35,7 @@ class Index extends Component {
{
'src': require('./image/zjxj_icon.png'),
'name': '赚奖学金',
'href':''
'href':'/scholarship'
},
{
'src': require('./image/mryt_icon.png'),
......
src/components/my/index.js
......@@ -9,8 +9,8 @@ const Item = List.Item;
const Brief = Item.Brief;
class My extends Component {
render() {
let { history } = this.props;
return (
<div className="flex-container">
<Flex>
......@@ -82,7 +82,7 @@ class My extends Component {
<List renderHeader={() => ''} >
<Item
arrow="horizontal"
onClick={() => { }}
onClick={() => { history.push('/scholarship') }}
>
<i className="iconfont iconiconfront-51"></i>
赚奖学金
......
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 {category_name, 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'}>{category_name}</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>
)
}
}
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;
}
}
\ 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, shareName, money } = 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} className={'avatarImg'}></img>
<span className={'text-overflow-one'} style={{color: '#333333'}}>{shareName}</span>
</Flex>
</div>
<div className={'money'}>
<Flex justify='center'>{`${money}元`}</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 { isWechat, 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;
const Brief = Item.Brief;
class _Scholarship extends Component {
constructor(props) {
super(props);
this.state = {
waitMoney: 0,
cash: 123.45,
listType: 0,
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' },
];
// 切换tab页签的时候触发
// changeTab = (tab, listType) => {
// this.setState({
// listType
// });
// this.onEndReached();
// }
// 返回上一页
goback = () => {
this.props.history.push('/my');
}
// 关闭弹框
closeModal = () => {
this.setState({
drawCashWechat: false,
drawCashHtml: false,
waitMoneyDetail: false,
});
};
// 显示代收款提示modal
showDetail = () => {
this.setState({
waitMoneyDetail: true,
});
}
// 提现按钮 根据是否在微信环境中显示提示
drawCash = () => {
if (isWechat()) {
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,
});
http.get(`${api.home}/m/dist/course_list`).then((res) => {
if (res.data.code !== 200) {
this.setState({ isLoading: false });
return;
}
if (!res.data.data.list || res.data.data.list.length === 0) {
this.setState({ isLoading: false, hasMore: false, showNoData: this.searchObject.page === 1 });
return;
}
console.log(res);
this.searchObject.page++;
const newData = res.data.data.list;
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';
}
this.onEndReached();
}
render() {
console.log(this.props);
const row = (
rowData,
rowID
) => {
return <CategoryItem {...rowData} key={rowID} />;
};
const row1 = (
rowData,
rowID
) => {
return <SortItem {...rowData} key={rowID} />;
};
const separator = (sectionID, rowID) => (
<div key={`${sectionID}-${rowID}`}>
<WhiteSpace />
</div>
);
const {
waitMoney,
cash,
listType,
drawCashHtml,
drawCashWechat,
waitMoneyDetail,
codeSrc,
} = this.state;
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>
{
this.tabIndex === 0 ? (
<>
<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'}>{cash}</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'} >
{
this.tabIndex === 0 ? (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'}>{waitMoney}</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>
{/* <a crossOrigin='true' href={codeSrc} download='七月在线服务号' onClick={(e)=>{console.log(e)}} ref={this.downImage} ></a> */}
</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) => {
console.log(state);
return {
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
......@@ -12,7 +12,9 @@ import ExchangeCoupons from '@/components/coupons/exchange-coupons'
import UseCoupon from '@/components/coupons/use-coupons'
import ShopCard from '@/components/shopCard/index';
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'
export default [
......@@ -77,4 +79,12 @@ export default [
path: '/passport',
component: Passport
},
{
path: '/scholarship',
component: Scholarship
},
{
path: '/document',
component: DrawDocument
},
]
\ No newline at end of file
src/utils/index.js
......@@ -58,3 +58,13 @@ export const getParam = (key, str) => {
let found;
return (found = re.exec(_s)) ? found[2] : null;
}
// 判断是否是微信环境 是返回true；否则返回false
export const isWechat = () => {
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}
\ 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