web-app_taiwan/pages/share/box2.vue

<template>
		<view class="">
			<view class="pc-container">
			        <image :src="imgurl" mode="aspectFill" @longpress="saveImage"></image>
			        <canvas canvas-id="mycanvas" style="width: 590rpx;height: 998rpx;backgroundColor: #FFFFFF" v-show="canvasShow"></canvas>
			</view>
			<view class="basecolor sharetext">长按二维码发送给客户即可邀请加入</view>
			<view class="qrimg">
			    <tki-qrcode
			    ref="qrcode"
			    :val="val"
				:icon="icon"
			    :size="size"
			    :background="background"
			    :foreground="foreground"
			    :pdground="pdground"
			    :lv="lv" 
				@result="qrR"
			    :onval="onval"
			    :loadMake="loadMake"/>
			</view>
		</view>
</template>
<script>
	import { mapState } from 'vuex'
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"//tkiQrcode二维码生成插件可在插件市场自行下载
	import { _API_GzhWebInit } from '@/apis/verify.js'
    export default {
		components: {tkiQrcode},
		data() {      
			return {
				bgc:'../../static/white.png',
				imgurl:'',
				Path:'',
				canvasShow:true,
				src: '',
				// imp:'../../static/index.html',
				platform:'',
				val: '', // 要生成的二维值 可以跳转一个新界面
				size: 450, // 二维码大小
				background: '#fff', // 背景色
				foreground: '#000000', // 前景色
				pdground: '#000000', // 角标色 
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码    （一定要注意这个值的设置 刷新二维码使用的）
				loadMake: true, // 组件加载完成后自动生成二维码
				icon:'../../static/avatar.jpg'
            }
        },
            onHide() {
                uni.removeStorageSync('person-card');
            },
            mounted() {
			//如果本地有图片了，直接取，解决一些页面切换canvas没有重画
                // if(uni.getStorageSync('person-card')){
                //     // this.canvasShow = false;
                //     this.imgurl = uni.getStorageSync('person-card');
                // }else{
                //     // this.canvasImage();
                // }    
            },
			onLoad() {
				console.log("show")
				_API_GzhWebInit().then(res => {
					this.val=res.url
				})
			},
            methods: {
				qrR(path){
					//获取到的二维码path是base64格式
                    uni.showLoading({
                        title:'加载中',
                        mask:true
                    })
					let { nickname, id } = this.userinfo
                    let myCanvas = uni.createCanvasContext('mycanvas', this); 
					myCanvas.drawImage('../../static/white.png', 0, 0, 375, uni.upx2px(1020));//设置一个纯白色背景图，否则生成的图片背景是透明的
					myCanvas.drawImage('../../static/avatar.jpg',uni.upx2px(250),50, 60,60);
					let fontSizea = 18;
					myCanvas.fillStyle="#333333";
					myCanvas.font = `bold ${fontSizea}px Arial`;//绘制文字
					myCanvas.textAlign ='center'
					myCanvas.fillText(`“${nickname.length > 18 ? nickname.slice(0, 18) + '...' : nickname }”`, uni.upx2px(300), 130)
					myCanvas.fillText('邀请你加入大卫博士',uni.upx2px(300),155);
					//drawImage只能绘制本地图片和base64图片，无法绘制网络图片以及服务端返回的图片
					myCanvas.drawImage(path,uni.upx2px(74),165,uni.upx2px(460), uni.upx2px(460));
					myCanvas.fillStyle="#F76454";
					myCanvas.fillText('长按-识别二维码-填写信息',uni.upx2px(300),uni.upx2px(870));
					//开始绘画，必须调用这一步，才会把之前的一些操作实施
					myCanvas.draw(true,()=>{
					    uni.canvasToTempFilePath({
					        canvasId: 'mycanvas',
					        success: (res) => {
					            // 在H5平台下，tempFilePath 为 base64
					            this.imgurl = res.tempFilePath;
					            // this.canvasShow = false;
					            uni.hideLoading();
					            uni.setStorageSync('person-card',this.imgurl);
					          },
					        fail: () => {
					            uni.showToast({
					                title: '名片加载失败',
					                duration: 2000 
					            });
					        }
					    });
					}); 
                },
            },
			computed: {
				...mapState([
					'userinfo'
				])
			}
	}
</script>

<style lang="scss">
   image{
       width: 680rpx;
       height: 1000rpx;
	   border-radius: 14rpx;
	   background-color: #fff;
   }
   .pc-container{
       width: 680rpx;
	   height: 1000rpx;
       // height: 1000rpx;
       margin: 0 auto;
       overflow: hidden;
	   background-color: #FFFFFF;
	   margin-top: 20rpx;
   }
   .sharetext {
		font-size: 80rpx;
		text-align: center;
		margin: 8rpx 0;
		box-sizing: border-box;
		padding: 30rpx 24rpx;
   }
   .qrimg{
	   position: fixed;
	   top: 50;
	   left: 50;
	   z-index: -1;
   }
</style>