779 lines
16 KiB
Vue
779 lines
16 KiB
Vue
<template>
|
|
<view class="page-wrap common_bg">
|
|
<uni-nav-bar left-icon="left" title="邀请好友" color="#000000" backgroundColor="transparent" :fixed="true"
|
|
:statusBar="true" :border="false" @clickLeft="$c.back"></uni-nav-bar>
|
|
|
|
<mescroll-body ref="mescrollRef" :down="downOption" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
|
|
|
|
|
<view class="top-bg">
|
|
<text style="position: absolute; left: 34rpx; top: 36rpx; color: #333333; font-size: 40rpx;">邀请好友
|
|
领奖励</text>
|
|
|
|
<view @click="$refs.rulePop.getRule(11, '规则说明')" class="rule-btn">
|
|
<image class="" style="width: 24rpx; height: 24rpx; margin-right: 8rpx;"
|
|
:src="$img1('my/ic_prompt.png')"></image>
|
|
规则说明
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- <image class="card-yqhy" :src="$img1('my/yqhy.png')"></image> -->
|
|
|
|
<view class="card common_bg">
|
|
<view class="card-title">成功邀请好友获得佣金奖励</view>
|
|
<view class="people-money">
|
|
<view class="people relative">
|
|
<view>已邀请</view>
|
|
<view class="num">
|
|
{{ total }}
|
|
<text>人</text>
|
|
</view>
|
|
</view>
|
|
<view class="moneys">
|
|
<view class="content">
|
|
<view>奖励总额</view>
|
|
<view class="money">
|
|
{{ commission }}
|
|
<text></text>
|
|
</view>
|
|
</view>
|
|
<view class="icon">
|
|
<uni-icons type="right" color="#FFFFFF"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 添加我的邀请码展示区域 -->
|
|
<view class="my-invite-code" v-if="userInfo.uid">
|
|
<view class="invite-code-title">我的邀请码</view>
|
|
<view class="invite-code-value" @click="copyMyInviteCode">{{ userInfo.uid }}</view>
|
|
</view>
|
|
|
|
<!-- //分享 -->
|
|
<view class="" style="flex-direction: row; display: flex; width: 686rpx; margin: 40rpx auto;">
|
|
<button v-if="!ish5" open-type="share" class="invite-btn">立即邀请</button>
|
|
<button v-if="ish5" class="invite-btn" @click="yaoaing()">立即邀请</button>
|
|
<button v-if="!isApp" class="invite-btn2" style="margin-left: 20rpx;"
|
|
@click="showPosterPopup">生成海报</button>
|
|
<button v-if="isApp && !hasBoundCode" class="invite-btn2" style="margin-left: 20rpx;"
|
|
@click="showBindCodePopup">绑定邀请码</button>
|
|
<button v-if="isApp && hasBoundCode" class="invite-btn2 " style="margin-left: 20rpx;">已绑定上级</button>
|
|
</view>
|
|
|
|
<view class="invite-log">
|
|
<view class="list-title align-center">
|
|
<text class="">邀请记录</text>
|
|
<!-- <text class="ml10" style="font-size: 28rpx;">(共{{ total }}人)</text> -->
|
|
</view>
|
|
<view style="height: 2rpx; background-color: #F3F3F3;">
|
|
|
|
</view>
|
|
<view class="list-wrap">
|
|
<view v-for="(item, i) of listdata" :key="i" class="list-wrap-item">
|
|
<view class="content">
|
|
<view class="avatar">
|
|
<image :src="item.headimg" mode="scaleToFill" />
|
|
</view>
|
|
<view class="info align-center justify-between">
|
|
<view class="info-hd column">
|
|
<text class="name hang1" style="color: #333333">{{ item.nickname }}</text>
|
|
<text class="title">{{ item.addtime }}</text>
|
|
</view>
|
|
<view class="info-bd column">
|
|
<text class="money">消费￥{{ item.commission_money }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</mescroll-body>
|
|
<rule-pop ref="rulePop"></rule-pop>
|
|
<uni-popup ref="posterPopup" type="center">
|
|
<view style="width:650rpx;height:950rpx;">
|
|
<image :src="logo_image" style="width: 100%;"></image>
|
|
</view>
|
|
<view style="text-align: center; margin-top: 20rpx;">
|
|
<image show-menu-by-longpress style="width: 48px;height: 48px;" @click="saveImageToPhotosAlbum()"
|
|
:src="getXiaZai()"></image>
|
|
</view>
|
|
</uni-popup>
|
|
<uni-popup ref="bindCodePopup" type="center">
|
|
<view class="bind-code-popup">
|
|
<view class="bind-code-title">绑定邀请码</view>
|
|
<view class="bind-code-content">
|
|
<input type="text" v-model="inviteCode" placeholder="请输入邀请码" class="bind-code-input" />
|
|
<view class="bind-code-tips" v-if="hasBoundCode">您已绑定邀请码，不可更改</view>
|
|
</view>
|
|
<view class="bind-code-btns">
|
|
<button class="bind-code-cancel" @click="closeBindCodePopup">取消</button>
|
|
<button class="bind-code-confirm" :disabled="hasBoundCode" @click="bindInviteCode">确定</button>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getUserInfo } from '@/common/server/user';
|
|
export default {
|
|
data() {
|
|
var isH5 = false;
|
|
// #// #ifdef H5
|
|
isH5 = true;
|
|
// #endif
|
|
return {
|
|
downOption: {
|
|
use: false
|
|
},
|
|
listdata: [],
|
|
news: '',
|
|
total: 0,
|
|
ish5: isH5,
|
|
logo_image: '',
|
|
commission: 0,
|
|
isApp: false,
|
|
inviteCode: '',
|
|
hasBoundCode: false,
|
|
userInfo: {}
|
|
}
|
|
},
|
|
onShareAppMessage() {
|
|
let that = this;
|
|
console.log();
|
|
let imageUrl = this.$config.getShareImageUrl();
|
|
return {
|
|
imageUrl: imageUrl,
|
|
title: "友达上线,来就送！",
|
|
path: '/pages/shouye/index?pid=' + uni.getStorageSync('userinfo').ID
|
|
}
|
|
},
|
|
onLoad() {
|
|
console.log(uni.getStorageSync('userinfo').ID)
|
|
console.log(this.$platform.code);
|
|
if (this.$platform.code == 'WEB_APP' || this.$platform.code == 'APP_IOS' || this.$platform.code == 'APP_ANDROID') {
|
|
this.isApp = true;
|
|
this.ish5 = true;
|
|
}
|
|
if (this.$platform.code == 'WEB_H5') {
|
|
this.isApp = false;
|
|
this.ish5 = true;
|
|
}
|
|
var that = this;
|
|
getUserInfo().then(res => {
|
|
console.log(res);
|
|
|
|
that.userInfo = res;
|
|
if (res.pid != 0) {
|
|
that.hasBoundCode = true;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
methods: {
|
|
yaoaing() {
|
|
uni.setClipboardData({
|
|
data: window.location.origin + '/pages/shouye/index?pid=' + uni.getStorageSync('userinfo').ID
|
|
});
|
|
this.$c.msg("链接已复制，快去分享吧~")
|
|
},
|
|
copyMyInviteCode() {
|
|
uni.setClipboardData({
|
|
data: this.userInfo.ID + ''
|
|
});
|
|
this.$c.msg("邀请码已复制")
|
|
},
|
|
saveImageToPhotosAlbum() {
|
|
const imageUrl = this.logo_image; // 替换为你的网络图片地址
|
|
this.$platform.downloadFile(imageUrl).then(res => {
|
|
console.log(res)
|
|
})
|
|
},
|
|
getHaiBao() {
|
|
return this.$baseUrl + '/api/generate_urllinks?userId=' + uni.getStorageSync('userinfo').ID;
|
|
},
|
|
getXiaZai() {
|
|
return this.$baseUrl + '/dow.png';
|
|
|
|
},
|
|
/*下拉刷新的回调 */
|
|
downCallback() {
|
|
this.mescroll.resetUpScroll()
|
|
// this.loadData(1)
|
|
},
|
|
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
|
|
upCallback(page) {
|
|
//联网加载数据
|
|
this.loadData(page.num)
|
|
},
|
|
fenxiang() {
|
|
var image = this.$baseUrl + "/storage/topic/20240617/30a73c0d5061f700a66f653deeb60f6d.jpg";
|
|
var path = '/pages/shouye/index?pid=' + uni.getStorageSync('userinfo').ID;
|
|
this.$c.$fenxiang('友达赏，正版潮玩手办一番赏', '', path, image);
|
|
|
|
},
|
|
loadData(pageNo) {
|
|
// 模拟接口
|
|
let that = this
|
|
that.req({
|
|
url: 'invitation',
|
|
data: {
|
|
page: pageNo
|
|
},
|
|
success(res) {
|
|
that.total = res.data.count
|
|
that.commission = res.data.money
|
|
that.logo_image = res.data.share_image
|
|
that.mescroll.endByPage(res.data.data.length, res.data.last_page)
|
|
if (pageNo == 1) {
|
|
that.listdata = res.data.data
|
|
} else {
|
|
that.listdata = that.listdata.concat(res.data.data)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
//海报弹窗
|
|
showPosterPopup() {
|
|
this.$refs.posterPopup.open();
|
|
|
|
},
|
|
showBindCodePopup() {
|
|
// 查询是否已绑定邀请码
|
|
console.log(this.userInfo);
|
|
if (this.userInfo.pid != 0) {
|
|
this.$c.msg("您已绑定邀请码，不可更改");
|
|
return;
|
|
}
|
|
this.$refs.bindCodePopup.open();
|
|
},
|
|
closeBindCodePopup() {
|
|
this.$refs.bindCodePopup.close();
|
|
},
|
|
bindInviteCode() {
|
|
if (!this.inviteCode) {
|
|
this.$c.msg("请输入邀请码");
|
|
return;
|
|
}
|
|
|
|
let that = this;
|
|
that.req({
|
|
url: 'bind_invite_code',
|
|
data: {
|
|
invite_code: that.inviteCode
|
|
},
|
|
success(res) {
|
|
if (res.status === 1) {
|
|
that.$c.msg("绑定成功");
|
|
that.hasBoundCode = true;
|
|
that.closeBindCodePopup();
|
|
} else {
|
|
that.$c.msg(res.msg || "绑定失败，请重试");
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
button::after {
|
|
border: none;
|
|
}
|
|
|
|
button {
|
|
background-color: transparent;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
line-height: inherit;
|
|
border-radius: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
page {
|
|
background: linear-gradient(90deg,
|
|
#090916,
|
|
#0f0e1d,
|
|
#090915,
|
|
#0f0e1c,
|
|
#090a15);
|
|
}
|
|
|
|
.view_poster {
|
|
width: 650rpx;
|
|
height: 950rpx;
|
|
background: url($imgurl+'my/img_poster.jpg') no-repeat 0 0 / 100% 100%;
|
|
|
|
}
|
|
|
|
.page-wrap {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
background-size: 100% auto;
|
|
box-sizing: border-box;
|
|
color: #fff;
|
|
background-color: #F7F7F7;
|
|
|
|
.head {
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 20;
|
|
|
|
.header_title {
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 30rpx;
|
|
box-sizing: border-box;
|
|
|
|
>view:nth-of-type(1) {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
>view:nth-of-type(2) {
|
|
width: 520rpx;
|
|
text-align: center;
|
|
/* margin: auto; */
|
|
}
|
|
|
|
image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep.uni-navbar__content {
|
|
z-index: 998;
|
|
}
|
|
|
|
.top-bg {
|
|
width: 640rpx;
|
|
height: 220rpx;
|
|
margin: 60rpx auto 0;
|
|
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
|
position: relative;
|
|
background: url($imgurl+'my/invite_bg.png') no-repeat 0 0 / 100% 100%;
|
|
}
|
|
|
|
|
|
|
|
.rule-btn {
|
|
position: absolute;
|
|
left: 34rpx;
|
|
bottom: 32rpx;
|
|
height: 50rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 10;
|
|
|
|
font-size: 20rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
.inviteText {
|
|
position: absolute;
|
|
top: 220rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 543rpx;
|
|
height: 489rpx;
|
|
z-index: 1;
|
|
}
|
|
|
|
.card-yqhy {
|
|
width: 724rpx;
|
|
height: 490rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.card {
|
|
margin: 0rpx auto 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 690rpx;
|
|
height: 252rpx;
|
|
box-sizing: border-box;
|
|
padding: 0 60rpx 0;
|
|
background-color: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
|
|
&-title {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
padding-top: 28rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.people-money {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
// margin-top: 60rpx;
|
|
border-radius: 10rpx;
|
|
border-radius: 30rpx;
|
|
color: #676767;
|
|
margin-top: 60rpx;
|
|
|
|
.people,
|
|
.moneys {
|
|
flex: 1;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.people {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items: center;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0;
|
|
width: 1rpx;
|
|
height: 90rpx;
|
|
background: #999999;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.num {
|
|
margin-top: 30rpx;
|
|
font-size: 20rpx;
|
|
font-weight: 400;
|
|
color: #676767;
|
|
|
|
text {
|
|
margin-left: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// .line {
|
|
// height: 122rpx;
|
|
// width: 0;
|
|
// border-left: 1px solid rgba(255, 255, 255, 0.3);
|
|
// }
|
|
|
|
.moneys {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-flow: column nowrap;
|
|
position: relative;
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items: center;
|
|
|
|
.money {
|
|
margin-top: 30rpx;
|
|
font-size: 20rpx;
|
|
color: #676767;
|
|
|
|
text {
|
|
margin-left: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
position: absolute;
|
|
right: 10rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.tips {
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.invite-btn {
|
|
width: 304rpx;
|
|
height: 76rpx;
|
|
background-color: #D8FD24;
|
|
border-radius: 16rpx;
|
|
color: #333333;
|
|
font-size: 24rpx;
|
|
// background: url($imgurl+'my/yqbtn.png') no-repeat 0 0 / 100% 100%;
|
|
}
|
|
|
|
.invite-btn2 {
|
|
width: 304rpx;
|
|
height: 76rpx;
|
|
background-color: #333333;
|
|
border-radius: 16rpx;
|
|
color: #D8FD24;
|
|
font-size: 24rpx;
|
|
// background: url($imgurl+'my/promotion_poster.png') no-repeat 0 0 / 100% 100%;
|
|
|
|
&.disabled {
|
|
background-color: #666666;
|
|
color: #AAAAAA;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.invite-log {
|
|
width: 100%;
|
|
margin: 30rpx auto 0;
|
|
width: 650rpx;
|
|
box-sizing: border-box;
|
|
background-color: #FFFFFF;
|
|
padding: 32rpx 34rpx;
|
|
border-radius: 16rpx;
|
|
|
|
|
|
.list-title {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 30rpx 0;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.list-wrap {
|
|
width: 100%;
|
|
margin-top: 34rpx;
|
|
// height: auto;
|
|
// overflow: hidden;
|
|
|
|
&-item {
|
|
height: 120rpx;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: space-evenly;
|
|
border-radius: 10rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.avatar {
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
background: #eee;
|
|
}
|
|
|
|
.info {
|
|
width: calc(100% - 110rpx);
|
|
|
|
&-hd {
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #333333;
|
|
|
|
.name {
|
|
max-width: 300rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.title {
|
|
margin-top: 12rpx;
|
|
font-weight: 400;
|
|
font-size: 16rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
&-bd {
|
|
.money {
|
|
color: #333333;
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.show-more {
|
|
height: 70rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
|
|
.icon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.gzbox {
|
|
text-align: right;
|
|
}
|
|
|
|
.gzbox>image {
|
|
width: 143rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.pop {
|
|
width: 607rpx;
|
|
// height: 904rpx;
|
|
padding-top: 70rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
|
|
.pop_title {
|
|
font-size: 36rpx;
|
|
font-family: zihun152hao-jijiachaojihei;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
}
|
|
|
|
.pop_con {
|
|
padding: 30rpx 40rpx 50rpx;
|
|
box-sizing: border-box;
|
|
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
line-height: 42rpx;
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translate(-50%, 100%);
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
}
|
|
|
|
.bind-code-popup {
|
|
width: 600rpx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
|
|
.bind-code-title {
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.bind-code-content {
|
|
margin-bottom: 40rpx;
|
|
|
|
.bind-code-input {
|
|
height: 80rpx;
|
|
background-color: #F5F5F5;
|
|
border-radius: 8rpx;
|
|
padding: 0 20rpx;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.bind-code-tips {
|
|
font-size: 24rpx;
|
|
color: #FF6B00;
|
|
margin-top: 16rpx;
|
|
}
|
|
}
|
|
|
|
.bind-code-btns {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
button {
|
|
width: 240rpx;
|
|
height: 76rpx;
|
|
border-radius: 38rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.bind-code-cancel {
|
|
background-color: #F5F5F5;
|
|
color: #666666;
|
|
}
|
|
|
|
.bind-code-confirm {
|
|
background-color: #D8FD24;
|
|
color: #333333;
|
|
|
|
&:disabled {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.my-invite-code {
|
|
width: 686rpx;
|
|
margin: 20rpx auto 0;
|
|
background-color: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx 0;
|
|
text-align: center;
|
|
|
|
.invite-code-title {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.invite-code-value {
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
letter-spacing: 6rpx;
|
|
}
|
|
}
|
|
</style> |