转奖学金页面以及接口

.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

+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

+.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

+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

+.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

+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

+.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

+.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