<template>
|
<div class="data-detail">
|
<div class="title">
|
<div class="title-left">
|
<div class="title-name" @click="ToListPage">{{ titleName }}</div>
|
<div class="title-introduce">{{ titleIntroduce }}</div>
|
</div>
|
<div class="title-right">
|
<!-- <div class="online-preview" @click="OnlinePreview(basisInfo.file)">在线浏览</div>-->
|
</div>
|
</div>
|
<div class="content">
|
<mt-navbar ref="navbar" v-model="navbarIndex">
|
<mt-tab-item id="1" data-type="1">基本信息</mt-tab-item>
|
<mt-tab-item id="2" data-type="2">相关图片</mt-tab-item>
|
<mt-tab-item id="3" data-type="3">相关视频</mt-tab-item>
|
</mt-navbar>
|
<mt-tab-container v-model="navbarIndex">
|
<mt-tab-container-item id="1">
|
<div class="content-keyword">
|
<div class="item-name">关键字</div>
|
{{ basisInfo.keyWord }}
|
</div>
|
<div class="content-introduction">
|
<div class="item-name">简介</div>
|
{{ basisInfo.introduction }}
|
</div>
|
</mt-tab-container-item>
|
<mt-tab-container-item id="2">
|
<div class="search-div">
|
<CustomSearch3 v-on:search="SearchImages"></CustomSearch3>
|
</div>
|
<div class="content-images"
|
v-infinite-scroll="NextImages"
|
:infinite-scroll-disabled="images.scrollDisabled"
|
:infinite-scroll-distance="10">
|
<div class="content-item"
|
v-for="item in images.data"
|
:key="item.id"
|
@click="ToImageDetail(item.id)">
|
<div class="img-div">
|
<img :src="item.path"/>
|
</div>
|
<div class="item-name">{{ item.name }}</div>
|
</div>
|
</div>
|
</mt-tab-container-item>
|
<mt-tab-container-item id="3">
|
<div class="search-div">
|
<CustomSearch3 v-on:search="SearchVideos"></CustomSearch3>
|
</div>
|
<div class="content-videos"
|
v-infinite-scroll="NextVideos"
|
:infinite-scroll-disabled="videos.scrollDisabled"
|
:infinite-scroll-distance="10">
|
<template v-for="item in videos.data">
|
<div class="content-item" :key="item.key" @click="ToVideoDetail(item.id)">
|
<div class="item-left">
|
<img :src="item.cover" v-if="item.cover"/>
|
<img src="@/assets/defaultCover.png" v-else/>
|
</div>
|
<div class="item-right">
|
<div class="item-name">{{ item.name }}</div>
|
<div class="item-introduce">{{ item.description }}</div>
|
</div>
|
</div>
|
<div class="line" :key="item.key"></div>
|
</template>
|
</div>
|
</mt-tab-container-item>
|
</mt-tab-container>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import CustomSearch3 from "@/components/CustomSearch3";
|
import {
|
GetDataDetail as Api_GetDataDetail,
|
GetDataDetailImages as Api_GetDataDetailImages,
|
GetDataDetailVideos as Api_GetDataDetailVideos,
|
} from "@/api/apilist";
|
|
export default {
|
name: "detail",
|
components: {CustomSearch3},
|
data() {
|
return {
|
titleName: "",
|
titleIntroduce: "",
|
navbarIndex: "1",
|
basisInfo: {
|
id: "",
|
keyWord: "",
|
introduction: "",
|
file: "",
|
},
|
images: {
|
searchType: "title",
|
searchName: "",
|
pageSize: 10,
|
currentPage: 1,
|
total: 0,
|
data: [],
|
scrollDisabled: false,
|
},
|
videos: {
|
searchType: "title",
|
searchName: "",
|
pageSize: 10,
|
currentPage: 1,
|
total: 0,
|
data: [],
|
scrollDisabled: false,
|
},
|
}
|
},
|
methods: {
|
OnlinePreview: function (fileUrl) {
|
if (fileUrl) {
|
if (fileUrl.replace(/\\/g, '').toLowerCase().indexOf('.pdf') >= 0) {
|
window.open(fileUrl);
|
} else {
|
//https://view.officeapps.live.com/op/view.aspx?src=
|
//http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=
|
window.open("https://view.officeapps.live.com/op/view.aspx?src=" + fileUrl.replace(/\\/g, ''));
|
}
|
}
|
},
|
SearchBasisInfo: function (id) {
|
Api_GetDataDetail(id).then(res => {
|
this.basisInfo = res;
|
this.titleIntroduce = res.keyWord;
|
}, rej => {
|
alert(rej);
|
}).catch(err => {
|
console.log(err);
|
alert('错误的请求！');
|
});
|
},
|
SearchImages: function (searchType, searchName) {
|
this.images.searchType = searchType;
|
this.images.searchName = searchName;
|
Api_GetDataDetailImages(this.$route.query.id, searchType, searchName, 1, 10).then(res => {
|
this.images.currentPage = res.currentPage;
|
this.images.pageSize = res.pageSize;
|
this.images.total = res.total;
|
this.images.data = res.data;
|
}, rej => {
|
alert(rej);
|
}).catch(err => {
|
console.log(err);
|
alert('错误的请求！');
|
});
|
},
|
NextImages: function () {
|
let searchType = this.images.searchType;
|
let searchName = this.images.searchName;
|
let currentPage = this.images.currentPage + 1;
|
let pageSize = this.images.pageSize;
|
Api_GetDataDetailImages(this.$route.query.id, searchType, searchName, currentPage, pageSize).then(res => {
|
if (res.data.length > 0) {
|
this.images.total = res.total;
|
this.images.currentPage = res.currentPage;
|
this.images.data = this.images.data.concat(res.data);
|
}
|
}, rej => {
|
alert(rej);
|
}).catch(err => {
|
console.log(err);
|
alert('错误的请求！');
|
});
|
},
|
SearchVideos: function (searchType, searchName) {
|
this.videos.searchType = searchType;
|
this.videos.searchName = searchName;
|
Api_GetDataDetailVideos(this.$route.query.id, searchType, searchName, 1, 10).then(res => {
|
this.videos.currentPage = res.currentPage;
|
this.videos.pageSize = res.pageSize;
|
this.videos.total = res.total;
|
this.videos.data = res.data;
|
}, rej => {
|
alert(rej);
|
}).catch(err => {
|
console.log(err);
|
alert('错误的请求！');
|
});
|
},
|
NextVideos: function () {
|
let searchType = this.videos.searchType;
|
let searchName = this.videos.searchName;
|
let currentPage = this.videos.currentPage + 1;
|
let pageSize = this.videos.pageSize;
|
Api_GetDataDetailVideos(this.$route.query.id, searchType, searchName, currentPage, pageSize).then(res => {
|
if (res.data.length > 0) {
|
this.videos.total = res.total;
|
this.videos.currentPage = res.currentPage;
|
this.videos.data = this.videos.data.concat(res.data);
|
}
|
}, rej => {
|
alert(rej);
|
}).catch(err => {
|
console.log(err);
|
alert('错误的请求！');
|
});
|
},
|
ToImageDetail: function (id) {
|
let objId = this.$route.query.id;
|
this.$router.push({name: "scenery-detail-image", query: {id: id, objId: objId}});
|
},
|
ToVideoDetail: function (id) {
|
let objId = this.$route.query.id;
|
this.$router.push({name: "scenery-detail-video", query: {id: id, objId: objId}});
|
},
|
ToListPage: function () {
|
this.$router.push({name: "scenery-list"})
|
},
|
},
|
watch: {
|
navbarIndex: function () {
|
switch (this.navbarIndex) {
|
case 1:
|
this.images.scrollDisabled = true;
|
this.videos.scrollDisabled = true;
|
break;
|
case 2:
|
this.images.scrollDisabled = false;
|
this.videos.scrollDisabled = true;
|
break;
|
case 3:
|
this.images.scrollDisabled = true;
|
this.videos.scrollDisabled = false;
|
break;
|
}
|
}
|
},
|
created() {
|
let id = this.$route.query.id;
|
this.titleName = this.$route.query.name;
|
this.SearchBasisInfo(id);
|
this.SearchImages("title", "");
|
this.SearchVideos("title", "");
|
}
|
}
|
</script>
|
|
<style scoped>
|
.line {
|
width: 100%;
|
border: 1px solid #EEEEEE;
|
margin: 3vh 0;
|
}
|
|
.data-detail {
|
width: 100%;
|
}
|
|
.data-detail .title {
|
display: flex;
|
flex-direction: row;
|
flex-wrap: nowrap;
|
justify-content: space-between;
|
align-items: center;
|
|
width: 100%;
|
height: 15.9vh;
|
background: url("../../assets/datadetail/detail@1x.png") no-repeat 100% 100%;
|
background-size: cover;
|
border-radius: 10px 10px 0 0;
|
}
|
|
.data-detail .title .title-left {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: flex-start;
|
|
width: 60%;
|
height: 100%;
|
padding-left: 2vh;
|
}
|
|
.data-detail .title .title-name {
|
width: 100%;
|
text-align: left;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
white-space: nowrap;
|
|
font-size: 2.62rem;
|
font-family: Source Han Serif CN;
|
font-weight: bold;
|
line-height: 5.24rem;
|
color: #FFFFFF;
|
opacity: 1;
|
}
|
|
.data-detail .title .title-introduce {
|
width: 100%;
|
|
text-overflow: ellipsis;
|
overflow: hidden;
|
white-space: nowrap;
|
|
font-size: 2rem;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
line-height: 3.37rem;
|
color: #FFFFFF;
|
opacity: 1;
|
}
|
|
.data-detail .title .title-right {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: flex-start;
|
|
width: 30%;
|
height: 100%;
|
}
|
|
.data-detail .title .online-preview {
|
width: 80%;
|
background: #EFC587;
|
opacity: 1;
|
border-radius: 60px;
|
|
font-size: 1.75rem;
|
font-family: Source Han Sans CN;
|
font-weight: bold;
|
line-height: 3.87vh;
|
color: #BC0000;
|
opacity: 1;
|
}
|
|
.data-detail .content {
|
display: flex;
|
flex-direction: column;
|
justify-content: flex-start;
|
align-items: center;
|
|
width: 100%;
|
height: 84vh;
|
background: #F8F8F8;
|
}
|
|
.mint-navbar {
|
width: 100%;
|
}
|
|
.mint-navbar /deep/ .mint-tab-item{
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
|
padding: 7px 0;
|
}
|
|
.mint-navbar /deep/ .mint-tab-item-label {
|
width: 8rem;
|
font-size: 2rem;
|
font-family: Source Han Sans CN;
|
font-weight: 500;
|
line-height: 2rem;
|
color: #767676;
|
opacity: 1;
|
|
padding: 10px 0;
|
}
|
|
.mint-navbar /deep/ .is-selected {
|
color: #BC0000;
|
border-bottom: 0px;
|
}
|
|
.mint-navbar /deep/ .is-selected .mint-tab-item-label {
|
color: #BC0000;
|
border-bottom: 0.3vh solid #BC0000;
|
}
|
|
.mint-tab-container {
|
width: 100%;
|
}
|
|
.mint-tab-container /deep/ .mint-tab-container-item:nth-child(1) {
|
}
|
|
.content-keyword {
|
margin-top: 1vh;
|
padding: 5%;
|
background: #FFFFFF;
|
text-align: left;
|
font-size: 1.87rem;
|
font-family: Source Han Serif CN;
|
font-weight: 400;
|
line-height: 3rem;
|
color: #767676;
|
opacity: 1;
|
}
|
|
.content-keyword .item-name {
|
text-align: left;
|
font-size: 2rem;
|
font-family: Source Han Sans CN;
|
font-weight: bold;
|
line-height: 6rem;
|
color: #BC0000;
|
opacity: 1;
|
}
|
|
.content-introduction {
|
margin-top: 1vh;
|
padding: 5% 5% 15% 5%;
|
border-radius: 0 0 30px 30px;
|
background: #FFFFFF;
|
text-align: left;
|
font-size: 1.87rem;
|
font-family: Source Han Serif CN;
|
font-weight: 400;
|
line-height: 3rem;
|
color: #767676;
|
opacity: 1;
|
}
|
|
.content-introduction .item-name {
|
text-align: left;
|
font-size: 2rem;
|
font-family: Source Han Sans CN;
|
font-weight: bold;
|
line-height: 6rem;
|
color: #BC0000;
|
opacity: 1;
|
}
|
|
.mint-tab-container /deep/ .mint-tab-container-item:nth-child(2) {
|
}
|
|
.search-div {
|
background: #FFFFFF;
|
padding: 5%;
|
margin-bottom: 1vh;
|
}
|
|
.content-images {
|
display: flex;
|
flex-wrap: wrap;
|
flex-direction: row;
|
justify-content: flex-start;
|
align-items: flex-start;
|
align-content:flex-start;
|
|
height: 65vh;
|
overflow: scroll;
|
padding-top: 2vh;
|
background: #FFFFFF;
|
border-radius: 0 0 30px 30px;
|
}
|
|
.content-images .content-item {
|
display: flex;
|
flex-wrap: nowrap;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
|
width: 50%;
|
height: 25vh;
|
}
|
|
.content-images .content-item .img-div {
|
width: 90%;
|
height: 80%;
|
border-radius: 10px;
|
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
|
}
|
|
.content-images .content-item .img-div img {
|
width: 100%;
|
height: 100%;
|
border-radius: 10px;
|
object-fit: cover;
|
}
|
|
.content-images .content-item .item-name {
|
width: 90%;
|
|
text-overflow: ellipsis;
|
overflow: hidden;
|
white-space: nowrap;
|
|
font-size: 2em;
|
font-family: Source Han Serif CN;
|
font-weight: bold;
|
line-height: 2em;
|
color: #333333;
|
opacity: 1;
|
}
|
|
.mint-tab-container /deep/ .mint-tab-container-item:nth-child(3) {
|
|
}
|
|
.content-videos {
|
display: flex;
|
flex-wrap: wrap;
|
flex-direction: column;
|
justify-content: flex-start;
|
align-items: center;
|
|
height: 65vh;
|
overflow: scroll;
|
padding-top: 4vh;
|
background: #FFFFFF;
|
border-radius: 0 0 30px 30px;
|
}
|
|
.content-videos .line{
|
width: 90%;
|
}
|
|
.content-videos .content-item {
|
display: flex;
|
flex-direction: row;
|
flex-wrap: nowrap;
|
justify-content: flex-start;
|
align-items: center;
|
|
height: 10vh;
|
width: 90%;
|
}
|
|
.content-videos .item-left {
|
width: 30%;
|
height: 100%;
|
}
|
|
.content-videos .item-left img {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
}
|
|
.content-videos .item-right {
|
width: 70%;
|
height: 100%;
|
padding-left: 2vw;
|
}
|
|
.content-videos .item-name {
|
text-overflow: ellipsis;
|
overflow: hidden;
|
white-space: nowrap;
|
text-align: left;
|
font-size: 2rem;
|
font-family: Source Han Serif CN;
|
font-weight: bold;
|
line-height: 4rem;
|
color: #BC0000;
|
opacity: 1;
|
}
|
|
.content-videos .item-introduce {
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
text-align: left;
|
font-size: 1.62rem;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
line-height: 3rem;
|
color: #767676;
|
opacity: 1;
|
}
|
</style>
|
