Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in / Register
Toggle navigation
B
biz.qingxiao.com
Project
Project
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
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
wangxuelai
biz.qingxiao.com
Commits
da35b936
Commit
da35b936
authored
Nov 26, 2019
by
wangxuelai
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
''
parent
3c3737d4
Hide whitespace changes
Inline
Side-by-side
Showing
13 changed files
with
423 additions
and
20 deletions
+423
-20
index.html
index.html
+1
-1
coursegatherdetail.js
src/models/coursegatherdetail.js
+12
-1
coursemateria.js
src/models/coursemateria.js
+11
-13
onlineclasses.js
src/models/onlineclasses.js
+12
-0
CourseDetail.js
src/pages/coursegather/detail/CourseDetail.js
+51
-0
CourseDetail.less
src/pages/coursegather/detail/CourseDetail.less
+48
-0
index.js
src/pages/coursegather/detail/index.js
+68
-1
index.less
src/pages/coursegather/detail/index.less
+25
-0
MediaCard.js
src/pages/coursemateria/MediaCard.js
+4
-4
CourseDetail.js
src/pages/onlineclasses/singleclass/CourseDetail.js
+51
-0
CourseDetail.less
src/pages/onlineclasses/singleclass/CourseDetail.less
+48
-0
singleDetail.js
src/pages/onlineclasses/singleclass/singleDetail.js
+67
-0
singleDetail.less
src/pages/onlineclasses/singleclass/singleDetail.less
+25
-0
No files found.
index.html
View file @
da35b936
...
...
@@ -17,6 +17,6 @@
</head>
<body>
<div
id=
"root"
></div>
<script
src=
"dist/main.js?15747
57759016
"
charset=
"utf-8"
></script>
<script
src=
"dist/main.js?15747
60381179
"
charset=
"utf-8"
></script>
</body>
</html>
\ No newline at end of file
src/models/coursegatherdetail.js
View file @
da35b936
...
...
@@ -72,6 +72,7 @@ export default {
content
:
''
,
is_encrypt
:
1
,
password
:
''
,
poster
:
''
,
},
editLoading
:
false
,
materialVisible
:
false
,
...
...
@@ -353,6 +354,7 @@ export default {
content
:
data
.
content
,
is_encrypt
:
data
.
is_encrypt
,
password
:
data
.
password
,
poster
:
data
.
poster
,
},
},
});
...
...
@@ -917,6 +919,16 @@ export default {
addCourseObj
:
{
...
addCourseObj
},
},
});
}
else
if
(
uploadtype
==
'uploadPoster'
)
{
yield
put
({
type
:
'updateState'
,
payload
:
{
addCourseObj
:
{
...
addCourseObj
,
poster
:
imageUrl
,
},
},
});
}
if
(
successCallback
&&
(
typeof
successCallback
==
'function'
))
{
successCallback
({
...
...
@@ -936,7 +948,6 @@ export default {
if
(
file
&&
(
REGEXP_VIDEO
.
test
(
file
.
type
)
||
file
.
type
===
''
))
{
const
uploadSignature
=
yield
call
(
uploader
.
uploadVideoSignature
,
params
);
signature
=
uploadSignature
.
data
;
console
.
log
(
'dadasdad'
);
yield
put
({
type
:
'uploadvideo'
,
payload
:
{
...
...
src/models/coursemateria.js
View file @
da35b936
...
...
@@ -12,6 +12,7 @@ import * as uploader from '../services/uploader';
import
errorcode
from
'../common/errorcode'
;
import
*
as
courseMateriaAjax
from
'../services/courseMateria'
;
import
*
as
commonAjax
from
'../services/common'
;
let
uploadMateriaLoading
=
null
;
export
default
{
namespace
:
'coursemateria'
,
state
:
{
...
...
@@ -23,6 +24,11 @@ export default {
materiaList
:
[],
materiaListTotal
:
0
,
tabIndex
:
0
,
uploadStatus
:
{
step
:
0
,
// 1 文件解析中 2 文件上传中 3 素材转换中 4 素材转换中 5 上传成功
type
:
0
,
// 1 ppt和pdf 2 视频 录音 3 图片
show
:
false
,
},
},
subscriptions
:
{
setup
({
dispatch
,
history
})
{
// eslint-disable-line
...
...
@@ -34,7 +40,6 @@ export default {
content
,
filename
,
type
,
uploaderLoading
,
}
=
payload
;
const
transformData
=
yield
call
(
commonAjax
.
fileTransForm
,
{
object
:
filename
,
...
...
@@ -48,7 +53,6 @@ export default {
content
,
filename
,
type
,
uploaderLoading
,
},
});
}
else
{
...
...
@@ -66,7 +70,6 @@ export default {
content
,
filename
,
type
,
uploaderLoading
,
}
=
payload
;
const
transformData
=
yield
call
(
commonAjax
.
fileConvertQuery
,
{
task_id
,
...
...
@@ -80,7 +83,6 @@ export default {
filename
,
images
:
data
.
result
,
type
:
getFileType
(
content
.
fileType
).
filetype
,
uploaderLoading
,
},
});
}
else
if
(
code
==
40060
)
{
...
...
@@ -92,7 +94,6 @@ export default {
content
,
filename
,
type
,
uploaderLoading
,
},
});
}
else
{
...
...
@@ -164,6 +165,7 @@ export default {
const
typeObject
=
getFileType
(
fileType
);
let
ajax
=
null
;
let
params
=
null
;
uploadMateriaLoading
=
message
.
loading
(
'素材上传中,请稍等...'
,
0
);
switch
(
typeObject
.
fileSmalltype
)
{
case
1
:
// 图片
ajax
=
uploader
.
uploadImageSignature
;
...
...
@@ -194,7 +196,6 @@ export default {
return
;
}
let
signature
=
{};
const
uploaderLoading
=
message
.
loading
(
'课件上传中...'
);
const
uploadSignature
=
yield
call
(
ajax
,
params
);
signature
=
uploadSignature
.
data
;
if
(
uploadSignature
.
code
==
200
)
{
...
...
@@ -205,7 +206,6 @@ export default {
signature
,
successCallBack
,
file
,
uploaderLoading
,
},
});
}
else
{
...
...
@@ -242,7 +242,6 @@ export default {
signature
,
file
,
successCallBack
,
uploaderLoading
,
duration
,
}
=
payload
;
const
filename
=
`
${
signature
.
dir
}${
getRandomFilename
(
file
.
name
)}
`
;
...
...
@@ -256,7 +255,6 @@ export default {
url
:
signature
.
host
,
};
const
uploadFileData
=
yield
call
(
uploader
.
uploadImg
,
params
);
// setTimeout(uploaderLoading);
if
(
getFileType
(
fileType
).
filetype
==
4
)
{
yield
put
({
type
:
'fileTransForm'
,
...
...
@@ -269,7 +267,6 @@ export default {
},
filename
,
type
:
getFileType
(
fileType
).
filetype
,
uploaderLoading
,
successCallBack
(
data
)
{
},
},
...
...
@@ -287,7 +284,6 @@ export default {
filename
,
images
:
getFileType
(
fileType
).
filetype
==
1
?
[
filename
]
:
[],
type
:
getFileType
(
fileType
).
filetype
,
uploaderLoading
,
},
});
}
...
...
@@ -298,7 +294,7 @@ export default {
*
createCourseMateria
({
payload
},
{
call
,
put
,
select
})
{
const
{
sid
}
=
yield
select
(
state
=>
state
.
webapp
);
const
{
content
,
filename
,
type
,
uploaderLoading
,
images
,
content
,
filename
,
type
,
images
,
}
=
payload
;
const
createCourseMateriaData
=
yield
call
(
courseMateriaAjax
.
createMateria
,
{
school_id
:
sid
,
...
...
@@ -309,9 +305,11 @@ export default {
images
,
}),
});
setTimeout
(
uploaderLoading
);
const
{
code
,
data
,
msg
}
=
createCourseMateriaData
;
if
(
code
==
200
)
{
yield
call
(
uploadMateriaLoading
);
uploadMateriaLoading
=
null
;
message
.
success
(
'上传成功'
,
1
);
yield
put
({
type
:
'querymaterialist'
,
payload
:
{
...
...
src/models/onlineclasses.js
View file @
da35b936
...
...
@@ -336,6 +336,7 @@ export default {
audio
:
data
.
data
.
audio
,
content
:
data
.
data
.
content
,
password
:
data
.
data
.
password
,
poster
:
data
.
data
.
poster
,
},
coursewareInfo
:
JSON
.
parse
(
data
.
data
.
content
),
},
...
...
@@ -624,6 +625,16 @@ export default {
addCourseObj
:
{
...
addCourseObj
},
},
});
}
else
if
(
uploadtype
==
'uploadPoster'
)
{
yield
put
({
type
:
'updateState'
,
payload
:
{
addCourseObj
:
{
...
addCourseObj
,
poster
:
imageUrl
,
},
},
});
}
setTimeout
(
uploaderLoading
);
},
...
...
@@ -881,6 +892,7 @@ export default {
study_count
:
''
,
status
:
''
,
content
:
''
,
poster
:
''
,
},
addLoading
:
false
,
editLoading
:
false
,
...
...
src/pages/coursegather/detail/CourseDetail.js
View file @
da35b936
...
...
@@ -157,6 +157,16 @@ class CourseDetailForm extends React.Component {
},
});
}
toUploadPoster
=
(
e
)
=>
{
const
{
dispatch
}
=
this
.
props
;
dispatch
({
type
:
'coursegatherdetail/queryimagesignature'
,
payload
:
{
files
:
e
.
target
,
uploadtype
:
'uploadPoster'
,
},
});
}
deleteCover
=
()
=>
{
const
{
dispatch
}
=
this
.
props
;
dispatch
({
...
...
@@ -201,6 +211,18 @@ class CourseDetailForm extends React.Component {
},
});
}
deletePoster
=
()
=>
{
const
{
dispatch
,
addCourseObj
}
=
this
.
props
;
dispatch
({
type
:
'coursegatherdetail/updateState'
,
payload
:
{
addCourseObj
:
{
...
addCourseObj
,
poster
:
''
,
},
},
});
}
render
()
{
const
{
form
:
{
getFieldDecorator
,
getFieldValue
},
...
...
@@ -209,6 +231,7 @@ class CourseDetailForm extends React.Component {
materialVisible
,
materiaList
,
queryParams
,
choosePoster
,
materiaListTotal
,
toChangePsd
,
}
=
this
.
props
;
...
...
@@ -326,6 +349,34 @@ class CourseDetailForm extends React.Component {
</div>
}
</FormItem> */
}
<
FormItem
{...
formItemModalLineLayout
}
label
=
"宣传海报"
className
=
{
pageStyle
.
imgFormItem
}
>
{
!
addCourseObj
.
poster
?
<
div
className
=
{
pageStyle
.
posterWrap
}
>
<
div
className
=
{
pageStyle
.
posterUploadBox
}
onClick
=
{
choosePoster
}
>
<
img
src
=
{
`
${
__IMGCDN__
}
/course/check.png`
}
alt
=
"从素材库选择"
/>
<
div
className
=
{
pageStyle
.
tip
}
>
选择模板
<
/div
>
<
/div
>
<
div
className
=
{
pageStyle
.
posterUploadBox
}
>
<
img
src
=
{
`
${
__IMGCDN__
}
/course/uploadImg.png`
}
alt
=
"上传图片"
/>
<
div
className
=
{
pageStyle
.
tip
}
>
本地上传
<
/div
>
<
input
type
=
"file"
className
=
{
pageStyle
.
uploadInput
}
accept
=
"image/png, image/jpeg"
onChange
=
{(
e
)
=>
{
this
.
toUploadPoster
(
e
);
}}
/
>
<
/div
>
<
span
className
=
"ant-form-text"
>
图片建议格式位
JPG
/
PNG
,尺寸
750
*
982
,图片大小不超过
10
MB
<
/span
>
<
/div
>
:
<
div
className
=
{
pageStyle
.
posterWrap
}
>
<
div
className
=
{
pageStyle
.
photoPoster
}
>
<
img
src
=
{
imagify
(
addCourseObj
.
poster
)}
alt
=
"封面"
/>
<
Icon
onClick
=
{
this
.
deletePoster
}
className
=
{
pageStyle
.
posterDelete
}
type
=
"delete"
/>
<
/div
>
<
/div
>
}
<
/FormItem
>
<
FormItem
{...
formItemModalLineLayout
}
label
=
"课程介绍"
>
<
ThemeEditor
commentParams
=
{
addCourseObj
}
...
...
src/pages/coursegather/detail/CourseDetail.less
View file @
da35b936
...
...
@@ -154,3 +154,51 @@
cursor: pointer;
}
}
.posterWrap {
display: flex;
.posterUploadBox {
display: flex;
align-items: center;
width: 190px;
height: 64px;
position: relative;
background-color: #F9F9F9;
border-radius: 6px;
justify-content: center;
cursor: pointer;
&:first-child {
margin-right: 40px;
}
.uploadInput {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;
z-index: 5;
}
img {
width: 32px;
height: 32px;
display: block;
margin-right: 14px;
}
}
.photoPoster {
position: relative;
img {
width:170px;
height:222px;
border-radius:6px;
display: block;
}
.posterDelete {
font-size: 16px;
color: red;
position: absolute;
top: 0;
right: -30px;
}
}
}
\ No newline at end of file
src/pages/coursegather/detail/index.js
View file @
da35b936
...
...
@@ -8,7 +8,7 @@ import {
}
from
'dva/router'
;
import
$
from
'jquery'
;
import
{
connect
}
from
'dva'
;
import
{
List
,
Icon
,
DatePicker
,
Spin
,
Card
,
Button
,
Dropdown
,
Menu
,
Modal
}
from
'antd'
;
import
{
List
,
Icon
,
DatePicker
,
Spin
,
Card
,
Button
,
Dropdown
,
Menu
,
Modal
,
Col
,
Row
,
Radio
}
from
'antd'
;
import
pageStyle
from
'./index.less'
;
import
{
pageIn
,
getFileType
}
from
'../../../utils/index'
;
import
CourseBox
from
'./CourseBox'
;
...
...
@@ -26,6 +26,8 @@ class StaticCenter extends React.Component {
this
.
state
=
{
addWareType
:
1
,
// 1是批量操作时添加 2 单课添加课程
psdChangeShow
:
false
,
posterShow
:
false
,
choosedPoster
:
''
,
};
}
componentDidMount
()
{
// 挂载
...
...
@@ -698,6 +700,38 @@ class StaticCenter extends React.Component {
},
});
}
choosePoster
=
()
=>
{
this
.
setState
({
posterShow
:
true
,
});
}
closePoster
=
()
=>
{
this
.
setState
({
posterShow
:
false
,
choosedPoster
:
''
,
});
}
posterChange
=
(
e
)
=>
{
this
.
setState
({
choosedPoster
:
e
.
target
.
value
,
});
}
savePoster
=
()
=>
{
const
{
addCourseObj
,
dispatch
}
=
this
.
props
;
dispatch
({
type
:
'coursegatherdetail/updateState'
,
payload
:
{
addCourseObj
:
{
...
addCourseObj
,
poster
:
this
.
state
.
choosedPoster
,
},
},
});
this
.
setState
({
posterShow
:
false
,
choosedPoster
:
''
,
});
}
render
()
{
const
that
=
this
;
const
{
...
...
@@ -805,6 +839,7 @@ class StaticCenter extends React.Component {
/>
}
{
tabIndex
==
3
&&
<
CourseDetail
toChangePsd
=
{
this
.
toChangePsd
}
choosePoster
=
{
this
.
choosePoster
}
/>
}
{
tabIndex
==
4
&&
<
CommentList
/>
}
<
AddCourseModal
...
...
@@ -847,6 +882,38 @@ class StaticCenter extends React.Component {
info
=
{
addCourseObj
}
save
=
{
this
.
savePsd
}
/
>
<
Modal
visible
=
{
this
.
state
.
posterShow
}
title
=
"选择海报模板"
onOk
=
{
this
.
savePoster
}
onCancel
=
{
this
.
closePoster
}
width
=
{
800
}
>
<
Radio
.
Group
onChange
=
{
this
.
posterChange
}
value
=
{
this
.
state
.
choosedPoster
||
addCourseObj
.
poster
}
>
<
Row
className
=
{
`
${
pageStyle
.
posterSetBox
}
posterSetBox`
}
>
<
Col
span
=
{
6
}
style
=
{{
marginBottom
:
'10px'
}}
>
<
Radio
id
=
"1"
style
=
{{
display
:
'flex'
,
alignItems
:
'flex-start'
}}
value
=
"clock-test/member/12186/2019-11-26/f766995d6957b3ff91c983d97514986b.jpg"
>
<
img
className
=
{
pageStyle
.
posterImg
}
src
=
"https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-11-26/f766995d6957b3ff91c983d97514986b.jpg"
alt
=
""
/>
<
/Radio
>
<
/Col
>
<
Col
span
=
{
6
}
style
=
{{
marginBottom
:
'10px'
}}
>
<
Radio
id
=
"1"
style
=
{{
display
:
'flex'
,
alignItems
:
'flex-start'
}}
value
=
"clock-test/member/12186/2019-11-26/b8d7da24f8bd0a1efa23e0cab68efc64.jpg"
>
<
img
className
=
{
pageStyle
.
posterImg
}
src
=
"https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-11-26/b8d7da24f8bd0a1efa23e0cab68efc64.jpg"
alt
=
""
/>
<
/Radio
>
<
/Col
>
<
Col
span
=
{
6
}
style
=
{{
marginBottom
:
'10px'
}}
>
<
Radio
id
=
"1"
style
=
{{
display
:
'flex'
,
alignItems
:
'flex-start'
}}
value
=
"clock-test/member/12186/2019-11-26/0b6647b87af063e90288286cda9c7a1d.jpg"
>
<
img
className
=
{
pageStyle
.
posterImg
}
src
=
"https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-11-26/0b6647b87af063e90288286cda9c7a1d.jpg"
alt
=
""
/>
<
/Radio
>
<
/Col
>
<
Col
span
=
{
6
}
style
=
{{
marginBottom
:
'10px'
}}
>
<
Radio
id
=
"1"
style
=
{{
display
:
'flex'
,
alignItems
:
'flex-start'
}}
value
=
"clock-test/member/12186/2019-11-26/dcedfa5eb225dbb7f05ae729ae05a5d7.jpg"
>
<
img
className
=
{
pageStyle
.
posterImg
}
src
=
"https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-11-26/dcedfa5eb225dbb7f05ae729ae05a5d7.jpg"
alt
=
""
/>
<
/Radio
>
<
/Col
>
<
/Row
>
<
/Radio.Group
>
<
/Modal
>
<
/div
>
);
}
...
...
src/pages/coursegather/detail/index.less
View file @
da35b936
...
...
@@ -183,4 +183,29 @@
background-color: #EEEEEE;
}
}
}
.posterSetBox {
.posterImg {
width: 170px;
height: 220px;
display: block;
border-radius: 6px;
}
}
:global {
.posterSetBox {
.ant-radio-wrapper {
display: inline-block!important;
padding-right: 0;
.ant-radio {
position: absolute;
z-index: 5;
right: 10px;
top: 10px;
}
.ant-radio + *{
padding: 0;
}
}
}
}
\ No newline at end of file
src/pages/coursemateria/MediaCard.js
View file @
da35b936
...
...
@@ -26,12 +26,12 @@ class MediaCard extends React.Component {
return
(
<
div
className
=
{
pageStyle
.
box
}
{...
this
.
props
}
>
{
info
.
type
==
1
&&
<
div
className
=
{
`
${
pageStyle
.
mediaBox
}
${
pageStyle
.
imgBox
}
`
}
onClick
=
{()
=>
methods
.
preview
(
info
)}
>
<
div
className
=
{
`
${
pageStyle
.
mediaBox
}
${
pageStyle
.
imgBox
}
`
}
title
=
{
content
.
name
}
onClick
=
{()
=>
methods
.
preview
(
info
)}
>
<
img
className
=
{
pageStyle
.
image
}
src
=
{
`
${
imagify
(
info
.
src
)}
`
}
alt
=
""
/>
<
img
className
=
{
pageStyle
.
imageicon
}
src
=
{
`
${
__IMGCDN__
}
/course/photo_icon.png`
}
alt
=
""
/>
<
/div>
}
{
info
.
type
==
2
&&
<
div
className
=
{
`
${
pageStyle
.
mediaBox
}
${
pageStyle
.
videoBox
}
`
}
onClick
=
{()
=>
methods
.
preview
(
info
)}
>
<
div
className
=
{
`
${
pageStyle
.
mediaBox
}
${
pageStyle
.
videoBox
}
`
}
title
=
{
content
.
name
}
onClick
=
{()
=>
methods
.
preview
(
info
)}
>
<
img
className
=
{
pageStyle
.
videoposter
}
src
=
{
`
${
videoPoster
(
info
.
src
)}
`
}
alt
=
""
/>
<
img
className
=
{
pageStyle
.
videoicon
}
src
=
{
`
${
__IMGCDN__
}
/course/video_icon.png`
}
alt
=
""
/>
<
div
className
=
{
pageStyle
.
videoplay
}
>
...
...
@@ -39,12 +39,12 @@ class MediaCard extends React.Component {
<
/div
>
<
/div>
}
{
info
.
type
==
4
&&
<
div
className
=
{
`
${
pageStyle
.
mediaBox
}
${
pageStyle
.
fileBox
}
`
}
onClick
=
{()
=>
methods
.
preview
(
info
)}
>
<
div
className
=
{
`
${
pageStyle
.
mediaBox
}
${
pageStyle
.
fileBox
}
`
}
title
=
{
content
.
name
}
onClick
=
{()
=>
methods
.
preview
(
info
)}
>
<
img
className
=
{
pageStyle
.
fileIcon
}
src
=
{
`
${
__IMGCDN__
}
/course/ppt_icon.png`
}
alt
=
""
/>
<
div
className
=
{
pageStyle
.
fileName
}
>
{
content
.
name
}
<
/div
>
<
/div>
}
{
info
.
type
==
3
&&
<
div
className
=
{
`
${
pageStyle
.
mediaBox
}
${
pageStyle
.
audioBox
}
`
}
onClick
=
{()
=>
methods
.
preview
(
info
)}
>
<
div
className
=
{
`
${
pageStyle
.
mediaBox
}
${
pageStyle
.
audioBox
}
`
}
title
=
{
content
.
name
}
onClick
=
{()
=>
methods
.
preview
(
info
)}
>
<
img
className
=
{
pageStyle
.
audioIcon
}
src
=
{
`
${
__IMGCDN__
}
/course/audio_icon.png`
}
alt
=
""
/>
<
div
className
=
{
pageStyle
.
audioTime
}
>
{
voiceTimeFormat
(
content
.
duration
)}
<
/div
>
<
/div>
}
...
...
src/pages/onlineclasses/singleclass/CourseDetail.js
View file @
da35b936
...
...
@@ -267,6 +267,28 @@ class CourseDetailForm extends React.Component {
},
});
}
toUploadPoster
=
(
e
)
=>
{
const
{
dispatch
}
=
this
.
props
;
dispatch
({
type
:
'onlineclasses/queryimagesignature'
,
payload
:
{
files
:
e
.
target
,
uploadtype
:
'uploadPoster'
,
},
});
}
deletePoster
=
()
=>
{
const
{
dispatch
,
addCourseObj
}
=
this
.
props
;
dispatch
({
type
:
'onlineclasses/updateState'
,
payload
:
{
addCourseObj
:
{
...
addCourseObj
,
poster
:
''
,
},
},
});
}
render
()
{
const
{
form
:
{
getFieldDecorator
,
getFieldValue
},
...
...
@@ -279,6 +301,7 @@ class CourseDetailForm extends React.Component {
coursewareInfo
,
info
,
toChangePsd
,
choosePoster
,
}
=
this
.
props
;
const
formItemModalLineLayout
=
{
labelCol
:
{
...
...
@@ -413,6 +436,34 @@ class CourseDetailForm extends React.Component {
</div>
}
</FormItem> */
}
<
FormItem
{...
formItemModalLineLayout
}
label
=
"宣传海报"
className
=
{
pageStyle
.
imgFormItem
}
>
{
!
addCourseObj
.
poster
?
<
div
className
=
{
pageStyle
.
posterWrap
}
>
<
div
className
=
{
pageStyle
.
posterUploadBox
}
onClick
=
{
choosePoster
}
>
<
img
src
=
{
`
${
__IMGCDN__
}
/course/check.png`
}
alt
=
"从素材库选择"
/>
<
div
className
=
{
pageStyle
.
tip
}
>
选择模板
<
/div
>
<
/div
>
<
div
className
=
{
pageStyle
.
posterUploadBox
}
>
<
img
src
=
{
`
${
__IMGCDN__
}
/course/uploadImg.png`
}
alt
=
"上传图片"
/>
<
div
className
=
{
pageStyle
.
tip
}
>
本地上传
<
/div
>
<
input
type
=
"file"
className
=
{
pageStyle
.
uploadInput
}
accept
=
"image/png, image/jpeg"
onChange
=
{(
e
)
=>
{
this
.
toUploadPoster
(
e
);
}}
/
>
<
/div
>
<
span
className
=
"ant-form-text"
>
图片建议格式位
JPG
/
PNG
,尺寸
750
*
982
,图片大小不超过
10
MB
<
/span
>
<
/div
>
:
<
div
className
=
{
pageStyle
.
posterWrap
}
>
<
div
className
=
{
pageStyle
.
photoPoster
}
>
<
img
src
=
{
imagify
(
addCourseObj
.
poster
)}
alt
=
"封面"
/>
<
Icon
onClick
=
{
this
.
deletePoster
}
className
=
{
pageStyle
.
posterDelete
}
type
=
"delete"
/>
<
/div
>
<
/div
>
}
<
/FormItem
>
<
FormItem
{...
formItemModalLineLayout
}
label
=
"课程介绍"
>
<
ThemeEditor
commentParams
=
{
addCourseObj
}
...
...
src/pages/onlineclasses/singleclass/CourseDetail.less
View file @
da35b936
...
...
@@ -156,3 +156,51 @@
cursor: pointer;
}
}
.posterWrap {
display: flex;
.posterUploadBox {
display: flex;
align-items: center;
width: 190px;
height: 64px;
position: relative;
background-color: #F9F9F9;
border-radius: 6px;
justify-content: center;
cursor: pointer;
&:first-child {
margin-right: 40px;
}
.uploadInput {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;
z-index: 5;
}
img {
width: 32px;
height: 32px;
display: block;
margin-right: 14px;
}
}
.photoPoster {
position: relative;
img {
width:170px;
height:222px;
border-radius:6px;
display: block;
}
.posterDelete {
font-size: 16px;
color: red;
position: absolute;
top: 0;
right: -30px;
}
}
}
\ No newline at end of file
src/pages/onlineclasses/singleclass/singleDetail.js
View file @
da35b936
...
...
@@ -36,6 +36,8 @@ class singleDetailForm extends React.Component {
super
(
props
);
this
.
state
=
{
psdChangeShow
:
false
,
posterShow
:
false
,
choosedPoster
:
''
,
};
}
componentDidMount
()
{
// 挂载
...
...
@@ -173,6 +175,38 @@ class singleDetailForm extends React.Component {
callback
();
}
}
choosePoster
=
()
=>
{
this
.
setState
({
posterShow
:
true
,
});
}
closePoster
=
()
=>
{
this
.
setState
({
posterShow
:
false
,
choosedPoster
:
''
,
});
}
posterChange
=
(
e
)
=>
{
this
.
setState
({
choosedPoster
:
e
.
target
.
value
,
});
}
savePoster
=
()
=>
{
const
{
addCourseObj
,
dispatch
}
=
this
.
props
;
dispatch
({
type
:
'onlineclasses/updateState'
,
payload
:
{
addCourseObj
:
{
...
addCourseObj
,
poster
:
this
.
state
.
choosedPoster
,
},
},
});
this
.
setState
({
posterShow
:
false
,
choosedPoster
:
''
,
});
}
render
()
{
const
{
form
:
{
getFieldDecorator
,
getFieldValue
},
...
...
@@ -220,6 +254,7 @@ class singleDetailForm extends React.Component {
<
TabPane
tab
=
"课程详情"
key
=
"1"
>
<
CourseDetail
toChangePsd
=
{
this
.
toChangePsd
}
choosePoster
=
{
this
.
choosePoster
}
/
>
<
/TabPane
>
<
TabPane
tab
=
"数据分析"
key
=
"2"
>
...
...
@@ -249,6 +284,38 @@ class singleDetailForm extends React.Component {
info
=
{
addCourseObj
}
save
=
{
this
.
savePsd
}
/
>
<
Modal
visible
=
{
this
.
state
.
posterShow
}
title
=
"选择海报模板"
onOk
=
{
this
.
savePoster
}
onCancel
=
{
this
.
closePoster
}
width
=
{
800
}
>
<
Radio
.
Group
onChange
=
{
this
.
posterChange
}
value
=
{
this
.
state
.
choosedPoster
||
addCourseObj
.
poster
}
>
<
Row
className
=
{
`
${
pageStyle
.
posterSetBox
}
posterSetBox`
}
>
<
Col
span
=
{
6
}
style
=
{{
marginBottom
:
'10px'
}}
>
<
Radio
id
=
"1"
style
=
{{
display
:
'flex'
,
alignItems
:
'flex-start'
}}
value
=
"clock-test/member/12186/2019-11-26/f766995d6957b3ff91c983d97514986b.jpg"
>
<
img
className
=
{
pageStyle
.
posterImg
}
src
=
"https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-11-26/f766995d6957b3ff91c983d97514986b.jpg"
alt
=
""
/>
<
/Radio
>
<
/Col
>
<
Col
span
=
{
6
}
style
=
{{
marginBottom
:
'10px'
}}
>
<
Radio
id
=
"1"
style
=
{{
display
:
'flex'
,
alignItems
:
'flex-start'
}}
value
=
"clock-test/member/12186/2019-11-26/b8d7da24f8bd0a1efa23e0cab68efc64.jpg"
>
<
img
className
=
{
pageStyle
.
posterImg
}
src
=
"https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-11-26/b8d7da24f8bd0a1efa23e0cab68efc64.jpg"
alt
=
""
/>
<
/Radio
>
<
/Col
>
<
Col
span
=
{
6
}
style
=
{{
marginBottom
:
'10px'
}}
>
<
Radio
id
=
"1"
style
=
{{
display
:
'flex'
,
alignItems
:
'flex-start'
}}
value
=
"clock-test/member/12186/2019-11-26/0b6647b87af063e90288286cda9c7a1d.jpg"
>
<
img
className
=
{
pageStyle
.
posterImg
}
src
=
"https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-11-26/0b6647b87af063e90288286cda9c7a1d.jpg"
alt
=
""
/>
<
/Radio
>
<
/Col
>
<
Col
span
=
{
6
}
style
=
{{
marginBottom
:
'10px'
}}
>
<
Radio
id
=
"1"
style
=
{{
display
:
'flex'
,
alignItems
:
'flex-start'
}}
value
=
"clock-test/member/12186/2019-11-26/dcedfa5eb225dbb7f05ae729ae05a5d7.jpg"
>
<
img
className
=
{
pageStyle
.
posterImg
}
src
=
"https://cdn.img.shangjiadao.cn/clock-test/member/12186/2019-11-26/dcedfa5eb225dbb7f05ae729ae05a5d7.jpg"
alt
=
""
/>
<
/Radio
>
<
/Col
>
<
/Row
>
<
/Radio.Group
>
<
/Modal
>
<
/div
>
);
}
...
...
src/pages/onlineclasses/singleclass/singleDetail.less
View file @
da35b936
...
...
@@ -62,3 +62,28 @@
border-radius: 4px;
margin-left: 10px;
}
.posterSetBox {
.posterImg {
width: 170px;
height: 220px;
display: block;
border-radius: 6px;
}
}
:global {
.posterSetBox {
.ant-radio-wrapper {
display: inline-block!important;
padding-right: 0;
.ant-radio {
position: absolute;
z-index: 5;
right: 10px;
top: 10px;
}
.ant-radio + *{
padding: 0;
}
}
}
}
\ No newline at end of file
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