2

src/components/ShareCourse/index.js

+import React, {Component} from 'react';
+import './index.scss';
+import {HeaderBar, VList} from '@/common';
+import {http, getParam, SendMessageToApp} from '@/utils';
+import {Toast} from 'antd-mobile';
+import {Link} from "react-router-dom";
+
+import FollowQRcode from "../detail/followQRcode";
+
+class ShareCourse extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {list: []};
+    }
+
+    componentDidMount() {
+        http.get(`${API.home}/sys/red_packet/share_course`).then((res) => {
+            if (res.data.code === 200) {
+                this.setState({
+                    list: res.data.data
+                })
+            } else {
+                Toast.info(res.data.msg, 2)
+            }
+        })
+    }
+
+    toCourseDetail = (id) => {
+        if (!getParam('from')) {
+            const {history} = this.props;
+            history.push(`/detail?id=${id}`)
+        } else {
+            SendMessageToApp("toCourse", id)
+        }
+    }
+
+    render() {
+        const {list} = this.state;
+        return (
+            <div className={'share-course'}>
+                <HeaderBar title='分享领红包' arrow={true}/>
+                <FollowQRcode/>
+                {
+                    list && list.length > 0 ? <div>
+                            {
+                                list.map((item, index) => {
+                                    const Info = (
+                                        <div className="info">
+                                            <p className={'title text-overflow-1'}>{item.course_title}</p>
+                                            <p className={'contact text-overflow-1'}>{item.simpledescription}</p>
+                                            <button>分享领红包</button>
+                                        </div>
+                                    )
+                                    return (
+                                        <div key={index} onClick={() => this.toCourseDetail(item.course_id)}>
+                                            <VList
+                                                img={item.image_name}
+                                                info={Info}
+                                            />
+                                        </div>
+
+                                    )
+                                })
+                            }
+                        </div> :
+                        <div>
+                            <p className='not-data'>暂时没有可分享的课程哦〜</p>
+                        </div>
+                }
+
+            </div>
+        )
+    }
+}
+
+export default ShareCourse;

src/components/ShareCourse/index.scss

+.share-course {
+  .v-list-item {
+    height: 90px;
+    padding: 0;
+    margin: 10px 18px 20px 15px;
+
+    .content {
+      border: none;
+      padding: 0;
+
+      .cover {
+        width: 125px;
+        height: 90px;
+        margin-right: 10px;
+
+        img {
+          width: 125px;
+          height: 90px;
+          border-radius: 3px;
+        }
+      }
+
+      .info {
+        width: 207px;
+        position: relative;
+
+        .title {
+          font-size: 16px;
+          color: #333;
+          height: 18px;
+          line-height: 18px;
+        }
+
+        .contact {
+          font-size: 13px;
+          color: #666;
+          margin-top: 10px;
+        }
+
+        button {
+          position: absolute;
+          bottom: 0;
+          font-size: 12px;
+          color: #FF4000;
+          height: 28px;
+          padding: 0 13px;
+          border: 1px solid #FF4000;
+          border-radius: 3px;
+          background-color: #fff;
+        }
+      }
+    }
+  }
+
+  .not-data {
+    width: 100%;
+    height: 20px;
+    line-height: 20px;
+    text-align: center;
+    color: #666;
+    font-size: 12px;
+    position: absolute;
+    top: 50%;
+    margin-top: -10px;
+  }
+}
\ No newline at end of file

src/components/detail/followQRcode/index.js

+import React, {Component} from 'react';
+import './index.scss';
+import {http, getParam} from '@/utils';
+import QRCode from 'qrcode';
+import {connect} from "react-redux";
+import {Toast} from 'antd-mobile';
+
+class FollowQRcode extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            src: '',
+            codeSrc: ''
+        };
+    }
+
+    componentDidMount() {
+        const _this = this
+        let uid = this.props && this.props.user && this.props.user.data.uid
+        http.get(`${API['base-api']}/wx/user_temporary_qrcode/${uid}`).then((res) => {
+            if (res.data.errno == 0) {
+                _this.setState({
+                    src: res.data.data.url
+                })
+                return new Promise(resolve => {
+                    QRCode.toDataURL(_this.state.src, {}, function (err, url) {
+                        _this.setState({
+                            codeSrc: url
+                        })
+                    })
+                    resolve()
+                })
+            } else {
+                Toast.info(res.data.msg, 2)
+            }
+        })
+    }
+
+    render() {
+        return (
+            <div className='followQRcode-box'>
+                <div className='followQRcode'>
+                    <div className="content">
+                        <p className="title">关注公众号</p>
+                        <p className='desc'>
+                            <span>1</span>有人通过您分享的链接领取红包后，会第一时间通过微信服务号通知您。
+                        </p>
+                        <p className='desc'>
+                            <span>2</span>请用个人微信扫描，关注服务号后可提现红包到微信零钱。
+                        </p>
+                        <img src={this.state.codeSrc} alt=""/>
+                        <p className="tip">长按二维码保存到相册</p>
+                    </div>
+                    <div className='close'>
+                        <i className='iconfont iconiconfront-2'></i>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default connect(
+    state => ({
+        user: state.user
+    })
+)(FollowQRcode)
+

src/components/detail/followQRcode/index.scss

+.followQRcode-box {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, .6);
+  z-index: 1;
+
+  .followQRcode {
+    width: 290px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -145px;
+    margin-top: -180px;
+    text-align: center;
+
+    .content {
+      background-color: #fff;
+      border-radius: 10px;
+      padding: 20px;
+
+      .title {
+        font-size: 16px;
+        color: #333;
+        margin-bottom: 15px;
+      }
+
+      .desc {
+        font-size: 12px;
+        color: #5B5B5B;
+        text-align: left;
+
+        span {
+          display: inline-block;
+          width: 13px;
+          height: 13px;
+          background-color: #5B5B5B;
+          color: #fff;
+          border-radius: 50%;
+          line-height: 15px;
+          text-align: center;
+          margin-right: 5px;
+          font-size: 12px;
+        }
+      }
+
+      img {
+        width: 130px;
+        height: 130px;
+      }
+
+      .tip {
+        font-size: 14px;
+        color: #333;
+      }
+    }
+
+    .close {
+      height: 24px;
+      line-height: 24px;
+      margin-top: 30px;
+      i{
+        font-size: 24px;
+        color: #fff;
+      }
+    }
+  }
+}
\ No newline at end of file

src/router/router-config.js

@@ -29,6 +29,7 @@ const MyEdit = loadable(() => import(/* webpackChunkName: 'MyEdit'*/'@/component
 const Classify = loadable(() => import(/* webpackChunkName: 'Classify'*/'@/components/classify'))
 const CampTest = loadable(() => import(/* webpackChunkName: 'Classify'*/'@/components/video/camp/campTest'))
 const CampResolve = loadable(() => import(/* webpackChunkName: 'Classify'*/'@/components/video/camp/campResolve'))
+const ShareCourse = loadable(() => import('@/components/ShareCourse/index'))
 export default [
     {
         path: '/',
@@ -148,6 +149,11 @@ export default [
         path: '/campResolve',
         component: CampResolve
     },
+    // 分享领红包课程列表页
+    {
+        path: '/ShareCourse',
+        component: ShareCourse
+    },
     {
         path: '/togroup',
         component: ToGroup,

src/utils/app.js

+export default function SendMessageToApp() {
+
+    let messageName = 'nullName'
+    let params = '';
+    let callback;
+
+    //app定义的的方法名
+    if (typeof arguments[0] == "string") {
+        messageName = arguments[0]
+    }
+
+    //传递的参数或者回调函数
+    let arg1 = arguments[1];
+    if (typeof arg1 == "function") {
+        callback = arg1
+    }else if (typeof arg1 != "undefined") {
+        params = arg1
+    }
+
+    //回调函数
+    if (typeof arguments[2] == "function") {
+        callback = arguments[2]
+    }
+
+    if (callback) {
+        let fun_name = getFunName(callback)
+        window[fun_name] = callback
+    }
+
+    if (window.webkit != undefined) {
+
+        sendToIOS(messageName, params)
+    }else{
+        //貌似安卓传的参数，不能是数组和对象，所以这里json一下
+        if (typeof params != "string") {
+            params = JSON.stringify(params)
+        }
+        sendToAndroid(messageName, params)
+    }
+}
+
+function sendToIOS(messageName, params) {
+    window.webkit.messageHandlers[messageName].postMessage(params)
+}
+
+function sendToAndroid(messageName, params) {
+    try {
+        if (params.length > 0) {
+            console.log("有参")
+            AndroidWebViewBridge[messageName](params)
+        }else{
+            console.log("无参")
+            AndroidWebViewBridge[messageName]()
+        }
+    } catch(error) {
+        console.log(error)
+    }
+
+}
+
+function getFunName(fn) {
+    let res = fn.name.split(' ')
+    if (res.length > 1) {
+        return res[1]
+    }else if (res.length > 0) {
+        return res[0]
+    }
+}

src/utils/index.js

@@ -92,6 +92,7 @@ const isLogin = (function () {
 })()
 
 
-export { default as http } from './http'
+export {default as http} from './http'
 export {default as wxShare} from './wechat/share'
-export { html, initCaptcha, validateTel, validateEmail, browser, isLogin }
+export {html, initCaptcha, validateTel, validateEmail, browser, isLogin}
+export {default as SendMessageToApp} from './app'