440 lines
11 KiB
Vue
440 lines
11 KiB
Vue
<!-- 我的邀请 -->
|
||
<template>
|
||
<view class="container">
|
||
<view class="head">
|
||
<up-image src="/static/share/share-bg.png" alt="" width="100%" mode="widthFix"></up-image>
|
||
<view class="top-title">
|
||
<view>
|
||
<up-image src="/static/share/title.png" alt="" width="550rpx" height="92rpx" mode="widthFix"></up-image>
|
||
</view>
|
||
<view style="padding-right:70rpx;justify-content: flex-end">
|
||
<up-image src="/static/share/rule.png" alt="" width="430rpx" height="92rpx" mode="widthFix"></up-image>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="inviteBox">
|
||
<view class="top">
|
||
<u-image src="/static/share/bg1.png" alt="" width="422rpx" height="76rpx"></u-image>
|
||
<view class="u-absolute">
|
||
<text>邀请详情</text>
|
||
</view>
|
||
</view>
|
||
<view class="codeTitle">
|
||
您的邀请码
|
||
</view>
|
||
<view class="content">
|
||
<view class="code" style="">
|
||
{{data.invitationCode}}
|
||
</view>
|
||
<view class="u-flex u-row-between" style="padding: 0 88rpx;">
|
||
<u-button @tap="sharurl" :custom-style="data.customStyle" :hair-line="false"
|
||
:ripple="true">一键分享</u-button>
|
||
<u-button style="margin-left: 50rpx;" @click.stop="createPoster()" :custom-style="data.customStyle"
|
||
:hair-line="false" :ripple="true">保存海报</u-button>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="gap u-m-t-32"></view>
|
||
<view class="u-m-t-32">
|
||
<view style="font-size: 32rpx;font-weight:bold;color: #000;text-align: center;">我的邀请战绩</view>
|
||
<view class="u-m-t-32" style="line-height: 46rpx;font-weight: bold;text-align: center;display: flex;justify-content: space-around;">
|
||
<view>
|
||
<view class="">已邀请</view>
|
||
<view class="text-red u-m-t-16 "><text class=" u-font-40">{{data.inviteCount}}</text>人</view>
|
||
</view>
|
||
<view>
|
||
<view class="">签到</view>
|
||
<view class="text-red u-m-t-16 "><text class=" u-font-40">{{data.inviteSignCount}}</text>人</view>
|
||
</view>
|
||
<view @click="goNav('/pages/me/withdraw/moneyList?moneyType=2&viewType=1')">
|
||
<view class="">金币收益</view>
|
||
<view class="text-red u-m-t-16 "><text class=" u-font-40">{{data.earning.inviteGoldMoney||0}}</text></view>
|
||
</view>
|
||
<view @click="goNav('/pages/me/withdraw/moneyList?moneyType=1&viewType=1')">
|
||
<view class="">红包收益</view>
|
||
<view class="text-red u-m-t-16 "><text class=" u-font-40">{{data.earning.inviteMoney||0}}</text></view>
|
||
</view>
|
||
</view>
|
||
<view class="u-m-t-16 u-p-b-32" style="text-align: center;color: #999;">好友签到成功可额外获得1元现金红包</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="u-m-t-40 u-m-b-32" style="background-color: #fff;padding: 32rpx;border-radius: 16rpx;margin: 32rpx;">
|
||
<view class="u-font-32 " style="text-align: center;color: #333;font-weight: bold;">已邀请列表</view>
|
||
<view v-if="data.inviterList.length" class="u-m-t-20">
|
||
<view class="u-m-b-20" style="line-height: 80rpx;display: flex;justify-content: space-between;" v-for="(item, index) in data.inviterList"
|
||
:key='index'>
|
||
<view style="display: flex;">
|
||
<image src="/static/share/5.png" style="width: 80rpx;" mode="widthFix"></image>
|
||
<text class="margin-left-sm">{{item.userName}}</text>
|
||
</view>
|
||
<view style="width: 160rpx;" class="u-flex u-row-right font-bold">
|
||
<text class="text-red" v-if="item.recordNum>0">已签到</text>
|
||
<text class="color-999" v-else>未签到</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="u-p-t-30 u-p-b-30" v-if="!data.inviterList.length">
|
||
<up-divider text="没有更多了"></up-divider>
|
||
</view>
|
||
|
||
<view style="width: 0;height: 0;overflow: hidden;">
|
||
<up-qrcode :size="200" :val="data.erweima" @result="qrR"></up-qrcode>
|
||
<canvas id="canvas" canvas-id="poster" :style="{width: data.canvasW+'px', height: data.canvasH+'px'}"></canvas>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, nextTick, ref } from 'vue';
|
||
import { onReady,onLoad,onShow,onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
|
||
import { updateUser } from '@/api/me/withdraw.js';
|
||
import { selectInviteMoney, selectInviteByUserIdLists, selectBannerList } from '@/api/share/index.js';
|
||
import { commonType } from '@/api/init.js';
|
||
import config from '@/commons/config.js';
|
||
let data = reactive({
|
||
loading:false,
|
||
earning: {
|
||
inviteMoney: 0,
|
||
inviteGoldMoney: 0,
|
||
},
|
||
erweimapath: '',
|
||
haibaoImg: null,
|
||
customStyle: {
|
||
background: '#DDDCFF',
|
||
border: '8rpx',
|
||
color: '#4544FF',
|
||
fontSize: '28rpx',
|
||
fontWeight: '700',
|
||
padding: '10rpx 32rpx',
|
||
},
|
||
page: 1,
|
||
limit: 10,
|
||
isEnd:false,
|
||
inviteCount: '', //邀请人数
|
||
inviterList: [], //邀请列表
|
||
erweima: '',
|
||
bgImg: '',
|
||
tuiguang: '',
|
||
invitationCode: uni.getStorageSync('userInfo').invitationCode,
|
||
inviteSignCount:0,
|
||
canvasW: 350,
|
||
canvasH: 667,
|
||
})
|
||
let settingWritePhotosAlbum = false;
|
||
onLoad(() => {
|
||
getInviter()
|
||
queryInviter()
|
||
getBgImg()
|
||
data.erweima = config.shareUrl + `/pages/login/register/?invitation=${data.invitationCode}&qdCode=${uni.getStorageSync('userInfo').qdCode}`
|
||
console.log(data.erweima)
|
||
})
|
||
|
||
/**
|
||
* 获取邀请战绩
|
||
*/
|
||
function queryInviter() {
|
||
selectInviteMoney().then(res => {
|
||
data.inviteCount = res.inviteCount //邀请人数
|
||
data.inviteSignCount = res.inviteSignCount
|
||
data.earning.inviteGoldMoney = res.earning.inviteGoldMoney||0
|
||
data.earning.inviteMoney = res.earning.inviteMoney||0
|
||
console.log(data.earning)
|
||
// Object.assign(data.earning,res.earning)
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 获取已邀请列表
|
||
*/
|
||
function getInviter() {
|
||
data.loading=true;
|
||
selectInviteByUserIdLists({
|
||
page: data.page,
|
||
limit: data.limit
|
||
}).then(res => {
|
||
data.loading=false;
|
||
data.inviterList =data.inviterList.concat(res.list)
|
||
data.isEnd=data.page>=res.totalPage?true:false;
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 跳转收益列表
|
||
* @param {Object} url
|
||
*/
|
||
function goNav ( url) {
|
||
uni.navigateTo({
|
||
url: url
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 一键分享
|
||
*/
|
||
function sharurl() {
|
||
uni.showModal({
|
||
title: '链接推广',
|
||
content: data.tuiguang + data.erweima,
|
||
showCancel: true,
|
||
cancelText: '关闭',
|
||
confirmText: '一键复制',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
uni.setClipboardData({
|
||
data: data.tuiguang + data.erweima,
|
||
success: function() {
|
||
console.log('success');
|
||
uni.showToast({
|
||
title: '复制成功',
|
||
duration: 1000,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
function posterSuccess(haibaoImg) {
|
||
data.haibaoImg = haibaoImg;
|
||
uni.hideLoading();
|
||
}
|
||
function successH5(haibaoImg) {
|
||
if ( haibaoImg ) {
|
||
data.haibaoImgH5 = haibaoImg
|
||
uni.previewImage({
|
||
urls: [haibaoImg],
|
||
current: 1,
|
||
})
|
||
}
|
||
|
||
}
|
||
|
||
function qrR(path) {
|
||
data.erweimapath = path;
|
||
}
|
||
|
||
/**
|
||
* 获取海报图
|
||
*/
|
||
function getBgImg() {
|
||
selectBannerList({
|
||
classify: 5
|
||
}).then(res => {
|
||
data.bgImg = res[0].imageUrl
|
||
data.tuiguang = res[0].describes
|
||
// data.bgImg = "https://jiaoyu.xianmxkj.com/img/20230822/27d37f847db9481bb3dc54cd12258147.jpg"
|
||
});
|
||
}
|
||
function createdCanvas(imageInfos){
|
||
return new Promise((resolve, reject) => {
|
||
//绘图上下文
|
||
const ctx = uni.createCanvasContext('poster');
|
||
uni.createSelectorQuery()
|
||
.in(this)
|
||
.select('#canvas')
|
||
.boundingClientRect(rect => {
|
||
if(!rect) return
|
||
|
||
// 背景图
|
||
ctx.drawImage( data.bgImg, 0, 0, data.canvasW, data.canvasH );
|
||
console.log(data.canvasW)
|
||
|
||
// 二维码图片
|
||
ctx.drawImage( data.erweimapath, data.canvasW - 174, data.canvasH - 134, 64, 64 );
|
||
ctx.draw();
|
||
}).exec()
|
||
resolve()
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 生成海报
|
||
*/
|
||
async function createPoster() {
|
||
uni.showLoading({
|
||
title: '海报生成中'
|
||
});
|
||
const Images = [data.bgImg, data.erweimapath];
|
||
Promise.all(Images.map(img => uni.getImageInfo({ src: img }))).then(
|
||
imageInfos => {
|
||
console.log('Images then>>>>>>', imageInfos);
|
||
data.bgImg = imageInfos[0].path;
|
||
data.erweimapath = imageInfos[1].path;
|
||
|
||
//根据参数开始绘图
|
||
createdCanvas(imageInfos[0]).then(()=>{
|
||
// 绘制需要延迟，不然第一次加载为空白
|
||
setTimeout(() => {
|
||
// 将生成的canvas图片，转为真实图片-地址
|
||
uni.canvasToTempFilePath({
|
||
x: 0,
|
||
y: 0,
|
||
canvasId: "poster",
|
||
success: res => {
|
||
data.haibaoImg = res.tempFilePath;
|
||
// #ifdef H5
|
||
uni.previewImage({
|
||
urls: [data.haibaoImg],
|
||
current: 1,
|
||
})
|
||
// #endif
|
||
// #ifndef H5
|
||
uni.previewImage({
|
||
urls: [data.haibaoImg],
|
||
current: 1,
|
||
})
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: data.haibaoImg,
|
||
success: function() {
|
||
uni.showToast({
|
||
title: '海报已保存相册',
|
||
icon: 'none',
|
||
});
|
||
}
|
||
});
|
||
// #endif
|
||
|
||
console.log('真实图片>>>>>>', res);
|
||
uni.hideLoading();
|
||
},
|
||
fail: (err) => { console.log('error', err) }
|
||
},this);
|
||
}, 500);
|
||
})
|
||
});
|
||
|
||
}
|
||
onReachBottom(() => {
|
||
if(data.isEnd||data.loading){
|
||
return
|
||
}
|
||
data.page+=1
|
||
getInviter()
|
||
})
|
||
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
$color1: #5857FF;
|
||
page {
|
||
background: #F3F4F8;
|
||
}
|
||
.container {
|
||
background: #F3F4F8;
|
||
min-height: 100vh;
|
||
.head{
|
||
position: relative;
|
||
.top-title {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 192rpx;
|
||
>view{
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.inviteBox {
|
||
position: relative;
|
||
margin-top: -240rpx;
|
||
background-color: #fff;
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
margin-left: 28rpx;
|
||
margin-right: 28rpx;
|
||
.top {
|
||
position: absolute;
|
||
display: flex;
|
||
justify-content: center;
|
||
left: 134rpx;
|
||
right: 134rpx;
|
||
top: -24rpx;
|
||
|
||
.u-absolute {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1;
|
||
top: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.codeTitle{
|
||
padding-top: 84rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
color: #000;
|
||
}
|
||
.content{
|
||
.code{
|
||
font-size: 44rpx;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
color: #5857FF;
|
||
margin: 32rpx auto;
|
||
}
|
||
}
|
||
|
||
}
|
||
.cu-dialog {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.text-red {
|
||
color: $color1;
|
||
}
|
||
|
||
.gap {
|
||
width: 100%;
|
||
height: 0;
|
||
position: relative;
|
||
border-bottom: 1px dashed #eee;
|
||
|
||
&:before,
|
||
&::after {
|
||
display: block;
|
||
content: '';
|
||
position: absolute;
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
background: #F3F4F8;
|
||
border-radius: 50%;
|
||
z-index: 2;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background-size: 100% 18px;
|
||
background-repeat: repeat-x
|
||
}
|
||
|
||
&:before {
|
||
left: -16rpx;
|
||
}
|
||
|
||
&::after {
|
||
right: -16rpx;
|
||
}
|
||
}
|
||
|
||
.bg-img {
|
||
background-color: transparent;
|
||
}
|
||
|
||
|
||
</style> |