Skip to content

X
xiaomai-cloud-class-web
Commit 2021ecd0 by wufan
Options

Merge branch 'feature/zhangleyuan/20210610/img-show' into 'master' 

Feature/zhangleyuan/20210610/img show

See merge request !42
parents f93b6906 d7da5cd2
Showing with 357 additions and 142 deletions
src/domains/basic-domain/constants.ts
/* /*
* @Author: 陈剑宇 * @Author: 陈剑宇
* @Date: 2020-05-07 14:43:01 * @Date: 2020-05-07 14:43:01
* @LastEditTime: 2021-05-28 15:20:40 * @LastEditTime: 2021-06-11 16:44:17
* @LastEditors: fusanqiasng * @LastEditors: Please set LastEditors
* @Description: * @Description:
* @FilePath: /wheat-web-demo/src/domains/basic-domain/constants.ts * @FilePath: /wheat-web-demo/src/domains/basic-domain/constants.ts
*/ */
......
src/domains/course-domain/constants.ts
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-20 09:21:40 * @Date: 2020-08-20 09:21:40
* @LastEditors: zhangleyuan * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-02-20 17:08:58 * @LastEditTime: 2021-06-11 15:17:56
* @Description: * @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
......
src/modules/course-manage/graphics-course/components/GraphicsCourseList.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:12:45 * @Date: 2020-08-05 10:12:45
* @LastEditors: yuananting * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-02 15:05:54 * @LastEditTime: 2021-06-15 20:01:05
* @Description: 视频课-列表模块 * @Description: 视频课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
......
src/modules/course-manage/modal/ShareLiveModal.jsx
...@@ -52,6 +52,13 @@ class ShareLiveModal extends React.Component { ...@@ -52,6 +52,13 @@ class ShareLiveModal extends React.Component {
size: 98, size: 98,
}) })
qrcodeWrapDom.appendChild(qrcodeNode) qrcodeWrapDom.appendChild(qrcodeNode)
const qrcodeWrapDomDownload = document.querySelector('#qrcodeWrap-dowload')
const qrcodeNodeDownLoad = new qrcode({
text: this.state.shareUrl,
size: 196,
})
qrcodeWrapDomDownload.appendChild(qrcodeNodeDownLoad)
} }
) )
}) })
...@@ -72,13 +79,12 @@ class ShareLiveModal extends React.Component { ...@@ -72,13 +79,12 @@ class ShareLiveModal extends React.Component {
() => { () => {
this.setState({ time: new Date().valueOf() }, () => { this.setState({ time: new Date().valueOf() }, () => {
setTimeout(() => { setTimeout(() => {
let node = document.getElementById('poster') let node = document.getElementById('poster-dowload')
domtoimage.toPng(node).then((imgData) => { domtoimage.toPng(node).then((imgData) => {
console.log(imgData) console.log(imgData)
const download = document.createElement('a') const download = document.createElement('a')
const { courseName } = this.props.data const { courseName } = this.props.data
$(download).attr('href', imgData).attr('download', `${courseName}.png`).get(0).click() $(download).attr('href', imgData).attr('download', `${courseName}.png`).get(0).click()
// this.props.close()
}) })
}, 1000) }, 1000)
}) })
...@@ -158,6 +164,29 @@ class ShareLiveModal extends React.Component { ...@@ -158,6 +164,29 @@ class ShareLiveModal extends React.Component {
<div className='qrcode-wrap__right' id='qrcodeWrap'></div> <div className='qrcode-wrap__right' id='qrcodeWrap'></div>
</div> </div>
</div> </div>
<div id='poster-dowload'>
<div className='store-name'>
<span className='text'>{User.getStoreName()}</span>
</div>
<div className='course-name-title'>{type === 'videoClass' ? `${courseName}开课啦` : `邀请你观看直播：`}</div>
{type === 'liveClass' && <div class='live-couse-name'>{courseName}</div>}
<Choose>
<When condition={showImg}>
<img crossOrigin='*' src={coverImgSrc + `?=${time}`} className='course-cover' alt='' />
</When>
<Otherwise>
<img src={coverImgSrc + `?=${time}`} className='course-cover' alt='' />
</Otherwise>
</Choose>
<div className='qrcode-wrap'>
<div className='qrcode-wrap__left'>
<div className='text'>长按识别二维码进入观看</div>
<img className='finger' src='https://image.xiaomaiketang.com/xm/thpkWDwJsC.png' alt='' />
</div>
<div className='qrcode-wrap__right' id='qrcodeWrap-dowload'></div>
</div>
</div>
</div> </div>
<div className='right'> <div className='right'>
<div className='share-poster right__item'> <div className='share-poster right__item'>
......
src/modules/course-manage/modal/ShareLiveModal.less
.share-live-modal { .share-live-modal {
.ant-modal-body { .ant-modal-body {
display: flex; display: flex;
#poster{ height:510px !important;
background: #FFF; overflow: hidden !important;
margin:0;
padding: 20px;
}
.left { .left {
width: 303px; width: 303px;
margin: 0 32px 0 16px; margin: 0 32px 0 16px;
box-shadow:0px 2px 10px 0px rgba(0,0,0,0.05); box-shadow:0px 2px 10px 0px rgba(0,0,0,0.05);
border-radius: 12px; border-radius: 12px;
#poster{
.course-name-title { background: #FFF;
font-size: 14px; margin:0;
color: #333; padding: 20px;
line-height: 20px; margin-bottom:140px;
margin-bottom: 4px; .course-name-title {
} font-size: 14px;
.live-couse-name{
font-size:16px;
color:#333333;
font-weight: 600;
}
.course-name {
color: #333; color: #333;
font-size: 16px;
font-weight: 600;
line-height: 20px; line-height: 20px;
} margin-bottom: 4px;
}
.course-cover { .live-couse-name{
width: 263px; font-size:16px;
height: 143px; color:#333333;
border-radius: 6px; font-weight: 600;
margin-top: 8px; }
} .course-name {
color: #333;
font-size: 16px;
font-weight: 600;
line-height: 20px;
}
.course-cover {
width: 263px;
height: 143px;
border-radius: 6px;
margin-top: 8px;
}
.qrcode-wrap { .qrcode-wrap {
padding: 0 16px; padding: 0 16px;
display: flex; display: flex;
align-items: center; align-items: center;
margin: 24px 0 16px 0; margin: 24px 0 16px 0;
&__left { &__left {
width: 98px; width: 98px;
text-align: center; text-align: center;
margin-right: 22px; margin-right: 22px;
.text { .text {
line-height: 20px; line-height: 20px;
}
.finger {
width: 40px;
height: 40px;
margin-top: 8px;
}
} }
.finger { &__right {
width: 40px; width: 110px;
height: 40px; height: 110px;
margin-top: 8px; padding: 6px
} }
} }
&__right { .store-name {
width: 110px; // padding: 8px 16px;
height: 110px; display: flex;
padding: 6px align-items: center;
margin-bottom: 8px;
.text {
font-size: 12px;
color: #999;
font-size: 14px;
line-height: 20px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%;
}
} }
} }
#poster-dowload{
.store-name { background: #FFF;
// padding: 8px 16px; margin:0;
display: flex; padding: 40px;
align-items: center; width:606px;
.course-name-title {
font-size: 28px;
color: #333;
line-height: 40px;
margin-bottom: 8px; margin-bottom: 8px;
.text { }
font-size: 12px; .live-couse-name{
color: #999; font-size:32px;
font-size: 14px; color:#333333;
line-height: 20px; font-weight: 600;
text-overflow: ellipsis; }
overflow: hidden; .course-name {
white-space: nowrap; color: #333;
width: 100%; font-size: 32px;
font-weight: 600;
line-height: 40px;
}
.course-cover {
width: 526px;
height: 286px;
border-radius: 6px;
margin-top: 16px;
}
.qrcode-wrap {
padding: 0 32px;
display: flex;
align-items: center;
margin: 48px 0 32px 0;
&__left {
width: 196px;
text-align: center;
margin-right: 44px;
.text {
line-height: 40px;
}
.finger {
width: 80px;
height: 80px;
margin-top: 16px;
}
}
&__right {
width: 220px;
height: 220px;
padding: 12px
}
}
.store-name {
// padding: 8px 16px;
display: flex;
align-items: center;
margin-bottom: 16px;
.text {
font-size: 24px;
color: #999;
font-size: 28px;
line-height: 40px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%;
}
} }
} }
} }
.right { .right {
.title { .title {
color: #333; color: #333;
......
src/modules/course-manage/offline-course/components/OfflineCourseList.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:12:45 * @Date: 2020-08-05 10:12:45
* @LastEditors: yuananting * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-02 16:15:55 * @LastEditTime: 2021-06-11 16:44:42
* @Description: 视频课-列表模块 * @Description: 视频课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
......
src/modules/knowledge-base/components/KnowledgeBaseList.jsx
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
* @Description: * @Description:
* @Author: zangsuyun * @Author: zangsuyun
* @Date: 2021-03-12 14:49:40 * @Date: 2021-03-12 14:49:40
* @LastEditors: wufan * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-05-30 20:37:42 * @LastEditTime: 2021-06-11 16:44:59
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
......
src/modules/plan-manage/modal/SharePlanModal.jsx
...@@ -51,6 +51,13 @@ class ShareLiveModal extends React.Component { ...@@ -51,6 +51,13 @@ class ShareLiveModal extends React.Component {
size: 98, size: 98,
}) })
qrcodeWrapDom.appendChild(qrcodeNode) qrcodeWrapDom.appendChild(qrcodeNode)
const qrcodeWrapDomDownload = document.querySelector('#qrcodeWrap-dowload')
const qrcodeNodeDownLoad = new qrcode({
text: this.state.shareUrl,
size: 196,
})
qrcodeWrapDomDownload.appendChild(qrcodeNodeDownLoad)
} }
) )
}) })
...@@ -70,9 +77,8 @@ class ShareLiveModal extends React.Component { ...@@ -70,9 +77,8 @@ class ShareLiveModal extends React.Component {
}, },
() => { () => {
this.setState({ time: new Date().valueOf() }, () => { this.setState({ time: new Date().valueOf() }, () => {
let node = document.getElementById('poster') let node = document.getElementById('poster-dowload')
domtoimage.toPng(node).then((imgData) => { domtoimage.toPng(node).then((imgData) => {
console.log(imgData)
const download = document.createElement('a') const download = document.createElement('a')
const { planName } = this.props.data const { planName } = this.props.data
$(download).attr('href', imgData).attr('download', `${planName}.png`).get(0).click() $(download).attr('href', imgData).attr('download', `${planName}.png`).get(0).click()
...@@ -112,7 +118,7 @@ class ShareLiveModal extends React.Component { ...@@ -112,7 +118,7 @@ class ShareLiveModal extends React.Component {
<div className='course-name-title'>邀请你参与培训：</div> <div className='course-name-title'>邀请你参与培训：</div>
<div class='live-couse-name'>{planName}</div> <div className='live-couse-name'>{planName}</div>
<Choose> <Choose>
<When condition={showImg}> <When condition={showImg}>
<img crossOrigin='*' src={coverUrl + `?=${time}`} className='course-cover' alt='' /> <img crossOrigin='*' src={coverUrl + `?=${time}`} className='course-cover' alt='' />
...@@ -130,6 +136,31 @@ class ShareLiveModal extends React.Component { ...@@ -130,6 +136,31 @@ class ShareLiveModal extends React.Component {
<div className='qrcode-wrap__right' id='qrcodeWrap'></div> <div className='qrcode-wrap__right' id='qrcodeWrap'></div>
</div> </div>
</div> </div>
<div id='poster-dowload'>
<div className='store-name'>
<span className='text'>{User.getStoreName()}</span>
</div>
<div className='course-name-title'>邀请你参与培训：</div>
<div className='live-couse-name'>{planName}</div>
<Choose>
<When condition={showImg}>
<img crossOrigin='*' src={coverUrl + `?=${time}`} className='course-cover' alt='' />
</When>
<Otherwise>
<img src={coverUrl + `?=${time}`} className='course-cover' alt='' />
</Otherwise>
</Choose>
<div className='qrcode-wrap'>
<div className='qrcode-wrap__left'>
<div className='text'>长按识别二维码进入观看</div>
<img className='finger' src='https://image.xiaomaiketang.com/xm/thpkWDwJsC.png' alt='' />
</div>
<div className='qrcode-wrap__right' id='qrcodeWrap-dowload'></div>
</div>
</div>
</div> </div>
<div className='right'> <div className='right'>
<div className='share-poster right__item'> <div className='share-poster right__item'>
......
src/modules/plan-manage/modal/SharePlanModal.less
.share-live-modal { .share-live-modal {
.ant-modal-body { .ant-modal-body {
display: flex; display: flex;
#poster{ height:510px !important;
background: #FFF; overflow: hidden !important;
margin:0;
padding: 20px;
}
.left { .left {
width: 303px; width: 303px;
margin: 0 32px 0 16px; margin: 0 32px 0 16px;
box-shadow:0px 2px 10px 0px rgba(0,0,0,0.05); box-shadow:0px 2px 10px 0px rgba(0,0,0,0.05);
border-radius: 12px; border-radius: 12px;
#poster{
.course-name-title { background: #FFF;
font-size: 14px; margin:0;
color: #333; padding: 20px;
line-height: 20px; margin-bottom:140px;
margin-bottom: 4px; .course-name-title {
} font-size: 14px;
.live-couse-name{ color: #333;
font-size:16px; line-height: 20px;
color:#333333; margin-bottom: 4px;
font-weight: 600; }
} .live-couse-name{
.course-name { font-size:16px;
color: #333; color:#333333;
font-size: 16px; font-weight: 600;
font-weight: 600; }
line-height: 20px; .course-name {
} color: #333;
font-size: 16px;
.course-cover { font-weight: 600;
width: 263px; line-height: 20px;
height: 143px; }
border-radius: 6px;
margin-top: 8px; .course-cover {
} width: 263px;
height: 143px;
border-radius: 6px;
margin-top: 8px;
}
.qrcode-wrap { .qrcode-wrap {
padding: 0 16px; padding: 0 16px;
display: flex; display: flex;
align-items: center; align-items: center;
margin: 24px 0 16px 0; margin: 24px 0 16px 0;
&__left { &__left {
width: 98px; width: 98px;
text-align: center; text-align: center;
margin-right: 22px; margin-right: 22px;
.text { .text {
line-height: 20px; line-height: 20px;
}
.finger {
width: 40px;
height: 40px;
margin-top: 8px;
}
} }
.finger { &__right {
width: 40px; width: 110px;
height: 40px; height: 110px;
margin-top: 8px; padding: 6px
} }
} }
&__right { .store-name {
width: 110px; // padding: 8px 16px;
height: 110px; display: flex;
padding: 6px align-items: center;
margin-bottom: 8px;
.text {
font-size: 12px;
color: #999;
font-size: 14px;
line-height: 20px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%;
}
} }
} }
#poster-dowload{
background: #FFF;
margin:0;
padding: 40px;
width:606px;
.course-name-title {
font-size: 28px;
color: #333;
line-height: 40px;
margin-bottom: 8px;
}
.live-couse-name{
font-size:32px;
color:#333333;
font-weight: 600;
}
.course-name {
color: #333;
font-size: 32px;
font-weight: 600;
line-height: 40px;
}
.course-cover {
width: 526px;
height: 286px;
border-radius: 6px;
margin-top: 16px;
}
.store-name { .qrcode-wrap {
// padding: 8px 16px; padding: 0 32px;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 8px; margin: 48px 0 32px 0;
.text {
font-size: 12px; &__left {
color: #999; width: 196px;
font-size: 14px; text-align: center;
line-height: 20px; margin-right: 44px;
text-overflow: ellipsis;
overflow: hidden; .text {
white-space: nowrap; line-height: 40px;
width: 100%; }
.finger {
width: 80px;
height: 80px;
margin-top: 16px;
}
}
&__right {
width: 220px;
height: 220px;
padding: 12px
}
}
.store-name {
// padding: 8px 16px;
display: flex;
align-items: center;
margin-bottom: 16px;
.text {
font-size: 12px;
color: #999;
font-size: 28px;
line-height: 40px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%;
}
} }
} }
} }
......
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