CBB3/pages/user/detail/brokerage_tx_log.vue

<style>
	.m-app{width:100vw}
	/* 头部 */
	.app-header{width:100%;background: #ffffff;height:42px;position: relative;}
	button.back-btn{width:18px;height:18px;position: absolute;top:12px;left:12px;z-index: 1;}
	button.back-btn image{width:18px;height:18px;display: block;}
	button.share-btn{width:18px;height:18px;position: absolute;top:12px;right:12px;z-index: 1;}
	button.share-btn image{width:18px;height:18px;display: block;}
	.app-title{color:#333333;font-size: 16px;font-weight: 700;text-align: center;width:100%;height:42px;line-height: 42px;position: relative;}
	
	
	.top-nav{width:calc(100% - 12px);padding-left: 12px;white-space: nowrap;padding-top: 10px;background: #ffffff;}
	button.top-nav-btn{height:35px;position: relative;display: inline-block;margin-right: 50px;}
	button.top-nav-btn:last-child{margin-right: 12px;}
	button.top-nav-btn text.ntitle{height:35px;line-height: 35px;text-align: center;color:#3f454b;font-size: 14px;width:100%;}
	button.top-nav-btn text.bline{height:3px;width:100%;position: absolute;bottom:0px;left:0px;}
	button.top-nav-btn.active text.ntitle{color:#ff383e;}
	button.top-nav-btn.active text.bline{background: #ff383e;}
	
	/* 滚动内容区域 */
	scroll-view.mid-body{width:100%;height:calc(100vh  - 10px);margin-top: 10px;
	/* #ifdef H5 */
	height:calc(100vh  - 42px - 10px);
	/* #endif */
	}
	.data-main{background: #ffffff;padding: 0px 12px;}
	.data-item{padding: 15px 0px;border-bottom:1px solid #f0f0f0;}
	.data-item:last-child{border-bottom:0px}
	.data-item-l{width:calc(100% - 80px)}
	.log-title{width:100%;font-size: 14px;color:#333333;text-align: left;}
	.log-time{width:100%;font-size: 12px;color:#999999;height:12px;line-height: 12px;text-align: left;margin-top: 10px;}
	.data-item-r{width:80px;text-align: right;color:#019560;font-size: 15px;}
	.data-shenhe{ color:red; text-align: right; font-size: 14px; margin-top: 5px;}
	.data-ok{ color: #007AFF;}
</style>
<template>
	<view class="m-app">
		<scroll-view class="mid-body" scroll-y="true" @scrolltolower="loadMoreData">
			<view class="data-main">
				<view class="data-item fx-r fx-bc" v-for="(item,index) in data">
					<view class="data-item-l">
						<view class="log-title">兑换到{{item.bankname}}账号:{{item.account}},姓名:{{item.name}}</view>
						<view class="log-time">兑换时间：{{item.addtime}}</view>
					</view>
					
					<view>
						<view class="data-item-r">{{item.money}}</view>
						<view class="data-shenhe" v-if="item.state == 0">待审核</view>
						<view class="data-ok" v-if="item.state == 1">已兑换</view>
						<view class="data-ok" v-if="item.state == 2">兑换失败</view>
					</view>
					
				</view>
				
			</view>
		</scroll-view>
	</view>
</template>



<script>
	import {mapState,mapMutations } from 'vuex';
	var page = 1;//页码
	var isLoad = false;//加载
	var isFoot = false;//是否到底
	
	export default {
		computed: mapState(['user']),
	    data() {
	        return {
				data:[],
				type :"",
				page:{
					isFirst:false,
					isLoad:false,
					isFoot:false,
					page:1
				}
	        }
	    },
		onLoad(options) {
			this.type = options.type || ''; 
			this.checkUserLogin({page:this,fn:this.initView});
		},
		onReachBottom() {
			console.log(this.page.isFoot);
			if(this.page.isFoot || this.page.isLoad) {
				return;
			}
			this.page.page ++;
			this.getData();			
		},
	    methods: {
			...mapMutations(['checkUserLogin']),
			/**
			 * 加载基础配置
			 */
			initView:function(){
				this.getData(true);
			},
			/**
			 * 获取数据
			 */
			getData:function(isPull = false){
				if(this.page.isLoad) return;
				this.page.isLoad = true;
				if(isPull) {
					this.page.page = 1;
					this.page.isLoad = false;
					this.page.isFoot = false;
				}
				uni.showLoading({ title: '获取数据中..' });
				var post = {};
				post.page = this.page.page;
				post.type = this.type;
				this
					.request
					.post("userBrokerageTxLog",post)
					.then(res => {
						uni.hideLoading();
						this.page.isFirst = true;
						this.page.isLoad = false;
						if(isPull) {
							this.data = res.data.list;
						} else {
							this.data = this.data.concat(res.data.list);
						}
						//是否到底
						if(res.data.list.length != res.data.pageSize) {
							this.page.isFoot = true;
						} 
					})
					.catch(res=>{
						console.log(res);
						uni.hideLoading();
						uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
					});
			}
		}
	}
</script>