qd_81fang/pages/poster/index.vue

<template>
	<view class="container" @click="show_share">
		<image class="bg" :src="bgUrl"></image>
		<view class="yinying" v-if="isShare">
			<image class="share_bg" :src="bgUrl"></image>
			<view class="ul_panel">
				<ul>
					<li class="left">
						<button class="share_button" open-type="share"></button>
						<image src="/static/wx.png"></image>
						<text>微信好友</text>
					</li>
					<li class="right">
						<image src="/static/image.png" @click.stop="saveImg"></image>
						<text>保存海报</text>
					</li>
				</ul>
			</view>
			<view class="cannel" @click.stop="hide_share">
				<view class="main">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {  
	    mapMutations  
	} from 'vuex';
	export default {
		data() {
			return {
				bgUrl: '',
				isShare: false,
				shareData: {
					title: '八十一坊|更实惠！',
					path: '/pages/index/index?id=1' // 分享的页面路径
				}
			};	
		},
		onLoad(e) {
			this.getposter()
		},

		methods:{
			async getposter(){
				
				let [error, loginRes] = await uni.login({
					provider: 'weixin'
				});
				let access_token = uni.getStorageSync('access_token');
				let res = await this.$api.request('/poster/poster', 'POST',{access_token:access_token});
				
				this.bgUrl = res.base64;
				console.log(this.bgUrl);
			},
			...mapMutations(['logout']),
			show_share () {
				this.isShare = true;
			},
			hide_share () {
				this.isShare = false;
			},
			navTo(url){
				uni.navigateTo({
					url:url
				});
			},
			//退出登录
			toLogout(){
				uni.showModal({
				    content: '确定要退出登录么',
				    success: (e)=>{
				    	if(e.confirm){
				    		this.logout();
				    		setTimeout(()=>{
				    			uni.navigateBack();
				    		}, 200)
				    	}
				    }
				});
			},
			//switch
			switchChange(e){
				let statusTip = e.detail.value ? '打开': '关闭';
				this.$api.msg(`${statusTip}消息推送`);
			},
			onShareAppMessage(res) {
			    return {
			        title: '这是分享页面',
			        imageUrl: 'https://81f.dev.ytxxjs.cn/uploads/20220722/66ece9ed81674a79e12be6a28c238f98.png',
			        path: '/pages/index/index'
			    }
			},
			saveImg(){
			    const that = this;
				uni.showLoading({
					title: '保存中'
				});
			    uni.downloadFile({
			        url:this.bgUrl,
			        success: res => {
			            if (res.statusCode === 200) {
			                uni.saveImageToPhotosAlbum({
			                    filePath: res.tempFilePath,
			                    success: function() {
			                        that.$api.msg('保存成功');
									that.hide_share();
			                    },
			                    fail: function() {
			                        that.$api.msg('保存失败，请稍后重试');
			                    }
			                });
			            } else {
			                that.$api.msg('下载失败');
			            }
			        }
			    });
			}
		}
	}
</script>

<style lang='scss'>
	page{
		background: $page-color-base;
	}
	.bg {
		position: fixed;
		left: 0;
		top: 0;    
		width: 100%;
		height: 100%;
		z-index: -1;
	}
	.jiu {
		margin: 45% auto 0;
		display: block;
	}
	.ewm {
		margin: 17% auto;
		height: 220rpx;
		width: 220rpx;
		display: block;
	}
	.yinying {
		width: 100%;
		height: 100%;
		background:#00000050;
		position: fixed;
	}
	
	.yinying .share_bg {
		margin: 10% auto;
		display: block;
		width: 90%;
		height: 68%;
	}
	
	.yinying .cannel {
		position: fixed;
		margin: 0 auto;
		width: 100%;
		height: 130rpx;
		bottom: 0;
		text-align: center;
	}
	
	.yinying .ul_panel {
		position: fixed;
		bottom: 170rpx;
		width: 100%;
		height: 200rpx;
	}
	
	.yinying .ul_panel ul {
		margin: 0 auto;
		padding: 0 60rpx;
		width: 90%;
		height: 100%;
		background: #ffffff;
		border-radius: 10rpx;
	}
	
	.yinying .ul_panel ul li {
		position: relative;
	}
	
	.yinying .ul_panel ul li.left {
		float: left;
	}
	
	.yinying .ul_panel ul li.right {
		float: right;
	}
	
	.yinying .ul_panel ul li .share_button{
		opacity: 0;
		position: absolute;
		width: 100%;
		height: 100%;
	}
	
	.yinying .ul_panel ul li image {
		margin: 0 auto;
		display: block;
		width: 90rpx;
		height: 90rpx;
	}
	
	.yinying .ul_panel ul li text {
		display: block;
		text-align: center;
	}
	
	.yinying .cannel .main {
		margin: 0 auto;
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		background: #ffffff;
		border-radius: 10rpx;
	}
</style>