Ai_GirlFriend/xuniYou/pages/mine/transactionRecord.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>