我的相册

pages/album/myPhotoAlbum/myPhotoAlbum.vue

@@ -19,7 +19,29 @@
 			</view>
 		</view>
 		<view class="myPhoto-search">
-			
+			<view class="search-left">
+				<view class="left-frame" :class="frameNum==1?'left-frameAct':''" @click="frameFun(1)">金属框</view>
+				<view class="left-frame" :class="frameNum==2?'left-frameAct':''" @click="frameFun(2)">木框</view>
+				<view class="left-frame" :class="frameNum==3?'left-frameAct':''" @click="frameFun(3)">无框</view>
+			</view>
+			<view class="search-right">
+				<view class="right-addressClick" @click="show = true">
+					{{showAddress}}
+					<view class="address-triangle"></view>
+					<u-picker :show="show" :columns="columns" keyName="label" @confirm="addressFun" @cancel="show=false" ></u-picker>
+				</view>
+			</view>
+		</view>
+		<view class="myPhoto-list" v-if="checkTypeFun==true">
+			<view class="list-pictureFrame" v-for="(item,index) in pictureFrameList" :key="index">
+				<image class="pictureFrame-img" :src="item.url"></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>
 		</view>
 	</view>
 </template>
@@ -33,14 +55,73 @@ export default {
   data() {
     return {
       titleclick:1,//1单照片 2二宫格 3三宫格 4六宫格
+      frameNum:1,//相框选择参数
+      show: false,//遮罩显隐---项目
+      columns: [//遮罩列表---项目
+        [{
+          label: '雪月夜',
+          // 其他属性值
+          id: 2021
+          // ...
+        }, {
+          label: '冷夜雨',
+          id: 804
+        }]
+      ],
+      showAddress:'重庆',//显示内容---项目
+      pictureFrameList:[
+        {
+          url:'../static/album/DIY.png',
+          checkType:false,
+        },
+        {
+				  url:'../static/album/DIY.png',
+				  checkType:false,
+        },
+        {
+				  url:'../static/album/DIY.png',
+				  checkType:false,
+        },
+        {
+				  url:'../static/album/DIY.png',
+				  checkType:false,
+        },
+        {
+				  url:'../static/album/DIY.png',
+				  checkType:false,
+        },
+      ],
+      checkTypeFun:true,//刷新选项
     }
   },
   onLoad(option) {
     
   },
   methods: {
-    clickActFun(num){
+    clickActFun(num){//宫格选择
+      this.checkTypeFun = false
       this.titleclick = num
+      this.pictureFrameList.forEach(item=>{
+        item.checkType = false
+      })
+      this.checkTypeFun = true
+    },
+    frameFun(num){//相框选择
+      this.frameNum = num
+    },
+    addressFun(e){//项目选择
+      this.showAddress = e.value[0].label
+      this.show=false
+    },
+    stopPhoto(index){//单选
+      this.checkTypeFun = false
+		  if(this.pictureFrameList[index].checkType==false){
+		    this.pictureFrameList[index].checkType = true
+		  }else{
+		    this.pictureFrameList[index].checkType = false
+		  }
+		  
+		  this.checkTypeFun = true
     },
   }
 }
@@ -48,7 +129,7 @@ export default {
 
 <style scoped lang="scss">
 	page {
-		background-color: #F7F7F7;
+		background: #F5F7FA;
 	}
 	.albumBox{
 		padding-top: 202rpx;
@@ -63,6 +144,7 @@ export default {
 		position: fixed;
 		left: 0;
 		top: 0;
+		z-index: 40;
 		.title-click{
 			height: 68rpx;
 			font-weight: 600;
@@ -90,7 +172,120 @@ export default {
 		}
 	}
 	.myPhoto-search{
+		display: flex;
+		justify-content: space-between;
 		width: 100%;
 		height: 102rpx;
+		padding: 20rpx 24rpx 0 24rpx;
+		background: #F5F7FA;
+		position: fixed;
+		left: 0;
+		top: 100rpx;
+		z-index: 40;
+		.search-left{
+			display: flex;
+			.left-frame{
+				font-size: 24rpx;
+				color: #666666;
+				line-height: 64rpx;
+				padding: 0 20rpx 0 20rpx;
+			}
+			.left-frameAct{
+				width: 160rpx;
+				height: 64rpx;
+				padding:0;
+				font-weight: 600;
+				font-size: 28rpx;
+				color: #333333;
+				line-height: 60rpx;
+				text-align: center;
+				background: #E6E9F4;
+				border-radius: 8rpx;
+				border: 2rpx solid #DAE0EB;
+			}
+		}
+		.search-right{
+			display: flex;
+			.right-addressClick{
+				display: flex;
+				font-weight: 600;
+				font-size: 24rpx;
+				color: #333333;
+				line-height: 64rpx;
+				position: relative;
+				.address-triangle{
+					width: 0px;
+					height: 0px;
+					margin: auto;
+					margin-left: 12rpx;
+					border: 10rpx solid transparent;
+					border-top: 10rpx solid #D8D8D8;
+				}
+			}
+		}
+	}
+	.myPhoto-list{
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		.list-pictureFrame{
+			margin-bottom: 4rpx;
+			position: relative;
+			.pictureFrame-img{
+				width: 248rpx;
+				height: 248rpx;
+			}
+			.pictureFrame-check{
+				width: 32rpx;
+				height: 32rpx;
+				background: transparent;
+				position: absolute;
+				top: 24rpx;
+				left: 192rpx;
+				z-index: 9;
+				/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;
+				}
+			}
+			.pictureFrame-blowUp{
+				width: 32rpx;
+				height: 32rpx;
+				position: absolute;
+				bottom: 24rpx;
+				left: 192rpx;
+				z-index: 9;
+			}
+			.pictureFrame-boxTop,
+			.pictureFrame-boxBottom{
+				width: 248rpx;
+				height: 124rpx;
+				position: absolute;
+				left: 0;
+				z-index: 5;
+			}
+			.pictureFrame-boxTop{
+				top: 0;
+			}
+			.pictureFrame-boxBottom{
+				bottom: 0;
+			}
+		}
+		.list-pictureFrame:nth-last-child(1){
+			flex: 1;
+		}
 	}
 </style>
\ No newline at end of file