<template>
	<view class="order-pages">
		<view class="order-list">
			<view class="order-list-item" @click="goView">
				<view>
					<view>高新二路站</view>
					<view class="order-finish">已完成</view>
				</view>
				<view>
					<view class="order-carNo">13709146191</view>
					<u-icon name="arrow-right" color="#666" size="28"></u-icon>
				</view>
				<view>
					<view class="order-price">
						<text>￥9.8</text>
						<text>微信支付</text>
					</view>
					<view>2020-07-25 16:20:33</view>
				</view>
			</view>
			<view class="order-list-item">
				<view>
					<view>高新二路站</view>
					<view class="order-unPay">待支付</view>
				</view>
				<view>
					<view class="order-carNo">13709146191</view>
					<u-icon name="arrow-right" color="#666" size="28"></u-icon>
				</view>
				<view>
					<view class="order-price">
						<text>￥9.8</text>
						<text>微信支付</text>
					</view>
					<view>2020-07-25 16:20:33</view>
				</view>
			</view>
			<view class="order-list-item">
				<view>
					<view>高新二路站</view>
					<view class="order-cansel">已取消</view>
				</view>
				<view>
					<view class="order-carNo">13709146191</view>
					<u-icon name="arrow-right" color="#666" size="28"></u-icon>
				</view>
				<view>
					<view class="order-price">
						<text>￥9.8</text>
						<text>微信支付</text>
					</view>
					<view>2020-07-25 16:20:33</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				pageNo:1,
				pageSize:15,
				count:0,
				status:'loading'
			};
		},
		methods: {
			// 获取订单列表
			getList() {
				
			},
			// 查看详情
			goView(item){
				uni.navigateTo({
					url:"/pages/order/orderDetail?id="+item.id
				})
			}
		},
		// 滚动到底部自动加载下页
		onReachBottom() {
			
		}
	}
</script>

<style lang="scss">
	.order-pages{
		width: 100%;
		.order-list{
			padding: 25rpx;
			.order-list-item{
				box-shadow: 1rpx 1rpx 5rpx #eee;
				border: 1px solid #eee;
				border-radius: 10rpx;
				margin: 30rpx 0;
				> view{
					padding:20rpx 30rpx;
					display: flex;
					align-items: center;
					border-bottom: 1px dashed #eee;
					&:last-child{
						border: 0;
					}
					>view{
						&:first-child{
							flex-grow: 1;
						}
						&:last-child{
							padding-left: 15rpx;
						}
					}
					.order-finish{
						color: #00aa00;
					}
					.order-unPay{
						color: #ff0000;
					}
					.order-cansel{
						color: #7e7b88;
					}
					.order-carNo{
						font-size: 32rpx;
					}
					.order-price{
						text{
							margin-right: 20rpx;
							color: #666;
							&:first-child{
								color: red;
								font-size: 32rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
