新闻二级页面选择地区改变类目
This commit is contained in:
TS-QD1
parent
44749a6eb9
commit
62689ce74f
@ -60,11 +60,6 @@
|
|||||||
志愿服务
|
志愿服务
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</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}">
|
<li :class="{active: this.$route.path == '/intangibleHeritage' || this.$route.path == '/intangibleHeritageDetail/' + this.$route.params.id}">
|
||||||
<router-link to="/intangibleHeritage">
|
<router-link to="/intangibleHeritage">
|
||||||
非遗清单
|
非遗清单
|
||||||
|
|||||||
@ -140,7 +140,7 @@ export default {
|
|||||||
this.page.page = 1
|
this.page.page = 1
|
||||||
this.changePage = 1
|
this.changePage = 1
|
||||||
this.area = code
|
this.area = code
|
||||||
this.getNews()
|
this.getTypeList()
|
||||||
},
|
},
|
||||||
doJumpPage: function () {
|
doJumpPage: function () {
|
||||||
this.page.page = this.changePage
|
this.page.page = this.changePage
|
||||||
|
|||||||
@ -184,7 +184,7 @@ export default {
|
|||||||
this.page.page = 1
|
this.page.page = 1
|
||||||
this.changePage = 1
|
this.changePage = 1
|
||||||
this.area = code
|
this.area = code
|
||||||
this.getList()
|
this.getType()
|
||||||
},
|
},
|
||||||
getAreaList: function () {
|
getAreaList: function () {
|
||||||
var self = this
|
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 BroadcastDetail from '@/pages/BroadcastDetail/BroadcastDetail'
|
||||||
import Volunteer from '@/pages/Volunteer/Volunteer'
|
import Volunteer from '@/pages/Volunteer/Volunteer'
|
||||||
import VolunteerDetail from '@/pages/VolunteerDetail/VolunteerDetail'
|
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 Login from '@/pages/Login/Login'
|
||||||
import Register from '@/pages/Register/Register'
|
import Register from '@/pages/Register/Register'
|
||||||
import IntangibleHeritage from '@/pages/IntangibleHeritage/IntangibleHeritage'
|
import IntangibleHeritage from '@/pages/IntangibleHeritage/IntangibleHeritage'
|
||||||
@ -137,24 +135,6 @@ export default new Router({
|
|||||||
keepAlive: false
|
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',
|
path: '/login',
|
||||||
name: 'Login',
|
name: 'Login',
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user