hx-mini-uni/pages/order/order.vue

<template>
	<view>
		<view class="header">
			<view class="header-tabs">
				<view @click="checkType(0)" :class="tabType==0?'tab-item active':'tab-item'">全部</view>
				<view @click="checkType(1)" :class="tabType==1?'tab-item active':'tab-item'">已核销</view>
				<view @click="checkType(2)" :class="tabType==2?'tab-item active':'tab-item'">已撤销</view>
				<view @click="checkType(3)" :class="tabType==3?'tab-item active':'tab-item'">已完成</view>
			</view>
		</view>
		<view class="order-body">
			<view class="empty-data" v-if="dataList.length == 0">
				<image src="/static/image/order_none.png" mode="widthFix"></image>
				<view class="name">还没有订单</view>
			</view>
		</view>
	</view>
</template>

<script>
var app;
import * as Api from "@/static/api/order.js";
export default {
	data() {
		return {
			formData:{},
			tabType:0,
			dataList:[]
		}
	},
	onLoad() {
		app = this;
	},
	methods: {
		checkType(type){
			app.tabType = type;
			app.queryList(1,10);
		},
		queryList(pageNo, pageSize){
			var formData = {};
			formData.page = pageNo;
			formData.size = pageSize;
			formData.status = app.tabType;
			Api.order(formData).then((res)=>{
				uni.hideLoading();
				if (res.code !== 1) {
					this.$refs.paging.complete(false);
					return false;
				}
				this.$refs.paging.complete(res.data.rows);
			})
		}
	}
}
</script>

<style lang="scss" scoped>
page{
	background-color: #f8f8f8;
}
.order-body{
	height: calc(100vh - 100upx);
}
.empty-data{
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 28upx;
	color: #666;
	image{
		width: 50%;
	}
}
.header{
	background-color: #fff;
	padding: 20upx 20upx 0 20upx;
	.header-tabs{
		display: flex;
		align-items: center;
		height: 80upx;
		line-height: 80upx;
		.tab-item{
			width: 33.333%;
			text-align: center;
			font-size: 30upx;
			color: #333;
			position: relative;
			&.active{
				color: #005BAC;
				font-weight: bold;
				&::after{
					content: "";
					position: absolute;
					width: 40%;
					height: 8upx;
					border-radius: 4upx;
					left: 30%;
					bottom: 0;
					background-color: #005BAC;
				}
			}
		}
	}
}
</style>