Skip to content

M
mallapp
Commit e3900647 authored by 罗超's avatar 罗超
Browse files
Options

1

parent 0d71ab10
Show whitespace changes
Inline Side-by-side
Showing with 280 additions and 211 deletions
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"
class="img"
v-if="item.Type == 1"
@click="previewImage(index)"
></image>
<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> ></video>
<view @click="enlarge(index)" <view
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="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 <image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
style="width: 37rpx;height: 44rpx;" mode=""></image> style="width: 37rpx; height: 44rpx"
mode=""
></image>
</view> </view>
</view> </view>
</view> </view>
<view v-if="isId" class="box"> <view
<view style="width: 100%;height: 30px;line-height: 30px;"> style="padding: 0 30rpx; font-size: 30rpx; font-weight: bold; color: #333"
v-if="isId"
>
图片 图片
</view> </view>
<view class="nodata" v-if="imgList.length===0"> <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 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="width: 100%;height: 30px;line-height: 30px;"> <view
style="padding: 0 30rpx; font-size: 30rpx; font-weight: bold; color: #333"
v-if="isId"
>
视频 视频
</view> </view>
<view class="nodata" v-if="videolist.length===0"> <view v-if="isId" class="box">
暂无内容 <view class="nodata" v-if="videolist.length === 0"> 暂无内容 </view>
</view> <view
<view v-for="(item,index) in videolist" :key="index" class="img-box" style="position: relative;" v-if="videolist.length>0"> v-for="(item, index) in videolist"
<video :id="'myVideo'+index" :src="item.Path" style="width: 215rpx;height: 215rpx;" :key="index"
:controls='controls' class="img-box"
:show-center-play-btn='false' style="position: relative"
:show-fullscreen-btn='false' v-if="videolist.length > 0"
@fullscreenchange='videoControl' >
v-if="item.Type==2" <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> ></video>
<view @click="enlarge(index)" <view
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="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 <image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
style="width: 37rpx;height: 44rpx;" mode=""></image> style="width: 37rpx; height: 44rpx"
mode=""
></image>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
id:0, id: 0,
boxOption: 0, boxOption: 0,
navsOption: 0, navsOption: 0,
titleStyle: {}, titleStyle: {},
active: 0, active: 0,
mainColor: '', mainColor: "",
likeStatus: false, likeStatus: false,
controls:false,//显示默认控件 controls: false, //显示默认控件
dataList:[], dataList: [],
preImg:[], preImg: [],
videoContext:null, videoContext: null,
imgList:[], imgList: [],
videolist:[], videolist: [],
isId:false, isId: false,
};
}
}, },
onLoad(options) { onLoad(options) {
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: '相册详情' title: "相册详情",
}); });
this.mainColor = this.$uiConfig.mainColor; this.mainColor = this.$uiConfig.mainColor;
if(options.data){ if (options.data) {
let res = JSON.parse(decodeURIComponent(options.data)) let res = JSON.parse(decodeURIComponent(options.data));
this.dataList=res.data this.dataList = res.data;
this.dataList.map(e=>{ this.dataList.map((e) => {
this.preImg.push(e.Path) this.preImg.push(e.Path);
}) });
console.log(this.dataList) console.log(this.dataList);
} }
if(options.Id && options.Id>0){ if (options.Id && options.Id > 0) {
this.GetActivityDetial(options.Id) this.GetActivityDetial(options.Id);
this.isId = true this.isId = true;
} }
}, },
methods: { methods: {
GetActivityDetial(Id){ GetActivityDetial(Id) {
this.request2(
this.request2({ {
url: '/api/AppletEducation/GetActivityDetial', url: "/api/AppletEducation/GetActivityDetial",
data: {Id:Id} data: { Id: Id },
}, },
res => { (res) => {
let FileGroup = res.data.FileGroup let FileGroup = res.data.FileGroup;
this.imgList = []; this.imgList = [];
this.videolist=[]; this.videolist = [];
FileGroup.forEach(x=>{ FileGroup.forEach((x) => {
if(x.Key==1){//图片 if (x.Key == 1) {
if(x.groupList && x.groupList.length>0){ //图片
x.groupList.forEach(j=>{ if (x.groupList && x.groupList.length > 0) {
this.imgList = j.FileList x.groupList.forEach((j) => {
}) this.imgList = j.FileList;
});
} }
}else{ } else {
if(x.groupList && x.groupList.length>0){ if (x.groupList && x.groupList.length > 0) {
x.groupList.forEach(j=>{ x.groupList.forEach((j) => {
this.videolist = j.FileList this.videolist = j.FileList;
}) });
} }
} }
}) });
console.log(this.imgList,this.videolist) console.log(this.imgList, this.videolist);
this.imgList.map(e=>{
this.preImg.push(e.Path)
})
this.imgList.map((e) => {
this.preImg.push(e.Path);
});
} }
); );
}, },
previewImage(i) { previewImage(i) {
console.log(i) console.log(i);
uni.previewImage({ uni.previewImage({
urls: this.preImg, urls: this.preImg,
current: i, current: i,
longPressActions: { longPressActions: {
itemList: ["发送给朋友", "保存图片", "收藏"], itemList: ["发送给朋友", "保存图片", "收藏"],
success: function(data) {}, success: function (data) {},
fail: function(err) { fail: function (err) {
console.log(err.errMsg); console.log(err.errMsg);
}, },
}, },
...@@ -153,8 +223,11 @@ ...@@ -153,8 +223,11 @@
}, },
scroll(e) { scroll(e) {
this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5); 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.titleStyle.opacity =
this.$forceUpdate() (e.detail.scrollTop - 100 < 0
? 0
: Math.floor(e.detail.scrollTop - 100)) + "%";
this.$forceUpdate();
}, },
goback() { goback() {
uni.navigateBack({ uni.navigateBack({
...@@ -164,56 +237,52 @@ ...@@ -164,56 +237,52 @@
enlarge(i) { enlarge(i) {
// 全屏 // 全屏
this.videoContext = uni.createVideoContext('myVideo'+i); this.videoContext = uni.createVideoContext("myVideo" + i);
this.videoContext.requestFullScreen({ this.videoContext.requestFullScreen({
direction:0 direction: 0,
}) });
}, },
videoControl(e){ videoControl(e) {
if(e.detail.fullScreen==false){ if (e.detail.fullScreen == false) {
this.videoContext.stop() this.videoContext.stop();
this.controls=false this.controls = false;
}else{ } else {
this.videoContext.play() this.videoContext.play();
this.controls=true this.controls = true;
} }
}, },
}, },
mounted() { 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
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