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.

509 lines
13 KiB

<template>
<view class="container">
<view class="bg" v-if="dengji != ''" 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>
<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 v-for="(item,index) in list">
<view style="display: flex;padding: 10rpx;font-size: 28rpx;">
<view>{{index + 1}}
{{item.teamName}}需要邀请{{item.personNum}}成为{{item.teamName}}后一级成员每单返{{item.oneMoney}}积分二级成员每单返{{item.twoMoney}}积分
</view>
</view>
</view>
</view>
<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 style="margin-top: 8upx;">2点击下方分享好友生成专属推广链接分享好友让好友注册即可升级</view>
</view>
</view>
<view style="display: flex;margin-top: 40upx;margin-left: 16rpx;margin-right: 16rpx;margin-bottom: 30rpx;">
<button open-type="share"
style="margin-right: 32upx;text-align: center;width:49%;background: #FFCB49;font-size: 32upx;color: white;border-radius: 20upx;height: 80upx;line-height: 80upx">
分享好友
</button>
<button @click="showModal()"
style="text-align: center;width: 49%;background: #ED3113;font-size: 32upx;color: white;border-radius: 20upx;height: 80upx;line-height: 80upx">
保存海报
</button>
</view>
<!-- <view class="region-box">
<view class="goods_info_box">
<view class="img-wrap">
<image class="goods_image" :src="backgroundImageUrl"></image>
<view class="goods_info">
<view class="poster_code_image">
<view class="share_view">
<button class="button_view" open-type="share">分享好友</button>
</view>
</view>
<view class="poster_code_image">
<view class="upload_view">
<button class="button_view1" @click="showModal()">保存海报</button>
</view>
</view>
</view>
</view>
</view>
</view> -->
<!-- 生成海报 -->
<!-- 图片展示由自己实现 -->
<view class="flex_row_c_c modalView" :class="qrShow?'show':''" @tap="hideQr()">
<view class="flex_column">
<view class="backgroundColor-white padding1vh border_radius_10px">
<image :src="poster.finalPath || ''" mode="widthFix" class="posterImage"></image>
</view>
<view class="flex_row marginTop2vh">
<!-- #ifdef H5 -->
<button type="primary" size="mini">长按上方图片保存</button>
<!-- #endif -->
<!-- #ifndef H5 -->
<button type="primary" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
<!-- #endif -->
</view>
</view>
</view>
<!-- 画布 -->
<view class="hideCanvasView">
<canvas class="hideCanvas" canvas-id="default_PosterCanvasId"
:style="{width: (poster.width||10) + 'px', height: (poster.height||10) + 'px'}"></canvas>
</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="backgroundImageUrl && erweimapath && haibaoShow" @tap="hideModal">
<view class="bg-img">
<wm-poster @success="posterSuccess" :imgSrc="backgroundImageUrl" :Referrer="'我的邀请码:'+invitationCode"
:QrSrc="url" :Title="tuiguang" :LineType="false"></wm-poster>
</view>
</view>
</view>
</view>
</template>
<script>
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
import appShare from '@/utils/share.js';
import wmPoster from '@/components/wm-poster/wm-posterorders.vue';
import uQRCode from "../../js_sdk/Sansnn-uQRCode/uqrcode.js"
import _app from '../../js_sdk/QuShe-SharerPoster/QS-SharePoster/app.js';
export default {
components: {
tkiQrcode,
wmPoster
},
data() {
return {
erweimapath: '',
poster: {},
qrShow: false,
backgroundImageUrl: '',
haibaoImg: null,
dengji: '',
haibaoShow: false,
modalName: '',
toBase64Url: 'https://h5.canmoujiang.com/img/20210610/e387564101ab414783a96a49246775bb.png',
canvasId: 'default_PosterCanvasId',
imageUrl: '',
userImageUrl: '',
isShowWxAPPShare: '否',
nickName: '',
list: [],
invitationCode: '',
tuiguang: '!',
url: ''
};
},
onShareAppMessage(res) {
let that = this;
let relation_id = that.$queue.getData('invitationCode');
var image = '';
var title = '';
return {
path: 'pages/index/index?userByinvitationId=' + relation_id, //这是为了传参 onload(data){let id=data.id;}
title: that.tuiguang,
imageUrl: that.backgroundImageUrl
}
},
onShow() {
this.$Request.getT('/team/selectMemberConfigList').then(res => {
if (res.code === 0) {
// res.data.forEach(d =>{
// this.list.push(d);
// this.list.push(d);
// });
this.list = res.data;
}
});
let token = this.$queue.getData('token');
if (token) {
this.getBackImageList();
this.getQRCodeInfo();
this.getUserInfo();
} else {
this.goLogin();
}
},
methods: {
getUserInfo() {
let userId = this.$queue.getData('userId');
this.$Request.postT("/app/selectUserById?userId=" + userId).then(res => {
if (res.code === 0) {
this.dengji = res.data.teamName ? res.data.teamName : '普通用户';
}
uni.hideLoading();
});
},
posterSuccess(haibaoImg) {
this.haibaoImg = haibaoImg;
this.modalName = 'Image';
},
goLogin() {
uni.navigateTo({
url: '/pages/public/login'
});
},
showModal() {
let token = this.$queue.getData('token');
if (token) {
if (!this.haibaoImg) {
this.haibaoShow = true;
this.$queue.showLoading('海报生成中...');
} else {
this.modalName = 'Image';
}
} else {
this.goLogin();
}
},
hideModal() {
this.modalName = null;
},
qrR(path) {
this.erweimapath = path;
},
getBackImageList() {
this.$Request.getT('/banner/selectInvitationBackground').then(res => {
if (res.code === 0) {
this.backgroundImageUrl = res.data.imageUrl;
this.tuiguang = res.data.describes;
}
});
},
getQRCodeInfo() {
let userId = this.$queue.getData('userId');
this.$Request.getT('/user/selectInviteAndPoster?userId=' + userId).then(res => {
if (res.code === 0) {
this.invitationCode = res.data.user.invitationCode;
this.url = this.$queue.publicYuMingAll() +
'/statistical/mpCreateQr?invitationCode=' + res.data.user.invitationCode;
}
});
},
async shareFc() {
let _this = this;
try {
const d = await getSharePoster({
type: 'testShareType',
backgroundImage: _this.backgroundImageUrl,
posterCanvasId: _this.canvasId, //canvasId
delayTimeScale: 20, //延时系数
drawArray: ({
bgObj,
type,
bgScale
}) => {
const dx = bgObj.width * 0.3;
const fontSize = bgObj.width * 0.045;
const lineHeight = bgObj.height * 0.04;
//可直接return数组,也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
return new Promise((rs, rj) => {
rs([{
type: 'custom',
setDraw(Context) {
Context.setFillStyle('black');
Context.setGlobalAlpha(0.3);
Context.fillRect(0, bgObj.height - bgObj
.height * 0.2, bgObj.width, bgObj
.height * 0.2);
Context.setGlobalAlpha(1);
}
},
{
type: 'text',
fontStyle: 'italic',
text: '邀请码:' + _this.invitationCode,
size: fontSize,
color: 'white',
alpha: 1,
textAlign: 'left',
textBaseline: 'middle',
infoCallBack(textLength) {
return {
dx: bgObj.width - textLength - fontSize,
dy: bgObj.height - lineHeight * 3
}
},
serialNum: 0,
id: 'tag1' //自定义标识
},
{
type: 'qrcode',
text: _this.url,
size: bgObj.width * 0.2,
dx: bgObj.width * 0.05,
dy: bgObj.height - bgObj.width * 0.25
}
]);
})
},
setCanvasWH: ({
bgObj,
type,
bgScale
}) => { // 为动态设置画布宽高的方法,
_this.poster = bgObj;
}
});
//_app.log('海报生成成功, 时间:' + new Date() + ', 临时路径: ' + d.poster.tempFilePath)
_this.poster.finalPath = d.poster.tempFilePath;
_this.qrShow = true;
} catch (e) {
_app.hideLoading();
}
},
saveImage() {
uni.saveImageToPhotosAlbum({
filePath: this.poster.finalPath,
success(res) {
_app.showToast('保存成功');
}
})
},
hideQr() {
this.qrShow = false;
}
}
}
</script>
<style lang="scss">
page {
background: #F0F0F0;
width: 100%;
height: 100%;
}
.bg {
background-repeat: round;
background-size: 100%;
padding: 42upx;
margin: 12upx;
}
button {
font-size: 14px;
}
button::after {
border: none;
}
.hideCanvasView {
position: relative;
}
.hideCanvas {
position: fixed;
top: -99999upx;
left: -99999upx;
z-index: -99999;
}
.flex_row_c_c {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.modalView {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
outline: 0;
transform: scale(1.2);
perspective: 2500upx;
background: rgba(0, 0, 0, 0.6);
transition: all .3s ease-in-out;
pointer-events: none;
backface-visibility: hidden;
z-index: 999;
}
button::after {
border: none;
}
.modalView.show {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
.flex_column {
display: flex;
flex-direction: column;
}
.backgroundColor-white {
background-color: white;
}
.border_radius_10px {
border-radius: 10px;
}
.padding1vh {
padding: 1vh;
}
.posterImage {
width: 60vw;
}
.flex_row {
display: flex;
flex-direction: row;
}
.marginTop2vh {
margin-top: 2vh;
}
.container {
width: 100%;
height: 100%;
.region-box {
width: 100%;
height: 100%;
padding: 20upx 20upx 20upx;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.goods_info_box {
width: 100%;
height: 100%;
background: #FFF;
border-radius: 15upx;
position: relative;
overflow: hidden;
.img-wrap {
width: 100%;
height: 100%;
position: absolute;
.goods_image {
width: 100%;
height: 100%;
display: block;
position: absolute;
}
.goods_info {
width: 100%;
// height: 16%;
padding: 0 20upx;
position: absolute;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
.share_view {
position: absolute;
width: 335rpx;
height: 88rpx;
background-image: url(../../static/img/my/share.png);
background-size: 100%;
outline: none;
}
.upload_view {
position: absolute;
width: 335rpx;
height: 88rpx;
background-image: url(../../static/img/my/upload.png);
background-size: 100%;
outline: none;
}
.button_view {
outline: none;
background: none;
margin-top: 15rpx;
color: #FFFFFF;
font-size: 26rpx;
font-weight: 500;
}
.button_view1 {
outline: none;
background: none;
margin-top: 16rpx;
margin-left: 40rpx;
color: #FFFFFF;
font-size: 26rpx;
font-weight: 500;
}
.poster_code_image {
width: 49%;
height: 100rpx;
flex-shrink: 0;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
}
}
.goods_info_b {
width: 100%;
height: 12%;
padding: 15rpx;
position: absolute;
bottom: 0;
}
}
}
}
</style>