FE_preschoolEdu_miniProgram/team/qrcode/qrcode.vue

<template>
	<view class="page">
		<view class="wrap">
			<view class="inner">
				<view class="info">
					<image class="avatar" :src="info.userAvatars || Common.avatar" mode=""></image>
					<view class="text">
						<view class="invite">
							<text class="name">{{ info.userName }}</text> 邀请你加入组织
						</view>
					</view>
				</view>
				<view class="com">{{ team.partnerClassificationName }}</view>
				
				<button class="share" open-type="share">邀请</button>
				<!-- <u-qrcode class="qrcode" ref="qrcode" canvas-id="qrcode" isQueueLoadImage :size="size" :value="link" @complete="qrcodeComplete"></u-qrcode>
				<image class="qrcode-img" :src="qrcodeImg" show-menu-by-longpress @click="previewImage"></image>
				
				<view class="tips" style="margin-top: 20rpx;">扫一扫，加入我们吧</view>
				<view class="tips">长按可转发至微信好友和保存图片</view> -->
			</view>
			<!-- <view class="warn">邀请二维码失效日期：{{ expireTime }}</view> -->
		</view>
	</view>
</template>

<script>
	import { generateInvitationCode } from '@/apis/modules/parner.js'
	import { viewUserDetails } from '@/apis/modules/user.js'
	import Common from '@/config/common'
	export default {
		data() {
			return {
				Common,
				team: uni.getStorageSync('team'),
				teamId: uni.getStorageSync('teamId'),
				openId: uni.getStorageSync('openId'),
				platformId: uni.getStorageSync('platformId'),
				info: {},
				expireTime: '',
				qrcode: '',
				link: '',
				qrcodeImg: '',
				size: uni.upx2px(420),
			}
		},
		onShow() {
			this.getInfo()
		},
		// 监听用户点击右上角菜单的「转发」按钮时触发的事件
		onShareAppMessage(e) {
			return {
				title: `${this.info.userName}邀请你加入${this.team.organizationName}`,
				path: `/team/join/join?accountId=${this.team.accountId}&id=${this.teamId}&isTeam=0&teamName=${this.info.userName}&platformId=${this.platformId}`,
				imageUrl: "http://124.71.79.122/images/miniProgram/share.jpg",
				success: function(res) {
					if (res.errMsg == 'shareAppMessage:ok') {
						console.log("成功", res)
					}
				},
				fail: function(res) {
					console.log("失败", res)
				}
			}
		},
		methods: {
			// 个人信息
			async getInfo() {
				const { result } = await viewUserDetails({
					openId: this.openId
				})
				if (result.hrUserInfo) {
					this.info = result.hrUserInfo
					this.getQrcode()
				}
			},
			// 生成二维码
			getQrcode() {
				const { team } = this
				// 生成邀请码
				generateInvitationCode(this.platformId).then(({ expireTime }) => {
					const date = new Date(Date.now() + expireTime * 1000) // 返回的秒，要*1000
					this.expireTime = `${date.getFullYear()}-${this.$util.preZero(date.getMonth() + 1)}-${this.$util.preZero(date.getDate())} ${this.$util.preZero(date.getHours())}:${this.$util.preZero(date.getMinutes())}:${this.$util.preZero(date.getMinutes())}`
					this.link = `http://124.71.79.122/#/join?accountId=${team.accountId}&id=${this.teamId}&isTeam=0&teamName=${this.info.userName}&platformId=${this.platformId}`
					// this.link = `http://192.168.31.125:8098/#/join?accountId=${team.accountId}&id=${this.teamId}&isTeam=0&teamName=${this.info.userName}&platformId=${this.platformId}`
				}).catch(e => {})
			},
			// 二维码组件生成完成钩子。生成后把图片导出给image组件，image组件才可以长按二维码转发
			qrcodeComplete() {
				this.$refs.qrcode.toTempFilePath({
					success: res => {
						this.qrcodeImg = res.tempFilePath
					}
				});
			},
			previewImage(e){
				uni.previewImage({
					// 需要预览的图片链接列表。若无需预览，可以注释urls
					urls: [e.target.src],
					// 为当前显示图片的链接/索引值
					current: e.target.src,
					// 图片指示器样式	
					indicator:'default',
					// 是否可循环预览
					loop:false,
					// 长按图片显示操作菜单，如不填默认为保存相册
					// longPressActions:{
					// 	itemList:[this.l('发送给朋友'),this.l]
					// },
					success: res => {
						console.log('previewImage res', res);
					}, 
					fail: err => {}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.page {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	overflow: hidden;
}
.wrap {
	padding-bottom: 40rpx;
	text-align: center;
	background-color: #fff;
	.inner {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 40rpx 80rpx 0;
	}
	.info {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		text-align: left;
	}
	.avatar {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
		border-radius: 50%;
	}
	.invite {
		font-size: 26rpx;
	}
	.name {
		margin-right: 5rpx;
		font-size: 30rpx;
		color: $uni-primary;
	}
	.com {
		margin: 20rpx 0;
		font-size: 30rpx;
	}
	.share {
		width: 300rpx;
		margin: 0;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		background-color: $uni-primary;
		border-radius: 40rpx;
		border: 0;
	}
	.qrcode {
		display: none;
	}
	.qrcode-img {
		width: 420rpx;
		height: 420rpx;
	}
	.tips {
		margin-bottom: 10rpx;
		font-size: 24rpx;
		color: #333;
	}
	.warn {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #f00;
	}
}
</style>