IHG/pages/index/vote-detail/poster.vue

<template>
	<view>
		<view class="poster-container" v-if="poster.show">
			<l-painter
			v-if="poster.show"
			  isRenderImage
			   width="600rpx"  height="940rpx"
			   custom-style="position: fixed;z-index:999; left: 0rpx;right:0rpx;margin:0rpx auto;bottom:440rpx;background:#fff;border-radius:20rpx"
			  :board="poster.base"
			  @success="poster.path = $event"
			/>
		</view>
		
		<view :class="{'poster-share':true, on:poster.show}">
			<view>分享到</view>
			<view class="poster-share-panel">
				<view @click="share">
					 <button class="shareButton" open-type="share"><image src="/static/icon/wechat.svg" mode="aspectFit"/>
					<text>微信分享</text></button>
				</view>
				<view @click="save">
					<image src="/static/icon/wechat_moments.svg" mode="aspectFit"/>
					<text>保存相册</text>
				</view>
			</view>
			<view @click="cancel">取消分享</view>
		</view>
	</view>
	
</template>

<script>
	import lPainter from '@/components/lime-painter/index.vue'
	
	export default {
		components: {lPainter},
		props: ["title", "name", "img", "qrcode"],
		data() {
			return {
				poster:{
					show:false,
					path: "",
					base: {
						width: '600rpx',
						height: '940rpx',
						background: "#fff",
						radius: "20rpx",
						views: [
							{
								type: 'text',
								text: '成都IHG大酒店',
								css: {
									width: "500rpx",
									height: "80rpx",
									left: "50rpx",
									top: '20rpx',
									fontSize: '32rpx',
									fontWeight: "bold",
									lineHeight: '80rpx',
									color:'#000',
									textAlign: 'center',
								}
							},
							{
								type: 'text',
								text: '正在参与',
								css: {
									width: "170rpx",
									height: "80rpx",
									left: "50rpx",
									top: '70rpx',
									fontSize: '26rpx',
									lineHeight: '80rpx',
									color:'grey',
									textAlign: 'right',
								}
							},
							{
								type: 'text',
								text: '“最受欢迎-IHG酒店”',
								css: {
									width: "330rpx",
									height: "80rpx",
									left: "220rpx",
									display: "flex",
									justifyContent: 'center',
									top: '70rpx',
									fontSize: '26rpx',
									lineHeight: '80rpx',
									color:'#EEA470',
									textAlign: 'left',
								}
							},
							{
								type: 'image',
								src: 'http://img.xjishu.com/img/zl/2018/6/30/1241359458913.gif',
								css: {
									left: '240rpx',
									top: '720rpx',
									width: '120rpx',
									height: '120rpx',
									borderRadius: '30px'
								}
							},
							{
								type: 'text',
								text: '长按识别小程序码给他投票',
								css: {
									width: "500rpx",
									height: "80rpx",
									left: "50rpx",
									top: '830rpx',
									fontSize: '26rpx',
									lineHeight: '80rpx',
									color:'grey',
									textAlign: 'center',
								}
							},
							{
								type: 'image',
								src: 'https://img1.baidu.com/it/u=3841234653,2748754224&fm=253&fmt=auto&app=138&f=JPEG?w=900&h=500',
								css: {
									left: '30rpx',
									top: '150rpx',
									width: '540rpx',
									height: '540rpx',
									borderRadius: '20rpx'
								}
							}
						]
					}
				},
			};
		},
		methods:{
			show({name, title, imgUrl, qrcodeUrl}){
				this.poster.base.views[0].text = name;
				this.poster.base.views[2].text = title;
				imgUrl && (this.poster.base.views[5].src = imgUrl);
				qrcodeUrl && (this.poster.base.views[3].src = qrcodeUrl);
				
				
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 1
				});
				this.poster.show = true;
			},
			cancel(){
				this.poster.show = false;
			},
			save(){
				uni.saveImageToPhotosAlbum({
					filePath: this.poster.path,
					success(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000
						})
					}
				})
			},
			share(){
				// wx.downloadFile({
				// 	url: this.poster.path, // 下载url
				// 	success (res) {
				// 	  // 下载完成后转发
				// 		wx.shareFileMessage({
				// 			filePath: res.tempFilePath,
				// 			success() {
				// 				console.log('转发成功')
				// 			},
				// 			fail: console.error,
				// 		})
				// 	},
				// 	fail: console.error,
				// })
			}
		},
	}
</script>

<style lang="scss" scoped>
.poster-container{
	width:100%;
	height:100%;
	position: fixed;
	top:0;
	left:0;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.4);
}
.poster-share{
	position: fixed;
	bottom:0;
	width: 100%;
	height: 380rpx;
	background-color: #fff;
	border-radius: 30rpx 30rpx 0px 0px;
	transform: translateY(500rpx);
	padding-top: 40rpx;
	transition: 0.3s all;
	z-index: 1000;
	color:rgba(0,0,0,0.5);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	
	&.on{
		transform: translateY(0rpx);
	}
	
	>view:first-child{
		text-align: center;		
		color: #000;
		font-weight:bold;
		margin-bottom: 40rpx;
	}
	
	>view:nth-child(2){
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 40rpx;
		
		>view{
			text-align: center;
			margin-left: 40rpx;
		}
		
		image{
			width: 80rpx;
			height: 80rpx;
		}
		
		text{
			width: 100rpx;
			display: block;
			font-size: 24rpx;
			text-align: center;
		}
	}
	>view:last-child{
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-top: 1px solid rgba(0,0,0,0.1);
	}
	.shareButton{
		background: transparent;
		border: 0px;
		line-height: inherit;
		color: inherit;
		
		&::after{
			border:0px;
		}
	}
}
</style>