图片展示

pages/album/albumComponets/photoPreview/photoPreview.vue

 <template>
-	<view>
-		123
+	<view class="preview-mask">
+		<swiper class="swiper" circular duration="500" :current='currentNum' @change="imgToFun">
+			<swiper-item v-for="(item,index) in imgList" :key="index">
+				<image class="swiper-img" :src="item.imgUrl"></image>
+			</swiper-item>
+		</swiper>
+		<view class="preview-list">
+			<view class="list-img" v-for="(item,index) in imgList" :key="index" :class="currentNum==index?'list-imgAct':''" @click="thumbnailFun(index)">
+				<image :src="item.imgUrl"></image>
+				<view>
+					{{item.name}}
+				</view>
+			</view>
+		</view>
+		<view class="preview-close">
+			<u-icon name="close"></u-icon>
+		</view>
 	</view>
 </template>
 
@@ -8,15 +23,152 @@
 export default {
   data() {
     return {
-				
+      imgList:[
+        {
+          imgUrl:'https://img1.baidu.com/it/u=1360904074,3378535006&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1427',
+          name:'金属相框',
+        },
+        {
+          imgUrl:'https://i1.hdslb.com/bfs/archive/34961798a6c8fa26348499483fc16e48831af85d.jpg',
+          name:'木框',
+        },
+        {
+          imgUrl:'https://img1.baidu.com/it/u=2652134479,594912468&fm=253&fmt=auto&app=138&f=JPEG?w=878&h=493',
+          name:'无框',
+        },
+      ],//相片集合
+      pictureFrame:[
+        {
+          url:'',
+          name:'金属相框',
+          width:'',
+          height:'',
+        },
+        {
+          url:'',
+          name:'木框',
+          width:'',
+          height:'',
+        },
+        {
+          url:'',
+          name:'无框',
+          width:'',
+          height:'',
+        },
+      ],//相框集合
+      imgAllList:[],//相片加相框融合集合
+      currentNum:1,//当前位置
     }
   },
   methods: {
-			
+    imgFusion(){//相片相框融合
+      if(this.pictureFrame.length>0){
+        this.imgList.forEach((item,index)=>{
+          this.pictureFrame.forEach((item2,index2)=>{
+            var data = {
+              url:item.imgUrl,
+              pictureUrl:item2.url,
+              pictureWidth:item2.width,
+              pictureHeight:item2.height,
+            }
+            this.imgAllList.push(data)
+          })
+        })
+      }
+    },
+    imgToFun(event){//当前轮播图第几张
+      this.currentNum = event.detail.current
+      console.log(event)
+    },
+    thumbnailFun(index){//点击缩略图 查看详情
+      this.currentNum = index
+    },
   }
 }
 </script>
 
-<style>
-
+<style scoped lang="scss">
+	.preview-mask{
+		padding-top: 296rpx;
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 50;
+		background-color: rgba(0,0,0,.3);
+	}
+	/deep/ .swiper{
+		width: 100%;
+		height: 956rpx;
+		margin-bottom: 36rpx;
+	}
+	.swiper-img{
+		display: block;
+		width: 680rpx;
+		height: 956rpx;
+		margin: 0 auto;
+	}
+	.preview-list{
+		display: flex;
+		width: 100%;
+		height: 80rpx;
+		padding: 0 36rpx 0 36rpx;
+		overflow: auto;
+		.list-img{
+			width: 80rpx;
+			height: 80rpx;
+			margin-right: 8rpx;
+			background: rgba(254,102,0,0);
+			border-radius: 4rpx;
+			position: relative;
+			image{
+				display: block;
+				width: 72rpx;
+				height: 72rpx;
+				border-radius: 4rpx;
+				margin: auto;
+				position: absolute;
+				top:0;
+				right: 0;
+				bottom: 0;
+				left: 0;
+			}
+			view{
+				width: 72rpx;
+				height: 24rpx;
+				font-weight: 600;
+				font-size: 16rpx;
+				color: #FFFFFF;
+				line-height: 24rpx;
+				text-align: center;
+				background: #CFA891;
+				margin: auto;
+				position: absolute;
+				bottom: 4rpx;
+				left: 0;
+				right: 0;
+			}
+		}
+		.list-imgAct{
+			background: rgba(254,102,0,1);
+		}
+	}
+	.preview-close{
+		width: 52rpx;
+		height: 52rpx;
+		position: absolute;
+		top: 204rpx;
+		right: 34rpx;
+		/deep/ .u-icon--right{
+			flex-direction: row-reverse !important;
+		}
+		/deep/ .u-icon__icon{
+			color: #fff !important;
+			font-weight: bold !important;
+			font-size: 50rpx !important;
+			line-height: 52rpx !important;
+		}
+	}
 </style>

pages/album/myPhotoAlbum/myPhotoAlbum.vue

@@ -115,7 +115,7 @@
 		<!--购买-->
 		<compometsBuy style="display: none;"></compometsBuy>
 		<!--购买预览-->
-		<photoPreview></photoPreview>
+		<photoPreview style="display: none;"></photoPreview>
 	</view>
 </template>