61 lines
1.8 KiB
Vue
61 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<view class="pages" v-if="pages.totalPage > 1">
|
||
|
|
<view class="uni-flex uni-row" style="justify-content: space-around;">
|
||
|
|
<view :class="{'prohibit' : pages.page === 1} " class="btn">首页</view>
|
||
|
|
<view class="page-arrow" @click="pageCheck(1)">
|
||
|
|
<u-icon v-if="pages.page !== 1" name="arrow-left" size="20"></u-icon>
|
||
|
|
</view>
|
||
|
|
<view style="text-align: center;">
|
||
|
|
<label style="color: #2C405A; padding-right: 4px;">{{pages.page}}</label> / {{pages.totalPage}}
|
||
|
|
</view>
|
||
|
|
<view class="page-arrow" @click="pageCheck(2)">
|
||
|
|
<u-icon v-if="pages.page !== pages.totalPage" name="arrow-right" size="20"></u-icon>
|
||
|
|
</view>
|
||
|
|
<view :class="{'prohibit' : pages.page === pages.totalPage} " class="btn">尾页</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props:{
|
||
|
|
pages:{
|
||
|
|
type:Object,
|
||
|
|
default :()=>{return{page:1,totalPage:0}}
|
||
|
|
},
|
||
|
|
type:'invest'
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
pageCheck(pageType){
|
||
|
|
let page = this.pages.page
|
||
|
|
if(pageType === 1 && this.pages.page > 1){
|
||
|
|
page--
|
||
|
|
}else if(pageType === 2 && this.pages.page < this.pages.totalPage){
|
||
|
|
page++
|
||
|
|
}
|
||
|
|
this.$emit('pageFun',page)
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.pages{
|
||
|
|
padding: 12px 0;
|
||
|
|
height: 32px;
|
||
|
|
line-height: 32px;
|
||
|
|
.page-arrow{
|
||
|
|
justify-items: center;
|
||
|
|
padding-top: 6px;
|
||
|
|
}
|
||
|
|
.prohibit{
|
||
|
|
color: #A4A4A4;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|