jiaoyi-uni2/奥莱优品/pages/order/order.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==2?'tab-item active':'tab-item'" @click="orderStatus(2)">待使用</view>
			<view :class="orderState==3?'tab-item active':'tab-item'" @click="orderStatus(3)">已完成</view>
			<view :class="orderState==4?'tab-item active':'tab-item'" @click="orderStatus(4)">已退款</view>
			<view :class="orderState==8?'tab-item active':'tab-item'" @click="orderStatus(8)">履约中</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 class="re-btn" @click="toLogin" v-if="!isLogin">立即登录</view>
					</view>
				</view>
				<view class="order-item" v-for="(item,indx) in orderList" :key="item.id" v-else>
					<view class="item-header" @click="toDetail(item.out_order_no)">
						<view class="item-store">
							<image src="/static/image/store.svg"></image>
							<text>{{item.poi.poi_name}}</text>
						</view>
						<view class="item-status danger" v-if="item.status == 1">待使用</view>
						<view class="item-status success" v-if="item.status == 2">已完成</view>
						<view class="item-status fail" v-if="item.status == 3">已退款</view>
						<view class="item-status warn" v-if="item.status == 4">退款中</view>
						<view class="item-status fail" v-if="item.status == 5">已关闭</view>
						<view class="item-status warn" v-if="item.status == 6">部分退款</view>
						<view class="item-status success" v-if="item.status == 7">履约中</view>
					</view>
					<view class="item-goods" @click="toDetail(item.out_order_no)">
						<view class="image">
							<image :src="item.img"></image>
						</view>
						<view class="info">
							<view class="title">
								<view class="name">{{ item.product.product_name }}</view>
								<view class="num">x{{ item.number }}</view>
							</view>
							<view class="tags">
								{{item.sku_name?item.sku_name:'默认'}}
								<view class="price">{{ $dialog.formatMoney(item.price,true) }}</view>
							</view>
						</view>
					</view>
					<view class="item-time">
						<view class="time-list">订单编号：{{ item.order_sn }}</view>
						<view class="time-list">下单时间：{{item.create_at}}</view>
					</view>
					<view class="item-footer" @click="toDetail(item.out_order_no)">
						<view class="footer-left">实付 <text>{{ $dialog.formatMoney(item.pay_money,true) }}</text></view>
						<view class="footer-group-btn">
							<view :class="indx%2==0?'button border':'button warn'">继续支付</view>
							<view class="button fail">申请退款</view>
						</view>
					</view>
				</view>
				<uni-load-more status="loading" v-if="orderData.loading"></uni-load-more>
				<uni-load-more status="noMore" v-if="orderList.length > 0 && orderData.isDone"></uni-load-more>
			</view>
			<view class="line-height"></view>
		</scroll-view>
		<halfLogin ref="loginCom" @success="loginSuccess"></halfLogin>
	</view>
</template>

<script>
var app;
const pageSize = 20;
export default {
	data() {
		return {
			orderState:0,
			orderData:{
				size:pageSize,
				page:1,
				loading:false,
				isDone:false
			},
			orderList:[],
			isLogin:true
		}
	},
	onLoad() {
		app = this;
		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
			})
		},
		loginSuccess(){
			app.getOrder()
		},
		toLogin(){
			app.$refs.loginCom.open();
		},
		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 = {};
			const tokenPoi = uni.getStorageSync("contact");
			formData.poi = tokenPoi.poi_id;
			formData.page = app.orderData.page;
			formData.size = app.orderData.size;
			formData.status = app.orderState;
			var resp = await app.$api.order.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>
.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;
	}
}

.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;
	.order-list{
		.order-item{
			width: 95%;
			margin: 0 auto;
			background-color: #fff;
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 10rpx;
			.item-footer{
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: $main-text-color;
				font-size: 28rpx;
				.footer-left{
					text {
						font-size: 30rpx;
						font-weight: bold;
						color: $main-color;
					}
				}
				.footer-group-btn{
					display: flex;
					align-items: center;
					gap: 20rpx;
					.button{
						font-size: 24rpx;
						padding: 10rpx 20rpx;
						border-radius: 40rpx;
						display: flex;
						align-items: center;
						&.border{
							background-color: #fff;
							border: 2rpx solid #fed7aa;
							color: #f26428;
						}
						&.success{
							background-color: #d1fae5;
							color: #059669;
						}
						&.fail{
							background-color: #f1f5f9;
							color: #64748b;
						}
						&.danger{
							background-color: #fef3c7;
							color: #b45309;
						}
						&.warn{
							background-color: #fef3c7;
							color: #b45309;
						}
					}
				}
			}
			.item-time{
				background-color: #fff8f1;
				border-radius: 10rpx;
				margin: 20rpx 0;
				padding: 20rpx;
				.time-list{
					line-height: 48rpx;
					font-size: 24rpx;
					color: #64748b;
				}
			}
			.item-goods{
				display: flex;
				align-items: center;
				gap: 20rpx;
				background-color: #fff;
				margin-top: 20rpx;
				border-radius: 20rpx;
				.stock{
					text-align: right;
				}
				.image {
					height: 180rpx;
					overflow: hidden;display: flex;align-items: center;min-width: 180rpx;
					position: relative;
					image {
						width: 180rpx;
						border-radius: 10upx;
						height: 100%;
					}
				}
				.info{
					flex: 1 1 0%;
					overflow: hidden;
					.title{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.name {
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 32rpx;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							 -webkit-box-orient: vertical;
							color: #333;
							font-weight: 900;
						}
					}
					.tags {
						color: #94a3b8;
						font-size: 24rpx;
						margin: 10rpx 0;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.price {
							font-size: 28rpx;
							color: $main-text-color;
							font-weight: 600;
						}
					}
				}
			}
			.item-header{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #fff7ed;
				padding-bottom: 10rpx;
				.item-status{
					font-size: 24rpx;
					padding: 10rpx 20rpx;
					border-radius: 30rpx;
					&.success{
						background-color: #d1fae5;
						color: #059669;
					}
					&.fail{
						background-color: #f1f5f9;
						color: #64748b;
					}
					&.danger{
						background-color: #fef3c7;
						color: #b45309;
					}
					&.warn{
						background-color: #ffedd5;
						color: #e95b22;
					}
				}
				.item-store{
					display: flex;
					align-items: center;
					gap: 15rpx;
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
}
</style>