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

<template>
	<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="detail" v-bind:data-id="item.id">
			<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}}</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: '',
			    user_id: '',
			    curPage: 1,
			}
		},
		onLoad(options) {
			this.user_id= options.id
			 this.getList();
		},
		methods:{
			//获取列表
			  getList() {
			    uni.showLoading({
			      title: '加载中...',
			    })
			    let url = "";
			    if (this.curPage == 1) {
			      url = 'user/order?page = 1';
			    } else {
			      url = 'user/orderRent?page = 1'
			    }
			    let data = {
			      user_id: this.user_id
			    }
			    app.request(url, data, 'GET').then(res => {
			      uni.hideLoading();
			      if (res.statusCode == 200) {
			       
			          this.order= res.data.data,
			          this.links= res.data.links.next
			        
			      }
			    })
			  },
			  //切换日租月租订单
			  choose:function(e){
				  this.curPage=e
				  this.getList()
				  console.log(e,"这是点击日租之后")
			  },
			  detail:function(e){
				  console.log(e.currentTarget.dataset.id,'跳转用骑行轨迹')
				      uni.navigateTo({
				        url: '/pages/manage/orderDetail?id=' + e.currentTarget.dataset.id +"&index=" + this.curPage,
				      }) 
			  }
		}
	}
</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: 30rpx;
		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>