FE_CRM/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">{{ userName }}</text> 邀请你加入城市合伙人计划
						</view>
					</view>
				</view>
				<view class="com">{{ team.partnerClassificationName }}</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 } from '@/apis/modules/parner.js'
	export default {
		data() {
			return {
				avatar: uni.getStorageSync('avatar') || '@/static/image/avatar.png',
				userName: uni.getStorageSync('userName'),
				expireTime: '',
				qrcode: '',
				link: '',
				size: uni.upx2px(420),
				team: uni.getStorageSync('team')
			}
		},
		onShow() {
			this.getQrcode()
		},
		methods: {
			// 生成二维码
			getQrcode() {
				const { team } = this
				// 生成邀请码
				generateInvitationCode(uni.getStorageSync('team').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())}`
					const team = this.team
					this.link = `https://huorantech.cn/#/join?accountId=${team.accountId}&id=${team.teamId}&isTeam=0`
					// this.link = `http://192.168.31.125:8086/#/join?accountId=${team.accountId}&id=${team.teamId}&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;
		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>