621 lines
13 KiB
Vue
621 lines
13 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
|
|
style="width: 640rpx; height: 220rpx; background-color: #F8DDAD; margin: 60rpx auto 0; border-radius: 16rpx 16rpx 0rpx 0rpx; position: relative;">
|
|
|
|
<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" @click="gotoPage('/pages/user/sy_jl')">
|
|
<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 class="" style="flex-direction: row; display: flex;">
|
|
<button v-if="!ish5" open-type="share" class="invite-btn"></button>
|
|
<button class="invite-btn2" style="margin-left: 20rpx;" @click="showPosterPopup"></button>
|
|
</view> -->
|
|
|
|
|
|
</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>2024年3月18日 23:56</text> -->
|
|
<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="getHaiBao()" style="width: 100%;"></image>
|
|
</view>
|
|
<view style="text-align: center; margin-top: 20rpx;">
|
|
<image style="width: 48px;height: 48px;" @click="saveImageToPhotosAlbum()" :src="getXiaZai()"></image>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import UQRCode from 'uqrcodejs'; // npm install uqrcodejs
|
|
|
|
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
|
|
}
|
|
},
|
|
onShareAppMessage() {
|
|
let that = this
|
|
return {
|
|
title: "友达赏，正版潮玩手办一番赏",
|
|
path: '/pages/shouye/index?pid=' + uni.getStorageSync('userinfo').ID
|
|
}
|
|
},
|
|
onLoad() {
|
|
console.log(uni.getStorageSync('userinfo').ID)
|
|
},
|
|
methods: {
|
|
saveImageToPhotosAlbum() {
|
|
const imageUrl = this.getHaiBao(); // 替换为你的网络图片地址
|
|
// 下载图片到本地
|
|
wx.downloadFile({
|
|
url: imageUrl,
|
|
success: (res) => {
|
|
if (res.statusCode === 200) {
|
|
const tempFilePath = res.tempFilePath; // 获取临时文件路径
|
|
// 保存图片到相册
|
|
wx.saveImageToPhotosAlbum({
|
|
filePath: tempFilePath,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: 'success',
|
|
});
|
|
},
|
|
fail: (err) => {
|
|
uni.showToast({
|
|
title: '保存失败',
|
|
icon: 'none',
|
|
});
|
|
console.error('保存失败', err);
|
|
},
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: '图片下载失败',
|
|
icon: 'none',
|
|
});
|
|
console.error('图片下载失败', res);
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
uni.showToast({
|
|
title: '图片下载失败',
|
|
icon: 'none',
|
|
});
|
|
console.error('图片下载失败', err);
|
|
},
|
|
});
|
|
},
|
|
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();
|
|
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/.uni-navbar__content {
|
|
z-index: 998;
|
|
}
|
|
|
|
.top-bg {
|
|
width: 712rpx;
|
|
height: 526rpx;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.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%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.invite-btn {
|
|
margin: 30rpx auto 0;
|
|
width: 296rpx;
|
|
height: 86rpx;
|
|
background: url($imgurl+'my/yqbtn.png') no-repeat 0 0 / 100% 100%;
|
|
}
|
|
|
|
.invite-btn2 {
|
|
margin: 30rpx auto 0;
|
|
width: 296rpx;
|
|
height: 86rpx;
|
|
background: url($imgurl+'my/promotion_poster.png') no-repeat 0 0 / 100% 100%;
|
|
}
|
|
|
|
.tips {
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
</style> |