purchase-let/pages/afterSales/afterSalesOrder.vue

<template>
	<view class="multiple">
		<view class="multiple-search">
			<up-search v-model="queryParams.order_id" :animation="false" :showAction="true" bgColor="#f6f6f6"
				placeholder="搜索商品" :actionStyle="{color:'#20B128','font-size':'28rpx'}" @custom="handleSearch"
				@search="handleSearch" @clear="handleSearch"></up-search>
		</view>

		<view class="multiple-card">
			<view class="multiple-card-wrap" style="padding-top: 12rpx;">
				<block v-for="(item,indx) in shopList" :key="indx">
					<view class="multiple-card-item" @click="onChooseShop(item)">
						<view class="card-item-title">
							<view class="card-item-title-order_id">{{item.order_id}}</view>
							<view class="card-item-title-time">{{item.create_time}}</view>
						</view>

						<view class="afterSales-goods-wrap" v-for="(goods,indx) in item.goods_list" :key="indx">
							<view class="afterSales-goods-left">
								<up-image :src="goods.image" width="140rpx" height="140rpx" radius="8rpx"></up-image>
							</view>
							<view class="afterSales-goods-right">
								<view class="afterSales-goods-right-title">
									<text class="goods_name">{{goods.store_name}}</text>
									<text class="goods_price">
										<text style='font-size: 24rpx;'>￥</text>
										<text style="font-size: 32rpx;">{{goods.price}}</text>
									</text>
								</view>
								<view class="afterSales-goods-right-info">
									<text class="goods_desc">牛腩块</text>
									<text class="goods_num">x{{item.cart_num || 0}}</text>
								</view>

								<view class="refund">
									<view class="refund-txt">退款￥</view>
									<view class="refund-money">{{item.refund_price || 0}}</view>
								</view>
							</view>
						</view>

						<view class="refund-status">
							<view class="refund-status-txt">
								<text v-if="item.status == -1">退款申请中</text>
								<text v-if="item.status == -2">退款完成</text>
								<text v-if="item.status == 5">取消售后</text>

								<view v-if="item.status == -1">等待商家处理</view>
								<view v-if="item.status == -2">退款成功￥{{item.refund_status}}</view>
								<view v-if="item.status == 5">退款已关闭</view>
							</view>
							<up-icon name="arrow-right"></up-icon>
						</view>
					</view>
				</block>
			</view>
			<up-loadmore :status="status" iconColor="#b3b3b3" color="#b3b3b3" />
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
	} from "vue";
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		orderListApi,
		refundReasonListApi
	} from "@/api/order.js"

	const shopList = ref([]); // 门店列表
	const status = ref(''); // 滚动状态

	// 查询参数
	const queryParams = reactive({
		page_no: 1,
		page_size: 10,
		order_id: '',
		paid: '1',
		status: '-1'
	})

	onReachBottom(() => {
		getShopList();
	})

	// 初始化
	onLoad(() => {
		getShopList();
	});

	// 详情
	const onChooseShop = (item) => {
		uni.navigateTo({
			url: '/pages/afterSales/afterSalesOrderDetail',
			fail(err) {
				console.log(err);
			},
			success(res) {
				res.eventChannel.emit('afterSalesOrderDetail', item)
			}
		})
	}

	// 搜索
	const handleSearch = () => {
		shopList.value = [];
		queryParams.page_no = 1;
		status.value = '';
		getShopList();
	}

	// 获取门店
	const getShopList = () => {
		if (status.value == 'nomore') return;
		if (status.value == 'loading') return;

		status.value == 'loading';
		orderListApi(queryParams).then(res => {
			let len = res.data.lists;
			status.value = queryParams.page_size > len.length ? 'nomore' : 'loadmore';
			shopList.value = shopList.value.concat(res.data.lists);
			if (status.value == 'loadmore') queryParams.page_no += 1;
		})
	}
</script>
<style lang="scss">
	page {
		background: #FAFAFA;
	}

	.multiple {
		padding-bottom: 30rpx;

		.multiple-search {
			position: sticky;
			top: 0;
			z-index: 10;
			height: 90rpx;
			background-color: #fff;
			padding: 0 24rpx;
			box-sizing: border-box;
		}

		.multiple-card {
			padding-bottom: 12rpx;

			.u-loadmore {
				padding-bottom: 40rpx;
			}

			.multiple-card-item {
				background: #FFFFFF;
				border-radius: 16rpx;
				margin: 0 24rpx 20rpx;
				padding: 0 24rpx 24rpx;
				overflow: hidden;

				.card-item-title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 84rpx;
					font-size: 28rpx;
					color: #333333;
					border-bottom: 2rpx solid #F8F9FA;
					margin-bottom: 24rpx;
				}

				.afterSales-goods-wrap {
					display: flex;
					margin-bottom: 20rpx;

					.afterSales-goods-left {
						margin-right: 20rpx;
					}

					.afterSales-goods-right {
						flex: 1;

						.afterSales-goods-right-title {
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 100%;

							.goods_name {
								max-width: 400rpx;
								font-size: 28rpx;
								color: #333333;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.goods_price {
								font-weight: 600;
								font-size: 24rpx;
								color: #060606;
							}
						}

						.afterSales-goods-right-info {
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 100%;
							font-size: 24rpx;
							color: #777777;
							margin-bottom: 20rpx;
						}

						.refund {
							display: flex;
							color: #333333;

							.refund-txt {
								font-size: 24rpx;
								align-self: flex-end;
							}

							.refund-money {
								font-size: 32rpx;
							}
						}
					}
				}

				.refund-status {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 70rpx;
					background: #F6F6F6;
					border-radius: 16rpx;
					padding: 0 30rpx 0 20rpx;

					.refund-status-txt {
						display: flex;
						align-items: center;

						text {
							font-weight: 600;
							font-size: 28rpx;
							color: #333333;
							margin-right: 30rpx;
						}

						view {
							font-size: 28rpx;
							color: #333333;
						}
					}
				}
			}
		}
	}
</style>