<template>
|
<view class="mx">
|
<view class="index-search" :style="{ top: (statusbarHeight + navHeight) + 'px' }">
|
<view :class="item.id === type ? 'index-search-item active' : 'index-search-item'" v-for="(item, index) in list" :key="index" @click="changeType(item.id,item.optType)">
|
<text>{{item.name}}</text>
|
<view class="index-search-item-x" v-if="item.id === type"></view>
|
</view>
|
</view>
|
<view class="mx-list">
|
<view v-if="dataList && dataList.length" class="mx-list-item" v-for="(item, index) in dataList" :key="index">
|
<view class="mx-list-item-a">
|
<text>{{item.remark || ''}}</text>
|
<text>{{((item.optType||1) * (item.amount||0)/100).toFixed(2) }}元</text>
|
</view>
|
<view class="mx-list-item-b">
|
<text>交易号：{{item.transactionNo || '-'}}</text>
|
<text v-if="item.status ==0">已到账</text>
|
<text v-if="item.status ==1">交易失败</text>
|
<text v-if="item.status ==2" class="redtxt">处理中</text>
|
</view>
|
<view class="mx-list-item-c">
|
{{item.createTime}}
|
</view>
|
</view>
|
<view class="mx-list-item-d">
|
<text v-if="!hasMore">{{loadTxt}}</text>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
type: 1,
|
list: [
|
{ name: '全部', id: 1, optType:null },
|
{ name: '收入', id: 2, optType:1 },
|
{ name: '支出', id: 3 , optType:-1}
|
],
|
searchForm:{
|
optType:null
|
},
|
capacity:10,
|
page:1,
|
hasMore: true,
|
dataList:[],
|
changing1:false,
|
loadTxt:'已加载全部'
|
};
|
},
|
onReachBottom() {
|
if(this.hasMore){
|
this.getPageData(this.page+1)
|
}
|
console.log("我被触发了")
|
},
|
onShow(){
|
this.changeType(1,'')
|
},
|
methods: {
|
changeType(id,optType) {
|
if(this.changing1){
|
return
|
}
|
this.type = id
|
this.searchForm.optType = optType
|
this.getPageData(1)
|
},
|
getPageData(page){
|
this.page = page
|
if(this.page ==1){
|
this.hasMore=true
|
this.dataList=[]
|
}
|
if(this.changing1){
|
return
|
}
|
this.changing1 = true
|
var that = this
|
var param ={
|
capacity:this.capacity,
|
page : this.page,
|
model:{
|
optType:this.searchForm.optType
|
}
|
}
|
that.$u.api.revenuePage(param)
|
.then(res =>{
|
if(res.code ===200) {
|
if(res.data && res.data.records && res.data.records.length && res.data.page == that.page) {
|
that.dataList = [...that.dataList,...(res.data.records)]
|
}
|
if(that.dataList.length == (res.data.total||0)){
|
that.hasMore = false
|
}
|
if(res.data.total ==0){
|
that.loadTxt='未查询到记录'
|
}else{
|
that.loadTxt='已加载全部'
|
}
|
}
|
}).finally(() => {
|
that.changing1 = false
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.mx {
|
width: 100%;
|
.mx-list {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
.mx-list-item-d{
|
padding: 20px;
|
width: 100%;
|
text-align: center;
|
font-size: 24rpx;
|
color: #999999;
|
}
|
.mx-list-item {
|
width: 100%;
|
height: 208rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-evenly;
|
border-bottom: 1rpx solid #E5E5E5;
|
|
.mx-list-item-a {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
text {
|
&:nth-child(1) {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
&:nth-child(2) {
|
font-weight: 600;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
}
|
}
|
.mx-list-item-b {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
text {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #999999;
|
}
|
}
|
.mx-list-item-c {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #999999;
|
}
|
}
|
}
|
.index-search {
|
width: 100%;
|
height: 100rpx;
|
padding: 0 30rpx;
|
position: sticky;
|
left: 0;
|
top: 0;
|
z-index: 9;
|
box-sizing: border-box;
|
background-color: #FFFFFF;
|
display: flex;
|
align-items: center;
|
border-bottom: 1rpx solid #E5E5E5;
|
.active {
|
text {
|
font-weight: 500 !important;
|
font-size: 32rpx !important;
|
color: #222222 !important;
|
}
|
}
|
.index-search-item {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
text {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #666666;
|
}
|
.index-search-item-x {
|
position: absolute;
|
bottom: 0;
|
left: 50%;
|
transform: translate(-50%, 0);
|
width: 40rpx;
|
height: 6rpx;
|
background: #00BC12;
|
border-radius: 3rpx;
|
}
|
}
|
}
|
}
|
.redtxt{
|
color: #FF0000 !important;
|
}
|
</style>
|
