discounts-minapp/my/order/index.vue

<template>
	<view class="order">
		<view class="tab-box">
			<view class="tab" :class="[query.orderType == null?'active':'']" @click="handleTab(null)">
				全部
			</view>
		<!-- 	<view class="tab" :class="[query.orderType == 'USED'?'active':'']" @click="handleTab('USED')">
				已使用
			</view> -->
			<view class="tab" :class="[query.orderType == 'WAIT_PAYMENT'?'active':'']" @click="handleTab('WAIT_PAYMENT')">
				待付款
			</view>
			<view class="tab" :class="[query.orderType == 'WAIT_USE'?'active':'']" @click="handleTab('WAIT_USE')">
				待使用
			</view>
			<view class="tab" :class="[query.orderType == 'APPLY_REFUND'?'active':'']" @click="handleTab('APPLY_REFUND')">
				退款
			</view>
		</view>
		<u-empty v-if="!list.length && status == 'noMore'" mode="order" iconSize="200rpx" textSize="28rpx">
		</u-empty>
		<zs-list mt="0" @load="loadMore" :status="status">
			<view class="order-item" v-for="(item,index) in list" :key="index" @click="jump(item)">
				<view class="top-box">
					<view class="label">
						{{item.shopInfo.shopName}}
					</view>
					<view class="status">
						{{item.goodsModelList[0].goodsState |filterType}}
					</view>
				</view>
				<view class="order-box">
					<zs-img radius="full" :src="item.goodsModelList[0].goodsInfo.goodsPath" width="164rpx" height="164rpx"></zs-img>
					<view class="info">
						<view class="title">
							{{item.goodsModelList[0].goodsInfo.goodsName}}
						</view>
						<view class="time">
							{{$u.timeFormat(item.createTime,'yyyy-mm-dd hh:MM:ss')}}
						</view>
						<view class="price">
							¥{{item.payAmount}}
						</view>
					</view>
				</view>
			</view>
		</zs-list>
	</view>
</template>

<script>
	import {getOrderList} from '@/api/order.js'
	export default {
		data() {
			return {
				status: 'more',
				loading: false,
				query:{
					orderType:null,
					page:0,
					size:10,
					userId:JSON.parse(uni.getStorageSync('userInfo')).userId
				},
				total:0,
				list: []
			}
		},
		filters: {
			filterType: function(val) {
				if(val == 'APPLY_REFUND'){
					return '申请退款'
				}else if(val == 'CLOSE'){
					return '关闭订单'
				}else if(val == 'REFUNDED'){
					return '已退款'
				}else if(val == 'REFUSAL_REFUND'){
					return '拒绝退款'
				}else if(val == 'USED'){
					return '已使用'
				}else if(val == 'WAIT_PAYMENT'){
					return '待付款'
				}else if(val == 'WAIT_USE'){
					return '待使用'
				}
			}
		},
		methods: {
			handleTab(val){
				this.query.orderType = val
				this.query.page = 0
				this.list = []
				this.getOrderList()
			},
			loadMore() {
				this.getOrderList()
				
			},
			jump(item) {
				uni.setStorageSync('order',JSON.stringify(item))
				uni.navigateTo({
					url: './detail?id='+item.orderNo
				})
			},
			getOrderList(){
				this.status = 'loading'
				getOrderList(this.query).then(res=>{
					if(res.state == 'Success'){
						this.total = res.content.totalElements
						this.list = this.list.concat(res.content.content) 
						this.list.length>=this.total?this.status = 'noMore':this.status = 'more'
						this.query.page++
						uni.stopPullDownRefresh()
					}
				})
			}
		},
		onPullDownRefresh() {
			this.query.page = 0
			this.list = []
			this.status = 'more'
			this.getOrderList()
		},
		onLoad(option) {
			this.query.orderType = option.type || null
		}
	}
</script>

<style lang="scss">
	.order {
		background: #efefef;
		padding: 90rpx 30rpx 0;
		min-height: 100vh;
		.tab-box{
			display: flex;
			position: fixed;
			width: 750rpx;
			height: 70rpx;
			left: 0%;
			top: 0%;
			z-index: 9;
			background: #fff;
			
			.tab{
				flex: 1;
				text-align: center;
				padding: 15rpx 0;
				font-size: 28rpx;
				color: #999999;
			}
			.tab.active{
				font-size: 32rpx;
				color: #222222;
				position: relative;
				&::after{
					content: '';
					width: 40rpx;
					height: 8rpx;
					box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(255,255,255,0.16);
					border-radius: 46rpx 46rpx 46rpx 46rpx;
					background: $uni-color-primary;
					position: absolute;
					bottom: 0%;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
		.zs-list {

			.order-item {
				background-color: #fff;
				border-radius: 8px;
				margin-bottom: 20rpx;
				.top-box{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx;
					border-bottom:2rpx solid #F3F3F3;
					.label{
						font-weight: bold;
						color: #222222;
						font-size: 32rpx;
						width: 500rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.status{
						font-size: 28rpx;
						color: #999999;
					}
				}
				.order-box {
					padding: 25rpx;
					display: flex;

					.icon {
						width: 164rpx;
						height: 164rpx;
						border-radius: 16rpx;
						background-color: #999;
					}

					.info {
						margin-left: 25rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.title {
							color: #0F0F0F;
							font-size: 28rpx;
						}

						.time {
							font-size: 26rpx;
							color: #999999;
						}
						.price{
							font-weight: bold;
							color: #181818;
						}

					}
				}
			}
		}
	}
</style>