junzitang/pagesT/order/ReturnOrder.vue

<template>
	<view class="order-ul" :class="['qn-page-' + theme]">
		<view class="order-li" v-for="(item, index) in order_list" :key="index">
			<view class="shop-view">
				<text class="ibonfont ibonmendian"></text>
				{{ item.shopName }}
			</view>
			<view class="goods-view clearfix">
				<view class="float_left goods-img"><image :src="item.images[0]" mode="aspectFill"></image></view>
				<view class="float_right goods-info">
					<view class="ellipsis goods-name">{{ item.goodsName }}</view>
					<view class="sku">{{ item.unitName || '' }} {{ item.skuName || '' }}</view>
					<view class="return-money clearfix">
						<text class="float_left primary-color">¥{{ $_utils.formatNub(item.returnUnitPrice) }}</text>
						<text class="float_right">x {{ $_utils.formatNub(item.goodsNum) }}</text>
					</view>
				</view>
			</view>
			<view class="return-status">
				{{ item.auditStatus === 2 ? '退货成功' : item.auditStatus === 1 ? '正在审核中' : '已驳回' }}
				<block v-if="item.auditStatus !== 3">
					，退款
					<text style="font-weight: bold;">¥{{ $_utils.formatNub(item.returnTotalPrice) }}</text>
				</block>
				<block v-else>
					，原因：{{item.auditFailReason}}
				</block>
			</view>
		</view>
		<!-- 空白页 -->
		<Aempty text="暂无数据" src="https://onlineimg.qianniao.vip/list.png" v-if="order_list.length === 0"></Aempty>
		<u-loadmore v-else :status="load_status" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			order_list: [],
			page: 1,
			pageSize: 10,
			total: 0,
			load_status: 'nomore'
		};
	},
	onShow() {
		this.getAllOrderReturn();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.getAllOrderReturn();
	},
	onReachBottom() {
		if (this.total / this.pageSize > this.page) {
			this.page += 1;
			this.getAllOrderReturn();
		}
	},
	methods: {
		getAllOrderReturn() {
			this.load_status = 'loading';
			this.$u.api
				.getAllOrderReturn({
					page: this.page,
					pageSize: this.pageSize
				})
				.then(res => {
					uni.stopPullDownRefresh();
					if (this.page === 1) {
						this.order_list = res.data;
					} else {
						this.order_list = this.order_list.concat(res.data);
					}
					this.total = res.pageTotal;
					this.load_status = this.$_utils.loadStatus(this.page, this.pageSize, this.total);
				})
				.catch(res => {
					uni.stopPullDownRefresh();
					this.load_status = 'nomore';
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.order-ul {
	.order-li {
		width: 700rpx;
		margin: 20rpx auto;
		padding: 0 20rpx 30rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		.shop-view {
			line-height: 70rpx;
			.ibonfont {
				font-size: 32rpx;
				margin-right: 10rpx;
				color: #cacaca;
			}
		}
		.goods-view {
			.goods-img {
				margin-right: 20rpx;
				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
				}
			}
			.goods-info {
				width: 518rpx;
				.sku {
					font-size: 24rpx;
					color: #999999;
					margin: 10rpx 0;
				}
				.return-money {
					font-size: 24rpx;
				}
			}
		}
		.return-status {
			line-height: 36rpx;
			background-color: #f6f7f9;
			margin-top: 20rpx;
			border-radius: 10rpx;
			padding: 24rpx 30rpx;
			font-size: 26rpx;
		}
	}
}
</style>