100 lines
2.2 KiB
Vue
100 lines
2.2 KiB
Vue
<template>
|
|
<div class="pickDetail">
|
|
<div class="container">
|
|
<div class="title">{{ data.title }}</div>
|
|
<p class="avatar">{{ data.createUserName }}</p>
|
|
<div class="content">{{ data.content }}</div>
|
|
<div class="imgs" v-if="images.length">
|
|
<image v-for="(img, i) in images" @click="preview(img.url, images)" :key="i" class="banner" :src="img.url"/>
|
|
</div>
|
|
<div class="imgs" v-if="videos.length">
|
|
<video v-for="(video, ins) in videos" :key="ins" class="file-img" :src="video.url"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'pickDetail',
|
|
appName: '精选动态',
|
|
data() {
|
|
return {
|
|
images: [],
|
|
videos: [],
|
|
id: '',
|
|
data: {}
|
|
}
|
|
},
|
|
methods: {
|
|
getDetail() {
|
|
this.$instance.post(`/app/appcontentinfo/queryDetailById?id=${this.id}`).then(res=> {
|
|
if(res?.data) {
|
|
this.data = res.data
|
|
this.images = res.data.files.filter(e => (['jpeg', 'jpg', 'png'].includes(e.postfix.split('.')[1])))
|
|
this.videos = res.data.files.filter(e => (['mp4','MP4', 'MOV'].includes(e.postfix.split('.')[1])))
|
|
}
|
|
})
|
|
},
|
|
preview(url, imgs) {
|
|
uni.previewImage({
|
|
urls: imgs.map((v) => v.url),
|
|
current: url,
|
|
})
|
|
},
|
|
|
|
},
|
|
onLoad(o) {
|
|
this.id = o.id;
|
|
this.getDetail()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.pickDetail {
|
|
padding-top: 32px;
|
|
box-sizing: border-box;
|
|
.container {
|
|
padding: 32px;
|
|
box-sizing: border-box;
|
|
background: #FFF;
|
|
.title {
|
|
font-size: 34px;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
}
|
|
.avatar {
|
|
font-size: 26px;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
margin-top: 16px;
|
|
}
|
|
.content {
|
|
margin-top: 32px;
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
background: #FFF;
|
|
padding: 0;
|
|
}
|
|
.imgs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 24px;
|
|
background: #FFF;
|
|
|
|
image,
|
|
video {
|
|
width: 226px;
|
|
height: 226px;
|
|
margin: 0 4px 4px 0;
|
|
}
|
|
image:nth-child(3n + 0),
|
|
video:nth-child(3n + 0) {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |