260 lines
6.4 KiB
Vue
260 lines
6.4 KiB
Vue
|
<template>
|
|||
|
<view class="content">
|
|||
|
<view class="view1" v-bind:style="{backgroundImage: 'url('+backgroundImage+')'}">
|
|||
|
<view style="padding-top: 820upx;" @longpress="logoTime(userImageUrl)">
|
|||
|
<view style="width: 100%;height: 150upx;display: flex;background: #FFFFFF;padding: 20upx 10upx;">
|
|||
|
<image :src="userImageUrl"
|
|||
|
style="border-radius: 100upx;width: 100upx;height: 100upx;margin-left: 30upx;"></image>
|
|||
|
<view class="login-view-text1" style="margin-left: 30upx;width: 59%;">
|
|||
|
<view style="font-size: 16px;">{{ nickName }}</view>
|
|||
|
<view style=" font-size: 12px;margin-top: 20upx;">邀请码:{{invitationCode}}</view>
|
|||
|
</view>
|
|||
|
<canvas canvas-id="qrcode" style="width: 140upx;height: 130upx;" />
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
<view style="display: flex;flex-direction: row; padding: 40upx;justify-content: center;">
|
|||
|
<button v-if="isShowWxAPPShare=='是'" @click="shareWeiXin()" type="default" style="border: 1px #096f4b solid;color: #096f4b;font-size: 15px; width: 50%;border-radius: 30px;">文案推广</button>
|
|||
|
<button v-if="isShowWxAPPShare=='否'" @click="sharAPPUrl()" type="default" style="border: 1px #096f4b solid;color: #096f4b;font-size: 15px; width: 50%;border-radius: 30px;">文案推广</button>
|
|||
|
|
|||
|
<button @tap="test()" type="default" style="background: linear-gradient(to right, #223845, #00a85b);font-size: 15px;color: #FFFFFF; width: 50%; margin-left: 40upx;border-radius: 30px;">生成海报</button>
|
|||
|
</view>
|
|||
|
<qrcode-poster ref="poster" :title="nickName" :subTitle="nickName" :backgroundImage="backgroundImage" :abImg="userImageUrl" :content="invitationCode" />
|
|||
|
</view>
|
|||
|
</template>
|
|||
|
|
|||
|
<script>
|
|||
|
import QrcodePoster from '@/pages/poster/poster.vue';
|
|||
|
import uQRCode from "../../js_sdk/Sansnn-uQRCode/uqrcode.js";
|
|||
|
import * as websocketUtils from '@/utils/websocketUtils.js';
|
|||
|
export default{
|
|||
|
components:{
|
|||
|
QrcodePoster
|
|||
|
},
|
|||
|
data(){
|
|||
|
return{
|
|||
|
headerImg: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
|
|||
|
title: '测试标题',
|
|||
|
nickName: '',
|
|||
|
userImageUrl: '',
|
|||
|
isShowWxAPPShare: '否',
|
|||
|
invitationCode: '',
|
|||
|
backgroundImage: '',
|
|||
|
subTitle: '测试标题',
|
|||
|
content: "",
|
|||
|
tuiguang: '快来和我一起打游戏吧!',
|
|||
|
tuiguang1: '快来和我一起打游戏吧!',
|
|||
|
url: ''
|
|||
|
}
|
|||
|
},
|
|||
|
onLoad() {
|
|||
|
this.getBackImageList();
|
|||
|
this.goList();
|
|||
|
},
|
|||
|
methods: {
|
|||
|
getBackImageList() {
|
|||
|
this.$Request.getT('/app/banner/selectBannerList?state=-1&classify=6').then(res => {
|
|||
|
if (res.code === 0) {
|
|||
|
this.backgroundImage = res.data[0].imageUrl;
|
|||
|
this.tuiguang = res.data[0].describes;
|
|||
|
this.tuiguang1 = res.data[0].describes;
|
|||
|
}
|
|||
|
});
|
|||
|
},
|
|||
|
goList() {
|
|||
|
let userId = this.$queue.getData('userId');
|
|||
|
this.$Request.getT('/app/invite/selectInviteAndPoster?userId=' + userId).then(res => {
|
|||
|
if (res.code === 0) {
|
|||
|
if (res.data.user.avatar) {
|
|||
|
this.userImageUrl = res.data.user.avatar;
|
|||
|
} else {
|
|||
|
this.userImageUrl = '/static/logo.png';
|
|||
|
}
|
|||
|
|
|||
|
if (res.data.user && res.data.user.userName) {
|
|||
|
this.nickName = res.data.user.userName;
|
|||
|
} else {
|
|||
|
this.nickName = '游客';
|
|||
|
}
|
|||
|
this.invitationCode = res.data.user.invitationCode;
|
|||
|
this.imageUrl = res.data.url;
|
|||
|
|
|||
|
}
|
|||
|
});
|
|||
|
},
|
|||
|
test(){
|
|||
|
this.$refs.poster.showCanvas(this.backgroundImage, "")
|
|||
|
},
|
|||
|
shareWeiXin() {
|
|||
|
this.$Request.getT('/app/common/type/103').then(res => {
|
|||
|
if (res.code === 0) {
|
|||
|
if (res.data && res.data.value) {
|
|||
|
let relationId = this.invitationCode;
|
|||
|
let shareData = {
|
|||
|
shareUrl: this.url,
|
|||
|
shareTitle: res.data.value,
|
|||
|
shareContent: '邀请码:' + relationId + ',' + res.data.value,
|
|||
|
shareImg: this.$queue.publicYuMing() + '/logo.png',
|
|||
|
type: 0
|
|||
|
};
|
|||
|
appShare(shareData, res => {
|
|||
|
console.log('分享成功回调', res);
|
|||
|
});
|
|||
|
}
|
|||
|
}
|
|||
|
});
|
|||
|
|
|||
|
},
|
|||
|
share() {
|
|||
|
this.sharurl();
|
|||
|
},
|
|||
|
sharAPPUrl() {
|
|||
|
let that = this;
|
|||
|
let relationId = this.invitationCode;
|
|||
|
uni.showModal({
|
|||
|
title: '文案推广',
|
|||
|
content: this.tuiguang1 + '\n' + this.url,
|
|||
|
showCancel: true,
|
|||
|
cancelText: '关闭',
|
|||
|
confirmText: '一键复制',
|
|||
|
success: res => {
|
|||
|
if (res.confirm) {
|
|||
|
uni.setClipboardData({
|
|||
|
data: this.tuiguang1 + relationId + '\n' + this.url,
|
|||
|
success: function() {
|
|||
|
console.log('success');
|
|||
|
that.$queue.showToast('文案复制成功');
|
|||
|
}
|
|||
|
});
|
|||
|
}
|
|||
|
}
|
|||
|
});
|
|||
|
},
|
|||
|
}
|
|||
|
}
|
|||
|
</script>
|
|||
|
|
|||
|
<style>
|
|||
|
.modal {
|
|||
|
position: fixed;
|
|||
|
top: 0;
|
|||
|
right: 0;
|
|||
|
bottom: 0;
|
|||
|
left: 0;
|
|||
|
z-index: 1110;
|
|||
|
opacity: 0;
|
|||
|
outline: 0;
|
|||
|
text-align: center;
|
|||
|
-ms-transform: scale(1.185);
|
|||
|
transform: scale(1.185);
|
|||
|
backface-visibility: hidden;
|
|||
|
perspective: 2000upx;
|
|||
|
/* background: rgba(0, 0, 0, 0.6); */
|
|||
|
background: #FFFFFF;
|
|||
|
transition: all 0.3s ease-in-out 0s;
|
|||
|
pointer-events: none;
|
|||
|
}
|
|||
|
|
|||
|
.modal.show {
|
|||
|
opacity: 1;
|
|||
|
transition-duration: 0.3s;
|
|||
|
-ms-transform: scale(1);
|
|||
|
transform: scale(1);
|
|||
|
overflow-x: hidden;
|
|||
|
overflow-y: auto;
|
|||
|
pointer-events: auto;
|
|||
|
}
|
|||
|
|
|||
|
page {
|
|||
|
background: #FFFFFF;
|
|||
|
}
|
|||
|
|
|||
|
.view1 {
|
|||
|
border-radius: 15upx;
|
|||
|
background-size: 100%;
|
|||
|
margin: 20upx 20upx 0 20upx;
|
|||
|
}
|
|||
|
|
|||
|
.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); */
|
|||
|
background: #FFFFFF;
|
|||
|
transition: all .3s ease-in-out;
|
|||
|
pointer-events: none;
|
|||
|
backface-visibility: hidden;
|
|||
|
z-index: 999;
|
|||
|
}
|
|||
|
|
|||
|
.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;
|
|||
|
}
|
|||
|
|
|||
|
.poster_canvas {
|
|||
|
width: 750upx;
|
|||
|
height: 1334upx;
|
|||
|
position: fixed;
|
|||
|
top: -10000upx;
|
|||
|
left: 0;
|
|||
|
}
|
|||
|
</style>
|