FE_nakadai_miniProgram/team/qrcode/qrcode.vue

<template>
	<view class="page">
		<view class="wrap">
			<view class="inner">
				<view class="info">
					<image class="avatar" :src="avatar" mode=""></image>
					<view class="text">
						<view class="invite">
							<text class="name">{{ my.info.userName }}</text> 邀请你加入城市合伙人计划
						</view>
					</view>
				</view>
				<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, my } from '@/apis/modules/parner.js'
	export default {
		data() {
			return {
				id: '',
				avatar: uni.getStorageSync('avatar') || '@/static/image/avatar.png',
				my: {
					info: {},
				},
				expireTime: '',
				qrcode: '',
				link: '',
				size: uni.upx2px(420),
				qrcodeImg: ''
			}
		},
		onShow() {
			const pages = getCurrentPages()
			const { options } = pages[pages.length - 1]
			this.id = options.id || ''
			this.getQrcode()
			this.getInfo()
		},
		methods: {
			// 获取个人信息
			getInfo() {
				my().then(({ my }) => {
					this.my = my
				}).catch(e => {})
			},
			// 生成二维码
			getQrcode() {
				const accountId = uni.getStorageSync('accountId')
				// 生成邀请码
				generateInvitationCode(accountId).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 = `https://huorantech.cn/#/join?accountId=${accountId}&id=${this.id}&isTeam=1`
					this.link = `http://121.37.12.51/backstage/#/join?accountId=${accountId}&id=${this.id}&isTeam=1`
				}).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;
	}
	.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>