代码修改

pages/album/myPhotoAlbum/myPhotoAlbum.vue

 <template>
 	<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}}

pages/album/photoJigsaw/photoJigsaw.vue

 <template>
-	<view>
-		
+	<view class="albumBox" :style="{'padding-top': albumBoxTop + 'px' }">
+		<!--头部 我的相片-->
+		<view class="nav-bar"	:style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}">
+			<u-icon name="arrow-left" color="#333" @click="returnClick"></u-icon>
+			我的相片
+		</view>
+		<!--图片拼图-->
+		<view class="jigsaw-picture">
+			<image class="picture-backgrounImg" src="https://i2.hdslb.com/bfs/archive/bd7dfae552d4ff42e113a5b5a931d4ab2c225388.jpg"></image>
+			<template v-for="(item,index) in pictureJigsawPosition">
+				<view class="picture-position" :key="index" @drop="dropFun(event)" @dragover="allowDrag(event)" :style="{'width': item.width + 'rpx' ,'height': item.height + 'rpx' ,'top': item.top + 'rpx' ,'left': item.left + 'rpx' ,'border-radius': item.radius + 'rpx' ,}">
+					<image :src="item.url" draggable="true" @dragstart="dragFun(event)"></image>
+				</view>
+			</template>
+		</view>
 	</view>
 </template>
 
 <script>
-	export default {
+export default {
   data() {
     return {
+      statusBarHeight: 0,//状态栏高度
+      capsule: 0,// 胶囊大小、位置数据
+      navHeight: 0,// 导航栏高度
+      albumBoxTop:0,//顶部高度
 			
+      pictureJigsawPosition:[//图片框位置
+        {
+          url:'https://img2.baidu.com/it/u=1213138858,1241586936&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1153',
+          width:'300',
+          height:'500',
+          top:'200',
+          left:'24',
+          radius:'50'
+        },
+        {
+          url:'https://i0.hdslb.com/bfs/archive/4d063c42bb8d738f7be5e5a575a6dd19106c1c7d.jpg',
+          width:'400',
+          height:'200',
+          top:'200',
+          left:'340',
+          radius:'8'
+        },
+        {
+          url:'https://img2.baidu.com/it/u=1268701741,4039580892&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
+          width:'400',
+          height:'200',
+          top:'460',
+          left:'340',
+          radius:'16'
+        },
+      ],
     }
   },
+  onLoad(option) {
+    this.recordDeviceInfo()//记录设备信息
+  },
   methods: {
-			
-		}
+    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
+      })
+    },
+    //图片拖动
+    allowDrag(ev){
+      console.log('123')
+      ev.preventDefault()
+    },
+    dragFun(ev){
+      console.log('456')
+      ev.dataTransfer.setData('Text',ev.target.id)
+    },
+    dropFun(ev){
+      console.log('789')
+      ev.preventDefault()
+      var data = ev.dataTransfer.getData('Text')
+      ev.target.appendChild(document.getElementById(data))
+    },
   }
+}
 </script>
 
-<style>
-
+<style scoped lang="scss">
+	.albumBox{
+		display: flex;
+		flex-direction:column;
+		height: 100vh;
+		background-color: #fff;
+	}
+	.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;
+		}
+	}
+	.jigsaw-picture{
+		width: 750rpx;
+		height: 1100rpx;
+		margin-top: 86rpx;
+		position: relative;
+		.picture-backgrounImg{
+			width: 750rpx;
+			height: 1100rpx;
+		}
+		.picture-position{
+			border:solid 1px #333333;
+			overflow: auto;
+			position: absolute;
+		}
+	}
 </style>