shop-app/pages/order/saleAfter/saleAfterList.vue

<!--
 * @Author: ch
 * @Date: 2022-03-22 10:58:24
 * @LastEditors: ch
 * @LastEditTime: 2022-04-15 15:30:57
 * @Description: file content
-->
<template>
	<view>
		<BsEmpty class="empty" v-if="!orderListData.length && loadingStatus === 'nomore'" tips="暂无售后订单呢~" :icon="require('@/static/order/empty.png')">
			<ui-button slot="btn" type="line" @click="$Router('/')">去逛逛</ui-button>
		</BsEmpty>

		<view class="orders" v-for="item in orderListData" :key="item.refundId"
			@click="$Router.push(`/saleAfterDetail?id=${item.refundId}`)">
			<view class="orders--title">
				<text class="orders--name">官方自营</text>
				<text class="orders--status">{{item.refundStatusDesc}}</text>
			</view>
			<view class="orders--item">
				<image class="orders--item-image" mode="widthFix" :src="item.refundProduct.productImageUrl" />
				<view >
					<view class="orders--item-con">
						<text class="orders--item-title">{{item.refundProduct.productName}}</text>
						<text class="orders--item-pirce">￥{{item.refundProduct.realAmount}}</text>
					</view>
					<view class="orders--item-desc">
						<text>{{item.refundProduct.skuDescribe}}</text>
						<text class="orders--item-num">x{{item.refundProduct.quantity}}</text>
					</view>
				</view>
			</view>
			<view class="orders--footer">
				<button class="orders--footer-btn">查看详情</button>
			</view>
		</view>
		<u-loadmore :status="loadingStatus" v-if="orderListData.length" />
	</view>
</template>
<script>
import BsEmpty from '@/components/BsEmpty.vue';
import UiButton from '@/components/UiButton.vue';
import { DictOrderStatus } from '@/common/dicts/order';
import { ApiGetSaleAfterOrderList } from '@/common/api/order';

export default {
	components: { BsEmpty, UiButton },
	data () {
		return {
			orderListData : [],
			loadingStatus : 'loading',
			pageIndex : 1,
			pageSize : 10
		}
	},
	onLoad(){
		this.getOrderList()
	},
	onReachBottom(){
		this.next()
	},
	methods: {
		async getOrderList(){
			this.loadingStatus = 'loading';
			
			const {error, result} = await ApiGetSaleAfterOrderList({
				length : this.pageSize,
				pageIndex : this.pageIndex
			});

			if(error){
				uni.$u.toast(error.message);
				return false;
			}
			// 标记是否为最后一页
			if(result.records.length < this.pageSize){
				this.loadingStatus = 'nomore';
			}
			this.orderListData = this.orderListData.concat(result.records);
		},
		/**
		 * 到底拉取下一页数据，并判断是否执行拉取
		 */
		next(){
			if(this.loadingStatus === 'nomore'){
				return false
			}
			this.pageIndex++;
			this.getOrderList();
		}
	}
	
}
</script>
<style lang="scss" scoped>
page{
	background: $color-grey1;
	overflow: hidden;
}
.empty{
	height: 100vh;
}

.orders{
	background: $color-grey0;
	padding: 30rpx;
	margin: 20rpx 0;
	&--title{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	&--name{
		font-size: $font-size-lg;
		color: $color-grey6;
	}
	&--status{
		font-size: $font-size-sm;
		color: $color-yellow3;
	}
	&--item{
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0 0;
	}

	&--item-image{
		width: 180rpx;
		height: 180rpx;
		margin-right: 30rpx;
	}
	&--item-con{
		width: 510rpx;
		display: flex;
		justify-content: space-between;
		font-size: $font-size-base;
		color: $color-grey6;
		line-height: 39rpx;
	}
	&--item-title{
		overflow:hidden; 
		text-overflow:ellipsis;
		display:-webkit-box; 
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2; 
	}
	&--item-pirce{
		font-size: 22rpx;
		margin-left: 60rpx;
	}
	&--item-desc{
		width: 510rpx;
		font-size: $font-size-sm;
		color: $color-grey4;
		margin-top: 20rpx;
		line-height: 39rpx;
		display: flex;
		justify-content: space-between;
	}
	&--item-num{
		font-size: $font-size-base;
		margin-left: 60rpx;
	}

	&--total{
		font-size: $font-size-sm;
		color: $color-grey4;
		display: flex;
		align-items: center;
		justify-content: end;
		margin-top: 30rpx;
		&__amount{
			font-size: $font-size-base;
			margin-right: 20rpx;
		}
		&__pay{
			color: $color-grey6;
		}
	}
	&--footer{
		display: flex;
		justify-content: end;
		align-items: center;
		margin-top: 30rpx;
		&-btn{
			height: 58rpx;
			line-height: 58rpx;
			border-radius: 30rpx;
			margin: 0 0 0 30rpx;
			border: 1px solid $color-grey6;
			color: $color-grey6;
			background: none;
			font-size: 26rpx;
			&__red{
				background: linear-gradient(270deg, $color-yellow2 0%, $color-yellow1 100%);
				color: $color-grey0;
				border: 0;
				height: 60rpx;
				line-height: 60rpx;
			}
		}
		
	}
}

	
// 空数据按钮

</style>