上传

pages.json

@@ -67,6 +67,9 @@
 			},
 			{
 				"path": "mine/help"
+			},
+			{
+				"path": "mine/promotion"
 			}
 		]
 	}],

pages_order/mine/promotion.vue

@@ -0,0 +1,283 @@
+<template>
+	<view class="promotion">
+		
+		
+		<navbar title="二维码" 
+		bgColor="#A3D250"
+		color="#fff"
+		leftClick @leftClick="$utils.navigateBack" />
+		
+		<view class="promotion-card">
+			<!-- <view class="user-info"> -->
+			<!-- <image class="image" :src="userInfo.headImage" mode="widthFix"></image> -->
+			<!-- <image class="image" src="../../static/logo.png" mode="widthFix"></image> -->
+			<!-- <view class="user-name">{{ userInfo.nickName }}</view> -->
+			<!-- <view class="user-name">湖南第一深情</view> -->
+			<!-- </view> -->
+			<!-- <view class="invitation-code-img">
+				<image 
+				style="width: 400rpx;"
+				:src="imagePath" mode="widthFix"></image>
+			</view> -->
+
+			<image style="width: 100%;" :src="imagePath" mode="widthFix"></image>
+
+			<!-- <view class="invitation-code">加油站: {{ title }}</view> -->
+			<canvas id="myCanvas" type="2d" canvas-id="firstCanvas1"></canvas>
+		</view>
+		<view class="btns">
+			<view class="btn"
+			@click="preservationImg(imagePath)">保存</view>
+			<!-- <view class="btn">立即邀请</view> -->
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mapState } from 'vuex'
+	export default {
+		name: 'Promotion',
+		computed: {
+			...mapState(['userInfo']),
+		},
+		data() {
+			return {
+				url: '',
+				title: '123123',
+				baseUrl: 'https://dianpin-img.xzaiyp.top/',
+				canvas: {},
+				imagePath: '',
+			}
+		},
+		onShow() {
+			this.getQrCode()
+			this.$store.commit('getUserInfo')
+		},
+		methods: {
+			getQrCode() {
+				this.$api('getInviteCode', res => {
+					if (res.code == 200) {
+						this.url = res.result.url
+						this.title = res.result.name
+						this.draw()
+					}
+				})
+			},
+			draw() {
+
+				uni.showLoading({
+					title: "拼命绘画中..."
+				})
+
+				wx.createSelectorQuery()
+					.select('#myCanvas') // 绘制的canvas的id
+					.fields({
+						node: true,
+						size: true
+					})
+					.exec((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
+						let Ratio = dpr * 2
+						console.log("bug", dpr)
+						canvas.width = width * dpr
+						canvas.height = height * dpr
+
+						this.canvas = canvas
+						ctx.scale(dpr, dpr)
+						ctx.clearRect(0, 0, width, height)
+						
+						ctx.fillStyle = '#fff'
+						ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+						//用户图片
+						// const image = canvas.createImage()
+						// image.onload = () => {
+						// 	ctx.drawImage(image, 30, 18, 40, 40)
+						// }
+						// image.src = '/public/img/wechar_1.png'
+						// image.src = this.userInfo.headImage
+						ctx.fillStyle = 'black'
+						ctx.font = '22px PingFangSC-regular';
+
+						let s = this.title || '加油站'
+
+						ctx.fillText(s, canvas.width / Ratio - s.length * 11, 50);
+
+						//二维码图片
+						const coderImage = canvas.createImage()
+						coderImage.src = this.baseUrl + this.url
+						coderImage.onload = () => {
+							ctx.drawImage(coderImage,
+								canvas.width / Ratio - 240 / 2, 100, 240, 240)
+						}
+
+
+						// 绘制完成后存储路径
+
+						setTimeout(() => {
+							wx.canvasToTempFilePath({
+								x: 0,
+								y: 0,
+								width: this.canvas.width,
+								height: this.canvas.height,
+								canvas,
+								success: (res) => {
+									var tempFilePath = res.tempFilePath;
+									this.imagePath = tempFilePath
+									uni.hideLoading()
+								}
+							});
+						}, 600);
+
+					})
+
+			},
+			back() {
+				uni.navigateBack(-1)
+			},
+			preservationImg(img) {
+				let that = this
+				uni.authorize({
+					/* scope.writePhotosAlbum 类型是保存到相册 */
+					scope: 'scope.writePhotosAlbum',
+					success() {
+						/* 已授权进入 */
+						/* 保存图片到相册方法方法 */
+						that.imgApi(img);
+					},
+					complete(res) {
+						/* 判断如果没有授权就打开设置选项让用户重新授权 */
+						uni.getSetting({
+							success(res) {
+								if (!res.authSetting['scope.writePhotosAlbum']) {
+									/* 打开设置的方法 */
+									that.openInstall();
+								}
+							}
+						});
+					}
+				});
+			},
+			imgApi(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);
+							}
+						});
+					}
+				});
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.promotion {
+		width: 100%;
+		height: 100vh;
+		background-color: $uni-color;
+		.promotion-card {
+			width: 90%;
+			margin: 100rpx auto 0rpx auto;
+			box-shadow: 0rpx 0rpx 15rpx rgba(0, 0, 0, .2);
+			border-radius: 15rpx;
+			padding: 40rpx 30rpx;
+			box-sizing: border-box;
+			background-color: #fff;
+
+			.user-info {
+				display: flex;
+				align-items: center;
+
+				.image {
+					width: 80rpx;
+					height: 80rpx;
+					border-radius: 50%;
+					margin-right: 10rpx;
+				}
+
+				.user-name {
+					font-size: 30rpx;
+				}
+			}
+
+			.invitation-code-img {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				margin: 100rpx 0rpx;
+
+				.image {
+					width: 30%;
+					border-radius: 50%;
+				}
+			}
+
+			.invitation-code {
+				text-align: center;
+				color: #818181;
+				font-size: 28rpx;
+			}
+		}
+
+		.btns {
+			position: fixed;
+			left: 0;
+			bottom: 0;
+			width: 100%;
+			height: 120rpx;
+			display: flex;
+			background: #fff;
+			font-size: 28rpx;
+			color: $uni-color;
+			.btn {
+				flex: 1;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				&:nth-child(2) {
+					background: orange;
+				}
+			}
+		}
+	}
+
+	#myCanvas {
+		position: fixed;
+		left: 100%;
+		/* visibility: hidden */
+		/* visibility: hidden; */
+		/* margin-top: 100rpx; */
+		margin: 68rpx auto;
+		width: 750rpx;
+		height: 750rpx;
+		/* line-height: 20px; */
+		background-color: rgba(255, 255, 255, 1);
+		text-align: center;
+	}
+</style>