Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
X
xiaomai-cloud-class-web
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
xiaomai-cloud-class
xiaomai-cloud-class-web
Commits
6f6bbe45
Commit
6f6bbe45
authored
Jul 01, 2021
by
yuananting
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'feature/yuananting/20210624/replace_empty_picture' into gray
parents
88808d3e
6d1ef729
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
53 additions
and
47 deletions
+53
-47
src/modules/course-manage/modal/ShareLiveModal.jsx
+53
-47
No files found.
src/modules/course-manage/modal/ShareLiveModal.jsx
View file @
6f6bbe45
...
...
@@ -6,67 +6,67 @@
* @Description: 大班直播分享弹窗
*/
import
React
from
'react'
import
{
Modal
,
Button
,
message
}
from
'antd'
import
domtoimage
from
'dom-to-image'
import
React
from
'react'
;
import
{
Modal
,
Button
,
message
}
from
'antd'
;
import
domtoimage
from
'dom-to-image'
;
import
qrcode
from
'@/libs/qrcode/qrcode.js'
import
User
from
'@/common/js/user'
import
$
from
'jquery'
import
_
from
'underscore'
import
CourseService
from
'@/domains/course-domain/CourseService'
import
qrcode
from
'@/libs/qrcode/qrcode.js'
;
import
User
from
'@/common/js/user'
;
import
$
from
'jquery'
;
import
_
from
'underscore'
;
import
CourseService
from
'@/domains/course-domain/CourseService'
;
import
'./ShareLiveModal.less'
import
'./ShareLiveModal.less'
;
class
ShareLiveModal
extends
React
.
Component
{
constructor
(
props
)
{
super
(
props
)
super
(
props
)
;
this
.
state
=
{
shareUrl
:
'https://xiaomai5.com/liveShare?courseId=12'
,
}
}
;
}
componentDidMount
()
{
// 获取短链接
this
.
handleConvertShortUrl
()
this
.
handleConvertShortUrl
()
;
}
handleConvertShortUrl
=
()
=>
{
const
{
longUrl
}
=
this
.
props
.
data
const
{
longUrl
}
=
this
.
props
.
data
;
// 发请求
CourseService
.
getQrcode
({
urls
:
[
longUrl
],
}).
then
((
res
)
=>
{
const
{
result
=
[]
}
=
res
const
{
result
=
[]
}
=
res
;
this
.
setState
(
{
shareUrl
:
result
[
0
].
shortUrl
,
},
()
=>
{
const
qrcodeWrapDom
=
document
.
querySelector
(
'#qrcodeWrap'
)
const
qrcodeWrapDom
=
document
.
querySelector
(
'#qrcodeWrap'
)
;
const
qrcodeNode
=
new
qrcode
({
text
:
this
.
state
.
shareUrl
,
size
:
98
,
})
qrcodeWrapDom
.
appendChild
(
qrcodeNode
)
})
;
qrcodeWrapDom
.
appendChild
(
qrcodeNode
)
;
const
qrcodeWrapDomDownload
=
document
.
querySelector
(
'#qrcodeWrap-dowload'
)
const
qrcodeWrapDomDownload
=
document
.
querySelector
(
'#qrcodeWrap-dowload'
)
;
const
qrcodeNodeDownLoad
=
new
qrcode
({
text
:
this
.
state
.
shareUrl
,
size
:
196
,
})
qrcodeWrapDomDownload
.
appendChild
(
qrcodeNodeDownLoad
)
})
;
qrcodeWrapDomDownload
.
appendChild
(
qrcodeNodeDownLoad
)
;
}
)
})
}
)
;
})
;
}
;
componentWillUnmount
()
{
// 页面销毁之前清空定时器
clearTimeout
(
this
.
timer
)
clearTimeout
(
this
.
timer
)
;
}
// 下载海报
...
...
@@ -79,31 +79,31 @@ class ShareLiveModal extends React.Component {
()
=>
{
this
.
setState
({
time
:
new
Date
().
valueOf
()
},
()
=>
{
setTimeout
(()
=>
{
let
node
=
document
.
getElementById
(
'poster-dowload'
)
let
node
=
document
.
getElementById
(
'poster-dowload'
)
;
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
()
})
},
1000
)
})
console
.
log
(
imgData
)
;
const
download
=
document
.
createElement
(
'a'
)
;
const
{
courseName
}
=
this
.
props
.
data
;
$
(
download
).
attr
(
'href'
,
imgData
).
attr
(
'download'
,
`
${
courseName
}
.png`
).
get
(
0
).
click
()
;
})
;
},
1000
)
;
})
;
}
)
}
)
;
}
;
// 复制分享链接
handleCopy
=
()
=>
{
const
textContent
=
document
.
getElementById
(
'shareUrl'
).
innerText
const
textContent
=
document
.
getElementById
(
'shareUrl'
).
innerText
;
window
.
copyText
(
textContent
)
message
.
success
(
'复制成功!'
)
}
window
.
copyText
(
textContent
)
;
message
.
success
(
'复制成功!'
)
;
}
;
render
()
{
const
{
courseDivision
,
data
,
type
,
title
}
=
this
.
props
const
{
courseName
,
scheduleVideoUrl
,
courseMediaVOS
,
coverUrl
}
=
data
const
{
shareUrl
,
showImg
,
time
}
=
this
.
state
const
{
courseDivision
,
data
,
type
,
title
}
=
this
.
props
;
const
{
courseName
,
scheduleVideoUrl
,
courseMediaVOS
,
coverUrl
}
=
data
;
const
{
shareUrl
,
showImg
,
time
}
=
this
.
state
;
// 判断是否是默认图, 默认图不需要在URL后面增加字符串
let
coverImgSrc
=
''
;
switch
(
type
)
{
...
...
@@ -111,21 +111,27 @@ class ShareLiveModal extends React.Component {
if
(
courseMediaVOS
&&
courseMediaVOS
.
length
>
0
)
{
data
.
courseMediaVOS
.
map
((
item
,
index
)
=>
{
if
(
item
.
contentType
===
'COVER'
)
{
coverImgSrc
=
item
.
mediaUrl
coverImgSrc
=
item
.
mediaUrl
;
}
else
{
coverImgSrc
=
'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'
;
}
})
})
;
}
else
{
coverImgSrc
=
'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'
;
}
break
;
case
'videoClass'
:
// 视频课
coverImgSrc
=
coverUrl
||
(
courseDivision
===
'internal'
?
`
${
scheduleVideoUrl
}
?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring`
:
'https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png'
)
coverImgSrc
=
coverUrl
||
(
courseDivision
===
'internal'
?
`
${
scheduleVideoUrl
}
?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring`
:
'https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png'
);
break
;
case
'graphicsClass'
:
// 图文课
coverImgSrc
=
coverUrl
||
'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png'
;
break
;
case
'offlineClass'
:
// 线下课
coverImgSrc
=
coverUrl
||
'https://image.xiaomaiketang.com/xm/pxbWKsYA87.png'
;
coverImgSrc
=
coverUrl
||
'https://image.xiaomaiketang.com/xm/pxbWKsYA87.png'
;
break
;
}
...
...
@@ -214,8 +220,8 @@ class ShareLiveModal extends React.Component {
</
div
>
</
div
>
</
Modal
>
)
)
;
}
}
export
default
ShareLiveModal
export
default
ShareLiveModal
;
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment