jiaoyi-uni/pages/user/complaint/complaint.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>
		<view class="order-body">
			<z-paging ref="paging" show-refresher-update-time v-model="dataList" @query="queryList" :fixed="false">
				<navigator hover-class="none" :url="'/pages/user/complaint/detail?id='+item.id" class="order-item" v-for="(item,indx) in dataList" :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>
			</z-paging>
		</view>
	</view>
</template>

<script>
var app;
import * as Api from "@/static/api/complaint.js";
export default {
	data() {
		return {
			listState:false,
			orderState:0,
			dataList:[],
			storeData:null
		}
	},
	onLoad() {
		app = this;
		app.storeData = uni.getStorageSync("contact");
	},
	methods: {
		orderStatus(state) {
			app.orderState = state;
			app.dataList = [];
			app.queryList(1,10)
		},
		queryList(pageNo, pageSize){
			var formData = {};
			var token = uni.getStorageSync("user_token")
			if (!token) {
				return false;
			}
			var poiId = uni.getStorageSync("poiId");
			formData.page = pageNo;
			formData.size = pageSize;
			formData.status = app.orderState;
			formData.poi = poiId;
			app.listState = true;
			Api.list(formData).then((res)=>{
				app.listState = false;
				uni.hideLoading();
				if (res.code !== 1) {
					this.$refs.paging.complete(false);
					return app.$dialog.showSuccess(res.msg);
				}
				app.$refs.paging.complete(res.data.rows);
			})
		}
	}
}
</script>

<style>
.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;}

.content{height: 100vh;background-color: #f8f8f8;}
.content .tab-menu{height: 80upx;line-height: 80upx;background-color: #fff;display: flex;align-items: center;font-size: 28upx;color: #666;justify-content: space-around;}
.content .tab-menu .tab-item{position: relative;}
.content .tab-menu .tab-item.active{color: #007aff;}
.content .tab-menu .tab-item.active::after{position: absolute;content: "";width: 30%;left: 35%;height: 4upx;bottom: 0;background-color: #007aff;}
.content .order-body{height: calc(100vh - 100upx); }

.order-item{background-color: #fff;padding: 0 20upx;border-radius: 10upx;width: calc(95% - 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;}
.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;}

.empty-body{display: flex;align-items: center;justify-content: center;flex-direction: column;height: calc(100vh - 100upx);}
.empty-body .img{text-align: center;font-size: 28upx;color: #666;}
.empty-body .img image{height: 160upx;width: 160upx;}
.empty-body .img .tip{margin-top: 20upx;}
.empty-body .re-btn{width: 180upx;height: 80upx;line-height: 80upx;text-align: center;font-size: 28upx;color: #fff;background-color: #007aff;border-radius: 10upx;margin-top: 60upx;}
</style>