sadjv3_jishi/pages/poster/index.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 #019c88 solid;color: #29bb92;font-size: 15px; width: 50%;border-radius: 30px;">文案推广</button>
			<button v-if="isShowWxAPPShare=='否'" @click="sharAPPUrl()" type="default" style="border: 1px #019c88 solid;color: #29bb92;font-size: 15px; width: 50%;border-radius: 30px;">文案推广</button>
			
			<button @tap="test()" type="default" style="background: linear-gradient(to right, #019c88, #29bb92);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>