Skip to content

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

点击事件

parent af8d64d7
Hide whitespace changes
Inline Side-by-side
Showing with 136 additions and 20 deletions
pages/album/myPhotoAlbum/myPhotoAlbum.vue
View file @ c5316801
<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}}
</view>
<!--单张 宫格切换-->
<view class="myPhoto-title">
<view class="title-click" :class="titleclick==1?'title-clickAct':''" @click="clickActFun(1)">
单照片
......@@ -26,6 +29,7 @@
<view class="click-line"></view>
</view>
</view>
<!--相框/项目切换-->
<view class="myPhoto-search">
<view class="search-left">
<view class="left-frame" :class="frameNum==1?'left-frameAct':''" @click="frameFun(1)">金属框</view>
......@@ -40,17 +44,19 @@
</view>
</view>
</view>
<!--相片列表-->
<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.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 @click.stop.native="()=>{}" @change="stopPhoto(index)" >
<checkbox :value="item.image" :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" @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">
......@@ -61,9 +67,11 @@
</swiper-item>
</swiper>
</view>
<view class="myPhoto-bottom">
<!--脚部选择相片、加入购物车、直接购买-->
<view class="myPhoto-bottom" v-if="pictureFrameListNum>0">
<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">
......@@ -72,7 +80,24 @@
</view>
</template>
</view>
<view class="feature-message"></view>
<!--选中的张数、加入购物车、立即购买、开始拼图 titleclick等于1显示购物车和立即购买 等于其他 显示开始拼图 进入拼图界面-->
<view class="feature-message">
<view class="message-selectNum" v-if="titleclick==1">
已选中
<text class="selectNum-color">{{pictureFrameListNum}}张</text>
</view>
<view class="message-selectNum" v-else>
<text class="selectNum-color">最多选择{{maxChooseImg}}张</text>
</view>
<view class="message-trading" v-if="titleclick==1">
<view class="trading-btn trading-left">
<image src="../static/album/icon06.png"></image>
<view class="trading-num">2</view>
</view>
<view class="trading-btn trading-right">购买</view>
</view>
<view class="message-jigsaw" v-else>开始拼图</view>
</view>
</view>
</view>
</view>
......@@ -135,10 +160,12 @@ export default {
currentNum:0,//当前所在滑块的 index
bottomShow:false,//脚部的显隐
pictureFrameListNum:0,//当前选择了多少张
maxChooseImg:0,//最多选择多少张
}
},
onLoad(option) {
this.pictureFrameList.forEach(item=>{
this.pictureFrameList.forEach(item=>{//判断每一张图片的宽高，根据宽高设置图片大小
//await
let imageInfoObj = uni.getImageInfo({
src: item.image,
......@@ -159,7 +186,6 @@ export default {
})
})
console.log(this.pictureFrameList)
this.recordDeviceInfo()
},
methods: {
......@@ -169,6 +195,14 @@ export default {
this.pictureFrameList.forEach(item=>{
item.checkType = false
})
this.pictureFrameListNum = 0
if(this.titleclick==2){
this.maxChooseImg = 2
}else if(this.titleclick==3){
this.maxChooseImg = 3
}else if(this.titleclick==4){
this.maxChooseImg = 6
}
this.checkTypeFun = true
},
frameFun(num){//相框选择
......@@ -180,29 +214,42 @@ export default {
},
stopPhoto(index){//相片选择
this.checkTypeFun = false
if(this.pictureFrameList[index].checkType==false){
this.pictureFrameList[index].checkType = true
}else{
this.pictureFrameList[index].checkType = false
}
var pictureFrameListNum = 0
this.pictureFrameList.forEach(item=>{//判断 是否有照片被选择
if(item.checkType==true){
pictureFrameListNum +=1
}
})
if(pictureFrameListNum>0){
this.stopPhotoNumFun(index)
if(this.titleclick!=1&&this.pictureFrameListNum>this.maxChooseImg){//+this.maxChooseImg+
this.$nextTick(function() {
this.stopPhotoNumFun(index)
})
uni.showToast({
title: '最多选择'+this.maxChooseImg+'张',
icon:'error',
duration: 2000
})
}
if(this.pictureFrameListNum>0){
this.bottomShow = true
}
this.checkTypeFun = true
},
stopPhotoNumFun(index){//相片选择开关
if(this.pictureFrameList[index].checkType==false){
this.pictureFrameList[index].checkType = true
}else{
this.pictureFrameList[index].checkType = false
}
this.pictureFrameListNum = 0
this.pictureFrameList.forEach(item=>{//判断 是否有照片被选择
if(item.checkType==true){
this.pictureFrameListNum +=1
}
})
},
blowUpFun(index){//相片放大 遮罩显隐
this.blowUpMaks = true
this.blowUpNumNew = index+1
this.currentNum = index
},
projectNumFun(e){//当前滑动到第几张
projectNumFun(e){//当前滑动到第几张
this.blowUpNumNew = e.target.current+1
},
recordDeviceInfo() { //---记录设备信息
......@@ -499,7 +546,76 @@ export default {
.feature-message{
display: flex;
justify-content: space-between;
height: 64rpx;
margin-top: 6rpx;
.message-selectNum{
font-weight: 400;
font-size: 24rpx;
color: #999999;
line-height: 64rpx;
.selectNum-color{
color: #333333;
margin-left: 10rpx;
}
}
.message-trading{
display: flex;
position: relative;
.trading-btn{
width: 160rpx;
height: 64rpx;
position: relative;
}
.trading-left{
background: #FF9F43;
border-radius: 200rpx 0rpx 0rpx 200rpx;
image{
width: 40rpx;
height: 40rpx;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
.trading-num{
width: 42rpx;
height: 44rpx;
border-radius: 50%;
background: #FFFFFF;
line-height: 44rpx;
text-align: center;
font-weight: bold;
font-size: 28rpx;
color: #FE6600;
position: absolute;
right: 12rpx;
top: -22rpx;
}
.trading-right{
background: #FE6600;
border-radius: 0rpx 200rpx 200rpx 0rpx;
text-align: center;
line-height: 64rpx;
font-size: 28rpx;
font-weight: 600;
text-align: center;
color: #FFFFFF;
}
}
.message-jigsaw{
width: 160rpx;
height: 64rpx;
background: #FE6600;
border-radius: 32rpx;
font-weight: bold;
font-size: 28rpx;
color: #FFFFFF;
line-height: 64rpx;
text-align: center;
}
}
}
}
......
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