shanxian-work-app/pages/manage/recentOrder.vue

<template>
<!-- 	<text>这是最近订单</text> -->
<view class="out">
		<view class="order-bottom">
			<view class="order-bottom-left" @click="choose(curPage=1)" :class="curPage==1?'active':''">
				普通订单
			</view>
			<view class="order-bottom-right" @click="choose(curPage=2)" :class="curPage==2?'active':''">
				日租订单
			</view>
		</view>
		<view class="order-list" v-for="(item,index) in order" @click="skipDetail" v-bind:data-index="index">
			<text class="order-bike-num">车辆编号：{{item.bike_no}}</text>
			<view class="order-user">
				<text class="order-user-name" style="overflow: hidden;">用户：{{item.nickname}}</text>
				<text class="order-user-phone">{{item.mobile}}</text>
			</view>
			<text class="order-time">时间：{{item.start_use_bike_time}}——{{item.end_use_bike_time}}</text>
			<view class="user-tag1" v-if="item.orders_status=='骑行中'" style="background: linear-gradient(163deg, #68e9ce 0%, #18d5b9 100%);">
				{{item.orders_status}}
			</view>
			<view class="user-tag1" v-if="item.orders_status=='订单关闭'" style="background: linear-gradient(163deg, #c0c0c0 0%, #808080 100%);">
				{{item.orders_status}}
			</view>
			<view class="user-tag1" v-if="item.orders_status=='已完成'" style="background: linear-gradient(163deg, #41b8fd 0%, #0ee7fe 100%);">
				{{item.orders_status}}   
			</view>
			<view class="user-tag1" v-if="item.orders_status=='待支付'" style="background: linear-gradient(163deg,rgba(255, 139, 102, 1) 0%,rgba(254, 87, 34, 1) 100%);">
				{{item.orders_status}}
			</view>
			<view class="user-tag1" v-if="item.orders_status=='临时停车'" style="background: linear-gradient(163deg, #9382f4 0%, #a297fb 100%);">
				{{item.orders_status}}
			</view>
			<view class="user-tag1" v-if="item.orders_status=='租车中'" style="background: linear-gradient(163deg, #3648f5 0%, #a297fb 100%);">
				{{item.orders_status}}
			</view>
			<view class="user-tag1" v-if="item.orders_status=='租车结束,待支付'" style="background: linear-gradient(163deg, #32f955 0%, #a297fb 100%);">
				{{item.orders_status}}
			</view>
		</view>
		<view class="noData noOrder" v-if="order.length == 0" >
			<image  src="http://resource.weilaibike.com/none.png"></image>
			<view style="color: black;">暂无相关数据~</view>
		</view>
	</view>
</template>

<script>
	var app= getApp()
	export default{
		data(){
			return{
				 order: [],
				    links: null,
				    id: '',
				    curPage: 1,
			}
		},
		onLoad(options) {
			this.id=options.id
			this.getList()
		},
		methods:{
			getList() {
			    uni.showLoading({
			      title: '加载中...',
			    })
			    let url = '';
			    if (this.curPage == 1) {
			      url = 'bike/latelyOrders?page = 1';
			    } else {
			      url = 'bike/latelyOrderRent?page = 1'
			    }
			    let data = {
			      bike_id: this.id
			    }
			    app.request(url, data, 'POST').then(res => {
			      uni.hideLoading();
			      if (res.statusCode == 200) {
			        console.log(res);
			        
			          this.order=res.data.data,
			          this.links=res.data.links.next
			      
			      }
			    })
				},
				skipDetail:function(e){
					console.log(e,'这是订单详情')
					let index = e.currentTarget.dataset.index
					    uni.navigateTo({
					      url: '/pages/manage/orderDetail?id=' + this.order[index].id + '&index=' + this.curPage,  //普通订单和日租订单
					    })
				},
				choose:function(e){
					this.curPage=e
					this.getList()
				}
		}
	}
</script>

<style>
	@import url("/static/css/base.css");
		.order-bottom {
			width: 80%;
			height: 55rpx;
			line-height: 55rpx;
			margin: 0 auto;
			text-align: center;
			border: solid 1px #64efda;
			display: flex;
			border-radius: 15rpx;
			margin-top: 30rpx;
	
	
		}
	.order-user {
			display: flex;
		}
	.out{
		padding: 30rpx 30rpx;
	}
		.order-user-name,
		.order-user-phone {
			display: block;
			flex: 1;
			height: 60rpx;
			line-height: 60rpx;
		}
		.order-bottom-left,
		.order-bottom-right {
			flex: 1;
			color: #fff;
			background-color: #FFFFFF;
			height: 55rpx;
			width: 228rpx;
			color: #64efda;
			font-size: 28rpx;
		}
	
		.order-bottom-left {
			border-top-left-radius: 13rpx;
			border-bottom-left-radius: 13rpx;
			border-right: solid 1px #64efda;
		}
	
		.order-bottom-right {
			border-top-right-radius: 13rpx;
			border-bottom-right-radius: 13rpx;
		}
		.order-list {
			position: relative;
			clear: none;
			padding: 19rpx 40rpx;
			height: 159rpx;
			line-height: 50rpx;
			color: rgba(77, 77, 77, 1);
			margin-top: 27rpx;
			background: rgba(255, 255, 255, 1);
			font-size: 24rpx;
			box-shadow: 0px 0px 50px 0px rgba(216, 216, 216, 1);
			border-radius: 10px;
		}
		
		.user-balance {
			float: right;
			margin-right: 135rpx;
		}
		
		.user-tag,
		
		
		.user-tag1,
		.user-tag2,
		.user-tag3 {
			position: absolute;
			top: 0;
			right: 0;
			width: 158rpx;
			height: 42rpx;
			line-height: 42rpx;
			text-align: center;
			border-radius: 0px 10px 0px 20px;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
		}
		.active {
			background-color: #64efda;
			color: #FFFFFF;
		}
		.user-tag1 {
			background-color: rgba(254, 87, 34, 1);
			/* box-shadow: 0px 0px 6px 0px rgba(254, 94, 44, 1); */
		}
		
		.user-tag2 {
			background-color: rgba(137, 40, 247, 1);
			box-shadow: 0px 0px 6px 0px rgba(137, 40, 247, 1);
		}
		
		.user-tag3 {
			background-color: rgba(100, 234, 224, 1);
			box-shadow: 0px 0px 6px 0px rgba(100, 234, 224, 1);
		}
		
	
</style>