9-27-sharecode

pages/public/login.vue

@@ -27,9 +27,9 @@
 				<navigator url="./forget">
 					<view class="bbtn">忘记密码</view>
 				</navigator>
-				<view class="jg">
+				<!-- <view class="jg">
 				</view>
-				<view class="bbtn" @click="register">注册账号</view>
+				<view class="bbtn" @click="register">注册账号</view> -->
 			</view>
 			<!-- <view class="flex other">
 				<view class="fenge"></view>

pages/upload/upload.vue

@@ -60,10 +60,10 @@
 					mask: true
 				})
 				let arr = []
-				if(obj.imgone) {
+				if(obj.imgone != '') {
 					arr.push(obj.imgone)
 				}
-				if(obj.imgtow) {
+				if(obj.imgtow != '') {
 					arr.push(obj.imgtow)
 				}
 				console.log(arr,'arr')

pages/user/shareQrCode.vue

@@ -1,291 +1,311 @@
-<template>
-	<view class="content">
-		<view class="qrimg">
-			<!-- <tki-qrcode :key="'http://shop.zhengyjk1994.com/register?petent=' + userInfo.uid" cid="tki-qrcode-canvas"
+<template>
+	<view class="content">
+		<image src="../../static/img/sharebg.png" mode="" class="bg"></image>
+		<!-- <view class="qrimg"> -->
+		<!-- <tki-qrcode :key="'http://shop.zhengyjk1994.com/register?petent=' + userInfo.uid" cid="tki-qrcode-canvas"
 				ref="qrcode"
 				:val="'http://shop.zhengyjk1994.com/register?petent=' + userInfo.uid"
 				:size="300" unit="upx" background="#ffffff" foreground="#333333" pdground="#333333" icon=""
-				:iconSize="40" :lv="3" :onval="true" :loadMake="true" :usingComponents="true" /> -->
-		</view>
-		<tki-qrcode :key="baseURL + '/index?petent=' + userInfo.id" cid="tki-qrcode-canvas"
-			ref="qrcode"
-			:val="baseURL + '/index?petent=' + userInfo.id"
-			:size="300" unit="upx" background="#ffffff" foreground="#333333" pdground="#333333" icon=""
-			:iconSize="40" :lv="3" :onval="true" :loadMake="true" :usingComponents="true" />
-		<!-- #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="share-bottom flex" :class="{ 'action-share-bottom': !loading }" @click="loading ? showImg() : ''">
-			<text>{{ loading ? '点击生成图片' : '长按二维码下载' }}</text>
-		</view> -->
-	</view>
-</template>
-
-<script>
-import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
-import { spreadBanner } from '@/api/user.js';
+				:iconSize="40" :lv="3" :onval="true" :loadMake="true" :usingComponents="true" /> -->
+		<!-- </view> -->
+		<tki-qrcode :key="baseURL + '/index?petent=' + userInfo.id" cid="tki-qrcode-canvas" ref="qrcode"
+			:val="baseURL + '/index?petent=' + userInfo.id" :size="300" unit="upx" background="#ffffff"
+			foreground="#333333" pdground="#333333" icon="" :iconSize="40" :lv="3" :onval="true" :loadMake="true"
+			:usingComponents="true" />
+		<!-- #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="share-bottom flex" :class="{ 'action-share-bottom': !loading }" @click="loading ? showImg() : ''">
+			<text>{{ loading ? '点击生成图片' : '长按二维码下载' }}</text>
+		</view> -->
+	</view>
+</template>
 
-import { mapState, mapMutations } from 'vuex';
-export default {
-	components: { tkiQrcode },
-	computed:{
-		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
-		...mapState(['baseURL'])
-	},
-	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: true, //监听val值变化自动重新生成二维码
-			loadMake: false, //组件初始化完成后自动生成二维码，val需要有值
-			usingComponents: false, //是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
-			showLoading: true, //是否显示loading
-			loadingText: '二维码生成中', //loading文字
-			src: '', // 二维码生成后的图片地址或base64
-			ratio: 1, //页面比例用于计算
-			ctxSrc: '', //要显示的图片
-			loading: true,//是否载入图片中
-			canHeight: '',//画布高度
-			canWeidth: ''//画布宽度
-		};
-	},
-	onLoad() {
-		// this.loadCodeList()
-	},
-	// 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: {
-		loadCodeList() {
-			// 加载二维码信息
-			spreadBanner({
-				// #ifdef H5
-				type: 2,
-				// #endif
-				// #ifdef MP
-				type: 1
-				// #endif
-			}).then(e => {
-				// #ifdef MP
-				// 保存二维码图片
-				uni.downloadFile({
-					url: e.data[0].wap_posterQr,
-					success(res) {
-						if (res.errMsg == 'downloadFile:ok') {
-							obj.src = res.tempFilePath;
-							// 生成画布
-							obj.loadImg(obj.src);
-							uni.hideLoading();
-						}
-						console.log(res);
-					},
-					fail(e) {
-						console.log(e);
-					}
-				})
-				// #endif
-				// #ifdef H5
-					// 保存二维码图片
-					this.src =  e.data[0].wap_posterQr;
-					// 生成画布
-					this.loadImg(e.data[0].wap_posterQr);
-				// #endif
-				
-			}).catch((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;
-						// 保存图片base64
-						obj.ctxSrc = res.tempFilePath;
-					},
-					fail(e) {
-						console.log(e);
-					}
-				});
-			}, 50);
-		},
-		// 开始渲染画布
-		loadImg(src) {
-			const obj = this;
-			const cavWidth=523;//画布宽度
-			const cavHeight=700;//画布高度
-			const ratio = obj.ratio;//获取页面比例
-			const ctxBg = '/static/img/img14.jpg'; //画布背景
-			let context = uni.createCanvasContext('qrShareBox');
-			const codeSize = obj.size * ratio; //计算二维码大小
-			const codeX = ((cavWidth - obj.size) * ratio) / 2; //二维码所在x轴位置
-			const codeY = cavHeight * ratio; //二维码所在y轴位置
-			const codeBoxColor = '#FFFFFF'; //包裹框颜色
-			const codeBoxWidht = 0; //包裹边框宽度
-			const codeBoxSize = (codeBoxWidht / 2) * ratio; //计算二维码白色包裹框大小
-			const codeBoxX = codeX - codeBoxSize; //包裹框初始X轴
-			const codeBoxY = codeY - codeBoxSize; //包裹框初始Y轴
-			const codeBoxEnd = codeSize + codeBoxWidht * ratio; //计算包裹框大小
-			const fontTop = codeY + codeBoxEnd + (codeBoxWidht + 20) * this.ratio; //文字距离上边距高度
-			const fontSize = 24 * ratio; //文字大小
-			const fontText = ''; //文字内容
-			const fontLeft = (codeSize - fontSize * fontText.length) / 2 + codeX; //文字左侧距离
-			// 插入背景图片
-			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 * 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: 700rpx;
-	// height: 1245rpx;
-	width: 532rpx;
-	height: 945rpx;
-	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;
-	}
-}
-.tki-qrcode {
-	width: 300rpx;
-	height: 300rpx;
+<script>
+	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
+	import {
+		spreadBanner
+	} from '@/api/user.js';
+
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	export default {
+		components: {
+			tkiQrcode
+		},
+		computed: {
+			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
+			...mapState(['baseURL'])
+		},
+		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: true, //监听val值变化自动重新生成二维码
+				loadMake: false, //组件初始化完成后自动生成二维码，val需要有值
+				usingComponents: false, //是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
+				showLoading: true, //是否显示loading
+				loadingText: '二维码生成中', //loading文字
+				src: '', // 二维码生成后的图片地址或base64
+				ratio: 1, //页面比例用于计算
+				ctxSrc: '', //要显示的图片
+				loading: true, //是否载入图片中
+				canHeight: '', //画布高度
+				canWeidth: '' //画布宽度
+			};
+		},
+		onLoad() {
+			// this.loadCodeList()
+		},
+		// 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: {
+			loadCodeList() {
+				// 加载二维码信息
+				spreadBanner({
+					// #ifdef H5
+					type: 2,
+					// #endif
+					// #ifdef MP
+					type: 1
+					// #endif
+				}).then(e => {
+					// #ifdef MP
+					// 保存二维码图片
+					uni.downloadFile({
+						url: e.data[0].wap_posterQr,
+						success(res) {
+							if (res.errMsg == 'downloadFile:ok') {
+								obj.src = res.tempFilePath;
+								// 生成画布
+								obj.loadImg(obj.src);
+								uni.hideLoading();
+							}
+							console.log(res);
+						},
+						fail(e) {
+							console.log(e);
+						}
+					})
+					// #endif
+					// #ifdef H5
+					// 保存二维码图片
+					this.src = e.data[0].wap_posterQr;
+					// 生成画布
+					this.loadImg(e.data[0].wap_posterQr);
+					// #endif
+
+				}).catch((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;
+							// 保存图片base64
+							obj.ctxSrc = res.tempFilePath;
+						},
+						fail(e) {
+							console.log(e);
+						}
+					});
+				}, 50);
+			},
+			// 开始渲染画布
+			loadImg(src) {
+				const obj = this;
+				const cavWidth = 523; //画布宽度
+				const cavHeight = 700; //画布高度
+				const ratio = obj.ratio; //获取页面比例
+				const ctxBg = '/static/img/img14.jpg'; //画布背景
+				let context = uni.createCanvasContext('qrShareBox');
+				const codeSize = obj.size * ratio; //计算二维码大小
+				const codeX = ((cavWidth - obj.size) * ratio) / 2; //二维码所在x轴位置
+				const codeY = cavHeight * ratio; //二维码所在y轴位置
+				const codeBoxColor = '#FFFFFF'; //包裹框颜色
+				const codeBoxWidht = 0; //包裹边框宽度
+				const codeBoxSize = (codeBoxWidht / 2) * ratio; //计算二维码白色包裹框大小
+				const codeBoxX = codeX - codeBoxSize; //包裹框初始X轴
+				const codeBoxY = codeY - codeBoxSize; //包裹框初始Y轴
+				const codeBoxEnd = codeSize + codeBoxWidht * ratio; //计算包裹框大小
+				const fontTop = codeY + codeBoxEnd + (codeBoxWidht + 20) * this.ratio; //文字距离上边距高度
+				const fontSize = 24 * ratio; //文字大小
+				const fontText = ''; //文字内容
+				const fontLeft = (codeSize - fontSize * fontText.length) / 2 + codeX; //文字左侧距离
+				// 插入背景图片
+				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 * 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;
+
+		height: calc(100vh - 44px);
+		position: relative;
+	}
+
+	.bg {
+		position: relative;
+		height: calc(100vh - 44px);
+		width: 100%;
+	}
+
+	// #qrShareBox {
+	// 	position: absolute;
+	// 	left: -9999rpx;
+	// 	top: -9999rpx;
+	// }
+
+	.qrimg {
+		position: absolute;
+		left: -9999rpx;
+		top: -9999rpx;
+	}
+
+	.tki-qrcode-canvas {
+		// width: 700rpx;
+		// height: 1245rpx;
+		width: 532rpx;
+		height: 945rpx;
+		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;
+		}
+	}
+
+	.tki-qrcode {
+		width: 300rpx;
+		height: 300rpx;
 		position: fixed;
-		top: 0;
-		bottom: 0;
+		bottom: 10vh;
 		right: 0;
 		left: 0;
 		margin: auto;
-	}
+	}
 </style>