feat:添加直播模式选择

package-lock.json

@@ -13210,7 +13210,7 @@
     },
     "rc-dialog": {
       "version": "8.5.3",
-      "resolved": "https://registry.nlark.com/rc-dialog/download/rc-dialog-8.5.3.tgz?cache=0&sync_timestamp=1627272051827&other_urls=https%3A%2F%2Fregistry.nlark.com%2Frc-dialog%2Fdownload%2Frc-dialog-8.5.3.tgz",
+      "resolved": "https://registry.nlark.com/rc-dialog/download/rc-dialog-8.5.3.tgz",
       "integrity": "sha1-hPsfdjfdiq3XCbqQXqwqOi4H0hs=",
       "requires": {
         "@babel/runtime": "^7.10.1",
@@ -13443,7 +13443,7 @@
     },
     "rc-tabs": {
       "version": "11.9.1",
-      "resolved": "https://registry.nlark.com/rc-tabs/download/rc-tabs-11.9.1.tgz?cache=0&sync_timestamp=1626861953850&other_urls=https%3A%2F%2Fregistry.nlark.com%2Frc-tabs%2Fdownload%2Frc-tabs-11.9.1.tgz",
+      "resolved": "https://registry.nlark.com/rc-tabs/download/rc-tabs-11.9.1.tgz",
       "integrity": "sha1-Wy502ponaXjCFy75oFrorxTadMs=",
       "requires": {
         "@babel/runtime": "^7.11.2",

src/modules/course-manage/components/LiveCourseOpt.jsx

@@ -14,18 +14,44 @@ import './liveCourseOpt.less';
 import BaseService from "@/domains/basic-domain/baseService";
 import CerateQWCourse from './CerateQWCourse'
 import User from '@/common/js/user'
+import LiveModeSelect from './LiveModeSelect';
+
 class LiveCourseOpt extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       isMac: /macintosh|mac os x/i.test(navigator.userAgent),
+      showModeSelect: false,
     }
   }
 
   handleCreateLiveCouese = ()=>{
+    this.setState({
+      showModeSelect: true
+    })
+    // window.RCHistory.push({
+    //   pathname: '/create-live-course?type=add',
+    // })
+  }
+
+  onModeSelectClose = ()=> {
+    this.setState({
+      showModeSelect: false
+    })
+  }
+
+  onModeSelected = (type)=> {
+    this.setState({
+      showModeSelect: false
+    })
+    if (type === 0) {
       window.RCHistory.push({
         pathname: '/create-live-course?type=add',
       })
+    } else if (type === 1) {
+      const { match } = this.props;
+      this.props.history.push(`${match.url}/createqwcourse`)
+    }
   }
 
   handleCreateQWCouese=()=>{
@@ -59,11 +85,12 @@ class LiveCourseOpt extends React.Component {
     const { match } = this.props;
     return (
       <div className="live-course-opt">
+        <LiveModeSelect onClose={this.onModeSelectClose} onSelected={this.onModeSelected} isShow={this.state.showModeSelect}/>
         <div className="opt__left">
           { userRole !== "CloudLecturer" &&
             <Button type="primary" onClick={this.handleCreateLiveCouese}>新建直播课</Button>
           }
-            <Button type="primary" onClick={this.handleCreateQWCouese}>新建企微直播课</Button>
+            {/* <Button type="primary" onClick={this.handleCreateQWCouese}>新建企微直播课</Button> */}
           {!this.state.isMac && <Button onClick={this.handleDownloadClient}>下载直播客户端</Button>}
         </div>
         <Route path={`${match.url}/createqwcourse`} component={CerateQWCourse} />

src/modules/course-manage/components/LiveModeSelect.less

+.livemode-select {
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0,0,0,0.4);
+    z-index: 1000;    
+    
+    .dialog {
+        width: 680px;
+        height: 438px;
+        background: #FFFFFF;
+        border-radius: 6px;
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 680px;
+            height: 50px;
+            border-bottom: 1px solid #E8E8E8;
+            .title {
+                font-size: 16px;
+                color: #333333;
+                font-weight: 400;
+                margin-left: 23px;
+            }
+            .close {
+                color: #999999;
+                margin-right: 23px;
+                font-size: 12px;
+                cursor: pointer;
+            }
+        }
+        .content {
+            display: flex;
+            justify-content: space-between;
+            margin: 43px 95px 50px 95px;
+            .item {
+                display: inline-block;
+                width: 221px;
+                height: 294px;
+                background: #FFFFFF;
+                box-shadow: 0px 2px 8px 3px rgba(41, 102, 255, 0.1);
+                border-radius: 5px;
+                text-align: center;
+                .logo {
+                    width: 80px;
+                    height: 80px;
+                    margin: 31px auto 0 auto;
+                }
+                .xiaomai-logo {
+                    background-image: url("https://image.xiaomaiketang.com/xm/ZxaYpAy8kB.png");
+                }
+                .qiwei-logo {
+                    background-image: url("https://image.xiaomaiketang.com/xm/7Sjm26wAt8.png");
+                }
+                .item-title {
+                    font-size: 16px;
+                    font-weight: 500;
+                    color: #333333;
+                    margin: 25px auto 0 auto;
+                }
+                .des {
+                    margin: 14px auto 0 auto;
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #666666;
+                }
+                .button {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: white;
+                    width: 100px;
+                    height: 32px;
+                    background: #2966FF;
+                    border-radius: 16px;
+                    margin: 25px auto 0 auto;
+                    padding-top: 5px;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+}
+.livemode-select-none {
+    display: none;
+}
\ No newline at end of file

src/modules/course-manage/components/LiveModeSelect.tsx

+import React, { useState } from "react";
+import Portal from "rc-util/lib/Portal";
+import "./LiveModeSelect.less"
+import { createPortal } from "react-dom";
+
+interface LiveModeSelectProps {
+    isShow: boolean;
+    onClose: ()=> void;
+    onSelected: (type: number)=> void;
+}
+
+export default function LiveModeSelect(props: LiveModeSelectProps) {
+
+    const [isShow, setIsShow] = useState(props.isShow)
+
+    const handleSelect0 = (e: React.MouseEvent<HTMLDivElement>)=> {
+        const { onSelected } = props
+        onSelected(0)
+    }
+    const handleSelect1 = (e: React.MouseEvent<HTMLDivElement>)=> {
+        const { onSelected } = props
+        onSelected(1)
+    }
+    const handleClose = (e: React.MouseEvent<HTMLDivElement>)=> {
+        props.onClose()
+    }
+
+    return createPortal(
+        <div className={`livemode-select${props.isShow ? "":" livemode-select-none"}`}>
+        <div className="dialog">
+            <div className="header">
+            <div className="title">选择直播方式</div>
+            <span className="icon iconfont close" onClick={handleClose}>&#xe6ef;</span>
+            </div>
+            <div className="content">
+            <div className="item">
+                <div className="logo xiaomai-logo"></div>
+                <div className="item-title">小麦直播</div>
+                <div className="des">通过小麦企学院“PC客户<br/>端”进行直播</div>
+                <div className="button" onClick={handleSelect0}>立即创建</div>
+            </div>
+            <div className="item">
+                <div className="logo qiwei-logo"></div>
+                <div className="item-title">企微直播</div>
+                <div className="des">通过“企业微信APP”进行<br/>直播进行直播</div>
+                <div className="button" onClick={handleSelect1}>立即创建</div>
+            </div>
+            </div>
+        </div>
+        </div>,
+        document.body
+    )
+}
\ No newline at end of file