feat: 分享页面;

otherPages/binding/share/index.vue

@@ -1,124 +1,185 @@
 <template>
-	<view class="share w100 h100">
-		<view class="flex-colc content w100">
-			<image :src="url" mode=""></image>
-			<view class="btn color-fff size-30 flex-rowc" @tap="getImageInfo">
-				保存海报
-			</view>
-		</view>
-	</view>
+  <view class="page">
+    <view class="flex-colt content">
+      <view style="width: 750rpx; height: 1125rpx;">
+        <canvas id="myCanvas" canvas-id="firstCanvas1" type="2d" style="width: 100%; height: 100%;"></canvas>
+      </view>
+      
+      <view class="flex-rowc btns">
+        <button plain class="flex-rowc btn btn-save" @click="saveImg" >保存海报</button>
+      </view>
+    </view>
+  </view>
 </template>
 
-<script>
-	export default {
-		data() {
-			return {
-				url: "",
-			}
-		},
-		onLoad(options) {
-			this.url = options.url
-		},
-		methods: {
-			getImageInfo() {
-				// uni.getImageInfo({
-				// 	src: this.url,
-				// 	success: res => {
-				// 		this.savePosterPath(res.path)
-				// 	}
-				// })
-				uni.downloadFile({
-					url: this.url,
-					success: res => {
-
-						this.savePosterPath(res.tempFilePath)
-					}
-				})
-			},
-			savePosterPath(path) {
-				uni.getSetting({
-					success: res => {
-						console.log(res)
-						if (res.authSetting['scope.writePhotosAlbum']) {
-							uni.authorize({
-								scope: 'scope.writePhotosAlbum',
-								success: () => {
-									uni.saveImageToPhotosAlbum({
-										filePath: path,
-										success: () => {
-											uni.showToast({
-												title: "保存成功"
-											})
-										},
-										fail: () => {
-											uni.showToast({
-												title: "保存失败",
-												icon: "none"
-											})
-										}
-									})
-								}
-							})
-						} else {
-							uni.showModal({
-								title: "权限提醒",
-								content: "是否开启保存相册功能?",
-								success: res1 => {
-									if (res1.confirm) {
-										uni.openSetting({
-											success: result => {
-												uni.showToast({
-													title: "保存成功"
-												})
-											},
-											fail: () => {
-												uni.showToast({
-													title: "保存失败",
-													icon: "none"
-												})
-											}
-										})
-									}
+<script setup>
+	import { ref, reactive, computed } from 'vue'
+	import { onLoad } from '@dcloudio/uni-app'
+	import { useStore } from "vuex"
+	import authorize from '@/utils/authorize.js'
+
+	const store = useStore();
+
+	const configList = computed(() => {
+		return store.getters.configList
+	})
+
+	const url = ref()
+
+	const canvasData = reactive({
+		width: null,
+		height: null,
+		canvas: null
+	})
+
+	const savePath = ref()
+
+	const draw = () => {
+
+		uni.showLoading({
+			title: "拼命绘画中..."
+		})
+
+		wx.createSelectorQuery()
+			.select('#myCanvas') // 绘制的canvas的id
+			.fields({
+				node: true,
+				size: true
+			})
+			.exec(async (res) => {
+				const _canvas = res[0].node
+				// 渲染上下文
+				const ctx = _canvas.getContext('2d')
+				// Canvas 画布的实际绘制宽高
+				const width = res[0].width
+				const height = res[0].height
+				// 初始化画布大小
+				const dpr = wx.getWindowInfo().pixelRatio
+
+				//根据dpr调整
+				// dpr  2 4
+				//      3 6
+				console.log("--dpr", dpr)
+				_canvas.width = width * dpr
+				_canvas.height = height * dpr
+
+				let Ratio = _canvas.width / 750
+
+				canvasData.canvas = _canvas
+				ctx.scale(dpr, dpr)
+				ctx.clearRect(0, 0, width, height)
+
+				canvasData.width = _canvas.width
+				canvasData.height = _canvas.height
+
+				//背景图片
+				const bgImage = _canvas.createImage()
+				bgImage.src = configList.value.background_poster.paramValueImage
+				bgImage.onload = () => {
+
+					ctx.drawImage(bgImage, 0, 0, width, height)
+	
+					//二维码图片
+					const coderImage = _canvas.createImage()
+					coderImage.src = url.value
+					coderImage.onload = () => {
+						const x = 270 * Ratio / dpr
+						const y = 672 * Ratio / dpr
+						const size = 197 * Ratio / dpr
+						ctx.drawImage(coderImage, x, y, size, size)
+
+						uni.hideLoading()
+
+						setTimeout(() => {
+							wx.canvasToTempFilePath({
+								x: 0,
+								y: 0,
+								width: _canvas.width,
+								height: _canvas.height,
+								canvas: _canvas,
+								success: (res) => {
+									let tempFilePath = res.tempFilePath;
+									savePath.value = tempFilePath
+									console.log('--savePath', savePath.value)
+									// saveImgToPhone(tempFilePath)
 								},
-								fail: () => {
-									uni.showToast({
-										title: "保存失败",
-										icon: "none"
-									})
+								fail: (err) => {
+									console.log('--canvasToTempFilePath--fail', err)
 								}
-							})
-						}
+							});
+						})
 					}
-				})
+
+				}
+
+			})
+
+	}
+
+	const saveImg = () => {
+		authorize('scope.writePhotosAlbum').then((res) => {
+			saveImgToPhone(savePath.value)
+		})
+	}
+
+	const saveImgToPhone = (image) => {
+		/* 获取图片的信息 */
+		uni.getImageInfo({
+			src: image,
+			success: function(image) {
+				/* 保存图片到手机相册 */
+				uni.saveImageToPhotosAlbum({
+					filePath: image.path,
+					success: function() {
+						uni.showModal({
+							title: '保存成功',
+							content: '图片已成功保存到相册',
+							showCancel: false
+						});
+					},
+					complete(res) {
+						console.log(res);
+					}
+				});
 			}
-		}
+		});
 	}
+
+	onLoad((options) => {
+		// url.value = options.url
+		// 暂时用配置项
+		url.value = configList.value.share_qr_url.paramValueImage
+
+		draw()
+	})
 </script>
 
 <style scoped lang="scss">
-	.share {
-		background-color: #FFEFD8;
+	.page {
+		background-color: #FFFFFF;
 		width: 100vw;
-		height: 100vh;
+		min-height: 100vh;
 
 		.content {
-			position: fixed;
-			bottom: 30rpx;
-
+			padding-top: 19rpx;
 		}
 
-		image {
-			width: 250rpx;
-			height: 237rpx;
-			background-color: #fff;
-			margin-bottom: 186rpx;
+		.btns {
+			width: 100%;
+			margin-top: 7rpx;
 		}
 
 		.btn {
+			display: inline-block;
+			border: none;
 			width: 594rpx;
-			height: 94rpx;
+			height: auto;
+			padding: 27rpx 0;
 			border-radius: 94rpx;
 			background-color: #FFBF60;
+			color: #FFFFFF;
+			font-size: 30rpx;
+			line-height: 40rpx;
 		}
 	}
 </style>

utils/authorize.js

@@ -0,0 +1,53 @@
+
+
+
+function authorize(scope){
+	return new Promise((success, error) => {
+		uni.authorize({
+			/* scope.writePhotosAlbum 类型是保存到相册 */
+			scope,
+			success,
+			complete(res) {
+				/* 判断如果没有授权就打开设置选项让用户重新授权 */
+				uni.getSetting({
+					success(res) {
+						if (!res.authSetting[scope]) {
+							setting()
+						}
+					}
+				});
+			}
+		});
+		
+		function setting(){
+			uni.showModal({
+				title: '当前操作未授权，请授权！',
+				content: '拒绝授权将影响本小程序部分功能的使用',
+				confirmText: '授权',
+				success(e) {
+					if(!e.confirm){
+						return error()
+					}
+					uni.openSetting({
+						success(res) {
+							if (!res.authSetting[scope]) {
+								uni.showToast({
+									title: '授权失败',
+									icon: 'none',
+								})
+								return error()
+							}
+							success()
+						}
+					});
+				}
+			})
+		}
+	})
+}
+
+
+
+
+
+export default authorize