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.
508 lines
13 KiB
508 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>
|
|
|