jp-xpgj-GA-file/src/projects/business/views/Master/Promote/Code.vue

<template>
	<div>
		<common @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="pageTitle"></top-header>

		<div class="mui-content">
			<div class="vongi-qrcode-tg">
				<div class="flew-items vongi-sqtp-list margin10">
					<div class="mui-media-object mui-pull-left "><img :src="person_data.faceImageUrl" width="50" /></div>
					<div class="mui-media-body">
						<h3 v-text="person_data.name"></h3>
						<p class='mui-ellipsis flew-items'><span class="iconfont icon-dianhua3 color4fc5f7"></span>手机号码：{{person_data.phone}}</p>
						<p class='mui-ellipsis'><span class="iconfont icon-zhengjian color55f868"></span>平台ID：{{person_data.id}}</p>
					</div>
				</div>
				<div class="vongi-center" id="qrcode_show">
					<img :src="qrCodeImg" class="vongi-qrcode-ma margin10">
					<p>使用微信扫一扫或长按保存二维码 </p>
					<p>关注公众号完成注册</p>
				</div>

				<div id="qrcode" style="display: none;"></div>
			</div>
		</div>
	</div>
</template>


<script>
	import Common from "$project/components/Common.vue";
	import Loading from "$project/components/Loading.vue";
	import TopHeader from "$project/components/TopHeader.vue";
	import {
		mapGetters,
		mapMutations
	} from "vuex";
	import {
		convertCanvasToImage,
	} from '$project/utils'
	import QRCode from 'qrcodejs2'
	export default {
		name: "MasterPromoteCode",
		components: {
			Common,
			Loading,
			TopHeader,
		},
		data() {
			return {
				pageTitle: "推广二维码",

				isLoading: false,

				qrCodeUrl: '',
				qrCodeImg: '',
			};
		},
		created() {
			var host = window.location.href.split("#")[0];
			host = host.replace('business', 'home');
			this.qrCodeUrl = host + '#/?promote_id=' + this.person_data.id
		},
		methods: {
			//生成二维码
			qrcode() {
				let qrcode = new QRCode('qrcode', {
					width: 200,
					height: 200,
					text: this.qrCodeUrl, // 二维码内容  
					correctLevel: QRCode.CorrectLevel.M
					// render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
					// background: '#f0f'  
					// foreground: '#ff0'  
				})
				console.log(qrcode)
				var canvas = document.getElementsByTagName('canvas')[0];
				this.qrCodeImg = convertCanvasToImage(canvas);
				document.getElementById('qrcode_show').getElementsByTagName("img")[0].style.margin = '15px auto';
			},
			asynCallBack() {},
		},
		mounted() {
			//生成二维码
			this.qrcode()
			document.body.style.backgroundColor = '#3385FF';
		},
		destroyed() {
			document.body.style.backgroundColor = '';
		},
		computed: {
			...mapGetters({
				openId: "wx_openid",
				token: "token",
				person_data: "person_data",
				person_popedom: "person_popedom",
			}),
		},
	};
</script>

<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style scoped src="$project/assets/css/iconfont.css"></style>
<style>
</style>