sct/pagesT/pointsMall/ExchangeLog.vue

<template>
	<view :class="['qn-page-' + theme]">
		<view class="nav-view">
			<u-tabs-swiper
				ref="tabs"
				font-size="28"
				:current="tab_current"
				inactive-color="#2A2A2A"
				:active-color="primaryColor"
				:bar-style="{ borderRadius: '0', height: '4rpx', backgroundColor: primaryColor }"
				:list="navList"
				:is-scroll="false"
				@change="tabClick"
			></u-tabs-swiper>
		</view>
		<view class="list-ul">
			<view class="list-li" @click="goPage('/pagesT/pointsMall/ExchangeOrderDetail?id=' + item.id)" v-for="(item, index) in goods_list" :key="index">
				<view class="top-view clearfix">
					<view class="time float_left">{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
					<view class="status float_right">{{ item.status === 5 ? '已完成' : item.status === 4 ? '待发货' : item.status === 6 ? '已关闭' : '其他' }}</view>
				</view>
				<view class="clearfix cont">
					<view class="float_left goods-img"><image :src="item.images[0]" mode="aspectFill"></image></view>
					<view class="float_left">
						<view class="ellipsis goods-name">{{ item.integralGoodsName }}</view>
						<view class="points-num primary-color">{{ item.amount }}股权</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 空白页 -->
		<Aempty text="暂无数据" v-if="goods_list.length === 0" src="https://onlineimg.qianniao.vip/data.png"></Aempty>
		<u-loadmore v-if="goods_list.length" :status="loading_status"></u-loadmore>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading_status: 'nomore',
			goods_list: [],
			status: 4,
			tab_current: 0,
			page: 1,
			pageSize: 10,
			total: 0,
			navList: [
				{
					name: '待发货'
				},
				{
					name: '已完成'
				},
				{
					name: '已关闭'
				}
			]
		};
	},
	onReachBottom() {
		if (this.total / this.pageSize > this.page) {
			this.page += 1;
			this.getAllIntegralGoodsExchange();
		}
	},
	onLoad() {
		this.getAllIntegralGoodsExchange();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.getAllIntegralGoodsExchange();
	},
	methods: {
		tabClick(index) {
			this.tab_current = index;
			switch (index) {
				case 0:
					this.status = 4;
					break;
				case 1:
					this.status = 5;
					break;
				case 2:
					this.status = 6;
					break;
			}
			this.page = 1;
			this.goods_list = [];
			this.getAllIntegralGoodsExchange();
		},
		getAllIntegralGoodsExchange() {
			this.loading_status = 'loading';
			this.$u.api
				.getAllIntegralGoodsExchange({
					status: this.status,
					page: this.page,
					pageSize: this.pageSize
				})
				.then(res => {
					uni.stopPullDownRefresh();
					if (this.page !== 1) {
						this.goods_list = thiis.goods_list.concat(res.data);
					} else {
						this.goods_list = res.data;
					}
					this.total = res.pageTotal;
					this.loading_status = this.$_utils.loadStatus(this.page, this.pageSize, this.total);
				})
				.catch(res => {
					this.load_status = 'nomore';
					uni.stopPullDownRefresh();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.nav-view {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}
.list-ul {
	padding-top: 80rpx;
	.list-li {
		width: 710rpx;
		margin: 20rpx auto;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		.top-view {
			font-size: 24rpx;
			padding-bottom: 20rpx;
			.time {
				color: #999999;
			}
		}
		.cont {
			.goods-img {
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;
				image {
					display: block;
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
			.goods-name {
				width: 540rpx;
				font-size: 24rpx;
				padding-bottom: 16rpx;
			}
			.points-num {
				font-size: 26rpx;
				font-family: DIN-Medium;
			}
		}
	}
}
</style>