Skip to content

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

feat:修改分享图片模糊的问题

parent c332cb19
Showing with 198 additions and 80 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
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:12:45 * @Date: 2020-08-05 10:12:45
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-05-27 20:13:53 * @LastEditTime: 2021-06-11 16:44:31
* @Description: 视频课-列表模块 * @Description: 视频课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
......
src/modules/course-manage/modal/ShareLiveModal.jsx
...@@ -54,6 +54,13 @@ class ShareLiveModal extends React.Component { ...@@ -54,6 +54,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)
} }
) )
}) })
...@@ -74,13 +81,12 @@ class ShareLiveModal extends React.Component { ...@@ -74,13 +81,12 @@ class ShareLiveModal extends React.Component {
() => { () => {
this.setState({ time: new Date().valueOf() }, () => { this.setState({ time: new Date().valueOf() }, () => {
setTimeout(() => { setTimeout(() => {
let node = document.getElementById('poster2') 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)
}) })
...@@ -156,7 +162,7 @@ class ShareLiveModal extends React.Component { ...@@ -156,7 +162,7 @@ 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='poster2'> <div id='poster-dowload'>
<div className='store-name'> <div className='store-name'>
<span className='text'>{User.getStoreName()}</span> <span className='text'>{User.getStoreName()}</span>
</div> </div>
...@@ -176,7 +182,7 @@ class ShareLiveModal extends React.Component { ...@@ -176,7 +182,7 @@ class ShareLiveModal extends React.Component {
<div className='text'>长按识别二维码进入观看</div> <div className='text'>长按识别二维码进入观看</div>
<img className='finger' src='https://image.xiaomaiketang.com/xm/thpkWDwJsC.png' alt='' /> <img className='finger' src='https://image.xiaomaiketang.com/xm/thpkWDwJsC.png' alt='' />
</div> </div>
<div className='qrcode-wrap__right' id='qrcodeWrap'></div> <div className='qrcode-wrap__right' id='qrcodeWrap-dowload'></div>
</div> </div>
</div> </div>
</div> </div>
......
src/modules/course-manage/modal/ShareLiveModal.less
.share-live-modal { .share-live-modal {
.ant-modal-body { .ant-modal-body {
display: flex; display: flex;
height:70vh !important;
overflow: hidden !important;
.left { .left {
width: 303px; width: 303px;
margin: 0 32px 0 16px; margin: 0 32px 0 16px;
...@@ -10,6 +12,7 @@ ...@@ -10,6 +12,7 @@
background: #FFF; background: #FFF;
margin:0; margin:0;
padding: 20px; padding: 20px;
margin-bottom:140px;
.course-name-title { .course-name-title {
font-size: 14px; font-size: 14px;
color: #333; color: #333;
...@@ -81,7 +84,7 @@ ...@@ -81,7 +84,7 @@
} }
} }
} }
#poster2{ #poster-dowload{
background: #FFF; background: #FFF;
margin:0; margin:0;
padding: 40px; padding: 40px;
......
src/modules/course-manage/offline-course/components/OfflineCourseList.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:12:45 * @Date: 2020-08-05 10:12:45
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-05-27 20:14:01 * @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:70vh !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