173 lines
2.9 KiB
Vue
173 lines
2.9 KiB
Vue
<template>
|
|
<view class="page fc">
|
|
<view class="table fa sb">
|
|
<view class="table_item faj f1" v-for="(item, index) in tableList" :key="index" @click="tableClick(item.id)"
|
|
:class="tableIndex == index ? 'table_active' : ''">{{ item.name }}
|
|
<view class="table_tag" v-if="tableIndex == item.id"></view>
|
|
</view>
|
|
</view>
|
|
<scroll-view scroll-y="true" class="scroll-view f1" show-scrollbar @scrolltolower="onScrollToLower">
|
|
<view class="body">
|
|
<view class="list">
|
|
<view class="list_content fa sb" v-for="(item, index) in list" :key="index">
|
|
<view class="list_module">
|
|
<view class="list_title">{{ item.memo }}</view>
|
|
<view class="list_time">{{ item.createtime }}</view>
|
|
</view>
|
|
<view class="list_price">{{ item.money }}</view>
|
|
</view>
|
|
<view class="list_more" v-if="list.length <1">
|
|
<view class="faj">暂无更多记录</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
MoneyLogApi
|
|
} from '@/utils/api.js'
|
|
import notHave from '@/components/not-have.vue';
|
|
import topSafety from '@/components/top-safety.vue';
|
|
import tabBar from '@/components/tab-bar.vue';
|
|
export default {
|
|
components: {
|
|
notHave,
|
|
topSafety,
|
|
tabBar,
|
|
},
|
|
data() {
|
|
return {
|
|
tableList: [{
|
|
name: '充值记录',
|
|
id: 1
|
|
}, {
|
|
name: '消费记录',
|
|
id: 2
|
|
}],
|
|
tableIndex: 1,
|
|
form: {
|
|
page: 1,
|
|
type: 1,
|
|
limit: 10
|
|
},
|
|
list: []
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
getList() {
|
|
MoneyLogApi(this.form).then(res => {
|
|
if (res.code == 1) {
|
|
this.list.push(...res.data)
|
|
}
|
|
})
|
|
},
|
|
onScrollToLower() {
|
|
++this.form.page
|
|
console.log('触底事件')
|
|
this.getList()
|
|
},
|
|
tableClick(id) {
|
|
this.tableIndex = id
|
|
this.form.type = id
|
|
this.form.page = 1
|
|
this.list=[]
|
|
this.getList()
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background: #FFFFFF;
|
|
}
|
|
</style>
|
|
<style>
|
|
.page {
|
|
position: relative;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.scroll-view {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.table {
|
|
position: relative;
|
|
padding: 0 0 10rpx 0;
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.table_item {
|
|
position: relative;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
color: #666666;
|
|
line-height: 36rpx;
|
|
padding: 26rpx 0;
|
|
}
|
|
|
|
.table_tag {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: 0 auto;
|
|
width: 104rpx;
|
|
height: 4rpx;
|
|
background: #8449FE;
|
|
}
|
|
|
|
.table_active {
|
|
font-weight: 500;
|
|
color: #222222;
|
|
}
|
|
|
|
.body {
|
|
position: relative;
|
|
padding: 0 0 30rpx 0;
|
|
}
|
|
|
|
.list {
|
|
position: relative;
|
|
}
|
|
|
|
.list_content {
|
|
position: relative;
|
|
padding: 30rpx 40rpx;
|
|
}
|
|
|
|
.list_module {
|
|
position: relative;
|
|
}
|
|
|
|
.list_title {
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.list_time {
|
|
margin: 20rpx 0 0 0;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #9E9E9E;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.list_price {
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
line-height: 40rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
</style> |