MeiMeiZhuan/pages/product/index.vue

<template>
	<view class="poster_page">
		<canvas canvas-id="poster" @click="seav()" class="poster_canvas"></canvas>
	</view>
</template>
<script>
let settingWritePhotosAlbum = false;
import { goodsDetail ,productCode} from '@/api/product.js';
export default {
	data() {
		return {
			promoteBgImgs: 'https://mmz.liuniu946.com/static/images/posterbackgd.png',
			shopimages:'',//商品主图
			promoteCodeImg: '',
			imgSrc: '',
			goodsid:'',//商品id、
			store_name:'',//商品名称
			price:''//价格
		};
	},
	onLoad(option) {
		this.goodsid = option.goodsid;
		console.log(option.goodsid,'option.goodsid')
		this.goodsDetail();
	},
	//方法
	methods: {
		goodsDetail() {
			let obj = this;
			// 加载二维码信息
			productCode({
				user_type:"routine"
			},obj.goodsid).then( res=>{
				obj.promoteCodeImg = res.data.code;
				console.log(res,'productCode')
			});
			goodsDetail({}, obj.goodsid).then(res => {
				let goods = res.data.storeInfo;
				// obj.promoteCodeImg = goods.code_base;
				obj.shopimages = goods.image.replace(/http:/, "https:");
				console.log(goods.store_name.length,'goods.store_name.length')
				if(goods.store_name.length > 15){
					obj.store_name = goods.store_name.slice(0,15) + '...';
				}else{
					obj.store_name = goods.store_name;
				}
				obj.price = goods.price;
				obj.createPoster();
			});
		},
		createPoster() {
			let rpx = 1;
			wx.getSystemInfo({
			    success(res) {
			      rpx = res.windowWidth/375;
			    },
			});
			let obj = this;
			return new Promise((resolve, reject) => {
				uni.showLoading({
					title: '海报生成中'
				});
				const ctx = uni.createCanvasContext('poster');
				ctx.fillRect(0, 0, 370* rpx, 590* rpx);//画布的大小，和位置
				//下载背景图
				uni.downloadFile({
					url: obj.promoteBgImgs,
					success: res => {
						if (res.statusCode === 200) {
							ctx.drawImage(res.tempFilePath, 0, 0, 370* rpx, 590* rpx);//在画布上绘制背景图的位置
							//下载小程序码
							uni.downloadFile({
								url: obj.shopimages,
								success: res => {
									if (res.statusCode === 200) {
										ctx.drawImage(res.tempFilePath, 0, 0, 340* rpx, 360* rpx);//在画布上绘制商品主图的位置
										ctx.textAlign = 'center';
										ctx.font = "20px Verdana";
										ctx.fillStyle = "#000000";
										ctx.fillText(obj.store_name, 170* rpx, 400* rpx,300);
										
										ctx.font = "36px Verdana";
										ctx.fillStyle = "#fa2819";
										ctx.fillText("￥"+ obj.price, 170* rpx, 440* rpx,300);
										uni.downloadFile({
											url: obj.promoteCodeImg,
											success: res => {
												if (res.statusCode === 200) {
													ctx.drawImage(res.tempFilePath,15* rpx,480* rpx,90* rpx,90* rpx);//在画布上绘制二维码的位置
													ctx.draw(true, () => {
														// canvas画布转成图片并返回图片地址
														uni.canvasToTempFilePath({
															canvasId: 'poster',
															width: 375,
															height: 667,
															success: res => {
																console.log("canvasToTempFilePath_success")
																obj.imgSrc = res.tempFilePath;
																uni.hideLoading();
															},
															fail: () => {
																uni.hideLoading();
																reject();
															}
														});
													});
												} else {
													uni.hideLoading();
													uni.showToast({
														title: '海报制作失败，图片下载失败1',
														icon: 'none'
													});
												}
											},
											fail: err => {
												uni.hideLoading();
												uni.showToast({
													title: '海报制作失败，图片下载失败2',
													icon: 'none'
												});
											}
										});
									}else{
										uni.hideLoading();
										uni.showToast({
											title: '海报制作失败，图片下载失败3',
											icon: 'none'
										});
									}
								},
								fail: err => {
									uni.hideLoading();
									uni.showToast({
										title: '海报制作失败，图片下载失败4',
										icon: 'none'
									});
								}
							})
							
						} else {
							uni.hideLoading();
							uni.showToast({
								title: '海报制作失败，图片下载失败5',
								icon: 'none'
							});
						}
					},
					fail: err => {
						uni.hideLoading();
						uni.showToast({
							title: '海报制作失败，图片下载失败6',
							icon: 'none'
						});
					}
				});
			});
		},
		seav() {
			uni.getImageInfo({
				src: this.imgSrc,
				complete: function (result) {
					let path = result.path;
					uni.getSetting({
						success(res) {
							if (!res.authSetting['scope.writePhotosAlbum']) {
								uni.authorize({
									scope:'scope.writePhotosAlbum',
									success(res) {
											uni.saveImageToPhotosAlbum({
												filePath:path,
												complete(result) {
													
												}
											});
										}
								})
							}else{
								uni.saveImageToPhotosAlbum({
									filePath:path,
									complete(result) {
									     uni.showToast({
									         title: '保存图片成功！',
									         duration: 2000,
											 icon:'none'
									     });
									}
								});
							}
						}
					});
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.poster_page {
	height: 100vh;
	width: 100%;
	padding: 25rpx 35rpx;
	background-color: rgba(247, 245, 245, 0.5);
	.poster_canvas {
		width: 100%;
		height: 100%;
	}
}
.poster_swiper {
	height: 100vh;
	width: 100%;
	swiper-item {
		padding: 50rpx 0rpx;
		.poster_image {
			width: 100%;
			height: 100vh;
			.poster_bg_image {
				width: 100%;
				height: 100vh;
			}
			.poster_code_image {
				position: absolute;
				bottom: 140rpx;
				width: 180rpx;
				height: 180rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
}
</style>