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>
|