Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
M
mallapp
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
viitto
mallapp
Commits
e3900647
Commit
e3900647
authored
Oct 27, 2021
by
罗超
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
1
parent
0d71ab10
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
280 additions
and
211 deletions
+280
-211
picDetail.vue
pages/school/picDetail.vue
+280
-211
No files found.
pages/school/picDetail.vue
View file @
e3900647
<
template
>
<
template
>
<view>
<view>
<view
v-if=
'!isId'
class=
"box"
>
<view
v-if=
"!isId"
class=
"box"
>
<view
class=
"nodata"
v-if=
"dataList.length===0"
>
<view
class=
"nodata"
v-if=
"dataList.length === 0"
>
暂无内容
</view>
暂无内容
<view
</view>
v-for=
"(item, index) in dataList"
<view
v-for=
"(item,index) in dataList"
:key=
"index"
class=
"img-box"
style=
"position: relative;"
v-if=
"dataList.length>0"
>
:key=
"index"
<image
:src=
"item.Path"
mode=
"aspectFill"
class=
"img"
v-if=
"item.Type==1"
@
click=
"previewImage(index)"
></image>
class=
"img-box"
<video
:id=
"'myVideo'+index"
:src=
"item.Path"
style=
"width: 215rpx;height: 215rpx;"
style=
"position: relative"
:controls=
'controls'
v-if=
"dataList.length > 0"
:show-center-play-btn=
'false'
>
:show-fullscreen-btn=
'false'
<image
@
fullscreenchange=
'videoControl'
:src=
"item.Path"
v-if=
"item.Type==2"
mode=
"aspectFill"
></video>
class=
"img"
<view
@
click=
"enlarge(index)"
v-if=
"item.Type == 1"
style=
"position: absolute;left: 50%;top: 50%;margin-top: -49rpx;margin-left: -49rpx;width: 98rpx;height: 98rpx;border-radius: 20rpx;background-color: rgba(255,255,255,.4);display: flex;align-items: center;justify-content: center;"
v-if=
"item.Type==2"
>
@
click=
"previewImage(index)"
<!-- 播放按钮 -->
></image>
<image
<video
src=
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
:id=
"'myVideo' + index"
style=
"width: 37rpx;height: 44rpx;"
mode=
""
></image>
:src=
"item.Path"
</view>
style=
"width: 215rpx; height: 215rpx"
</view>
:controls=
"controls"
</view>
:show-center-play-btn=
"false"
<view
v-if=
"isId"
class=
"box"
>
:show-fullscreen-btn=
"false"
<view
style=
"width: 100%;height: 30px;line-height: 30px;"
>
@
fullscreenchange=
"videoControl"
图片
v-if=
"item.Type == 2"
</view>
></video>
<view
class=
"nodata"
v-if=
"imgList.length===0"
>
<view
暂无内容
@
click=
"enlarge(index)"
</view>
style=
"
<view
v-for=
"(item,index) in imgList"
:key=
"index"
class=
"img-box"
style=
"position: relative;"
v-if=
"imgList.length>0"
>
position: absolute;
<image
:src=
"item.Path"
mode=
"aspectFill"
class=
"img"
v-if=
"item.Type==1"
@
click=
"previewImage(index)"
></image>
left: 50%;
top: 50%;
</view>
margin-top: -49rpx;
<view
style=
"width: 100%;height: 30px;line-height: 30px;"
>
margin-left: -49rpx;
视频
width: 98rpx;
</view>
height: 98rpx;
<view
class=
"nodata"
v-if=
"videolist.length===0"
>
border-radius: 20rpx;
暂无内容
background-color: rgba(255, 255, 255, 0.4);
</view>
display: flex;
<view
v-for=
"(item,index) in videolist"
:key=
"index"
class=
"img-box"
style=
"position: relative;"
v-if=
"videolist.length>0"
>
align-items: center;
<video
:id=
"'myVideo'+index"
:src=
"item.Path"
style=
"width: 215rpx;height: 215rpx;"
justify-content: center;
:controls=
'controls'
"
:show-center-play-btn=
'false'
v-if=
"item.Type == 2"
:show-fullscreen-btn=
'false'
>
@
fullscreenchange=
'videoControl'
<!-- 播放按钮 -->
v-if=
"item.Type==2"
<image
></video>
src=
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
<view
@
click=
"enlarge(index)"
style=
"width: 37rpx; height: 44rpx"
style=
"position: absolute;left: 50%;top: 50%;margin-top: -49rpx;margin-left: -49rpx;width: 98rpx;height: 98rpx;border-radius: 20rpx;background-color: rgba(255,255,255,.4);display: flex;align-items: center;justify-content: center;"
v-if=
"item.Type==2"
>
mode=
""
<!-- 播放按钮 -->
></image>
<image
</view>
src=
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
</view>
style=
"width: 37rpx;height: 44rpx;"
mode=
""
></image>
</view>
</view>
<view
</view>
style=
"padding: 0 30rpx; font-size: 30rpx; font-weight: bold; color: #333"
</view>
v-if=
"isId"
>
</view>
图片
</view>
<view
v-if=
"isId"
class=
"box"
>
<view
class=
"nodata"
v-if=
"imgList.length === 0"
>
暂无内容
</view>
<view
v-for=
"(item, index) in imgList"
:key=
"index"
class=
"img-box"
style=
"position: relative"
v-if=
"imgList.length > 0"
>
<image
:src=
"item.Path"
mode=
"aspectFill"
class=
"img"
v-if=
"item.Type == 1"
@
click=
"previewImage(index)"
></image>
</view>
</view>
<view
style=
"padding: 0 30rpx; font-size: 30rpx; font-weight: bold; color: #333"
v-if=
"isId"
>
视频
</view>
<view
v-if=
"isId"
class=
"box"
>
<view
class=
"nodata"
v-if=
"videolist.length === 0"
>
暂无内容
</view>
<view
v-for=
"(item, index) in videolist"
:key=
"index"
class=
"img-box"
style=
"position: relative"
v-if=
"videolist.length > 0"
>
<video
:id=
"'myVideo' + index"
:src=
"item.Path"
style=
"width: 215rpx; height: 215rpx"
:controls=
"controls"
:show-center-play-btn=
"false"
:show-fullscreen-btn=
"false"
@
fullscreenchange=
"videoControl"
v-if=
"item.Type == 2"
></video>
<view
@
click=
"enlarge(index)"
style=
"
position: absolute;
left: 50%;
top: 50%;
margin-top: -49rpx;
margin-left: -49rpx;
width: 98rpx;
height: 98rpx;
border-radius: 20rpx;
background-color: rgba(255, 255, 255, 0.4);
display: flex;
align-items: center;
justify-content: center;
"
v-if=
"item.Type == 2"
>
<!-- 播放按钮 -->
<image
src=
"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
style=
"width: 37rpx; height: 44rpx"
mode=
""
></image>
</view>
</view>
</view>
</view>
</
template
>
</
template
>
<
script
>
<
script
>
export
default
{
export
default
{
data
()
{
data
()
{
return
{
return
{
id
:
0
,
id
:
0
,
boxOption
:
0
,
navsOption
:
0
,
titleStyle
:
{},
active
:
0
,
mainColor
:
''
,
likeStatus
:
false
,
controls
:
false
,
//显示默认控件
dataList
:[],
preImg
:[],
videoContext
:
null
,
imgList
:[],
videolist
:[],
isId
:
false
,
}
},
onLoad
(
options
)
{
uni
.
setNavigationBarTitle
({
title
:
'相册详情'
});
this
.
mainColor
=
this
.
$uiConfig
.
mainColor
;
if
(
options
.
data
){
let
res
=
JSON
.
parse
(
decodeURIComponent
(
options
.
data
))
this
.
dataList
=
res
.
data
this
.
dataList
.
map
(
e
=>
{
this
.
preImg
.
push
(
e
.
Path
)
})
console
.
log
(
this
.
dataList
)
}
if
(
options
.
Id
&&
options
.
Id
>
0
){
this
.
GetActivityDetial
(
options
.
Id
)
this
.
isId
=
true
}
},
methods
:
{
GetActivityDetial
(
Id
){
this
.
request2
({
url
:
'/api/AppletEducation/GetActivityDetial'
,
data
:
{
Id
:
Id
}
},
res
=>
{
let
FileGroup
=
res
.
data
.
FileGroup
this
.
imgList
=
[];
this
.
videolist
=
[];
FileGroup
.
forEach
(
x
=>
{
if
(
x
.
Key
==
1
){
//图片
if
(
x
.
groupList
&&
x
.
groupList
.
length
>
0
){
x
.
groupList
.
forEach
(
j
=>
{
this
.
imgList
=
j
.
FileList
})
}
}
else
{
if
(
x
.
groupList
&&
x
.
groupList
.
length
>
0
){
x
.
groupList
.
forEach
(
j
=>
{
this
.
videolist
=
j
.
FileList
})
}
}
})
console
.
log
(
this
.
imgList
,
this
.
videolist
)
this
.
imgList
.
map
(
e
=>
{
this
.
preImg
.
push
(
e
.
Path
)
})
}
);
},
previewImage
(
i
)
{
console
.
log
(
i
)
uni
.
previewImage
({
urls
:
this
.
preImg
,
current
:
i
,
longPressActions
:
{
itemList
:
[
"发送给朋友"
,
"保存图片"
,
"收藏"
],
success
:
function
(
data
)
{},
fail
:
function
(
err
)
{
console
.
log
(
err
.
errMsg
);
},
},
});
},
scroll
(
e
)
{
this
.
boxOption
=
Math
.
floor
((
e
.
detail
.
scrollTop
-
50
)
/
1.5
);
this
.
titleStyle
.
opacity
=
((
e
.
detail
.
scrollTop
-
100
)
<
0
?
0
:
Math
.
floor
(
e
.
detail
.
scrollTop
-
100
))
+
"%"
this
.
$forceUpdate
()
},
goback
()
{
uni
.
navigateBack
({
delta
:
1
,
});
},
enlarge
(
i
)
{
// 全屏
this
.
videoContext
=
uni
.
createVideoContext
(
'myVideo'
+
i
);
this
.
videoContext
.
requestFullScreen
({
direction
:
0
})
},
videoControl
(
e
){
if
(
e
.
detail
.
fullScreen
==
false
){
this
.
videoContext
.
stop
()
this
.
controls
=
false
}
else
{
this
.
videoContext
.
play
()
this
.
controls
=
true
}
},
},
mounted
()
{
}
}
boxOption
:
0
,
navsOption
:
0
,
titleStyle
:
{},
active
:
0
,
mainColor
:
""
,
likeStatus
:
false
,
controls
:
false
,
//显示默认控件
dataList
:
[],
preImg
:
[],
videoContext
:
null
,
imgList
:
[],
videolist
:
[],
isId
:
false
,
};
},
onLoad
(
options
)
{
uni
.
setNavigationBarTitle
({
title
:
"相册详情"
,
});
this
.
mainColor
=
this
.
$uiConfig
.
mainColor
;
if
(
options
.
data
)
{
let
res
=
JSON
.
parse
(
decodeURIComponent
(
options
.
data
));
this
.
dataList
=
res
.
data
;
this
.
dataList
.
map
((
e
)
=>
{
this
.
preImg
.
push
(
e
.
Path
);
});
console
.
log
(
this
.
dataList
);
}
if
(
options
.
Id
&&
options
.
Id
>
0
)
{
this
.
GetActivityDetial
(
options
.
Id
);
this
.
isId
=
true
;
}
},
methods
:
{
GetActivityDetial
(
Id
)
{
this
.
request2
(
{
url
:
"/api/AppletEducation/GetActivityDetial"
,
data
:
{
Id
:
Id
},
},
(
res
)
=>
{
let
FileGroup
=
res
.
data
.
FileGroup
;
this
.
imgList
=
[];
this
.
videolist
=
[];
FileGroup
.
forEach
((
x
)
=>
{
if
(
x
.
Key
==
1
)
{
//图片
if
(
x
.
groupList
&&
x
.
groupList
.
length
>
0
)
{
x
.
groupList
.
forEach
((
j
)
=>
{
this
.
imgList
=
j
.
FileList
;
});
}
}
else
{
if
(
x
.
groupList
&&
x
.
groupList
.
length
>
0
)
{
x
.
groupList
.
forEach
((
j
)
=>
{
this
.
videolist
=
j
.
FileList
;
});
}
}
});
console
.
log
(
this
.
imgList
,
this
.
videolist
);
this
.
imgList
.
map
((
e
)
=>
{
this
.
preImg
.
push
(
e
.
Path
);
});
}
);
},
previewImage
(
i
)
{
console
.
log
(
i
);
uni
.
previewImage
({
urls
:
this
.
preImg
,
current
:
i
,
longPressActions
:
{
itemList
:
[
"发送给朋友"
,
"保存图片"
,
"收藏"
],
success
:
function
(
data
)
{},
fail
:
function
(
err
)
{
console
.
log
(
err
.
errMsg
);
},
},
});
},
scroll
(
e
)
{
this
.
boxOption
=
Math
.
floor
((
e
.
detail
.
scrollTop
-
50
)
/
1.5
);
this
.
titleStyle
.
opacity
=
(
e
.
detail
.
scrollTop
-
100
<
0
?
0
:
Math
.
floor
(
e
.
detail
.
scrollTop
-
100
))
+
"%"
;
this
.
$forceUpdate
();
},
goback
()
{
uni
.
navigateBack
({
delta
:
1
,
});
},
enlarge
(
i
)
{
// 全屏
this
.
videoContext
=
uni
.
createVideoContext
(
"myVideo"
+
i
);
this
.
videoContext
.
requestFullScreen
({
direction
:
0
,
});
},
videoControl
(
e
)
{
if
(
e
.
detail
.
fullScreen
==
false
)
{
this
.
videoContext
.
stop
();
this
.
controls
=
false
;
}
else
{
this
.
videoContext
.
play
();
this
.
controls
=
true
;
}
},
},
mounted
()
{},
};
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
.box
{
.box
{
margin
:
30rpx
;
margin
:
30rpx
;
display
:
flex
;
display
:
flex
;
flex-wrap
:
wrap
;
flex-wrap
:
wrap
;
&
.img-box
:nth-child
(
3n
)
{
&
.img-box
:nth-child
(
3n
)
{
margin-right
:
0rpx
!
important
;
margin-right
:
0rpx
!
important
;
background-color
:
#000000
;
background-color
:
#000000
;
}
}
.img-box
{
.img-box
{
width
:
215rpx
;
width
:
215rpx
;
height
:
215rpx
;
height
:
215rpx
;
border-radius
:
12rpx
;
border-radius
:
12rpx
;
bottom
:
10px
;
bottom
:
10px
;
margin-right
:
10px
;
margin-right
:
10px
;
margin-bottom
:
10px
;
margin-bottom
:
10px
;
border
:
1rpx
solid
#EEEEEE
;
border
:
1rpx
solid
#eeeeee
;
overflow
:
hidden
;
overflow
:
hidden
;
}
}
.img
{
.img
{
width
:
215rpx
;
width
:
215rpx
;
height
:
215rpx
;
height
:
215rpx
;
border-radius
:
12rpx
;
border-radius
:
12rpx
;
}
}
}
}
.nodata
{
.nodata
{
width
:
100%
;
width
:
100%
;
text-align
:
center
;
text-align
:
center
;
}
}
</
style
>
</
style
>
\ No newline at end of file
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