weapp-v1/pages/cjdshare/index.vue

<template>
	<view class="honour" v-if="isAjaxed">
		<custom-nav title="排行版"></custom-nav>
		<custom-toast ref="toast"></custom-toast>
		<view class="container">
			<view class="certificate"><canvas id="canvas" canvas-id="canvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas></view>
			<view class="share">
				<view class="item" @tap="saveImg"><view>保存图片</view></view>
				<text>保存图片去朋友圈晒晒吧～</text>
			</view>
		</view>
	</view>
</template>

<script>
import { share_data } from '../../api.js';
import * as filters from '../../common/js/filters.js';
export default {
	data() {
		return {
			pageTitle: '荣耀殿堂', //页面名
			canvasWidth: 0, //canvas 宽
			canvasHeight: 0, //canvas 高
			name: '', //名字
			season: '',
			grade: '', //学位
			year: '', //年
			month: '', //月
			day: '', //日
			fromIndex: true, //是否非分享页面,
			header: '',
			headerImg: '',
			deg: '',
			isAjaxed: false,
			imgList: [
				{ imgUrl: 'https://api.jiuweiyun.cn/public/uploads/weapp/icon/cjd_bg1.png', drawUrl: '' },
				{ imgUrl: 'https://api.jiuweiyun.cn/public/uploads/weapp/icon/cjd_bg3.png', drawUrl: '' },
				{ imgUrl: 'https://api.jiuweiyun.cn/public/uploads/weapp/icon/cjd_bg4.png', drawUrl: '' },
				{ imgUrl: 'https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor_bg.png', drawUrl: '' },
				{ imgUrl: 'https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor_bg_no.png', drawUrl: '' },
				{ imgUrl: 'https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor_bg2.png', drawUrl: '' },
				{ imgUrl: 'https://api.jiuweiyun.cn/public/uploads/weapp/icon/honor_bg2_no.png', drawUrl: '' }
			]
		};
	},
	computed: {
		userServerInfo() {
			return this.$store.state.userServerInfo;
		},
		userWeixinInfo() {
			return this.$store.state.userWeixinInfo;
		}
	},
	async onLoad(opt) {
		//当进入页面之后判断是否带带有参数
		uni.hideShareMenu();
		this.getImg();
	},
	methods: {
		drawPoster() {
			let img = this.imgList;
			console.log(img, 'img');
			this.$ajax.get(`${share_data}`).then(([, { data: res }]) => {
				this.isAjaxed = true;
				if (res.code === 200) {
					this.canvasWidth = uni.upx2px(750);
					let y = 1188 + 950;
					if (res.data.medal > 0) {
						y += 524;
					}
					if (res.data.max_inte) {
						y += 421;
					}
					this.canvasHeight = uni.upx2px(y);
					this.name = '刘德华' || this.userServerInfo.name; //姓名
					this.name = this.name.slice(0, 6);
					this.season = 23 || this.userServerInfo.season; // 赛季季数
					const ctx = uni.createCanvasContext('canvas');
					ctx.drawImage(img[0].drawUrl, 0, 0, this.canvasWidth, uni.upx2px(1188));
					ctx.setTextAlign('center');
					ctx.setFontSize(uni.upx2px(30));
					ctx.setFillStyle('#F85820');
					ctx.fillText(`${res.data.rank}名`, uni.upx2px(160), uni.upx2px(920));
					ctx.fillText(`${res.data.integral}分`, uni.upx2px(380), uni.upx2px(920));
					ctx.fillText(`${res.data.num}套`, uni.upx2px(590), uni.upx2px(920));
					ctx.fillText(`${res.data.bonus}元`, uni.upx2px(160), uni.upx2px(1120));
					ctx.fillText(`${res.data.glory}个`, uni.upx2px(380), uni.upx2px(1120));
					ctx.fillText(this.jp(res.data.medal), uni.upx2px(590), uni.upx2px(1120));
					ctx.setFillStyle('#FFFFFF');
					ctx.setFontSize(uni.upx2px(40));
					ctx.fillText(`大卫博士学位争霸赛第${res.data.season}季`, uni.upx2px(375), uni.upx2px(385));
					// 学霸
					if (res.data.max_inte) {
						ctx.drawImage('../../static/new/cjd_bg2.png', 0, uni.upx2px(1188), this.canvasWidth, uni.upx2px(421));
						ctx.setFontSize(uni.upx2px(54));
						ctx.setFillStyle('#E95737');
						// 隐藏等级
						// ctx.fillText(`${res.data.level_name}学霸`, uni.upx2px(375), uni.upx2px(1530));
						ctx.fillText(`学霸`, uni.upx2px(375), uni.upx2px(1530));
					}
					//证书
					let zsY = res.data.max_inte ? 421 + 1188 : 1188;
					ctx.drawImage(img[1].drawUrl, 0, uni.upx2px(zsY), this.canvasWidth, uni.upx2px(950));
					ctx.drawImage(res.data.integral >= 200 ? img[3].drawUrl : img[4].drawUrl, uni.upx2px(155), uni.upx2px(zsY + 171), uni.upx2px(153), uni.upx2px(234));
					ctx.drawImage(res.data.integral >= 800 ? img[5].drawUrl : img[6].drawUrl, uni.upx2px(436), uni.upx2px(zsY + 171), uni.upx2px(153), uni.upx2px(234));
					ctx.drawImage(res.data.integral >= 2500 ? img[5].drawUrl : img[6].drawUrl, uni.upx2px(436), uni.upx2px(zsY + 541), uni.upx2px(153), uni.upx2px(234));
					ctx.drawImage(res.data.integral >= 1600 ? img[5].drawUrl : img[6].drawUrl, uni.upx2px(155), uni.upx2px(zsY + 541), uni.upx2px(153), uni.upx2px(234));
					// 奖牌
					if (res.data.medal > 0) {
						let jpY = res.data.max_inte ? 421 + 1188 + 950 : 1188 + 950;
						ctx.drawImage(img[3].drawUrl, 0, uni.upx2px(jpY), this.canvasWidth, uni.upx2px(524));
						ctx.setFontSize(uni.upx2px(32));
						ctx.setFillStyle('#FFFFFF');
						ctx.fillText('金牌奖章', uni.upx2px(375), uni.upx2px(jpY + 446));
						ctx.drawImage(`../../static/new/jp${res.data.medal + 1}.png`, uni.upx2px(280), uni.upx2px(jpY + 141), uni.upx2px(200), uni.upx2px(223));
					}
					ctx.draw();
				}
			});
		},
		loadImage: function(item) {
			return new Promise(resolve => {
				wx.getImageInfo({
					src: item.imgUrl,
					success: res => {
						item.drawUrl = res.path;
						resolve(item); //回掉函数的返回值
					}
				});
			});
		},
		getImg: function() {
			let imageArr = this.imgList;
			let arr = [];
			imageArr.forEach(item => {
				arr.push(this.loadImage(item));
			});
			Promise.all(arr).then(newList => {
				this.imgList = newList;
				this.drawPoster();
			});
		},
		jp(num) {
			let out = '';
			switch (num) {
				case 1:
					out = '铜牌';
					break;
				case 2:
					out = '银牌';
					break;
				case 3:
					out = '金牌';
					break;
				default:
					out = '未获得';
			}
			return out;
		},
		saveImg() {
			//保存证书到本地
			uni.canvasToTempFilePath({
				//首先将 canvas 转化为一个图片
				canvasId: 'canvas'
			})
				.then(([, res]) => {
					//获得图片的临时路径
					return uni.saveImageToPhotosAlbum({
						//将图片保存到系统相册
						filePath: res.tempFilePath
					});
				})
				.then(([err, res]) => {
					if (err && (err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' || err.errMsg === 'saveImageToPhotosAlbum:fail auth deny')) {
						//如果用户拒绝授权保存图片到相册
						const that = this;
						uni.showModal({
							title: '"大卫博士学位争霸赛"需要保存图片或视频到你的相册',
							content: '',
							success(res) {
								if (res.confirm) {
									wx.openSetting({
										success(res) {
											that.saveImg();
											return;
										}
									});
								}
							}
						});
					} else if (err && err.errMsg === 'saveImageToPhotosAlbum:fail authorize no response') {
						uni.showModal({
							content: '保存图片失败,请手动截图保存',
							showCancel: false
						});
					}
					if (res && res.errMsg === 'saveImageToPhotosAlbum:ok') {
						uni.showModal({
							content: '图片已经保存成功',
							showCancel: false
						});
					}
				});
		}
	}
};
</script>

<style lang="scss">
.container {
	.certificate {
		.bg {
			width: 100%;
			height: 100%;
		}
	}
	.share {
		padding: 22rpx 90rpx;
		background-color: #ffd352;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		color: #fa6b3d;
		font-size: 32rpx;
		.item {
			width: 100%;
			height: 110rpx;
			line-height: 110rpx;
			text-align: center;
			background-color: #f85820;
			border-radius: 110rpx;
			padding: 0;
			margin: 0;
			box-shadow: 0 0 5px rgba(233, 87, 55, 0.45);
			&::after,
			&::before {
				border: none;
			}
			color: #ffd252;
			font-size: 50rpx;
			margin-bottom: 16rpx;
		}
	}
}
.honour {
	@include page();
	height: auto;
	min-height: 100%;
	overflow: inherit;
	&.share {
		border-top-color: #493225;
	}
	.content {
		display: flex;
		flex-direction: column;
		.top {
			width: 100%;
			height: 680rpx;
			background: #493225;
			border-bottom-right-radius: 375rpx 123rpx;
			border-bottom-left-radius: 375rpx 123rpx;
			position: relative;
			&.share {
				height: 890rpx;
			}
			#canvas {
				position: absolute;
				top: 56rpx;
				left: 50%;
				transform: translateX(-50%);
				&.share {
					top: 0;
				}
			}
			.bg {
				position: absolute;
				width: 566rpx;
				height: 464rpx;
				top: 35rpx;
				left: 50%;
				z-index: 1;
				transform: translateX(-50%);
			}
			.all {
				position: absolute;
				right: 32rpx;
				bottom: -13rpx;
				font-size: 26rpx;
				color: #fa6342;
			}
		}
		.bot {
			flex: 1;
			box-sizing: border-box;
			padding: 100rpx;
			.title {
				text-align: center;
				height: 45rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 36rpx;
				color: #fa6342;
				text {
					margin: 0 40rpx;
				}
				image {
					width: 48rpx;
					height: 45rpx;
				}
			}
			.text {
				margin-top: 80rpx;
				font-size: 30rpx;
				color: #666666;
			}
			.share-save {
				height: 60rpx;
				margin-top: 80rpx;
				display: flex;
				justify-content: space-between;
				.button {
					height: 100%;
					width: 240rpx;
					box-sizing: border-box;
					border: 2rpx solid #fa6342;
					border-radius: 30rpx;
					line-height: 56rpx;
					text-align: center;
					color: #fa6342;
					background: #ffffff;
					padding: 0;
					font-size: 24rpx;
					text {
						margin: 0 6rpx;
						vertical-align: middle;
						&.cuIcon {
							font-size: 36rpx;
						}
					}
				}
			}
		}
	}
}
</style>