test

build/manifest.json

-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

src/components/ShareCourse/index.js

+import React, {Component} from 'react';
+import './index.scss';
+import {HeaderBar, VList} from '@/common';
+import {http, getParam} 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)
+            }
+        })
+    }
+
+    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 (
+                                        <Link to={`/detail?id=${item.course_id}`}  key={index}>
+                                            <VList
+                                                img={item.image_name}
+                                                info={Info}
+                                            />
+                                        </Link>
+                                    )
+                                })
+                            }
+                        </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,