discounts-minapp/invite/invite.vue

<template>
	<view class="invite">
		<view class="title">
			邀请好友加入慧研学惠生活
		</view>
		<view class="desc">
			您将获得现金红包奖励
		</view>
		
		<view class="code-box">
			<image class="head" :src="userInfo.imgPath" mode=""></image>
			<view class="user-name">
				{{userInfo.nickname}}
			</view>
			
			<view class="qrcode-box">
				<u--image width="380rpx" height="380rpx" :src="src">
				 <template v-slot:loading>
				    <u-loading-icon size="56rpx" color="#FF4C3A"></u-loading-icon>
				  </template>
				</u--image>
			</view>
			
		</view>
		
		<view class="save-btn">
			
		<u-button color="linear-gradient(265deg, #FF4A39 0%, #FC8B45 100%)" shape="circle" type="primary" @click="save">保存二维码</u-button>
		</view>
		
	</view>
</template>

<script>
	import {BASE_URL} from '@/utils/config.js'
	export default {
		data() {
			return {
				src: '',
				userInfo:{}
			}
		},
		methods: {
			save() {
				uni.getImageInfo({
					src:this.src,
					success: function (image) {
						uni.saveImageToPhotosAlbum({
							filePath:image.path
						})
					}
				})
			},
		},
		created() {
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			 uni.request( {
				 url:BASE_URL+'/zswl-cloud-bdb/promotion/qrcode',
				 method:"post",
				data: {
					"scene": JSON.parse(uni.getStorageSync('userInfo')).userId ,
				},
				responseType:'arraybuffer'
			}).then(res=>{
				this.src =  'data:image/png;base64,' + uni.arrayBufferToBase64(res.data)
			})
		}
	}
</script>

<style lang="scss">
	.invite .u-image__loading,.u-image__error{
		background-color: #fff!important;
	}
.invite{
	padding: 0 30rpx;
	min-height: 100vh;
	background: url('http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/SpRgpIr81Trt13ba08b3b78f59f72c0a555b82b73492.png/1.png') no-repeat;
	background-size: 100% 100%;
	
	.title{
		text-align: center;
		font-size: 48rpx;
		font-weight: 800;
		margin-top: 178rpx;
	}
	.desc{
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #999999;
		text-align: center;
	}
	
	.code-box{
		width: 690rpx;
		height: 650rpx;
		background: #fff;
		box-shadow: 0rpx 6rpx 20rpx 2rpx rgba(0,0,0,0.06);
		border-radius: 16rpx;
		position: relative;
		margin-top: 110rpx;
		.head{
			width: 162rpx;
			height: 162rpx;
			border-radius: 50%;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		.user-name{
			padding-top: 100rpx;
			text-align: center;
			font-size: 32rpx;
			color: #222222;
			font-weight: bold;
		}
		.qrcode-box{
			width: 380rpx;
			height: 380rpx;
			margin: 80rpx auto;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
	}
	
	.save-btn {
		position: fixed;
		bottom: 100rpx;
		width: calc(100% - 60rpx) ;
	}
}
</style>