<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"></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" @longpress="download()">
<image class="bg" :src="$picUrl+'/static/bg-6.png'"></image>
<image class="qrcode" :src="qrcode"></image>
<view class="tips">长按保存图片</view>
<view class="close">
<u-icon color="#fff" size="60" name="close-circle"></u-icon>
</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: true,
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: {
download() {
},
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"
})
}else if(index == 3){
this.isPopup = true;
}
},
}
}
</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%;
}
.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>