charge_miniapp/pages/recharge-log/recharge-log.vue

<template>
	<ax-body>
		<view class="body app-hide-scrollbar">
			<view v-if="logs.data.length" class="list">
				<view v-for="(item,index) in logs.data" :key="index" class="item">
					<view class="title">
						<view class="name">{{item.params.levelName}}</view>
						<view class="state" :style="{backgroundColor:item.orderStatus==2?'':'#FF5D50'}">{{getStatusTips(item.orderStatus)}}</view>
					</view>
					<view class="cell">
						<view>订单编号：{{item.outTradeNo}}</view>
						<view>购券时间：{{item.payTime}}</view>
						<view>实付金额：{{item.orderMoney}}元</view>
						<view v-if="item.orderStatus!=2">退款时间：{{item.refundTime}}</view>
						<view v-if="item.orderStatus!=2">退款金额：{{item.refundMoney}}元</view>
					</view>
				</view>
				<view v-if="logs.total>logs.data.length" @click="loadData(true)" class="loadmore"><text>点击加载更多数据</text></view>
			</view>
			<view v-else class="nothing">
				<image src="@/static/img/empty.svg" mode="widthFix" class="icon"></image>
				<view>暂无可展示数据</view>
			</view>
		</view>
	</ax-body>
</template>

<script>
	export default {
		onLoad() {
			this.loadData();
		},
		data() {
			return {
				logs:{
					total: 0,
					data:[],
				},
				search_data:{
					pageNum:1,
					pageSize:10,
					orderByColumn:'payTime',
					isAsc:'desc'
				}
			}
		},
		methods: {
			getStatusTips(status){
				if(status==2){
					return "已到账"
				}else if(status==4){
					return "已退款"
				}else if(status==5){
					return "退款中"
				}
			},
			loadData(append){
				if(append){
					this.search_data.pageNum++
					// 追加模式,由loadmore触发
					this.$api.base("post","/orderApi/getOrderList",this.search_data,{}).then(res=>{
						this.logs.data = this.logs.data.concat(res.orderLsit.rows);
					})
				}else{
					this.search_data.pageNum = 1
					// 初始化模式,一般由onLoad触发
					this.$api.base("post","/orderApi/getOrderList",this.search_data,{}).then(res=>{
						this.logs.total = res.orderLsit.total
						this.logs.data = res.orderLsit.rows
					})
				}
			}
		}
	}
</script>

<style scoped>
@import url("recharge-log.css");
</style>