yanzong_qianduan/pages/invite/index.vue

<template>
	<view class="invite">
		<view class="invite-notice">
			<u-notice-bar mode="horizontal" :list="list" color="#fff" bg-color="rgba(255,255,255,0.22)"></u-notice-bar>
		</view>
		<view class="invite-hd">
			<image :src="$picUrl+'/static/news/invite-bg.png'"></image>
			<view class="btn"></view>
			<view class="rule" @click="openPage(4)"></view>
		</view>
		<view class="invite-bd">
			<view class="invite-bd-a">
				<view class="a">
					<view class="l">
						累计邀请好友(人）
						<view class="p">{{info.count_people}}</view>
					</view>
					<view class="l">
						累计现金奖励(元）
						<view class="p">{{info.money}}</view>
					</view>
				</view>
				<view class="b" @click="openPage(1)">
					我的邀请<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="c" @click="openPage(2)">
					立即提现<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="invite-bd-b">
				<image :src="$picUrl+'/static/news/invite-bg2.png'"></image>
				<view class="a">
					<view class="l">
						可得{{info.integral}}积分<br />{{info.coupon_name}}
					</view>
					<view class="l">
						可返现{{info.one_order_rate}}%
					</view>
					<view class="l">
						{{info.one_order_rate}}元{{info.coupon_name}}
					</view>
				</view>
			</view>
			<view class="invite-bd-c">
				<image :src="$picUrl+'/static/news/invite-bg3.png'"></image>
				<view class="a">
					<view class="l">
						{{info.one_order_rate}}元{{info.coupon_name}}
					</view>
					<view class="l">
						{{info.integral}}积分
					</view>
					<view class="l">
						首单返{{info.one_order_rate}}%
					</view>
				</view>
			</view>
			<view class="invite-bd-d">
				<image :src="$picUrl+'/static/news/invite-bg4.png'"></image>
				<view class="p" @click="openPage(3)">立即邀请</view>
			</view>
		</view>
		<!--  -->
		<view class="invite-popup" v-if="isPopup">
				<view class="popup" @click="download()">
					<image class="bg" :src="qrcode"></image>
					<view class="tips">保存海报图</view>
					<view class="close">
						
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	import { createQrCodeImg } from '@/utils/qrcode'
	import * as newFunApi from '@/api/newFun'
	export default{
		data(){
			return{
				qrcode: "",
				userInfo: {},
				backgroundBg: {
					"background": "rgba(255,255,255,0.22)"
				},
				backgroundBg1: {
					"background-color": "transparent"
				},
				isPopup: false,
				info: {},
				list: ["邀请更多好友，获得更多奖金"]
			}
		},
		onReady() {
			this.getList();
		},
		onShow() {
			if(uni.getStorageSync("AccessToken")){
				this.userInfo = uni.getStorageSync("userInfo");
				// this.qrcode = createQrCodeImg(this.userInfo.user_id, { 'size': 500 });
			}else{
				this.userInfo = {}
				// this.qrcode = ""
			}
		},
		methods: {
			//生成海报
			async InviteUserPoster() {
				const {status, data} = await newFunApi.InviteUserPoster({});
				if(status == 200){
					console.log(data)
					this.qrcode = data.imageUrl
				}
			},
			download() {
				const app = this
				app.isPopup = false;
				uni.showLoading({ title: '加载中' })
				// 下载海报图片
				uni.downloadFile({
				  url: app.qrcode,
				  success(res) {
				    console.log(res)
				    uni.hideLoading()
				    // 图片保存到相册
				    app.onSaveImage(res.tempFilePath)
				  },
				  fail(res) {
				    console.log('fail', res)
				    uni.hideLoading()
				    app.$toast('很抱歉，自动保存失败 请点击图片后长按手动保存', 3000)
				  }
				})
			},
			// 图片保存到相册
			onSaveImage(tempFilePath) {
			  const app = this
			  // #ifndef H5
			  uni.saveImageToPhotosAlbum({
			    filePath: tempFilePath,
			    success(data) {
			      app.$success('保存成功')
			    },
			    fail(err) {
			      if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
			        app.$toast('请允许访问相册后重试 (右上角菜单 - 设置 - 相册)', 3000)
			      }
			    }
			  })
			  // #endif
			  // #ifdef H5
			  const names = tempFilePath.split('/')
			  const fileName = names[names.length - 1]
			  app.fileDownLoadForH5({ name: fileName, blob: tempFilePath })
			  // #endif
			},
			
			// 兼容H5端下载图片
			// #ifdef H5
			fileDownLoadForH5({ name, blob }) {
			  const linkElement = document.createElement('a')
			  linkElement.setAttribute('href', blob)
			  linkElement.setAttribute('downLoad', name)
			  linkElement.click()
			},
			// #endif
			async getList() {
				uni.showLoading({
					title:"加载中"
				})
				const {status, data} = await newFunApi.inviteInit({});
				if(status == 200){
					uni.hideLoading();
					this.info = data;
					console.log(this.info)
				}
			},
			openPage(index){
				if(!uni.getStorageSync("AccessToken")){
					uni.navigateTo({
						url: "/pages/login/index"
					})
					return ;
				}
				if(index == 1){
					uni.navigateTo({
						url: "/pages/invite/list"
					})
				}else if(index == 2){
					uni.navigateTo({
						url: "/pages/news/user/withdrawal?balance="+ this.userInfo.pay_money
					})
				}else if(index == 3){
					this.isPopup = true;
					this.InviteUserPoster();
				}else if(index == 4){
					uni.navigateTo({
						url: "/pages/invite/rule"
					})
					
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.invite{
	min-height: 100vh;
	overflow: hidden;
	&-popup{
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 55;
		.popup{
			width: 672rpx;
			height: 912rpx;
			position: absolute;
			left: 50%;
			margin-left: -336rpx;
			top: 50%;
			margin-top: -456rpx;
			z-index: 2;
			.bg{
				width: 672rpx;
				height: 100%;
				border-radius: 26rpx;
			}
			.qrcode{
				width: 200rpx;
				height: 200rpx;
				position: absolute;
				right: 25rpx;
				top: 670rpx;
				border: 8rpx solid #FFFFFF;
				z-index: 2;
				border-radius: 5rpx;
			}
			.tips{
				width: 100%;
				height: 30rpx;
				position: absolute;
				text-align: center;
				font-size: 30rpx;
				color: #FFFFFF;
				left: 0;
				bottom: -50rpx;
				z-index: 2;
			}
			.close{
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				left: 50%;
				bottom: -150rpx;
				color: #FFFFFF;
				z-index: 2;
			}
		}
		
	}
	&-notice{
		background-color: #FF5554;
	}
	&-hd{
		width: 100%;
		text-align: center;
		background-color: #FF5554;
		image{
			width: 750rpx;
			height: 415rpx;
		}
		position: relative;
		.rule{
			width: 130rpx;
			height: 50rpx;
			position: absolute;
			right: 0;
			top: 208rpx;
			z-index: 2;
		}
		.btn{
			width: 396rpx;
			height: 88rpx;
			position: absolute;
			left: 50%;
			margin-left: -205rpx;
			bottom: 25rpx;
			z-index: 2;
		}
	}
	&-bd{
		padding: 0 38rpx 60rpx 32rpx;
		background: linear-gradient(181deg, #FF5F55 0%, #FAC39D 100%);
		overflow: hidden;
		&-a{
			width: 100%;
			height: 366rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin-top: 30rpx;
			.a{
				padding: 50rpx 0 30rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				.l{
					flex: 1;
					border-right: 1px solid #DDDDDD;
					font-size: 28rpx;
					font-weight: 500;
					color: #414141;
					.p{
						font-size: 54rpx;
						font-weight: 500;
						color: #FF5251;
						margin-top: 20rpx;
					}
				}
			}
			.b{
				width: 396rpx;
				height: 88rpx;
				background: linear-gradient(180deg, #FD5B54 0%, #FFC277 100%);
				border-radius: 106rpx;
				border: 1px solid #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: 0 auto;
			}
			.c{
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #FF5251;
				margin-top: 20rpx;
			}
		}
		&-b{
			width: 100%;
			height: 515rpx;
			margin-top: 20rpx;
			position: relative;
			image{
				width: 100%;
				height: 100%;
			}
			.a{
				width: 100%;
				bottom: 40rpx;
				padding: 0 25rpx;
				box-sizing: border-box;
				z-index: 1;
				left: 0;
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				.l{
					flex: 1;
					text-align: center;
					font-size: 28rpx;
					font-weight: 500;
					color: #FF4D4C;
				}
			}
		}
		&-c{
			width: 100%;
			height: 375rpx;
			margin-top: 20rpx;
			position: relative;
			image{
				width: 100%;
				height: 100%;
			}
			.a{
				width: 260rpx;
				bottom: -60rpx;
				box-sizing: border-box;
				z-index: 1;
				right: 0;
				position: absolute;
				display: flex;
				flex-wrap: wrap;
				.l{
					width: 130rpx;
					height: 135rpx;
					text-align: center;
					font-size: 22rpx;
					font-weight: 500;
					color: #414141;
				}
			}
		}
		&-d{
			width: 100%;
			height: 108rpx;
			position: relative;
			margin-top: 20rpx;
			image{
				width: 100%;
				height: 100%;
			}
			.p{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
				text-align: center;
				line-height: 105rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FF5251;
			}
		}
	}
}
</style>