czg_team/new_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

红包/app下载/分享新增优化

Browse Source
This commit is contained in:
GaoHao
2025-01-08 11:25:33 +08:00
parent 8692626dd1
commit 3291a7573a
17 changed files with 815 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

456
pages/share/index.vue Normal file
View File

@@ -0,0 +1,456 @@
<!-- 我的邀请 -->
<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="544rpx" mode="widthFix"></up-image>
</view>
<view style="padding-right:70rpx;justify-content: flex-end">
<up-image src="/static/share/rule.png" alt="" width="400rpx" 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">{{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">{{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>
<up-image :src="data.haibaoImg" alt="" width="400rpx" mode="widthFix"></up-image>
<!-- <tki-qrcode ref="qrcode" :val="erweima" :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' : 'show'" @tap="hideModal">
<view class="cu-dialog" v-if="bgImg && erweimapath && haibaoShow" @tap="hideModal">
<view class="bg-img">
<!-- <wm-poster @success="posterSuccess" @successH5="successH5" :imgSrc="bgImg"
:Referrer="'我的邀请码:'+invitationCode" :QrSrc="erweimapath" :LineType="false"></wm-poster> -->
</view>
</view>
</view>
</view>
</template>
<script setup>
import { reactive, nextTick, ref } from 'vue';
import { onReady,onLoad,onShow } 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,
qrcode: false,
earning: {
inviteMoney: 0,
inviteGoldMoney: 0,
},
erweimapath: '',
haibaoImg: null,
haibaoShow: false,
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,
h5SaveImg: '',
modalName: '',
haibaoImgH5: '',
inviteSignCount:0,
canvasW: 350,
canvasH: 667,
})
let settingWritePhotosAlbum = false;
onLoad(() => {
getInviter()
queryInviter()
getBgImg()
data.erweima = config.baseUrl + `/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;
data.modalName = 'Image';
uni.hideLoading();
}
function successH5(haibaoImg) {
if ( haibaoImg ) {
data.haibaoImgH5 = haibaoImg
uni.previewImage({
urls: [haibaoImg],
current: 1,
})
}
}
function hideModal() {
data.modalName = null;
}
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;
data.modalName = 'Image';
data.haibaoShow = true
// #ifdef H5
uni.previewImage({
urls: [data.haibaoImg],
current: 1,
})
// #endif
// #ifndef H5
uni.saveImageToPhotosAlbum({
filePath: data.haibaoImg,
success: function() {
console.log('save success');
uni.showToast({
title: '海报已保存相册',
icon: 'success',
duration: 2000
});
}
});
// #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;
.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>