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 @click="checkType(4)" :class="tabType==4?'tab-item active':'tab-item'">已完成</view>
			</view>
		</view>
		<view class="order-body">
			<z-paging ref="paging" show-refresher-update-time v-model="dataList" @query="queryList" :fixed="false">
				<view class="order-item" v-for="(item,indx) in dataList" :key="indx">
					<view class="item-header" @click="toDetail(item.order_sn)">
						<view class="order-status success" v-if="item.status == 1">预约中</view>
						<view class="order-status success" v-if="item.status == 2">服务中</view>
						<view class="order-status" v-if="item.status == 3">已撤销</view>
						<view class="order-status success" v-if="item.status == 4">已完成</view>
						<view class="order-time">订单号 ：{{ item.certificate_id }}</view>
					</view>
					<view class="order-goods" @click="toDetail(item.order_sn)">
						<view class="goods-img"><image :src="item.goods.product_img"></image></view>
						<view class="goods-info">
							<view class="name">{{ item.goods.product_name }}</view>
							<view class="desc">
								<view class="time" v-if="item.end_at">有效期至：{{ item.end_at }} </view>
								<view class="num">x {{ item.number?item.number:1 }}</view>
							</view>
							<view class="desc">{{item.sku}}</view>
							<view class="total">¥ {{ item.goods.product_price }}</view>
						</view>
					</view>
					<view class="order-footer">
						<view class="footer-l">{{item.create_at}}</view>
						<view class="footer-r">
							<view class="btn blue" v-if="item.status == 1" @click="toDetail(item.order_sn)">取消预约</view>
							<view class="btn blue" v-if="item.status == 2" @click="toDetail(item.order_sn)">取消服务</view>
							<view class="btn danger" @click="toDetail(item.order_sn)">详情</view>
						</view>
					</view>
				</view>
			</z-paging>
		</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: {
		toDetail(order){
			uni.navigateTo({
				url:"/pages/order/info?order="+order
			})
		},
		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: #fe2c56;
				font-weight: bold;
				&::after{
					content: "";
					position: absolute;
					width: 40%;
					height: 8upx;
					border-radius: 4upx;
					left: 30%;
					bottom: 0;
					background-color: #fe2c56;
				}
			}
		}
	}
}

.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{height: 50upx;line-height: 50upx;text-align: center;border: 2upx solid #ccc;color: #333;font-size: 28upx;border-radius: 10upx;padding: 0 25upx;}
.order-footer .btn.danger{border:2upx solid #fe2c56;color: #fe2c56;}
.order-footer .btn.blue{border:2upx solid #007aff;color: #007aff;}

.order-item{background-color: #fff;padding: 0 20upx;border-radius: 10upx;margin-top: 20upx;}
.order-item .item-header{display: flex;align-items: center;height: 80upx;line-height: 80upx;border-bottom: 2upx solid #f8f8f8;}
.order-item .item-header .order-status{font-size: 28upx;color: #fe2c56;}
.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-item .order-goods{display: flex;align-items: center;}
.order-item .order-goods image{width: 140upx;height: 140upx;}
.order-item .goods-info{margin-left: 20upx;font-size: 28upx;flex: 1;padding: 20upx 0;position: relative;}
.order-item .goods-info .name{font-size: 30upx;color: #333;}
.order-item .goods-info .desc{font-size: 24upx;color: #999;display: flex;align-items: center;justify-content: space-between;margin: 20upx 0;}
.order-item .goods-info .total{font-size: 30upx;color: #333;text-align: right;font-weight: bold;position: absolute;right: 20upx;bottom: 40upx;}
</style>