duantuihe/pages/my/tuiguangHaibao/index.vue

<template>
	<view class="container">
		<navBar title="推广海报" :back="true" color="#333333" background="#FFFFFF" />
		<!-- <view class="test" @click="createPoster">
			生成
		</view> -->

		<view class="haobaoBox" v-if="showPoster">
			<wike-painter style="display: none;" :board="posterObj" @done="posterSuccess" ref="painter"></wike-painter>
		<image :src="haibaoUrl" mode="" class="haibao"></image>
		</view>


		<view class="btnBox">
			<view class="btn" @click="toSave">
				保存到手机相册
			</view>
		</view>
	</view>
</template>

<script>
	// import navBar from '@/components/navBar/index.vue'
	export default {
		// components: {
		// 	navBar
		// },
		data() {
			return {
				picBase: this.$picBase2,
				
				
				isLoading: true,
				tobheight: 45,
				// platform: this.$platform.get(),
				showAuthModal: true,
				empty: false,

				pages: 1,
				currentTab: 0,

				hasAuth: true, //是否有权限
				commissionLv: {
					name: '合伙人'
				},
				//合伙人等级
				commissionWallet: null, //合伙人钱包
				agentFrom: null, //是否显示我的资料
				showLv: true,

				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				logMap: {
					system: this.$IMG_URL + '/imgs/commission/commission_base_notice.png',
					admin: this.$IMG_URL + '/imgs/commission/commission_base_avatar.png'
				},
				showTerm: true, //条件弹窗
				showGoodsTerm: false, //商品条件
				showMoneyTerm: false, //金额条件
				goodsTermList: [],
				moneyTermNum: 0,
				authNotice: {},


				showPoster: false,
				posterObj: {},
				posterfff: '您好，我是AI语言模型，可以帮助你做很多事情。例如:\n- 回答你的问题\n- 给你提供某些信息\n- 帮你搜索网页\n- 聊天和闲聊\n- 玩一些小游戏\n- 计算数学题\n- 翻译语言\n- 生成文本\n等等.....\n如果你有任何问题或需要帮助，请随时告诉我。',
				spmplatform: 0,
				is_examine: 1,
				commission_price: 0,
				// info: {},
				posterheight: 0,
				poster_bg_img_path: '',
				commission_alias: '',



				info: {
					commission_alias: "",
					commission_price: "0",
					extract_min_price: "100",
					first: "50",
					instructions: "满100可以提现，48小时到账",
					intro: "<p><span style=\"color: rgb(102, 102, 102); font-family: \" helvetica=\"\" pingfang=\"\" font-size:=\"\" text-align:=\"\" text-wrap:=\"\" background-color:=\"\">入驻说明，加入分销商需要沟通买399年卡会员.</span></p><p><font color=\"#666666\">联系客服开通！</font></p>",
					is_commission: "1",
					is_examine: "2",
					is_ranking: "1",
					is_self_buy: "2",
					is_self_buy_commission: "2",
					level: "2",
					poster_bg_height: "1334",
					poster_bg_img: "1671",
					poster_bg_img_filename: "分销海报.jpg",
					poster_bg_img_path: "https://nywhcm.com/addons/wike_aging/public/static/storage/20230625/74f8be11f3f174e63576a777c71d644b.jpg",
					poster_bg_width: "750",
					poster_qrcode_width: "135",
					poster_qrcode_width_filename: "tmp_c1537e2c3beb0a3d14f87a63da8b84cc548ea7871f918188.jpg",
					poster_qrcode_width_path: "https://nywhcm.com/addons/wike_aging/public/static/storage/20230322/17859fbc20087bd430f224905f5d9370.jpg",
					poster_qrcode_x: "514",
					poster_qrcode_y: "1174",
					second: "10",
					third: "0"
				},
				haibaoUrl:''
			}
		},
		onLoad() {
			this.createPoster()
		},
		methods: {
			toSave() {
				uni.showLoading({
					title: '海报生成中'
				});
				this.$refs.painter.canvasToTempFilePathSync({
					// 在nvue里是jpeg
					fileType: 'jpg',
					quality: 1,
					success: res => {
						// #ifdef MP-WEIXIN
						wx.showShareImageMenu({
							path: res.tempFilePath
						})
						// this.showPoster = false;
						uni.hideLoading();
						// #endif
					}
				});
			},
			getdownload(e) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: e,
						method: 'GET',
						responseType: 'arraybuffer',
						success: ress => {
							let base64 = wx.arrayBufferToBase64(ress.data);
							base64 = 'data:image/jpeg;base64,' + base64
							resolve(base64);
						},
						fail: (e) => {
							resolve('fail');
						}
					})
				});
			},
			posterSuccess() {
				uni.hideLoading();
			},
			test() {
				console.log('1212232323---------', this.commissionLv);
			},
			revertUrl(){
				this.$refs.painter.canvasToTempFilePathSync({
					// 在nvue里是jpeg
					fileType: 'jpg',
					quality: 1,
					success: res => {
						this.haibaoUrl=res.tempFilePath
						console.log('this.haibaoUrl',this.haibaoUrl);
					}
				});
			},

			async createPoster(e) {

				let that = this;
				let httpsurl = '';
				uni.showLoading({
					title: '海报渲染中'
				});

				console.log('1212232323---------', that.info);

				if (that.info.poster_bg_img_path.indexOf("https") < 0) {
					httpsurl = await that.getdownload(that.info.poster_bg_img_path.replace("http:", "https:"));
				} else {
					httpsurl = await that.getdownload(that.info.poster_bg_img_path);
				}
				if (httpsurl == 'fail') {
					uni.hideLoading();
					uni.showToast({
						title: '生成失败',
						icon: 'none'
					})
					return;
				}
				let proportionally = this.info.poster_bg_width / uni.$u.sys().windowWidth;
				(this.posterObj = {
					width: (this.info.poster_bg_width / proportionally) + 'px',
					height: (this.info.poster_bg_height / proportionally) + 'px',
					background: '#fff',
					borderRadius: '16rpx',

					views: [{
							src: httpsurl,
							type: "image",
							css: {
								width: (this.info.poster_bg_width / proportionally) + 'px',
								height: (this.info.poster_bg_height / proportionally) + 'px',
							}
						},
						{
							type: 'view',
							css: {
								left: (this.info.poster_qrcode_x / proportionally) + 'px',
								top: (this.info.poster_qrcode_y / proportionally) + 'px',
								position: 'fixed',

							},
							// #ifdef H5
							views: [{
								type: 'qrcode',
								text: this.qrcode,
								css: {
									width: (this.info.poster_qrcode_width / proportionally) + 'px',
									height: (this.info.poster_qrcode_width / proportionally) + 'px',
									background: '#fff'
								}
							}],
							// #endif
							// #ifdef MP-WEIXIN
							views: [{
								type: 'image',
								src: this.qrcode,
								css: {
									width: (this.info.poster_qrcode_width / proportionally) + 'px',
									height: (this.info.poster_qrcode_width / proportionally) + 'px',
									background: '#fff'
								}
							}]
							// #endif
						}
					]
				}),
				(
				this.showPoster = true,
				// this.revertUrl()
				
				setTimeout(()=>{
					that.$refs.painter.canvasToTempFilePathSync({
						// 在nvue里是jpeg
						fileType: 'jpg',
						quality: 1,
						success: res => {
							that.haibaoUrl=res.tempFilePath
							console.log('that.haibaoUrl',that.haibaoUrl);
						}
					})
				},1000)
				);
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>