H5_QiCaiYao/page_salesman_index/index/invite.vue

<template>
	<div class="view">

		<div class="imgBox">
			<image :src="$util.img(imagetwo)" mode=""></image>
		</div>

		<div class="text1">
			被您邀请的客户，当TA注册成功后就是您的客户拓展，新客户从未如此方便
		</div>

		<div class="lineBox">
			<u-line></u-line>
		</div>

		<div class="text2">
			面对面扫码注册
		</div>

		<div class="QRcode">
			<image :src="$util.img(imaone)" mode=""></image>
		</div>

		<div class="text1">
			邀请好友扫码，注册更便捷
		</div>

		<div class="text3">
			<span>您的邀请码：</span>
			<span class="code">{{Invitationcode}}</span>
		</div>

		<div class="text4">
			复制邀请码给客户，TA在注册时填写的邀请
		</div>


		<div class="btnBox">
			<div class="btn" @click="showPopup">更多邀请方式</div>
			<div class="text">有{{memberCount}}位已成为您的客户</div>
		</div>

		<u-popup :show="show" @close="close" @open="open" round="12">
			<view class="popup_view">
				<div class="popup">
					<div class="item" @click="Friends">
						<image :src="$util.img(`/upload/weapp/pageSalesman/wx.png`)" mode=""></image>
						<div class="text">微信好友</div>
					</div>
					<div class="item" @click="Moments">
						<image :src="$util.img(`/upload/weapp/pageSalesman/pyq.png`)" mode=""></image>
						<div class="text">朋友圈</div>
					</div>
					<!-- <div class="item" @click="QQFriend">
						<image :src="$util.img(`/upload/weapp/pageSalesman/qq.png`)" mode=""></image>
						<div class="text">QQ好友</div>
					</div> -->
				</div>
				<div class="btnbox" @click="closePopup">
					<div class="btn">取消</div>
				</div>
			</view>
		</u-popup>

	</div>
</template>

<script>
	import appShare, { closeShare } from '@/uni_modules/zhouWei-APPshare/js_sdk/appShare';
	export default {
		data() {
			return {
				show: false,
				list: [1],
				imaone: '',
				imagetwo: '',
				Invitationcode: '',
				memberCount: -1,
			}
		},
		onShow() {
			this.$api.sendRequest({
				url: '/api/salasman/qrcode',
				data: {},
				success: res => {
					console.log(res, '二维码');
					this.Invitationcode = res.data.invite_code
					// console.log(res.data.path.weapp.img);
					this.imaone = res.data.path.h5.img
					this.imagetwo = res.data.path.weapp.img
				}
			})
			this.getList()
		},
		methods: {
			// queryList(pageNo, pageSize) {
			// 	this.$api.sendRequest({
			// 		url: '/api/salasman/qrcode',
			// 		data: {},
			// 		success: res => {
			// 			console.log(res, '二维码');
			// 			this.Invitationcode = res.data.invite_code
			// 			// console.log(res.data.path.weapp.img);
			// 			this.imaone = res.data.path.h5.img
			// 			this.imagetwo = res.data.path.weapp.img
			// 		}
			// 	})
			// 	this.$refs.paging.complete(this.list);
			// },
			getList() {
				this.$api.sendRequest({
					url: '/api/salasman/getMemberPageList',
					success: res => {
						this.memberCount = res.data.count
					}
				})
			},
			showPopup() {
				// this.show=true
				this.Friends()
			},
			closePopup() {
				this.show = false
			},
			open() {

			},
			Friends() {
				console.log('微信好友');
				let shareData = {
					shareUrl: "http://publish.jtyqt.com/qr269s",
					shareTitle: "齐采药的标题",
					shareContent: "齐采药的描述",
					shareImg: "https://cbtadmin.jtyqt.com/public/static/img/default_img/head.png",
					appId: "wx3c0b463d3079d069", // 默认不传type的时候，必须传appId和appPath才会显示小程序图标
					// appPath : "pages/home/home",
					// appWebUrl : "https://kemean.com/",
				};
				// 调用
				let shareObj = appShare(shareData, res => {
					console.log("分享成功回调", res);
					// 分享成功后关闭弹窗
					// 第一种关闭弹窗的方式
					closeShare();
				});
				// setTimeout(() => {
				// 	// 第二种关闭弹窗的方式
				// 	shareObj.close();
				// }, 5000);
				// uni.shareWithSystem({
				// 	  type: "text",
				// 	  summary: this.detailData.resourceName + summary,
				// 	  href: href,
				// 	  imageUrl: "../../../static/logo.png",
				// 	  success(){
				// 	      console.log('分享成功');
				// 	    // 分享完成，请注意此时不一定是成功分享
				// 	  },
				// 	  fail(){
				// 	      console.log('分享失败');
				// 	    // 分享失败
				// 	  },
				// 	  complete() {
				// 		  console.log('分享完成');
				// 	  }
				// 	});

			},
			Moments() {
				// uni.share({
				// 	provider: "weixin",
				// 	scene: "WXSceneTimeline",
				// 	type: 2,
				// 	imageUrl: "https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
				// 	success: function (res) {
				// 		console.log("success:" + JSON.stringify(res));
				// 	},
				// 	fail: function (err) {
				// 		console.log("fail:" + JSON.stringify(err));
				// 	}
				// });
			},
			QQFriend() {
				console.log('qq好友');
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.zp-l-container {
			display: none;
		}
	}

	.view {
		min-height: 100vh;
		background-color: white;

		.imgBox {
			margin-top: 48rpx;
			text-align: center;

			image {
				width: 312rpx;
				height: 312rpx;
			}
		}

		.text1 {
			text-align: center;
			margin: 24rpx 48rpx 48rpx 48rpx;

			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}

		.lineBox {
			margin: 24rpx 48rpx 0 48rpx;
		}

		.text2 {
			margin-top: 32rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #222222;
			text-align: center;
		}

		.QRcode {
			margin-top: 52rpx;
			text-align: center;

			image {
				width: 282rpx;
				height: 282rpx;
			}
		}

		.text3 {
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			text-align: center;

			.code {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #F33B50;
			}
		}

		.text4 {
			margin-top: 16rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			text-align: center;
		}

		.btnBox {
			margin-top: 200rpx;
			padding-bottom: 94rpx;
			padding: 0 32rpx 94rpx 32rpx;
			box-sizing: border-box;
			width: 100%;

			.btn {
				width: 100%;
				height: 80rpx;
				background: #21BBF3;
				border-radius: 40rpx;

				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;

				display: flex;
				align-items: center;
				justify-content: center;
			}

			.text {
				margin-top: 16rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				text-align: center;
			}
		}

	}

	.popup_view {
		.popup {
			padding: 88rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.item {
				image {
					height: 128rpx;
					width: 128rpx;
				}

				.text {
					text-align: center;
				}
			}
		}

		.btnbox {
			margin-bottom: 78rpx;
			padding: 0 32rpx;

			.btn {
				height: 80rpx;
				background: #F7F7F7;
				border-radius: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #999999;
			}
		}
	}
</style>