FE_nakadai_miniProgram/pages/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 ref="qrcode" canvas-id="qrcode" :size="size" :value="link"></u-qrcode>
				<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),
			}
		},
		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=0`
					this.link = `http://121.37.12.51/backstage/#/join?accountId=${accountId}&id=${this.id}&isTeam=0`
				}).catch(e => {})
			},
		}
	}
</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 {
		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;
	}
	.tips {
		margin: 30rpx 0 20rpx;
		font-size: 24rpx;
		color: #333;
	}
	.warn {
		font-size: 24rpx;
		color: #f00;
	}
}
</style>