<template>
|
<view class="seeImgs" v-if="imgs.length != 0 || videos.length != 0 ">
|
<view class="imgs" v-for="(item, index) in imgs" :key="index" v-if="type == 'imgs'">
|
<image :src="item.src" mode="scaleToFill" @click="previewImage(index)"></image>
|
<view class="close" @click="delelteImg(index)">
|
X
|
</view>
|
</view>
|
<view class="videos" v-for="(item, index) in videos" :key="index" v-if="type == 'videos'">
|
|
<!-- <image :src="item.src" mode="scaleToFill" @click="previewImage(index)"></image> -->
|
<video :src="item.src" controls></video>
|
|
<view class="close" @click="deleltevideo(index)">
|
X
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
props: ['imgs', 'videos', 'type'],
|
data() {
|
return {
|
// uesVideodata: []
|
}
|
},
|
// watch: {
|
// "videos"() {
|
// // console.log(this.videos)
|
// if (this.videos != []) {
|
// setTimeout(res=>{
|
// this.uesVideodata = this.videos;
|
// },500)
|
// } else []
|
// }
|
// },
|
methods: {
|
//图片删除
|
delelteImg(index) {
|
var that = this;
|
wx.showModal({
|
title: '提示',
|
content: '确定要删除该照片吗？',
|
cancelText: '取消',
|
confirmText: '确定',
|
success: res => {
|
if (res.confirm) {
|
// console.log(index)
|
// that.imgs.splice(index, 1);
|
that.$emit('del', index);
|
}
|
}
|
});
|
},
|
|
//图片预览
|
previewImage(index) {
|
let photoList = this.imgs.map(item => {
|
return item.src;
|
});
|
// console.log(index)
|
// console.log(photoList)
|
wx.previewImage({
|
current: photoList[index],
|
urls: photoList
|
});
|
},
|
|
//视频删除
|
deleltevideo(index) {
|
var that = this;
|
wx.showModal({
|
title: '提示',
|
content: '确定要删除该视频吗？',
|
cancelText: '取消',
|
confirmText: '确定',
|
success: res => {
|
if (res.confirm) {
|
// console.log(index)
|
// that.imgs.splice(index, 1);
|
that.$emit('del', index);
|
}
|
}
|
});
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.seeImgs {
|
width: 100%;
|
height: 4.3rem;
|
// border: 1px solid #0000FF;
|
white-space: nowrap;
|
box-sizing: border-box;
|
overflow: auto;
|
// display: flex;
|
// align-items: center;
|
// position: absolute;
|
// right: 0;
|
// z-index: 110;
|
|
.imgs {
|
display: inline-block;
|
padding-top: 0.5rem;
|
width: 4rem;
|
height: 4rem;
|
padding: 0 0.2rem 0 0.2rem;
|
margin: 0 0.2rem 0 0.2rem;
|
// border-right: 1px solid rgba($color: #000000, $alpha: 0.5);
|
position: relative;
|
// border: 1px solid #0000FF;
|
top: 0.22rem;
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
|
|
}
|
|
.videos {
|
display: inline-block;
|
padding-top: 0.5rem;
|
width: 4.2rem;
|
height: 4.2rem;
|
padding: 0 0.2rem 0 0.2rem;
|
margin: 0 0.2rem 0 0.2rem;
|
// border-right: 1px solid rgba($color: #000000, $alpha: 0.5);
|
position: relative;
|
// border: 1px solid #0000FF;
|
top: 0.22rem;
|
|
video {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
.close {
|
background-color: #fff;
|
width: 0.9rem;
|
height: 0.9rem;
|
text-align: center;
|
line-height: 0.8rem;
|
position: absolute;
|
top: 0.1rem;
|
right: 0.2rem;
|
font-size: 0.5rem;
|
color: red;
|
border-radius: 1.5rem;
|
border: 1px solid red;
|
z-index: 111;
|
|
&:hover {
|
color: red;
|
border: 1px solid red;
|
}
|
}
|
</style>
|
