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
5df2c6e3
Commit
5df2c6e3
authored
Jun 05, 2024
by
qipeng
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
我的相册
parent
0d1ac6e0
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
198 additions
and
3 deletions
+198
-3
myPhotoAlbum.vue
pages/album/myPhotoAlbum/myPhotoAlbum.vue
+198
-3
icon04.png
pages/album/static/album/icon04.png
+0
-0
No files found.
pages/album/myPhotoAlbum/myPhotoAlbum.vue
View file @
5df2c6e3
...
@@ -19,7 +19,29 @@
...
@@ -19,7 +19,29 @@
</view>
</view>
</view>
</view>
<view
class=
"myPhoto-search"
>
<view
class=
"myPhoto-search"
>
<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>
<view
class=
"left-frame"
:class=
"frameNum==3?'left-frameAct':''"
@
click=
"frameFun(3)"
>
无框
</view>
</view>
<view
class=
"search-right"
>
<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>
</view>
</view>
</view>
<view
class=
"myPhoto-list"
v-if=
"checkTypeFun==true"
>
<view
class=
"list-pictureFrame"
v-for=
"(item,index) in pictureFrameList"
:key=
"index"
>
<image
class=
"pictureFrame-img"
:src=
"item.url"
></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>
</view>
</view>
</view>
</view>
</
template
>
</
template
>
...
@@ -33,14 +55,73 @@ export default {
...
@@ -33,14 +55,73 @@ export default {
data
()
{
data
()
{
return
{
return
{
titleclick
:
1
,
//1单照片 2二宫格 3三宫格 4六宫格
titleclick
:
1
,
//1单照片 2二宫格 3三宫格 4六宫格
frameNum
:
1
,
//相框选择参数
show
:
false
,
//遮罩显隐---项目
columns
:
[
//遮罩列表---项目
[{
label
:
'雪月夜'
,
// 其他属性值
id
:
2021
// ...
},
{
label
:
'冷夜雨'
,
id
:
804
}]
],
showAddress
:
'重庆'
,
//显示内容---项目
pictureFrameList
:[
{
url
:
'../static/album/DIY.png'
,
checkType
:
false
,
},
{
url
:
'../static/album/DIY.png'
,
checkType
:
false
,
},
{
url
:
'../static/album/DIY.png'
,
checkType
:
false
,
},
{
url
:
'../static/album/DIY.png'
,
checkType
:
false
,
},
{
url
:
'../static/album/DIY.png'
,
checkType
:
false
,
},
],
checkTypeFun
:
true
,
//刷新选项
}
}
},
},
onLoad
(
option
)
{
onLoad
(
option
)
{
},
},
methods
:
{
methods
:
{
clickActFun
(
num
){
clickActFun
(
num
){
//宫格选择
this
.
checkTypeFun
=
false
this
.
titleclick
=
num
this
.
titleclick
=
num
this
.
pictureFrameList
.
forEach
(
item
=>
{
item
.
checkType
=
false
})
this
.
checkTypeFun
=
true
},
frameFun
(
num
){
//相框选择
this
.
frameNum
=
num
},
addressFun
(
e
){
//项目选择
this
.
showAddress
=
e
.
value
[
0
].
label
this
.
show
=
false
},
stopPhoto
(
index
){
//单选
this
.
checkTypeFun
=
false
if
(
this
.
pictureFrameList
[
index
].
checkType
==
false
){
this
.
pictureFrameList
[
index
].
checkType
=
true
}
else
{
this
.
pictureFrameList
[
index
].
checkType
=
false
}
this
.
checkTypeFun
=
true
},
},
}
}
}
}
...
@@ -48,7 +129,7 @@ export default {
...
@@ -48,7 +129,7 @@ export default {
<
style
scoped
lang=
"scss"
>
<
style
scoped
lang=
"scss"
>
page
{
page
{
background
-color
:
#F7F7F7
;
background
:
#F5F7FA
;
}
}
.albumBox
{
.albumBox
{
padding-top
:
202rpx
;
padding-top
:
202rpx
;
...
@@ -63,6 +144,7 @@ export default {
...
@@ -63,6 +144,7 @@ export default {
position
:
fixed
;
position
:
fixed
;
left
:
0
;
left
:
0
;
top
:
0
;
top
:
0
;
z-index
:
40
;
.title-click
{
.title-click
{
height
:
68rpx
;
height
:
68rpx
;
font-weight
:
600
;
font-weight
:
600
;
...
@@ -90,7 +172,120 @@ export default {
...
@@ -90,7 +172,120 @@ export default {
}
}
}
}
.myPhoto-search
{
.myPhoto-search
{
display
:
flex
;
justify-content
:
space-between
;
width
:
100%
;
width
:
100%
;
height
:
102rpx
;
height
:
102rpx
;
padding
:
20rpx
24rpx
0
24rpx
;
background
:
#F5F7FA
;
position
:
fixed
;
left
:
0
;
top
:
100rpx
;
z-index
:
40
;
.search-left
{
display
:
flex
;
.left-frame
{
font-size
:
24rpx
;
color
:
#666666
;
line-height
:
64rpx
;
padding
:
0
20rpx
0
20rpx
;
}
.left-frameAct
{
width
:
160rpx
;
height
:
64rpx
;
padding
:
0
;
font-weight
:
600
;
font-size
:
28rpx
;
color
:
#333333
;
line-height
:
60rpx
;
text-align
:
center
;
background
:
#E6E9F4
;
border-radius
:
8rpx
;
border
:
2rpx
solid
#DAE0EB
;
}
}
.search-right
{
display
:
flex
;
.right-addressClick
{
display
:
flex
;
font-weight
:
600
;
font-size
:
24rpx
;
color
:
#333333
;
line-height
:
64rpx
;
position
:
relative
;
.address-triangle
{
width
:
0px
;
height
:
0px
;
margin
:
auto
;
margin-left
:
12rpx
;
border
:
10rpx
solid
transparent
;
border-top
:
10rpx
solid
#D8D8D8
;
}
}
}
}
.myPhoto-list
{
display
:
flex
;
flex-wrap
:
wrap
;
justify-content
:
space-between
;
.list-pictureFrame
{
margin-bottom
:
4rpx
;
position
:
relative
;
.pictureFrame-img
{
width
:
248rpx
;
height
:
248rpx
;
}
.pictureFrame-check
{
width
:
32rpx
;
height
:
32rpx
;
background
:
transparent
;
position
:
absolute
;
top
:
24rpx
;
left
:
192rpx
;
z-index
:
9
;
/
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
;
}
}
.pictureFrame-blowUp
{
width
:
32rpx
;
height
:
32rpx
;
position
:
absolute
;
bottom
:
24rpx
;
left
:
192rpx
;
z-index
:
9
;
}
.pictureFrame-boxTop
,
.pictureFrame-boxBottom
{
width
:
248rpx
;
height
:
124rpx
;
position
:
absolute
;
left
:
0
;
z-index
:
5
;
}
.pictureFrame-boxTop
{
top
:
0
;
}
.pictureFrame-boxBottom
{
bottom
:
0
;
}
}
.list-pictureFrame
:nth-last-child
(
1
)
{
flex
:
1
;
}
}
}
</
style
>
</
style
>
\ No newline at end of file
pages/album/static/album/icon04.png
0 → 100644
View file @
5df2c6e3
402 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