推广人二维码

src/projects/business/views/Master/Mine/Center.vue

@@ -14,9 +14,11 @@
 								<img :src="person_data.faceImageUrl" />
 							</div>
 							<h2>{{wellcomme}}{{person_data.name}}</h2>
-							<a herf="" class="iconfont icon-icon- mui-h3"></a>
+							<router-link :to="{name:'MasterPromoteCode'}" class="iconfont icon-icon- mui-h3"></router-link>
 						</div>
-						<h4 class="flew-items"><span class="iconfont icon-dianhua3"></span>{{person_data.phone}}<!-- <span>编号:{{person_data.id}}</span> --></h4>
+						<h4 class="flew-items">
+							<span class="iconfont icon-dianhua3"></span>{{person_data.phone}}
+						</h4>
 					</div>
 					<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" @click="editInfo">
 						编辑资料
@@ -31,8 +33,8 @@
 				<ul class="mui-table-view mui-table-view-chevron vongi-news">
 					<li class="mui-table-view-cell">
 						<router-link :to="{name:'MasterMineBillList'}" class="mui-navigate-right">
-                        	<img src="~$project/assets/img/cicon32.png" width="18" /> 我的账单
-                        </router-link >
+							<img src="~$project/assets/img/cicon32.png" width="18" /> 我的账单
+						</router-link>
 					</li>
 					<li class="mui-table-view-cell">
 						<a class="mui-navigate-right">

src/projects/business/views/Master/Promote/Code.vue

@@ -1,38 +1,102 @@
 <template>
-<div>
-    <header class="mui-bar mui-bar-nav">
-				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-				<h1 class="mui-title">二维码</h1>
-			</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="~$project/assets/img/03.jpg" width="50" /></div>
-						<div class="mui-media-body">
-							<h3>赵双龙</h3>
-							<p class='mui-ellipsis flew-items'><span class="iconfont icon-dianhua3 color4fc5f7"></span>手机号码：15500001111</p>
-							<p class='mui-ellipsis'><span class="iconfont icon-zhengjian color55f868"></span>平台ID：10016</p>
-						</div>
-					</div>
-					<div class="vongi-center">
-						<img src="~$project/assets/img/02.jpg" alt="" class="vongi-qrcode-ma margin10">
-						<p>使用微信扫一扫或长按保存二维码 </p>
-						<p>关注公众号完成注册</p>
+	<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>
+	</div>
 </template>
 
+
 <script>
-export default {
-        mounted() {
-            document.body.style.backgroundColor = '#3385FF';
-        },
-        destroyed() {
-            document.body.style.backgroundColor = '';
-        }
-    }
+	import Common from "$project/components/Common.vue";
+	import Loading from "$project/components/Loading.vue";
+	import TopHeader from "$project/components/TopHeader.vue";
+	import NavMenu from "@/components/NavMenu.vue";
+	import {
+		mapGetters,
+		mapMutations
+	} from "vuex";
+	import {
+		convertCanvasToImage,
+	} from '$project/utils'
+	import QRCode from 'qrcodejs2'
+	export default {
+		name: "MasterPromoteCode",
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+			NavMenu,
+		},
+		data() {
+			return {
+				pageTitle: "推广二维码",
+
+				isLoading: false,
+
+				qrCodeUrl: '',
+				qrCodeImg: '',
+			};
+		},
+		created() {
+			var host = window.location.href.split("#")[0];
+			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>

src/projects/home/main.js

@@ -24,6 +24,12 @@ router.beforeEach((to, from, next) => {
 			let vConsole = new Vconsole()
 		}
 	}
+
+	//如果传递过来了推广人id则存储
+	if (to.query.promote_id) {
+		store.commit('SET_INVITATION_CODE', to.query.promote_id);
+	}
+
 	next();
 })