ct-mattress/page_user/promote.vue

<template>
	<view class="pages">
		<u-navbar title="推广码" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
			title-size='36' height='44'></u-navbar>

		<image class="pic" src="https://api.ccttiot.com/smartmeter/img/static/umgY9Xj3E8fWw7Lh2pSQ" mode="" @longpress="saveCanvas"></image>
		<view class="img">
			<canvas canvas-id="qrcode" style="width:100%;height: 100%;margin: 0 auto;background-color: #000;"/>
		</view>
		<view class="tuixx">
				<view class="">角色：{{txt}}</view>
			<view class="">推广人：{{obj.userName == undefined ? '' : obj.userName}}</view>
			<view class="" v-if="obj.investorName">创业者：{{obj.investorName == undefined ? '' : obj.investorName}}</view>
			<view class="">可支配分成比例：{{obj.point == undefined ? '' : obj.point}}%</view>
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js'
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#8883f0",
				},
				codeNo: '',
				obj:{},
				txt:'',
				bufferImg:''
			}
		},
		onLoad(option) {
			this.codeNo = option.codeNo
			this.qrFun(this.codeNo)
			this.getxx()
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创亿康',
				path: '/pages/index/index'
			}
		},

		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创亿康',
				query: '',
				path: '/pages/index/index'
			}
		},
		methods: {
			drawCanvas() {  
			      const ctx = uni.createCanvasContext('qrcode', this);  
			      ctx.setFillStyle('red');  
			      ctx.fillRect(10, 10, 150, 75);  
			      ctx.draw();  
			    },  
			    saveCanvas() {  
			      uni.canvasToTempFilePath({  
			        canvasId: 'qrcode',  
			        success: (res) => {  
			          console.log(res.tempFilePath); // 打印图片路径  
			          // 你可以在这里将图片保存到本地或其他操作  
			          uni.saveImageToPhotosAlbum({  
			            filePath: res.tempFilePath,  
			            success: function () {  
			              uni.showToast({  
			                title: '保存成功',  
			                icon: 'success'  
			              });  
			            }  
			          });  
			        },  
			        fail: (err) => {  
			          console.error(err);  
			        }  
			      });  
			    },
			// 获取 access_token
				// getAccessToken() {
				// 	let appid = 'wx992e3b549e0f879f',
				// 		secret = '';
				// 	uni.request({
				// 		method: "GET",
				// 		url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`,
				// 		success: (result) => {
				// 			let access_token = result.data.access_token
				// 			// 获取到 access_token 后 获取二维码
				// 			this.getQrCode(access_token)
				// 		}
				// 	})
				// },
				// // 获取二维码
				// getQrCode(token) {
				// 	 // 注意 access_token 参数是必须放在url后面 其余参数 要在data里面
				// 	uni.request({
				// 		method: "POST",
				// 		responseType: 'arraybuffer', // 注意一定要加 不然返回的Buffer流会乱码 导致无法转base64
				// 		url: `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${token}`,
				// 		data: {
				// 			page: '/pages/index/index', // 需要打开的页面路径
				// 			scene: this.codeNo // 这个是需要传递的参数
				// 		},
				// 		success: (result) => {
				// 			// 拿到buffer流 通过wx.arrayBufferToBase64 转成base64 在页面展示
				// 			// 如果请求时不加 responseType: 'arraybuffer' 拿到的buffer流转码会失败
				// 			this.bufferImg = "data:image/png;base64," + wx.arrayBufferToBase64(result.data);
				// 		},
				// 	})
				// },

			//**生成二维码**//
			qrFun: function(text) {
				// console.log('https://kang.chuangtewl.com/sc?c=' + text);
				this.qrShow = true
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: 'https://kang.chuangtewl.com/sc?c=' + text,
					size: 150,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {}
				})
			},
			// 查询信息
			getxx(){
				this.$u.get(`app/shareCode/byCode/${this.codeNo}`).then(res => {
					if(res.code == 200){
						this.obj = res.data
						if(res.data.userType == 5){
							this.txt = '经营场所'
						}else if(res.data.userType == 4){
							this.txt = '创业者'
						}else if(res.data.userType == 3){
							this.txt = '渠道商'
						}else if(res.data.userType == 2){
							this.txt = '合作伙伴'
						}
					}
				})
			}

		},
		mounted() {  
		    this.drawCanvas();  
		  }  
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-title {
		padding-bottom: 15rpx;
	}

	/deep/ .u-icon__icon {
		padding-bottom: 15rpx;
	}

	.pages {
		background-color: #F7FAFE !important;
		height: 100vh;
		width: 100%;
		padding: 48rpx 44rpx;
		box-sizing: border-box;
        position: relative;
		.pic {
			width: 660rpx;
			height: 1306rpx;
			position: absolute;
			top: 230rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		.img {
			width: 311rpx;
			height: 311rpx;
			position: absolute;
			top: 750rpx;
			left: 50%;
			transform: translateX(-50%);
			// padding-left: 40rpx;
			// padding-right: 20rpx;
			box-sizing: border-box;
			// border: 1px dashed #ccc;
		}

		.tuixx {
			position: fixed;
			bottom: 182rpx;
			left: 110rpx;

			view {
				font-size: 32rpx;
				color: #3D3D3D;
				margin-top: 8rpx;
			}
		}
	}
</style>