c

src/components/activity/give-courses/share-content/index.js

+import React, { Component } from 'react'
+import './share-content.scss'
+import Poster from "./poster/poster"
+import Prizes from './prizes/prizes'
+
+
+
+class ShareContent extends Component {
+
+  state = {
+    activeIndex: 0,
+    tabs: ['分享海报', '活动奖品']
+  }
+
+  render() {
+    const {
+      tabs,
+      activeIndex
+    } = this.state
+    return (
+      <div id={'share-content'}>
+        <ul className="tab">
+          {
+            tabs.map((item, index) => {
+              return (
+                <li key={index} className={activeIndex === index ? 'active' : ''} onClick={() => {this.setState({activeIndex: index})}}>{item}</li>
+              )
+            })
+          }
+        </ul>
+        {
+          activeIndex === 0 ? <Poster/> : <Prizes/>
+        }
+      </div>
+    )
+  }
+}
+
+
+export default ShareContent

src/components/activity/give-courses/share-content/poster/poster.js

+import React, { Component } from 'react'
+import QRCode from "qrcode"
+import './poster.scss'
+import { getParam, http } from "@/utils"
+import { Toast } from "antd-mobile"
+
+function showToast(text) {
+  Toast.info(text, 2, null, false)
+}
+
+class Poster extends Component {
+
+  state = {
+    redirectURL: '',
+    posterBgUrl: '',
+    avatar: ''
+  }
+
+  componentDidMount() {
+    http.get(`${API["base-api"]}/assistance/active_haibao_info/${getParam('assis_word')}`)
+      .then(res => {
+        const {data, errno, msg} = res.data
+        if (errno === 200) {
+
+          this.setState({
+            avatar: ''
+          })
+
+        } else {
+          showToast(msg)
+        }
+      })
+  }
+
+
+  generatePoster = () => {
+
+  }
+
+
+  render() {
+    return (
+      <div id='poster'>
+        <div className="placard-desc">
+          长按下方海报，分享给好友～
+        </div>
+        <div className="total-container">
+          <div className="placard-img-container" id='imgWrapper'>
+            <img src="billSrc.src"/>
+          </div>
+          <div id="qrcode" className="placard-code"></div>
+          <canvas id="canvas" width="450" height="imgHeight" ref="canvas"></canvas>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Poster

src/components/activity/give-courses/share-content/poster/poster.scss

+
+#poster {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: #470bc8;
+    -webkit-overflow-scrolling: touch;
+    -webkit-touch-callout: none;
+
+
+    @mixin px2px($prop, $px){
+        $prop: #{$px}px
+    }
+
+    .placard-desc {
+        width: 100%;
+        color: #fff;
+        background-color: #470bc8;
+        @include px2px(font-size, 28);
+        margin-bottom: 15px;
+    }
+
+    .total-container {
+        width: 100%;
+        height: 90%;
+        position: relative;
+
+        .placard-img-container {
+            width: 100%;
+            position: relative;
+
+            img {
+                width: 270px;
+            }
+        }
+
+        .placard-code {
+            opacity: 0;
+            position: absolute;
+            width: 100%;
+            bottom: -400px;
+            height: 200px;
+        }
+    }
+
+
+}

src/components/activity/give-courses/share-content/prizes/prizes.js

+import React, { Component } from 'react'
+
+class Prizes extends Component {
+  render() {
+    return (
+      <div>
+        
+      </div>
+    )
+  }
+}
+
+export default Prizes

src/components/activity/give-courses/share-content/share-content.scss

+#share-content {
+    width: 100%;
+    height: auto;
+    min-height: 100%;
+    background-color: #470bc8;
+    padding: 30px 0 40px 0;
+    position: relative;
+    text-align: center;
+
+    .tab {
+        display: flex;
+        justify-content: center;
+        margin: 0 auto 20px auto;
+
+        li {
+            width: 83px;
+            height: 32px;
+            line-height: 32px;
+            color: #FEE41D;
+            border: 1px solid #FEE41D;
+            font-size: 16px;
+            background-color: #470bc8;
+        }
+
+        li:first-child {
+            border-radius: 4px 0 0 4px;
+        }
+
+        li:last-child {
+            border-radius: 0 4px 4px 0;
+        }
+
+        .active {
+            color: #090F08;
+            background: #FEE41D;
+            border: 1px solid #FEE41D;
+        }
+    }
+
+
+}

src/router/router-config.js

@@ -252,15 +252,20 @@ export default [
     component: loadable(() => import(/* webpackChunkName: 'newyear-yearIndex' */ '@components/activity/newyear-2019/year-wish/index'))
   },
 
-  //  增一得一
+  //  赠一得一
   {
-    path: '/activity/givecourses',
+    path: '/active/givecourses',
     exact: true,
     component: loadable(() => import(/* activity-give-courses */'@components/activity/give-courses/index'))
   },
   {
-    path: '/activity/assistance',
+    path: '/active/assistance',
     exact: true,
     component: loadable(() => import(/* activity-give-courses-assistance */'@components/activity/give-courses/assistance/index'))
   },
+  {
+    path: '/active/to',
+    exact: true,
+    component: loadable(() => import(/* activity-give-courses-assistance */'@components/activity/give-courses/share-content/index'))
+  },
 ]