Skip to content

X
xiaomai-cloud-class-web
Commit 732ffe01 by zhangleyuan
Options

feat:解决合并代码后的冲突

parents 01db1047 00b7ddf6
Showing with 2239 additions and 1404 deletions
src/bu-components/PreviewCourseModal.less
...@@ -13,8 +13,9 @@ ...@@ -13,8 +13,9 @@
} }
.container { .container {
overflow: scroll; overflow-y: auto;
height: 100%;; overflow-x: hidden;
height: 100%;
.course-cover, .course-url { .course-cover, .course-url {
width: 100%; width: 100%;
......
src/bu-components/PreviewFileModal.less
...@@ -33,6 +33,7 @@ ...@@ -33,6 +33,7 @@
} }
} }
.operate{ .operate{
display:inline-block;
margin-top:24px; margin-top:24px;
.btn { .btn {
padding:5px 12px; padding:5px 12px;
......
src/bu-components/UploadProgressModal.jsx
...@@ -98,7 +98,6 @@ class UploadProgressModal extends React.Component { ...@@ -98,7 +98,6 @@ class UploadProgressModal extends React.Component {
// 开始上传之前初始化OssClient // 开始上传之前初始化OssClient
this.initOssClient(id, resourceName).then((result) => { this.initOssClient(id, resourceName).then((result) => {
const { ossClient, resourceId, callBack, callbackBody, ossUri } = result; const { ossClient, resourceId, callBack, callbackBody, ossUri } = result;
console.log('type',type);
ossClient.multipartUpload(ossUri, fileContent, { ossClient.multipartUpload(ossUri, fileContent, {
callback: { callback: {
url: callBack, url: callBack,
......
src/common/constants/academic/lessonEnum.js
...@@ -44,6 +44,10 @@ const FileVerifyMap = { ...@@ -44,6 +44,10 @@ const FileVerifyMap = {
type: "word", type: "word",
maxSize: 100 maxSize: 100
}, },
"application/wps-writer": {
type: "word",
maxSize: 100,
},
"application/vnd.openxmlformats-officedocument.wordprocessingml.document": { "application/vnd.openxmlformats-officedocument.wordprocessingml.document": {
type: "word", type: "word",
maxSize: 100 maxSize: 100
...@@ -133,12 +137,13 @@ const FileTypeIcon = { ...@@ -133,12 +137,13 @@ const FileTypeIcon = {
PPTX: "https://image.xiaomaiketang.com/xm/847pFAdYGW.png", PPTX: "https://image.xiaomaiketang.com/xm/847pFAdYGW.png",
PDF: "https://image.xiaomaiketang.com/xm/rrEJMNkhTG.png", PDF: "https://image.xiaomaiketang.com/xm/rrEJMNkhTG.png",
MP3: "https://image.xiaomaiketang.com/xm/ykjnSWDyQ6.png", MP3: "https://image.xiaomaiketang.com/xm/ykjnSWDyQ6.png",
MP4: "https://image.xiaomaiketang.com/xm/whSYMTdR57.png", MP4: "https://image.xiaomaiketang.com/xm/yK3ASiS8ch.png",
JPG: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png", JPG: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png",
JPEG: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png", JPEG: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png",
PNG: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png", PNG: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png",
GIF: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png", GIF: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png",
BMP: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png", BMP: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png",
VIDEO: 'https://image.xiaomaiketang.com/xm/yK3ASiS8ch.png'
}; };
const UploadIcon = "https://image.xiaomaiketang.com/xm/4DXNrZWWsd.png"; const UploadIcon = "https://image.xiaomaiketang.com/xm/4DXNrZWWsd.png";
......
src/components/ContactWidget.less
.ant-popover .ant-popover-content .ant-popover-inner { .contact-widget-popover .ant-popover-content .ant-popover-inner {
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
.ant-popover-inner-content { .ant-popover-inner-content {
padding: 0; padding: 0;
......
src/components/ContactWidget.tsx
...@@ -27,6 +27,7 @@ function Content() { ...@@ -27,6 +27,7 @@ function Content() {
export default function ContactWidget(props:ContactWidgetProps) { export default function ContactWidget(props:ContactWidgetProps) {
return <Popover return <Popover
className="contact-widget-popover"
placement={props.placement} placement={props.placement}
arrowPointAtCenter arrowPointAtCenter
content={Content} content={Content}
......
src/core/function.js
...@@ -1155,4 +1155,16 @@ window.XMShowClassName = (date, itemName) => { ...@@ -1155,4 +1155,16 @@ window.XMShowClassName = (date, itemName) => {
return ''; return '';
} }
return 'new-icon' return 'new-icon'
} }
\ No newline at end of file
// 格式化时间段为时分
window.formatDuration = function (time) {
const diff = Math.floor(time % 3600);
let hours = Math.floor(time / 3600);
let mins = Math.floor(diff / 60);
let seconds = Math.floor(time % 60);
hours = hours < 10 ? ("0" + hours) : hours;
mins = mins < 10 ? ("0" + mins) : mins;
seconds = seconds < 10 ? ("0" + seconds) : seconds;
return hours + ":" + mins + ":" + seconds;
};
\ No newline at end of file
src/data-source/aidTool/request-apis.ts
/* /*
* @Author: yuananting * @Author: yuananting
* @Date: 2021-03-03 15:13:12 * @Date: 2021-03-03 15:13:12
* @LastEditors: Please set LastEditors * @LastEditors: yuananting
* @LastEditTime: 2021-06-22 14:31:46 * @LastEditTime: 2021-07-09 16:58:34
* @Description: 助学工具接口 * @Description: 助学工具接口
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -88,3 +88,7 @@ export function batchQueryQuestionDetails(params: object) { ...@@ -88,3 +88,7 @@ export function batchQueryQuestionDetails(params: object) {
export function queryQuestionPageListWithContent(params: object) { export function queryQuestionPageListWithContent(params: object) {
return Service.Hades('public/hades/queryQuestionPageListWithContent', params); return Service.Hades('public/hades/queryQuestionPageListWithContent', params);
} }
export function queryCategoryTreeByPackage(params: object) {
return Service.Hades('public/externalHades/queryPackageCategory', params);
}
\ No newline at end of file
src/data-source/base/request-apis.ts
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: wufan * @Author: wufan
* @Date: 2020-12-01 17:21:21 * @Date: 2020-12-01 17:21:21
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-22 14:56:34 * @LastEditTime: 2021-07-09 15:33:33
* @Description: Description * @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -62,6 +62,9 @@ export function saveYoZoFileVersionId(params: object) { ...@@ -62,6 +62,9 @@ export function saveYoZoFileVersionId(params: object) {
export function yoZoUpload(ossUrl:String,appId:String,uploadSign:String){ export function yoZoUpload(ossUrl:String,appId:String,uploadSign:String){
return axios.post(`https://dmc.yozocloud.cn/api/file/http?fileUrl=${ossUrl}&appId=${appId}&sign=${uploadSign}`) return axios.post(`https://dmc.yozocloud.cn/api/file/http?fileUrl=${ossUrl}&appId=${appId}&sign=${uploadSign}`)
} }
export function saveFileVersionIdByCourseChapter(params: object) {
return Service.Hades('public/hades/saveFileVersionIdByCourseChapter', params);
}
export const getOssClient = ( export const getOssClient = (
data: object, data: object,
instId: string, instId: string,
......
src/data-source/course/request-api.ts
/* /*
* @Author: wufan * @Author: wufan
* @Date: 2020-12-12 11:57:10 * @Date: 2020-12-12 11:57:10
* @LastEditors: zangsuyun * @LastEditors: wufan
* @LastEditTime: 2021-03-22 13:54:20 * @LastEditTime: 2021-07-05 15:07:13
* @Description: Description * @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -57,7 +57,7 @@ export function getLiveCloudCourseBasePage(params: object) { ...@@ -57,7 +57,7 @@ export function getLiveCloudCourseBasePage(params: object) {
return Service.Hades("public/courseCloud/getLiveCloudCourseBasePage", params); return Service.Hades("public/courseCloud/getLiveCloudCourseBasePage", params);
} }
//视频课相关接口 //线上课相关接口
export function changeVideoShelfState(params: object) { export function changeVideoShelfState(params: object) {
return Service.Hades("public/hades/changeVideoShelfState", params); return Service.Hades("public/hades/changeVideoShelfState", params);
} }
...@@ -73,6 +73,9 @@ export function editVideoSchedule(params: object) { ...@@ -73,6 +73,9 @@ export function editVideoSchedule(params: object) {
export function userWatchInfo(params: object) { export function userWatchInfo(params: object) {
return Service.Hades("public/hades/userWatchInfo", params); return Service.Hades("public/hades/userWatchInfo", params);
} }
export function lineDetailWatchInfo(params: object) {
return Service.Hades("public/hades/lineDetailWatchInfo", params);
}
export function videoScheduleDetail(params: object) { export function videoScheduleDetail(params: object) {
return Service.Hades("public/hades/videoScheduleDetail", params); return Service.Hades("public/hades/videoScheduleDetail", params);
} }
......
src/data-source/knowledge/request-api.ts
...@@ -81,7 +81,7 @@ class KnowledgeAPI { ...@@ -81,7 +81,7 @@ class KnowledgeAPI {
exportPicLearnSync = (params: object) => { exportPicLearnSync = (params: object) => {
return Service.Hades("public/knowledge/exportPicLearnSync", params); return Service.Hades("public/knowledge/exportPicLearnSync", params);
} }
// 视频课观看记录导出 // 线上课观看记录导出
exportVideoLearnSync = (params: object) => { exportVideoLearnSync = (params: object) => {
return Service.Hades("public/knowledge/exportVideoLearnSync", params); return Service.Hades("public/knowledge/exportVideoLearnSync", params);
} }
......
src/data-source/plan/request-apis.ts
/* /*
* @Author: zhangleyuan * @Author: zhangleyuan
* @Date: 2021-02-21 16:08:38 * @Date: 2021-02-21 16:08:38
* @LastEditors: zhangleyuan * @LastEditors: yuananting
* @LastEditTime: 2021-03-09 12:54:31 * @LastEditTime: 2021-07-06 11:26:27
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
import Service from "@/common/js/service"; import Service from '@/common/js/service';
export function getTrainingPlanPage(params: object) { export function getTrainingPlanPage(params: object) {
return Service.Hades("public/hades/getTrainingPlanPage", params); return Service.Hades('public/hades/getTrainingPlanPage', params);
} }
export function createTrainingPlan(params: object) { export function createTrainingPlan(params: object) {
return Service.Hades("public/hades/createTrainingPlan", params); return Service.Hades('public/hades/createTrainingPlan', params);
} }
export function updateStateTrainingPlan(params: object) { export function updateStateTrainingPlan(params: object) {
return Service.Hades("public/hades/updateStateTrainingPlan", params); return Service.Hades('public/hades/updateStateTrainingPlan', params);
} }
export function getTrainingPlanDetail(params: object) { export function getTrainingPlanDetail(params: object) {
return Service.Hades("public/hades/getTrainingPlanDetail", params); return Service.Hades('public/hades/getTrainingPlanDetail', params);
} }
export function updateTrainingPlan(params: object) { export function updateTrainingPlan(params: object) {
return Service.Hades("public/hades/updateTrainingPlan", params); return Service.Hades('public/hades/updateTrainingPlan', params);
} }
export function deleteTrainingPlan(params: object) { export function deleteTrainingPlan(params: object) {
return Service.Hades("public/hades/deleteTrainingPlan", params); return Service.Hades('public/hades/deleteTrainingPlan', params);
} }
export function getPlanUserRecordPage(params: object) { export function getPlanUserRecordPage(params: object) {
return Service.Hades("public/hades/getPlanUserRecordPage", params); return Service.Hades('public/hades/getPlanUserRecordPage', params);
} }
export function getPlanCustomerRecordPage(params: object) { export function getPlanCustomerRecordPage(params: object) {
return Service.Hades("public/hades/getPlanCustomerRecordPage", params); return Service.Hades('public/hades/getPlanCustomerRecordPage', params);
} }
export function getPlanCustomerDetail(params: object) { export function getPlanCustomerDetail(params: object) {
return Service.Hades("public/hades/getPlanCustomerDetail", params); return Service.Hades('public/customerHades/getPlanCustomerDetail', params);
} }
export function getPlanCustomerAboutUser(params: object) { export function getPlanCustomerAboutUser(params: object) {
return Service.Hades("public/hades/getPlanCustomerAboutUser", params); return Service.Hades('public/hades/getPlanCustomerAboutUser', params);
} }
export function removePlanCustomer(params: object) { export function removePlanCustomer(params: object) {
return Service.Hades("public/hades/removePlanCustomer", params); return Service.Hades('public/hades/removePlanCustomer', params);
} }
export function getStorePlanAll(params: object) { export function getStorePlanAll(params: object) {
return Service.Hades("public/hades/getStorePlanAll", params); return Service.Hades('public/hades/getStorePlanAll', params);
} }
export function getTrainingCourseAutoCancel(params: object) { export function getTrainingCourseAutoCancel(params: object) {
return Service.Hades("public/hades/getTrainingCourseAutoCancel", params); return Service.Hades('public/hades/getTrainingCourseAutoCancel', params);
} }
\ No newline at end of file
src/domains/aid-tool-domain/AidToolService.ts
/* /*
* @Author: yuananting * @Author: yuananting
* @Date: 2021-03-11 11:34:37 * @Date: 2021-03-11 11:34:37
* @LastEditors: fusanqiasng * @LastEditors: yuananting
* @LastEditTime: 2021-06-16 09:56:46 * @LastEditTime: 2021-07-09 16:54:54
* @Description: 助学工具接口 * @Description: 助学工具接口
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
import { import {
queryExternalCategoryTree, queryExternalCategoryTree,
queryCategoryTreeByPackage,
queryCategoryTree, queryCategoryTree,
addCategory, addCategory,
delCategory, delCategory,
...@@ -38,6 +39,11 @@ export default class AidToolService { ...@@ -38,6 +39,11 @@ export default class AidToolService {
return queryExternalCategoryTree(parmas); return queryExternalCategoryTree(parmas);
} }
// 课程分类树（按课程包）
static queryCategoryTreeByPackage(params: any) {
return queryCategoryTreeByPackage(params);
}
// 获取题目分类树 // 获取题目分类树
static queryCategoryTree(params: any) { static queryCategoryTree(params: any) {
return queryCategoryTree(params); return queryCategoryTree(params);
......
src/domains/basic-domain/baseService.ts
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
* @Author: wufan * @Author: wufan
* @Date: 2020-12-01 17:20:49 * @Date: 2020-12-01 17:20:49
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-22 14:57:01 * @LastEditTime: 2021-07-09 15:33:59
* @Description: Description * @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
import { getUserStore, getUserPermission ,logout,getStoreUser,sendBizAuthCode,editUserPhone,checkBizAuthCode,sendNewPhoneAuthCode,sendLoginAuthCode,login,getLastedVersion, getEnterpriseUser,getWXWorkLoginNoCheck,getLesseeVersionMsg,getYoZoSign,saveYoZoFileVersionId,yoZoUpload} from '@/data-source/base/request-apis'; import { getUserStore, getUserPermission ,logout,getStoreUser,sendBizAuthCode,editUserPhone,checkBizAuthCode,sendNewPhoneAuthCode,sendLoginAuthCode,login,getLastedVersion, getEnterpriseUser,getWXWorkLoginNoCheck,getLesseeVersionMsg,getYoZoSign,saveYoZoFileVersionId,yoZoUpload,saveFileVersionIdByCourseChapter} from '@/data-source/base/request-apis';
export default class StoreService { export default class StoreService {
// 获取员工列表 // 获取员工列表
...@@ -73,4 +73,7 @@ export default class StoreService { ...@@ -73,4 +73,7 @@ export default class StoreService {
static yoZoUpload(ossUrl:String,appId:String,uploadSign:String){ static yoZoUpload(ossUrl:String,appId:String,uploadSign:String){
return yoZoUpload(ossUrl,appId,uploadSign); return yoZoUpload(ossUrl,appId,uploadSign);
} }
static saveFileVersionIdByCourseChapter(params: any){
return saveFileVersionIdByCourseChapter(params);
}
} }
\ No newline at end of file
src/domains/course-domain/CourseService.ts
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
import { import {
fetchLecturerData, getCategoryTree, knowledgeMediaCoursePage, fetchUserData, exportStudentCourseData, exportPlayBackCourseData, fetchPlaybackList, createLiveCloudCourse, getLiveCloudCoursePage, fetchLecturerData, getCategoryTree, knowledgeMediaCoursePage, fetchUserData, exportStudentCourseData, exportPlayBackCourseData, fetchPlaybackList, createLiveCloudCourse, getLiveCloudCoursePage,
getLiveCloudCourseDetail, updateLiveCloudCourse, turnOnOrOffLiveCloudCourse, delLiveCloudCourse, changeVideoShelfState, createVideoSchedule, delVideoSchedule, getLiveCloudCourseDetail, updateLiveCloudCourse, turnOnOrOffLiveCloudCourse, delLiveCloudCourse, changeVideoShelfState, createVideoSchedule, delVideoSchedule,
editVideoSchedule, userWatchInfo, videoSchedulePage, videoScheduleDetail, videoWatchInfo, getQrcode, getLiveCloudCourseBasePage, videoScheduleBasePage, relatedCourseToPlan editVideoSchedule, userWatchInfo, videoSchedulePage, videoScheduleDetail, videoWatchInfo, getQrcode, getLiveCloudCourseBasePage, videoScheduleBasePage, relatedCourseToPlan,
lineDetailWatchInfo
} from '@/data-source/course/request-api'; } from '@/data-source/course/request-api';
export default class courseService { export default class courseService {
...@@ -85,6 +86,9 @@ export default class courseService { ...@@ -85,6 +86,9 @@ export default class courseService {
static videoWatchInfo(params: any) { static videoWatchInfo(params: any) {
return videoWatchInfo(params); return videoWatchInfo(params);
} }
static lineDetailWatchInfo(params: any) {
return lineDetailWatchInfo(params);
}
static getLiveCloudCourseBasePage(params: any) { static getLiveCloudCourseBasePage(params: any) {
return getLiveCloudCourseBasePage(params); return getLiveCloudCourseBasePage(params);
} }
......
src/domains/resource-disk/constants.ts
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-20 09:21:40 * @Date: 2020-08-20 09:21:40
* @LastEditors: zhangleyuan * @LastEditors: yuananting
* @LastEditTime: 2021-03-04 17:16:30 * @LastEditTime: 2021-07-15 11:48:58
* @Description: * @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -77,6 +77,10 @@ const FILR_VERIFY_MAP = { ...@@ -77,6 +77,10 @@ const FILR_VERIFY_MAP = {
type: "word", type: "word",
maxSize: 100 maxSize: 100
}, },
"application/wps-writer": {
type: "word",
maxSize: 100,
},
"application/vnd.openxmlformats-officedocument.wordprocessingml.document": { "application/vnd.openxmlformats-officedocument.wordprocessingml.document": {
type: "word", type: "word",
maxSize: 100 maxSize: 100
......
src/index.html
<!-- <!--
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-24 12:20:57 * @Date: 2020-08-24 12:20:57
* @LastEditors: wufan * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-15 16:41:14 * @LastEditTime: 2021-07-18 10:22:35
* @Description: * @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
--> -->
......
src/modules/course-manage/components/AddLiveBasic.less
...@@ -2,81 +2,76 @@ ...@@ -2,81 +2,76 @@
.label { .label {
width: 100px; width: 100px;
text-align: right; text-align: right;
display:inline-block; display: inline-block;
.require { .require {
color: #EC4B35; color: #ec4b35;
} }
} }
.course-cover { .course-cover {
margin-left: 14px; margin-left: 14px;
display: flex; display: flex;
margin-top: 16px; margin-top: 24px;
&__wrap { &__wrap {
position: relative; position: relative;
.tag { .img-content {
border-radius: 2px; margin-top: 8px;
background: #D6D6D6; margin-right: 20px;
font-size: 12px; width: 299px;
height: 18px; height: 169px;
width: 52px; position: relative;
text-align: center;
color: #FFF;
position: absolute;
top: 8px;
left: 8px;
}
}
.course-cover__wrap {
display: flex;
flex-direction: row;
}
.img-content {
margin-right: 20px;
width: 299px;
height: 169px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
border-radius: 4px; border-radius: 4px;
}
.tag {
border-radius: 2px;
background: #d6d6d6;
font-size: 12px;
height: 18px;
width: 52px;
text-align: center;
color: #fff;
position: absolute;
top: 8px;
left: 8px;
}
} }
}
.opt-btns { .opt-btns {
.default-btn {
margin-left: 14px;
color: #2966ff;
cursor: pointer;
.default-btn { &.disabled {
margin-left: 16px; color: #ccc;
color: #2966FF; cursor: not-allowed;
cursor: pointer; }
}
&.disabled { .ant-upload-list {
color: #CCC; display: none;
cursor: not-allowed;
} }
}
.ant-upload-list { .tips {
display: none; margin-top: 8px;
color: #999;
}
} }
} }
.tips {
margin-top: 8px;
color: #999;
}
} }
.course-catalog{ .course-catalog {
margin:20px 0 0 14px; margin: 20px 0 0 14px;
} }
} }
.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled){ .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled) {
font-weight:normal !important; font-weight: normal !important;
color:#2966FF !important; color: #2966ff !important;
} }
#imgCutModalNew { #imgCutModalNew {
width: 500px; width: 500px;
...@@ -84,4 +79,4 @@ ...@@ -84,4 +79,4 @@
} }
.preview-url-box{ .preview-url-box{
overflow: hidden; overflow: hidden;
} }
\ No newline at end of file
src/modules/course-manage/components/GraphicsEditor.less
.graphics-editor-container { .graphics-editor-container {
border: 1px solid #E8E8E8; border: 1px solid #e8e8e8;
border-radius: 4px; border-radius: 4px;
width: 702px; width: 702px;
height: 510px; height: 510px;
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
.w-e-toolbar { .w-e-toolbar {
background-color: #fff !important; background-color: #fff !important;
border: none !important; border: none !important;
border-bottom: 1px solid #E8E8E8 !important; border-bottom: 1px solid #e8e8e8 !important;
} }
.w-e-text-container { .w-e-text-container {
...@@ -38,19 +38,26 @@ ...@@ -38,19 +38,26 @@
color: #666; color: #666;
z-index: 1; z-index: 1;
} }
.editor-warning {
position: absolute;
right: 0;
color: red;
}
.w-e-full-screen-editor { .w-e-full-screen-editor {
.w-e-text-container { .w-e-text-container {
height: ~'calc(100vh - 109px)' !important; height: ~'calc(100vh - 109px)' !important;
} }
} }
&.introduce { &.introduce {
height: 200px; height: 240px;
.w-e-text-container { .w-e-text-container {
height: ~'calc(100% - 69px)' !important; height: ~'calc(100% - 69px)' !important;
} }
} }
&.warning{ &.warning {
border-color: red; border-color: red;
} }
} }
\ No newline at end of file
src/modules/course-manage/graphics-course/AddGraphicsCourse.jsx
...@@ -27,6 +27,7 @@ import _ from 'underscore'; ...@@ -27,6 +27,7 @@ import _ from 'underscore';
import Upload from '@/core/upload'; import Upload from '@/core/upload';
import ImgClipModal from '@/components/ImgClipModal' import ImgClipModal from '@/components/ImgClipModal'
import './AddGraphicsCourse.less'; import './AddGraphicsCourse.less';
import Bus from '@/core/bus';
const EDIT_BOX_KEY = Math.random(); const EDIT_BOX_KEY = Math.random();
const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' }; const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' };
...@@ -34,7 +35,7 @@ const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryL ...@@ -34,7 +35,7 @@ const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryL
//添加课程时课程默认的一些值 //添加课程时课程默认的一些值
const defaultShelfState = 'YES'; const defaultShelfState = 'YES';
const whetherVisitorsJoin = 'NO'; const whetherVisitorsJoin = 'NO';
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png'; const defaultCover = 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png';
let cutFlag = false; let cutFlag = false;
class AddGraphicsCourse extends React.Component { class AddGraphicsCourse extends React.Component {
...@@ -53,7 +54,7 @@ class AddGraphicsCourse extends React.Component { ...@@ -53,7 +54,7 @@ class AddGraphicsCourse extends React.Component {
introduce: '', introduce: '',
courseMediaId: null, // 图文课链接 courseMediaId: null, // 图文课链接
coverId: null, // 图文封面的recourceId coverId: null, // 图文封面的recourceId
coverUrl: defaultCoverUrl, // 图文课封面 coverUrl: defaultCover, // 图文课封面
studentList: [], // 上课学员列表 studentList: [], // 上课学员列表
shelfState: 'YES', //是否开启学院展示 shelfState: 'YES', //是否开启学院展示
selectedFileList: [], // 已经从资料云盘中勾选的文件 selectedFileList: [], // 已经从资料云盘中勾选的文件
...@@ -73,6 +74,11 @@ class AddGraphicsCourse extends React.Component { ...@@ -73,6 +74,11 @@ class AddGraphicsCourse extends React.Component {
if (pageType === 'edit') { if (pageType === 'edit') {
this.handleFetchScheudleDetail(id); this.handleFetchScheudleDetail(id);
} }
Bus.bind('editorLimit', (editorTextLength, editorType) => {
this.setState({
[editorType]: editorTextLength,
});
});
} }
initBus = () => { initBus = () => {
...@@ -314,11 +320,11 @@ class AddGraphicsCourse extends React.Component { ...@@ -314,11 +320,11 @@ class AddGraphicsCourse extends React.Component {
//过期判断 //过期判断
if (User.getExpirationTime() && moment().valueOf() > Number(User.getExpirationTime())) { if (User.getExpirationTime() && moment().valueOf() > Number(User.getExpirationTime())) {
Modal.warning({ Modal.warning({
title:"服务已到期", title: '服务已到期',
content: "当前企业购买的小麦企学院服务已到期，如需继续使用学院功能，请尽快续费购买", content: '当前企业购买的小麦企学院服务已到期，如需继续使用学院功能，请尽快续费购买',
okText: "我知道了" okText: '我知道了',
}) });
return return;
} }
const { id, coverId, pageType, courseName, courseMedia, introduce, categoryId, shelfState, whetherVisitorsJoin } = this.state; const { id, coverId, pageType, courseName, courseMedia, introduce, categoryId, shelfState, whetherVisitorsJoin } = this.state;
...@@ -387,6 +393,7 @@ class AddGraphicsCourse extends React.Component { ...@@ -387,6 +393,7 @@ class AddGraphicsCourse extends React.Component {
}; };
handleValidate = (courseName, courseMedia, categoryId) => { handleValidate = (courseName, courseMedia, categoryId) => {
const { graphicsCourseIntor, graphicsCourseContent } = this.state;
return new Promise((resolve) => { return new Promise((resolve) => {
if (!courseName) { if (!courseName) {
message.warning('请输入课程名称'); message.warning('请输入课程名称');
...@@ -403,6 +410,18 @@ class AddGraphicsCourse extends React.Component { ...@@ -403,6 +410,18 @@ class AddGraphicsCourse extends React.Component {
resolve(false); resolve(false);
return false; return false;
} }
if (graphicsCourseContent > 1000) {
message.warning('课程内容超过字数限定');
resolve(false);
return;
}
if (graphicsCourseIntor > 1000) {
message.warning('课程简介超过字数限定');
resolve(false);
return;
}
// const textMedia = scheduleMedia.filter((item) => item.mediaType === 'TEXT'); // const textMedia = scheduleMedia.filter((item) => item.mediaType === 'TEXT');
// for (let i = 0, len = textMedia.length; i < len; i++) { // for (let i = 0, len = textMedia.length; i < len; i++) {
// if (textMedia[i].mediaContentLength && textMedia[i].mediaContentLength.length > 1000) { // if (textMedia[i].mediaContentLength && textMedia[i].mediaContentLength.length > 1000) {
...@@ -415,6 +434,17 @@ class AddGraphicsCourse extends React.Component { ...@@ -415,6 +434,17 @@ class AddGraphicsCourse extends React.Component {
}); });
}; };
// 使用默认封面图
handleResetCoverUrl = () => {
const { coverUrl } = this.state;
const isDefaultCover = coverUrl === defaultCover;
// 如果已经是默认图的话，不做任何任何处理
if (isDefaultCover) return;
this.setState({ coverUrl: defaultCover, coverId: null }, () => {
message.success('已替换为默认图');
});
};
render() { render() {
const { const {
id, id,
...@@ -442,6 +472,8 @@ class AddGraphicsCourse extends React.Component { ...@@ -442,6 +472,8 @@ class AddGraphicsCourse extends React.Component {
const hasSelectedStu = studentList.length; const hasSelectedStu = studentList.length;
const courseWareIcon = FileVerifyMap[videoType] ? FileTypeIcon[FileVerifyMap[videoType].type] : FileTypeIcon[videoType]; const courseWareIcon = FileVerifyMap[videoType] ? FileTypeIcon[FileVerifyMap[videoType].type] : FileTypeIcon[videoType];
// 当前是否使用的是默认图片
const isDefaultCover = coverUrl === defaultCover;
return ( return (
<div className='page add-graphics-course-page'> <div className='page add-graphics-course-page'>
...@@ -468,19 +500,39 @@ class AddGraphicsCourse extends React.Component { ...@@ -468,19 +500,39 @@ class AddGraphicsCourse extends React.Component {
<div className='cover-url flex mt16'> <div className='cover-url flex mt16'>
<div className='label'>封面图：</div> <div className='label'>封面图：</div>
<div className='cover-url__wrap'> {/* <div className='cover-url__wrap'>
<div className='opt-btns'>
<Button
onClick={() => {
this.setState({
showSelectCoverModal: true,
});
}}>{`${pageType === 'add' && !coverUrl ? '上传' : '修改'}封面`}</Button>
<div className='tips'></div>
</div>
<div className='img-content'> <div className='img-content'>
<img src={coverUrl} /> <img src={coverUrl} />
</div> </div>
</div> */}
<div className='course-cover__wrap'>
<div className='opt-btns'> <div className='opt-btns'>
<Button <Button
onClick={() => { onClick={() => {
this.setState({ this.setState({
showSelectCoverModal: true, showSelectCoverModal: true,
}); });
}}>{`${pageType === 'add' && !coverUrl ? '上传' : '修改'}封面`}</Button> }}>
上传图片
</Button>
<span className={`default-btn ${isDefaultCover ? 'disabled' : ''}`} onClick={this.handleResetCoverUrl}>
使用默认图
</span>
<div className='tips'>建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div> <div className='tips'>建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
</div> </div>
<div className='img-content'>
{isDefaultCover && <span className='tag'>默认图</span>}
<img src={coverUrl} />
</div>
</div> </div>
</div> </div>
<div className='course-catalog required'> <div className='course-catalog required'>
......
src/modules/course-manage/graphics-course/AddGraphicsCourse.less
.add-graphics-course-page { .add-graphics-course-page {
position:relative !important; position: relative !important;
.box{ .box {
margin-bottom:52px !important; margin-bottom: 52px !important;
} }
.ant-radio-group { .ant-radio-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.radio-item { .radio-item {
margin-bottom: 12px; margin-bottom: 12px;
...@@ -28,14 +27,14 @@ ...@@ -28,14 +27,14 @@
.form { .form {
margin-top: 16px; margin-top: 16px;
padding: 0 16px; padding: 0 16px;
.label{ .label {
display:inline-block; display: inline-block;
text-align:right; text-align: right;
width:85px; width: 85px;
} }
.required { .required {
position: relative; position: relative;
&::before { &::before {
position: absolute; position: absolute;
content: '*'; content: '*';
...@@ -43,14 +42,14 @@ ...@@ -43,14 +42,14 @@
left: 5px; left: 5px;
top: 6px; top: 6px;
} }
&.label::before { &.label::before {
top: 0; top: 0;
} }
} }
.course-catalog{ .course-catalog {
margin-bottom:16px; margin-bottom: 16px;
margin-top:16px; margin-top: 16px;
} }
.course-ware { .course-ware {
display: flex; display: flex;
...@@ -70,42 +69,101 @@ ...@@ -70,42 +69,101 @@
.flex { .flex {
display: flex; display: flex;
} }
.cover-url__wrap { .course-cover {
.img-content { margin-left: 14px;
width: 298px; display: flex;
height: 172px; margin-top: 24px;
img { &__wrap {
width: 100%; position: relative;
height: 100%;
object-fit: contain; .img-content {
border-radius: 4px; margin-top: 8px;
margin-right: 20px;
width: 299px;
height: 169px;
position: relative;
img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 4px;
}
.tag {
border-radius: 2px;
background: #d6d6d6;
font-size: 12px;
height: 18px;
width: 52px;
text-align: center;
color: #fff;
position: absolute;
top: 8px;
left: 8px;
}
} }
}
.empty-img { .opt-btns {
width: 298px; .default-btn {
height: 172px; margin-left: 14px;
border: 1px dashed #EBEBEB; color: #2966ff;
border-radius: 4px; cursor: pointer;
padding: 12px;
color: #999; &.disabled {
padding: 52px 24px; color: #ccc;
text-align: center; cursor: not-allowed;
} }
}
.opt-btns {
margin-top: 8px; .ant-upload-list {
display: flex; display: none;
align-items: center; }
.tips { .tips {
margin-left: 12px; margin-top: 8px;
color: #999; color: #999;
}
} }
} }
} }
// .cover-url__wrap {
// .img-content {
// width: 298px;
// height: 172px;
// img {
// width: 100%;
// height: 100%;
// object-fit: contain;
// border-radius: 4px;
// }
// }
// .empty-img {
// width: 298px;
// height: 172px;
// border: 1px dashed #EBEBEB;
// border-radius: 4px;
// padding: 12px;
// color: #999;
// padding: 52px 24px;
// text-align: center;
// }
// .opt-btns {
// margin-top: 8px;
// display: flex;
// align-items: center;
// .tips {
// margin-left: 12px;
// color: #999;
// }
// }
// }
.select-student { .select-student {
align-items: center; align-items: center;
margin-left: 24px; margin-left: 24px;
...@@ -139,10 +197,10 @@ ...@@ -139,10 +197,10 @@
justify-content: flex-end; justify-content: flex-end;
padding-right: 72px; padding-right: 72px;
background: #fff; background: #fff;
border-top: 1px solid #E8E8E8; border-top: 1px solid #e8e8e8;
z-index: 999; z-index: 999;
.ant-btn { .ant-btn {
margin-left: 10px; margin-left: 10px;
} }
} }
} }
\ No newline at end of file
src/modules/course-manage/graphics-course/components/AddGraphicsIntro.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-07-16 11:05:17 * @Date: 2020-07-16 11:05:17
* @Last Modified by: chenshu * @Last Modified by: chenshu
* @Last Modified time: 2021-04-06 16:17:57 * @Last Modified time: 2021-04-06 16:17:57
* @Description: 添加直播-简介 * @Description: 添加直播-简介
...@@ -17,55 +17,53 @@ import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepare ...@@ -17,55 +17,53 @@ import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepare
import { DISK_MAP } from '@/common/constants/academic/lessonEnum'; import { DISK_MAP } from '@/common/constants/academic/lessonEnum';
import { ImgCutModalNew } from '@/components'; import { ImgCutModalNew } from '@/components';
const { TextArea } = Input; const { TextArea } = Input;
class AddGraphicsIntro extends React.Component { class AddGraphicsIntro extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
showSelectFileModal: false, showSelectFileModal: false,
diskList: [], diskList: [],
selectType: null, selectType: null,
} };
} }
// 上传封面图 // 上传封面图
handleShowImgCutModal = (event) => { handleShowImgCutModal = (event) => {
const imageFile = event.target.files[0]; const imageFile = event.target.files[0];
if (!imageFile) return; if (!imageFile) return;
this.setState({ this.setState({
imageFile, imageFile,
showCutModal: true, showCutModal: true,
}); });
} };
// 选择暖场资源 // 选择暖场资源
handleSelectVideo = (file) => { handleSelectVideo = (file) => {
const { selectType } = this.state; const { selectType } = this.state;
this.setState({ this.setState({
showSelectFileModal: false showSelectFileModal: false,
}) });
const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file; const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file;
if(selectType === 'WARMUP'){ if (selectType === 'WARMUP') {
const liveCourseWarmMedia = { const liveCourseWarmMedia = {
contentType: 'WARMUP', contentType: 'WARMUP',
mediaType: folderFormat === 'MP4' ? 'VIDEO' : 'PICTURE', mediaType: folderFormat === 'MP4' ? 'VIDEO' : 'PICTURE',
mediaContent: resourceId, mediaContent: resourceId,
mediaUrl: ossUrl, mediaUrl: ossUrl,
mediaName: folderName, mediaName: folderName,
size: folderSize size: folderSize,
} };
this.props.onChange('liveCourseWarmMedia', liveCourseWarmMedia); this.props.onChange('liveCourseWarmMedia', liveCourseWarmMedia);
}else{ } else {
// 最多添加九图片 // 最多添加九图片
const { liveCourseMediaRequests } = this.props.data; const { liveCourseMediaRequests } = this.props.data;
const list = _.filter(liveCourseMediaRequests, (item) => { const list = _.filter(liveCourseMediaRequests, (item) => {
return item.mediaType == "PICTURE"; return item.mediaType == 'PICTURE';
}); });
if (list.length > 8) { if (list.length > 8) {
message.warning("最多添加9张图片"); message.warning('最多添加9张图片');
return; return;
} }
liveCourseMediaRequests.push({ liveCourseMediaRequests.push({
...@@ -78,121 +76,116 @@ class AddGraphicsIntro extends React.Component { ...@@ -78,121 +76,116 @@ class AddGraphicsIntro extends React.Component {
}); });
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests); this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
} }
};
}
changeDetail = (value) => { changeDetail = (value) => {
this.props.onChange('courseMedia', value); this.props.onChange('courseMedia', value);
} };
changeIntro = (value) => { changeIntro = (value) => {
this.props.onChange('introduce', value); this.props.onChange('introduce', value);
} };
whetherVisitorsJoinChange = ()=>{ whetherVisitorsJoinChange = () => {
if(this.props.data.whetherVisitorsJoin==="NO"){ if (this.props.data.whetherVisitorsJoin === 'NO') {
this.props.onChange('whetherVisitorsJoin','YES') this.props.onChange('whetherVisitorsJoin', 'YES');
}else{ } else {
this.props.onChange('whetherVisitorsJoin','NO') this.props.onChange('whetherVisitorsJoin', 'NO');
} }
} };
shelfStateChange = ()=>{ shelfStateChange = () => {
if(this.props.data.shelfState==="NO"){ if (this.props.data.shelfState === 'NO') {
this.props.onChange('shelfState','YES') this.props.onChange('shelfState', 'YES');
}else{ } else {
this.props.onChange('shelfState','NO') this.props.onChange('shelfState', 'NO');
} }
} };
render() { render() {
const {data: { id, whetherVisitorsJoin, courseMedia, introduce, shelfState, loadcourseMedia, loadintroduce } } = this.props; const {
data: { id, whetherVisitorsJoin, courseMedia, introduce, shelfState, loadcourseMedia, loadintroduce },
} = this.props;
const { showSelectFileModal, selectType } = this.state; const { showSelectFileModal, selectType } = this.state;
return ( return (
<div className="add-video__intro-info"> <div className='add-graphic__intro-info'>
<div className="allow-tourist-join"> <div className='allow-tourist-join'>
<span className="label">观看设置：</span> <span className='label'>观看设置：</span>
<div className="content"> <div className='content'>
<div> <Switch checked={whetherVisitorsJoin === 'NO' ? true : false} onChange={this.whetherVisitorsJoinChange} />
<Switch checked={whetherVisitorsJoin==="YES"? true:false} onChange={this.whetherVisitorsJoinChange}/> <div className='desc'>{whetherVisitorsJoin === 'NO' ? '已开启，学员需绑定手机号才可观看' : '已关闭，学员无需绑定手机号即可观看'}</div>
</div>
<div>
<div className="desc">
<div>开启：允许未绑定手机号的学员观看</div>
<div>关闭：仅限绑定了手机号的学员可以进入观看图文课</div>
</div>
</div>
</div> </div>
</div> </div>
<div className="store-show"> <div className='store-show'>
<span className="label">学院展示：</span> <span className='label'>学院展示：</span>
<div className="content"> <div className='content'>
<Row> <Switch checked={shelfState === 'YES' ? true : false} onChange={this.shelfStateChange} />
<Col span={3}> <div className='desc'>{shelfState === 'YES' ? '已开启，课程将在该学院的学员课程列表中显示' : '已关闭，课程将在该学院的学员课程列表中隐藏'}</div>
<Switch checked={shelfState==="YES"? true:false} onChange={this.shelfStateChange}/>
</Col>
<Col span={21}>
<div className="desc">
<div>开启：图文课将在学员学院图文课列表中展示</div>
<div>关闭：图文课将在学员学院图文课列表中隐藏</div>
</div>
</Col>
</Row>
</div> </div>
</div> </div>
<div className="introduce required"> <div className='introduce required'>
<span className="label" style={{ marginTop: 5 }}>课程内容：</span> <span className='label' style={{ marginTop: 5 }}>
<div className="content"> 课程内容：
<div className="intro-list"> </span>
<div className="intro-list__item content-editor"> <div className='content'>
{(!id || loadcourseMedia) && <div className='intro-list'>
<div className='intro-list__item content-editor'>
{(!id || loadcourseMedia) && (
<GraphicsEditor <GraphicsEditor
id="content" id='content'
maxLimit={1000}
editorType={'graphicsCourseContent'}
detail={{ detail={{
content: courseMedia content: courseMedia,
}}
onChange={(val) => {
this.changeDetail(val);
}} }}
onChange={(val) => { this.changeDetail(val) }}
/> />
} )}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="introduce"> <div className='introduce'>
<span className="label">课程简介：</span> <span className='label'>课程简介：</span>
<div className="content"> <div className='content'>
<div className="intro-list"> <div className='intro-list'>
<div className="intro-list__item introduce-editor"> <div className='intro-list__item introduce-editor'>
{(!id || loadintroduce) && {(!id || loadintroduce) && (
<GraphicsEditor <GraphicsEditor
id="intro" id='intro'
isIntro={true} isIntro={true}
maxLimit={1000}
editorType={'graphicsCourseIntor'}
detail={{ detail={{
content: introduce content: introduce,
}}
onChange={(val) => {
this.changeIntro(val);
}} }}
onChange={(val) => { this.changeIntro(val) }}
/> />
} )}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/* 选择暖场图文件弹窗 */} {/* 选择暖场图文件弹窗 */}
{ showSelectFileModal && {showSelectFileModal && (
<SelectPrepareFileModal <SelectPrepareFileModal
operateType="select" operateType='select'
accept={selectType==="INTRO"?"image/jpeg,image/png,image/jpg":"video/mp4,image/jpeg,image/png,image/jpg"} accept={selectType === 'INTRO' ? 'image/jpeg,image/png,image/jpg' : 'video/mp4,image/jpeg,image/png,image/jpg'}
selectTypeList={ selectType==="INTRO" ? ['JPG', 'JPEG', 'PNG']: ['MP4', 'JPG', 'JPEG', 'PNG'] } selectTypeList={selectType === 'INTRO' ? ['JPG', 'JPEG', 'PNG'] : ['MP4', 'JPG', 'JPEG', 'PNG']}
tooltip={ selectType==="INTRO"?'支持文件类型：jpg、jpeg、png':'支持文件类型：jpg、jpeg、png、mp4'} tooltip={selectType === 'INTRO' ? '支持文件类型：jpg、jpeg、png' : '支持文件类型：jpg、jpeg、png、mp4'}
isOpen={showSelectFileModal} isOpen={showSelectFileModal}
onClose={() => { onClose={() => {
this.setState({ showSelectFileModal: false }) this.setState({ showSelectFileModal: false });
}} }}
onSelect={this.handleSelectVideo} onSelect={this.handleSelectVideo}
/> />
} )}
</div> </div>
) );
} }
} }
......
src/modules/course-manage/graphics-course/components/AddGraphicsIntro.less
.add-video__intro-info { .add-graphic__intro-info {
.w-e-full-screen-editor { .w-e-full-screen-editor {
background: #fff !important; background: #fff !important;
} }
.playback { .playback {
margin-bottom: 10px; margin-bottom: 10px;
.require { .require {
color: #EC4B35; color: #ec4b35;
}
&__text {
color: #999;
}
} }
.label{ &__text {
display:inline-block; color: #999;
text-align:right;
width:85px;
} }
.playback, }
.introduce { .label {
display: inline-block;
text-align: right;
width: 85px;
}
.playback,
.introduce {
display: flex;
flex-direction: row;
}
.allow-tourist-join {
display: flex;
.content {
display: flex; display: flex;
flex-direction: row;
} }
.allow-tourist-join{ .desc {
display:flex; margin-left: 16px;
.content{ font-size: 14px;
display:flex; color: #999;
} display: inline-block;
.desc{
margin-left:16px;
font-size:14px;
color:#999;
display:inline-block;
}
}
.store-show{
display:flex;
margin-top:16px;
margin-bottom:16px;
.desc{
margin-left:16px;
font-size:14px;
color:#999;
display:inline-block;
}
}
.radio {
display: block;
height: 30px;
line-height: 30px;
} }
.interactive-playback { }
.store-show {
display: flex;
margin-top: 16px;
margin-bottom: 16px;
.content {
display: flex; display: flex;
margin-bottom: 20px;
}
textarea.ant-input {
min-height: 80px;
} }
.desc {
.intro-list__item { margin-left: 16px;
display: flex; font-size: 14px;
margin-bottom: 16px; color: #999;
position: relative; display: inline-block;
&.picture {
width: 550px;
padding: 16px;
border: 1px solid #EEE;
border-radius: 4px;
.img__wrap {
width: 299px;
height: 168px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
.little-icon {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
right: -20px;
.iconfont {
width: 20px;
height: 20px;
line-height: 20px;
font-size: 20px;
color: #999;
margin-bottom: 4px;
cursor: pointer;
&.close {
margin-top: 8px;
background-image: url('https://image.xiaomaiketang.com/xm/eesMPhNP3e.png');
background-size: 100% 100%;
}
}
}
} }
}
.operate { .radio {
display: flex; display: block;
align-items: center; height: 30px;
justify-content: center; line-height: 30px;
}
.interactive-playback {
display: flex;
margin-bottom: 20px;
}
textarea.ant-input {
min-height: 80px;
}
.intro-list__item {
display: flex;
margin-bottom: 32px;
position: relative;
&.picture {
width: 550px; width: 550px;
height: 80px;
line-height: 80px;
padding: 16px; padding: 16px;
margin-top: 16px; border: 1px solid #eee;
border: 1px dashed #EBEBEB;
border-radius: 4px; border-radius: 4px;
.ant-upload { .img__wrap {
vertical-align: middle; width: 299px;
height: 168px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
} }
}
&__item {
display: flex; .little-icon {
flex-direction: column; display: flex;
flex-direction: column;
position: absolute;
top: 0;
right: -20px;
.iconfont {
width: 20px;
height: 20px;
line-height: 20px;
font-size: 20px;
color: #999;
margin-bottom: 4px;
cursor: pointer; cursor: pointer;
&:not(:last-child) { &.close {
margin-right: 82px; margin-top: 8px;
} background-image: url('https://image.xiaomaiketang.com/xm/eesMPhNP3e.png');
background-size: 100% 100%;
.iconfont {
font-size: 22px;
line-height: 22px;
color: #BFBFBF;
text-align: center;
}
.text {
color: #999;
line-height: 20px;
margin-top: 4px;
} }
} }
} }
}
.tips {
color: #999; .operate {
margin-top: 16px; display: flex;
margin-bottom: 8px; align-items: center;
} justify-content: center;
.checkExample { width: 550px;
width: 60px; height: 80px;
color: #FF7519; line-height: 80px;
cursor: pointer; padding: 16px;
margin-top: 16px;
border: 1px dashed #ebebeb;
border-radius: 4px;
.ant-upload {
vertical-align: middle;
} }
.warmup {
margin-bottom: 17px; &__item {
display: flex; display: flex;
flex-direction: column;
cursor: pointer;
&:not(:last-child) {
margin-right: 82px;
}
.iconfont {
font-size: 22px;
line-height: 22px;
color: #bfbfbf;
text-align: center;
}
.text {
color: #999;
line-height: 20px;
margin-top: 4px;
}
} }
.course-cover__wrap { }
display: flex;
flex-direction: row; .tips {
color: #999;
margin-top: 16px;
margin-bottom: 8px;
}
.checkExample {
width: 60px;
color: #ff7519;
cursor: pointer;
}
.warmup {
margin-bottom: 17px;
display: flex;
}
.course-cover__wrap {
display: flex;
flex-direction: row;
}
.img-content {
position: relative;
margin-right: 20px;
width: 300px;
height: 170px;
img {
width: 100%;
height: 100%;
object-fit: contain;
} }
.img-content { .img-delete-wrap {
position: relative; opacity: 0;
margin-right: 20px; position: absolute;
width: 300px; top: 0;
height: 170px; left: 0;
width: 100%;
height: 100%;
img { img {
width: 100%;
height: 100%;
object-fit: contain;
}
.img-delete-wrap {
opacity: 0;
position: absolute; position: absolute;
top: 0; left: 50%;
left: 0; top: 50%;
width: 100%; width: 40px;
height: 100%; height: 40px;
img { transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
width: 40px;
height: 40px;
transform: translate(-50%, -50%);
}
&:hover {
opacity: 1;
cursor: pointer;
}
} }
} &:hover {
.opt-btns { opacity: 1;
.default-btn {
margin-left: 16px;
color: #FF7519;
cursor: pointer; cursor: pointer;
&.disabled {
color: #CCC;
cursor: not-allowed;
}
} }
} }
} }
.example-wrap { .opt-btns {
font-family: PingFangSC-Regular, PingFang SC; .default-btn {
text-align: center; margin-left: 16px;
.title { color: #ff7519;
margin-bottom: 6px; cursor: pointer;
font-size: 14px;
color: #333333; &.disabled {
} color: #ccc;
.text { cursor: not-allowed;
margin-bottom: 16px; }
font-size: 12px;
color: #999999;
}
img {
width: 180px;
} }
} }
.check-record-rule { }
width: 120px; .example-wrap {
color: #FF7519; font-family: PingFangSC-Regular, PingFang SC;
cursor: pointer; text-align: center;
z-index: 2; .title {
margin-bottom: 6px;
font-size: 14px;
color: #333333;
} }
.record-rule-wrap { .text {
text-align: left; margin-bottom: 16px;
ul { font-size: 12px;
margin-top: 10px; color: #999999;
padding-left: 34px; }
list-style-type: disc; img {
li { width: 180px;
color: #999; }
} }
} .check-record-rule {
.text { width: 120px;
color: #ff7519;
cursor: pointer;
z-index: 2;
}
.record-rule-wrap {
text-align: left;
ul {
margin-top: 10px;
padding-left: 34px;
list-style-type: disc;
li {
color: #999; color: #999;
} }
} }
.text {
.auto-send-class-report { color: #999;
.label { }
width: 57px; }
height: 12px;
font-size: 14px; .auto-send-class-report {
font-weight: 400; .label {
color: #666666; width: 57px;
line-height: 12px; height: 12px;
} font-size: 14px;
.open-text, .close-text { font-weight: 400;
width: 572px; color: #666666;
font-size: 14px; line-height: 12px;
font-weight: 400; }
color: #999999; .open-text,
line-height: 20px; .close-text {
margin-left: 100px; width: 572px;
margin-top: 5px; font-size: 14px;
} font-weight: 400;
.open-text { color: #999999;
margin-top: 8px; line-height: 20px;
} margin-left: 100px;
.close-text { margin-top: 5px;
margin-bottom: 16px; }
} .open-text {
} margin-top: 8px;
\ No newline at end of file }
.close-text {
margin-bottom: 16px;
}
}
src/modules/course-manage/graphics-course/components/GraphicsCourseList.jsx
/*
* @Author: 吴文洁
* @Date: 2020-08-05 10:12:45
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-15 17:26:53
* @Description: 视频课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
import User from '@/common/js/user'; import User from '@/common/js/user';
import college from '@/common/lottie/college'; import college from '@/common/lottie/college';
import { PageControl, XMTable } from '@/components'; import { PageControl, XMTable } from '@/components';
...@@ -341,7 +334,7 @@ class GraphicsCourseList extends React.Component { ...@@ -341,7 +334,7 @@ class GraphicsCourseList extends React.Component {
// 删除视频课 // 删除视频课
handleDeleteGraphicsCourse = (scheduleId) => { handleDeleteGraphicsCourse = (scheduleId) => {
Modal.confirm({ Modal.confirm({
title: '你确定要删除此视频课吗？', title: '你确定要删除此线上课吗？',
content: '删除后，学员将不能进行观看。', content: '删除后，学员将不能进行观看。',
icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>, icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>,
okText: '确定', okText: '确定',
......
src/modules/course-manage/graphics-course/components/GraphicsCourseOpt.jsx
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* @Date: 2020-08-05 10:12:15 * @Date: 2020-08-05 10:12:15
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-26 16:07:27 * @LastEditTime: 2020-12-26 16:07:27
* @Description: 视频课-操作模块 * @Description: 线上课-操作模块
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
......
src/modules/course-manage/graphics-course/index.jsx
...@@ -17,13 +17,13 @@ class GraphicsCourse extends React.Component { ...@@ -17,13 +17,13 @@ class GraphicsCourse extends React.Component {
courseType: 'PICTURE', courseType: 'PICTURE',
storeId:User.getStoreId() storeId:User.getStoreId()
}, },
dataSource: [], // 视频课列表 dataSource: [], // 线上课列表
totalCount: 0, // 视频课数据总条数 totalCount: 0, // 线上课数据总条数
} }
} }
componentWillMount() { componentWillMount() {
// 获取视频课列表 // 获取线上课列表
this.handleFetchScheduleList(); this.handleFetchScheduleList();
} }
...@@ -76,7 +76,7 @@ class GraphicsCourse extends React.Component { ...@@ -76,7 +76,7 @@ class GraphicsCourse extends React.Component {
{/* 操作模块 */} {/* 操作模块 */}
<GraphicsCourseOpt /> <GraphicsCourseOpt />
{/* 视频课列表模块 */} {/* 线上课列表模块 */}
<GraphicsCourseList <GraphicsCourseList
query={query} query={query}
dataSource={dataSource} dataSource={dataSource}
......
src/modules/course-manage/modal/PreviewCourseModal.less
...@@ -13,7 +13,8 @@ ...@@ -13,7 +13,8 @@
} }
.container { .container {
overflow: scroll; overflow-y: auto;
overflow-x: hidden;
height: 100%;; height: 100%;;
.course-cover, .course-url { .course-cover, .course-url {
...@@ -30,6 +31,16 @@ ...@@ -30,6 +31,16 @@
color: #000; color: #000;
} }
.title__category {
color: #999999;
margin-top: 4px;
margin-bottom: 4px;
}
.title__chapter {
color: #999999;
margin-bottom: 4px;
}
.title__inst-name { .title__inst-name {
color: #666; color: #666;
font-size: 12px; font-size: 12px;
......
src/modules/course-manage/modal/ShareLiveModal.jsx
...@@ -116,11 +116,7 @@ class ShareLiveModal extends React.Component { ...@@ -116,11 +116,7 @@ class ShareLiveModal extends React.Component {
} }
break; break;
case 'videoClass': // 视频课 case 'videoClass': // 视频课
coverImgSrc = coverImgSrc = coverUrl || 'https://image.xiaomaiketang.com/xm/TwtGPQGE4K.png';
coverUrl ||
(courseDivision === 'internal'
? `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring`
: 'https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png');
break; break;
case 'graphicsClass': // 图文课 case 'graphicsClass': // 图文课
coverImgSrc = coverUrl || 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png'; coverImgSrc = coverUrl || 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png';
......
src/modules/course-manage/offline-course/AddOfflineCourse.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:07:47 * @Date: 2020-08-05 10:07:47
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-06 14:47:23 * @LastEditTime: 2021-07-18 10:13:42
* @Description: 线下课新增/编辑页 * @Description: 线下课新增/编辑页
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
import React from 'react'; import React from 'react';
import { Button, Input, Radio, message, Modal, TreeSelect, Select, Switch, TimePicker, InputNumber, Tooltip } from 'antd'; import { Button, Input, Radio, message, Modal, TreeSelect, Select, Switch, TimePicker, InputNumber, Tooltip } from 'antd';
import $ from 'jquery'; import $ from 'jquery';
import Bus from '@/core/bus';
import RangePicker from '@/modules/common/DateRangePicker'; import RangePicker from '@/modules/common/DateRangePicker';
import ShowTips from '@/components/ShowTips'; import ShowTips from '@/components/ShowTips';
import Breadcrumbs from '@/components/Breadcrumbs'; import Breadcrumbs from '@/components/Breadcrumbs';
...@@ -27,6 +27,7 @@ import GraphicsEditor from '../components/GraphicsEditor'; ...@@ -27,6 +27,7 @@ import GraphicsEditor from '../components/GraphicsEditor';
import MultipleDatePicker from '@/components/MultipleDatePicker'; import MultipleDatePicker from '@/components/MultipleDatePicker';
import ImgClipModal from '@/components/ImgClipModal'; import ImgClipModal from '@/components/ImgClipModal';
import './AddOfflineCourse.less'; import './AddOfflineCourse.less';
import Bus from '@/core/bus';
const { Option } = Select; const { Option } = Select;
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/pxbWKsYA87.png'; const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/pxbWKsYA87.png';
...@@ -96,6 +97,11 @@ class AddOfflineCourse extends React.Component { ...@@ -96,6 +97,11 @@ class AddOfflineCourse extends React.Component {
if (pageType === 'edit') { if (pageType === 'edit') {
this.handleFetchScheudleDetail(courseId); this.handleFetchScheudleDetail(courseId);
} }
Bus.bind('editorLimit', (editorTextLength) => {
this.setState({
editorTextLength,
});
});
} }
initBus = () => { initBus = () => {
...@@ -335,7 +341,7 @@ class AddOfflineCourse extends React.Component { ...@@ -335,7 +341,7 @@ class AddOfflineCourse extends React.Component {
handleSelectCover = (file) => { handleSelectCover = (file) => {
this.setState({ this.setState({
visible: true, visible: true,
imageFile: file, imageFile: file
}); });
}; };
...@@ -411,7 +417,8 @@ class AddOfflineCourse extends React.Component { ...@@ -411,7 +417,8 @@ class AddOfflineCourse extends React.Component {
signOutStartTimeUnit, signOutStartTimeUnit,
signOutEndTimeNum, signOutEndTimeNum,
signOutEndTimeUnit, signOutEndTimeUnit,
isMore, // isMore,
editorTextLength,
} = this.state; } = this.state;
let coverObj = { let coverObj = {
...@@ -444,7 +451,8 @@ class AddOfflineCourse extends React.Component { ...@@ -444,7 +451,8 @@ class AddOfflineCourse extends React.Component {
startTime, startTime,
endTime, endTime,
calendarTime, calendarTime,
isMore, editorTextLength,
// isMore,
}; };
if (whetherSetApply === 'YES') { if (whetherSetApply === 'YES') {
...@@ -558,8 +566,8 @@ class AddOfflineCourse extends React.Component { ...@@ -558,8 +566,8 @@ class AddOfflineCourse extends React.Component {
} else if (data.whetherSetSignOut === 'YES' && ((data.signOutType === 'START_LATER' && !data.signOutStartTimeNum) || !data.signOutEndTimeNum)) { } else if (data.whetherSetSignOut === 'YES' && ((data.signOutType === 'START_LATER' && !data.signOutStartTimeNum) || !data.signOutEndTimeNum)) {
message.warning('请输入签退时间'); message.warning('请输入签退时间');
resolve(false); resolve(false);
} else if (data.isMore) { } else if (data.editorTextLength > 1000) {
message.warning('简介超过字数限定'); message.warning('课程简介超过字数限定');
resolve(false); resolve(false);
} else { } else {
resolve(true); resolve(true);
...@@ -618,12 +626,8 @@ class AddOfflineCourse extends React.Component { ...@@ -618,12 +626,8 @@ class AddOfflineCourse extends React.Component {
}); });
} }
changeIntro = (value, textLength) => { changeIntro = (value) => {
const isMore = textLength > 1000; this.setState({ introduce: value });
if (isMore) {
message.warning('内容过长，不能超过1000字');
}
this.setState({ introduce: value, isMore });
}; };
selectMultiDate = (calendarTime) => { selectMultiDate = (calendarTime) => {
...@@ -646,6 +650,11 @@ class AddOfflineCourse extends React.Component { ...@@ -646,6 +650,11 @@ class AddOfflineCourse extends React.Component {
}; };
whetherVisitorsJoinChange = () => { whetherVisitorsJoinChange = () => {
const {whetherSetApply,whetherVisitorsJoin} =this.state;
if(whetherSetApply =='NO'){
message.warning('关闭报名无法获取手机号!')
return
}
if (this.state.whetherVisitorsJoin === 'NO') { if (this.state.whetherVisitorsJoin === 'NO') {
this.setState({ whetherVisitorsJoin: 'YES' }); this.setState({ whetherVisitorsJoin: 'YES' });
} else { } else {
...@@ -726,10 +735,6 @@ class AddOfflineCourse extends React.Component { ...@@ -726,10 +735,6 @@ class AddOfflineCourse extends React.Component {
<span className='label'>封面图：</span> <span className='label'>封面图：</span>
<div className='course-cover__wrap'> <div className='course-cover__wrap'>
<div className='img-content'>
{isDefaultCover && <span className='tag'>默认图</span>}
<img src={coverUrl} alt='' />
</div>
<div className='opt-btns'> <div className='opt-btns'>
<Button <Button
onClick={() => { onClick={() => {
...@@ -742,7 +747,11 @@ class AddOfflineCourse extends React.Component { ...@@ -742,7 +747,11 @@ class AddOfflineCourse extends React.Component {
<span className={`default-btn ${isDefaultCover ? 'disabled' : ''}`} onClick={this.handleResetCoverUrl}> <span className={`default-btn ${isDefaultCover ? 'disabled' : ''}`} onClick={this.handleResetCoverUrl}>
使用默认图 使用默认图
</span> </span>
<div className='tips'>建议尺寸1280*720px，图片支持jpg、jpeg、png格式。</div> <div className='tips'>建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
</div>
<div className='img-content'>
{isDefaultCover && <span className='tag'>默认图</span>}
<img src={coverUrl} />
</div> </div>
</div> </div>
</div> </div>
...@@ -840,20 +849,6 @@ class AddOfflineCourse extends React.Component { ...@@ -840,20 +849,6 @@ class AddOfflineCourse extends React.Component {
})} })}
</Select> </Select>
</div> </div>
<div className='allow-tourist-join'>
<span className='label'>观看设置：</span>
<div className='content'>
<div>
<Switch checked={whetherVisitorsJoin === 'YES' ? true : false} onChange={this.whetherVisitorsJoinChange} />
</div>
<div>
<div className='desc'>
<div>开启：允许未绑定手机号的学员观看</div>
<div>关闭：仅限绑定了手机号的学员可以进入观看线下课</div>
</div>
</div>
</div>
</div>
<div className='introduce'> <div className='introduce'>
<span className='label'>课程简介：</span> <span className='label'>课程简介：</span>
<div className='content'> <div className='content'>
...@@ -867,8 +862,8 @@ class AddOfflineCourse extends React.Component { ...@@ -867,8 +862,8 @@ class AddOfflineCourse extends React.Component {
detail={{ detail={{
content: introduce, content: introduce,
}} }}
onChange={(val, textLength) => { onChange={(val) => {
this.changeIntro(val, textLength); this.changeIntro(val);
}} }}
/> />
)} )}
...@@ -957,6 +952,7 @@ class AddOfflineCourse extends React.Component { ...@@ -957,6 +952,7 @@ class AddOfflineCourse extends React.Component {
startTimeApply: undefined, startTimeApply: undefined,
endTimeApply: undefined, endTimeApply: undefined,
quota: null, quota: null,
whetherVisitorsJoin: whetherSetApply !== 'YES' ? whetherVisitorsJoin : false
}); });
}} }}
/> />
...@@ -1068,6 +1064,13 @@ class AddOfflineCourse extends React.Component { ...@@ -1068,6 +1064,13 @@ class AddOfflineCourse extends React.Component {
)} )}
</div> </div>
</div> </div>
<div className='allow-tourist-join'>
<span className='label'>观看设置：</span>
<div className='content'>
<Switch checked={whetherVisitorsJoin === 'NO' ? true : false} onChange={this.whetherVisitorsJoinChange} />
<div className='desc'>{whetherVisitorsJoin === 'NO' ? '已开启，仅限绑定了手机号的学员报名线下课' : '已关闭，允许未绑定手机号的学员报名线下课'}</div>
</div>
</div>
<div className='course-catalog'> <div className='course-catalog'>
<span className='label'>考勤签到：</span> <span className='label'>考勤签到：</span>
<div className='switch-box'> <div className='switch-box'>
......
src/modules/course-manage/offline-course/AddOfflineCourse.less
.add-offline-course-page { .add-offline-course-page {
position:relative !important; position: relative !important;
.box{ .box {
margin-bottom:52px !important; margin-bottom: 52px !important;
} }
.ant-radio-group { .ant-radio-group {
display: flex; display: flex;
...@@ -39,18 +39,18 @@ ...@@ -39,18 +39,18 @@
position: relative; position: relative;
padding-left: 14px; padding-left: 14px;
&::before { &::before {
content: ""; content: '';
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 4px; width: 4px;
height: 10px; height: 10px;
background: #2966FF; background: #2966ff;
} }
} }
} }
.label{ .label {
display: inline-block; display: inline-block;
text-align: right; text-align: right;
width: 120px; width: 120px;
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
} }
.required { .required {
position: relative; position: relative;
&::before { &::before {
position: absolute; position: absolute;
content: '*'; content: '*';
...@@ -69,14 +69,14 @@ ...@@ -69,14 +69,14 @@
left: 5px; left: 5px;
top: 6px; top: 6px;
} }
&.label::before { &.label::before {
top: 0; top: 0;
} }
} }
.course-catalog { .course-catalog {
margin-bottom:16px; margin-bottom: 16px;
margin-top:16px; margin-top: 16px;
display: flex; display: flex;
.switch-box { .switch-box {
.switch-item { .switch-item {
...@@ -110,19 +110,19 @@ ...@@ -110,19 +110,19 @@
.select-day { .select-day {
margin-bottom: 4px; margin-bottom: 4px;
.mark-day { .mark-day {
color: #2966FF; color: #2966ff;
} }
} }
} }
.allow-tourist-join{ .allow-tourist-join {
display:flex; display: flex;
margin-bottom:16px; margin-bottom: 16px;
.desc { .desc {
color:#999; color: #999;
margin-left:12px; margin-left: 12px;
} }
.content{ .content {
display:flex; display: flex;
} }
} }
.course-ware { .course-ware {
...@@ -146,62 +146,59 @@ ...@@ -146,62 +146,59 @@
.course-cover { .course-cover {
display: flex; display: flex;
margin-top: 16px; margin-top: 16px;
&__wrap { &__wrap {
position: relative; position: relative;
.tag { .img-content {
border-radius: 2px; margin-top: 8px;
background: #D6D6D6; margin-right: 20px;
font-size: 12px; width: 299px;
height: 18px; height: 169px;
width: 52px; position: relative;
text-align: center;
color: #FFF; img {
position: absolute; width: 100%;
top: 8px; height: 100%;
left: 8px; object-fit: contain;
} border-radius: 4px;
} }
.course-cover__wrap { .tag {
display: flex; border-radius: 2px;
flex-direction: row; background: #d6d6d6;
} font-size: 12px;
height: 18px;
.img-content { width: 52px;
margin-right: 20px; text-align: center;
width: 299px; color: #fff;
height: 169px; position: absolute;
top: 8px;
img { left: 8px;
width: 100%;
height: 100%;
object-fit: contain;
}
}
.opt-btns {
.default-btn {
margin-left: 16px;
color: #2966FF;
cursor: pointer;
&.disabled {
color: #CCC;
cursor: not-allowed;
} }
} }
.ant-upload-list { .opt-btns {
display: none; .default-btn {
margin-left: 14px;
color: #2966ff;
cursor: pointer;
&.disabled {
color: #ccc;
cursor: not-allowed;
}
}
.ant-upload-list {
display: none;
}
.tips {
margin-top: 8px;
color: #999;
}
} }
} }
.tips {
margin-top: 8px;
color: #999;
}
} }
.select-student { .select-student {
...@@ -236,7 +233,7 @@ ...@@ -236,7 +233,7 @@
justify-content: flex-end; justify-content: flex-end;
padding-right: 72px; padding-right: 72px;
background: #fff; background: #fff;
border-top: 1px solid #E8E8E8; border-top: 1px solid #e8e8e8;
z-index: 999; z-index: 999;
.ant-btn { .ant-btn {
margin-left: 10px; margin-left: 10px;
...@@ -250,4 +247,4 @@ ...@@ -250,4 +247,4 @@
position: absolute; position: absolute;
left: 20000px; left: 20000px;
} }
} }
\ No newline at end of file
src/modules/course-manage/offline-course/components/AddGraphicsIntro.less
.add-video__intro-info { .add-offline__intro-info {
.w-e-full-screen-editor { .w-e-full-screen-editor {
background: #fff !important; background: #fff !important;
} }
......
src/modules/course-manage/offline-course/components/OfflineCourseList.jsx
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* @Date: 2020-08-05 10:12:45 * @Date: 2020-08-05 10:12:45
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-11 16:44:42 * @LastEditTime: 2021-06-11 16:44:42
* @Description: 视频课-列表模块 * @Description: 线上课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
import Service from '@/common/js/service'; import Service from '@/common/js/service';
...@@ -30,7 +30,7 @@ class OfflineCourseList extends React.Component { ...@@ -30,7 +30,7 @@ class OfflineCourseList extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
id: '', // 视频课ID id: '', // 线上课ID
studentIds: [], studentIds: [],
}; };
} }
......
src/modules/course-manage/offline-course/components/OfflineCourseOpt.jsx
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* @Date: 2020-08-05 10:12:15 * @Date: 2020-08-05 10:12:15
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-26 16:07:27 * @LastEditTime: 2020-12-26 16:07:27
* @Description: 视频课-操作模块 * @Description: 线上课-操作模块
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
......
src/modules/course-manage/utils/hasExportPermission.js
...@@ -14,7 +14,7 @@ const hasExportPermission = (type) => { ...@@ -14,7 +14,7 @@ const hasExportPermission = (type) => {
return Permission.hasInteractiveExport(); return Permission.hasInteractiveExport();
} }
// 视频课导出权限 // 线上课导出权限
if (type === 'videoClass') { if (type === 'videoClass') {
return Permission.hasVideoClassExport(); return Permission.hasVideoClassExport();
} }
......
src/modules/course-manage/video-course/AddVideoCourse.less
...@@ -32,6 +32,12 @@ ...@@ -32,6 +32,12 @@
display:inline-block; display:inline-block;
text-align:right; text-align:right;
width:85px; width:85px;
&.upload-chapter {
margin-top: 6px;
}
&.cover {
margin-top: 2px;
}
} }
.required { .required {
position: relative; position: relative;
...@@ -49,14 +55,16 @@ ...@@ -49,14 +55,16 @@
} }
} }
.course-catalog{ .course-catalog{
margin-bottom:16px; margin-bottom:24px;
margin-top:16px; margin-top:24px;
} }
.course-ware { .course-ware {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 4px; margin-bottom: 4px;
&__index {
width: 18px;
}
&__img { &__img {
width: 24px; width: 24px;
margin-right: 4px; margin-right: 4px;
...@@ -75,7 +83,19 @@ ...@@ -75,7 +83,19 @@
.img-content { .img-content {
width: 298px; width: 298px;
height: 172px; height: 172px;
position: relative;
.tag {
border-radius: 2px;
background: rgba(51, 51, 51, .2);
font-size: 12px;
height: 18px;
width: 52px;
text-align: center;
color: #FFF;
position: absolute;
top: 8px;
left: 8px;
}
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -85,21 +105,26 @@ ...@@ -85,21 +105,26 @@
.empty-img { .empty-img {
width: 298px; width: 298px;
height: 172px; height: 172px;
border: 1px dashed #EBEBEB; border: 1px dashed #ebebeb;
border-radius: 4px; border-radius: 4px;
padding: 12px; padding: 12px;
color: #999; color: #999;
padding: 52px 24px; padding: 52px 24px;
text-align: center; text-align: center;
} }
.opt-btns { .opt-btns {
margin-top: 8px; margin-bottom: 8px;
display: flex; .span {
align-items: center; color: #ccc;
margin-left: 8px;
}
.defalut-span {
cursor: pointer;
color: #2966ff;
}
.tips { .tips {
margin-left: 12px; margin-top: 8px;
color: #999; color: #999;
} }
} }
...@@ -115,14 +140,92 @@ ...@@ -115,14 +140,92 @@
color: #333; color: #333;
} }
} }
.upload-video {
display: flex;
margin-bottom: 24px;
.sub-content {
margin-top: 4px;
.btn-wrap {
display: flex;
.course-ware--empty {
margin-left: 12px;
line-height: 28px;
}
}
.tips {
margin-top: 8px;
color: #999;
}
}
}
.sub-content { .course-chapter-list-wrap {
position: relative;
margin-left: 85px; margin-left: 85px;
margin-top: 4px; border: 1px solid #E8E8E8;
width: 630px;
.tips { .course-chapter-total {
margin-left: 4px; height: 40px;
color: #999; font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
z-index: 10;
background: #fff;
width: 628px;
text-indent: 16px;
line-height: 40px;
}
.course-chapter-list {
max-height: 245px;
overflow-y: auto ;
border-radius: 4px;
padding: 12px 16px 16px 16px;
.course-ware {
display: flex;
align-items: center;
margin-bottom: 22px;
color: #666;
&:last-child {
margin-bottom: 0px;
}
&__img {
width: 24px;
margin-right: 8px;
margin-left: 16px;
}
&__name {
color: #333;
width: 353px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 24px;
}
.course-chapter__opt {
display: flex;
color: #2966ff;
width: 168px;
.line {
color: #bfbfbf;
margin-left: 4px;
margin-right: 4px;
}
.delete,
.rename,
.up,
.down {
cursor: pointer;
}
.up,
.down {
&.disabled {
color: rgba(204, 204, 204, 1);
}
}
}
}
} }
} }
} }
...@@ -138,10 +241,48 @@ ...@@ -138,10 +241,48 @@
justify-content: flex-end; justify-content: flex-end;
padding-right: 72px; padding-right: 72px;
background: #fff; background: #fff;
border-top: 1px solid #E8E8E8; border-top: 1px solid #ccc2c2;
z-index: 999; z-index: 999;
.ant-btn { .ant-btn {
margin-left: 10px; margin-left: 10px;
} }
} }
}
.chapter-popover {
.ant-popover-message-title {
padding-left: 0;
}
.ant-form-item {
margin-bottom: 0!important;
}
.ant-form-item-explain.ant-form-item-explain-error {
height: 24px;
}
.ant-form-item-explain {
min-height: 0;
}
}
.course-chapter-title-popover {
.tag-title {
color: #333333;
margin-bottom: 8px;
width: 318px;
}
.chapter-btns {
margin-top: 16px;
display: flex;
justify-content: flex-end;
.confirm {
margin-left: 8px;
}
}
.ant-form-item {
margin-bottom: 0 !important;
}
}
.my-chapter-tooltip {
max-width: 600px!important;
} }
\ No newline at end of file
src/modules/course-manage/video-course/VideoCourseDetail.less 0 → 100644
.video-course-detail {
padding-bottom: 40px;
.box {
.course-detail {
display: flex;
border-bottom: 2px solid #E8E8E8;
padding-bottom: 24px;
&__img {
margin-right: 24px;
width: 300px;
height: 170px;
background: #FFFFFF;
border-radius: 4px;
img {
width: 300px;
height: 170px;
border-radius: 4px;
}
}
&__info {
display: flex;
flex-direction: column;
.info__title {
font-size: 20px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 28px;
margin-bottom: 16px;
}
.info__category, .info__chapterNum {
width: 100%;
height: 20px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 20px;
margin-bottom: 10px;
}
}
}
.course-chapter {
padding-top: 24px;
&__total {
width: 100%;
height: 20px;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 20px;
margin-bottom: 24px;
}
&__list {
.course-ware {
display: flex;
height: 20px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 20px;
margin-bottom: 28px;
cursor: pointer;
&:hover {
color: #2966FF;
}
&__index {
width: 20px;
}
&__img {
width: 20px;
height: 20px;
margin-left: 16px;
margin-right: 8px;
}
&__name {
width: 700px;
}
}
}
}
}
}
\ No newline at end of file
src/modules/course-manage/video-course/VideoCourseDetail.tsx 0 → 100644
/*
* @Author: wufan
* @Date: 2020-04-28 18:05:30
* @LastEditors: yuananting
* @LastEditTime: 2021-07-15 14:04:21
* @Description: 线上课课程课节详情
*/
import React,{useEffect, useState} from 'react';
import Breadcrumbs from "@/components/Breadcrumbs";
import { withRouter } from "react-router-dom";
import CourseService from '@/domains/course-domain/CourseService'
import underscore from 'underscore';
import ScanFileModal from '@/modules/resource-disk/modal/ScanFileModal.jsx';
import { FileTypeIcon } from '@/common/constants/academic/lessonEnum'
import BaseService from "@/domains/basic-domain/baseService";
import {YZ_APPId,YZ_PREVIEW_URL} from '@/domains/basic-domain/constants';
import PreviewFileModal from '@/bu-components/PreviewFileModal';
import './VideoCourseDetail.less';
declare var getParameterByName: any;
declare var window: any;
const FileTypeIconMap:any = FileTypeIcon
function VideoCourseDetail(){
const courseId = window.getParameterByName("courseId"); // 课程ID
const [coverUrl,setCoverUrl] = useState("");
const [videoName,setVideoName] = useState("");
const [scheduleVideoUrl,setScheduleVideoUrl] = useState("");
const [courseChapterList,setCourseChapterList] = useState<Array<Object>>([]);
const [courseName,setCourseName] = useState("");
const [categoryName,setCategoryName] = useState("");
const [scanFileModal,setScanFileModal] = useState<any>(null);
const [showPreviewModal,setShowPreviewModal] = useState(false); //是否显示loading
// const [previewing,setPreviewing] = useState(false); //是否正在预览
const [previewStatus,setPreviewStatus] = useState('UPLOAD'); //预览文件的生成状态
const [url,setUrl] = useState('');
let previewing = false;
useEffect(()=>{
handleFetchScheudleDetail(courseId);
},[courseId])
// 获取线上课详情
function handleFetchScheudleDetail(courseId: string){
CourseService.videoScheduleDetail({
courseId
}).then((res) => {
const { result = {} } = res || {}
const { courseName, courseMediaVOS, categoryName, courseChapterVOList =[] } = result
let coverId:string = "";
let coverUrl: string = "";
let videoType: string = "";
let videoDuration: number = 0;
let videoName: string = "";
let scheduleVideoUrl: string = "";
courseMediaVOS.map((item:any) => {
switch (item.contentType) {
case 'COVER':
coverId = item.mediaContent
coverUrl = item.mediaUrl
break
case 'SCHEDULE':
videoDuration = item.videoDuration
videoName = item.mediaName
scheduleVideoUrl = item.mediaUrl
videoType = item.mediaType
break
default:
break
}
return item
})
setCoverUrl(coverUrl);
setVideoName(videoName);
setScheduleVideoUrl(scheduleVideoUrl);
setCourseName(courseName);
setCategoryName(categoryName);
setCourseChapterList(courseChapterVOList);
})
}
async function handleScanFileModal(fileType: string = "MP4", fileObj:any){
const {fileVersionId,name,mediaUrl,id} = fileObj;
if(fileType === "VIDEO"){
const scanFileModal = (
<ScanFileModal
fileType={fileType}
item={fileObj}
close={() => {
setScanFileModal(null);
}}
/>
);
setScanFileModal(scanFileModal)
}else{
if(!fileVersionId){
setShowPreviewModal(true);
previewing = true;
setPreviewStatus('UPLOAD');
const uploadParams ={
fileUrl:mediaUrl,
yoZoTypeEnum:'UPLOAD'
}
const uploadSign:any = await BaseService.getYoZoSign(uploadParams);
BaseService.yoZoUpload(mediaUrl,YZ_APPId,uploadSign).then(async function (response){
const saveParams ={
fileVersionId:response.data.data.fileVersionId,
courseChapterId:id
}
BaseService.saveFileVersionIdByCourseChapter(saveParams);
if(previewing){
const previewParams ={
fileVersionId:response.data.data.fileVersionId,
yoZoTypeEnum:'VIEW',
htmlTitle:name
}
const previewSign = await BaseService.getYoZoSign(previewParams);
const url = `${YZ_PREVIEW_URL}?fileVersionId=${response.data.data.fileVersionId}&appId=${YZ_APPId}&sign=${previewSign}&htmlTitle=${name}`
setPreviewStatus('UPLOAD_SUCCESS');
setUrl(url)
}
})
}else{
const previewParams ={
fileVersionId,
yoZoTypeEnum:'VIEW',
htmlTitle:name
}
const previewSign = await BaseService.getYoZoSign(previewParams);
const url = `${YZ_PREVIEW_URL}?fileVersionId=${fileVersionId}&appId=${YZ_APPId}&sign=${previewSign}&htmlTitle=${name}`
const a = document.createElement('a');
document.body.appendChild(a);
a.setAttribute('href', url);
a.setAttribute('target', '_blank');
a.click();
document.body.removeChild(a)
}
}
}
// function previewingSet(){
// return new Promise(async (resolve) => {
// setShowPreviewModal(true);
// setPreviewing(true);
// setPreviewStatus('UPLOAD');
// resolve(true);
// })
// }
function cancelPreview(){
setShowPreviewModal(false);
// setPreviewing(false);
previewing = false;
setPreviewStatus('UPLOAD');
}
return <div className="page video-course-detail">
<Breadcrumbs
navList="课程详情"
goBack={() => {
window.RCHistory.goBack();
}}
/>
<div className="box">
<div className="course-detail">
<div className='course-detail__img'>
{/* 如果视频和封面都没有上传的话, 那么就显示缺省, 如果上传了视频, 那么封面图就默认显示视频的第一帧, 如果上传了封面图, 那么就显示上传的封面图 */}
<img src={coverUrl || `https://image.xiaomaiketang.com/xm/TwtGPQGE4K.png`} alt='' />
</div>
<div className="course-detail__info">
<div className="info__title">{courseName}</div>
<div className="info__category">{`分类：${categoryName}`}</div>
<div className="info__chapterNum">{`课节数量：${courseChapterList.length}`}</div>
</div>
</div>
<div className="course-chapter">
<div className="course-chapter__total">{`共${courseChapterList.length}个课节`}</div>
<div className="course-chapter__list">
<If condition={courseChapterList.length > 0}>
{
underscore.map(courseChapterList,(item: any,index: number) => {
return <div className='course-ware' onClick={()=>{handleScanFileModal(item.mediaType,item)}} key={index}>
<div className="course-ware__index">{index < 9 ? `0${index + 1 } ` : index + 1}</div>
<img className='course-ware__img' src={FileTypeIconMap[item.mediaType]} alt='' />
<div className='course-ware__name'>{item.name}</div>
</div>
})
}
</If>
</div>
</div>
</div>
{ showPreviewModal &&
<PreviewFileModal onCancel={()=>cancelPreview()} previewStatus={previewStatus} url={url}/>
}
{scanFileModal}
</div>
}
export default withRouter(VideoCourseDetail);
\ No newline at end of file
src/modules/course-manage/video-course/components/AddVideoIntro.jsx
...@@ -111,40 +111,53 @@ class AddVideoIntro extends React.Component { ...@@ -111,40 +111,53 @@ class AddVideoIntro extends React.Component {
<span className='label'>观看设置：</span> <span className='label'>观看设置：</span>
<div className='content'> <div className='content'>
<div> <div>
<Switch checked={whetherVisitorsJoin === 'YES' ? true : false} onChange={this.whetherVisitorsJoinChange} /> <Switch checked={whetherVisitorsJoin==="NO"? true:false} onChange={this.whetherVisitorsJoinChange}/>
</div> </div>
<div> <div>
<div className='desc'> <div className="desc">
<div>开启：允许未绑定手机号的学员观看</div> <Choose>
<div>关闭：仅限绑定了手机号的学员可以进入观看视频</div> <When condition={whetherVisitorsJoin==="NO"}>
<div>已开启，学员需绑定手机号才可观看</div>
</When>
<Otherwise>
<div>已关闭，学员无需绑定手机号即可观看</div>
</Otherwise>
</Choose>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className='store-show'> <div className="store-show">
<span className='label'>学院展示：</span> <span className="label">学院展示：</span>
<div className='content'> <div className="content">
<Row> <Row>
<Col span={3}> <Col span={3}>
<Switch checked={shelfState === 'YES' ? true : false} onChange={this.shelfStateChange} /> <Switch checked={shelfState==="YES"? true:false} onChange={this.shelfStateChange}/>
</Col> </Col>
<Col span={21}> <Col span={21}>
<div className='desc'> <div className="desc">
<div>开启：此视频将在学员学院的视频列表中出现</div> <Choose>
<div>关闭：此视频将在学员学院的视频列表中隐藏</div> <When condition={shelfState==="YES"}>
</div> <div>已开启，课程将在该学院的学员课程列表中显示</div>
</Col> </When>
</Row> <Otherwise>
<div>已关闭，课程将在该学院的学员课程列表中隐藏</div>
</Otherwise>
</Choose>
</div>
</Col>
</Row>
</div> </div>
</div> </div>
<div className='introduce'> <div className="introduce">
<span className='label'>视频课简介：</span> <span className="label">课程简介：</span>
<div className='content'> <div className="content">
<div className='intro-list'> <div className="intro-list">
<div className='intro-list__item introduce-editor'> <div className="intro-list__item introduce-editor">
{(!id || loadintroduce) && ( {(!id || loadintroduce) &&
<GraphicsEditor <GraphicsEditor
id='intro' maxLimit={1000}
id="intro"
isIntro={true} isIntro={true}
detail={{ detail={{
content: introduce, content: introduce,
......
src/modules/course-manage/video-course/components/AddVideoIntro.less
...@@ -32,14 +32,17 @@ ...@@ -32,14 +32,17 @@
} }
.store-show{ .store-show{
display:flex; display:flex;
margin-top:16px; margin-top:24px;
margin-bottom:16px; margin-bottom:24px;
.desc{ .desc{
margin-left:16px; margin-left:11px;
font-size:14px; font-size:14px;
color:#999; color:#999;
display:inline-block; display:inline-block;
} }
.content {
width: 400px;
}
} }
.radio { .radio {
display: block; display: block;
......
src/modules/course-manage/video-course/components/ChapterList.jsx 0 → 100644
import React from 'react';
import './ChapterList.less';
import { FileTypeIcon } from '@/common/constants/academic/lessonEnum'
const FileTypeIconMap = FileTypeIcon;
function ChapterList(props){
const { courseChapterList } = props;
return <div className='chapter-list-component'>
<If condition={courseChapterList.length > 0}>
{
_.map(courseChapterList,(item,index) => {
return <div className='course-ware'>
<img className='course-ware__img' src={FileTypeIconMap[item.mediaType]} alt='' />
<div className='course-ware__index'>{index < 9 ? `0${index + 1 }` : `${index + 1 }`}</div>
<div className="course-ware__detail">
<div className='course-ware__detail__name'>{item.mediaName}</div>
{ item.mediaType === 'VIDEO' &&
<div className='course-ware__detail__duration'>{window.formatDuration(item.videoDuration)}</div>
}
</div>
</div>
})
}
</If>
</div>
}
export default ChapterList;
\ No newline at end of file
src/modules/course-manage/video-course/components/ChapterList.less 0 → 100644
.chapter-list-component {
.course-ware {
display: flex;
padding: 10px 0;
border-bottom: 1px dashed #EEEEEE;
&:last-child {
border-bottom: none;
}
&__index {
width: 18px;
height: 18px;
font-size: 13px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #999999;
line-height: 18px;
white-space: nowrap;
margin-left: 8px;
margin-right: 6px;
line-height: 20px;
}
&__img {
width: 20px;
height: 20px;
}
&__detail {
display: flex;
flex-direction: column;
&__name {
font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 20px;
margin-bottom: 4px;
}
&__duration {
color: #999999;
}
}
}
}
\ No newline at end of file
src/modules/course-manage/video-course/components/LearningDetailModal.jsx 0 → 100644
import User from "@/common/js/user";
import CourseService from "@/domains/course-domain/CourseService";
import React from "react";
import { Modal } from "antd";
import { FileTypeIcon } from '@/common/constants/academic/lessonEnum'
import "./LearningDetailModal.less";
class LearningDetailModal extends React.Component {
constructor(props) {
super(props);
this.state = {
courseChapterList: [],
};
}
componentDidMount() {
this.handleFetchDataList();
}
// 获取观看视频数据列表
handleFetchDataList = () => {
const { courseId, data } = this.props;
const params = {
courseId,
storeId: User.getStoreId(),
storeCustomerId: data.storeCustomerId,
};
CourseService.lineDetailWatchInfo(params).then((res) => {
const { result = [] } = res;
this.setState({
courseChapterList: result
});
});
};
render() {
const { title, onClose, onOk } = this.props;
const { courseChapterList } = this.state;
return (
<Modal
footer={null}
visible={true}
title={title}
width={680}
maskClosable={false}
closeIcon={
<span className="icon iconfont modal-close-icon">&#xe6ef;</span>
}
onCancel={onClose}
onOk={onOk}
className="learning-detail-modal"
>
<div className="course-chapter__list">
<If condition={courseChapterList.length > 0}>
{_.map(courseChapterList, (item, index) => {
return (
<div className="course-wrap">
<div className="course-ware" key={index}>
<div className="course-ware__index">{`${
index < 9 ? `0${index + 1}` : index + 1
} `}</div>
<img className='course-ware__img' src={FileTypeIcon[item.mediaType]} alt='' />
<div className="course-ware__name">{item.courseChapterName && item.courseChapterName.replace('.MP4','')}</div>
</div>
<div className={`progress ${item.progress === 100 ? 'finish' :''}`}>{`${item.progress === 100 ? '已完成' : `${item.progress}%`}`}</div>
</div>
);
})}
</If>
</div>
</Modal>
);
}
}
export default LearningDetailModal;
src/modules/course-manage/video-course/components/LearningDetailModal.less 0 → 100644
.learning-detail-modal {
.course-chapter {
padding-top: 24px;
&__list {
.course-wrap {
display: flex;
justify-content: space-between;
.course-ware {
display: flex;
height: 20px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 20px;
margin-bottom: 28px;
&__index {
width: 20px;
}
&__img {
width: 20px;
height: 20px;
margin-left: 12px;
margin-right: 8px;
}
&__name {
width: 500px;
}
}
.progress {
&.finish {
color: RGBA(101, 202, 168, 1);
}
}
}
}
}
}
src/modules/course-manage/video-course/components/VideoCourseFilter.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:11:57 * @Date: 2020-08-05 10:11:57
* @LastEditors: fusanqiasng * @LastEditors: yuananting
* @LastEditTime: 2021-05-28 20:14:37 * @LastEditTime: 2021-07-12 14:14:47
* @Description: 视频课-搜索模块 * @Description: 线上课-搜索模块
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -56,22 +56,17 @@ class VideoCourseFilter extends React.Component { ...@@ -56,22 +56,17 @@ class VideoCourseFilter extends React.Component {
this.getTeacherList() this.getTeacherList()
this.queryCategoryTree() this.queryCategoryTree()
} }
// 查询分类树 // 查询分类树
queryCategoryTree = (categoryName = '') => { queryCategoryTree = ()=> {
let query = { const params= {
bizType: 'QUESTION', storeId:User.getStoreId()
source: 2,
categoryName,
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
count: false,
} }
AidToolService.queryExternalCategoryTree(query).then((res) => { StoreService.getStoreDetail(params).then((res) => {
const { categoryList = [] } = res.result const { result = {} } = res;
console.log(this.renderTreeNodes(categoryList)) result.coursePackageId && AidToolService.queryCategoryTreeByPackage({coursePackageId: result.coursePackageId}).then((res) => {
this.setState({ const { result = [] } = res;
categoryList: this.renderTreeNodes(categoryList), this.setState({categoryList: this.renderTreeNodes(result)})
categoryName,
}) })
}) })
} }
...@@ -192,10 +187,10 @@ class VideoCourseFilter extends React.Component { ...@@ -192,10 +187,10 @@ class VideoCourseFilter extends React.Component {
<Row type='flex' justify='space-between' align='top'> <Row type='flex' justify='space-between' align='top'>
<div className='search-condition'> <div className='search-condition'>
<div className='search-condition__item'> <div className='search-condition__item'>
<span className='search-name'>视频课名称：</span> <span className='search-name'>线上课名称：</span>
<Search <Search
value={courseName} value={courseName}
placeholder='搜索视频课名称' placeholder='搜索线上课名称'
onChange={(e) => { onChange={(e) => {
this.handleChangeQuery('courseName', e.target.value) this.handleChangeQuery('courseName', e.target.value)
}} }}
......
src/modules/course-manage/video-course/components/VideoCourseList.jsx
/* import React from "react"
* @Author: 吴文洁 import { Modal, message, Tooltip, Switch, Dropdown } from "antd"
* @Date: 2020-08-05 10:12:45 import _ from "underscore"
* @LastEditors: fusanqiasng import { PageControl } from "@/components"
* @LastEditTime: 2021-05-31 18:04:10 import { LIVE_SHARE } from "@/domains/course-domain/constants"
* @Description: 视频课-列表模块 import { Route, withRouter } from 'react-router-dom';
* @Copyright: 杭州杰竞科技有限公司 版权所有 import ShareLiveModal from "@/modules/course-manage/modal/ShareLiveModal"
*/ import CourseService from "@/domains/course-domain/CourseService"
import User from '@/common/js/user'; import RelatedPlanModal from "../../modal/RelatedPlanModal"
import User from "@/common/js/user"
import VideoCourseDetail from '../VideoCourseDetail';
import WatchData from "./WatchData";
import { XMTable } from '@/components';
import college from '@/common/lottie/college'; import college from '@/common/lottie/college';
import { PageControl, XMTable } from '@/components'; import "./VideoCourseList.less"
import { LIVE_SHARE } from '@/domains/course-domain/constants';
import CourseService from '@/domains/course-domain/CourseService';
import ShareLiveModal from '@/modules/course-manage/modal/ShareLiveModal';
import { Dropdown, message, Modal, Switch, Tooltip } from 'antd';
import React from 'react';
import RelatedPlanModal from '../../modal/RelatedPlanModal';
import WatchDataModal from '../modal/WatchDataModal';
import './VideoCourseList.less';
class VideoCourseList extends React.Component { class VideoCourseList extends React.Component {
constructor(props) { constructor(props) {
...@@ -39,21 +35,20 @@ class VideoCourseList extends React.Component { ...@@ -39,21 +35,20 @@ class VideoCourseList extends React.Component {
} }
} }
// 跳转课程详情页
handleLinkToCourseDetail = (courseId) => {
const { match } = this.props;
window.RCHistory.push(`${match.url}/video-course-detail?courseId=${courseId}`)
}
// 观看数据弹窗 // 观看数据弹窗
handleShowWatchDataModal = (record) => { handleShowWatchDataModal = (item) => {
const watchDataModal = ( const { match } = this.props;
<WatchDataModal window.RCHistory.push({
type='videoCourseList' pathname: `${match.url}/course-data?courseName=${item.courseName}&courseId=${item.id}`
data={record} })
close={() => { }
this.setState({
watchDataModal: null,
});
}}
/>
);
this.setState({ watchDataModal });
};
// 请求表头 // 请求表头
parseColumns = () => { parseColumns = () => {
...@@ -61,23 +56,21 @@ class VideoCourseList extends React.Component { ...@@ -61,23 +56,21 @@ class VideoCourseList extends React.Component {
const { ShelfLoading } = this.state; const { ShelfLoading } = this.state;
const columns = [ const columns = [
{ {
title: '视频课', title: "线上课",
key: 'scheduleName', key: "scheduleName",
dataIndex: 'scheduleName', dataIndex: "scheduleName",
width: 321, width: 321,
fixed: 'left', fixed: 'left',
render: (val, record) => { render: (val, record) => {
const { coverUrl, scheduleVideoUrl } = record; const { coverUrl } = record;
return ( return (
<div className='record__item'> <div className='record__item'>
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
<img <img
className='course-cover' className='course-cover'
src={ src={
coverUrl || coverUrl || 'https://image.xiaomaiketang.com/xm/TwtGPQGE4K.png'
(type === 'internal' ? `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast` : 'https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png')
} }
alt='' alt='封面图'
/> />
<Choose> <Choose>
<When condition={record.courseName.length > 25}> <When condition={record.courseName.length > 25}>
...@@ -106,9 +99,9 @@ class VideoCourseList extends React.Component { ...@@ -106,9 +99,9 @@ class VideoCourseList extends React.Component {
</If> </If>
</span> </span>
), ),
key: 'categoryName', key: "categoryName",
dataIndex: 'categoryName', dataIndex: "categoryName",
width: 200, width: 150,
render: (val, record) => { render: (val, record) => {
return ( return (
<Choose> <Choose>
...@@ -126,21 +119,15 @@ class VideoCourseList extends React.Component { ...@@ -126,21 +119,15 @@ class VideoCourseList extends React.Component {
}, },
}, },
{ {
title: '创建人', title: '课节数',
key: 'createName', key: 'chapterNum',
dataIndex: 'createName', dataIndex: 'chapterNum',
className: "chapterNum",
width: 100, width: 100,
render: (val) => { align: 'right',
return ( render: (val,item) => {
<div> return <div onClick={()=>this.handleLinkToCourseDetail(item.id)}>{val || 1}</div>
{val && ( }
<Tooltip title={val}>
<div>{val.length > 4 ? `${val.slice(0, 4)}...` : val}</div>
</Tooltip>
)}
</div>
);
},
}, },
{ {
title: ( title: (
...@@ -178,13 +165,31 @@ class VideoCourseList extends React.Component { ...@@ -178,13 +165,31 @@ class VideoCourseList extends React.Component {
}, },
}, },
{ {
title: '观看学员数', title: "观看学员数",
width: 110, width: 150,
key: 'watchUserCount', key: "watchUserCount",
dataIndex: 'watchUserCount', dataIndex: "watchUserCount",
align: 'right',
render: (val, item) => { render: (val, item) => {
return <div className='watchUserCount'>{val || 0}</div>; return <div className='watchUserCount' onClick={() => this.handleShowWatchDataModal(item)}>{val || 0}</div>
}, }
},
{
title: "创建人",
key: "createName",
dataIndex: "createName",
width: 100,
render: (val) => {
return (
<div>
{val && (
<Tooltip title={val}>
<div>{val.length > 4 ? `${val.slice(0, 4)}...` : val}</div>
</Tooltip>
)}
</div>
)
}
}, },
{ {
title: '创建时间', title: '创建时间',
...@@ -238,21 +243,17 @@ class VideoCourseList extends React.Component { ...@@ -238,21 +243,17 @@ class VideoCourseList extends React.Component {
title: '操作', title: '操作',
key: 'operate', key: 'operate',
dataIndex: 'operate', dataIndex: 'operate',
width: 210, width: 160,
fixed: 'right', fixed: 'right',
render: (val, record) => { render: (val, record) => {
return ( return (
<div className='operate'> <div className='operate'>
<div className='operate__item' onClick={() => this.handleShowWatchDataModal(record)}> <If condition={type === "internal"}>
观看数据
</div>
<If condition={type === 'internal'}>
<span className='operate__item split'> | </span>
<div className='operate__item' onClick={() => this.handleShowShareModal(record)}> <div className='operate__item' onClick={() => this.handleShowShareModal(record)}>
分享 分享
</div> </div>
<span className='operate__item split'> | </span>
</If> </If>
<span className='operate__item split'> | </span>
<Dropdown overlay={this.renderMoreOperate(record)}> <Dropdown overlay={this.renderMoreOperate(record)}>
<span className='more-operate'> <span className='more-operate'>
<span className='operate-text'>更多</span> <span className='operate-text'>更多</span>
...@@ -267,7 +268,7 @@ class VideoCourseList extends React.Component { ...@@ -267,7 +268,7 @@ class VideoCourseList extends React.Component {
}, },
]; ];
type !== 'internal' && columns.splice(2, 1); type !== 'internal' && columns.splice(5, 1);
return columns; return columns;
}; };
...@@ -334,7 +335,7 @@ class VideoCourseList extends React.Component { ...@@ -334,7 +335,7 @@ class VideoCourseList extends React.Component {
}); });
}; };
// 删除视频课 // 删除线上课
handleDeleteVideoCourse = (scheduleId) => { handleDeleteVideoCourse = (scheduleId) => {
Modal.confirm({ Modal.confirm({
title: '你确定要删除此视频课吗？', title: '你确定要删除此视频课吗？',
...@@ -376,7 +377,7 @@ class VideoCourseList extends React.Component { ...@@ -376,7 +377,7 @@ class VideoCourseList extends React.Component {
data={shareData} data={shareData}
type='videoClass' type='videoClass'
courseDivision={type} courseDivision={type}
title='视频课' title='线上课'
close={() => { close={() => {
this.setState({ this.setState({
shareLiveModal: null, shareLiveModal: null,
...@@ -453,7 +454,7 @@ class VideoCourseList extends React.Component { ...@@ -453,7 +454,7 @@ class VideoCourseList extends React.Component {
); );
}; };
render() { render() {
const { dataSource = [], totalCount, query, type } = this.props; const { dataSource = [], totalCount, query, type, match } = this.props;
const { current, size } = query; const { current, size } = query;
const { RelatedPlanModalVisible, selectPlanList, selectCourseId } = this.state; const { RelatedPlanModalVisible, selectPlanList, selectCourseId } = this.state;
return ( return (
...@@ -472,16 +473,6 @@ class VideoCourseList extends React.Component { ...@@ -472,16 +473,6 @@ class VideoCourseList extends React.Component {
scroll={{ x: 1500 }} scroll={{ x: 1500 }}
className='video-list-table' className='video-list-table'
/> />
{/* <Table
rowKey={(record) => record.id}
dataSource={dataSource}
columns={this.parseColumns()}
onChange={this.handleChangeTable}
pagination={false}
scroll={{ x: 1500 }}
bordered
className='video-list-table'
/> */}
<div className='box-footer'> <div className='box-footer'>
<PageControl <PageControl
...@@ -506,9 +497,11 @@ class VideoCourseList extends React.Component { ...@@ -506,9 +497,11 @@ class VideoCourseList extends React.Component {
)} )}
{this.state.shareLiveModal} {this.state.shareLiveModal}
{this.state.watchDataModal} {this.state.watchDataModal}
<Route path={`${match.url}/video-course-detail`} component={VideoCourseDetail} />
<Route path={`${match.url}/course-data`} component={WatchData} />
</div> </div>
); );
} }
} }
export default VideoCourseList; export default withRouter(VideoCourseList);
src/modules/course-manage/video-course/components/VideoCourseList.less
...@@ -24,11 +24,17 @@ ...@@ -24,11 +24,17 @@
} }
} }
} }
.chapterNum {
color: #2966ff;
cursor: pointer;
}
} }
} }
.watchUserCount { .watchUserCount {
text-align: right; text-align: right;
padding: 16px; padding: 16px;
color: #2966ff;
cursor: pointer;
} }
.operate-text { .operate-text {
color: #2966FF; color: #2966FF;
......
src/modules/course-manage/video-course/components/VieoCourseOpt.jsx
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* @Date: 2020-08-05 10:12:15 * @Date: 2020-08-05 10:12:15
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-26 16:07:27 * @LastEditTime: 2020-12-26 16:07:27
* @Description: 视频课-操作模块 * @Description: 线上课-操作模块
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -22,7 +22,7 @@ export default function VideoCourseOpt() { ...@@ -22,7 +22,7 @@ export default function VideoCourseOpt() {
RCHistory.push('/create-video-course?type=add'); RCHistory.push('/create-video-course?type=add');
}} }}
className="mr12" className="mr12"
>新建视频课</Button> >新建线上课</Button>
</div> </div>
); );
} }
src/modules/course-manage/video-course/components/WatchData.jsx 0 → 100644
import User from "@/common/js/user";
import college from "@/common/lottie/college";
import { PageControl, XMTable } from "@/components";
import Breadcrumbs from "@/components/Breadcrumbs";
import CourseService from "@/domains/course-domain/CourseService";
import { Input, Select } from "antd";
import React from "react";
import { withRouter } from "react-router-dom";
import LearningDetailModal from "./LearningDetailModal";
import "./WatchData.less";
const { Search } = Input;
class WatchData extends React.Component {
constructor(props) {
super(props);
const courseId = window.getParameterByName("courseId");
const courseName = window.getParameterByName("courseName");
this.state = {
courseName,
courseId,
visible: true,
dataSource: [],
query: {
current: 1,
size: 10,
sourceEnum: null,
},
totalCount: 0,
learningDetailModal: null,
};
}
componentDidMount() {
this.handleFetchDataList();
}
// 获取观看视频数据列表
handleFetchDataList = () => {
const { query, courseId } = this.state;
const params = {
...query,
courseId: courseId,
storeId: User.getStoreId(),
};
CourseService.videoWatchInfo(params).then((res) => {
const { result = {} } = res;
const { records = [], total = 0 } = result;
this.setState({
dataSource: records,
totalCount: Number(total),
});
});
};
parseColumns = () => {
const SOURCENUM = {
WE_CHAT: "微信",
WORK_WE_CHAT: "企业微信",
};
const columns = [
{
title: "观看学员",
key: "name",
dataIndex: "name",
render: (val, item) => {
return (
<div className="watcher">
<div className="watcher__name">{val}</div>
<div className={`watcher__type ${item.sourceEnum}`}>
@{SOURCENUM[item.sourceEnum]}
</div>
</div>
);
},
},
{
title: "手机号",
key: "phone",
dataIndex: "phone",
},
{
title: "首次观看时间",
key: "firstWatch",
dataIndex: "firstWatch",
render: (val) => {
return formatDate("YYYY-MM-DD H:i", val);
},
},
{
title: "学习进度",
key: "progress",
dataIndex: "progress",
render: (val) => {
return <span>{val}%</span>;
},
},
{
title: "操作",
key: "operate",
dataIndex: "operate",
render: (val, record) => {
return (
<div className="operate">
<div
className="operate__item"
onClick={() => this.ShowLearningDetailModal(record)}
>
学习详情
</div>
</div>
);
},
},
];
return columns;
};
// 显示学员数据详情弹窗
ShowLearningDetailModal = (item) => {
const learningDetailModal = (
<LearningDetailModal
data={item}
title="学习详情"
onClose={() => {
this.setState({
learningDetailModal: null
});
}}
courseId={this.state.courseId}
/>
);
this.setState({ learningDetailModal });
};
// 搜索学员姓名或手机号
handleChangNickname = (value) => {
const isPhone = (value || "").match(/^\d+$/);
const { query } = this.state;
let _query = { ...query };
if (isPhone) {
_query.phone = value;
_query.nickName = null;
} else {
_query.nickName = value;
_query.phone = null;
}
_query.current = 1;
this.setState(
{
query: _query,
},
this.handleFetchDataList
);
};
// 搜索学员类型
handleWatchTypeSelect = (sourceEnum) => {
const { query } = this.state;
let _query = { ...query };
_query.sourceEnum = sourceEnum;
this.setState(
{
query: _query,
},
this.handleFetchDataList
);
};
render() {
const { dataSource, totalCount, query, courseName } = this.state;
const { current, size, sourceEnum } = query;
return (
<div className="page video-course-watch-data">
<Breadcrumbs
navList="观看学员数据"
goBack={() => {
window.RCHistory.goBack();
}}
/>
<div className="box">
<div className="box-header">
<div className="course-detail">
<div className="detail__line"></div>
<div className="detail__name">{courseName}</div>
</div>
<div className="filter-box">
<div className="watcher-name">
<span className="label">学员：</span>
<Search
placeholder="搜索学员姓名/手机号"
style={{ width: 200 }}
onChange={(e) => {
this.handleChangNickname(e.target.value);
}}
onSearch={() => {
this.handleFetchDataList();
}}
enterButton={<span className="icon iconfont">&#xe832;</span>}
/>
</div>
<div className="watch-type">
<span className="label">学员类型：</span>
<Select
showSearch
style={{ width: 200 }}
allowClear
onPopupScroll={this.handleFetchMore}
placeholder="请选择学员类型"
value={sourceEnum}
onChange={this.handleWatchTypeSelect}
>
<Select.Option tyle={{ textAlign: "center" }} value="WE_CHAT">
微信
</Select.Option>
<Select.Option
tyle={{ textAlign: "center" }}
value="WORK_WE_CHAT"
>
企业微信
</Select.Option>
</Select>
</div>
</div>
</div>
<XMTable
renderEmpty={{
image: college,
description: "暂无数据",
}}
rowKey={(record) => record.id}
dataSource={dataSource}
columns={this.parseColumns()}
pagination={false}
bordered
className="video-list-table"
/>
<div className="box-footer">
<PageControl
current={current - 1}
pageSize={size}
total={totalCount}
toPage={(page) => {
const _query = { ...query, current: page + 1 };
this.setState(
{
query: _query,
},
() => {
this.handleFetchDataList();
}
);
}}
/>
</div>
</div>
{this.state.learningDetailModal}
</div>
);
}
}
export default withRouter(WatchData);
src/modules/course-manage/video-course/components/WatchData.less 0 → 100644
.video-course-watch-data {
.watcher {
display: flex;
&__type {
margin-left: 8px;
&.WE_CHAT {
color:rgba(28, 172, 27, 1);
}
&.WORK_WE_CHAT {
color: rgba(41, 102, 255, 1);
}
}
}
.filter-box {
display: flex;
margin-bottom: 4px;
.watcher-name {
margin-right: 40px;
}
}
.course-detail {
display: flex;
align-items: center;
margin-bottom: 16px;
.detail__line {
width: 4px;
height: 12px;
background-image: linear-gradient(#2966ff 83.5%, #0acca4 16.5%);
margin-right: 8px;
}
.detail__name {
width: 880px;
height: 26px;
font-size: 19px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 26px;
}
}
}
\ No newline at end of file
src/modules/course-manage/video-course/index.jsx
...@@ -15,18 +15,18 @@ class VideoCourse extends React.Component { ...@@ -15,18 +15,18 @@ class VideoCourse extends React.Component {
current: 1, current: 1,
storeId: User.getStoreId(), storeId: User.getStoreId(),
}, },
dataSource: [], // 视频课列表 dataSource: [], // 线上课列表
totalCount: 0, // 视频课数据总条数 totalCount: 0, // 线上课数据总条数
currentTabKey: 'internal', currentTabKey: 'internal',
}; };
} }
componentWillMount() { componentWillMount() {
// 获取视频课列表 // 获取线上课列表
this.handleFetchScheduleList(); this.handleFetchScheduleList();
} }
// 获取视频课列表 // 获取线上课列表
handleFetchScheduleList = (_query = {}) => { handleFetchScheduleList = (_query = {}) => {
const { currentTabKey } = this.state; const { currentTabKey } = this.state;
const query = { const query = {
...@@ -81,7 +81,7 @@ class VideoCourse extends React.Component { ...@@ -81,7 +81,7 @@ class VideoCourse extends React.Component {
const { dataSource, totalCount, query, currentTabKey } = this.state; const { dataSource, totalCount, query, currentTabKey } = this.state;
return ( return (
<div className='page video-course-page'> <div className='page video-course-page'>
<div className='content-header'>视频课</div> <div className='content-header'>线上课</div>
<div className='box'> <div className='box'>
<Tabs onChange={this.currenTabChange} activeKey={currentTabKey}> <Tabs onChange={this.currenTabChange} activeKey={currentTabKey}>
...@@ -95,7 +95,7 @@ class VideoCourse extends React.Component { ...@@ -95,7 +95,7 @@ class VideoCourse extends React.Component {
<If condition={currentTabKey === 'internal'}> <If condition={currentTabKey === 'internal'}>
<VideoCourseOpt /> <VideoCourseOpt />
</If> </If>
{/* 视频课列表模块 */} {/* 线上课列表模块 */}
<VideoCourseList <VideoCourseList
type={currentTabKey} type={currentTabKey}
query={query} query={query}
......
src/modules/course-manage/video-course/modal/WatchDataModal.jsx
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* @Date: 2020-05-19 11:01:31 * @Date: 2020-05-19 11:01:31
* @Last Modified by: 吴文洁 * @Last Modified by: 吴文洁
* @Last Modified time: 2020-05-25 16:50:47 * @Last Modified time: 2020-05-25 16:50:47
* @Description 余额异常弹窗 * @Description 学员观看数据弹窗
*/ */
import User from '@/common/js/user'; import User from '@/common/js/user';
import { PageControl, XMTable } from '@/components'; import { PageControl, XMTable } from '@/components';
...@@ -127,66 +127,53 @@ class WatchDataModal extends React.Component { ...@@ -127,66 +127,53 @@ class WatchDataModal extends React.Component {
render() { render() {
const { visible, size, dataSource, totalCount, query } = this.state; const { visible, size, dataSource, totalCount, query } = this.state;
return ( return (
<Modal <Modal
title='视频课观看数据' title="线上课观看数据"
visible={visible} visible={visible}
footer={null} footer={null}
onCancel={this.onClose} onCancel={this.onClose}
maskClosable={false} maskClosable={false}
className='watch-data-modal' className="watch-data-modal"
closable={true} closable={true}
width={800} width={800}
closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}> closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
<div className='search-container'> >
<Search <div className="search-container">
placeholder='搜索学员姓名/手机号' <Search placeholder="搜索学员姓名/手机号" style={{ width: 200 }} onChange={(e) => { this.handleChangNickname(e.target.value)}} onSearch={ () => { this.handleFetchDataList()}} enterButton={<span className="icon iconfont">&#xe832;</span>}/>
style={{ width: 200 }} </div>
onChange={(e) => { <div>
this.handleChangNickname(e.target.value);
}} <XMTable
onSearch={() => { renderEmpty={{
this.handleFetchDataList(); image: college,
}} description: '暂无数据',
enterButton={<span className='icon iconfont'>&#xe832;</span>} }}
/> rowKey={record => record.id}
</div> dataSource={dataSource}
<div> columns={this.parseColumns()}
<XMTable pagination={false}
renderEmpty={{ bordered
image: college, />
description: '暂无数据', {dataSource.length >0 &&
}} <div className="box-footer">
rowKey={(record) => record.id} <PageControl
dataSource={dataSource} current={query.current - 1}
columns={this.parseColumns()} pageSize={size}
pagination={false} total={totalCount}
bordered size="small"
/> toPage={(page) => {
{dataSource.length > 0 && ( const _query = {...query, current: page + 1};
<div className='box-footer'> this.setState({
<PageControl query:_query
current={query.current - 1} },()=>{ this.handleFetchDataList()})
pageSize={size} }}
total={totalCount} onShowSizeChange={this.onShowSizeChange}
size='small' />
toPage={(page) => { </div>
const _query = { ...query, current: page + 1 }; }
this.setState( </div>
{ </Modal>
query: _query, )
},
() => {
this.handleFetchDataList();
}
);
}}
onShowSizeChange={this.onShowSizeChange}
/>
</div>
)}
</div>
</Modal>
);
} }
} }
......
src/modules/home/Home.jsx
...@@ -343,7 +343,7 @@ class Home extends React.Component { ...@@ -343,7 +343,7 @@ class Home extends React.Component {
</div> </div>
</div> </div>
<div className='course-item'> <div className='course-item'>
<div className='course-title'>视频课</div> <div className='course-title'>线上课</div>
<div className='data'> <div className='data'>
<span className='course-number'>{videoCourseNum}</span> <span className='course-number'>{videoCourseNum}</span>
{incVideoCourseNum > 0 && <span className='icon iconfont'>&#xe635;</span>} {incVideoCourseNum > 0 && <span className='icon iconfont'>&#xe635;</span>}
...@@ -409,10 +409,9 @@ class Home extends React.Component { ...@@ -409,10 +409,9 @@ class Home extends React.Component {
</span> </span>
<span <span
className={`tab${scheduleType === 'VOICE' ? ' selected' : ''}`} className={`tab${scheduleType === 'VOICE' ? ' selected' : ''}`}
onClick={() => this.setState({ scheduleType: 'VOICE' }, () => this.getHotCourse())}> onClick={() => this.setState({ scheduleType: 'VOICE' }, () => this.getHotCourse())}
视频课 >线上课</span>
</span> <span
<span
className={`tab${scheduleType === 'PICTURE' ? ' selected' : ''}`} className={`tab${scheduleType === 'PICTURE' ? ' selected' : ''}`}
onClick={() => this.setState({ scheduleType: 'PICTURE' }, () => this.getHotCourse())}> onClick={() => this.setState({ scheduleType: 'PICTURE' }, () => this.getHotCourse())}>
图文课 图文课
......
src/modules/knowledge-base/ENUM.js
...@@ -55,7 +55,7 @@ const ENUM = { ...@@ -55,7 +55,7 @@ const ENUM = {
CourseTypeEnum: { CourseTypeEnum: {
LIVE: "直播课", LIVE: "直播课",
VOICE: "视频课", VOICE: "线上课",
PICTURE: "图文课", PICTURE: "图文课",
FOLDER: "学习资料", FOLDER: "学习资料",
}, },
......
src/modules/knowledge-base/components/KnowledgeBaseFilter.jsx
...@@ -65,10 +65,11 @@ class KnowledgeBaseFilter extends React.Component { ...@@ -65,10 +65,11 @@ class KnowledgeBaseFilter extends React.Component {
<Row type="flex" justify="space-between" align="top"> <Row type="flex" justify="space-between" align="top">
<div className="search-condition"> <div className="search-condition">
<div className="search-condition__item"> <div className="search-condition__item">
<span className="search-name">课程名称：</span> <span className="search-name">资料名称：</span>
<Search <Search
value={name} value={name}
placeholder="搜索课程名称" // allowClear
placeholder="搜索资料名称"
onChange={(e) => { onChange={(e) => {
this.handleChangeQuery("name", e.target.value, false); this.handleChangeQuery("name", e.target.value, false);
}} }}
...@@ -79,33 +80,6 @@ class KnowledgeBaseFilter extends React.Component { ...@@ -79,33 +80,6 @@ class KnowledgeBaseFilter extends React.Component {
enterButton={<span className="icon iconfont">&#xe832;</span>} enterButton={<span className="icon iconfont">&#xe832;</span>}
/> />
</div> </div>
<div className="search-condition__item">
<span className="shelf-status">课程类型：</span>
<Select
style={{ width: "calc(100% - 84px)" }}
placeholder="请选择课程类型"
allowClear={true}
value={type}
onChange={(value) => {
this.handleChangeQuery("type", value);
}}
suffixIcon={
<span
className="icon iconfont"
style={{ fontSize: "12px", color: "#BFBFBF" }}
>
&#xe835;
</span>
}
>
{Reflect.ownKeys(ENUM.CourseTypeEnum).map((item) => {
return (
<Option key={item} value={item}>{ENUM.CourseTypeEnum[item]}</Option>
);
})}
</Select>
</div>
</div> </div>
<div className="reset-fold-area"> <div className="reset-fold-area">
<Tooltip title="清空筛选"> <Tooltip title="清空筛选">
......
src/modules/knowledge-base/components/KnowledgeBaseList.jsx
...@@ -3,12 +3,13 @@ ...@@ -3,12 +3,13 @@
* @Author: zangsuyun * @Author: zangsuyun
* @Date: 2021-03-12 14:49:40 * @Date: 2021-03-12 14:49:40
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-11 16:44:59 * @LastEditTime: 2021-07-18 10:27:17
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
import React from "react"; import React from "react";
import { Modal, message, Tooltip, Switch, Dropdown, Button } from "antd"; import { Modal, message, Tooltip, Switch, Dropdown, Button } from "antd";
import { FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum';
import { Route, withRouter } from "react-router-dom"; import { Route, withRouter } from "react-router-dom";
import { PageControl, XMTable } from "@/components"; import { PageControl, XMTable } from "@/components";
import { LIVE_SHARE_MAP } from "@/common/constants/academic/cloudClass"; import { LIVE_SHARE_MAP } from "@/common/constants/academic/cloudClass";
...@@ -181,178 +182,37 @@ class KnowledgeBaseList extends React.Component { ...@@ -181,178 +182,37 @@ class KnowledgeBaseList extends React.Component {
const { current, size } = query; const { current, size } = query;
const columns = [ const columns = [
{ {
title: '课程名称', title: "名称",
key: 'name', key: "name",
dataIndex: 'name', dataIndex: "name",
width: 391,
fixed: 'left',
render: (val, record) => { render: (val, record) => {
const { coverUrl, mediaCourseUrl, courseDivision } = record.source; const { coverUrl, mediaCourseUrl, courseDivision } = record.source;
let hasCover = false; let hasCover = false;
const type = record.type; const type = record.type;
return ( return (
<div> <div
{type === 'LIVE' && ( className='record__item'
<div className='record__item'> onClick={() => {
{record.source && this.handleScanFile(record.source)
record.source.courseMediaVOS.map((item, index) => { }}>
if (item.contentType === 'COVER') { <img src={FileTypeIcon[record.source.folderFormat] } style={{width:24,height:24}} alt='' className='item-img' />
hasCover = true; {val.length > 25 ? (
return <img className='course-cover' key={index} src={item.mediaUrl} />; <Tooltip title={val}>
} <div className='course-name clamp'>{val}</div>
})} </Tooltip>
{!hasCover && <img className='course-cover' src={'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'} />} ) : (
<div> <div className='course-name clamp'>{val}</div>
{val.length > 17 ? (
<Tooltip title={val}>
<div className='course-name'>{val}</div>
</Tooltip>
) : (
<div className='course-name'>{val}</div>
)}
<div>
<span className='course-time'>
{formatDate('YYYY-MM-DD H:i', parseInt(record.source.startTime))}~{formatDate('H:i', parseInt(record.source.endTime))}
</span>
<span
className='course-status'
style={{
color: ENUM.courseStateShow[record.source.courseState].color,
border: `1px solid ${ENUM.courseStateShow[record.source.courseState].color}`,
}}>
{ENUM.courseStateShow[record.source.courseState].title}
</span>
{record.hideToUser && (
<Tooltip title={<div>课程未成功开课，已在学员知识列表中隐藏</div>}>
<i
className='icon iconfont'
style={{
marginLeft: '5px',
cursor: 'pointer',
color: '#FF4F4F',
fontSize: '14px',
}}>
&#xe61d;
</i>
</Tooltip>
)}
</div>
<div className='teacher-assistant'>
{record.source.teacherName.length > 4 ? (
<Tooltip title={record.source.teacherName}>
<span className='teacher'>讲师：{record.source.teacherName}</span>
</Tooltip>
) : (
<span className='teacher'>讲师：{record.source.teacherName}</span>
)}
{record.source.admins.length > 0 && (
<>
<span className='split'> | </span>
{this.handleAdminName(record.source.admins).length > 4 ? (
<Tooltip title={this.handleAdminName(record.source.admins)}>
<span className='assistant'>
助教：
{record.source.admins.map((item, index) => {
return (
<span>
{item.adminName} {index < record.source.admins.length - 1 && <span> 、</span>}{' '}
</span>
);
})}
</span>
</Tooltip>
) : (
<span className='assistant'>
助教：
{record.source.admins.map((item, index) => {
return (
<span key={index}>
{item.adminName} {index < record.source.admins.length - 1 && <span> 、</span>}{' '}
</span>
);
})}
</span>
)}
</>
)}
</div>
</div>
</div>
)}
{type === 'VOICE' && (
<div className='record__item'>
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
<img
className='course-cover'
src={
coverUrl
? coverUrl
: courseDivision !== 'EXTERNAL'
? `${mediaCourseUrl}?x-oss-process=video/snapshot,t_0,m_fast`
: 'https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png'
}
alt=''
/>
{val.length > 25 ? (
<Tooltip title={val}>
<div className='course-name clamp'>{val}</div>
</Tooltip>
) : (
<div className='course-name clamp'>{val}</div>
)}
</div>
)}
{type === 'PICTURE' && (
<div className='record__item'>
<img className='course-cover' src={coverUrl || 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png'} />
{val.length > 25 ? (
<Tooltip title={val}>
<div className='course-name clamp'>{val}</div>
</Tooltip>
) : (
<div className='course-name clamp'>{val}</div>
)}
</div>
)}
{type === 'FOLDER' && (
<div
className='record__item'
onClick={() => {
this.handleScanFile(record.source);
}}>
<div className={`folder-type ${record.source && record.source.folderFormat}`} />
{val.length > 25 ? (
<Tooltip title={val}>
<div className='course-name clamp'>{val}</div>
</Tooltip>
) : (
<div className='course-name clamp'>{val}</div>
)}
</div>
)} )}
</div> </div>
);
}, )
}, }
{
title: '课程类型',
key: 'type',
dataIndex: 'type',
align: 'center',
// width: 100,
render: (val, record) => {
return <div className=''>{val ? ENUM.CourseTypeEnum[val] : '-'}</div>;
},
}, },
{ {
title: '创建人', title: "创建人",
key: 'createName', key: "createName",
dataIndex: 'createName', dataIndex: "createName",
align: 'center', align: "center",
render: (val) => { render: (val) => {
return ( return (
<div> <div>
...@@ -381,8 +241,8 @@ class KnowledgeBaseList extends React.Component { ...@@ -381,8 +241,8 @@ class KnowledgeBaseList extends React.Component {
}, },
}, },
{ {
title: '', title: "",
width: 48,
}, },
{ {
title: '操作', title: '操作',
...@@ -441,10 +301,9 @@ class KnowledgeBaseList extends React.Component { ...@@ -441,10 +301,9 @@ class KnowledgeBaseList extends React.Component {
const { match } = this.props; const { match } = this.props;
localStorage.setItem("WatchData_CourseName", item.name); localStorage.setItem("WatchData_CourseName", item.name);
window.RCHistory.push({ window.RCHistory.push({
// pathname: `${match.url}/course-data?type=${item.courseType}&id=${item.liveCourseId}`, pathname: `${match.url}/course-data?type=${item.type}&id=${item.id}`
pathname: `${match.url}/course-data?type=${item.type}&id=${item.id}`, })
}); }
};
deleteConfirm = (item) => { deleteConfirm = (item) => {
const params = { const params = {
...@@ -490,7 +349,7 @@ class KnowledgeBaseList extends React.Component { ...@@ -490,7 +349,7 @@ class KnowledgeBaseList extends React.Component {
dataSource={dataSource} dataSource={dataSource}
columns={this.parseColumns()} columns={this.parseColumns()}
pagination={false} pagination={false}
scroll={{ x: 900 }}
bordered bordered
className="knowledge-list-table" className="knowledge-list-table"
renderEmpty={{ renderEmpty={{
......
src/modules/knowledge-base/components/KnowledgeBaseList.less
...@@ -109,7 +109,10 @@ ...@@ -109,7 +109,10 @@
.knowledge-base-list { .knowledge-base-list {
.record__item { .record__item {
display: flex; display: flex;
// align-items: center; align-items: center;
.item-img{
margin-right: 4px;
}
.course-cover { .course-cover {
min-width: 107px; min-width: 107px;
max-width: 90px; max-width: 90px;
...@@ -153,13 +156,7 @@ ...@@ -153,13 +156,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
height: 20px; height: 20px;
&.clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
white-space: normal;
height: 40px;
}
} }
.course-time { .course-time {
font-size: 12px; font-size: 12px;
......
src/modules/knowledge-base/components/KnowledgeBaseOpt.jsx
...@@ -9,10 +9,8 @@ ...@@ -9,10 +9,8 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Button, Menu, Dropdown,message, Modal } from "antd"; import { Button, Menu, Dropdown, message, Modal } from "antd";
import SelectPrepareFileModal from "@/modules/prepare-lesson/modal/SelectPrepareFileModal"; import SelectPrepareFileModal from "@/modules/prepare-lesson/modal/SelectPrepareFileModal";
import { DownOutlined } from "@ant-design/icons";
import AddCourse from "../modal/AddCourse";
import User from "@/common/js/user"; import User from "@/common/js/user";
import Service from "@/common/js/service"; import Service from "@/common/js/service";
import KnowledgeAPI from "@/data-source/knowledge/request-api"; import KnowledgeAPI from "@/data-source/knowledge/request-api";
...@@ -29,18 +27,9 @@ export default function KnowledgeBaseOpt({ ...@@ -29,18 +27,9 @@ export default function KnowledgeBaseOpt({
}) { }) {
const [modal, setModal] = useState(null); const [modal, setModal] = useState(null);
const [openMoveModal, setOpenMoveModal] = useState(false); const [openMoveModal, setOpenMoveModal] = useState(false);
const [data, setData] = useState([]); const [data, setData] = useState([]);
const menu = (
<Menu>
<Menu.Item key="1" style={{ textAlign: "center" }}>
<span onClick={handAddCourse}>添加课程</span>
</Menu.Item>
<Menu.Item key="2" style={{ textAlign: "center" }}>
<span onClick={handleAddFile}>添加资料</span>
</Menu.Item>
</Menu>
);
useEffect(() => { useEffect(() => {
queryCategoryTree(); queryCategoryTree();
...@@ -76,19 +65,6 @@ export default function KnowledgeBaseOpt({ ...@@ -76,19 +65,6 @@ export default function KnowledgeBaseOpt({
return newTreeData; return newTreeData;
}; };
function handAddCourse() {
let modal = (
<AddCourse
onClose={() => {
setModal(null);
}}
onChange={onChange}
categoryId={categoryId}
updateCategoryTree={updateCategoryTree}
></AddCourse>
);
setModal(modal);
}
function handUpload(refIds) { function handUpload(refIds) {
const params = { const params = {
...@@ -118,7 +94,7 @@ export default function KnowledgeBaseOpt({ ...@@ -118,7 +94,7 @@ export default function KnowledgeBaseOpt({
isOpen={true} isOpen={true}
accept=".ppt,.pptx,.doc,.docx,.pdf,.jpg,.jpeg,.png,.xlsx,.xls" accept=".ppt,.pptx,.doc,.docx,.pdf,.jpg,.jpeg,.png,.xlsx,.xls"
tooltip="支持文件类型：ppt、word、excel、pdf、jpg、jpeg、png" tooltip="支持文件类型：ppt、word、excel、pdf、jpg、jpeg、png"
selectTypeList={["JPG", "JPEG", "PNG",'DOC','PDF','EXCEL','application/msword','application/vnd.ms-powerpoint']} // DOC 包含 .pptx,.docx,.xls.XLSX,WORD:DOC selectTypeList={["JPG", "JPEG", "PNG", 'DOC', 'PDF', 'EXCEL', 'application/msword', 'application/vnd.ms-powerpoint']} // DOC 包含 .pptx,.docx,.xls.XLSX,WORD:DOC
onClose={() => { onClose={() => {
setModal(null); setModal(null);
}} }}
...@@ -205,12 +181,9 @@ export default function KnowledgeBaseOpt({ ...@@ -205,12 +181,9 @@ export default function KnowledgeBaseOpt({
return ( return (
<div className="knowledge-course-opt"> <div className="knowledge-course-opt">
{_.isEmpty(selectedRowKeys) ? {_.isEmpty(selectedRowKeys) ?
(categoryId !== '0' && <Dropdown overlay={menu}> categoryId !== '0' && <Button type="primary" onClick={handleAddFile} className="mr8">
<Button type="primary" className="mr8"> 添加资料
添加知识 </Button>
<DownOutlined />
</Button>
</Dropdown>)
: <div className="select-container"> : <div className="select-container">
<span className="con"> <span className="con">
<div> <div>
......
src/modules/knowledge-base/modal/AddCourse.jsx
...@@ -107,11 +107,11 @@ class AddCourse extends React.Component { ...@@ -107,11 +107,11 @@ class AddCourse extends React.Component {
selectVideo: { selectVideo: {
external: [], external: [],
internal: [], internal: [],
}, //弹窗内已选择的视频课程 }, //弹窗内已选择的线上课程
currentVideoCourseListData: { currentVideoCourseListData: {
external: [], external: [],
internal: [], internal: [],
}, //页面中已关联的视频课程 }, //页面中已关联的线上课程
pictureDataSource: [], pictureDataSource: [],
pictureSize: 10, pictureSize: 10,
...@@ -201,7 +201,7 @@ class AddCourse extends React.Component { ...@@ -201,7 +201,7 @@ class AddCourse extends React.Component {
}); });
}; };
// 获取视频课列表 // 获取线上课列表
handleFetchVideoList = () => { handleFetchVideoList = () => {
const { videoQuery, videoSize, videoCourseDivision, videoDataSource, videoTotalCount } = this.state; const { videoQuery, videoSize, videoCourseDivision, videoDataSource, videoTotalCount } = this.state;
...@@ -421,7 +421,7 @@ class AddCourse extends React.Component { ...@@ -421,7 +421,7 @@ class AddCourse extends React.Component {
coverUrl || coverUrl ||
(videoCourseDivision === 'internal' (videoCourseDivision === 'internal'
? `${mediaCourseUrl}?x-oss-process=video/snapshot,t_0,m_fast` ? `${mediaCourseUrl}?x-oss-process=video/snapshot,t_0,m_fast`
: 'https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png') : 'https://image.xiaomaiketang.com/xm/TwtGPQGE4K.png')
} }
alt='' alt=''
/> />
...@@ -866,7 +866,7 @@ class AddCourse extends React.Component { ...@@ -866,7 +866,7 @@ class AddCourse extends React.Component {
)} )}
</div> </div>
</TabPane> </TabPane>
<TabPane tab='视频课' key='VIDEO'> <TabPane tab='线上课' key='VIDEO'>
<Radio.Group value={videoCourseDivision} onChange={this.videoCourseDivisionChange} style={{ marginBottom: 8 }}> <Radio.Group value={videoCourseDivision} onChange={this.videoCourseDivisionChange} style={{ marginBottom: 8 }}>
<Radio.Button value='internal'>内部课程</Radio.Button> <Radio.Button value='internal'>内部课程</Radio.Button>
<Radio.Button value='external'>外部课程</Radio.Button> <Radio.Button value='external'>外部课程</Radio.Button>
......
src/modules/knowledge-base/modal/VideoList.jsx
...@@ -25,7 +25,7 @@ class VideoList extends React.Component { ...@@ -25,7 +25,7 @@ class VideoList extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
id: "", // 视频课ID id: "", // 线上课ID
studentIds: [], studentIds: [],
selectedRowKeys: [], selectedRowKeys: [],
query: { query: {
...@@ -33,8 +33,8 @@ class VideoList extends React.Component { ...@@ -33,8 +33,8 @@ class VideoList extends React.Component {
current: 1, current: 1,
storeId: User.getStoreId(), storeId: User.getStoreId(),
}, },
dataSource: [], // 视频课列表 dataSource: [], // 线上课列表
totalCount: 0, // 视频课数据总条数 totalCount: 0, // 线上课数据总条数
}; };
} }
...@@ -50,11 +50,11 @@ class VideoList extends React.Component { ...@@ -50,11 +50,11 @@ class VideoList extends React.Component {
} }
componentWillMount() { componentWillMount() {
// 获取视频课列表 // 获取线上课列表
this.handleFetchScheduleList(); this.handleFetchScheduleList();
} }
// 获取视频课列表 // 获取线上课列表
handleFetchScheduleList = (_query = {}) => { handleFetchScheduleList = (_query = {}) => {
const query = { const query = {
...this.state.query, ...this.state.query,
......
src/modules/plan-manage/components/BasicInfo.jsx
/* /*
* @Author: yuananting
* @Date: 2021-07-05 10:48:08
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-18 10:14:26
* @Description: 描述一下咯
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
/*
* @Author: zhangleyuan * @Author: zhangleyuan
* @Date: 2021-02-20 16:45:51 * @Date: 2021-02-20 16:45:51
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
...@@ -12,7 +21,8 @@ import { withRouter } from 'react-router-dom'; ...@@ -12,7 +21,8 @@ import { withRouter } from 'react-router-dom';
import SelectOperatorModal from '../modal/SelectOperatorModal'; import SelectOperatorModal from '../modal/SelectOperatorModal';
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal'; import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import Upload from '@/core/upload'; import Upload from '@/core/upload';
import ImgClipModal from '@/components/ImgClipModal'; import GraphicsEditor from '@/modules/course-manage/components/GraphicsEditor';
import ImgClipModal from '@/components/ImgClipModal'
import './BasicInfo.less'; import './BasicInfo.less';
const { TextArea } = Input; const { TextArea } = Input;
...@@ -123,10 +133,14 @@ class BasicInfo extends React.Component { ...@@ -123,10 +133,14 @@ class BasicInfo extends React.Component {
this.props.onChange(field, _percentCompleteLive); this.props.onChange(field, _percentCompleteLive);
}; };
changeIntro = (value) => {
this.props.onChange('introduce', value);
};
render() { render() {
const { operatorModalVisible, showSelectFileModal, visible, imageFile } = this.state; const { operatorModalVisible, showSelectFileModal, visible, imageFile } = this.state;
const { data } = this.props; const { data } = this.props;
const { planName, coverUrl, instro, enableState, operateType, selectOperatorList, percentCompleteLive, percentCompleteVideo, percentCompletePicture } = const { planName, coverUrl, introduce, enableState, operateType, selectOperatorList, percentCompleteLive, percentCompleteVideo, percentCompletePicture } =
data; data;
// 当前是否使用的是默认图片 // 当前是否使用的是默认图片
const isDefaultCover = coverUrl === defaultCover; const isDefaultCover = coverUrl === defaultCover;
...@@ -147,10 +161,6 @@ class BasicInfo extends React.Component { ...@@ -147,10 +161,6 @@ class BasicInfo extends React.Component {
<div className='cover'> <div className='cover'>
<span className='label'>封面图：</span> <span className='label'>封面图：</span>
<div className='cover__wrap'> <div className='cover__wrap'>
<div className='img-content'>
{isDefaultCover && <span className='tag'>默认图</span>}
<img src={coverUrl} width='690' alt='' />
</div>
<div className='opt-btns'> <div className='opt-btns'>
<Button <Button
onClick={() => { onClick={() => {
...@@ -165,36 +175,44 @@ class BasicInfo extends React.Component { ...@@ -165,36 +175,44 @@ class BasicInfo extends React.Component {
</span> </span>
<div className='tips'>建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div> <div className='tips'>建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
</div> </div>
<div className='img-content'>
{isDefaultCover && <span className='tag'>默认图</span>}
<img src={coverUrl} width='690' alt='' />
</div>
</div> </div>
</div> </div>
<div className='introduction'> <div className='introduction'>
<span className='label'>简介：</span> <span className='label'>简介：</span>
<TextArea {/* <TextArea
placeholder='请输入培训计划简介' placeholder='请输入培训计划简介'
maxLength={200} maxLength={200}
style={{ width: '552px', height: '110px' }} style={{ width: '552px', height: '110px' }}
className='instro-textarea' className='instro-textarea'
value={instro} value={instro}
onChange={(e) => this.props.onChange('instro', e.target.value)} onChange={(e) => this.props.onChange('instro', e.target.value)}
/> */}
<GraphicsEditor
id='intro'
isIntro={true}
maxLimit={1000}
detail={{
content: introduce,
}}
onChange={(val) => {
this.changeIntro(val);
}}
/> />
</div> </div>
<div className='wether-use'> <div className='wether-use'>
<span className='label'>是否启用：</span> <span className='label'>是否启用：</span>
<div className='content'> <div className='content'>
<div> <Switch
<Switch checked={enableState === 'YES' ? true : false}
checked={enableState === 'YES' ? true : false} onChange={() => {
onChange={() => { this.enableStateChange();
this.enableStateChange(); }}
}} />
/> <div className='instro-text'>{enableState === 'YES' ? '已开启，培训计划可正常分享给学员学习' : '已关闭，培训计划暂不进行分享和学习'}</div>
</div>
<div>
<div className='instro-text'>
<div>开启：此培训计划可以分享给学员进行学习</div>
<div>关闭：此培训计划暂不可分享给学员进行学习，后续可开启</div>
</div>
</div>
</div> </div>
</div> </div>
<div className='view-range'> <div className='view-range'>
...@@ -212,7 +230,7 @@ class BasicInfo extends React.Component { ...@@ -212,7 +230,7 @@ class BasicInfo extends React.Component {
onChange={(e) => { onChange={(e) => {
this.props.onChange('operateType', e.target.value); this.props.onChange('operateType', e.target.value);
}}> }}>
<Row style={{ marginBottom: '5px' }}> <Row style={{ marginBottom: '16px' }}>
<Col span={24}> <Col span={24}>
<Radio value='All_Operate'> <Radio value='All_Operate'>
所有运营师 所有运营师
...@@ -238,7 +256,7 @@ class BasicInfo extends React.Component { ...@@ -238,7 +256,7 @@ class BasicInfo extends React.Component {
选择运营师 选择运营师
</Button> </Button>
<span> <span>
已选择<span>{selectOperatorList.length}</span>名运营师 已选择 <span style={{ color: '#2966FF' }}>{selectOperatorList.length}</span> 名运营师
</span> </span>
</div> </div>
)} )}
...@@ -268,7 +286,7 @@ class BasicInfo extends React.Component { ...@@ -268,7 +286,7 @@ class BasicInfo extends React.Component {
<div className='live-standard-info'> <div className='live-standard-info'>
<span className='icon iconfont'>&#xe864;</span> <span className='icon iconfont'>&#xe864;</span>
<span className='instro'> <span className='instro'>
视频课单个课程，学员学习进度达到 线上课单个课节，学员学习进度达到
<Input <Input
width='40' width='40'
value={percentCompleteVideo} value={percentCompleteVideo}
...@@ -278,7 +296,7 @@ class BasicInfo extends React.Component { ...@@ -278,7 +296,7 @@ class BasicInfo extends React.Component {
onBlur={(e) => this.percentCompleteBlur(e, 'percentCompleteVideo')} onBlur={(e) => this.percentCompleteBlur(e, 'percentCompleteVideo')}
className='input-box' className='input-box'
/> />
%，即视为"已完成"学习 %，即课节视为"已完成"学习
</span> </span>
</div> </div>
<div className='live-standard-info'> <div className='live-standard-info'>
......
src/modules/plan-manage/components/BasicInfo.less
.plan-basic-info{ .plan-basic-info {
.label { .label {
width: 110px; width: 110px;
text-align: right; text-align: right;
display:inline-block; display: inline-block;
font-size:14px; font-size: 14px;
color:#666; color: #666;
.require { .require {
color: #EC4B35; color: #ec4b35;
} }
.iconfont{ .iconfont {
font-size:14px; font-size: 14px;
color:#BFBFBF; color: #bfbfbf;
}
}
.cover {
display: flex;
margin-top: 24px;
&__wrap {
position: relative;
.tag {
border-radius: 2px;
background: #d6d6d6;
font-size: 12px;
height: 18px;
width: 52px;
text-align: center;
color: #fff;
position: absolute;
top: 8px;
left: 8px;
} }
} }
.cover { .img-content {
display: flex; position: relative;
margin-top: 16px; margin-top: 8px;
&__wrap { width: 299px;
position: relative; height: 169px;
display: flex; img {
.tag { width: 100%;
border-radius: 2px; height: 100%;
background: #D6D6D6; object-fit: contain;
font-size: 12px; }
height: 18px;
width: 52px;
text-align: center;
color: #FFF;
position: absolute;
top: 8px;
left: 8px;
}
}
.img-content {
margin-right: 20px;
width: 299px;
height: 169px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.opt-btns{
.default-btn {
margin:0 8px;
color: #2966FF;
cursor: pointer;
&.disabled {
color: #CCC;
cursor: not-allowed;
}
}
.tips{
margin-top:8px;
font-size:14px;
color:#999;
}
}
} }
.introduction{ .opt-btns {
margin-top:16px; .default-btn {
.instro-textarea{ margin-left: 14px;
vertical-align: top; color: #2966ff;
cursor: pointer;
&.disabled {
color: #ccc;
cursor: not-allowed;
} }
}
.tips {
margin-top: 8px;
font-size: 14px;
color: #999;
}
} }
.wether-use{ }
display:flex; .introduction {
margin-top:16px; display: flex;
.instro-text{ margin-top: 24px;
color:#999; .instro-textarea {
margin-left:12px; vertical-align: top;
}
.content{
display:flex;
}
} }
.view-range{ }
display:flex; .wether-use {
margin-top:16px; display: flex;
.label{ margin-top: 34px;
margin-top:2px; .instro-text {
} color: #999;
.instro-text{ margin-left: 12px;
color:#999;
margin-left:12px;
}
.choose-business{
margin-top:16px;
}
.playback__text{
margin-left:12px;
color:#999999;
}
} }
.done-standard{ .content {
display: flex; display: flex;
margin-top:22px; }
.standard-label{ }
margin-top:3px; .view-range {
} display: flex;
.live-standard-info{ margin-top: 24px;
margin-bottom:10px; .label {
} margin-top: 2px;
input{ }
display:inline-block; .instro-text {
width:90px; color: #999;
height:32px; margin-left: 12px;
} }
.icon{ .choose-business {
color:#A0A0A0; margin-top: 12px;
font-size:14px; margin-left: 24px;
margin-right:4px; .ant-btn {
} margin-right: 12px;
.instro{
color:#333333;
font-size:14px;
}
.input-box{
width: 60px;
height: 32px;
border-radius: 4px;
border: 1px solid #E8E8E8;
color:#333333;
font-size:14px;
margin:0 2px;
} }
} }
.playback__text {
margin-left: 12px;
color: #999999;
}
}
.done-standard {
display: flex;
margin-top: 22px;
.standard-label {
margin-top: 3px;
}
.live-standard-info {
margin-bottom: 10px;
}
input {
display: inline-block;
width: 90px;
height: 32px;
}
.icon {
color: #a0a0a0;
font-size: 14px;
margin-right: 4px;
}
.instro {
color: #333333;
font-size: 14px;
}
.input-box {
width: 60px;
height: 32px;
border-radius: 4px;
border: 1px solid #e8e8e8;
color: #333333;
font-size: 14px;
margin: 0 2px;
}
}
} }
src/modules/plan-manage/components/ExpiredCourseList.jsx
...@@ -18,7 +18,7 @@ function ExpiredCourseList(props) { ...@@ -18,7 +18,7 @@ function ExpiredCourseList(props) {
<span>直播课</span> <span>直播课</span>
} }
{ item.courseType === "VOICE " && { item.courseType === "VOICE " &&
<span>视频课</span> <span>线上课</span>
} }
</div> </div>
<div className="course-instro"> <div className="course-instro">
......
src/modules/plan-manage/components/PlanList.jsx
/* /*
* @Author: zhangleyuan * @Author: zhangleyuan
* @Date: 2021-02-20 16:46:46 * @Date: 2021-02-20 16:46:46
* @LastEditors: fusanqiasng * @LastEditors: wufan
* @LastEditTime: 2021-06-01 11:45:34 * @LastEditTime: 2021-07-16 11:29:13
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -52,7 +52,6 @@ function PlanList(props) { ...@@ -52,7 +52,6 @@ function PlanList(props) {
title: '课程总数量', title: '课程总数量',
key: 'courseNum', key: 'courseNum',
dataIndex: 'courseNum', dataIndex: 'courseNum',
width: 110,
render: (val, record) => { render: (val, record) => {
return <div className='course-number'>{val}</div>; return <div className='course-number'>{val}</div>;
}, },
......
src/modules/plan-manage/components/PlanList.less
.plan-list { .plan-list {
margin-top: 12px; margin-top: 12px;
.course-number { .course-number {
text-align: right;
margin-right: 45px; margin-right: 45px;
} }
......
src/modules/plan-manage/modal/UserLearnDetailModal.less
.user-Learn-modal{ .user-Learn-modal {
.customer-info {
.customer-info{ margin-bottom: 16px;
margin-bottom:16px; .customer-name {
.customer-name{ font-size: 14px;
font-size:14px; color: #333;
color:#333; margin-right: 32px;
margin-right:32px;
}
.customer-phone{
font-size:14px;
color:#333;
}
}
.plan-instro{
display: flex;
align-items: center;
margin-bottom:16px;
.img-con{
margin-right:8px;
img{
width: 97px;
height: 54px;
display: inline-block;
border-radius:4px;
}
}
.plan-name{
color:#333;
font-size:16px;
}
.plan-learn-percentage{
color:#333;
font-size:14px;
}
} }
.task-table{ .customer-phone {
.ant-table-thead{ font-size: 14px;
tr { color: #333;
th{ }
padding:9px 16px; }
} .plan-instro {
} display: flex;
} align-items: center;
tr{ margin-bottom: 16px;
td{ .img-con {
padding:14px 16px; margin-right: 8px;
} img {
} width: 97px;
.taskName{ height: 54px;
color:#333; display: inline-block;
font-size:14px; border-radius: 4px;
} }
.task-learn-percentage{ }
color:#333; .plan-name {
font-size:14px; color: #333;
font-size: 16px;
}
.plan-learn-percentage {
color: #333;
font-size: 14px;
}
}
.table-box {
.child-table {
margin-left: 40px;
tr > td {
&:first-child {
padding-right: 0 !important;
} }
.course-info{ &:nth-child(2) {
display:flex; padding-left: 0 !important;
margin-left:57px;
align-items: center;
.course-type{
font-size:11px;
color:#666666;
padding:0px 6px;
border: 1px solid #999999;
margin-right:4px;
border-radius: 2px;
line-height: 16px;
}
.name-and-state{
flex:1;
.course-name{
color:#666666;
font-size:14px;
margin-right:8px;
}
.tip{
font-size:14px;
color:#FF4F4F;
margin-right:2px;
}
.course-state{
color:#999;
font-size:14px;
}
}
} }
.ant-table-expanded-row{ }
td{ .course-info {
padding:0 16px; display: flex;
} .course-type {
border-radius: 2px;
border: 1px solid #999999;
font-size: 11px;
color: #666666;
padding: 1px 8px;
margin-right: 6px;
} }
.ant-table-content{ }
border:1px solid #e8e8e8; }
tr{ .chapter-record {
td{ display: flex;
border:none; align-items: center;
} .chapter-img {
.child-table{ width: 18px;
height: 18px;
.ant-table-content{ margin: 0 10px;
border:none; }
thead{ .chapter-name {
display:none; overflow: hidden;
} white-space: nowrap;
tbody tr { text-overflow: ellipsis;
td{ width: 400px;
border-bottom:none; }
padding:14px 16px; }
} .record-name {
display: flex;
} align-items: center;
} .img-con {
margin-right: 8px;
} img {
} width: 97px;
.odd-row{ height: 54px;
background:transparent; border-radius: 4px;
td{
background: #FFF;
}
& + .ant-table-expanded-row{
background:transparent;
td{
background: #FFF;
}
}
&:hover{
& + .ant-table-expanded-row{
background:transparent;
td{
background: #F3f6fa !important;
}
}
}
}
.even-row{
background:transparent;
td{
background: #FAFAFA;
}
& + .ant-table-expanded-row{
background:transparent;
td{
background: #FAFAFA;
}
}
&:hover{
& + .ant-table-expanded-row{
background:transparent;
td{
background: #F3f6fa !important;
}
}
}
}
} }
}
} }
} }
\ No newline at end of file }
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