area
This commit is contained in:
dong_bo0602
parent
aa2b8b5200
commit
4500458826
@ -17,7 +17,7 @@
|
||||
<span>选择区域></span>
|
||||
<div style="display: inline-block;width: 94%;">
|
||||
<button :class="{active: page.county == ''}" @click="changeArea(null)">全部</button>
|
||||
<button v-for="(btn,idx) in areaList" :key="idx" @click="changeArea(btn.dictionaryId)" :class="{active: page.county == btn.dictionaryId}">{{btn.dictionaryName}}</button>
|
||||
<button v-for="(btn,idx) in areaList" :key="idx" @click="changeArea(btn.areaId, btn.areaLevel)" :class="{active: page.county == btn.areaId}">{{btn.areaName}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -117,11 +117,13 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeArea: function (area) {
|
||||
changeArea: function (area, lv) {
|
||||
this.page.page = 1
|
||||
this.changePage = 1
|
||||
if (area) {
|
||||
this.page.county = area
|
||||
var areaLv = 'area' + (parseInt(lv) + 1)
|
||||
console.log(areaLv)
|
||||
} else {
|
||||
this.page.county = ''
|
||||
}
|
||||
@ -168,8 +170,7 @@ export default {
|
||||
},
|
||||
getAreaList: function () {
|
||||
var self = this
|
||||
axios.get(self.url + 'culturalactivity/app/dictionaryself/listdictionarybyparentidrelease/a9410e79-54fa-4c04-9276-17da889da86b').then(function (res) {
|
||||
console.log(res)
|
||||
axios.get(self.url + 'usercenter/app/dataarea/listareabyparentidrelease/640675').then(function (res) {
|
||||
self.areaList = res.data
|
||||
})
|
||||
}
|
||||
@ -206,6 +207,8 @@ export default {
|
||||
color #565656
|
||||
display inline-block
|
||||
margin-right 5px
|
||||
vertical-align top
|
||||
line-height 30px
|
||||
button
|
||||
width 80px
|
||||
height 30px
|
||||
|
||||
@ -14,6 +14,13 @@
|
||||
<li v-for="(btn,idx) in typeList" :key="idx" :class="{active: page.newsDirectoriesId == btn.newsDirectoriesId}" @click="changeType(btn.newsDirectoriesId)">{{btn.directoriesName}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="type-container">
|
||||
<span>区域：</span>
|
||||
<ul style="display: inline-block;width: 95%;">
|
||||
<li :class="{active: area == ''}" @click="changeArea">全部</li>
|
||||
<li v-for="(btn,idx) in areaList" :key="idx" :class="{active: area == btn.areaId}" @click="changeArea(btn.areaId, btn.areaLevel)">{{btn.areaName}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dynamics">
|
||||
<div class="dynamics-left">
|
||||
@ -81,6 +88,7 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
areaList: [],
|
||||
changePage: 1,
|
||||
typeList: [],
|
||||
dynamicList: [],
|
||||
@ -93,6 +101,7 @@ export default {
|
||||
newsDirectoriesId: '',
|
||||
newsDirectoriesParentId: 'f497904b-7727-4832-891c-604c36ae4167'
|
||||
},
|
||||
area: '',
|
||||
url: common.url,
|
||||
isLoading: false
|
||||
}
|
||||
@ -106,6 +115,25 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeArea: function (area, lv) {
|
||||
this.page.page = 1
|
||||
this.changePage = 1
|
||||
this.area = area
|
||||
if (area) {
|
||||
var level = 'area' + (parseInt(lv) + 1)
|
||||
this.$set(this.page, level, area)
|
||||
} else {
|
||||
this.area = ''
|
||||
this.page = {
|
||||
page: 1,
|
||||
rows: 8,
|
||||
totalPage: 1,
|
||||
newsDirectoriesId: '',
|
||||
newsDirectoriesParentId: 'f497904b-7727-4832-891c-604c36ae4167'
|
||||
}
|
||||
}
|
||||
this.getNews()
|
||||
},
|
||||
doJumpPage: function () {
|
||||
this.page.page = this.changePage
|
||||
this.getNews()
|
||||
@ -156,11 +184,18 @@ export default {
|
||||
this.page.newsDirectoriesId = ''
|
||||
}
|
||||
this.getNews()
|
||||
},
|
||||
getAreaList: function () {
|
||||
var self = this
|
||||
axios.get(self.url + 'usercenter/app/dataarea/listareabyparentidrelease/640675').then(function (res) {
|
||||
self.areaList = res.data
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getNews()
|
||||
this.getTypeList()
|
||||
this.getAreaList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -180,10 +215,12 @@ export default {
|
||||
background #f0f0f0
|
||||
.type-container
|
||||
width 1200px
|
||||
margin 0 auto
|
||||
margin 0 auto 10px
|
||||
overflow hidden
|
||||
font-size 14px
|
||||
color #565656
|
||||
&:last-child
|
||||
margin-bottom 0
|
||||
span
|
||||
float left
|
||||
line-height 30px
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<span>选择区域></span>
|
||||
<div style="display: inline-block;width: 95%;">
|
||||
<button :class="{active: page.venueArea == ''}" @click="changeArea(null)">全部</button>
|
||||
<button v-for="(btn,idx) in areaList" :key="idx" @click="changeArea(btn.dictionaryId)" :class="{active: page.venueArea == btn.dictionaryId}">{{btn.dictionaryName}}</button>
|
||||
<button v-for="(btn,idx) in areaList" :key="idx" @click="changeArea(btn.areaId, btn.areaLevel)" :class="{active: page.venueArea == btn.areaId}">{{btn.areaName}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -92,7 +92,8 @@ export default {
|
||||
rows: 8,
|
||||
totalPage: 1,
|
||||
venueType: '',
|
||||
venueArea: ''
|
||||
venueArea: '',
|
||||
areaLevel: ''
|
||||
},
|
||||
url: common.url,
|
||||
isLoading: false
|
||||
@ -107,11 +108,12 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeArea: function (area) {
|
||||
changeArea: function (area, lv) {
|
||||
this.page.page = 1
|
||||
this.changePage = 1
|
||||
if (area) {
|
||||
this.page.venueArea = area
|
||||
this.page.areaLevel = 'area' + (parseInt(lv) + 1)
|
||||
} else {
|
||||
this.page.venueArea = ''
|
||||
}
|
||||
@ -143,8 +145,8 @@ export default {
|
||||
},
|
||||
getAreaList: function () {
|
||||
var self = this
|
||||
axios.get(self.url + 'venuebooking/app/venuedictionary/listvenuedictionarybyparentidrelease/fbd845d6-a74b-457a-8da1-fec66ab0d400').then(function (res) {
|
||||
self.areaList = res.data.data
|
||||
axios.get(self.url + 'usercenter/app/dataarea/listareabyparentidrelease/640675').then(function (res) {
|
||||
self.areaList = res.data
|
||||
})
|
||||
},
|
||||
getVenueList: function () {
|
||||
|
||||
@ -15,31 +15,42 @@
|
||||
<p>国家级名录将非物质文化遗产分为十大门类，其中五个门类的名称在2008年有所调整，并沿用至今。十大门类分别为：民间文学，传统音乐，传统舞蹈，传统戏剧，曲艺，传统体育、游艺与杂技，传统美术，传统技艺，传统医药，民俗。每个代表性项目都有一个专属的项目编号。编号中的罗马数字代表所属门类，如传统音乐类国家级项目“侗族大歌”的项目编号为“Ⅱ-28”。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="select">
|
||||
<div class="select-container">
|
||||
<div class="select-line">
|
||||
<span>选择区域></span>
|
||||
<div style="display: inline-block;width: 94%;">
|
||||
<button :class="{active: area == ''}" @click="changeArea(null)">全部</button>
|
||||
<button v-for="(btn,idx) in areaList" :key="idx" @click="changeArea(btn.areaId, btn.areaLevel)" :class="{active: area == btn.areaId}">{{btn.areaName}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="heritage-list" v-if="!isLoading">
|
||||
<table v-if="hasData">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="8%">序号</th>
|
||||
<th width="8%">编号</th>
|
||||
<th width="20%">名称</th>
|
||||
<th width="10%">公布时间</th>
|
||||
<th width="10%">类型</th>
|
||||
<th width="15%">申报地区或单位</th>
|
||||
<th width="20%">保护单位</th>
|
||||
<th width="9%">操作</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th width="8%">序号</th>
|
||||
<th width="8%">编号</th>
|
||||
<th width="20%">名称</th>
|
||||
<th width="10%">公布时间</th>
|
||||
<th width="10%">类型</th>
|
||||
<th width="15%">申报地区或单位</th>
|
||||
<th width="20%">保护单位</th>
|
||||
<th width="9%">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(list,idx) in heritageList" :key="idx">
|
||||
<td>{{idx+1}}</td>
|
||||
<td>{{list.libraryNumber}}</td>
|
||||
<td><router-link :to="{path: '/intangibleHeritageDetail/' + list.intangibleLibraryId}">{{list.libraryTitle}}</router-link></td>
|
||||
<td><span :title="list.libraryOpenDateValue">{{list.libraryOpenDateValue}}</span></td>
|
||||
<td>{{list.libraryTypeValue}}</td>
|
||||
<td>{{list.libraryArea}}</td>
|
||||
<td><span :title="list.libraryAuthor">{{list.libraryAuthor}}</span></td>
|
||||
<td><router-link :to="{path: '/intangibleHeritageDetail/' + list.intangibleLibraryId}" class="go-detail">查看详情</router-link></td>
|
||||
</tr>
|
||||
<tr v-for="(list,idx) in heritageList" :key="idx">
|
||||
<td>{{idx+1}}</td>
|
||||
<td>{{list.libraryNumber}}</td>
|
||||
<td><router-link :to="{path: '/intangibleHeritageDetail/' + list.intangibleLibraryId}">{{list.libraryTitle}}</router-link></td>
|
||||
<td><span :title="list.libraryOpenDateValue">{{list.libraryOpenDateValue}}</span></td>
|
||||
<td>{{list.libraryTypeValue}}</td>
|
||||
<td>{{list.libraryArea}}</td>
|
||||
<td><span :title="list.libraryAuthor">{{list.libraryAuthor}}</span></td>
|
||||
<td><router-link :to="{path: '/intangibleHeritageDetail/' + list.intangibleLibraryId}" class="go-detail">查看详情</router-link></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="no-data" v-else>
|
||||
@ -99,7 +110,9 @@ export default {
|
||||
},
|
||||
heritageList: [],
|
||||
url: common.url,
|
||||
isLoading: false
|
||||
isLoading: false,
|
||||
areaList: [],
|
||||
area: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -128,9 +141,33 @@ export default {
|
||||
paging: function (page) {
|
||||
this.page.page = page
|
||||
this.getHeritageInfo()
|
||||
},
|
||||
getAreaList: function () {
|
||||
var self = this
|
||||
axios.get(self.url + 'usercenter/app/dataarea/listareabyparentidrelease/640675').then(function (res) {
|
||||
self.areaList = res.data
|
||||
})
|
||||
},
|
||||
changeArea: function (area, lv) {
|
||||
this.page.page = 1
|
||||
this.changePage = 1
|
||||
if (area) {
|
||||
var level = 'area' + (parseInt(lv) + 1)
|
||||
this.$set(this.page, level, area)
|
||||
this.area = area
|
||||
} else {
|
||||
this.area = ''
|
||||
this.page = {
|
||||
page: 1,
|
||||
rows: 8,
|
||||
totalPage: 1
|
||||
}
|
||||
}
|
||||
this.getHeritageInfo()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getAreaList()
|
||||
this.getHeritageInfo()
|
||||
}
|
||||
}
|
||||
@ -138,6 +175,38 @@ export default {
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus" scoped>
|
||||
@import "~styles/public.styl"
|
||||
.select
|
||||
padding 10px 0 0
|
||||
overflow hidden
|
||||
.select-container
|
||||
width 1200px
|
||||
margin 0 auto
|
||||
.select-line
|
||||
margin-bottom 10px
|
||||
font-size 14px
|
||||
span
|
||||
color #565656
|
||||
display inline-block
|
||||
margin-right 5px
|
||||
vertical-align top
|
||||
line-height 30px
|
||||
button
|
||||
width 80px
|
||||
height 30px
|
||||
padding 0 5px
|
||||
box-sizing border-box
|
||||
border none
|
||||
background none
|
||||
outline none
|
||||
color #565656
|
||||
border-radius 4px
|
||||
cursor pointer
|
||||
white-space nowrap
|
||||
overflow hidden
|
||||
text-overflow: ellipsis
|
||||
&.active
|
||||
color #fff
|
||||
background $main-color
|
||||
.loading
|
||||
position fixed
|
||||
top 50%
|
||||
|
||||
Loading…
Reference in New Issue
Block a user