Skip to content

U
uni-pdtravel
Commit 78b5a4be authored by 潘永坪's avatar 潘永坪
Browse files
Options

Merge branch 'album' of http://192.168.0.204/panyongping/uni-pdtravel into album 

# Conflicts:
#	pages.json
parents 51bb81c9 f46fcb81
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 757 additions and 933 deletions
pages.json
View file @ 78b5a4be
...@@ -452,19 +452,20 @@ ...@@ -452,19 +452,20 @@
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },
// { {
// "path": "getPortrait", "path": "getPortrait",
// "style": { "style": {
// "navigationBarTitleText": "", "navigationBarTitleText": "",
// "enablePullDownRefresh": false, "enablePullDownRefresh": false,
// "navigationStyle": "custom" "navigationStyle": "custom"
// } }
// }, },
{ {
"path": "myPhotoAlbum/myPhotoAlbum", "path": "myPhotoAlbum/myPhotoAlbum",
"style": { "style": {
"navigationBarTitleText": "我的相册", "navigationBarTitleText": "我的相片",
"enablePullDownRefresh": false "enablePullDownRefresh": false,
"navigationStyle": "custom"
} }
}, },
...@@ -501,10 +502,11 @@ ...@@ -501,10 +502,11 @@
}, },
{ {
"path" : "albumOrder/albumOrder", "path" : "photoJigsaw/photoJigsaw",
"style" : "style": {
{ "navigationBarTitleText": "我的相片",
"navigationBarTitleText" : "" "enablePullDownRefresh": false,
"navigationStyle": "custom"
} }
} }
] ]
......
pages/album/albumIndex/albumIndex.vue
View file @ 78b5a4be
...@@ -23,10 +23,13 @@ ...@@ -23,10 +23,13 @@
<view class="acquire-box acquire-boxBlue" @click="jumpToScanFaceClick"> <view class="acquire-box acquire-boxBlue" @click="jumpToScanFaceClick">
<view class="box-title">获取相片</view> <view class="box-title">获取相片</view>
<view class="box-text">获取拍摄相片</view> <view class="box-text">获取拍摄相片</view>
<image class="box-img" src="./../static/album/icon02.png"></image>
</view> </view>
<view class="acquire-box acquire-boxGreen"> <view class="acquire-box acquire-boxGreen">
<view class="box-title">相片DIY</view> <view class="box-title">相片DIY</view>
<view class="box-text">编辑手机相片</view> <view class="box-text">编辑手机相片</view>
<button class="acquire-input" @click="chooseImg"></button>
<image class="box-img" src="./../static/album/icon03.png"></image>
</view> </view>
</view> </view>
...@@ -86,37 +89,37 @@ export default { ...@@ -86,37 +89,37 @@ export default {
list: [{ list: [{
title: '精彩瞬间', title: '精彩瞬间',
count: '10W+', count: '10W+',
image: './static/album/wonderfulMoment.png', image: './../static/album/wonderfulMoment.png',
color: '#037EFF' color: '#037EFF'
}, },
{ {
title: '网红旅拍', title: '网红旅拍',
count: '8W+', count: '8W+',
image: './static/album/travalphoto.png', image: './../static/album/travalphoto.png',
color: '#826847' color: '#826847'
}, },
{ {
title: '抱枕DIY', title: '抱枕DIY',
count: '4W+', count: '4W+',
image: './static/album/pillow.png', image: './../static/album/pillow.png',
color: '#1175B4' color: '#1175B4'
}, },
{ {
title: '明信片', title: '明信片',
count: '4W+', count: '4W+',
image: './static/album/postcard.png', image: './../static/album/postcard.png',
color: '#3478DC' color: '#3478DC'
}, },
{ {
title: '旅游台历定制', title: '旅游台历定制',
count: '4W+', count: '4W+',
image: './static/album/deskCalender.png', image: './../static/album/deskCalender.png',
color: '#1A9B45' color: '#1A9B45'
}, },
{ {
title: '定制相册', title: '定制相册',
count: '4W+', count: '4W+',
image: './static/album/customPic.png', image: './../static/album/customPic.png',
color: '#D48D46' color: '#D48D46'
} }
], ],
...@@ -128,6 +131,16 @@ export default { ...@@ -128,6 +131,16 @@ export default {
} }
}, },
methods: { methods: {
chooseImg(){
uni.chooseImage({
count: 6, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths))
}
})
},
returnClick() { returnClick() {
uni.navigateBack({ uni.navigateBack({
delta: 1 delta: 1
...@@ -471,6 +484,27 @@ export default { ...@@ -471,6 +484,27 @@ export default {
color: #A5D3FF; color: #A5D3FF;
line-height: 28rpx; line-height: 28rpx;
text-align: center; text-align: center;
position: relative;
z-index: 8;
}
.acquire-input{
width: 334rpx;
height: 240rpx;
opacity: 0;
position: absolute;
top: 0;
left: 0;
z-index: 19;
}
.box-img{
width: 168rpx;
height: 144rpx;
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
} }
} }
.acquire-boxBlue{ .acquire-boxBlue{
......
pages/album/myPhotoAlbum/myPhotoAlbum - 副本.vue 0 → 100644
View file @ 78b5a4be
This diff is collapsed.
pages/album/myPhotoAlbum/myPhotoAlbum.vue
View file @ 78b5a4be
This diff is collapsed.
pages/album/photoJigsaw/photoJigsaw.vue 0 → 100644
View file @ 78b5a4be
<template>
<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 {
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 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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment