Skip to content

M
mr-julyedu
Commit f9e31271 by zhanghaozhe
Options

海报页奖品

parent d9f3127f
Showing with 407 additions and 41 deletions
src/components/activity/give-courses/share-content/index.js
...@@ -4,18 +4,21 @@ import Poster from "./poster/poster" ...@@ -4,18 +4,21 @@ import Poster from "./poster/poster"
import Prizes from './prizes/prizes' import Prizes from './prizes/prizes'
class ShareContent extends Component { class ShareContent extends Component {
state = { state = {
activeIndex: 0, activeIndex: 0,
tabs: ['分享海报', '活动奖品'] tabs: ['分享海报', '活动奖品'],
poster: '',
rankingList: []
} }
render() { render() {
const { const {
tabs, tabs,
activeIndex activeIndex,
poster,
rankingList
} = this.state } = this.state
return ( return (
<div id={'share-content'}> <div id={'share-content'}>
...@@ -23,13 +26,21 @@ class ShareContent extends Component { ...@@ -23,13 +26,21 @@ class ShareContent extends Component {
{ {
tabs.map((item, index) => { tabs.map((item, index) => {
return ( return (
<li key={index} className={activeIndex === index ? 'active' : ''} onClick={() => {this.setState({activeIndex: index})}}>{item}</li> <li key={index} className={activeIndex === index ? 'active' : ''} onClick={() => {
this.setState({activeIndex: index})
}}>{item}</li>
) )
}) })
} }
</ul> </ul>
{ {
activeIndex === 0 ? <Poster/> : <Prizes/> activeIndex === 0
? <Poster
poster={poster}
savePoster={poster => {
this.setState({poster})
}}/>
: <Prizes rankingList={rankingList} saveRankingList={rankingList => {this.setState({rankingList})}}/>
} }
</div> </div>
) )
......
src/components/activity/give-courses/share-content/poster/poster.js
...@@ -11,34 +11,120 @@ function showToast(text) { ...@@ -11,34 +11,120 @@ function showToast(text) {
class Poster extends Component { class Poster extends Component {
state = { state = {
redirectURL: '', redirectUrl: '',
posterBgUrl: '', backgroundUrl: '',
avatar: '' avatar: '',
username: '',
poster: this.props.poster,
} }
componentDidMount() { componentDidMount() {
http.get(`${API["base-api"]}/assistance/active_haibao_info/${getParam('assis_word')}`) const {poster} = this.props
.then(res => { if (!poster) {
const {data, errno, msg} = res.data http.get(`${API["base-api"]}/assistance/active_haibao_info/${getParam('assis_word')}`)
if (errno === 200) { .then(res => {
const {data, errno, msg} = res.data
this.setState({ if (errno === 200) {
avatar: ''
}) this.setState({
avatar: data.head_img,
} else { username: data.user_name,
showToast(msg) redirectUrl: data.m_redirect_code,
} backgroundUrl: data.background_img_url
}) }, () => {
this.generatePoster()
})
} else {
showToast(msg)
}
})
}
} }
generatePoster = () => { generatePoster = async () => {
let canvas = document.createElement('canvas'),
scale = window.devicePixelRatio || 1,
ctx = canvas.getContext('2d'),
posterWidth = window.innerWidth * 0.72,
canvasWidth = posterWidth * scale
const {backgroundUrl, avatar, username, redirectUrl} = this.state
const bg = await this.getImage(backgroundUrl)
canvas.style.width = posterWidth + 'px'
canvas.style.height = posterWidth * bg.height / bg.width + 'px'
canvas.width = canvasWidth
canvas.height = canvasWidth * bg.height / bg.width
console.log(canvas.width)
// ctx.scale(scale, scale)
ctx.drawImage(bg, 0, 0, canvas.width, canvas.height)
// ctx.drawImage(bg, 0, 0, Math.round(+canvas.style.width.slice(0, -2)), Math.round(+canvas.style.height.slice(0, -2)))
let r = 16 * scale
const avatarImage = await this.getImage(avatar)
const ax = 20 * scale
const ay = 15 / 2 * scale
ctx.save()
ctx.beginPath()
ctx.arc(r + ax, r + ay, r, 0, Math.PI * 2)
ctx.clip()
ctx.drawImage(avatarImage, ax, ay, 2 * r, 2 * r)
ctx.restore()
ctx.font = `${12 * scale}px serif`
ctx.fillStyle = '#fff'
ctx.fillText(username, 2 * r + ax + (7 * scale), 22 * scale)
let qrcode = await this.getQRCodeCanvas(redirectUrl, scale, posterWidth)
ctx.drawImage(qrcode, 192 * scale, 405 * scale, posterWidth * (100 / (window.innerWidth * 0.72)), posterWidth * (100 / (window.innerWidth * 0.72)))
// 540 384 810
// 894 636 1342
// ctx.drawImage(qrcode, 220, 450, 60, 60)
// document.body.appendChild(canvas)
this.setState({
poster: canvas.toDataURL()
}, () => {
const {savePoster} = this.props
savePoster && savePoster(this.state.poster)
})
} }
getImage = url => {
return new Promise(resolve => {
const img = new Image()
img.setAttribute('crossOrigin', 'anonymous')
img.onload = function () {
resolve(this)
}
img.src = url
})
}
getQRCodeCanvas = (text, scale, posterWidth) => {
const canvas = document.createElement('canvas')
let codeWidth = 100 * scale, codeHeight = 100 * scale,
codeSize = posterWidth * (100 / (window.innerWidth * 0.72))
canvas.style.width = `${codeSize}px`
canvas.style.height = `${codeSize}px`
canvas.width = codeWidth
canvas.height = codeHeight
return QRCode.toCanvas(canvas, text)
}
render() { render() {
const {poster} = this.state
return ( return (
<div id='poster'> <div id='poster'>
<div className="placard-desc"> <div className="placard-desc">
...@@ -46,10 +132,8 @@ class Poster extends Component { ...@@ -46,10 +132,8 @@ class Poster extends Component {
</div> </div>
<div className="total-container"> <div className="total-container">
<div className="placard-img-container" id='imgWrapper'> <div className="placard-img-container" id='imgWrapper'>
<img src="billSrc.src"/> <img src={poster} alt='分享海报'/>
</div> </div>
<div id="qrcode" className="placard-code"></div>
<canvas id="canvas" width="450" height="imgHeight" ref="canvas"></canvas>
</div> </div>
</div> </div>
) )
......
src/components/activity/give-courses/share-content/poster/poster.scss
...@@ -8,15 +8,11 @@ ...@@ -8,15 +8,11 @@
-webkit-touch-callout: none; -webkit-touch-callout: none;
@mixin px2px($prop, $px){
$prop: #{$px}px
}
.placard-desc { .placard-desc {
width: 100%; width: 100%;
color: #fff; color: #fff;
background-color: #470bc8; background-color: #470bc8;
@include px2px(font-size, 28); font-size: 14px;
margin-bottom: 15px; margin-bottom: 15px;
} }
...@@ -30,17 +26,9 @@ ...@@ -30,17 +26,9 @@
position: relative; position: relative;
img { img {
width: 270px; width: 72%;
} }
} }
.placard-code {
opacity: 0;
position: absolute;
width: 100%;
bottom: -400px;
height: 200px;
}
} }
......
src/components/activity/give-courses/share-content/prizes/prizes.js
import React, { Component } from 'react' import React, { Component } from 'react'
import './prizes.scss'
import { http } from "@/utils"
import { Toast } from "antd-mobile"
function showToast(text) {
Toast.info(text, 2, null, false)
}
class Prizes extends Component { class Prizes extends Component {
state = {
list: [
'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/prize-1.png',
'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/prize-2.png',
'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/prize-3.png',
'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/prize-4.png',
'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/prize-5.png',
'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/prize-6.png',
],
isShowRule: false,
rankList: []
}
componentDidMount() {
const {rankingList} = this.props
console.log(rankingList)
if (!rankingList || !rankingList.length) {
this.getRankingList()
} else {
this.setState({
rankingList
})
}
}
getRankingList = () => {
const {saveRankingList} = this.props
http.get(`${API["base-api"]}/assistance/ranking_list/50`)
.then(res => {
const {data, msg, errno} = res.data
if (errno === 200) {
this.setState({
rankList: data.list
})
saveRankingList && saveRankingList(data.list)
} else {
showToast(msg)
}
})
}
render() { render() {
const {
list,
rankList,
isShowRule
} = this.state
return ( return (
<div> <div id={'prizes'}>
<div className="content">
<i className="part-title__decorate"/>
<div className="part-title__txt">活动奖品</div>
<i className="part-title__decorate"/>
<div className="prize-img">
{
list.map((item, index) => {
return (
<div className='img-box' key={index}>
<img src={item} alt=""/>
</div>
)
})
}
</div>
<span className="rule" onClick={() => {
this.setState({isShowRule: true})
}}>活动规则</span>
</div>
<div className="content" style={{padding: `20px 0 30px 0`}}>
<i className="part-title__decorate"/>
<div className="part-title__txt">排行榜</div>
<i className="part-title__decorate"/>
<div className="tip">
数据实时更新 只显示Top50
</div>
<table className="ranking" cellSpacing="0" cellPadding="0" border="0">
<thead>
<tr>
<td>排名</td>
<td>用户名称</td>
<td>邀请人数</td>
</tr>
</thead>
<tbody>
{
rankList.map((item, index) => {
return (
<tr key={index}>
<td>{index + 1}</td>
<td>{item.name}</td>
<td>{item.num}</td>
</tr>
)
})
}
</tbody>
</table>
</div>
{
isShowRule ?
<div className="mbc-box">
<div className="rele-content">
<div className="title">活动规则</div>
<p>1、进入七月在线服务号<a
style={{fontSize: `16px`, color: `rgba(47, 248, 255, 1)`, display: `inline-block`}}>回复77</a>获取活动海报，将上方课程赠送给好友，每有1名好友领取后，您和好友均可免费学习1课时该课；
</p>
<p>2、每多1名好友领取，您获得的课时数+1，直到获得全部课时，届时仍可赠送给好友；</p>
<p>3、活动结束后，邀请好友数超过50人且排行榜前20名用户会得到<a
style={{fontSize: `16px`, color: `rgba(47, 248, 255, 1)`, display: `inline-block`}}>19VIP年会员、樱桃键盘</a>等大奖。
</p>
</div>
<img className="close"
onClick={() => {this.setState({isShowRule: false})}}
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/close-btn.png" alt=""/>
</div>
: null
}
</div> </div>
) )
} }
......
src/components/activity/give-courses/share-content/prizes/prizes.scss 0 → 100644
#prizes {
padding: 0 10px;
height: auto;
.content {
padding: 20px 10px 30px 10px;
background-color: #3F07B8;
border: 1px solid #5970FF;
border-radius: 4px;
text-align: center;
margin-bottom: 30px;
}
.part-title__decorate {
display: block;
width: 232px;
height: 2px;
margin: 0 auto;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 48%, rgba(255, 255, 255, 0) 100%);
}
.part-title__txt {
display: inline-block;
height: 32px;
line-height: 32px;
font-size: 16px;
color: #fff;
font-weight: 400;
letter-spacing: 2px;
}
.prize-img {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 20px;
.img-box {
width: 31.3%;
height: 112px;
margin-bottom: 5px;
img {
width: 100%;
height: 100%;
}
}
}
.rule {
display: inline-block;
width: 101px;
height: 28px;
line-height: 28px;
border: 1px solid rgba(254, 228, 29, 1);
border-radius: 14px;
margin-top: 15px;
color: #FEE41D;
font-size: 15px;
}
.tip {
margin-top: 15px;
font-size: 12px;
color: #fff;
}
.ranking {
width: 100%;
margin-top: 20px;
tr {
height: 44px;
line-height: 44px;
}
thead {
color: #FEE41D;
font-size: 14px;
font-weight: 500;
background-color: #490AD1;
}
tbody {
color: #fff;
font-weight: 400;
font-size: 12px;
tr {
td:first-child {
font-size: 14px;
}
}
tr:nth-child(odd) {
background-color: #470AC9;
}
tr:nth-child(even) {
background-color: #490AD1;
}
}
}
}
.mbc-box{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, .6);
.rele-content {
display: inline-block;
width: 320px;
background: #fff;
border-radius: 5px;
padding: 20px 28px 30px 28px;
box-sizing: border-box;
margin: 145px auto 30px auto;
.title {
font-size: 18px;
color: #111;
margin-bottom: 20px;
font-weight: normal;
}
p {
text-align: left;
font-size: 14px;
color: #666666;
line-height: 18px;
margin-bottom: 3px;
}
}
.close {
display: block;
margin: auto;
width: 33px;
height: 33px;
}
}
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