新增 拼图页面

pages.json

@@ -463,7 +463,7 @@
 				{
 					"path": "myPhotoAlbum/myPhotoAlbum",
 					"style": {
-						"navigationBarTitleText": "我的相册",
+						"navigationBarTitleText": "我的相片",
 						"enablePullDownRefresh": false,
 						"navigationStyle": "custom"
 					}
@@ -500,6 +500,14 @@
 						"enablePullDownRefresh": false
 					}
 
+				},
+				{
+					"path" : "photoJigsaw/photoJigsaw",
+					"style": {
+						"navigationBarTitleText": "我的相片",
+						"enablePullDownRefresh": false,
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		}

pages/album/myPhotoAlbum/myPhotoAlbum.vue

@@ -30,7 +30,7 @@
 			</view>
 		</view>
 		<!--相框/项目切换-->
-		<view class="myPhoto-search">
+		<view class="myPhoto-search" v-if="pictureFrameList.length!=0">
 			<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>
@@ -40,12 +40,13 @@
 				<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>
+					<u-picker :show="show" :columns="columns" visibleItemCount="6" itemHeight="80" keyName="label" @confirm="addressFun" @cancel="show=false" ></u-picker>
 				</view>
 			</view>
 		</view>
 		<!--相片列表-->
 		<view class="myPhoto-list" v-if="checkTypeFun==true" :class="bottomShow==true?'myPhoto-listAct':''">
+			<template v-if="titleclick==1||titleclick!=1&&pictureFrameList.length!=0">
 				<view class="list-pictureFrame" v-for="(item,index) in pictureFrameList" :key="index">
 					<image class="pictureFrame-img" :src="item.image"></image>
 					<checkbox-group @click.stop.native="()=>{}" @change="stopPhoto(index)" >
@@ -55,6 +56,15 @@
 					<view class="pictureFrame-boxBottom" @click="blowUpFun(index)"></view>
 					<image class="pictureFrame-blowUp" @click="blowUpFun(index)" src="../static/album/icon04.png"></image>
 				</view>
+			</template>
+			<template v-else>
+				<view class="list-noFigure">
+					<image class="noFigure-img" src="../static/album/icon07.png"></image>
+					<view class="noFigure-text">
+						三宫格须先下载照片, 才能设置<text @click="clickActFun(1)">去下载</text>
+					</view>
+				</view>
+			</template>
 		</view>
 		<!--点击放大后相片遮罩-->
 		<view class="myPhoto-mask" v-if="blowUpMaks==true" :style="{'top': albumBoxTop + 'px' }">
@@ -67,6 +77,8 @@
 				</swiper-item>
 			</swiper>
 		</view>
+		<!--获取照片-->
+		<image v-if="pictureFrameListNum==0" class="myPhoto-getPhotos" src="../static/album/icon08.png"></image>
 		<!--脚部选择相片、加入购物车、直接购买-->
 		<view class="myPhoto-bottom" v-if="pictureFrameListNum>0">
 			<view class="bottom-tips">相片保留10天, 请尽快下载, 下载保存</view>
@@ -74,7 +86,7 @@
 				<!--加入相册列表-->
 				<view class="feature-list">
 					<template v-for="(item,index) in pictureFrameList">
-						<view class="feature-case" v-if="item.checkType==true" :key="index">
+						<view class="feature-case" v-if="item.pickerChoose==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>
@@ -116,12 +128,30 @@ export default {
       show: false,//遮罩显隐---项目
       columns: [//遮罩列表---项目
         [{
-          label: '雪月夜',
+          label: '雪月夜1',
           // 其他属性值
           id: 2021
           // ...
         }, {
-          label: '冷夜雨',
+          label: '冷夜雨2',
+          id: 804
+        }, {
+          label: '冷夜雨3',
+          id: 804
+        }, {
+          label: '冷夜雨4',
+          id: 804
+        }, {
+          label: '冷夜雨5',
+          id: 804
+        }, {
+          label: '冷夜雨6',
+          id: 804
+        }, {
+          label: '冷夜雨7',
+          id: 804
+        }, {
+          label: '冷夜雨8',
           id: 804
         }]
       ],
@@ -130,22 +160,27 @@ export default {
         {
           image:'https://img1.baidu.com/it/u=1360904074,3378535006&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1427',
           checkType:false,
+          pickerChoose:false,
         },
         {
 				  image:'https://i1.hdslb.com/bfs/archive/34961798a6c8fa26348499483fc16e48831af85d.jpg',
 				  checkType:false,
+          pickerChoose:false,
         },
         {
 				  image:'https://img1.baidu.com/it/u=2652134479,594912468&fm=253&fmt=auto&app=138&f=JPEG?w=878&h=493',
 				  checkType:false,
+          pickerChoose:false,
         },
         {
 				  image:'https://img0.baidu.com/it/u=2602636891,3687528369&fm=253&fmt=auto&app=120&f=JPEG?w=1087&h=612',
 				  checkType:false,
+          pickerChoose:false,
         },
         {
 				  image:'https://img2.baidu.com/it/u=635571518,763366960&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1131',
 				  checkType:false,
+          pickerChoose:false,
         },
       ],
       checkTypeFun:true,//刷新选项
@@ -194,6 +229,7 @@ export default {
       this.titleclick = num
       this.pictureFrameList.forEach(item=>{
         item.checkType = false
+        item.pickerChoose = false
       })
       this.pictureFrameListNum = 0
       if(this.titleclick==2){
@@ -214,12 +250,14 @@ export default {
     },
     stopPhoto(index){//相片选择
       this.checkTypeFun = false
+      
+      if(this.titleclick==1||this.titleclick!=1&&this.pictureFrameListNum<this.maxChooseImg||this.titleclick!=1&&this.pictureFrameListNum==this.maxChooseImg&&this.pictureFrameList[index].checkType == true){//+this.maxChooseImg+
         this.stopPhotoNumFun(index)
-      if(this.titleclick!=1&&this.pictureFrameListNum>this.maxChooseImg){//+this.maxChooseImg+
+      }else if(this.titleclick!=1&&this.pictureFrameListNum>=this.maxChooseImg){
+        this.pictureFrameList[index].checkType = true
         this.$nextTick(function() {
-          this.stopPhotoNumFun(index)
+				  this.pictureFrameList[index].checkType = false
         })
-        
         uni.showToast({
           title: '最多选择'+this.maxChooseImg+'张',
 				  icon:'error',
@@ -234,8 +272,10 @@ export default {
     stopPhotoNumFun(index){//相片选择开关
       if(this.pictureFrameList[index].checkType==false){
 			  this.pictureFrameList[index].checkType = true
+        this.pictureFrameList[index].pickerChoose = true
       }else{
 			  this.pictureFrameList[index].checkType = false
+        this.pictureFrameList[index].pickerChoose = false
       }
       this.pictureFrameListNum = 0
       this.pictureFrameList.forEach(item=>{//判断 是否有照片被选择
@@ -385,6 +425,7 @@ export default {
 		align-content:flex-start;
 		background-color: #F5F7FA;
 		overflow: auto;
+		position: relative;
 		.list-pictureFrame{
 			height: 248rpx;
 			margin-bottom: 4rpx;
@@ -404,8 +445,8 @@ export default {
 				/deep/ .wx-checkbox-input{
 					width: 32rpx;
 					height: 32rpx;
-					background: transparent;
-					border: solid 1px #fff;
+					background: rgba(255,255,255,0.5);//transparent;
+					border: 2rpx solid #C7C7C7;
 				}
 				/deep/ .wx-checkbox-input.wx-checkbox-input-checked {
 					background: #FE6600; // 选中的颜色
@@ -445,6 +486,33 @@ export default {
 		.list-pictureFrame:nth-last-child(1){
 			flex: 1;
 		}
+		.list-noFigure{
+			width: 100%;
+			height: 456rpx;
+			margin: auto;
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			.noFigure-img{
+				display: block;
+				width: 400rpx;
+				height: 400rpx;
+				margin: 0 auto;
+			}
+			.noFigure-text{
+				margin-top: 20rpx;
+				font-weight: 400;
+				font-size: 26rpx;
+				color: #666666;
+				line-height: 36rpx;
+				text-align: center;
+				text{
+					color: #165DFF;
+					margin-left: 10rpx;
+				}
+			}
+		}
 	}
 	.myPhoto-listAct{
 		padding-bottom: 320rpx;
@@ -477,8 +545,8 @@ export default {
 				/deep/ .wx-checkbox-input{
 					width: 32rpx;
 					height: 32rpx;
-					background: transparent;
-					border: solid 1px #fff;
+					background: rgba(255,255,255,0.5);//transparent;
+					border: 2rpx solid #C7C7C7;
 				}
 				/deep/ .wx-checkbox-input.wx-checkbox-input-checked {
 					background: #FE6600; // 选中的颜色
@@ -619,4 +687,11 @@ export default {
 			}
 		}
 	}
+	.myPhoto-getPhotos{
+		width: 174rpx;
+		height: 174rpx;
+		position: fixed;
+		right: 32rpx;
+		bottom: 58rpx;
+	}
 </style>
\ No newline at end of file

pages/album/photoJigsaw/photoJigsaw.vue

+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>