<template>
	<view class="qrcodeStyle" :style="{'height':contentHeight}">
		<view style="width: 70%;margin-left: 15%;">
			<image :src="qrcode.pic_url"  style="width: 100%;" mode='widthFix'></image>
		</view>
		<view class="btn" :style="{background:mainColor}" @click="preservation">
			<Text>保存图片分享赚钱</Text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: "推广二维码",
				contentHeight:0,
				mainColor:'',
				qrcode:'',
			}
		},created(){
			 this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
			 this.mainColor = this.$uiConfig.mainColor;
			 this.secondary = this.$uiConfig.secondary;
			 this.init()
		},
		mounted() {
			let currentPages = getCurrentPages();
			 let u = "/" + currentPages[currentPages.length-1].route;
			 let pages = wx.getStorageSync("basedata")
			   ? wx.getStorageSync("basedata").bar_title
			   : [];
			 pages.forEach((x) => {
			   if (x.value == u) {
			     this.pageTitle = x.new_name ? x.new_name : x.name;
			   }
			 });
			 uni.setNavigationBarTitle({
			   title: this.pageTitle,
			 });
		},
		methods: {
			init(){
				uni.showNavigationBarLoading();
				let h = this.apiheader();
				
				this.request(
				  {
					url: "",
				  header:h,
				data: {
				  r: "api/qrcode/share",
				},
							  
			  },
							
			  (res) => {
				uni.hideNavigationBarLoading()
				this.qrcode = res.data;
			  }
			);
		  },	
		  preservation(){
			  console.log('保存')
			  
			  uni.downloadFile({
			  		url: this.qrcode.pic_url,
			  		success: (res) =>{
			  			if (res.statusCode === 200){
							console.log(res)
			  				uni.saveImageToPhotosAlbum({
			  					filePath: res.tempFilePath,
			  					success: function() {
			  						uni.showToast({
			  							title: "保存成功",
			  							icon: "none"
			  						});
			  					},
			  					fail: function() {
			  						uni.showToast({
			  							title: "保存失败，请稍后重试",
			  							icon: "none"
			  						});
			  					}
			  				});
			  			}
			  		}
				})
		  }
		}
	}
</script>

<style>
.qrcodeStyle{
	background: #f3f4f6;
}
.qrcodeStyle .btn{
	width: 80%;
	height: 50px;
	border-radius: 25px;
	color: #fff;
	margin-left: 10%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
}
</style>
