<template>
	<view  class="container">
		<view class="imgList">
			<!--如果是多个就用imgBox-->
			<!-- <view class="imgBox">
				<image src="/static/img/index/pic.png" mode="aspectFill"></image>
			</view>
			
			<view class="imgBox">
				<image src="/static/img/index/pic.png" mode="aspectFill"></image>
			</view>
			<view class="imgBox">
				<image src="/static/img/index/pic.png" mode="aspectFill"></image>
			</view>
			<view class="imgBox">
				<image src="/static/img/index/pic.png" mode="aspectFill"></image>
			</view> -->
			<!--如果是一个就用picBox-->
			<!-- <view class="picBox">
				<image src="/static/img/index/pic.png" mode="aspectFill"></image>
			</view> -->
			<view class="picBox">
				<image :src="xurl" mode="aspectFill"></image>
			</view>
			
		</view>	
		<view class="btnList">
			<view class="btnBox a1">
				<view class="btnImg">
					<image src="/static/img/user/delete.png" mode="widthFix"></image>
				</view>
				<view class="btnTxt" @click="deletePic">删除照片</view>
			</view>
			<view class="btnBox a2">
				<view class="btnImg">
					<image src="/static/img/user/download.png" mode="widthFix"></image>
				</view>
				<view class="btnTxt" @click="savePic">保存到相册</view>
			</view>
		</view>	
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				old_url:'',
				xurl:'',
			}
		},
		onLoad(option) {
			//数据
			var _this =this;
			var url = option.url;
			if(_this.$com.isNull(url))
			{
				uni.navigateBack({
					delta:1,
				})
			}
			_this.old_url = url;
			_this.xurl = decodeURIComponent(url);
		},
		onShow() {
			var _this = this;
			_this.checkAuth();
		},
		methods: {
			//判断
			checkAuth() {
				var _this = this;
				console.log('已授权---');
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success(res) {
						console.log('已授权', res);
			
					},
					fail(err) {
			
						uni.showModal({
							title: '授权失败',
							content: '请在设置界面打开存储相关权限',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting()
								}
							}
						})
					},
				})
			},
			deletePic()
			{
				var _this = this;
				_this.$com.showError('暂不支持删除');
			},
			//保存道相册
			savePic(){
				var _this =this;
				var url = _this.xurl;
				uni.getSetting({
				   success(res) {
				      console.log(res.authSetting);
					  if(!res.authSetting['scope.writePhotosAlbum'])
					  {
						  uni.openSetting();
					  }
					  else
					  {
						  // 下载图片
						    uni.downloadFile({
						      url: url,
						      success: downloadResult => {
						        if (downloadResult.statusCode === 200) {
						          // 下载成功，保存图片到相册
						          uni.saveImageToPhotosAlbum({
						            filePath: downloadResult.tempFilePath,
						            success: () => {
						              uni.showToast({
						                title: '保存成功'
						              });
						            },
						            fail: () => {
						              uni.showToast({
						                title: '保存失败',
						                icon: 'none'
						              });
						            }
						          });
						        }
						      },
						      fail: () => {
						        uni.showToast({
						          title: '下载失败',
						          icon: 'none'
						        });
						      }
						    });
					  }
				   }
				})
		
				
			},
		}
	}
</script>

<style lang="scss">
.container{padding: 20rpx 26rpx;}
.imgList{width: 100%; height: auto;
 display: flex; flex-wrap: wrap;
 justify-content: space-around; /* 使子元素在容器中均匀分布 */
 align-items: center; /* 如果需要垂直居中子元素 */
 }
.imgBox{width: 340rpx; height: 440rpx; margin-bottom: 20rpx; }
.imgBox image{width: 340rpx; height: 440rpx; border-radius: 24rpx;}


.picBox{width: 660rpx; height: 770rpx; margin-top: 20rpx;margin-bottom: 20rpx; }
.picBox image{width: 660rpx; height: 770rpx; border-radius: 24rpx;}

.btnList{
	width: 100%; height: 88rpx;
	display: flex; flex-wrap: wrap;
	justify-content: space-around; /* 使子元素在容器中均匀分布 */
	align-items: center; /* 如果需要垂直居中子元素 */
}
.btnBox{
	width: 340rpx; height: 88rpx;
	border-radius: 44rpx;
	display: flex;
}
.btnBox .btnImg{
	width:126rpx ;
	height: 88rpx;
}
.btnBox .btnImg image{
	width:30rpx ;
	height: 30rpx;
	margin-top: 29rpx;
	margin-left: 80rpx;
}
.btnBox .btnTxt{
	width:214rpx ;
	height: 88rpx;
	font-weight: 700;
	font-size: 30rpx;
	line-height: 88rpx;
}
.a1{
	background: linear-gradient( 270deg, rgba(46,87,241,0.15) 0%, rgba(131,88,246,0.15) 100%);
	color:#7A74F0;
}
.a2{
	background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
	color:#FFFFFF;
}
</style>

