Skip to content

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

新增 拼图页面

parent c5316801
Hide whitespace changes
Inline Side-by-side
Showing with 131 additions and 26 deletions
pages.json
View file @ 42342ff0
......@@ -463,7 +463,7 @@
{
"path": "myPhotoAlbum/myPhotoAlbum",
"style": {
"navigationBarTitleText": "我的相册",
"navigationBarTitleText": "我的相片",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
......@@ -500,6 +500,14 @@
"enablePullDownRefresh": false
}
},
{
"path" : "photoJigsaw/photoJigsaw",
"style": {
"navigationBarTitleText": "我的相片",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}
]
}
......
pages/album/myPhotoAlbum/myPhotoAlbum.vue
View file @ 42342ff0
......@@ -30,7 +30,7 @@
</view>
</view>
<!--相框/项目切换-->
<view class="myPhoto-search">
<view class="myPhoto-search" v-if="pictureFrameList.length!=0">
<view class="search-left">
<view class="left-frame" :class="frameNum==1?'left-frameAct':''" @click="frameFun(1)">金属框</view>
<view class="left-frame" :class="frameNum==2?'left-frameAct':''" @click="frameFun(2)">木框</view>
......@@ -40,21 +40,31 @@
<view class="right-addressClick" @click="show = true">
{{showAddress}}
<view class="address-triangle"></view>
<u-picker :show="show" :columns="columns" keyName="label" @confirm="addressFun" @cancel="show=false" ></u-picker>
<u-picker :show="show" :columns="columns" visibleItemCount="6" itemHeight="80" keyName="label" @confirm="addressFun" @cancel="show=false" ></u-picker>
</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="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>
<template v-if="titleclick==1||titleclick!=1&&pictureFrameList.length!=0">
<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="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>
</template>
<template v-else>
<view class="list-noFigure">
<image class="noFigure-img" src="../static/album/icon07.png"></image>
<view class="noFigure-text">
三宫格须先下载照片, 才能设置<text @click="clickActFun(1)">去下载</text>
</view>
</view>
</template>
</view>
<!--点击放大后相片遮罩-->
<view class="myPhoto-mask" v-if="blowUpMaks==true" :style="{'top': albumBoxTop + 'px' }">
......@@ -67,6 +77,8 @@
</swiper-item>
</swiper>
</view>
<!--获取照片-->
<image v-if="pictureFrameListNum==0" class="myPhoto-getPhotos" src="../static/album/icon08.png"></image>
<!--脚部选择相片、加入购物车、直接购买-->
<view class="myPhoto-bottom" v-if="pictureFrameListNum>0">
<view class="bottom-tips">相片保留10天, 请尽快下载, 下载保存</view>
......@@ -74,7 +86,7 @@
<!--加入相册列表-->
<view class="feature-list">
<template v-for="(item,index) in pictureFrameList">
<view class="feature-case" v-if="item.checkType==true" :key="index">
<view class="feature-case" v-if="item.pickerChoose==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>
......@@ -116,12 +128,30 @@ export default {
show: false,//遮罩显隐---项目
columns: [//遮罩列表---项目
[{
label: '雪月夜',
label: '雪月夜1',
// 其他属性值
id: 2021
// ...
}, {
label: '冷夜雨',
label: '冷夜雨2',
id: 804
}, {
label: '冷夜雨3',
id: 804
}, {
label: '冷夜雨4',
id: 804
}, {
label: '冷夜雨5',
id: 804
}, {
label: '冷夜雨6',
id: 804
}, {
label: '冷夜雨7',
id: 804
}, {
label: '冷夜雨8',
id: 804
}]
],
......@@ -130,22 +160,27 @@ export default {
{
image:'https://img1.baidu.com/it/u=1360904074,3378535006&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1427',
checkType:false,
pickerChoose:false,
},
{
image:'https://i1.hdslb.com/bfs/archive/34961798a6c8fa26348499483fc16e48831af85d.jpg',
checkType:false,
pickerChoose:false,
},
{
image:'https://img1.baidu.com/it/u=2652134479,594912468&fm=253&fmt=auto&app=138&f=JPEG?w=878&h=493',
checkType:false,
pickerChoose:false,
},
{
image:'https://img0.baidu.com/it/u=2602636891,3687528369&fm=253&fmt=auto&app=120&f=JPEG?w=1087&h=612',
checkType:false,
pickerChoose:false,
},
{
image:'https://img2.baidu.com/it/u=635571518,763366960&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1131',
checkType:false,
pickerChoose:false,
},
],
checkTypeFun:true,//刷新选项
......@@ -194,6 +229,7 @@ export default {
this.titleclick = num
this.pictureFrameList.forEach(item=>{
item.checkType = false
item.pickerChoose = false
})
this.pictureFrameListNum = 0
if(this.titleclick==2){
......@@ -214,16 +250,18 @@ export default {
},
stopPhoto(index){//相片选择
this.checkTypeFun = false
this.stopPhotoNumFun(index)
if(this.titleclick!=1&&this.pictureFrameListNum>this.maxChooseImg){//+this.maxChooseImg+
if(this.titleclick==1||this.titleclick!=1&&this.pictureFrameListNum<this.maxChooseImg||this.titleclick!=1&&this.pictureFrameListNum==this.maxChooseImg&&this.pictureFrameList[index].checkType == true){//+this.maxChooseImg+
this.stopPhotoNumFun(index)
}else if(this.titleclick!=1&&this.pictureFrameListNum>=this.maxChooseImg){
this.pictureFrameList[index].checkType = true
this.$nextTick(function() {
this.stopPhotoNumFun(index)
this.pictureFrameList[index].checkType = false
})
uni.showToast({
title: '最多选择'+this.maxChooseImg+'张',
icon:'error',
duration: 2000
title: '最多选择'+this.maxChooseImg+'张',
icon:'error',
duration: 2000
})
}
if(this.pictureFrameListNum>0){
......@@ -234,8 +272,10 @@ export default {
stopPhotoNumFun(index){//相片选择开关
if(this.pictureFrameList[index].checkType==false){
this.pictureFrameList[index].checkType = true
this.pictureFrameList[index].pickerChoose = true
}else{
this.pictureFrameList[index].checkType = false
this.pictureFrameList[index].pickerChoose = false
}
this.pictureFrameListNum = 0
this.pictureFrameList.forEach(item=>{//判断 是否有照片被选择
......@@ -385,6 +425,7 @@ export default {
align-content:flex-start;
background-color: #F5F7FA;
overflow: auto;
position: relative;
.list-pictureFrame{
height: 248rpx;
margin-bottom: 4rpx;
......@@ -404,8 +445,8 @@ export default {
/deep/ .wx-checkbox-input{
width: 32rpx;
height: 32rpx;
background: transparent;
border: solid 1px #fff;
background: rgba(255,255,255,0.5);//transparent;
border: 2rpx solid #C7C7C7;
}
/deep/ .wx-checkbox-input.wx-checkbox-input-checked {
background: #FE6600; // 选中的颜色
......@@ -445,6 +486,33 @@ export default {
.list-pictureFrame:nth-last-child(1){
flex: 1;
}
.list-noFigure{
width: 100%;
height: 456rpx;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
.noFigure-img{
display: block;
width: 400rpx;
height: 400rpx;
margin: 0 auto;
}
.noFigure-text{
margin-top: 20rpx;
font-weight: 400;
font-size: 26rpx;
color: #666666;
line-height: 36rpx;
text-align: center;
text{
color: #165DFF;
margin-left: 10rpx;
}
}
}
}
.myPhoto-listAct{
padding-bottom: 320rpx;
......@@ -477,8 +545,8 @@ export default {
/deep/ .wx-checkbox-input{
width: 32rpx;
height: 32rpx;
background: transparent;
border: solid 1px #fff;
background: rgba(255,255,255,0.5);//transparent;
border: 2rpx solid #C7C7C7;
}
/deep/ .wx-checkbox-input.wx-checkbox-input-checked {
background: #FE6600; // 选中的颜色
......@@ -619,4 +687,11 @@ export default {
}
}
}
.myPhoto-getPhotos{
width: 174rpx;
height: 174rpx;
position: fixed;
right: 32rpx;
bottom: 58rpx;
}
</style>
\ No newline at end of file
pages/album/photoJigsaw/photoJigsaw.vue 0 → 100644
View file @ 42342ff0
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</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