hz/ebiz-h5
1
0
Fork 0
mirror of http://112.124.100.131/GFRS/ebiz-h5.git synced 2025-12-10 02:16:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

3月份的桂冠专属海报--更新UI设计图

Browse Source
This commit is contained in:
li.yuetong
2022-03-03 13:24:58 +08:00
parent 267ef11443
commit 55f475e754
3 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/laurelClub/posters-background-img.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 988 KiB

BIN
src/assets/images/laurelClub/posters-name-card-img.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 53 KiB

26
src/views/ebiz/laurelClub/ExclusivePosters.vue
View File

@@ -44,7 +44,7 @@ import { queryPosterDataUrl } from '@/api/ebiz/laurelClub/laurelClub'
import { uploadImg } from '@/api/ebiz/sale/sale' import { uploadImg } from '@/api/ebiz/sale/sale'
// import backgroundImg from '../../../assets/images/laurelClub/posters-background-img.png' // import backgroundImg from '../../../assets/images/laurelClub/posters-background-img.png'
import crownImg from '@/assets/images/laurelClub/crown.png' import crownImg from '@/assets/images/laurelClub/crown.png'
import nameCardImg from '../../../assets/images/laurelClub/posters-name-card-img.png' // import nameCardImg from '../../../assets/images/laurelClub/posters-name-card-img.png'
import beforeDate from '@/assets/js/utils/getBeforeDate.js' import beforeDate from '@/assets/js/utils/getBeforeDate.js'
export default { export default {
@@ -64,7 +64,7 @@ export default {
backgroundImg: '', // 背景图片 backgroundImg: '', // 背景图片
agentHeadImg: '', // 用户头像图片 agentHeadImg: '', // 用户头像图片
crownImg: crownImg, // 皇冠图片 crownImg: crownImg, // 皇冠图片
nameCardImg: nameCardImg, // 展示地区，名称位置的背景图片 nameCardImg: '', // 展示地区，名称位置的背景图片
agentcode: '', // 工号 agentcode: '', // 工号
managerComName: '', // 地区名称 managerComName: '', // 地区名称
name: '', // 用户名称 name: '', // 用户名称
@@ -153,6 +153,8 @@ export default {
this.posterCanvasObj.crownLevelImg = res.content.crownLevelUrl this.posterCanvasObj.crownLevelImg = res.content.crownLevelUrl
// 获取会员级别图片地址 // 获取会员级别图片地址
this.posterCanvasObj.memberGradeImg = res.content.memberGradeUrl this.posterCanvasObj.memberGradeImg = res.content.memberGradeUrl
// 展示地区，名称位置的背景图片
this.posterCanvasObj.nameCardImg = res.content.nameCardImg
// 调用canvas绘制页面的方法 // 调用canvas绘制页面的方法
this.getCanvas() this.getCanvas()
} else { } else {
@@ -214,20 +216,20 @@ export default {
backgroundImg.onload = function() { backgroundImg.onload = function() {
setTimeout(function() { setTimeout(function() {
ctx.drawImage(agentHeadImg, 175, 320, 400, 400) // 头像 ctx.drawImage(agentHeadImg, 175, 525, 400, 400) // 头像
ctx.drawImage(backgroundImg, 0, 0, 750, 1271) // 背景图 ctx.drawImage(backgroundImg, 0, 0, 750, 1271) // 背景图
ctx.drawImage(crownImg, 280, 175, 188, 134) // 皇冠 ctx.drawImage(crownImg, 280, 440, 188, 134) // 皇冠
ctx.drawImage(nameCardImg, 210, 660, 328, 74) // 展示地区，名称位置的背景图片 ctx.drawImage(nameCardImg, 210, 800, 328, 74) // 展示地区，名称位置的背景图片
ctx.drawImage(crownLevelImg, 350, 985,70,36) // 冠级 ctx.drawImage(crownLevelImg, 350, 905,70,36) // 冠级
ctx.drawImage(memberGradeImg, 315, 1030,140,30) // 会员级别 ctx.drawImage(memberGradeImg, 315, 950,140,30) // 会员级别
ctx.fillStyle = '#921108' ctx.fillStyle = '#ffffff'
ctx.font = 'lighter 32px PingFangSC-Light, PingFang SC' ctx.font = 'lighter 32px PingFangSC-Light, PingFang SC'
ctx.textAlign = 'center' ctx.textAlign = 'center'
ctx.fillText(that.posterCanvasObj.managerComName, 320, 708) // 地区名称（南宁青秀） ctx.fillText(that.posterCanvasObj.managerComName, 320, 848) // 地区名称（南宁青秀）
ctx.fillStyle = '#921108' ctx.fillStyle = '#ffffff'
ctx.font = '32px SourceHanSerifCN-SemiBold' ctx.font = '32px SourceHanSerifCN-SemiBold'
ctx.textAlign = 'center' ctx.textAlign = 'center'
ctx.fillText(that.posterCanvasObj.name, 450, 708) // 名字（张洋溢） ctx.fillText(that.posterCanvasObj.name, 450, 848) // 名字（张洋溢）
//生成src //生成src
var genUrl = canvas.toDataURL() var genUrl = canvas.toDataURL()
var element = document.getElementById('poster_main-image') var element = document.getElementById('poster_main-image')
@@ -418,7 +420,7 @@ export default {
color: #FFCB6B; color: #FFCB6B;
border-radius: 0px; border-radius: 0px;
border: 1px solid #FFE97C; border: 1px solid #FFE97C;
background: linear-gradient(135deg, #DD1818 0%, #910A0A 100%); background: linear-gradient(135deg, #F89FB5 0%, #DB375E 100%);
} }
} }
} }