feat:初始化

src/modules/course-manage/offline-course/AddOfflineCourse.jsx

@@ -320,18 +320,18 @@ class AddOfflineCourse extends React.Component {
       introduce,
       offlinePlace,
     }
-    const previewGraphicsModal = (
+    const previewOfflineModal = (
       <PreviewOfflineModal
         data={data}
         close={() => {
           this.setState({
-            previewGraphicsModal: null
+            previewOfflineModal: null
           })
         }}
       />
     );
 
-    this.setState({ previewGraphicsModal });
+    this.setState({ previewOfflineModal });
   }
 
   handleSelectCover = (file)=> {
@@ -1158,7 +1158,7 @@ class AddOfflineCourse extends React.Component {
             </div>
           </div>
         </Modal>
-        { this.state.previewGraphicsModal }
+        { this.state.previewOfflineModal }
       </div>
     )
   }

src/modules/course-manage/offline-course/components/OfflineCourseList.jsx

@@ -16,14 +16,12 @@ import ShareLiveModal from '@/modules/course-manage/modal/ShareLiveModal';
 import Service from "@/common/js/service";
 import CourseService from "@/domains/course-domain/CourseService";
 import RelatedPlanModal from '../../modal/RelatedPlanModal';
-
+import PreviewOfflineModal from '../modal/PreviewOfflineModal';
 import ENUM from "../../../knowledge-base/ENUM.js";
 import User from '@/common/js/user'
-
-
+import QRCodeModal from '../modal/QRCodeModal';
 import './OfflineCourseList.less';
 import moment from 'moment';
-import QRCodeModal from '../modal/QRCodeModal';
 
 const ENV = process.env.DEPLOY_ENV || 'dev';
 const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
@@ -223,6 +221,41 @@ class OfflineCourseList extends React.Component {
     }, () => { this.props.onChange(); });
   }
   
+  // 显示预览弹窗
+  handleShowPreviewModal = (query) => {
+    const {
+      coverUrl,
+      courseName,
+      startTime,
+      endTime,
+      introduce,
+      categoryName,
+      offlinePlace,
+    } = query;
+
+    const data = {
+      coverUrl,
+      courseName,
+      startTime,
+      endTime,
+      categoryName,
+      introduce,
+      offlinePlace,
+    }
+    const previewOfflineModal = (
+      <PreviewOfflineModal
+        data={data}
+        close={() => {
+          this.setState({
+            previewOfflineModal: null
+          })
+        }}
+      />
+    );
+
+    this.setState({ previewOfflineModal });
+  }
+
   renderMoreOperate = (item) => {
     return (
       <div className="live-course-more-menu">
@@ -230,14 +263,14 @@ class OfflineCourseList extends React.Component {
           className="operate__item"
           key="qrcode"
           onClick={() => {
-            this.setState({ openQRCodeModal: true })
+            this.setState({ openQRCodeModal: true, qrcodeData: item })
           }}
         >考勤二维码</div>
         <div
           className="operate__item"
           key="preview"
           onClick={() => {
-            this.setState({ openQRCodeModal: true })
+            this.handleShowPreviewModal(item);
           }}
         >预览</div>
         <div
@@ -411,7 +444,7 @@ class OfflineCourseList extends React.Component {
     },()=>{this.props.onChange();})
   }
   render() {
-    const { RelatedPlanModalVisible, selectCourseId, selectPlanList, openQRCodeModal } = this.state;
+    const { RelatedPlanModalVisible, selectCourseId, selectPlanList, openQRCodeModal, qrcodeData } = this.state;
     const { dataSource = [], totalCount, query, match } = this.props;
     const { current, size } = query;
     return (
@@ -449,8 +482,10 @@ class OfflineCourseList extends React.Component {
           />
         }
         {this.state.shareLiveModal}
+        {this.state.previewOfflineModal}
         <QRCodeModal
           visible={openQRCodeModal}
+          data={qrcodeData}
           onCancel={() => {
             this.setState({ openQRCodeModal: false })
           }}

src/modules/course-manage/offline-course/modal/PreviewOfflineModal.jsx

 import React from 'react';
 import { Modal } from 'antd';
 import './PreviewOfflineModal.less';
+import moment from 'moment';
 
 const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
 
@@ -12,7 +13,15 @@ class PreviewOfflineModal extends React.Component {
 
   render() {
     const { data } = this.props;
-    const { coverUrl, courseName, categoryName, introduce } = data;
+    const {
+      coverUrl,
+      courseName,
+      categoryName,
+      introduce,
+      startTime,
+      endTime,
+      offlinePlace,
+    } = data;
     return (
       <Modal
         title="预览"
@@ -32,8 +41,8 @@ class PreviewOfflineModal extends React.Component {
             <div className="container__body">
               <div className="title__name">{courseName}</div>
               <div className="title__categery">课程分类：{categoryName}</div>
-              <div className="title__categery">上课时间：{categoryName}</div>
-              <div className="title__categery">上课地点{categoryName}</div>
+              <div className="title__categery">上课时间：{startTime ? moment(startTime).format('HH:mm') : ''}~{endTime ? moment(endTime).format('HH:mm') : ''}</div>
+              <div className="title__categery">上课地点：{offlinePlace}</div>
             </div> 
             
             <div className="container__introduction">

src/modules/course-manage/offline-course/modal/PreviewOfflineModal.less

@@ -52,6 +52,7 @@
         height: 24px;
         display: flex;
         align-items: center;
+        justify-content: center;
         font-size: 12px;
         color: #333333;
         padding: 0 10px;