H5-ThreeDoorder/pages/pages-recharge/rechargeSubgift/QR_code.vue

<template>
	<view class="content">
		<image :src="path" style="width: 100%;height: 100%;"></image>
		<view v-if="base64Url">
			<l-painter isCanvasToTempFilePath @success="success" custom-style="position: fixed; left: 200%"
				css="width: 100%; height:100%; background: linear-gradient(,#ff971b 0%, #ff5000 100%)">
				<l-painter-view
					css="box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
					<l-painter-image src="https://img.agrimedia.cn/chwl/20230107-114906.png"
						css="object-fit: cover;width: 100%; height: 100%;" />
					<l-painter-image :src="base64Url"
						css="object-fit: cover;width: 300rpx; height: 300rpx;position: fixed;left:50%;top:20%;transform: translate(-50%,-20%);" />
				</l-painter-view>
			</l-painter>
		</view>
		<canvas canvas-id="qrcode" style="position:fixed;top:-2000rpx;width: 200rpx;height:200rpx;margin: 0 auto;" />
		<view class="footer_content">
			<view class="btn btn2" @tap="saveImageToPhotosAlbum">
				保存至本地
			</view>
		</view>

	</view>
</template>

<script>
	import uQRCode from '../../../static/js/qrcode';
	import {
		makeCodeAPI,
		getUpTokenAPI,
		infoAPI
	} from '@/request/recharge/index.js';
	let self;
	export default {
		data() {
			return {
				path: '',
				base64Url: '',
				// 上传之后的图片
				Base64Img: ''
				// url:""
			}
		},
		onLoad(parameters) {
			self = this;
			console.log(parameters['code_sn'], '转赠码');
			const other = {
				code: parameters['code_sn']
			}

			uni.showLoading({
				title: '正在生成分享码'
			});
			infoAPI().then(res => {
				makeCodeAPI({
					//contents: `https://jc.agrimedia.cn/share1/index.html?bm_yq_code=${res['data']['userInfo']['invite_code']}&H5URL=https://jc.agrimedia.cn/discountt/pages/pages-recharge/shareRedEnvelopes/index&other=${JSON.stringify(other)}`
					//contents: `https://jc.laimaidi.com/share/index.html?bm_yq_code=${res['data']['userInfo']['invite_code']}&H5URL=https://jc.laimaidi.com/privilege/pages/pages-recharge/shareRedEnvelopes/index&other=${JSON.stringify(other)}`
					contents: `https://jc.agrimedia.cn/mkmk/index.html?bm_yq_code=${res['data']['userInfo']['invite_code']}&H5URL=https://jc.agrimedia.cn/privilege/pages/pages-recharge/shareRedEnvelopes/index&other=${JSON.stringify(other)}`
				}).then(res => {
					uni.hideLoading();
					if (res) {
						const base64 = `data:image/png;base64,${uni.arrayBufferToBase64(res)}`;
						getUpTokenAPI().then(res => {
							return self.uploadFilePromise(base64, res['data']);
						}).then(res => {
							const result = JSON.parse(res);
							const url = `https://img.agrimedia.cn/${result.key}`
							// self['Base64Img'] = url;
							self['base64Url'] = url;
							console.log(self['Base64Img'], '二维码上传后');
						})

						// console.log(self['base64Url'], 'base64');
					}

				})
			})

		},
		methods: {
			// H5点击保存图片
			saveImageToPhotosAlbum() {
				downloadPics(this['Base64Img']);

			},



			// 获取生成的图片然后上传
			success(e) {
				// console.log(e,'------');
				this['path'] = e;
				getUpTokenAPI().then(res => {
					return this.uploadFilePromise(e, res['data']);
				}).then(res => {
					const result = JSON.parse(res);
					const url = `https://img.agrimedia.cn/${result.key}`
					this['Base64Img'] = url;
					console.log(this['Base64Img'], '上传后');
				})
			},
			// 上传
			uploadFilePromise(url, upTokenData) {
				// console.log(upTokenData, 'uptoken')
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://up-z1.qiniup.com',
						filePath: url,
						name: 'file',
						formData: {
							key: upTokenData.key,
							token: upTokenData.uptoken
						},
						success: (res) => {
							resolve(res.data);
							console.log(res.data, '上传成功');
						},
						fail(e) {
							console.log(e, '上传错误');
							reject();
						},
						onUploadProgress: function(e) {
							console.log('upload', e)
						}
					});
					a.onProgressUpdate((res) => {
						// console.log('上传进度' + res.progress);
						// console.log('已经上传的数据长度' + res.totalBytesSent);
						// console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
					});
				})
			}
		}
	}
</script>

<style>
	page,
	.content {
		width: 100%;
		height: 100%;
	}

	/* .footer_content{
		width:100%;
				padding-left: 24rpx;
		padding-right: 24rpx;
	} */
	.btn {
		/* width: 94%; */
		height: 92rpx;
		border-radius: 46rpx;
		font-size: 32rpx;
		line-height: 92rpx;
		text-align: center;
		width: 680rpx;
		left: 50%;
		margin-left: -340rpx;
	}

	.btn2 {
		background: linear-gradient(141deg, #FFAF00 0%, #FF7700 100%);
		color: #FFFBF2;
		position: fixed;
		bottom: 148rpx;
	}
</style>