6-21-1

pages/shop/rent.vue

@@ -1,10 +1,16 @@
 <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"
+				:showLoading="showLoading" :loadMake="loadMake" :usingComponents="usingComponents" @result="qrR" />
+		</view>
+
 		<view class="top-tit">
 			<view class="tit">
 				为您展示【台州市】地区套餐，其他地域套餐待开放。
 			</view>
-			
+
 		</view>
 		<!-- 推荐渠道 -->
 		<view class="yt-list">
@@ -13,8 +19,9 @@
 					推荐渠道
 				</view>
 			</view>
-			<view class="contet-list flex" >
-				<view class="tc " style="display: flex;text-align: center;" :class="{'action': is_tj}" @click="couldTj?istj==true:''">
+			<view class="contet-list flex">
+				<view class="tc " style="display: flex;text-align: center;" :class="{'action': is_tj}"
+					@click="couldTj?istj==true:''">
 					推荐渠道
 				</view>
 				<view class="tc" style="display: flex;text-align: center;" :class="{'action': !is_tj}">
@@ -90,7 +97,7 @@
 				</view>
 			</view>
 		</view>
-		<view class="dy-wrap" v-if="selectTc.id && userInfo.battery_deposit != 1">
+		<view class="dy-wrap" v-if="selectTc.id && userInfo.battery_deposit  != 1">
 			<view class="top-wrap flex">
 				<view class="top-left">
 					押金服务
@@ -169,17 +176,38 @@
 		<view class="ts">
 
 		</view>
-		<view class="btm-btn flex">
-			<view class="pay-price" v-if="userInfo.battery_deposit == 1">
+		<!-- 		<view class="btm-btn flex">
+			<view class="pay-price" >
 				总计费用：<text>{{(selectTc.price*1) || ''}}</text>
 			</view>
-			<view class="pay-price" v-else>
-				总计费用：<text>{{(selectTc.price*1 + selectTc.deposit*1) || ''}}</text>
-			</view>
 			<view class="pay-btn" @click="toBuy" :class="{'zfz': loading}">
 				{{loading?'支付中':'立即支付'}}
 			</view>
+		</view> -->
+		<view class="btm-btn flex" v-if="!showbtn">
+			<view class="pay-price">
+				总计费用：<text>{{(selectTc.price*1) || ''}}</text>
+			</view>
+			<view class="pay-btn" @click="getEwm">
+				获取免押二维码
+			</view>
 		</view>
+		<!-- //showbtn -->
+		<view class="btm-btn flex" v-else
+			style="text-align: center;color: #fff;background-color: #6cd9c0;justify-content: center;" @click="saveShareQrcode">
+			保存二维码
+
+		</view>
+		<uni-popup ref="mypopup" type="center" @change="mychange">
+			<view class="myj-wrap">
+				<view class="ewm-wrap">
+					<canvas :style="{ width:cw + 'rpx', height: ch+'rpx',}" canvas-id="myCanvas" id="myCanvas"
+						class="hb"></canvas>
+				</view>
+
+			</view>
+
+		</uni-popup>
 	</view>
 </template>
 
@@ -213,9 +241,34 @@
 	export default {
 		data() {
 			return {
-				is_tj: false,//是否使用推荐渠道
-				couldTj: false,//是否可用推荐渠道
-				isFj: false,//是否为最近门店
+				showbtn: false,
+				ewmw: 300, //二维码相对宽度
+				cw: 600, //画布相对宽度
+				ch: 600, //画布相对高度
+				shareQrcodeUrl: '', //画布生成的地址
+				canvasW: '', //画布宽度
+				canvasH: '', //画布高度
+				ewmImg: '', //二维码图片信息
+				erweimasrc: '', //生成的二维码图片
+				cid: 'tki-qrcode-canvas', //canvasId，页面存在多个二维码组件时需设置不同的ID
+				size: 300, //生成的二维码大小
+				unit: 'upx', //大小单位尺寸
+				// show: true,//默认使用组件中的image标签显示二维码
+				val: '', //要生成的内容
+				background: '#ffffff', //二维码背景色
+				foreground: '#333333', //二维码前景色
+				pdground: '#333333', //二维码角标色
+				icon: '', //二维码图标URL（必须是本地图片，网络图需要先下载至本地）
+				iconSize: 40, //二维码图标大小
+				lv: 3, //容错级别
+				onval: true, //监听val值变化自动重新生成二维码
+				loadMake: true, //组件初始化完成后自动生成二维码，val需要有值
+				usingComponents: false, //是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
+				showLoading: false, //是否显示loading
+
+				is_tj: false, //是否使用推荐渠道
+				couldTj: false, //是否可用推荐渠道
+				isFj: false, //是否为最近门店
 				selctStore: {
 					id: ''
 				},
@@ -237,7 +290,7 @@
 		},
 		onShow() {
 			this.userinfo()
-			if( this.address.latitude == '') {
+			if (this.address.latitude == '') {
 				this.getlocation()
 			}
 		},
@@ -248,7 +301,151 @@
 
 		},
 		methods: {
-			...mapMutations('user', ['setUserInfo','setAddress']),
+			...mapMutations('user', ['setUserInfo', 'setAddress']),
+			//保存图片
+			saveShareQrcode() {
+				console.log(this.shareQrcodeUrl)
+				uni.saveImageToPhotosAlbum({
+					filePath: this.shareQrcodeUrl,
+					success: (res) => {
+						uni.showToast({
+							icon: 'none',
+							position: 'bottom',
+							title: "成功保存到相册",
+						});
+					},
+					fail: (err) => {
+						//重新提示用户打开保存图片的授权
+						if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
+							uni.showModal({
+								title: '提示',
+								content: '需要您授权保存相册',
+								showCancel: false,
+								success(res) {
+									if (res.confirm) {
+										uni.openSetting({
+											success(settingdata) {
+												if (settingdata.authSetting[
+														'scope.writePhotosAlbum']) {
+													uni.showModal({
+														title: '提示',
+														content: '获取权限成功,再次保存图片即可成功',
+														showCancel: false,
+													})
+												} else {
+													uni.showModal({
+														title: '提示',
+														content: '获取权限失败，无法保存到相册',
+														showCancel: false
+													})
+												}
+											}
+										})
+									}
+								}
+							})
+						}
+					},
+				})
+			},
+			mychange(e) {
+				this.showbtn = e.show
+			},
+			//获取二维码
+			getEwm() {
+				let that = this
+				setTimeout(() => {
+					that.val = '阿强是个大傻逼'
+					this.$refs.mypopup.open()
+
+				}, 100)
+			},
+			// 获取图片信息
+			getImageInfo(image) {
+				return new Promise((req, rej) => {
+					uni.getImageInfo({
+						src: image,
+						success: function(res) {
+							req(res)
+						},
+					});
+				})
+			},
+			// 获取设备信息
+			getSystemInfo() {
+				return new Promise((req, rej) => {
+					uni.getSystemInfo({
+						success: function(res) {
+							req(res)
+						}
+					});
+				})
+			},
+			async createPoster() {
+				let that = this
+				// 获取设备信息，主要获取宽度，赋值给canvasW 也就是宽度：100%
+				that.SystemInfo = await that.getSystemInfo();
+
+				that.ewmImg = await that.getImageInfo(that.erweimasrc);
+				// this.canvasW = this.SystemInfo.windowWidth; // 画布宽度
+				that.ratio = that.SystemInfo.windowWidth / 750;
+				that.canvasW = that.cw * that.ratio;
+				this.canvasH = that.ch * that.ratio;
+				that.ewmW = that.ewmw * that.ratio;
+
+				// 如果主图，二维码图片，设备信息都获取成功，开始绘制海报，这里需要用setTimeout延时绘制，否则可能会出现图片不显示。
+				if (that.ewmImg.errMsg == 'getImageInfo:ok' && that.SystemInfo.errMsg == 'getSystemInfo:ok') {
+					console.log('二维码和屏幕信息加载完成')
+					// uni.showToast({
+					// 	icon: 'loading',
+					// 	mask: true,
+					// 	duration: 10000,
+					// 	title: '二维码生成中',
+					// });
+					setTimeout(() => {
+						var ctx = uni.createCanvasContext('myCanvas', that);
+						// 填充背景色，白色
+						ctx.setFillStyle('#fff'); // 默认白色
+						ctx.fillRect(0, 0, this.canvasW, this.canvasH) // fillRect(x,y,宽度，高度)
+						// drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
+						ctx.drawImage(this.ewmImg.path, (this.canvasW / 2 - this.ewmW / 2), 100 * that.ratio,
+							this.ewmW, this.ewmW) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度,二维码的宽,高)
+
+
+						// 3、绘制商品标题，多余文字自动换行
+						ctx.setFontSize(16); // setFontSize() 设置字体字号
+						ctx.setFillStyle('#333'); // setFillStyle() 设置字体颜色
+						ctx.setTextAlign('center')
+						ctx.fillText('请使用支付宝扫描上方二维码', this.canvasW / 2, 200 * that.ratio + that.ewmW)
+						ctx.draw(false, (ret) => { // draw方法 把以上内容画到 canvas 中。
+							that.fina = true
+							uni.canvasToTempFilePath({ // 保存canvas为图片
+								canvasId: 'myCanvas',
+								quality: 1,
+								fileType: 'jpg',
+								complete: function(res) {
+									// 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
+									console.log(res)
+									that.canvasShow = false
+									that.shareQrcodeUrl = res.tempFilePath
+									that.$forceUpdate()
+									setTimeout(function() {
+										console.log(that.shareQrcodeUrl, that
+											.canvasShow)
+									}, 2000)
+								},
+							})
+						});
+					}, 1500)
+				} else {
+					console.log('err')
+				}
+			},
+			qrR(res) {
+				this.erweimasrc = res
+				console.log(res, '二维码图片');
+				this.createPoster()
+			},
 			// 获取附近门店
 			storeList(source) {
 				let that = this
@@ -262,9 +459,9 @@
 						data
 					}) => {
 						// console.log(data, '结果');
-						if(data && data.list && data.list.length > 0) {
+						if (data && data.list && data.list.length > 0) {
 							that.selctStore = data.list[0]
-							if(data.list[0].distance*1 <= 100 ) {
+							if (data.list[0].distance * 1 <= 100) {
 								that.isFj = true
 							}
 						}
@@ -283,7 +480,7 @@
 						obj.getlocationSetInit(e)
 					},
 					fail(e) {
-						if(e.errCode==22){
+						if (e.errCode == 22) {
 							uni.showModal({
 								title: '定位开启错误',
 								content: '请查看是否已经开启定位服务',
@@ -304,8 +501,7 @@
 							// 调用鉴定位置变化事件
 							this.getlocationSetInit(e)
 						},
-						fail() {
-						}
+						fail() {}
 					})
 				})
 				// #endif
@@ -326,7 +522,7 @@
 					this.storeList()
 				}
 			},
-			
+
 			// 获取使用说明
 			getSm() {
 				details({}, 1).then(res => {
@@ -348,7 +544,7 @@
 					data
 				}) => {
 					this.now_money = data.now_money;
-					if(data.store_id > 0) {
+					if (data.store_id > 0) {
 						this.couldTj = true
 						this.is_tj = true
 					}
@@ -382,7 +578,7 @@
 				}
 				that.loading = true
 				rentCreate({
-					store_id: that.is_tj?that.userinfo.store_id: that.selctStore.id,
+					store_id: that.is_tj ? that.userinfo.store_id : that.selctStore.id,
 					rent_id: that.selectTc.id,
 					// #ifdef H5
 					from: 'weixin', //来源
@@ -600,6 +796,7 @@
 					text-decoration: line-through;
 					color: #999999;
 				}
+
 				.tc-time-t {
 					font-size: 28rpx;
 					font-weight: bold;
@@ -869,15 +1066,33 @@
 	.zfz {
 		background: #999 !important;
 	}
+
 	.top-tit {
 		width: 750rpx;
 		background-color: #fff;
 		padding: 10rpx;
+
 		.tit {
 			font-size: 28rpx;
-			background-color:rgba(108, 217, 192, 0.4);
+			background-color: rgba(108, 217, 192, 0.4);
 			border-radius: 5rpx;
 			padding: 10rpx;
 		}
 	}
+
+	.myj-wrap {
+		width: 600rpx;
+
+	}
+
+	.qrimg {
+		position: absolute;
+		left: -9999rpx;
+		top: -9999rpx;
+	}
+
+	.ewm-wrap {
+		border-radius: 20rpx;
+		overflow: hidden;
+	}
 </style>