代码修改

pages.json

@@ -464,7 +464,8 @@
 					"path": "myPhotoAlbum/myPhotoAlbum",
 					"style": {
 						"navigationBarTitleText": "我的相册",
-						"enablePullDownRefresh": false
+						"enablePullDownRefresh": false,
+						"navigationStyle": "custom"
 					}
 
 				},

pages/album/myPhotoAlbum/myPhotoAlbum.vue

 <template>
-	<view class="albumBox">
+	<view class="albumBox" :style="{'padding-top': albumBoxTop + 'px' }" :class="blowUpMaks==true?'albumBoxAct':''">
+		<view class="nav-bar"	:style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}" v-if="blowUpMaks==false">
+			<u-icon name="arrow-left" color="#333" @click="returnClick"></u-icon>
+			我的相册
+		</view>
+		<view class="nav-bar"	:style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}" v-if="blowUpMaks==true">
+			<u-icon name="arrow-left" color="#333" @click="blowUpMaks=false"></u-icon>
+			{{blowUpNumNew}}/{{pictureFrameList.length}}
+		</view>
 		<view class="myPhoto-title">
 			<view class="title-click" :class="titleclick==1?'title-clickAct':''" @click="clickActFun(1)">
 				单照片
@@ -32,15 +40,39 @@
 				</view>
 			</view>
 		</view>
-		<view class="myPhoto-list" v-if="checkTypeFun==true">
+		<view class="myPhoto-list" v-if="checkTypeFun==true" :class="bottomShow==true?'myPhoto-listAct':''">
 			<view class="list-pictureFrame" v-for="(item,index) in pictureFrameList" :key="index">
-				<image class="pictureFrame-img" :src="item.url"></image>
+				<image class="pictureFrame-img" :src="item.image"></image>
 				<checkbox-group @click.stop.native="()=>{}" @change="stopPhoto(index)">
 					<checkbox value="val" :checked="item.checkType" class="pictureFrame-check" :class="item.checkType==true?'pictureFrame-checkAct':''"></checkbox>
 				</checkbox-group>
 				<view class="pictureFrame-boxTop" @click.stop="stopPhoto(index)"></view>
-				<view class="pictureFrame-boxBottom"></view>
-				<image class="pictureFrame-blowUp" src="../static/album/icon04.png"></image>
+				<view class="pictureFrame-boxBottom" @click="blowUpFun(index)"></view>
+				<image class="pictureFrame-blowUp" @click="blowUpFun(index)" src="../static/album/icon04.png"></image>
+			</view>
+		</view>
+		<view class="myPhoto-mask" v-if="blowUpMaks==true" :style="{'top': albumBoxTop + 'px' }">
+			<swiper class="swiper" circular @change="projectNumFun" :current="currentNum">
+				<swiper-item v-for="(item,index) in pictureFrameList" :key="index">
+					<image :src="item.image" @click="stopPhoto(index)" :style="{'width': item.width, 'height': item.height}"></image>
+					<checkbox-group @click.stop.native="()=>{}" @change="stopPhoto(index)" v-if="checkTypeFun==true">
+						<checkbox value="val" :checked="item.checkType" class="pictureFrame-check" :class="item.checkType==true?'pictureFrame-checkAct':''"></checkbox>
+					</checkbox-group>
+				</swiper-item>
+			</swiper>
+		</view>
+		<view class="myPhoto-bottom">
+			<view class="bottom-tips">相片保留10天, 请尽快下载, 下载保存</view>
+			<view class="bottom-feature">
+				<view class="feature-list">
+					<template v-for="(item,index) in pictureFrameList">
+						<view class="feature-case" v-if="item.checkType==true" :key="index">
+							<image class="feature-img" :src="item.image"></image>
+							<image class="feature-close" src="../static/album/icon05.png" @click="stopPhoto(index)"></image>
+						</view>
+					</template>
+				</view>
+				<view class="feature-message"></view>
 			</view>
 		</view>
 	</view>
@@ -71,31 +103,64 @@ export default {
       showAddress:'重庆',//显示内容---项目
       pictureFrameList:[
         {
-          url:'../static/album/DIY.png',
+          image:'https://img1.baidu.com/it/u=1360904074,3378535006&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1427',
           checkType:false,
         },
         {
-				  url:'../static/album/DIY.png',
+				  image:'https://i1.hdslb.com/bfs/archive/34961798a6c8fa26348499483fc16e48831af85d.jpg',
 				  checkType:false,
         },
         {
-				  url:'../static/album/DIY.png',
+				  image:'https://img1.baidu.com/it/u=2652134479,594912468&fm=253&fmt=auto&app=138&f=JPEG?w=878&h=493',
 				  checkType:false,
         },
         {
-				  url:'../static/album/DIY.png',
+				  image:'https://img0.baidu.com/it/u=2602636891,3687528369&fm=253&fmt=auto&app=120&f=JPEG?w=1087&h=612',
 				  checkType:false,
         },
         {
-				  url:'../static/album/DIY.png',
+				  image:'https://img2.baidu.com/it/u=635571518,763366960&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1131',
 				  checkType:false,
         },
       ],
       checkTypeFun:true,//刷新选项
+      
+      statusBarHeight: 0,//状态栏高度
+      capsule: 0,// 胶囊大小、位置数据
+      navHeight: 0,// 导航栏高度
+      albumBoxTop:0,//顶部高度
+			
+      blowUpMaks:false,//放大显示的遮罩
+      blowUpNumNew:0,//当前的位置
+      currentNum:0,//当前所在滑块的 index
+			
+      bottomShow:false,//脚部的显隐
     }
   },
   onLoad(option) {
+    this.pictureFrameList.forEach(item=>{
+      //await
+      let imageInfoObj =  uni.getImageInfo({
+        src: item.image,
+        success: function (imageInfo) {
+          
+          if(imageInfo.height>imageInfo.width){
+            item['width'] = '680rpx'
+            item['height'] = '956rpx'
+          }else{
+            item['width'] = '680rpx'
+            item['height'] = '510rpx'
+          } 
+        },
+        fail: function (error) {
+          console.error(error)
+          // 获取图片信息失败后的操作
+        }
+      })
 			
+    })
+    console.log(this.pictureFrameList)
+    this.recordDeviceInfo()
   },
   methods: {
     clickActFun(num){//宫格选择
@@ -120,21 +185,68 @@ export default {
 		  }else{
 		    this.pictureFrameList[index].checkType = false
 		  }
+      var pictureFrameListNum = 0
+      this.pictureFrameList.forEach(item=>{//判断 是否有照片被选择
+        if(item.checkType==true){
+          pictureFrameListNum +=1
+        }
+      })
+      if(pictureFrameListNum>0){
+        this.bottomShow = true
+      }
 		  this.checkTypeFun = true
     },
-    blowUpFun(){//相片放大
+    blowUpFun(index){//相片放大 遮罩显隐
+      this.blowUpMaks = true
+      this.blowUpNumNew = index+1
+      this.currentNum = index
+    },
+    projectNumFun(e){//当前滑动到第几张
       
+		  this.blowUpNumNew = e.target.current+1
+    },
+    recordDeviceInfo() { //---记录设备信息
+		  this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
+		  this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
+		  this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
+      this.albumBoxTop = this.statusBarHeight+this.navHeight
+    },
+    returnClick() {//头部 点击返回
+		  uni.navigateBack({
+		    delta: 1
+		  })
     },
   }
 }
 </script>
 
 <style scoped lang="scss">
-	page {
-		background: #F5F7FA;
-	}
 	.albumBox{
-		padding-top: 202rpx;
+		display: flex;
+		flex-direction:column;
+		height: 100vh;
+		background-color: #fff;
+	}
+	.albumBoxAct{
+		background-color: #F5F7FA;
+	}
+	.nav-bar {
+		width: 100%;
+		justify-content:center;
+		font-size: 36rpx;
+		font-weight: 700;
+		padding: 0 24rpx 0 24rpx;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 10;
+		/deep/ .u-icon{
+			margin: auto;
+			position: absolute;
+			left: 24rpx;
+			top: 0;
+			bottom: 0;
+		}
 	}
 	.myPhoto-title{
 		width: 100%;
@@ -143,10 +255,6 @@ export default {
 		background-color: #fff;
 		display: flex;
 		justify-content: space-between;
-		position: fixed;
-		left: 0;
-		top: 0;
-		z-index: 40;
 		.title-click{
 			height: 68rpx;
 			font-weight: 600;
@@ -180,10 +288,6 @@ export default {
 		height: 102rpx;
 		padding: 20rpx 24rpx 0 24rpx;
 		background: #F5F7FA;
-		position: fixed;
-		left: 0;
-		top: 100rpx;
-		z-index: 40;
 		.search-left{
 			display: flex;
 			.left-frame{
@@ -227,10 +331,15 @@ export default {
 		}
 	}
 	.myPhoto-list{
+		flex: 1;
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: space-between;
+		align-content:flex-start;
+		background-color: #F5F7FA;
+		overflow: auto;
 		.list-pictureFrame{
+			height: 248rpx;
 			margin-bottom: 4rpx;
 			position: relative;
 			.pictureFrame-img{
@@ -290,4 +399,108 @@ export default {
 			flex: 1;
 		}
 	}
+	.myPhoto-listAct{
+		padding-bottom: 320rpx;
+	}
+	.myPhoto-mask{
+		width: 100%;
+		height: 100%;
+		background: #F5F7FA;
+		position: fixed;
+		left: 0;
+		z-index: 10;
+		.swiper{
+			width: 680rpx;
+			height: 956rpx;//510rpx
+			margin: 0 auto;
+			background: #F5F7FA;
+			margin-top: 80rpx;
+			/deep/ swiper-item{
+				display: flex;
+				align-items:center;
+			}
+			.pictureFrame-check{
+				width: 32rpx;
+				height: 32rpx;
+				background: transparent;
+				position: absolute;
+				right: 56rpx;
+				bottom: 60rpx;
+				z-index: 11;
+				/deep/ .wx-checkbox-input{
+					width: 32rpx;
+					height: 32rpx;
+					background: transparent;
+					border: solid 1px #fff;
+				}
+				/deep/ .wx-checkbox-input.wx-checkbox-input-checked {
+					background: #FE6600; // 选中的颜色
+				}
+				/deep/ .wx-checkbox-input.wx-checkbox-input-checked::before {
+					color: #fff; // 选中后的图标默认是对号，这里吧对号变成透明颜色，就看不出来了
+				}
+			}
+			.pictureFrame-checkAct{
+				/deep/ .wx-checkbox-input{
+					border: solid 1px #FE6600;
+				}
+			}
+		}
+	}
+	.myPhoto-bottom{
+		width: 100%;
+		height: 314rpx;
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		z-index: 30;
+		.bottom-tips{
+			width: 726rpx;
+			height: 64rpx;
+			background: #FFF6E8;
+			border-radius: 8rpx 8rpx 0rpx 0rpx;
+			border: 2rpx solid #FE6600;
+			box-sizing: border-box;
+			font-weight: 400;
+			font-size: 24rpx;
+			color: #FE6600;
+			text-align: center;
+			line-height: 60rpx;
+			margin: 0 auto;
+		}
+		.bottom-feature{
+			width: 100%;
+			height: 250rpx;
+			background-color: #fff;
+			padding: 20rpx 24rpx 0 24rpx;
+			.feature-list{
+				display: flex;
+				width: 100%;
+				overflow: auto;
+			}
+			.feature-case{
+				width: 142rpx;
+				height: 142rpx;
+				padding: 10rpx 10rpx 0 0;
+				margin-right: 15rpx;
+				position: relative;
+				.feature-img{
+					width: 132rpx;
+					height: 132rpx;
+				}
+				.feature-close{
+					width: 32rpx;
+					height: 32rpx;
+					position: absolute;
+					top: 0;
+					right: 0;
+				}
+			}
+			.feature-message{
+				display: flex;
+				justify-content: space-between;
+				margin-top: 6rpx;
+			}
+		}
+	}
 </style>
\ No newline at end of file