Skip to content

X
xiaomai-cloud-class-web
Commit b6807c33 by zhangleyuan
Options

feat:修改海报不显示的问题

parent e14bd165
Showing with 169 additions and 92 deletions
src/core/antd.less
......@@ -636,4 +636,9 @@ mr0 {
.ant-select-dropdown .rc-virtual-list-scrollbar .rc-virtual-list-scrollbar-thumb{
background: #D6D6D6 !important;
}
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > thead > tr > .ant-table-cell-fix-right-first::after,
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > tbody > tr > .ant-table-cell-fix-right-first::after
{
border-right:none !important;
}
\ No newline at end of file
src/domains/basic-domain/constants.ts
/*
* @Author: 陈剑宇
* @Date: 2020-05-07 14:43:01
* @LastEditTime: 2021-01-19 14:32:47
* @LastEditTime: 2021-01-25 13:58:01
* @LastEditors: zhangleyuan
* @Description:
* @FilePath: /wheat-web-demo/src/domains/basic-domain/constants.ts
......
src/domains/course-domain/constants.ts
......@@ -2,7 +2,7 @@
* @Author: 吴文洁
* @Date: 2020-08-20 09:21:40
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-01-18 21:05:31
* @LastEditTime: 2021-01-25 13:53:13
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
......
src/modules/course-manage/modal/ShareLiveModal.jsx
......@@ -24,6 +24,7 @@ class ShareLiveModal extends React.Component {
constructor(props) {
super(props);
this.state = {
shareUrl: 'https://xiaomai5.com/liveShare?courseId=12'
}
......@@ -32,6 +33,43 @@ class ShareLiveModal extends React.Component {
componentDidMount() {
// 获取短链接
this.handleConvertShortUrl();
// const { needStr, data, type } = this.props;
// const { courseName, coverUrl = DEFAULT_COVER, scheduleVideoUrl } = data;
// const { shareUrl ,time} = this.state;
// // 判断是否是默认图, 默认图不需要在URL后面增加字符串
// const isDefaultCover = coverUrl === DEFAULT_COVER;
// let coverImgSrc = coverUrl;
// if(type === 'videoClass'){
// if(!coverUrl || isDefaultCover){
// coverImgSrc = `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring`
// }
// }else{
// data.courseMediaVOS.map((item,index)=>{
// if( item.contentType === "COVER"){
// coverImgSrc = item.mediaUrl;
// }
// })
// }
// let image = new Image()
// image.src =coverImgSrc + '?v=' + Math.random()
// image.crossOrigin = "*"
// image.onload = ()=>{
// let imgData = getBase64Image(image)
// this.setState({imgData})
// }
// function getBase64Image (img) {
// let canvas = document.createElement("canvas")
// canvas.width = img.width
// canvas.height = img.height
// let ctx = canvas.getContext("2d")
// ctx.drawImage(img, 0, 0, img.width, img.height)
// let dataURL = canvas.toDataURL("image/png")
// return dataURL
// }
}
handleConvertShortUrl = () => {
......@@ -42,6 +80,7 @@ class ShareLiveModal extends React.Component {
urls: [longUrl]
}).then((res) => {
const { result = [] } = res;
this.setState({
shareUrl: result[0].shortUrl
}, () => {
......@@ -62,15 +101,24 @@ class ShareLiveModal extends React.Component {
// 下载海报
handleDownloadPoster = () => {
const dom = document.querySelector('#poster');
html2canvas(dom, {
useCORS: true,
}).then(canvas => {
const download = document.createElement('a');
const { courseName } = this.props.data;
const dataUrl = canvas.toDataURL('image/png');
$(download).attr('href', dataUrl).attr('download', `${courseName}.png`).get(0).click();
this.setState({
showImg:true,
time:new Date().valueOf()
},()=>{
this.setState({time:new Date().valueOf()},()=>{
let node = document.getElementById('poster');
domtoimage.toPng(node)
.then((imgData) => {
console.log(imgData)
const download = document.createElement('a');
const { courseName } = this.props.data;
$(download).attr('href', imgData).attr('download', `${courseName}.png`).get(0).click();
// this.props.close()
})
})
})
}
// 复制分享链接
......@@ -84,17 +132,23 @@ class ShareLiveModal extends React.Component {
render() {
const { needStr, data, type } = this.props;
const { courseName, coverUrl = DEFAULT_COVER, scheduleVideoUrl } = data;
const { shareUrl } = this.state;
const { shareUrl ,imgData,showImg,time} = this.state;
// 判断是否是默认图, 默认图不需要在URL后面增加字符串
const isDefaultCover = coverUrl === DEFAULT_COVER;
const coverImgSrc = type === 'videoClass'
// 如果是默认图, 显示视频的第一帧, 否则显示上传的视频封面
? ((!coverUrl || isDefaultCover)
? `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring`
: `${coverUrl}`)
: `${coverUrl}`
let coverImgSrc = coverUrl;
if(type === 'videoClass'){
if(!coverUrl || isDefaultCover){
coverImgSrc = `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring`
}
}else{
data.courseMediaVOS.map((item,index)=>{
if( item.contentType === "COVER"){
coverImgSrc = item.mediaUrl;
}
})
}
return (
......@@ -107,7 +161,8 @@ class ShareLiveModal extends React.Component {
className="share-live-modal"
onCancel={this.props.close}
>
<div className="left" id="poster">
<div className="left">
<div id="poster">
<div className="store-name">
<span className="text">{storeName}</span>
</div>
......@@ -117,13 +172,16 @@ class ShareLiveModal extends React.Component {
type === "liveClass" &&
<div class="live-couse-name">{courseName}</div>
}
<img
src={coverImgSrc}
className="course-cover"
/>
{
showImg ? <img
crossOrigin='*'
src={coverImgSrc+`?=${time}`}
className="course-cover"
/>: <img
src={coverImgSrc+`?=${time}`}
className="course-cover"
/>
}
<div className="qrcode-wrap">
<div className="qrcode-wrap__left">
<div className="text">长按识别二维码进入观看</div>
......@@ -132,38 +190,35 @@ class ShareLiveModal extends React.Component {
<div className="qrcode-wrap__right" id="qrcodeWrap">
</div>
</div>
</div>
<div className="right">
<div className="share-poster right__item">
<div className="title">① 海报分享</div>
{ type === "liveClass" &&
<div className="sub-title">用户可通过微信扫描海报二维码，观看直播</div>
}
{ type === "videoClass" &&
<div className="sub-title">用户可通过微信识别二维码，报名观看视频</div>
}
</div>
<div className="right">
<div className="share-poster right__item">
<div className="title">① 海报分享</div>
{ type === "liveClass" &&
<div className="sub-title">用户可通过微信扫描海报二维码，观看直播</div>
}
{ type === "videoClass" &&
<div className="sub-title">用户可通过微信识别二维码，报名观看视频</div>
}
<div className="content" onClick={this.handleDownloadPoster}>下载海报</div>
</div>
<div className="content" onClick={this.handleDownloadPoster}>下载海报</div>
</div>
<div className="share-url right__item">
<div className="title">② 链接分享</div>
{ type === "liveClass" &&
<div className="sub-title">用户可通过微信打开以下链接，观看直播</div>
}
{ type === "videoClass" &&
<div className="sub-title">用户可通过打开链接，报名观看视频</div>
}
<div className="content">
<div className="share-url" id="shareUrl">{shareUrl}</div>
<Button type="primary" onClick={this.handleCopy}>复制</Button>
</div>
<div className="share-url right__item">
<div className="title">② 链接分享</div>
{ type === "liveClass" &&
<div className="sub-title">用户可通过微信打开以下链接，观看直播</div>
}
{ type === "videoClass" &&
<div className="sub-title">用户可通过打开链接，报名观看视频</div>
}
<div className="content">
<div className="share-url" id="shareUrl">{shareUrl}</div>
<Button type="primary" onClick={this.handleCopy}>复制</Button>
</div>
</div>
</div>
</Modal>
)
}
......
src/modules/course-manage/modal/ShareLiveModal.less
.share-live-modal {
.ant-modal-body {
display: flex;
#poster{
background: #FFF;
margin:0;
padding: 20px;
}
.left {
width: 303px;
padding: 20px;
margin: 0 32px 0 16px;
box-shadow:0px 2px 10px 0px rgba(0,0,0,0.05);
border-radius: 12px;
.course-name-title {
font-size: 14px;
color: #333;
......
src/modules/course-manage/video-course/AddVideoCourse.jsx
......@@ -2,7 +2,7 @@
* @Author: 吴文洁
* @Date: 2020-08-05 10:07:47
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-01-18 18:18:49
* @LastEditTime: 2021-01-25 13:46:13
* @Description: 视频课新增/编辑页
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
......@@ -540,24 +540,25 @@ class AddVideoCourse extends React.Component {
</div>
{/* 选择备课文件弹窗 */}
<SelectPrepareFileModal
operateType="select"
selectTypeList={['MP4']}
accept="video/mp4"
confirm={{
title: '文件过大，无法上传',
content: '为保障学员的观看体验，上传的视频大小不能超过500M',
}}
tooltip={'格式支持mp4，大小不超过500M'}
isOpen={showSelectFileModal}
diskList={diskList}
addVideo={true}
onClose={() => {
this.setState({ showSelectFileModal: false })
}}
onSelect={this.handleSelectVideo}
/>
{ showSelectFileModal &&
<SelectPrepareFileModal
operateType="select"
selectTypeList={['MP4']}
accept="video/mp4"
confirm={{
title: '文件过大，无法上传',
content: '为保障学员的观看体验，上传的视频大小不能超过500M',
}}
tooltip={'格式支持mp4，大小不超过500M'}
isOpen={showSelectFileModal}
diskList={diskList}
addVideo={true}
onClose={() => {
this.setState({ showSelectFileModal: false })
}}
onSelect={this.handleSelectVideo}
/>
}
<ImgCutModalNew
title="裁剪"
width={550}
......
src/modules/course-manage/video-course/AddVideoCourse.less
.add-video-course-page {
.box{
margin-bottom:16px !important;
}
.ant-radio-group {
display: flex;
flex-direction: column;
......@@ -25,7 +27,11 @@
.form {
margin-top: 16px;
padding: 0 16px;
.label{
display:inline-block;
text-align:right;
width:85px;
}
.required {
position: relative;
......@@ -33,7 +39,7 @@
position: absolute;
content: '*';
color: red;
left: -10px;
left: 5px;
top: 6px;
}
......@@ -110,7 +116,7 @@
}
.sub-content {
margin-left: 70px;
margin-left: 85px;
margin-top: 4px;
.tips {
......
src/modules/course-manage/video-course/components/AddVideoIntro.jsx
......@@ -264,18 +264,19 @@ class AddVideoIntro extends React.Component {
</div>
</div>
{/* 选择暖场图文件弹窗 */}
<SelectPrepareFileModal
operateType="select"
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'] }
tooltip={ selectType==="INTRO"?'支持文件类型：jpg、jpeg、png':'支持文件类型：jpg、jpeg、png、mp4'}
isOpen={showSelectFileModal}
onClose={() => {
this.setState({ showSelectFileModal: false })
}}
onSelect={this.handleSelectVideo}
/>
{ showSelectFileModal &&
<SelectPrepareFileModal
operateType="select"
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'] }
tooltip={ selectType==="INTRO"?'支持文件类型：jpg、jpeg、png':'支持文件类型：jpg、jpeg、png、mp4'}
isOpen={showSelectFileModal}
onClose={() => {
this.setState({ showSelectFileModal: false })
}}
onSelect={this.handleSelectVideo}
/>
}
</div>
)
}
......
src/modules/course-manage/video-course/components/AddVideoIntro.less
......@@ -8,7 +8,11 @@
color: #999;
}
}
.label{
display:inline-block;
text-align:right;
width:85px;
}
.playback,
.introduce {
display: flex;
......
src/modules/course-manage/video-course/components/VideoCourseList.jsx
......@@ -2,7 +2,7 @@
* @Author: 吴文洁
* @Date: 2020-08-05 10:12:45
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-01-22 16:25:06
* @LastEditTime: 2021-01-25 13:58:13
* @Description: 视频课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
......
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