Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Sign in / Register
Toggle navigation
U
uni-pdtravel
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
panyongping
uni-pdtravel
Commits
c5316801
Commit
c5316801
authored
Jun 06, 2024
by
qipeng
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
点击事件
parent
af8d64d7
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
136 additions
and
20 deletions
+136
-20
myPhotoAlbum.vue
pages/album/myPhotoAlbum/myPhotoAlbum.vue
+136
-20
icon06.png
pages/album/static/album/icon06.png
+0
-0
No files found.
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,21 +214,35 @@ export default {
},
stopPhoto
(
index
){
//相片选择
this
.
checkTypeFun
=
false
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
}
var
pictureFrameListNum
=
0
this
.
pictureFrameListNum
=
0
this
.
pictureFrameList
.
forEach
(
item
=>
{
//判断 是否有照片被选择
if
(
item
.
checkType
==
true
){
pictureFrameListNum
+=
1
this
.
pictureFrameListNum
+=
1
}
})
if
(
pictureFrameListNum
>
0
){
this
.
bottomShow
=
true
}
this
.
checkTypeFun
=
true
},
blowUpFun
(
index
){
//相片放大 遮罩显隐
this
.
blowUpMaks
=
true
...
...
@@ -202,7 +250,6 @@ export default {
this
.
currentNum
=
index
},
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
;
}
}
}
}
...
...
pages/album/static/album/icon06.png
0 → 100644
View file @
c5316801
522 Bytes
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment