Skip to content

X
xiaomai-cloud-class-web
Commit 55a028ed by wufan
Options

feat:完成直播课分享弹框

parent 76ea84eb
Showing with 141 additions and 860 deletions
src/data-source/course/request-api.ts 0 → 100644
/*
* @Author: wufan
* @Date: 2020-12-12 11:57:10
* @LastEditors: wufan
* @LastEditTime: 2020-12-12 14:32:44
* @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import Service from "@/common/js/service";
src/domains/course-domain/constants.ts 0 → 100644
/*
* @Author: 吴文洁
* @Date: 2020-08-20 09:21:40
* @LastEditors: wufan
* @LastEditTime: 2020-12-12 11:18:53
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
import { MapInterface } from '@/domains/basic-domain/interface'
const ENV: string = process.env.DEPLOY_ENV || 'dev';
const appIdMap: MapInterface = {
dev: 'wx3ea60e78ddfa277e',
dev1: 'wx3ea60e78ddfa277e',
rc: 'wx5c5a1fb71ecab7bc',
gray: "wxdd6b458500d4c224", // 小麦校讯通
prod: 'wxdd6b458500d4c224'
}
const shareUrlMap: MapInterface = {
'dev': 'https://dev.xiaomai5.com/share/show?appid=',
'dev1': 'https://dev.xiaomai5.com/share/show?appid=',
'rc': 'https://rc.xiaomai5.com/share/show?appid=',
'prod': 'https://prod.xiaomai5.com/share/show?appid=',
'gray': 'https://prod.xiaomai5.com/share/show?appid='
}
const LIVE_SHARE_MAP: MapInterface = {
dev: 'https://dev.xiaomai5.com/xiaomai-live-share/index.html#/',
dev1: 'https://dev.xiaomai5.com/xiaomai-live-share/index.html#/',
rc: 'https://rc.xiaomai5.com/xiaomai-live-share/index.html#/',
gray: 'https://res.xiaomai5.com/xiaomai-live-share/gray/index.html#/',
prod: 'https://res.xiaomai5.com/xiaomai-live-share/index.html#/',
}
export const appId: string = appIdMap[ENV];
export const shareUrl: string = shareUrlMap[ENV];
export const LIVE_SHARE: string = LIVE_SHARE_MAP[ENV];
src/domains/course-domain/utils.ts 0 → 100644
/*
* @Author: 吴文洁
* @Date: 2020-09-29 10:01:08
* @LastEditors: wufan
* @LastEditTime: 2020-12-10 10:50:19
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
import { SUFFIX_MAP } from '@/domains/resource-disk/constants';
const getFileTypeByName = (name: string) => {
const nameArray: string[] = name.split(".");
const suffix: string = nameArray[nameArray.length - 1];
return SUFFIX_MAP[suffix];
}
export {
getFileTypeByName
};
\ No newline at end of file
src/modules/course-manage/components/LiveCourseList.jsx
...@@ -13,7 +13,6 @@ import { Table, Modal, Tooltip, Badge, message, Dropdown, Button,Switch} from 'a ...@@ -13,7 +13,6 @@ import { Table, Modal, Tooltip, Badge, message, Dropdown, Button,Switch} from 'a
// import User from "@/core/user"; // import User from "@/core/user";
// import User_t from "@/teacher/core/user"; // import User_t from "@/teacher/core/user";
import { PageControl } from "@/components"; import { PageControl } from "@/components";
// import { LIVE_SHARE_MAP } from '@/common/constants/academic/cloudClass';
// import DownloadLiveModal from '@/components/DownloadLiveModal'; // import DownloadLiveModal from '@/components/DownloadLiveModal';
// import LiveStudentListModal from '../modal/LiveStudentListModal'; // import LiveStudentListModal from '../modal/LiveStudentListModal';
...@@ -22,12 +21,13 @@ import { PageControl } from "@/components"; ...@@ -22,12 +21,13 @@ import { PageControl } from "@/components";
// import ClassRecordModal from '../modal/ClassRecordModal'; // import ClassRecordModal from '../modal/ClassRecordModal';
// import PlayBackRecordModal from '../modal/PlayBackRecordModal'; // import PlayBackRecordModal from '../modal/PlayBackRecordModal';
// import ManageCoursewareModal from '../modal/ManageCoursewareModal'; // import ManageCoursewareModal from '../modal/ManageCoursewareModal';
// import ShareLiveModal from '../modal/ShareLiveModal'; import ShareLiveModal from '../modal/ShareLiveModal';
// import AccountChargeModal from '../modal/AccountChargeModal'; // import AccountChargeModal from '../modal/AccountChargeModal';
// import SelectStudent from '../modal/select-student'; // import SelectStudent from '../modal/select-student';
import './LiveCourseList.less'; import './LiveCourseList.less';
import { QuestionCircleOutlined } from '@ant-design/icons'; import { QuestionCircleOutlined } from '@ant-design/icons';
import { appId, shareUrl, LIVE_SHARE } from '@/domains/course-domain/constants';
const { confirm } = Modal; const { confirm } = Modal;
const courseStateShow = { const courseStateShow = {
UN_START: { UN_START: {
...@@ -77,6 +77,34 @@ class LiveCourseList extends React.Component { ...@@ -77,6 +77,34 @@ class LiveCourseList extends React.Component {
} }
// 显示分享弹窗
handleShowShareModal = (item, needStr = false) => {
const _appId = appId;
const _shareUrl = shareUrl;
const { liveCourseId } = item;
const { saaSVersionEnum } = window.currentUserInstInfo;
const htmlUrl = `${LIVE_SHARE}liveShare?id=${liveCourseId}&saasVersion=${saaSVersionEnum}`;
const link = `${_appId}&redirect_uri=${encodeURIComponent(htmlUrl)}%26appid%3D${_appId}&response_type=code&scope=snsapi_base&state=state#wechat_redirect`;
const longUrl = `${_shareUrl}${link}`;
const shareData = { ...item, longUrl };
const shareLiveModal = (
<ShareLiveModal
needStr={needStr}
data={shareData}
close={() => {
this.setState({
shareLiveModal: null
});
localStorage.setItem('largeLiveCourseItem', '');
}}
/>
)
this.setState({ shareLiveModal })
}
// 前往上课数据页面 // 前往上课数据页面
handleLinkToClassData = (item) => { handleLinkToClassData = (item) => {
// TODOLIST 确定后端是否是根据liveCourseId 返回数据 // TODOLIST 确定后端是否是根据liveCourseId 返回数据
...@@ -191,6 +219,7 @@ class LiveCourseList extends React.Component { ...@@ -191,6 +219,7 @@ class LiveCourseList extends React.Component {
<div <div
key="share" key="share"
className="operate__item" className="operate__item"
onClick={() => { this.handleShowShareModal(item); }}
> >
分享 分享
</div> </div>
...@@ -279,6 +308,7 @@ class LiveCourseList extends React.Component { ...@@ -279,6 +308,7 @@ class LiveCourseList extends React.Component {
}} }}
/> />
</div> </div>
{ this.state.shareLiveModal }
</div> </div>
) )
} }
......
src/modules/course-manage/components/StudentClassReportModal.jsx deleted 100644 → 0
import React, { useEffect, useState } from 'react';
import { Modal, Button } from 'antd';
import qrcode from "@/libs/qrcode/qrcode.js";
import './StudentClassReportModal.less';
const StudentClassReportModal = (props) => {
const url = window.CONFIG.parentHref[window.CONFIG.env];
const previewUrl = `${url}#/live/pc-cloud-class-report?courseId=${props.courseId}&studentId=${props.studentId}`
const mobileUrl = `${url}#/live/cloud-class-report?courseId=${props.courseId}&studentId=${props.studentId}`
useEffect(() => {
window.axios.Sales('public/businessShow/convertShortUrls', {
urls: [mobileUrl]
}).then((res) => {
const { result = [] } = res;
const qrcodeNode = new qrcode({
text: result[0].shortUrl,
size: 106
});
document.querySelector('#qrcode').appendChild(qrcodeNode)
})
}, [])
return (
<Modal
visible={true}
title={props.studentId? "TA的课堂报告":"老师的课堂报告"}
width={560}
onCancel={props.onCancel}
className="student-class-report-modal"
footer={ <div onMouseEnter={(e) => {
e.preventDefault();
}}
>
<Button
key="cancel"
onMouseEnter={(e) => {
e.preventDefault();
let qrcode = document.getElementsByClassName("qrcode")[0];
qrcode.style.display = "block";
}}
onMouseLeave={(e) => {
e.preventDefault();
let qrcode = document.getElementsByClassName("qrcode")[0];
qrcode.style.display = "none";
}}
>
分享TA的课堂报告
</Button>
</div>}
>
<div className="modal-content">
<iframe
src={previewUrl}
style={{ width: '100%', height: '70vh', border: 'none' }}
/>
</div>
<div className="qrcode">
<div className="qrcode-text">微信扫码查看/分享</div>
<div id="qrcode"></div>
<div className="triangle"></div>
</div>
</Modal>
)
}
export default StudentClassReportModal;
\ No newline at end of file
src/modules/course-manage/components/StudentClassReportModal.less deleted 100644 → 0
.student-class-report-modal {
.modal-content {
height: 70vh;
margin-left: -3px;
margin-right: -3px;
position: relative;
}
.share-entry {
width: 560px;
height: 48px;
background: #ffffff;
border-radius: 0px 0px 6px 6px;
position: fixed;
left: 0;
bottom: -48px;
.share-btn {
width: 148px;
height: 28px;
background: #ffffff;
border: 1px solid #e8e8e8;
position: absolute;
right: 23px;
top: 10px;
width: 116px;
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 28px;
}
}
.qrcode {
display: none;
position: absolute;
bottom:70px;
right:0;
width: 200px;
height: 191px;
background: #FFFFFF;
padding: 14px 40px 18px 40px;
text-align: center;
border-radius:8px;
box-shadow: 0 0 6px 0 rgba(0,0,0,.2);
.qrcode-text {
width: 126px;
height: 21px;
font-size: 15px;
color: #333333;
line-height: 21px;
margin-bottom: 22px;
}
#qrcode {
width: 106px;
height: 106px;
margin: 0 auto;
}
.triangle {
position: absolute;
width: 10px;
height: 10px;
transform: rotate(45deg);
bottom: -5px;
left: 95px;
background-color: #fff;
box-shadow: 0 0 6px 0 rgba(0,0,0,.2);
}
}
}
src/modules/course-manage/components/TeacherClassReportModal.less deleted 100644 → 0
.class-report-modal {
.modal-content {
height: 70vh;
margin-left: -3px;
margin-right: -3px;
}
}
src/modules/course-manage/components/TeacherClassReportModal.tsx deleted 100644 → 0
import React, { useEffect, useState } from 'react';
import { Modal } from 'antd';
import './TeacherClassReportModal.less';
import TeacherClassReportPage from './TeacherClassReportPage';
interface TeacherClassReportModal {
onCancel: Function,
courseId: string,
}
const TeacherClassReportModal = (props: TeacherClassReportModal) => {
return (
<Modal
visible={true}
// title={props.studentId? "TA的课堂报告":"老师的课堂报告"}
width={560}
footer={null}
// onCancel={props.onCancel}
className="class-report-modal"
>
<div className="modal-content">
<TeacherClassReportPage courseId={props.courseId}/>
</div>
</Modal>
)
}
export default TeacherClassReportModal;
\ No newline at end of file
src/modules/course-manage/components/TeacherClassReportPage.jsx deleted 100644 → 0
/*
* @Author: wufan
* @Date: 2020-11-04 15:53:17
* @Last Modified by: mikey.zhaopeng
* @Last Modified time: 2020-11-16 16:32:13
*/
import React, { useEffect, useState } from 'react';
import { Tooltip } from 'antd';
import Lottie from "lottie-web";
import './TeacherClassReportPage.less';
const TeacherClassReportPage = (props) => {
const [liveType, setLiveType] = useState('');
const [teacherName, setTeacherName] = useState('');
const [courseName, setCourseName] = useState(''); // 课次名称
const [classTime, setClassTime] = useState(); // 实际上课时间
const [actualStartTime, setActualStartTime] = useState(); // 实际开始上课时间
const [actualEndTime, setActualEndTime] = useState(); // 实际开始上课时间
const [actualSignNum, setActualSignNum] = useState(); // 实到人数
const [allStudentNum, setAllStudentNum] = useState(); // 应到人数
const [signRate, setSignRate] = useState(); // 到课比例
const [lateStudentNum, setLateStudentNum] = useState(); // 迟到人数
const [lateRate, setLateRate] = useState(); // 迟到比例
const [allConsumeNum, setAllConsumeNum] = useState(); // 扣课时应到
const [actualConsumeNum, setActualConsumeNum] = useState(); // 扣课时实到
const [consumeClassHour, setConsumeClassHour] = useState(); // 扣课时数
const [allNoneHourNum, setAllNoneHourNum] = useState(); // 不扣课时总人数
const [actualNoneHourNum, setActualNoneHourNum] = useState(); // 不扣课时实到人数
const [questionCount, setQuestionCount] = useState(); // 题目数
const [correctRate, setCorrectRate] = useState(); // 正确率
const [studentAnswerCount, setStudentAnswerCount] = useState(); // 答题人次
const [joinQuestionRate, setJoinQuestionRate] = useState(); // 答题参与率
const [trophyCount, setTrophyCount] = useState(); // 总共发放奖杯数
const [trophyStudentCount, setTrophyStudentCount] = useState(); // 获得奖杯学生数
const [raiseHand, setRaiseHand] = useState(); // 举手数
const [upPodiumCount, setUpPodiumCount] = useState(); // 上台数
const [allIntegralNum, setAllIntegralNum] = useState(); // 总发放积分数
const [integralStudentNum, setIntegralStudentNum] = useState(); // 积分获取人数
const [signIntegralNum, setSignIntegralNum] = useState(); // 到课发放积分数
const [signIntegralStudentNum, setSignIntegralStudentNum] = useState(); // 到课获得积分人数
const [interactiveIntegralNum, setInteractiveIntegralNum] = useState(); // 互动发放积分数
const [interactiveIntegralStudentNum, setInteractiveIntegralStudentNum] = useState(); // 互动获得积分人数
const [consumeClassTime, setConsumeClassTime] = useState(); // 互动获得积分人数
const [consumeHourNum, setConsumeHourNum] = useState(); // 扣课的课时数
const [loading, setLoading] = useState(true); // 扣课的课时数
useEffect(() => {
var animation = Lottie.loadAnimation({
path: "https://image.xiaomaiketang.com/xm/z32ddE2hNw.json",
name: "test",
renderer: "svg",
loop: true,
autoplay: true,
container: document.getElementById("lottie-box")
});
// 客户端调用客服去掉
if(!props.courseId){
const kefu = document.getElementsByClassName("zhiCustomBtn")[0];
kefu.style.display = "none";
}
let courseId = props.courseId || window.location.href.slice(window.location.href.indexOf("?")).split("=")[1];
axios.Apollo('anon/businessLive/getClassReport',{courseId}).then((res) => {
const data = res.result || {};
if (data.teacherName) {
setLoading(false);
}
let {
teacherName,
courseName,
liveType,
classTime,
actualStartTime,
actualEndTime,
actualSignNum,
allStudentNum,
signRate,
lateStudentNum,
lateRate,
allConsumeNum,
actualConsumeNum,
consumeClassHour,
allNoneHourNum,
actualNoneHourNum,
questionCount,
correctRate,
studentAnswerCount,
joinQuestionRate,
trophyCount,
trophyStudentCount,
raiseHand,
upPodiumCount,
allIntegralNum,
integralStudentNum,
signIntegralNum,
signIntegralStudentNum,
interactiveIntegralNum,
interactiveIntegralStudentNum,
consumeClassTime,
consumeHourNum
} = res.result;
setLiveType(liveType);
setTeacherName(teacherName);
setCourseName(courseName);
setActualStartTime(actualStartTime);
setActualEndTime(actualEndTime);
setClassTime(classTime);
setActualSignNum(actualSignNum);
setAllStudentNum(allStudentNum);
setSignRate(signRate);
setLateStudentNum(lateStudentNum);
setLateRate(lateRate);
setAllConsumeNum(allConsumeNum);
setActualConsumeNum(actualConsumeNum);
setConsumeClassHour(consumeClassHour);
setAllNoneHourNum(allNoneHourNum);
setActualNoneHourNum(actualNoneHourNum);
setQuestionCount(questionCount);
setCorrectRate(correctRate);
setStudentAnswerCount(studentAnswerCount);
setJoinQuestionRate(joinQuestionRate);
setTrophyCount(trophyCount);
setTrophyStudentCount(trophyStudentCount);
setRaiseHand(raiseHand);
setUpPodiumCount(upPodiumCount);
setAllIntegralNum(allIntegralNum);
setIntegralStudentNum(integralStudentNum);
setSignIntegralNum(signIntegralNum);
setSignIntegralStudentNum(signIntegralStudentNum);
setInteractiveIntegralNum(interactiveIntegralNum);
setInteractiveIntegralStudentNum(interactiveIntegralStudentNum);
setConsumeClassTime(consumeClassTime);
setConsumeHourNum(consumeHourNum);
});
}, []);
const renderSignInTooltip = () => {
return (
<div>
学员上课总时长达到<span className="class-high-light">{consumeClassTime}</span>分钟，即视为学员“到课”
</div>
);
};
const renderLateTooltip = () => {
return (
<div>
老师点击开始上课后<span className="class-high-light">{' 3 '}</span>分钟之后，才进入课堂的到课学员
</div>
);
};
const renderTotalTooltip = () => {
return (
<div>
“到课”学员扣<span className="class-high-light">{consumeHourNum}</span>课时
</div>
);
};
return (
<div className="teacher-class-report-page">
<div className="teacher-title">
<div className="teacher-name">{teacherName}</div><div className="text">老师，工作辛苦了，这是本节课的课堂报告~</div>
</div>
<div className="class-detail">
<div className="class-title">{courseName}</div>
<div className="class-duration">{`${moment(actualEndTime).format('YYYY')}年${moment(
actualEndTime,
).format('MM')}月${moment(actualEndTime).format('D')}日(${moment(actualEndTime).format(
'dddd',
)}) ${moment(actualStartTime).format('HH:mm')}-${moment(actualEndTime).format(
'HH:mm',
)} (${classTime}分钟)`}</div>
</div>
<div className="sign-in-detail">
<div className="title">到课情况</div>
<div className="content">
<div className="rate-block">
<div className="item">
<div className="rate">
{actualSignNum}
<span className="tiny">/{allStudentNum}</span>
</div>
<div className="explaination">
实到/应到人数
<Tooltip title={renderSignInTooltip()} placement="bottom">
<i className="icon iconfont" style={{ marginLeft: '5px' }}>
&#xe6f0;
</i>
</Tooltip>
</div>
</div>
<div className="item">
<div className="rate">{signRate}%</div>
<div className="explaination">到课比例</div>
</div>
<div className="item">
<div className="rate">{lateStudentNum}</div>
<div className="explaination">
迟到人数
<Tooltip title={renderLateTooltip()} placement="bottom">
<i className="icon iconfont" style={{ marginLeft: '5px' }}>
&#xe6f0;
</i>
</Tooltip>
</div>
</div>
<div className="item">
<div className="rate">{lateRate}%</div>
<div className="explaination">迟到率</div>
</div>
</div>
<div className="progress-block">
{!!allConsumeNum && (
<div className="item">
<div className="tip">
<div className="text">
<span className="tip-title">扣课时</span>实到/应到人数
</div>
<div className="num">
<span className="left-num">{actualConsumeNum}</span>/{allConsumeNum}
</div>
</div>
<div className="progress">
<div className="up-progress" style={{width:`${(actualConsumeNum/allConsumeNum *100)}%`}}></div>
<div className="down-progress"></div>
</div>
</div>
)}
{!!allConsumeNum && (
<div className="total-class">
<div className="text">
<span className="tip-title">总扣除课时</span>(超上不计入)
<Tooltip title={renderTotalTooltip()} placement="bottom">
<i className="icon iconfont" style={{ marginLeft: '5px' }}>
&#xe6f0;
</i>
</Tooltip>
</div>{' '}
<div className="num">
<span className="left-num">{consumeClassHour}课时</span>
</div>
</div>
)}
{!!allNoneHourNum && (
<div className="item">
<div className="tip">
<div className="text">
<span className="tip-title">不扣课时</span>实到/应到人数
</div>
<div className="num">
<span className="left-num">{actualNoneHourNum}</span>/{allNoneHourNum}
</div>
</div>
<div className="progress">
<div className="up-progress" style={{width:`${(actualNoneHourNum/allNoneHourNum *100)}%`}}></div>
<div className="down-progress"></div>
</div>
</div>
)}
</div>
</div>
</div>
<div className="class-data-detail">
<div className="title">课堂数据</div>
<div className="content">
<div className="data-block">
<div className="item">
<img src="https://image.xiaomaiketang.com/xm/zyDZaSMYSH.png" alt="" />
<div className="content">
<div className="one">
共发起了<span className="large-line-height">{questionCount}</span>
次答题，平均正确率达
<span className="large-line-height">{correctRate}%</span>
</div>
<div className="two">
参与答题人次<span className="line-height">{studentAnswerCount}</span>，参与率
<span className="line-height">{joinQuestionRate}%</span>（仅计算到课学员）
</div>
</div>
</div>
{(liveType === 'LARGE_CLASS_INTERACTION' || liveType === "SMALL_CLASS_INTERACTION") && (
<div className="item">
<img src="https://image.xiaomaiketang.com/xm/QXyjKpBrGX.png" alt="" />
<div className="content">
<div className="one">
共发放了<span className="large-line-height">{trophyCount}</span>个奖杯
</div>
<div className="two">
共有<span className="line-height">{trophyStudentCount}</span>个学生获得了奖杯
</div>
</div>
</div>
)}
{(liveType === 'LARGE_CLASS_INTERACTION' || liveType === "SMALL_CLASS_INTERACTION") && (
<div className="item column-center">
<img src="https://image.xiaomaiketang.com/xm/YrkH82fh86.png" alt="" />
<div className="content">
<div className="two">
共计举手人次<span className="line-height">{raiseHand}</span> {liveType === "LARGE_CLASS_INTERACTION" && <span>，上台人次
<span className="line-height">{upPodiumCount}</span></span>}
</div>
</div>
</div>
)}
<div className="item">
<img src="https://image.xiaomaiketang.com/xm/TieCG8wkyn.png" alt="" />
<div className="content">
<div className="one">
共计发放积分<span className="large-line-height">{allIntegralNum}</span>,有
<span className="large-line-height">{integralStudentNum}</span>人获得了积分
</div>
<div className="two">
通过“到课”发放积分<span className="line-height">{signIntegralNum}</span>，有
<span className="line-height">{signIntegralStudentNum}</span>人获得
</div>
<div className="three">
通过“互动”发放积分<span className="line-height">{interactiveIntegralNum}</span>
，有<span className="line-height">{interactiveIntegralStudentNum}</span>人获得
</div>
</div>
</div>
</div>
</div>
</div>
{ loading && <div className="class-loading-page">
<div className="loading-box">
<div id="lottie-box"></div>
<span className="box-tip">正在努力生成报告中...</span>
</div>
</div>}
</div>
);
};
export default TeacherClassReportPage;
src/modules/course-manage/components/TeacherClassReportPage.less deleted 100644 → 0
.teacher-class-report-page {
.class-loading-page {
position: absolute;
z-index: 1;
left: 20px;
top: 60px;
right: 20px;
bottom: 0;
background: #fff;
#lottie-box {
width: 88px;
height: 106px;
margin: 0 auto;
}
.loading-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
.app-logo {
display: block;
margin: 0 auto;
width: 240px;
height: 240px;
}
.h5-logo {
display: block;
width: 220px;
height: 220px;
}
.box-tip {
margin-top: 16px;
display: block;
color: #666;
font-size: 26px;
.tip-button {
font-size: 26px;
color: #ffb100;
margin: 0 8px;
}
}
}
}
width: 512px;
text-align: center;
background-color: #fff;
.iconfont {
color: rgba(191, 191, 191, 1);
}
.teacher-title {
width: 512px;
background: #fff0e7;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 44px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: flex;
justify-content: center;
.teacher-name {
font-size: 16px;
font-weight: 400;
color: #ff7519;
line-height: 44px;
max-width: 192px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
.class-detail {
margin-top: 20px;
margin-bottom: 21px;
.class-title {
width: 480px;
margin: 0 auto;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #242b33;
line-height: 22px;
text-align: center;
}
.class-duration {
text-align: center;
height: 22px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #8c8e93;
line-height: 22px;
margin-top: 8px;
}
}
.sign-in-detail {
.title {
height: 24px;
font-size: 17px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 24px;
text-align: center;
position: relative;
margin-bottom: 29px;
&::before {
content: '';
width: 24px;
height: 4px;
background: #fc9c6b;
border-radius: 8px;
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
}
}
.content {
.line-height {
color: rgba(255, 117, 25, 1);
}
.rate-block {
display: flex;
justify-content: space-between;
flex-flow: wrap;
.item {
width: 50%;
margin-bottom: 20px;
.rate {
height: 33px;
font-size: 24px;
font-weight: 500;
color: #333333;
line-height: 33px;
.tiny {
font-size: 18px;
}
}
.explaination {
text-align: center;
height: 20px;
font-size: 14px;
font-weight: 400;
color: #999999;
line-height: 20px;
}
}
}
.progress-block {
.item {
.tip {
display: flex;
justify-content: space-between;
.text {
height: 22px;
font-size: 14px;
color: rgba(140, 142, 147, 1);
line-height: 22px;
.tip-title {
color: rgba(51, 51, 51, 1);
font-weight: 500;
}
}
.num {
color: #333333;
line-height: 22px;
.left-num {
color: rgba(51, 51, 51, 1);
font-weight: 500;
font-size: 24px;
}
}
}
.progress {
position: relative;
width: 512px;
.up-progress {
position: absolute;
z-index: 10;
width: 80%;
height: 10px;
border-radius: 5px;
background-color: rgba(252, 156, 107, 1);
}
.down-progress {
width: 512px;
height: 10px;
background: #f6f7f8;
border-radius: 5px;
}
}
}
.total-class {
width: 512px;
height: 44px;
background: #f6f7f8;
border-radius: 2px;
display: flex;
justify-content: space-between;
margin-top: 10px;
margin-bottom: 20px;
line-height: 44px;
padding-left: 10px;
padding-right: 10px;
.text {
}
.num {
.left-num {
color: rgba(51, 51, 51, 1);
font-weight: 500;
font-size: 16px;
}
}
}
}
}
}
.class-data-detail {
margin-top: 30px;
.title {
height: 24px;
font-size: 17px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 24px;
text-align: center;
position: relative;
margin-bottom: 11px;
&::before {
content: '';
width: 24px;
height: 4px;
background: #fc9c6b;
border-radius: 8px;
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
}
}
.content {
.data-block {
.item {
width: 512px;
padding: 26px 20px;
display: flex;
justify-content: flex-start;
text-align: left;
border-bottom: 1px dashed rgba(232, 232, 232, 1);
&:last-child {
border-bottom: none;
}
&.column-center {
align-items: center;
}
img {
display: inline-block;
width: 40px;
height: 42px;
margin-right: 16px;
}
.large-line-height {
color: rgba(255, 117, 25, 1);
font-size: 24px;
line-height: 22px;
}
.line-height {
color: rgba(255, 117, 25, 1);
font-size: 14px;
line-height: 22px;
}
}
}
}
}
}
.class-high-light {
color:rgba(255, 117, 25, 1);
margin-left: 4px;
margin-right: 4px;
}
src/modules/course-manage/modal/ShareLiveModal.jsx
...@@ -11,13 +11,11 @@ import { Modal, Input, Button, message } from 'antd'; ...@@ -11,13 +11,11 @@ import { Modal, Input, Button, message } from 'antd';
import domtoimage from 'dom-to-image'; import domtoimage from 'dom-to-image';
import html2canvas from 'html2canvas'; import html2canvas from 'html2canvas';
import qrcode from "@/libs/qrcode/qrcode.js"; import qrcode from "@/libs/qrcode/qrcode.js";
import User from '@/common/js/user';
import './ShareLiveModal.less'; import './ShareLiveModal.less';
const BASE_IMG = require('@/images/xiaomai-IMG.png'); const storeName = User.getStoreName();
const { name, banner = BASE_IMG } = currentUserInstInfo;
const DEFAULT_COVER = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'; const DEFAULT_COVER = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
class ShareLiveModal extends React.Component { class ShareLiveModal extends React.Component {
...@@ -37,22 +35,22 @@ class ShareLiveModal extends React.Component { ...@@ -37,22 +35,22 @@ class ShareLiveModal extends React.Component {
handleConvertShortUrl = () => { handleConvertShortUrl = () => {
const { longUrl } = this.props.data; const { longUrl } = this.props.data;
// 发请求 // // 发请求
axios.Sales('public/businessShow/convertShortUrls', { // axios.Sales('public/businessShow/convertShortUrls', {
urls: [longUrl] // urls: [longUrl]
}).then((res) => { // }).then((res) => {
const { result = [] } = res; // const { result = [] } = res;
this.setState({ // this.setState({
shareUrl: result[0].shortUrl // shareUrl: result[0].shortUrl
}, () => { // }, () => {
const qrcodeWrapDom = document.querySelector('#qrcodeWrap'); // const qrcodeWrapDom = document.querySelector('#qrcodeWrap');
const qrcodeNode = new qrcode({ // const qrcodeNode = new qrcode({
text: this.state.shareUrl, // text: this.state.shareUrl,
size: 98, // size: 98,
}) // })
qrcodeWrapDom.appendChild(qrcodeNode); // qrcodeWrapDom.appendChild(qrcodeNode);
}); // });
}) // })
} }
componentWillUnmount() { componentWillUnmount() {
...@@ -107,8 +105,11 @@ class ShareLiveModal extends React.Component { ...@@ -107,8 +105,11 @@ class ShareLiveModal extends React.Component {
onCancel={this.props.close} onCancel={this.props.close}
> >
<div className="left" id="poster"> <div className="left" id="poster">
<div className="store-name">
<div className="course-name">{`【${courseName}】开课啦，快来学习！`}</div> <span className="text">{storeName}</span>
</div>
<div className="course-name">{type === 'videoClass' ? `${courseName}开课啦`: `邀请你观看直播：《${courseName}》`}</div>
<img <img
src={coverImgSrc} src={coverImgSrc}
crossOrigin="*" crossOrigin="*"
...@@ -124,12 +125,14 @@ class ShareLiveModal extends React.Component { ...@@ -124,12 +125,14 @@ class ShareLiveModal extends React.Component {
</div> </div>
</div> </div>
<div className="inst-name">
<span className="icon iconfont">&#xe7b1;</span>
<span className="text">{name}</span>
</div>
</div> </div>
<div className="right"> <div className="right">
<div className="share-poster right__item">
<div className="title">② 海报分享</div>
<div className="sub-title">学生可通过微信识别二维码，报名观看直播</div>
<div className="content" onClick={this.handleDownloadPoster}>下载海报</div>
</div>
<div className="share-url right__item"> <div className="share-url right__item">
<div className="title">① 链接分享</div> <div className="title">① 链接分享</div>
<div className="sub-title">学生可通过微信打开链接，报名观看直播</div> <div className="sub-title">学生可通过微信打开链接，报名观看直播</div>
...@@ -139,11 +142,6 @@ class ShareLiveModal extends React.Component { ...@@ -139,11 +142,6 @@ class ShareLiveModal extends React.Component {
</div> </div>
</div> </div>
<div className="share-poster right__item">
<div className="title">② 海报分享</div>
<div className="sub-title">学生可通过微信识别二维码，报名观看直播</div>
<div className="content" onClick={this.handleDownloadPoster}>下载海报</div>
</div>
</div> </div>
</Modal> </Modal>
) )
......
src/modules/course-manage/modal/ShareLiveModal.less
...@@ -52,22 +52,20 @@ ...@@ -52,22 +52,20 @@
} }
} }
.inst-name { .store-name {
background-color: #FAFAFA; // padding: 8px 16px;
min-height: 36px;
border-radius: 9px;
padding: 8px 16px;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 8px;
.iconfont {
color: #999;
margin-right: 4px;
}
.text { .text {
font-size: 12px; font-size: 12px;
color: #999; color: #999;
font-size: 14px;
line-height: 20px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%;
} }
} }
} }
...@@ -106,10 +104,10 @@ ...@@ -106,10 +104,10 @@
} }
.share-poster { .share-poster {
margin-top: 40px; margin-bottom: 40px;
.content { .content {
color: #FF7519; color:rgba(82, 137, 250, 1);
cursor: pointer; cursor: pointer;
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment