Skip to content

U
uni-pdtravel
Commit af8d64d7 authored by qipeng's avatar qipeng
Browse files
Options

代码修改

parent 373dd285
Show whitespace changes
Inline Side-by-side
Showing with 240 additions and 26 deletions
pages.json
View file @ af8d64d7
......@@ -464,7 +464,8 @@
"path": "myPhotoAlbum/myPhotoAlbum",
"style": {
"navigationBarTitleText": "我的相册",
"enablePullDownRefresh": false
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
......
pages/album/myPhotoAlbum/myPhotoAlbum.vue
View file @ af8d64d7
<template>
<view class="albumBox">
<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}}
</view>
<view class="myPhoto-title">
<view class="title-click" :class="titleclick==1?'title-clickAct':''" @click="clickActFun(1)">
单照片
......@@ -32,15 +40,39 @@
</view>
</view>
</view>
<view class="myPhoto-list" v-if="checkTypeFun==true">
<view class="myPhoto-list" v-if="checkTypeFun==true" :class="bottomShow==true?'myPhoto-listAct':''">
<view class="list-pictureFrame" v-for="(item,index) in pictureFrameList" :key="index">
<image class="pictureFrame-img" :src="item.url"></image>
<image class="pictureFrame-img" :src="item.image"></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 class="pictureFrame-boxBottom" @click="blowUpFun(index)"></view>
<image class="pictureFrame-blowUp" @click="blowUpFun(index)" src="../static/album/icon04.png"></image>
</view>
</view>
<view class="myPhoto-mask" v-if="blowUpMaks==true" :style="{'top': albumBoxTop + 'px' }">
<swiper class="swiper" circular @change="projectNumFun" :current="currentNum">
<swiper-item v-for="(item,index) in pictureFrameList" :key="index">
<image :src="item.image" @click="stopPhoto(index)" :style="{'width': item.width, 'height': item.height}"></image>
<checkbox-group @click.stop.native="()=>{}" @change="stopPhoto(index)" v-if="checkTypeFun==true">
<checkbox value="val" :checked="item.checkType" class="pictureFrame-check" :class="item.checkType==true?'pictureFrame-checkAct':''"></checkbox>
</checkbox-group>
</swiper-item>
</swiper>
</view>
<view class="myPhoto-bottom">
<view class="bottom-tips">相片保留10天, 请尽快下载, 下载保存</view>
<view class="bottom-feature">
<view class="feature-list">
<template v-for="(item,index) in pictureFrameList">
<view class="feature-case" v-if="item.checkType==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>
</template>
</view>
<view class="feature-message"></view>
</view>
</view>
</view>
......@@ -71,31 +103,64 @@ export default {
showAddress:'重庆',//显示内容---项目
pictureFrameList:[
{
url:'../static/album/DIY.png',
image:'https://img1.baidu.com/it/u=1360904074,3378535006&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1427',
checkType:false,
},
{
url:'../static/album/DIY.png',
image:'https://i1.hdslb.com/bfs/archive/34961798a6c8fa26348499483fc16e48831af85d.jpg',
checkType:false,
},
{
url:'../static/album/DIY.png',
image:'https://img1.baidu.com/it/u=2652134479,594912468&fm=253&fmt=auto&app=138&f=JPEG?w=878&h=493',
checkType:false,
},
{
url:'../static/album/DIY.png',
image:'https://img0.baidu.com/it/u=2602636891,3687528369&fm=253&fmt=auto&app=120&f=JPEG?w=1087&h=612',
checkType:false,
},
{
url:'../static/album/DIY.png',
image:'https://img2.baidu.com/it/u=635571518,763366960&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1131',
checkType:false,
},
],
checkTypeFun:true,//刷新选项
statusBarHeight: 0,//状态栏高度
capsule: 0,// 胶囊大小、位置数据
navHeight: 0,// 导航栏高度
albumBoxTop:0,//顶部高度
blowUpMaks:false,//放大显示的遮罩
blowUpNumNew:0,//当前的位置
currentNum:0,//当前所在滑块的 index
bottomShow:false,//脚部的显隐
}
},
onLoad(option) {
this.pictureFrameList.forEach(item=>{
//await
let imageInfoObj = uni.getImageInfo({
src: item.image,
success: function (imageInfo) {
if(imageInfo.height>imageInfo.width){
item['width'] = '680rpx'
item['height'] = '956rpx'
}else{
item['width'] = '680rpx'
item['height'] = '510rpx'
}
},
fail: function (error) {
console.error(error)
// 获取图片信息失败后的操作
}
})
})
console.log(this.pictureFrameList)
this.recordDeviceInfo()
},
methods: {
clickActFun(num){//宫格选择
......@@ -120,21 +185,68 @@ export default {
}else{
this.pictureFrameList[index].checkType = false
}
var pictureFrameListNum = 0
this.pictureFrameList.forEach(item=>{//判断 是否有照片被选择
if(item.checkType==true){
pictureFrameListNum +=1
}
})
if(pictureFrameListNum>0){
this.bottomShow = true
}
this.checkTypeFun = true
},
blowUpFun(){//相片放大
blowUpFun(index){//相片放大 遮罩显隐
this.blowUpMaks = true
this.blowUpNumNew = index+1
this.currentNum = index
},
projectNumFun(e){//当前滑动到第几张
this.blowUpNumNew = e.target.current+1
},
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
})
},
}
}
</script>
<style scoped lang="scss">
page {
background: #F5F7FA;
}
.albumBox{
padding-top: 202rpx;
display: flex;
flex-direction:column;
height: 100vh;
background-color: #fff;
}
.albumBoxAct{
background-color: #F5F7FA;
}
.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;
}
}
.myPhoto-title{
width: 100%;
......@@ -143,10 +255,6 @@ export default {
background-color: #fff;
display: flex;
justify-content: space-between;
position: fixed;
left: 0;
top: 0;
z-index: 40;
.title-click{
height: 68rpx;
font-weight: 600;
......@@ -180,10 +288,6 @@ export default {
height: 102rpx;
padding: 20rpx 24rpx 0 24rpx;
background: #F5F7FA;
position: fixed;
left: 0;
top: 100rpx;
z-index: 40;
.search-left{
display: flex;
.left-frame{
......@@ -227,10 +331,15 @@ export default {
}
}
.myPhoto-list{
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content:flex-start;
background-color: #F5F7FA;
overflow: auto;
.list-pictureFrame{
height: 248rpx;
margin-bottom: 4rpx;
position: relative;
.pictureFrame-img{
......@@ -290,4 +399,108 @@ export default {
flex: 1;
}
}
.myPhoto-listAct{
padding-bottom: 320rpx;
}
.myPhoto-mask{
width: 100%;
height: 100%;
background: #F5F7FA;
position: fixed;
left: 0;
z-index: 10;
.swiper{
width: 680rpx;
height: 956rpx;//510rpx
margin: 0 auto;
background: #F5F7FA;
margin-top: 80rpx;
/deep/ swiper-item{
display: flex;
align-items:center;
}
.pictureFrame-check{
width: 32rpx;
height: 32rpx;
background: transparent;
position: absolute;
right: 56rpx;
bottom: 60rpx;
z-index: 11;
/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;
}
}
}
}
.myPhoto-bottom{
width: 100%;
height: 314rpx;
position: fixed;
left: 0;
bottom: 0;
z-index: 30;
.bottom-tips{
width: 726rpx;
height: 64rpx;
background: #FFF6E8;
border-radius: 8rpx 8rpx 0rpx 0rpx;
border: 2rpx solid #FE6600;
box-sizing: border-box;
font-weight: 400;
font-size: 24rpx;
color: #FE6600;
text-align: center;
line-height: 60rpx;
margin: 0 auto;
}
.bottom-feature{
width: 100%;
height: 250rpx;
background-color: #fff;
padding: 20rpx 24rpx 0 24rpx;
.feature-list{
display: flex;
width: 100%;
overflow: auto;
}
.feature-case{
width: 142rpx;
height: 142rpx;
padding: 10rpx 10rpx 0 0;
margin-right: 15rpx;
position: relative;
.feature-img{
width: 132rpx;
height: 132rpx;
}
.feature-close{
width: 32rpx;
height: 32rpx;
position: absolute;
top: 0;
right: 0;
}
}
.feature-message{
display: flex;
justify-content: space-between;
margin-top: 6rpx;
}
}
}
</style>
\ No newline at end of file
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