guosen-ldt-shop/pagesPoster/pages/createOrderPoster.vue

<template>
	<view class="index">
		<mp-swiper operateText="批量保存图片" iconName="download" :list="imgList" @click="savePhoto"></mp-swiper>

		<view style="position: fixed; top: 999999999999999999999rpx">
			<!-- #ifdef MP-WEIXIN -->
			<canvas id="canvas" type="2d" style="width: 670rpx; height: 940rpx" />
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<canvas canvas-id="canvas" id="canvas" style="width: 670rpx; height: 940rpx" />
			<!-- #endif -->
		</view>

		<u-modal :show-cancel-button="true" cancel-text="暂不生成" @cancel="$back" confirm-color="#FF9447"
			@confirm="modalConfirm" title="提示" v-model="modalShow">
			<view class="slot-content" style="margin: 30rpx;">
				<u-form label-width="150" ref="uForm">
					<u-form-item :border-bottom="false" label="座位数:">
						<u-input placeholder="请输入生成的座位数" type="number" v-model="count" />
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
	</view>
</template>
<script>
	import mpSwiper from "../comps/mp-swiper.vue"
	import DrawPoster from "../comps/u-draw-poster/dist/index.js";
	import {
		drawQrCode
	} from "../comps/u-draw-poster/dist/index.js";
	DrawPoster.useCtx(drawQrCode);
	export default {
		components: {
			mpSwiper
		},
		data: () => ({
			modalShow: true,


			imgUrl: '',
			imgList: [],
			//生成海报数量
			count: '',
			//模板下标
			index: 1
		}),
		onLoad(options) {
			this.index = options.index

		},
		methods: {
			modalConfirm() {
				if (this.$isEmpty(this.count)) {
					this.$dialog.showModal('请输入生成座位的数量', false)
					this.modalShow = true
					return
				}
				this.createPoster()
			},
			async createPoster() {
				for (var i = 0; i < this.count; i++) {
					await this.doCreatePoster(i + 1)
				}
			},
			async doCreatePoster(number) {
				// 创建绘制工具
				const dp = await DrawPoster.build({
					selector: 'canvas',
					loading: true,
					debugging: true,
				});
				const w = (dp.canvas.width = 670);
				const h = (dp.canvas.height = 940);

				//初始化参数
				let bgImg = `/pagesPoster/static/poster/wuliao${this.index}.png`
				let shopDetail = this.$cache.get('selectedShop')
				let text = `${shopDetail.name}【${number}号座】`
				let params = {
					shopId: this.vuex_shopId,
					seatNum: `${number}号座`
				}
				let qrCodeText = this.$global.ORDER_QR_PATH + this.$u.queryParams(params)
				let titleParams = {
					x: w / 2 - (text.length / 2 * 34 - 10),
					y: h / 2 - 240,
					color: "#000",
					text: text
				}
				let qrParams = {
					x: w / 2 - 175,
					y: h / 2 - 200,
					text: qrCodeText,
					size: 350,
					margin: 5,
				}

				if (this.index == 2) {
					titleParams.y = h / 2 - 90
					qrParams.y = h / 2 - 60
				}

				if (this.index == 3) {
					titleParams.color = '#fff'
					titleParams.y = h / 2 - 150
					qrParams.y = h / 2 - 120
				}

				if (this.index == 4) {
					titleParams.y = h / 2 - 240
					qrParams.y = h / 2 - 210
				}

				// 绘制基本背景
				dp.draw((ctx) => {
					ctx.fillStyle = '#ffffff';
					ctx.fillRoundRect(0, 0, w, h, 20);
					ctx.clip();
					ctx.fillRect(0, 0, w, h - 160);
				});
				// 绘制图片内容
				dp.draw(async (ctx) => {
					await Promise.all([
						ctx.drawImage(bgImg, 0, 0, w, h),
					]);
					// 用户二维码
					await ctx.drawQrCode(qrParams);
				});



				// 绘制底部文字内容
				dp.draw((ctx) => {
					ctx.fillStyle = titleParams.color;
					ctx.font = '34px PingFang SC';
					ctx.fillText(titleParams.text, titleParams.x, titleParams.y);
				});
				this.imgUrl = await dp.createImagePath();
				this.imgList.push(this.imgUrl)
			},
			async savePhoto() {
				this.$dialog.showLoading('图片保存中')
				for (var i = 0; i < this.imgList.length; i++) {
					await this.$mpi.saveImg(this.imgList[i])
				}
				uni.hideLoading()
			}
		}
	};
</script>


<style lang="scss">

</style>