haibao.vue 3.48 KB
<template>
	<view class="conr" @click="shows" style="position: relative;">

		<view class="hide">
			<l-painter isCanvasToTempFilePath @success="path = $event" ref="painter" css="background-color: red; ">
				<l-painter-image :src="this.hbimg" :css="hbcss" />
				<!-- 二维码 -->
				<l-painter-qrcode :text="qr" :css="qrcss" />
				<!-- 邀请码 -->
				<l-painter-view :css="yqmcss ">
					<l-painter-text :text="linkstr"
						css="width:180rpx ;height:30px;color:  #fff;font-size:18px ;line-height: 30px;" />
				</l-painter-view>
			</l-painter>
		</view>
		<view class="" style="margin: auto; position: absolute;top: 0;opacity: 0;">
			<img :src="urls" style="width: 750rpx; -webkit-touch-callout: default"
				:style=" {'height':(height * 1.3)+'rpx'}" mode="">
		</view>
		<view class="" style="position: absolute;bottom:40rpx;left:276rpx;">
			<button @click="save" style=" height: 35px;line-height: 35px;">保存图片</button>
		</view>

	</view>
</template>
<script>
	import link from '../../uni_modules/uview-ui/libs/config/props/link'
	export default {
		data() {
			return {
				hbcss: {
					height: '',
					width: '750rpx'
				},
				qrcss: {
					width: "180rpx",
					height: "180rpx",
					position: "absolute",
					top: "430rpx",
					left: "100rpx",
					backgroundColor: "#fff"
				},
				yqmcss: {
					color: "#FFFFFF",
					position: "absolute",
					top: "1370rpx",
					left: "100rpx",
					width: "180rpx",
					textAlign: "center"
				},
				height: 1280,
				action: '',
				qr: '',
				linkstr: '',
				urls: '',
				hbimg: '',
				tishi: '',
			}
		},
		onLoad() {
			this.action = getApp().globalData.base
			this.height = (uni.getSystemInfoSync().screenHeight * 1.8);
			this.hbcss.height = this.height * 1.4 + 'rpx'
			this.qrcss.top = this.height * .83 + 'rpx'
			this.yqmcss.top = this.height * .83 + 190 + 'rpx'
			this.$request("/ops/homesub/list", {
				amenuId: 24
			}, 'get').then(res => {
				this.hbimg = this.action + res.data.rows[0].subImg
			})
			this.$request("/system/user/qRCode", {}, "get").then((res) => {
					this.qr = res.data.data


				}),
				this.$request("/system/user/qRCode", {}, "get").then((res) => {
					let str = res.data.data
					this.linkstr = str.slice(-6)
				})
		},
		methods: {
			shows() {
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum,需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						this.urls = res.tempFilePath
					},
				})
			},
			save() {
				console.log(this.$refs.painter);
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum,需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						// 非H5 保存到相册
						this.urls = res.tempFilePath
						let data = {
							qr: this.qr,
							linkstr: this.linkstr,
							urls: this.hbimg,
							// tishi: this.tishi
						}


						// uni.webView.

						// #ifdef H5
						uni.showToast({
							icon: 'none',
							title: '长按保存',
						})
						// #endif
						// H5 提示用户长按图另存
						// #ifndef H5
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: '保存成功',
								})

							}
						});
						// #endif

					},
				})
			}
		}


	}
</script>

<style lang="scss" scoped>
	// image {text-align: center;}
</style>