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.
378 lines
12 KiB
378 lines
12 KiB
<template> |
|
<view> |
|
<view class="bg" v-bind:style="{backgroundImage: 'url('+toBase64Url+')'}"> |
|
<text class="num" style="font-size: 32upx;color: #000000;margin-bottom: 10px"> |
|
<text style="font-size: 32upx;font-weight: bold;color: #000000;margin-right:10upx;">当前等级</text> |
|
<text style="font-size: 30upx;font-weight: bold;margin-right:6upx;"> • </text> |
|
<text style="font-size: 50upx;font-weight: bold;font-weight: bold;">{{ dengji }}</text> |
|
</text> |
|
<view style="font-size: 28upx;margin-top: 32upx;color: #000000;">{{ dengjides }}</view> |
|
</view> |
|
<view style="text-align: left;color: #333333;font-size: 28upx;"> |
|
<view style="margin-top: 16upx;background: #FFFFFF;border-radius: 16upx;padding: 26upx;margin: 12upx;"> |
|
<view style="font-size: 32upx;font-weight: bold;margin-bottom: 16upx;">邀请规则</view> |
|
<view>1、每成功邀请1位好友提升1级，最高{{ invitatioNum }}级每级对应相应的返现比例</view> |
|
<view style="margin-top: 8upx">2、邀请成功可享受终身粉丝佣金{{ teamMoney }}%提成</view> |
|
<view style="margin-top: 8upx" v-if="setting==2">3、已邀请成功的好友再邀请好友可享受非直属好友佣金{{ threeMoney }}%提成</view> |
|
</view> |
|
<!-- #ifdef MP-WEIXIN --> |
|
<view style="margin-top: 16upx;background: #FFFFFF;border-radius: 16upx;padding: 26upx;margin: 12upx;"> |
|
<view style="font-size: 32upx;font-weight: bold;margin-bottom: 16upx;margin-top: 16upx;">邀请方式</view> |
|
<view>1、点击下方【分享给好友】分享好友、群，请好友注册即可升级</view> |
|
</view> |
|
<!-- #endif --> |
|
<!-- #ifndef MP-WEIXIN --> |
|
<view style="margin-top: 16upx;background: #FFFFFF;border-radius: 16upx;padding: 26upx;margin: 12upx;"> |
|
<view style="font-size: 32upx;font-weight: bold;margin-bottom: 16upx;margin-top: 16upx;">邀请方式</view> |
|
<view style="margin-top: 8upx;">点击下方【分享邀请链接】或【生成邀请海报】生成专属推广信息，分享好友、群，让好友注册即可升级</view> |
|
</view> |
|
<!-- #endif --> |
|
</view> |
|
<view style="display: flex;margin-top: 64upx;margin-left: 16upx;margin-right: 16upx;"> |
|
|
|
<!-- #ifdef MP-WEIXIN --> |
|
<button @click="showPopu()" style="text-align: center;width: 95%;background: #ED3113;font-size: 32upx;color: white;border-radius: 20upx;height: 80upx;line-height: 80upx;margin-left: 20upx;"> |
|
分享给好友 |
|
</button> |
|
<!-- #endif --> |
|
|
|
<!-- #ifdef H5 --> |
|
<view @click="showModal()" style="margin-right: 32upx;text-align: center;width: 50%;background: #FFCB49;font-size: 32upx;color: white;border-radius: 20upx;height: 80upx;line-height: 80upx"> |
|
生成邀请海报 |
|
</view> |
|
<view @click="shareYQ()" style="text-align: center;width: 50%;background: #ED3113;font-size: 32upx;color: white;border-radius: 20upx;height: 80upx;line-height: 80upx;margin-left: 20upx;"> |
|
分享邀请链接 |
|
</view> |
|
<!-- #endif --> |
|
<!-- #ifdef APP-PLUS --> |
|
<view @click="showModal()" style="margin-right: 32upx;text-align: center;width: 50%;background: #FFCB49;font-size: 32upx;color: white;border-radius: 20upx;height: 80upx;line-height: 80upx"> |
|
生成邀请海报 |
|
</view> |
|
<view @click="shareWeiXin()" style="text-align: center;width: 50%;background: #ED3113;font-size: 32upx;color: white;border-radius: 20upx;height: 80upx;line-height: 80upx;margin-left: 20upx;"> |
|
分享邀请链接 |
|
</view> |
|
<!-- #endif --> |
|
</view> |
|
<tki-qrcode ref="qrcode" :val="url" :size="200" background="#fff" foreground="#000" pdground="#000" :onval="true" |
|
:loadMake="true" @result="qrR" :show="false"></tki-qrcode> |
|
<view class="cu-modal" :class="modalName == 'Image' ? 'show' : ''" @tap="hideModal"> |
|
<view class="cu-dialog" v-if="backImage && XCXErweima && haibaoShow" @tap="hideModal"> |
|
<view class="bg-img"> |
|
<!-- #ifdef MP-WEIXIN --> |
|
<wm-poster @success="posterSuccess" :imgSrc="backImage" :Referrer="'我的邀请码:'+relationId" :QrSrc="XCXErweima" :Title="title" |
|
:LineType="false"></wm-poster> |
|
<!-- #endif --> |
|
<!-- #ifndef MP-WEIXIN --> |
|
<wm-poster @success="posterSuccess" :imgSrc="backImage" :Referrer="'我的邀请码:'+relationId" :QrSrc="erweimapath" |
|
:Title="title" :LineType="false"></wm-poster> |
|
<!-- #endif --> |
|
</view> |
|
</view> |
|
</view> |
|
<uni-popup ref="popusshare" type="bottom"> |
|
<view style="width: 100%;height: max-content;background: #FFFFFF;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;padding: 40rpx;"> |
|
<view style="display: flex;"> |
|
<view style="width: 50%;text-align: center;" v-for='(item,index) in bottomData' :key='index' @tap='goShare(index)'> |
|
<button v-if="index === 0" style="text-align:center;background: #FFFFFF;" open-type='share'> |
|
<image :src="item.icon" style="width: 80rpx;height: 80rpx;"></image> |
|
<view style="color: #000000;font-size: 28rpx;">{{item.text}}</view> |
|
</button> |
|
<view v-if="index != 0"> |
|
<image :src="item.icon" style="width: 80rpx;height: 80rpx;"></image> |
|
<view style="margin-top: 38rpx;color: #000000;font-size: 28rpx;">{{item.text}}</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</uni-popup> |
|
</view> |
|
</template> |
|
<script> |
|
import uniPopup from '@/components/uni-popup/uni-popup.vue'; |
|
import wmPoster from '@/components/wm-poster/wm-posterorders.vue'; |
|
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'; |
|
import appShare from '@/utils/share.js'; |
|
export default { |
|
components: { |
|
tkiQrcode, |
|
uniPopup, |
|
wmPoster |
|
}, |
|
data() { |
|
return { |
|
erweimapath: '', |
|
poster: {}, |
|
qrShow: false, |
|
haibaoImg: null, |
|
haibaoShow: false, |
|
backgroundImage: '', |
|
modalName: '', |
|
totalMoney: '0', |
|
threeMoney: '', |
|
setting: 1, |
|
dengji: 0, |
|
itemendprice: '识别二维码免费领取', |
|
tuiguang: '', |
|
backImage: '', |
|
title: '', |
|
itemtitle: '', |
|
relationId: '', |
|
itemprice: '', |
|
image: '', |
|
toBase64Url: 'https://api.shengqianxiong.com.cn/VIP.png', |
|
imageUrl: '../../static/logo2.png', |
|
erweima: '', |
|
itempic: '', |
|
teamMoney: '20', |
|
XCXErweima: '', |
|
url: '', |
|
bottomData: [{ |
|
text: '分享好友', |
|
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png', |
|
name: 'wx' |
|
}, |
|
{ |
|
text: '生成海报', |
|
icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-5.png', |
|
name: 'more' |
|
} |
|
], |
|
invitatioNum: 0, |
|
WXtuiguang:'', |
|
dengjides: '生成海报' |
|
}; |
|
}, |
|
onShareAppMessage(res) { |
|
return { |
|
path: '/pages/zysc/index/index?userByinvitationId=' + this.relationId, //这是为了传参 onload(data){let id=data.id;} |
|
title: this.title, |
|
imageUrl: this.backImage |
|
} |
|
}, |
|
onLoad() { |
|
this.getSetting(); |
|
// #ifdef MP-WEIXIN |
|
wx.getSetting({ |
|
success(res) { |
|
if (!res.authSetting['scope.writePhotosAlbum']) { |
|
wx.authorize({ |
|
scope: 'scope.writePhotosAlbum', |
|
success() { |
|
console.log('授权成功'); |
|
} |
|
}); |
|
} |
|
} |
|
}); |
|
// #endif |
|
let number = this.$queue.invitaionNum(); |
|
this.teamMoney = parseFloat(this.$queue.teamMoney()) * 100; |
|
this.threeMoney = parseFloat(this.$queue.threeMoney()) * 100; |
|
this.invitatioNum = parseInt(number); |
|
|
|
}, |
|
onShow() { |
|
this.tuiguang = this.$queue.getData('yqTuiGuang'); |
|
this.WXtuiguang = this.$queue.getData('yqWXTuiGuang'); |
|
let relationId = this.$queue.getData('relation_id'); |
|
if (relationId) { |
|
this.relationId = relationId; |
|
this.getBackGroundImageErweima(relationId); |
|
this.XCXErweima = this.$queue.publicYuMing() + |
|
'/tao/user/getImg?page=pages/zysc/index/index&scene=' + |
|
relationId + '&width=200' |
|
// #ifdef H5 |
|
this.url = this.$queue.publicYuMing() + '/?userByinvitationId=' + relationId; |
|
//#endif |
|
} |
|
// #ifdef APP-PLUS |
|
this.url = this.$queue.publicYuMing() + '/#/pages/member/download?userByinvitationId=' + relationId; |
|
// #endif |
|
let userId = this.$queue.getData('userId'); |
|
if (userId) { |
|
this.getUserInfo(userId); |
|
} |
|
this.getBackGroundImage(); |
|
}, |
|
methods: { |
|
getSetting() { |
|
this.$Request.getT('/common/type/91').then(res => { |
|
if (res.status == 0) { |
|
if (res.data && res.data.value) { |
|
this.setting = res.data.value |
|
} |
|
} |
|
}); |
|
}, |
|
posterSuccess(haibaoImg) { |
|
this.haibaoImg = haibaoImg; |
|
this.modalName = 'Image'; |
|
}, |
|
showModal() { |
|
if (!this.haibaoImg) { |
|
this.haibaoShow = true; |
|
this.$queue.showLoading('海报生成中...'); |
|
} else { |
|
this.modalName = 'Image'; |
|
} |
|
}, |
|
hideModal() { |
|
this.modalName = null; |
|
}, |
|
qrR(path) { |
|
this.erweimapath = path; |
|
}, |
|
showPopu() { |
|
this.$refs.popusshare.open(); |
|
}, |
|
goShare(index) { |
|
this.$refs.popusshare.close(); |
|
//0,分享好友 1，生成海报 |
|
if (index === 1) { |
|
this.showModal(); |
|
} |
|
}, |
|
getBackGroundImageErweima(relationId) { |
|
this.$Request.getT('/user/getImg?page=/pages/zysc/index/index&scene=userByinvitationId=' + relationId + |
|
'&width=200').then(res => { |
|
|
|
}); |
|
}, |
|
getBackGroundImage() { |
|
this.$Request.getT('/selfActivity/state?state=6').then(res => { |
|
if (res.status === 0) { |
|
this.backImage = res.data[0].image_url; |
|
this.title = res.data[0].title; |
|
} |
|
}); |
|
}, |
|
hideModal() { |
|
this.modalName = null; |
|
}, |
|
shareWeiXin() { |
|
let shareData = { |
|
shareUrl: this.url, |
|
shareTitle: '邀请你加入地摊侠！先领券，再购物，更划算！', |
|
shareContent: '邀请码：' + this.relationId + '，点击进入，在地摊侠中和我一起购物返利赚大钱吧！', |
|
shareImg: '../../static/logo2.png', |
|
type: 0 |
|
}; |
|
appShare(shareData, res => { |
|
console.log('分享成功回调', res); |
|
}); |
|
}, |
|
shareYQ() { |
|
this.sharurl(); |
|
}, |
|
getUserInfo(userId) { |
|
this.$Request.getT('/user/' + userId).then(res => { |
|
if (res.status === 0) { |
|
if (res.data.gradeDes) { |
|
this.dengji = res.data.gradeDes; |
|
} else { |
|
this.dengji = 0; |
|
} |
|
if (res.data.gradeNumber) { |
|
if (res.data.gradeNumber == '还可邀请0人') { |
|
this.dengjides = '已到达最高等级'; |
|
} else { |
|
this.dengjides = res.data.gradeNumber; |
|
} |
|
} else { |
|
this.dengjides = '还可邀请' + this.invitatioNum + '人'; |
|
} |
|
} |
|
}); |
|
}, |
|
sharurl() { |
|
let that = this; |
|
uni.showModal({ |
|
title: '链接推广', |
|
content: this.tuiguang +'\n'+ this.url, |
|
showCancel: true, |
|
cancelText: '关闭', |
|
confirmText: '一键复制', |
|
success: res => { |
|
if (res.confirm) { |
|
uni.setClipboardData({ |
|
data: this.tuiguang + this.url, |
|
success: function() { |
|
console.log('success'); |
|
that.$queue.showToast('复制成功'); |
|
} |
|
}); |
|
} |
|
} |
|
}); |
|
}, |
|
getMoney() { |
|
let that = this; |
|
let relationId = this.$queue.getData('relation_id'); |
|
if (relationId) { |
|
this.$Request.getT('/user/getCount?invitation=' + relationId).then(res => { |
|
if (res.status === 0 && res.data) { |
|
that.totalMoney = res.data; |
|
} else if (res.status === -102) { |
|
this.$queue.showToast(res.msg); |
|
this.$queue.logout(); |
|
uni.navigateTo({ |
|
url: '/pages/member/register' |
|
}); |
|
} else { |
|
that.totalMoney = '0'; |
|
} |
|
}); |
|
} |
|
}, |
|
getOut() { |
|
let that = this; |
|
let relationId = this.$queue.getData('relation_id'); |
|
if (relationId) { |
|
if (this.totalMoney > 2) { |
|
that.$queue.showLoading('结算中...'); |
|
this.$Request.getT('/user/getCash?invitation=' + relationId).then(res => { |
|
if (res.status === 0 && res.data) { |
|
uni.showModal({ |
|
showCancel: false, |
|
title: '结算成功', |
|
content: '请返回【我的】点击【立即提现】' |
|
}); |
|
that.getMoney(); |
|
} |
|
uni.hideLoading(); |
|
}); |
|
} else { |
|
uni.showModal({ |
|
showCancel: false, |
|
title: '结算提醒', |
|
content: '邀请必须够3人才可申请结算' |
|
}); |
|
} |
|
} else { |
|
uni.navigateTo({ |
|
url: '/pages/member/register' |
|
}); |
|
} |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import '../../static/css/index.css'; |
|
|
|
.bg { |
|
background-repeat: round; |
|
background-size: 100%; |
|
padding: 42upx; |
|
margin: 12upx; |
|
} |
|
|
|
button { |
|
font-size: 14px; |
|
} |
|
|
|
button::after { |
|
border: none; |
|
} |
|
</style>
|
|
|