sharecode

api/user.js

@@ -49,4 +49,13 @@ export function getUserInfo(data) {
 		method: 'get',
 		data
 	});
+}
+
+// 用户分享图
+export function spreadBanner(data) {
+	return request({
+		url: '/api/spread/banner',
+		method: 'get',
+		data
+	});
 }

pages/shareQrCode/index.vue

@@ -1,319 +1,162 @@
-<template>
-	<view class="content">
-		<!-- <view class="qrimg">
-			<tki-qrcode
-				:cid="cid"
-				ref="qrcode"
-				:val="val"
-				:size="size"
-				:unit="unit"
-				:background="background"
-				:foreground="foreground"
-				:pdground="pdground"
-				:icon="icon"
-				:iconSize="iconSize"
-				:lv="lv"
-				:onval="onval"
-				:loadMake="loadMake"
-				:usingComponents="usingComponents"
-				@result="qrR"
-			/>
-		</view> -->
-		<!-- #ifndef MP-ALIPAY -->
-		<!-- <canvas :class="{ qrimg: !loading }" @longtap="alertCanv" id="qrShareBox" canvas-id="qrShareBox" class="tki-qrcode-canvas" /> -->
-		<!-- #endif -->
-		<!-- #ifdef MP-ALIPAY -->
-		<!-- <canvas :class="{ qrimg: !loading }" @longtap="alertCanv" id="qrShareBox" class="tki-qrcode-canvas" /> -->
-		<!-- #endif -->
-		<!-- <view :style="{ display: loading ? 'none' : 'block' }" class="tki-qrcode-canvas"><image :src="ctxSrc" mode="scaleToFill" class="tki-qrcode-canvas"></image></view> -->
-		<!-- <view class="tki-qrcode-canvas"> -->
-		<image :src="ctxSrc" mode="widthFix" class="tki-qrcode-canvas"></image>
-		<!-- </view> -->
-		<!-- <view class="share-bottom flex" :class="{ 'action-share-bottom': !loading }" @click="loading ? showImg() : ''">
-			<text>{{ loading ? '点击生成图片' : '长按二维码下载' }}</text>
-		</view> -->
-		<!-- <view class="share-bottom flex">
-			<text>长按二维码下载</text>
-		</view> -->
-	</view>
-</template>
-
-<script>
-import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
-import { spreadBanner } from '@/api/shareQrCode.js';
-import { getUserInfo } from '@/api/login.js';
-import { weixindata, shareData, loadShareData } from '@/utils/wxAuthorized.js';
-import { mapState } from 'vuex';
-import { share } from '@/api/wx';
-export default {
-	computed: {
-		...mapState(['baseURL', 'urlFile']),
-		...mapState('user', ['userInfo'])
-	},
-	// components: { tkiQrcode },
-	data() {
-		return {
-			cid: 'tki-qrcode-canvas', //canvasId，页面存在多个二维码组件时需设置不同的ID
-			size: 180, //生成的二维码大小
-			unit: 'upx', //大小单位尺寸
-			// show: true,//默认使用组件中的image标签显示二维码
-			val: '', //要生成的内容
-			background: '#ffffff', //二维码背景色
-			foreground: '#333333', //二维码前景色
-			pdground: '#333333', //二维码角标色
-			icon: '', //二维码图标URL（必须是本地图片，网络图需要先下载至本地）
-			iconSize: 40, //二维码图标大小
-			lv: 3, //容错级别
-			onval: false, //监听val值变化自动重新生成二维码
-			loadMake: false, //组件初始化完成后自动生成二维码，val需要有值
-			usingComponents: false, //是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
-			showLoading: false, //是否显示loading
-			loadingText: '二维码生成中', //loading文字
-			src: '', // 二维码生成后的图片地址或base64
-			ratio: 1, //页面比例用于计算
-			ctxSrc: '', //要显示的图片
-			loading: true, //是否载入图片中
-			canHeight: '',
-			canWeidth: '',
-			login: false //判断是否登录
-		};
-	},
-	onShow() {
-		let obj = this;
-		if (!obj.login) {
-			// 判断是否已经登录
-			getUserInfo()
-				.then(e => {
-					obj.login = true;
-					uni.showLoading({
-						title: '邀请图生成中',
-						mask: true
-					});
-					obj.loadCodeList();
-				})
-				.catch(e => {
-					console.log(e);
-				});
-		}
-	},
-	// onReady() {
-	// 	let obj = this;
-	// 	let query = uni.createSelectorQuery();
-	// 	// 获取页面比例
-	// 	query
-	// 		.select('.content')
-	// 		.fields(
-	// 			{
-	// 				size: true
-	// 			},
-	// 			e => {
-	// 				// 保存比例
-	// 				this.ratio = e.width / 750;
-	// 			}
-	// 		)
-	// 		.exec();
-	// 	// 获取画布宽高信息
-	// 	query
-	// 		.select('#qrShareBox')
-	// 		.fields(
-	// 			{
-	// 				size: true
-	// 			},
-	// 			e => {
-	// 				obj.canHeight = e.height;
-	// 				obj.canWeidth = e.width;
-	// 			}
-	// 		)
-	// 		.exec({});
-	// },
-	methods: {
-		// 设置分享数据
-		setShare() {
-			let obj = this;
-			// 加载分享数据
-			// #ifdef H5
-			obj.loadSareData().then(e => {
-				weixindata({
-					link: obj.ctxSrc, // 分享链接
-					imgUrl:obj.baseURL+obj.urlFile+'/img/logo.jpg',
-					desc:'欢迎加入满园春',
-					title: '满园春线上商城',
-					success: function() {},
-					fail: function() {}
-				});
-			});
-			// #endif
-		},
-		loadSareData() {
-			if (!shareData) {
-				return loadShareData();
-			} else {
-				return new Promise((resolve, reject) => {
-					resolve(shareData);
-				});
-			}
-		},
-		loadCodeList() {
-			let obj = this;
-			// 加载二维码信息
-			spreadBanner({
-				// #ifdef H5
-				type: 2,
-				// #endif
-				// #ifdef MP
-				type: 1
-				// #endif
-			})
-				.then(e => {
-					console.log(e);
-					// 保存二维码图片
-					// this.src = e.data.real_url;
-					obj.ctxSrc = e.data[0].wap_poster;
-					// 生成画布
-					// this.loadImg(e.data.real_url);
-					uni.hideLoading();
-					// 加载分享数据
-					// obj.setShare()
-				})
-				.catch(e => {
-					console.log(e)
-					// uni.showModal({
-					// 	title: '生成失败请刷新页面',
-					// 	showCancel: false
-					// });
-					uni.hideLoading();
-				});
-		},
-		// 长按画布事件
-		alertCanv() {
-			uni.showModal({
-				title: '请先点击生成图片',
-				showCancel: false
-			});
-		},
-		// 生成图片
-		showImg() {
-			uni.showLoading({
-				title: '图片生成中',
-				mask: true
-			});
-			let obj = this;
-			//因为和uni.showLoading载入效果冲突需要延迟执行生成图片方法
-			setTimeout(function() {
-				uni.canvasToTempFilePath({
-					x: 0,
-					y: 0,
-					width: obj.canWeidth,
-					height: obj.canHeight,
-					destWidth: obj.canWeidth,
-					destHeight: obj.canHeight,
-					fileType: 'jpg',
-					quality: 1,
-					canvasId: 'qrShareBox',
-					success: res => {
-						uni.hideLoading();
-						uni.showModal({
-							title: '创建成功，长按二维码下载图片',
-							showCancel: false
-						});
-						// 显示生成的图片
-						obj.loading = false;
-						obj.ctxSrc = res.tempFilePath;
-					},
-					fail(e) {
-						console.log(e);
-					}
-				});
-			}, 50);
-		},
-		// 开始渲染画布
-		loadImg(src) {
-			let obj = this;
-			const ctxBg = '/static/img/img14.jpg'; //画布背景
-			let context = uni.createCanvasContext('qrShareBox');
-			const codeSize = this.size * this.ratio; //计算二维码大小
-			const codeX = ((523 - this.size) * this.ratio) / 2; //二维码所在x轴位置
-			const codeY = 700 * this.ratio; //二维码所在y轴位置
-			const codeBoxColor = '#FFFFFF'; //包裹框颜色
-			const codeBoxWidht = 0; //包裹边框宽度
-			const codeBoxSize = (codeBoxWidht / 2) * this.ratio; //计算二维码白色包裹框大小
-			const codeBoxX = codeX - codeBoxSize; //包裹框初始X轴
-			const codeBoxY = codeY - codeBoxSize; //包裹框初始Y轴
-			const codeBoxEnd = codeSize + codeBoxWidht * this.ratio; //计算包裹框大小
-			// const fontLeft = (codeSize - fontSize * fontText.length) / 2 + codeX; //文字左侧距离
-			const fontTop = codeY + codeBoxEnd + (codeBoxWidht + 30) * this.ratio; //文字距离上边距高度
-			const fontLeft = codeX - 50 * this.ratio; //文字左侧距离
-			const fontSize = 14; //文字大小
-			const fontText = '邀请人：' + uni.getStorageSync('userInfo').nickname; //文字内容
-			// 插入背景图片
-			context.drawImage(ctxBg, 0, 0, obj.canWeidth, obj.canHeight);
-			// // 插入文字
-			context.setFontSize(fontSize);
-			context.fillText(fontText, fontLeft, fontTop);
-			// 插入边框
-			context.beginPath();
-			context.setLineJoin('round'); //边框类型
-			context.setLineWidth(codeBoxWidht * this.ratio);
-			context.setStrokeStyle(codeBoxColor); //设置包裹框颜色
-			context.strokeRect(codeBoxX, codeBoxY, codeBoxEnd, codeBoxEnd);
-			context.stroke();
-			// 插入二维码
-			context.drawImage(src, codeX, codeY, codeSize, codeSize);
-			// 开始渲染
-			context.draw();
-		},
-		// 創建二维码
-		creatQrcode() {
-			this.$refs.qrcode._makeCode();
-		},
-		// 保存二维码到图库
-		saveQrcode() {
-			this.$refs.qrcode._saveCode();
-		},
-		// 生成二维码后返回base64
-		qrR(res) {
-			this.src = res;
-		},
-		//清空二维码（清空二维码会触发result回调 返回值为空）
-		clearQrcode(e) {
-			this.$refs.qrcode._clearCode();
-			this.val = '';
-		}
-	}
-};
-</script>
-
-<style lang="scss">
-.content {
-	// padding-top: 30rpx;
-}
-// #qrShareBox {
-// 	position: absolute;
-// 	left: -9999rpx;
-// 	top: -9999rpx;
-// }
-
-.qrimg {
-	position: absolute;
-	left: -9999rpx;
-	top: -9999rpx;
-}
-.tki-qrcode-canvas {
-	width: 750rpx;
-	margin: 0 auto;
-}
-.share-bottom {
-	width: 560rpx;
-	height: 80rpx;
-	color: #ffffff;
-	background-color: $base-color;
-	margin: 0 auto;
-	font-size: $font-lg - 2rpx;
-	margin-top: 30rpx;
-	border-radius: 99rpx;
-	justify-content: center;
-	&.action-share-bottom {
-		background-color: $color-gray;
-	}
-}
-</style>
+<template>
+	<view class="container">
+		<image @longtap="bc_code" class="backImg" :src="backImg"></image>
+		<view class="tki-qrcode">
+			<canvas @longtap="bc_code" canvas-id="qrcode" />
+		</view>
+	</view>
+</template>
+
+<script>
+// import uQRCode from '@/components/Sansnn-uQRCode/uqrcode.js'
+import { getUserInfo,spreadBanner } from '@/api/user.js';
+export default {
+	props: {
+		qrval: {
+			// 要生成的二维码值
+			type: String,
+		}
+	},
+	data() {
+		return {
+			url: '',
+			backImg:'',
+			userInfo:''
+		};
+	},
+	onLoad() {
+		this.spread();
+		this.getInfo();
+	},
+	computed: {
+			cpSize() {
+				if(this.unit == "upx"){
+					return uni.upx2px(this.size)
+				}else{
+					return this.size
+				}
+			}
+	},
+	methods: {
+		spread(){
+			let obj = this;
+			spreadBanner({
+				type:2
+			}).then(({ data }) => {
+				obj.backImg = data[0].wap_poster;
+			});
+		},
+		getInfo(){
+			let obj = this;
+			getUserInfo({}).then(({ data }) => {
+				obj.userInfo = data;
+				// obj.loadData()
+			});
+		},
+		bc_code(){
+			let that = this;
+			console.log('保存二维码',this.backImg)
+			uni.downloadFile({           //获得二维码的临时地址
+				url:this.backImg,
+				success:(res)=>{
+					//console.log('获取url',res)
+					if(res.statusCode == 200){
+						uni.saveImageToPhotosAlbum({
+							filePath:res.tempFilePath,//传入临时地址
+							success() {
+								that.$api.msg('保存成功')//封装的提示
+							},
+							fail() {
+								that.$api.msg('保存失败')
+							}
+						})
+					}
+				}
+			})
+		},
+		//生成二维码
+		  // make() {
+			 //  let obj = this;
+		  //     uQRCode.make({
+		  //       canvasId: 'qrcode',
+		  //       componentInstance: this,
+		  //       text: obj.url,
+		  //       size: 150,
+		  //       margin: 10,
+		  //       backgroundColor: '#ffffff',
+		  //       foregroundColor: '#000000',
+		  //       fileType: 'png',
+		  //       correctLevel: uQRCode.defaults.correctLevel,
+		  //       success: res => {
+		  //         // console.log(res)
+		  //       }
+		  //     })
+		  //   },
+		// 请求载入数据
+		// async loadData() {
+		// 	let obj = this;
+		// 	obj.url = 'http://btex.frp.liuniu946.com/?id='+ obj.userInfo.invite_code;
+		// 	obj.make();
+		// },
+	},
+};
+</script>
+
+<style lang="scss">
+	page{
+		width: 100%;
+		min-height: 100%;
+		.container{
+			width: 100%;
+			height: 100%;	
+		}
+	}
+	.backImg{
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
+.portrait{
+	width: 100%;
+	text-align: center;
+	padding-top: 80rpx;
+	padding-bottom: 30rpx;
+	image{
+		width: 250rpx;
+		height: 250rpx;
+	}
+}
+.text{
+	text-align: center;
+	width: 100%;
+	color: #FFFFFF;
+	font-size:55rpx;
+	letter-spacing:15rpx;
+}
+.uid-name{
+	padding: 50rpx 0rpx;
+	text-align: center;
+	width: 100%;
+	color: #FFFFFF;
+}
+.copy-btn{
+	color: #FFFFFF;
+	background-color: #4BA6ED;
+	border-radius: 50rpx;
+	width: 170rpx;
+	line-height: 70rpx;
+	margin: 0rpx auto;
+	text-align: center;
+}
+.tki-qrcode{
+	position: fixed;
+	bottom: 10%;
+	left: 30%;
+}
+canvas{
+	width:150px;
+	height: 150px;
+	margin: auto;
+	
+}
+</style>