jiaoyi-uni2/奥莱优品/pages/complaint/list.vue

<template>
	<view class="content">
		<view class="tab-menu">
			<view :class="orderState==0?'tab-item active':'tab-item'" @click="orderStatus(0)">全部</view>
			<view :class="orderState==1?'tab-item active':'tab-item'" @click="orderStatus(1)">已受理</view>
			<view :class="orderState==2?'tab-item active':'tab-item'" @click="orderStatus(2)">已回复</view>
		</view>
		<scroll-view class="order-body" scroll-y scroll-with-animation @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower" upper-threshold="80">
			<view class="order-list" v-if="orderList.length == 0 && orderData.loading">
				<view class="order-item" v-for="(item,indx) in 3" :key="indx">
					<view class="item-header">
						<view class="item-store" style="flex: 1;"><view class="skeleton-line animate"></view></view>
					</view>
					<view class="item-goods">
						<view class="image">
							<view class="skeleton-line animate"></view>
						</view>
						<view class="info">
							<view class="title">
								<view class="skeleton-line animate"></view>
							</view>
							<view class="tags">
								<view class="skeleton-line animate"></view>
							</view>
							<view class="tags">
								<view class="skeleton-line animate"></view>
							</view>
						</view>
					</view>
					<view class="mt15">
						<view class="skeleton-line animate"></view>
					</view>
					<view class="item-footer mt15">
						<view class="footer-left" style="width: 30%;">
							<view class="skeleton-line animate"></view>
						</view>
						<view class="footer-group-btn" style="width: 30%;">
							<view class="skeleton-line animate"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="order-list" v-else>
				<view class="empty-body" v-if="orderList.length == 0">
					<view class="imgs">
						<image src="/static/image/empty.png" mode="widthFix"></image>
						<view class="tip">没有更多数据啦~</view>
					</view>
				</view>
				<view v-else>
					<navigator hover-class="none" :url="'/pages/complaint/detail?id='+item.id" class="order-item" v-for="(item,indx) in orderList" :key="indx">
						<view class="order-info">
							<view class="info-item">
								<view class="name">订单编号</view>
								<view class="item-content">{{ item.order_sn }}</view>
							</view>
							<view class="info-item">
								<view class="name">投诉事项</view>
								<view class="item-content">{{ item.question }}</view>
							</view>
							<view class="order-status" v-if="item.status == 0">
								<image src="https://jymini.oss-cn-guangzhou.aliyuncs.com/mini/complaint-2.svg"></image>
							</view>
							<view class="order-status" v-if="item.status == 1">
								<image src="https://jymini.oss-cn-guangzhou.aliyuncs.com/mini/complaint-3.svg"></image>
							</view>
						</view>
						<view class="order-footer">
							<view class="footer-l">{{item.create_at}}</view>
							<view class="footer-r">
								<view class="btn danger">查看详情</view>
							</view>
						</view>
					</navigator>
				</view>
			</view>
			<view class="line-height"></view>
		</scroll-view>
	</view>
</template>

<script>
var app;
const pageSize = 10;
export default {
	data() {
		return {
			orderState:0,
			poiId:0,
			orderData:{
				size:pageSize,
				page:1,
				loading:true,
				isDone:false
			},
			orderList:[],
		}
	},
	onLoad({poi}) {
		app = this;
		app.poiId = poi;
		app.getOrder()
	},
	methods: {
		scrolltoupper(){},
		scrolltolower(e){
			if (app.orderData.isDone || app.orderList.length == 0) return ;
			app.getOrder()
		},
		toDetail(order){
			uni.navigateTo({
				url:"/pages/order/detail?order="+order
			})
		},
		orderStatus(state) {
			app.orderState = state
			app.orderList = [];
			app.orderData = {
				size:pageSize,
				page:1,
				loading:false,
				isDone:false
			};
			app.getOrder()
		},
		async getOrder(){
			app.orderData.loading = true;
			var formData = {};
			formData.poi = app.poiId;
			formData.page = app.orderData.page;
			formData.size = app.orderData.size;
			formData.status = app.orderState;
			var resp = await app.$api.complaint.list.get(formData)
			app.orderData.loading = false;
			if (resp.code == 401) {
				app.isLogin = false;
				return ;
			}
			if (resp.code == 0) {
				return app.$dialog.showSuccess(resp.msg)
			}
			app.isLogin = true;
			if (resp.data.rows.length > 0) {
				app.orderData.page ++;
				app.orderList = [...app.orderList,...resp.data.rows];
			} else {
				app.orderData.isDone = true;
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.tab-menu{
	height: 80rpx;
	line-height: 80rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: #666;
	justify-content: space-around;
	.tab-item{
		position: relative;
		color: $main-text-color;
		&.active{
			color: $main-color;
			font-weight: 700;
			&::after{
				position: absolute;
				content: "";
				width: 30%;
				left: 35%;
				height: 4rpx;
				bottom: 0;
				background-color: $main-color;
			}
		}
	}
}

.order-body{
	height: 0;
	flex: 1;
}
.content{
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #ededed;
	display: flex;
	flex-direction: column;
	.line-height{
		height: 40rpx;
		width: 100%;
	}
}
.empty-body{
	display: flex;align-items: center;justify-content: center;flex-direction: column;height: calc(100vh - 100upx);
	.imgs{
		text-align: center;font-size: 28upx;color: #666;
		image{height: 160upx;width: 160upx;}
		.tip{margin-top: 20upx;}
	}
	.re-btn{
		width: 180upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		font-size: 28upx;
		color: #fff;
		background-color: $main-color;
		border-radius: 10upx;
		margin-top: 60upx;
	}
}
.order-item{background-color: #fff;padding: 20upx;border-radius: 10upx;width: calc(100% - 40upx);margin: 20upx auto;}
.order-item .item-header{display: flex;align-items: center;height: 60upx;line-height: 60upx;}
.order-item .item-header .order-status{font-size: 28upx;color: #f00;}
.order-item .item-header .order-status.success{color: #007aff;}
.order-item .item-header .order-time{font-size: 24upx;color: #999;margin-left: auto;margin-right: 0;}

.order-footer{display: flex;text-align: right;padding: 20upx 0;border-top: 2upx solid #f8f8f8;align-items: center;margin-top: 20rpx;}
.order-footer .footer-l{font-size: 28upx;color: #666;}
.order-footer .footer-r{display: flex;margin-left: auto;margin-right: 0;flex: 1;justify-content: end;gap: 20upx;}
.order-footer .btn{width: 160upx;height: 60upx;line-height: 60upx;text-align: center;border: 2upx solid #ccc;color: #333;font-size: 28upx;border-radius: 10upx;}
.order-footer .btn.danger{border:2upx solid #f00;color: #f00;}
.order-footer .btn.blue{border:2upx solid #007aff;color: #007aff;}
.order-info{position: relative;}
.order-info .order-status{position: absolute;right: 20upx;top: 20upx;}
.order-info .order-status image{width: 120upx;height: 120upx;transform: rotate(45deg);}
.order-info .name{font-size: 28upx;color: #666;padding: 20upx 0;}
.order-info .item-content{font-size: 28upx;color: #000;}
.order-info .item-content .order-status{font-size: 28upx;color: #f00;}
.order-info .item-content .order-status.success{color: #007aff;}
</style>