311 lines
7.9 KiB
Vue
311 lines
7.9 KiB
Vue
<template>
|
||
<div>
|
||
<Header></Header>
|
||
<div class="location">
|
||
<div class="location-content">
|
||
您的位置：<router-link to="/">首页</router-link> > 志愿服务
|
||
</div>
|
||
</div>
|
||
<div class="banner">
|
||
<img src="@/assets/images/volunteer.jpg" alt="">
|
||
</div>
|
||
<div class="volunteer">
|
||
<div v-if="!isLoading">
|
||
<ul v-if="hasData">
|
||
<router-link :to="{path: '/volunteerDetail/' + list.volunteerServiceId}" tag="li" v-for="list in volunteer" :key="list.id">
|
||
<div class="volunteer-img">
|
||
<img :src="url + 'volunteer/route/file/downloadfile/false/' + list.photo" alt="">
|
||
</div>
|
||
<div class="volunteer-info">
|
||
<h3>{{list.serviceName}}</h3>
|
||
<p>计划招募：{{list.count}}人</p>
|
||
<p>时间：{{list.startTime}}至{{list.endTime}}</p>
|
||
<button>查看详情</button>
|
||
</div>
|
||
</router-link>
|
||
</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: 'Volunteer',
|
||
components: {
|
||
Header,
|
||
Footer
|
||
},
|
||
data () {
|
||
return {
|
||
changePage: 1,
|
||
volunteer: [],
|
||
page: {
|
||
page: 1,
|
||
totalPage: 1,
|
||
rows: 12
|
||
},
|
||
url: common.url,
|
||
isLoading: false
|
||
}
|
||
},
|
||
computed: {
|
||
hasData () {
|
||
return this.volunteer.length > 0
|
||
},
|
||
showJumpBtn () {
|
||
return this.page.totalPage > 1
|
||
}
|
||
},
|
||
methods: {
|
||
doJumpPage: function () {
|
||
this.page.page = this.changePage
|
||
this.getVenueList()
|
||
},
|
||
paging: function (page) {
|
||
this.page.page = page
|
||
this.getVolunteerList()
|
||
},
|
||
getVolunteerList: function () {
|
||
var self = this
|
||
self.isLoading = true
|
||
axios.get(self.url + 'volunteer/app/volunteerservice/listpagevolunteerservicerelease', {
|
||
params: self.page
|
||
}).then(function (res) {
|
||
for (var i = 0; i < res.data.rows.length; i++) {
|
||
res.data.rows[i].photo = res.data.rows[i].photo.split(',')[0]
|
||
}
|
||
self.isLoading = false
|
||
self.volunteer = res.data.rows
|
||
self.page.page = res.data.page
|
||
self.changePage = res.data.page
|
||
self.page.totalPage = Math.ceil(res.data.total / self.page.rows)
|
||
})
|
||
}
|
||
},
|
||
mounted () {
|
||
this.getVolunteerList()
|
||
}
|
||
}
|
||
</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
|
||
.banner
|
||
width 100%
|
||
min-width 1200px
|
||
height 400px
|
||
img
|
||
width 100%
|
||
height 100%
|
||
.select
|
||
padding 10px 0 0
|
||
background #f0f0f0
|
||
overflow hidden
|
||
.select-container
|
||
width 1200px
|
||
margin 0 auto
|
||
.select-line
|
||
margin-bottom 10px
|
||
font-size 14px
|
||
span
|
||
color #565656
|
||
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
|
||
.volunteer
|
||
width 1200px
|
||
min-height 500px
|
||
margin 20px auto
|
||
ul
|
||
&:after
|
||
content: ''
|
||
display block
|
||
clear both
|
||
li
|
||
width 280px
|
||
float left
|
||
margin-right 20px
|
||
box-shadow:0px 0px 10px 0px rgba(176,176,176,0.3);
|
||
box-sizing border-box
|
||
margin-bottom 20px
|
||
cursor pointer
|
||
&:hover
|
||
box-shadow:0px 0px 20px 0px rgba(176,176,176,0.9);
|
||
.volunteer-img
|
||
width 100%
|
||
height 185px
|
||
position relative
|
||
img
|
||
width 100%
|
||
height 100%
|
||
span
|
||
display block
|
||
width 70px
|
||
height 25px
|
||
line-height 25px
|
||
text-align center
|
||
color #fff
|
||
font-size 12px
|
||
background #999
|
||
border-bottom-left-radius 8px
|
||
border-bottom-right-radius 8px
|
||
position absolute
|
||
top 0
|
||
left 20px
|
||
.volunteer-info
|
||
padding 10px 20px
|
||
h3
|
||
font-size 18px
|
||
color #565656
|
||
font-weight normal
|
||
white-space nowrap
|
||
overflow hidden
|
||
text-overflow: ellipsis
|
||
p
|
||
font-size 14px
|
||
color #a8a8a8
|
||
line-height 30px
|
||
button
|
||
width 120px
|
||
height 30px
|
||
border none
|
||
background $main-color
|
||
border-radius 4px
|
||
color #fff
|
||
font-size 14px
|
||
display block
|
||
margin 0 auto
|
||
cursor pointer
|
||
.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 #ffffff
|
||
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 #4792C2
|
||
width 50px
|
||
height 25px
|
||
vertical-align middle
|
||
color #fff
|
||
font-size 14px
|
||
.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
|
||
.no-data
|
||
padding 80px 0
|
||
text-align center
|
||
img
|
||
width 200px
|
||
</style>
|