Commit e3900647 authored by 罗超's avatar 罗超

1

parent 0d71ab10
<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
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