修改

components/works-poster/works-poster.vue

@@ -1,8 +1,8 @@
 <template>
 	<view >
 		<view class="postcontent"  v-if="isShow" @click.stop="isShow=false">
-			<canvas @click.stop="" :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="my-canvas"></canvas>
-			<view class="text-center text-white">长按保存图片</view>
+			<canvas id='canvas' @click.stop="" :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="my-canvas"></canvas>
+			<!-- <view class="text-center text-white">长按保存图片</view> -->
 		</view>
 		<u-popup v-model="imgShow" mode="center" width="640" height="940upx" border-radius="16">
 			<image :src="imgUrl" style="width: 640upx;height: 940upx;"></image>
@@ -43,8 +43,8 @@
 				})
 				this.ctx = uni.createCanvasContext('my-canvas', this)
 				// this.canvasW = uni.upx2px(550);
-				this.canvasW = uni.getSystemInfoSync().windowWidth-uni.upx2px(80)
-				this.canvasH = this.canvasW*2-uni.upx2px(400)
+				this.canvasW = uni.getSystemInfoSync().windowWidth-uni.upx2px(120)
+				this.canvasH = this.canvasW*2 - uni.upx2px(330)
 				//设置画布背景透明
 				this.ctx.setFillStyle('rgba(255, 255, 255, 0)')
 				//设置画布大小
@@ -58,74 +58,48 @@
 				
 				//绘制标题
 				//绘制标题
-				this.ctx.setFontSize(12); //设置标题字体大小
-				this.ctx.setFillStyle('#333'); //设置标题文本颜色
-				let titleWidth = this.ctx.measureText(this.works.title).width
-				if(titleWidth > hW){
-					this.ctx.fillText(this.works.title.slice(0,25),((this.canvasW-hW) / 2),((this.canvasW-hW) / 2))
-					this.ctx.fillText(this.works.title.slice(25,50),((this.canvasW-hW) / 2),((this.canvasW-hW) / 2) + uni.upx2px(46))
-				} else{
-					this.ctx.fillText(this.works.title,((this.canvasW-hW) / 2),((this.canvasW-hW) / 2))	
-				}
+				// this.ctx.setFontSize(12); //设置标题字体大小
+				// this.ctx.setFillStyle('#333'); //设置标题文本颜色
+				// let titleWidth = this.ctx.measureText(this.works.title).width
+				// if(titleWidth > hW){
+				// 	this.ctx.fillText(this.works.title.slice(0,25),((this.canvasW-hW) / 2),((this.canvasW-hW) / 2))
+				// 	this.ctx.fillText(this.works.title.slice(25,50),((this.canvasW-hW) / 2),((this.canvasW-hW) / 2) + uni.upx2px(46))
+				// } else{
+				// 	this.ctx.fillText(this.works.title,((this.canvasW-hW) / 2),((this.canvasW-hW) / 2))	
+				// }
 				
 				//绘制标题图
-				this.drawRoundImg(this.ctx,headerImg.path,((this.canvasW-hW) / 2-uni.upx2px(12)),((this.canvasW-hW) / 2) + uni.upx2px(80),hW + uni.upx2px(28),hW + uni.upx2px(28),uni.upx2px(16))
+				this.drawRoundImg(this.ctx,headerImg.path,((this.canvasW-hW) / 2-uni.upx2px(10)),((this.canvasW-hW) / 2) - uni.upx2px(10),hW + uni.upx2px(20),hW + uni.upx2px(20),uni.upx2px(16))
 
+				//绘制名称
+				this.ctx.setFontSize(24);
+				this.ctx.setFillStyle('#000000');
+				this.ctx.fillText(this.works.title ,((this.canvasW-hW) / 2) + uni.upx2px(2),(((this.canvasW-hW) / 2) + hH + uni.upx2px(280)))
 				//绘制副标题
-				// this.ctx.setFontSize(14);
-				// this.ctx.setFillStyle('#858585');
-				// this.ctx.fillText(this.worksIntro.slice(0,19) ,((this.canvasW-hW) / 2) + uni.upx2px(20),(
-				// ((this.canvasW-hW) / 2) + hH + uni.upx2px(160)))
-				// this.ctx.fillText(this.worksIntro.slice(19,39) ,((this.canvasW-hW) / 2),(
-				// ((this.canvasW-hW) / 2) + hH + uni.upx2px(200)))
-				// this.ctx.fillText(this.worksIntro.slice(39,59) ,((this.canvasW-hW) / 2),(
-				// ((this.canvasW-hW) / 2) + hH + uni.upx2px(240)))
-				// this.ctx.fillText(this.worksIntro.slice(58,75)+'...' ,((this.canvasW-hW) / 2),(
-				// ((this.canvasW-hW) / 2) + hH + uni.upx2px(280)))
-				//绘制副标题
-				// this.ctx.setFontSize(14);
-				// this.ctx.setFillStyle('#858585');
-				// let ksWidth = this.ctx.measureText(this.product.dept).width
-				// if(ksWidth > hW){
-				// 	this.ctx.fillText('【'+this.str2+'】'+this.product.dept.slice(0,16) + '...',((this.canvasW-hW) / 2),(
-				// 	((this.canvasW-hW) / 2) + hH + uni.upx2px(110))+uni.upx2px(50))
-				// }else{
-				// 	this.ctx.fillText('【'+this.str2+'】'+this.product.dept,((this.canvasW-hW) / 2),(
-				// 	((this.canvasW-hW) / 2) + hH + uni.upx2px(110))+uni.upx2px(50))
-				// }
-				//绘制副标题
-				// this.ctx.setFontSize(14);
-				// this.ctx.setFillStyle('#858585');
-				// let qdWidth = this.ctx.measureText(this.product.investmentChannel).width
-				// if(qdWidth > hW){
-				// 	this.ctx.fillText('【'+this.str3+'】'+this.product.investmentChannel.slice(0,16) + '...',((this.canvasW-hW) / 2),(
-				// 	((this.canvasW-hW) / 2) + hH + uni.upx2px(110))+uni.upx2px(100))
-				// }else{
-				// 	this.ctx.fillText('【'+this.str3+'】'+this.product.investmentChannel,((this.canvasW-hW) / 2),(
-				// 	((this.canvasW-hW) / 2) + hH + uni.upx2px(110))+uni.upx2px(100))
-				// }
-				//绘制副标题
-				// this.ctx.setFontSize(14);
-				// this.ctx.setFillStyle('#858585');
-				// let dqWidth = this.ctx.measureText(this.product.investmentAreas).width
-				// if(dqWidth > hW){
-				// 	this.ctx.fillText('【'+this.str4+'】'+this.product.investmentAreas.slice(0,16) + '...',((this.canvasW-hW) / 2),(
-				// 	((this.canvasW-hW) / 2) + hH + uni.upx2px(110))+uni.upx2px(150))
-				// }else{
-				// 	this.ctx.fillText('【'+this.str4+'】'+this.product.investmentAreas,((this.canvasW-hW) / 2),(
-				// 	((this.canvasW-hW) / 2) + hH + uni.upx2px(110))+uni.upx2px(150))
-				// }
+				this.ctx.setFontSize(12);
+				this.ctx.setFillStyle('#c7c7c7');
+				this.ctx.fillText("赶紧为你的爱豆打榜吧" ,((this.canvasW-hW) / 2) + uni.upx2px(2),(((this.canvasW-hW) / 2) + hH + uni.upx2px(325)))
+				
+				//绘制热力值
+				this.ctx.setFontSize(24);
+				this.ctx.setFillStyle('#000000');
+				this.ctx.fillText(this.works.hotValue ,((this.canvasW-hW) / 2) + uni.upx2px(380),(((this.canvasW-hW) / 2) + hH + uni.upx2px(280)))
+				
+				//绘制排名
+				this.ctx.setFontSize(12);
+				this.ctx.setFillStyle('#000000');
+				this.ctx.fillText("热力榜第"+this.works.rank ,((this.canvasW-hW) / 2) + uni.upx2px(410),(((this.canvasW-hW) / 2) + hH + uni.upx2px(320)))
+				
 				//提示文案
 				this.ctx.setFontSize(12);
 				this.ctx.setFillStyle('#858585');
-				this.ctx.fillText('长按识别二维码',(((this.canvasW-hW) / 2)),(((this.canvasW-hW) / 2) + hH + uni.upx2px(400)))
-				this.ctx.fillText('投票小程序',(((this.canvasW-hW) / 2)),(((this.canvasW-hW) / 2) + hH + uni.upx2px(440)))
+				this.ctx.fillText('来自 '+ this.works.name +' 的分享',(((this.canvasW-hW) / 2)),(((this.canvasW-hW) / 2) + hH + uni.upx2px(440)))
 				//底部广告
 				// let BottomAdImg = await this.getImageInfo(this.abImg)
 				// this.ctx.drawImage(BottomAdImg.path,(((this.canvasW-hW) / 2)),(((this.canvasW-hW) / 2) + hH + uni.upx2px(310)),uni.upx2px(350),uni.upx2px(110))
 				//小程序码
 				let qrcodeImg = await this.getImageInfo(this.works.qrcode)
-				this.ctx.drawImage(qrcodeImg.path,uni.upx2px(470),(((this.canvasW-hW) / 2) + hH + uni.upx2px(340)), uni.upx2px(150), uni.upx2px(150))
+				this.ctx.drawImage(qrcodeImg.path,uni.upx2px(450),(((this.canvasW-hW) / 2) + hH + uni.upx2px(360)), uni.upx2px(150), uni.upx2px(150))
 				//延迟渲染
 				setTimeout(()=>{
 					this.ctx.draw(true,()=>{
@@ -212,7 +186,7 @@
 			},
 			//保存图片到相册
 			saveImage(){
-				var that = this
+				var that = this;
 				uni.canvasToTempFilePath({
 					canvasId: 'my-canvas',
 					quality: 1,

pages/activityList/activity/authorBoost.vue

@@ -143,7 +143,11 @@
 			return {
 				works: {
 					image: 'https://upload-file-data.obs.cn-south-1.myhuaweicloud.com/3953e119f15d4a30ad2a040d48c8f009-图层 1.png',
-					title: '打榜助力',
+					title: '易烊千玺',
+					hotValue: '184056',
+					rank: '1',
+					avatar: '',
+					name: '赖德福',
 					qrcode: 'https://upload-file-data.obs.cn-south-1.myhuaweicloud.com/88f39524c91a44cd9ff6d696c2326483-qrcode.png',
 				},
 				current: 0,

pages/activityList/mine/introduction.vue

@@ -26,7 +26,7 @@
 				<button class="theme-bg-color text-white round cu-btn" style="width: 200upx;height: 70upx;" @click="pyqShare">生成海报</button>
 			</view>
 		</view>
-		<view class="container margin-sm">
+		<view class="container margin-sm" v-if="!$u.test.isEmpty(boostList)">
 			<block v-for="(item, index) in boostList" :key="index">
 				<view class="flex align-center justify-between padding-lr-sm">
 					<view class="flex align-center" style="width: 40%;">
@@ -40,6 +40,9 @@
 				</view>
 			</block>
 		</view>
+		<view v-else>
+			<u-empty margin-top="100" text="暂无数据" mode="list"></u-empty>
+		</view>
 		<view class="cu-modal" :class="wxShareShow ? 'show' : ''" style="z-index: 9999;">
 			<view class="cu-dialog">
 				<view style="height:150px;">