You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
432 lines
9.0 KiB
432 lines
9.0 KiB
<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> |