football/pages/user-center/integral-detail/integral-detail.vue

<template>
    <app-layout>
        <app-tab-nav :tabList="tabList" :activeItem="activeTab" @click="tabStatus" :theme="theme"></app-tab-nav>
	    <view class='item' v-for="item in list" :key="item.id">
	        <view class='name'>{{item.desc}}</view>
	        <view class='num'>{{item.integral}}积分</view>
	        <view class="info">
	            <text>时间: {{item.created_at}}</text>
	        </view>
	    </view>
    </app-layout>
</template>

<script>
    import appTabNav from "../../../components/basic-component/app-tab-nav/app-tab-nav.vue";

    import { mapState } from "vuex";

    export default {
        data() {
            return {
                tabList: [
                    {id:1, name: '收入'},
                    {id:2, name: '支出'}
                ],
                loading: null,
                activeTab: 1,
                page: 2,
                list: []
            }
        },
        components: {
            "app-tab-nav": appTabNav,
        },
        computed: {
            ...mapState({
                theme: state => state.mallConfig.theme,
                userInfo: state => state.user.info,
            })
        },
        methods: {
            tabStatus(e) {
                this.list = [];
                this.page = 2;
                this.activeTab = e.currentTarget.dataset.id;
                this.getList();
            },
            getList() {
                let that = this;
                that.$showLoading({
                    text: '加载中...'
                });
                that.$request({
                    url: that.$api.integral_mall.log,
                    data: {
                    	type: that.activeTab
                    }
                }).then(response=>{
                    that.$hideLoading();
                    if(response.code == 0) {
                        that.list = response.data.list;
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    that.$hideLoading();
                    that.$event.on(that.$const.EVENT_USER_LOGIN).then(()=>{
                        that.getList();
                    });
                });
            },
            getMore() {
                let that = this;
                that.$showLoading({
                    text: '加载中...'
                });
                that.$request({
                    url: that.$api.integral_mall.log,
                    data: {
                    	type: that.activeTab,
                        page: that.page
                    }
                }).then(response=>{
                    that.$hideLoading();
                    if(response.code == 0) {
                        if(response.data.list.length > 0) {
                            that.loading = null;
                            that.list = that.list.concat(response.data.list);
                            that.page++;
                        }
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(e => {
                    that.$hideLoading();
                });
            },
        },
        onLoad() {
            this.getList();
        },
        onReachBottom() {
            this.getMore();
        }
    }
</script>

<style scoped lang="scss">
	.item {
	    padding: #{36rpx} #{24rpx};
	    color: #ff6f28;
	    font-size: 15px;
	    border-bottom: #{1rpx} solid #e2e2e2;
        background-color: #fff;
	}

	.name {
	    color: #353535;
	    margin-bottom: #{6rpx};
	}

	.num {
	    width: 25%;
	    display: inline-block;
	}

	.info {
	    font-size: 12px;
	    float: right;
	    color: #999;
	}
</style>