邀请好友助力

src/components/aiTestHelp/index.js

+import React, {Component} from 'react'
+import {CopyToClipboard} from 'react-copy-to-clipboard'
+import {browser, http, getParam, wxShare} from '@/utils'
+import './index.scss'
+import {Toast} from "antd-mobile"
+
+class aiTestHelp extends Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            code: '',
+            total_num: '',
+            isshowYindao: false
+        }
+    }
+
+    componentDidMount() {
+        this.handleFetchInfo()
+    }
+
+    share = () => {
+        wxShare({
+            title: '全国AI水平测试开始了，看看你能答对几道题？',
+            desc: '',
+            link: `${API.m}/ai-test/assist/${this.state.code}`,
+            imgUrl: '',
+        })
+        this.setState({
+            isshowYindao: true
+        })
+    }
+
+    copyToSuccess = () => {
+        Toast.info('链接已复制，快去发送给好友吧~')
+    }
+
+    handleFetchInfo = () => {
+        http.get(`${API.home}/sys/aitest/invitation`).then(res => {
+            const {code, data, msg} = res.data
+            if (code === 200) {
+                this.setState({
+                    total_num: data.total_num,
+                    code: data.code
+                })
+            } else if (code === 4030) {
+                this.props.history.push('/passport/login')
+            } else {
+                Toast.info(msg)
+            }
+        })
+    }
+
+
+    render() {
+        const {code, total_num, isshowYindao} = this.state
+        return (
+            <div className={'ai-test-help'}>
+                <div className="banner">
+                    <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/ai-test/m/text2.png" alt=""/>
+                    <span>{total_num}</span>
+                    <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/ai-test/m/text1.png" alt=""/>
+                </div>
+
+                <p className={'tip-l'}>分享给好友</p>
+                <p className={'tip-s'}>每个好友只能助力1次哦~</p>
+                <p className={'tip-m'}>好友答题为你助力，答题正确你将获得</p>
+                <p className={'tip-num'}>一次测试机会</p>
+
+                {
+                    !browser.isWeixin &&
+                    <CopyToClipboard
+                        text={`${API.m}/ai-test/assist/${code}`}
+                        onCopy={this.copyToSuccess}
+                    >
+                        <div className={'share-btn'}>
+                            邀请好友助力
+                        </div>
+                    </CopyToClipboard>
+                }
+                {
+                    browser.isWeixin &&
+                    <div className={'share-btn'} onClick={this.share}>
+                        邀请好友助力
+                    </div>
+                }
+
+                {
+                    isshowYindao &&
+                        <div className={'share'}>
+                            <div className="content">
+                                <p className="test">点击右上角，分享给好友</p>
+                                <i className="iconfont"></i>
+                            </div>
+                        </div>
+                }
+            </div>
+        )
+    }
+}
+
+
+export default aiTestHelp
\ No newline at end of file

src/components/aiTestHelp/index.scss

+html, body, #root {
+  height: 100% !important;
+}
+
+.ai-test-help {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  letter-spacing: 1px;
+
+  .banner {
+    width: 100%;
+    height: 282px;
+    background-image: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/ai-test/m/help-banner.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    padding-top: 60px;
+
+    img {
+      height: 18px;
+    }
+
+    span {
+      font-size: 25px;
+      font-weight: 400;
+      color: #FFCA28;
+      margin: 0 9px;
+    }
+  }
+
+  .tip-s {
+    margin-top: 10px;
+    font-weight: 400;
+    font-size: 12px;
+    color: #FF5F83;
+  }
+
+  .tip-m {
+    margin-top: 30px;
+    color: #525C65;
+    font-weight: 400;
+    font-size: 14px;
+  }
+
+  .tip-l {
+    margin-top: 30px;
+    color: #FF5F83;
+    font-weight: 500;
+    font-size: 18px;
+  }
+
+  .tip-num {
+    margin-top: 15px;
+    color: #09f;
+    font-weight: 600;
+    font-size: 20px;
+
+    &:before, &:after {
+      width: 13px;
+      height: 12px;
+      display: inline-block;
+      content: '';
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+      vertical-align: text-top;
+      margin: 0 20px;
+    }
+
+    &:before {
+      background-image: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/ai-test/m/mark_icon_l.png");
+    }
+
+    &:after {
+      background-image: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/ai-test/m/mark_icon_r.png");
+    }
+  }
+
+  .share-btn {
+    height: 40px;
+    line-height: 40px;
+    border-radius: 5px;
+    position: fixed;
+    right: 10px;
+    left: 10px;
+    bottom: 5px;
+    background-color: #FFAE00;
+    color: #fff;
+    font-size: 18px;
+    font-weight: 400;
+    text-align: center;
+  }
+
+  .share {
+    position: fixed;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    top: 0;
+    background: rgba(0, 0, 0, .6);
+    color: #fff;
+
+    .content {
+      position: relative;
+      height: 100px;
+      padding-top: 36px;
+      box-sizing: border-box;
+      font-size: 16px;
+
+      .iconfont {
+        position: absolute;
+        top: 10px;
+        right: 40px;
+        font-size: 38px;
+        color: #fff;
+        width: 50px;
+        height: 38px;
+        background: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/pythonCourse/h5/share_arrow.png') center center no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+
+
+

src/router/router-config.js

@@ -334,5 +334,10 @@ export default [
   {
     path: '/scoreReport',
     component: loadable(() => import('@/components/scoreReport'))
+  },
+  // AI水平测试 邀请好友助力
+  {
+    path: '/aiTestHelp',
+    component: loadable(() => import('@/components/aiTestHelp'))
   }
 ]