Skip to content

X
xiaomai-cloud-class-web
Commit a0744081 by guomingpang
Options

fix:修改分享培训计划 学院名称缓存问题

parent f2b70b05
Showing with 103 additions and 99 deletions
src/modules/plan-manage/modal/SharePlanModal.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-07-20 19:12:49 * @Date: 2020-07-20 19:12:49
* @Last Modified by: 吴文洁 * @Last Modified by: 吴文洁
* @Last Modified time: 2020-07-20 20:25:13 * @Last Modified time: 2020-07-20 20:25:13
* @Description: 大班直播分享弹窗 * @Description: 大班直播分享弹窗
*/ */
import React from 'react'; import React from 'react'
import { Modal, Input, Button, message } from 'antd'; import { Modal, Button, message } from 'antd'
import domtoimage from 'dom-to-image'; import domtoimage from 'dom-to-image'
import qrcode from "@/libs/qrcode/qrcode.js"; import qrcode from '@/libs/qrcode/qrcode.js'
import User from '@/common/js/user'; import User from '@/common/js/user'
import $ from 'jquery'; import $ from 'jquery'
import CourseService from "@/domains/course-domain/CourseService"; import CourseService from '@/domains/course-domain/CourseService'
import './SharePlanModal.less'; import './SharePlanModal.less'
const storeName = User.getStoreName(); const DEFAULT_COVER = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'
const DEFAULT_COVER = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
class ShareLiveModal extends React.Component { class ShareLiveModal extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { this.state = {
shareUrl: '' shareUrl: '',
} }
} }
componentDidMount() { componentDidMount() {
// 获取短链接 // 获取短链接
this.handleConvertShortUrl(); this.handleConvertShortUrl()
} }
handleConvertShortUrl = () => { handleConvertShortUrl = () => {
const { longUrl } = this.props.data; const { longUrl } = this.props.data
// 发请求 // 发请求
CourseService.getQrcode({ CourseService.getQrcode({
urls: [longUrl] urls: [longUrl],
}).then((res) => { }).then((res) => {
const { result = [] } = res; const { result = [] } = res
this.setState({ this.setState(
shareUrl: result[0].shortUrl {
}, () => { shareUrl: result[0].shortUrl,
const qrcodeWrapDom = document.querySelector('#qrcodeWrap'); },
const qrcodeNode = new qrcode({ () => {
text: this.state.shareUrl, const qrcodeWrapDom = document.querySelector('#qrcodeWrap')
size: 98, const qrcodeNode = new qrcode({
}) text: this.state.shareUrl,
qrcodeWrapDom.appendChild(qrcodeNode); size: 98,
}); })
qrcodeWrapDom.appendChild(qrcodeNode)
}
)
}) })
} }
componentWillUnmount() { componentWillUnmount() {
// 页面销毁之前清空定时器 // 页面销毁之前清空定时器
clearTimeout(this.timer); clearTimeout(this.timer)
} }
// 下载海报 // 下载海报
handleDownloadPoster = () => { handleDownloadPoster = () => {
this.setState({ this.setState(
showImg:true, {
time:new Date().valueOf() showImg: true,
},()=>{ time: new Date().valueOf(),
this.setState({time:new Date().valueOf()},()=>{ },
let node = document.getElementById('poster'); () => {
domtoimage.toPng(node) this.setState({ time: new Date().valueOf() }, () => {
.then((imgData) => { let node = document.getElementById('poster')
domtoimage.toPng(node).then((imgData) => {
console.log(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()
}) })
}) })
}) }
)
} }
// 复制分享链接 // 复制分享链接
handleCopy = () => { handleCopy = () => {
const textContent = document.getElementById('shareUrl').innerText; const textContent = document.getElementById('shareUrl').innerText
window.copyText(textContent); window.copyText(textContent)
message.success('复制成功!'); message.success('复制成功!')
} }
render() { render() {
const {data} = this.props; const { data } = this.props
const { planName, coverUrl = DEFAULT_COVER} = data; const { planName, coverUrl = DEFAULT_COVER } = data
const { shareUrl,showImg,time} = this.state; const { shareUrl, showImg, time } = this.state
return ( return (
<Modal <Modal
title={'分享培训计划'} title={'分享培训计划'}
...@@ -100,58 +101,61 @@ class ShareLiveModal extends React.Component { ...@@ -100,58 +101,61 @@ class ShareLiveModal extends React.Component {
visible={true} visible={true}
footer={null} footer={null}
maskClosable={false} maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}
className="share-live-modal" className='share-live-modal'
onCancel={this.props.close} onCancel={this.props.close}>
> <div className='left'>
<div className="left"> <div id='poster'>
<div id="poster"> <div className='store-name'>
<div className="store-name"> <span className='text'>{User.getStoreName()}</span>
<span className="text">{storeName}</span>
</div>
<div className="course-name-title">邀请你参与培训：</div>
<div class="live-couse-name">{planName}</div>
{
showImg ? <img
crossOrigin='*'
src={coverUrl+`?=${time}`}
className="course-cover"
/>: <img
src={coverUrl+`?=${time}`}
className="course-cover"
/>
}
<div className="qrcode-wrap">
<div className="qrcode-wrap__left">
<div className="text">长按识别二维码进入观看</div>
<img className="finger" src="https://image.xiaomaiketang.com/xm/thpkWDwJsC.png"/>
</div> </div>
<div className="qrcode-wrap__right" id="qrcodeWrap">
<div className='course-name-title'>邀请你参与培训：</div>
<div class='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'></div>
</div> </div>
</div> </div>
</div> </div>
</div> <div className='right'>
<div className="right"> <div className='share-poster right__item'>
<div className="share-poster right__item"> <div className='title'>① 海报分享</div>
<div className="title">① 海报分享</div> <div className='sub-title'>学员可通过微信扫描海报二维码，查看培训计划</div>
<div className="sub-title">学员可通过微信扫描海报二维码，查看培训计划</div> <div className='content' onClick={this.handleDownloadPoster}>
<div className="content" onClick={this.handleDownloadPoster}>下载海报</div> 下载海报
</div> </div>
</div>
<div className="share-url right__item"> <div className='share-url right__item'>
<div className="title">② 链接分享</div> <div className='title'>② 链接分享</div>
<div className="sub-title">学员可通过微信或浏览器打开以下链接，查看培训计划</div> <div className='sub-title'>学员可通过微信或浏览器打开以下链接，查看培训计划</div>
<div className="content url-content"> <div className='content url-content'>
<div className="share-url" id="shareUrl">{shareUrl}</div> <div className='share-url' id='shareUrl'>
<Button type="primary" onClick={this.handleCopy}>复制</Button> {shareUrl}
</div>
<Button type='primary' onClick={this.handleCopy}>
复制
</Button>
</div>
</div> </div>
</div> </div>
</div>
</Modal> </Modal>
) )
} }
} }
export default ShareLiveModal; export default ShareLiveModal
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