photo_uniapp/pages/user/photo/ai.vue

<template>
	<view class="container">
		<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" left="true" />
		<view class="xcontent" :style="'margin-top:'+margin_top+'px'">
				<view class="imgList">
					<!--如果是多个就用imgBox-->
					<view class="imgBox" v-for="(item,index) in info.album_series" :key="index">
						<image :src="item.merge_image" 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>
		   
	</view>
</template>

<script>
	import custom_navbar from "../../index/components/header.vue";
	export default {
		components: {
		  	custom_navbar
		  
		},
		data() {
			return {
				
				
				
				
				id:0,
				info:'', //详情
				
				navbar_title: 'AI合影',
				theme: "blue",
				margin_top: 0,
				
		
			}
		},
		onLoad(option) {
			//数据
			var _this =this;
			var id = option.id;
			if(_this.$com.isNull(id))
			{
				uni.navigateBack({
					delta:1,
				})
			}
			_this.id = id;
			_this.getDetail();
		},
		onShow() {
			var _this = this;
			_this.checkAuth();
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.theme = 'white';
				
			} else {
		
				this.theme = 'blue';
				
			}
		},
		methods: {
			getNavHeight(e) {
				this.margin_top += e;
			},
			//判断
			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;
				var id = _this.id;
				
				_this.$com.confirm('确认删除此次写真集吗?',function(res){
					
					var post = {
						id:id,
					};
					_this.$api.post('api/photo_album/del', post,function(rs){
									  console.log(rs);
									 uni.navigateBack({
										 delta:1,
									 })
									  
										
					});
					
					
				},'提示');
			},
			//保存道相册
			savePic(){
				var _this =this;
				var ai_list = _this.info.album_series;
				ai_list.forEach((item, index) => {
					 var url = item.merge_image;
					 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'
					 		        });
					 		      }
					 		    });
					 	  }
					    }
					 })
				}); 
				
		
				
			},
			getDetail()
			{
				var _this = this;
				var id = _this.id;
				if(id == 0)
				{
					uni.navigateBack({
						delta:1,
					});
					return;
				}
				var post = {
					id:id,
				};
				_this.$api.get('api/photo_album/details', post,function(rs){
								  console.log(rs);
								  var Data  = rs;
								  Data.album_series.forEach((item, index) => {
									 if(item.status == 3)
									 {
										 Data.album_series[index].merge_image = _this.$api.ossurl(item.merge_image);
									 } 
								  	 else
									 {
										 Data.album_series[index].merge_image = _this.$api.ossurl(item.back_image); 
									 }
								  });
								  _this.info = Data;
								  
									
				});
			},
		}
	}
</script>

<style lang="scss">
.container{width: 100%; padding-top: 20rpx;}
.xcontent{ width: 710rpx; height: auto; margin: 0rpx auto;}
.imgList{width: 100%; height: auto;
 display: flex; flex-wrap: wrap;
 justify-content: space-between; 
 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>