新闻二级页面选择地区改变类目
This commit is contained in:
TS-QD1
parent
44749a6eb9
commit
62689ce74f
@ -60,11 +60,6 @@
|
||||
志愿服务
|
||||
</router-link>
|
||||
</li>
|
||||
<li :class="{active: this.$route.path == '/travel' || this.$route.path == '/travelDetail/' + this.$route.params.id}">
|
||||
<router-link to="/travel">
|
||||
文化旅游
|
||||
</router-link>
|
||||
</li>
|
||||
<li :class="{active: this.$route.path == '/intangibleHeritage' || this.$route.path == '/intangibleHeritageDetail/' + this.$route.params.id}">
|
||||
<router-link to="/intangibleHeritage">
|
||||
非遗清单
|
||||
|
||||
@ -140,7 +140,7 @@ export default {
|
||||
this.page.page = 1
|
||||
this.changePage = 1
|
||||
this.area = code
|
||||
this.getNews()
|
||||
this.getTypeList()
|
||||
},
|
||||
doJumpPage: function () {
|
||||
this.page.page = this.changePage
|
||||
|
||||
@ -184,7 +184,7 @@ export default {
|
||||
this.page.page = 1
|
||||
this.changePage = 1
|
||||
this.area = code
|
||||
this.getList()
|
||||
this.getType()
|
||||
},
|
||||
getAreaList: function () {
|
||||
var self = this
|
||||
|
||||
@ -1,254 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Header></Header>
|
||||
<div class="location">
|
||||
<div class="location-content">
|
||||
您的位置：<router-link to="/">首页</router-link> > 文化旅游
|
||||
</div>
|
||||
</div>
|
||||
<div class="travel">
|
||||
<div class="travel-content" v-if="!isLoading">
|
||||
<ul v-if="hasData">
|
||||
<li v-for="list in travel" :key="list.id" @click="goDetail(list.newsContentLink, list.templateRecordUrl)" :title="list.newsContentTitle">
|
||||
<div class="travel-img">
|
||||
<img :src="url + 'route/file/download/false/' + list.newsContentCoverList" alt="">
|
||||
<div class="travel-name">
|
||||
{{list.newsContentTitle}}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="no-data" v-else>
|
||||
<img src="@/assets/images/no-data.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pager" v-if="hasData">
|
||||
<span @click="paging(1)">首页</span>
|
||||
<span @click="paging(page.page - 1)" v-if="page.page > 1">上一页</span>
|
||||
<ul v-if="page.totalPage > 0 && page.totalPage <= 5">
|
||||
<li v-for="cpage in page.totalPage" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
|
||||
{{cpage}}
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-if="page.totalPage > 5">
|
||||
<li v-if="page.page < 3" v-for="cpage in 5" :class="{'active': page.page == cpage}" :key="cpage" @click="paging(cpage)">
|
||||
{{cpage}}
|
||||
</li>
|
||||
<li v-if="page.page > page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.totalPage - 5 + cpage)}" :key="cpage" @click="paging(cpage)">
|
||||
{{page.totalPage - 5 + cpage}}
|
||||
</li>
|
||||
<li v-if="page.page >= 3 && page.page <= page.totalPage - 2" v-for="cpage in 5" :class="{'active': page.page == (page.page - (3 - cpage))}" :key="cpage" @click="paging(cpage)">
|
||||
{{page.page - (3 - cpage)}}
|
||||
</li>
|
||||
</ul>
|
||||
<span @click="paging(page.page + 1)" v-if="page.page < page.totalPage">下一页</span>
|
||||
<span @click="paging(page.totalPage)">尾页</span>
|
||||
<input type="text" v-model="changePage" v-if="showJumpBtn">
|
||||
<i v-if="showJumpBtn">/{{page.totalPage}}页</i>
|
||||
<button v-if="showJumpBtn" @click="doJumpPage">跳转</button>
|
||||
</div>
|
||||
<div class="loading" v-if="isLoading">
|
||||
<img src="@/assets/images/loading.gif" alt="">
|
||||
</div>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from '@/common/components/Header'
|
||||
import Footer from '@/common/components/Footer'
|
||||
import common from '@/common/components/common.js'
|
||||
import axios from 'axios'
|
||||
export default {
|
||||
name: 'Travel',
|
||||
components: {
|
||||
Header,
|
||||
Footer
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
changePage: 1,
|
||||
travel: [],
|
||||
page: {
|
||||
page: 1,
|
||||
rows: 8,
|
||||
totalPage: 1,
|
||||
newsDirectoriesId: '51ae7beb-f277-47a4-937a-088e6d47656d'
|
||||
},
|
||||
url: common.url,
|
||||
publishUrl: common.publishUrl,
|
||||
isLoading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showJumpBtn () {
|
||||
return this.page.totalPage > 1
|
||||
},
|
||||
hasData () {
|
||||
return this.travel.length > 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doJumpPage: function () {
|
||||
this.page.page = this.changePage
|
||||
this.getTravelList()
|
||||
},
|
||||
paging: function (page) {
|
||||
this.page.page = page
|
||||
this.getTravelList()
|
||||
},
|
||||
getTravelList: function () {
|
||||
var self = this
|
||||
self.isLoading = true
|
||||
axios.get(self.url + 'app/newscontent/listpagenewscontentrelease/' + common.area.areaCode, {
|
||||
params: self.page
|
||||
}).then(function (res) {
|
||||
for (var i = 0; i < res.data.rows.length; i++) {
|
||||
res.data.rows[i].newsContentCoverList = res.data.rows[i].newsContentCoverList[0].contentCoverId
|
||||
}
|
||||
self.isLoading = false
|
||||
self.travel = res.data.rows
|
||||
self.changePage = res.data.page
|
||||
self.page.totalPage = Math.ceil(res.data.total / self.page.rows)
|
||||
})
|
||||
},
|
||||
goDetail: function (link, url) {
|
||||
if (link) {
|
||||
window.open(link)
|
||||
} else {
|
||||
window.location.href = this.publishUrl + url
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getTravelList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus" scoped>
|
||||
@import "~styles/public.styl"
|
||||
.loading
|
||||
position fixed
|
||||
top 50%
|
||||
left 50%
|
||||
transform translate(-50%, -50%)
|
||||
background rgba(255,255,255,0.6)
|
||||
padding 30px
|
||||
border-radius 10px
|
||||
box-shadow 0 0 17px #DEDEDE
|
||||
.location
|
||||
background #e5e5e5
|
||||
line-height 30px
|
||||
.location-content
|
||||
width 1200px
|
||||
margin 0 auto
|
||||
font-size 14px
|
||||
color #565656
|
||||
.travel
|
||||
background #f0f0f0
|
||||
padding 20px 0
|
||||
min-height 400px
|
||||
.travel-content
|
||||
margin 0 auto
|
||||
width 1200px
|
||||
ul
|
||||
li
|
||||
background #fff
|
||||
padding 10px 20px
|
||||
margin-bottom 20px
|
||||
height 465px
|
||||
cursor pointer
|
||||
.travel-img
|
||||
width 100%
|
||||
height 100%
|
||||
overflow hidden
|
||||
position relative
|
||||
img
|
||||
width 100%
|
||||
height 100%
|
||||
transition all .5s
|
||||
&:hover
|
||||
transform scale(1.05)
|
||||
.travel-name
|
||||
font-family '宋体'
|
||||
position absolute
|
||||
bottom 0
|
||||
left 0
|
||||
background rgba(0,0,0,0.5)
|
||||
width 100%
|
||||
height 40px
|
||||
line-height 40px
|
||||
color #fff
|
||||
font-size 16px
|
||||
white-space nowrap
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
padding 0 10px
|
||||
box-sizing border-box
|
||||
.pager
|
||||
width 1200px
|
||||
margin 20px auto
|
||||
text-align center
|
||||
font-size 0
|
||||
span
|
||||
display inline-block
|
||||
padding 0 15px
|
||||
line-height 25px
|
||||
color #676767
|
||||
border 1px solid #d2d2d2
|
||||
font-size 14px
|
||||
margin 0 5px
|
||||
vertical-align middle
|
||||
cursor pointer
|
||||
ul
|
||||
display inline-block
|
||||
overflow hidden
|
||||
vertical-align middle
|
||||
li
|
||||
width 45px
|
||||
line-height 25px
|
||||
float left
|
||||
margin-right 10px
|
||||
border 1px solid #d2d2d2
|
||||
cursor pointer
|
||||
text-align center
|
||||
font-size 14px
|
||||
color #676767
|
||||
&.active
|
||||
background $main-color
|
||||
color #fff
|
||||
border 1px solid $main-color
|
||||
&:last-child
|
||||
margin 0
|
||||
input
|
||||
width 50px
|
||||
height 25px
|
||||
border 1px solid #d2d2d2
|
||||
text-align center
|
||||
vertical-align middle
|
||||
i
|
||||
font-style normal
|
||||
color #676767
|
||||
font-size 14px
|
||||
line-height 25px
|
||||
display inline-block
|
||||
vertical-align middle
|
||||
margin 0 5px
|
||||
button
|
||||
border none
|
||||
outline none
|
||||
background $main-color
|
||||
cursor pointer
|
||||
width 50px
|
||||
height 25px
|
||||
vertical-align middle
|
||||
color #fff
|
||||
font-size 14px
|
||||
.no-data
|
||||
padding 80px 0
|
||||
text-align center
|
||||
img
|
||||
width 200px
|
||||
</style>
|
||||
@ -1,96 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Header></Header>
|
||||
<div class="location">
|
||||
<div class="location-content">
|
||||
您的位置：<router-link to="/">首页</router-link> > <router-link to="/travel">文化旅游</router-link> > 详情
|
||||
</div>
|
||||
</div>
|
||||
<div class="travel-name">
|
||||
<h1>{{travelData.travelPlace}}</h1>
|
||||
</div>
|
||||
<div class="travel-img">
|
||||
<div class="travel-img-content">
|
||||
<div class="travel-swiper">
|
||||
<swiper ref="mySwiper" :options="swiperOptions">
|
||||
<swiper-slide v-for="(list,idx) in travelData.travelPhoto" :key="idx">
|
||||
<img :src="list.photoPath" alt="" class="banner-img">
|
||||
</swiper-slide>
|
||||
<div class="swiper-button-prev" slot="button-prev"></div>
|
||||
<div class="swiper-button-next" slot="button-next"></div>
|
||||
</swiper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from '@/common/components/Header'
|
||||
import Footer from '@/common/components/Footer'
|
||||
import axios from 'axios'
|
||||
export default {
|
||||
name: 'TravelDetail',
|
||||
components: {
|
||||
Header,
|
||||
Footer
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
swiperOptions: {
|
||||
loop: true,
|
||||
autoplay: 3000,
|
||||
prevButton: '.swiper-button-prev',
|
||||
nextButton: '.swiper-button-next'
|
||||
},
|
||||
travelData: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getTravelData () {
|
||||
var self = this
|
||||
axios.get('/api/travelDetail.json', {
|
||||
params: {
|
||||
id: this.$route.params.id
|
||||
}
|
||||
}).then(function (res) {
|
||||
res = res.data
|
||||
self.travelData = res.data
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getTravelData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus" scoped>
|
||||
@import "~styles/public.styl"
|
||||
.location
|
||||
background #e5e5e5
|
||||
line-height 30px
|
||||
.location-content
|
||||
width 1200px
|
||||
margin 0 auto
|
||||
font-size 14px
|
||||
color #565656
|
||||
.travel-name
|
||||
width 1200px
|
||||
margin 0 auto
|
||||
padding 5px 0
|
||||
h1
|
||||
font-size 24px
|
||||
font-weight normal
|
||||
color #565656
|
||||
.travel-img
|
||||
background #333
|
||||
.travel-img-content
|
||||
width 1040px
|
||||
height 690px
|
||||
margin 0 auto
|
||||
.banner-img
|
||||
width 1040px
|
||||
height 690px
|
||||
</style>
|
||||
@ -11,8 +11,6 @@ import Broadcast from '@/pages/Broadcast/Broadcast'
|
||||
import BroadcastDetail from '@/pages/BroadcastDetail/BroadcastDetail'
|
||||
import Volunteer from '@/pages/Volunteer/Volunteer'
|
||||
import VolunteerDetail from '@/pages/VolunteerDetail/VolunteerDetail'
|
||||
import Travel from '@/pages/Travel/Travel'
|
||||
import TravelDetail from '@/pages/TravelDetail/TravelDetail'
|
||||
import Login from '@/pages/Login/Login'
|
||||
import Register from '@/pages/Register/Register'
|
||||
import IntangibleHeritage from '@/pages/IntangibleHeritage/IntangibleHeritage'
|
||||
@ -137,24 +135,6 @@ export default new Router({
|
||||
keepAlive: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/travel',
|
||||
name: 'Travel',
|
||||
component: Travel,
|
||||
meta: {
|
||||
title: `${common.area.areaName}公共文化数字云平台`,
|
||||
keepAlive: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/travelDetail/:id',
|
||||
name: 'TravelDetail',
|
||||
component: TravelDetail,
|
||||
meta: {
|
||||
title: `${common.area.areaName}公共文化数字云平台`,
|
||||
keepAlive: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user