crmcard/pages/poster/poster.vue

<template>
	<view class="poster">
		<uni-menubar title="我的海报" />
		<view v-if="imageList.length">
			<view class="imgRow">
				<view v-for="(item,index) in imageList" :key="index" class="imgBox"
					:class="(index == active ? 'borderCol': '')" @click="swiperChange(item,index)">
					<tm-images :width="130" :height="130" :previmage="false" :round="5" :src="item.view.bgUrl">
					</tm-images>
					<view v-if="index == active" style="position: absolute;right: 0;bottom: 0;">
						<tm-icons :size="30" color="blue" name="icon-check-circle"></tm-icons>
					</view>
				</view>
			</view>
			<view class="">
				<tm-sheet>
					<tm-images v-if="!show"  :previmage="true" :round="5" :src="posterImg">
					</tm-images>
					<tm-loadding v-else label="海报生成中..."></tm-loadding>
				</tm-sheet>
			</view>
			<view style="height: 150rpx;"></view>
			<view class="px-20 py-30" style="position: fixed;bottom:0;width: 100%; background-color:#fff">
				<tm-row>
					<tm-col :grid="6">
						<tm-button  theme="blue" plan size="n" @click="send">转发</tm-button>
					</tm-col>
					<tm-col :grid="6">
						<tm-button theme="blue" size="n" @click="showDown=true">保存</tm-button>
					</tm-col>
				</tm-row>
			</view>
			<view>
			</view>
		</view>
		<tm-dialog confirmColor="blue" v-model="showDown" @confirm="download" content="是否将海报保存到你的相册?" theme="split">
		</tm-dialog>
		<l-painter ref="painter" style="position: absolute;top: -100000px;" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				imageList: [],
				poster: {},
				show: false,
				showDown: false,
				qrImg: "",
				posterImg:""
			}
		},
		computed: {
			userInfo() {
				return this.$tm.vx.state().user.userInfo || {}
			},
		},

		async onLoad() {
			await this.$tm.request.post('card/qr', {
				page: "/pages/index/index",
				scene: "card_id=" + this.userInfo.card_id
			}).then(res => {
				this.qrImg = res.data
				this.$tm.request.post('poster/list').then(res => {
					// console.log(res.data)
					this.imageList = res.data
					this.swiperChange(this.imageList[0], 0)
				})
			})
		},
		methods: {
			send(){
				console.log(this.posterImg)
				wx.showShareImageMenu({
				  path: this.posterImg
				})
			},
			// 保存文件到本地
			download() {
				wx.saveImageToPhotosAlbum({
					filePath:this.posterImg,
					success: (res) => {
						uni.showToast({
							title: "保存成功!",
							icon: "success"
						})
					}
				})
			},
			swiperChange(info,index) {
				this.active = index
				this.show = true
				let item = this.imageList[index]
				this.poster = {
					css: {
						width: item.view.width + 'px',
						height: item.view.height + 'px',
						backgroundImage: 'url(' + item.view.bgUrl + ')',
					},
					views: []
				}
				item.view.items.forEach(val => {
					let type = ''
					let obj = {}
					type = 'image'
					let typee = 'src'
					if (val.t == 'qrcode') {
						val.v = this.qrImg
					}
					if (val.t == "avatar") {
						val.v = this.userInfo.picture
					}
					if (val.t == 'text' || val.t == 'nickname') {
						typee = 'text'
						type = 'text'
					}
					this.poster.views.push({
						type: "view",
						css: {
							position: "absolute",
							width: val.w + 'px',
							height: val.h + 'px',
							left: val.x + 'px',
							top: val.y + 'px',
						},
						views: [{
							[typee]: val.v,
							type: type,
							css: {
								color: val.c,
								fontSize: val.s + 'px',
								width: val.w + 'px',
								height: val.h + 'px',
							}
						}]
					})
				})
				this.showPoster()


			},
			showPoster() {
				// 渲染
				this.$refs.painter.render(this.poster);
				// 生成图片
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						this.posterImg = res.tempFilePath
						// this.swiperList[e].src = res.tempFilePath
						this.show = false
					},
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.poster {
		height: 100vh;
		background-color: #f5f5f5;
	}

	.imgRow {
		width: 100%;
		display: flex;
		flex-direction: row;
		padding: 30rpx 30rpx;
		overflow-x: scroll;
		background-color: #fff;
		box-sizing: border-box;
	}

	.imgBox {
		margin-left: 15rpx;
		border-radius: 5px;
		position: relative;
	}

	.borderCol {
		border: 1px solid #03A9F4;
	}
</style>