jp-commuter-ds/pages/my/user/bybusList.vue

<template>
	<view>
		<car-common  mytitle="乘车记录"   ref="common"></car-common>
		<scroll-view  v-show="recordList.length" :style="'height: '+clientHeight+'px;'"   scroll-y="true"     @scrolltolower="lower">
		
		<view class="ticket-item" v-for="item,i in recordList" :key="i" @click="gotoUrl(item.id)">
			<view class="ticket-item-left">
				<view class="ticket-head">
					<u-avatar :src="item.imageUrl" size="mini"></u-avatar>
					<h3>{{item.startStation}} - {{item.endStation}}</h3>
				</view>
				<view class="ticket-text">
					<view class="ticket-text-row">
						<view class="ticket-text-row-item">
							<p>票种：</p><span>{{item.ticketTypeName}}</span>
						</view>
						<view class="ticket-text-row-item">
							<p>货票：</p><span>￥{{item.goodTicket}}</span>
						</view>
					</view>
					<view class="ticket-text-row ">
						<p>购票时间：</p><h4>{{item.payTime}}</h4>
					</view>
				</view>
			</view>
			<view class="ticket-item-right " :class="item.status==2?'overdue':''">
				<h3>{{item.totalFee}}</h3>
				<p>票价</p>
			</view>
		</view>
		<view style="text-align: center;">{{listForm.pageIndex>listForm.totalPage?'没有更多记录了':'下拉刷新'}}</view>
		</scroll-view>
		<view  v-show="isLoading&&recordList.length==0" style="text-align:center;margin-top: 80px;" >
				<img src="static/img/blankpage.png" style="width: 50%;" alt="" >
				<view>暂无信息</view>
		</view>
		 
	</view>
</template>

<script>
	import api from './bybusList.js'
	export default  api;
</script>

<style>
	page{
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
.ticket-item{
	background-color: #fff;
	margin:20rpx;
	border-radius: 10px;
	display: flex;
	justify-content: space-between;
	
	.ticket-text-row-item{
		display: flex;
		align-items: center;
		margin-right: 10px;
	}
	.ticket-item-left{
		padding: 20rpx;
		.ticket-head{
			display: flex;
			align-items: center;
			h3{
				margin-left: 10rpx;
			}
		}
		.ticket-text{
			margin-top: 20rpx;
			.ticket-text-row{
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;
				&:last-child{
					margin-bottom: 0;
				}
				span{
					color:#007AFF
				}
				h4{
					color:#999;
					font-weight: normal;
				}
			}
		}
	}
	.ticket-item-right{
		width: 120px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-left: 1px dashed #eee;
		position: relative;
		&:before{
			content: '';
			position: absolute;
			height: 30rpx;
			width: 30rpx;
			background-color: #f7f7f7;
			border-radius: 50%;
			left: -15rpx;
			top:-15rpx;
		}
		&:after{
			content: '';
			position: absolute;
			height: 30rpx;
			width: 30rpx;
			background-color: #f7f7f7;
			border-radius: 50%;
			left: -15rpx;
			bottom:-15rpx;
		}
		h3{
			color:#007AFF;
			font-size:24px;
		}
		&.overdue{
			background:url(/static/img/overdue.png) no-repeat center center;
			background-size:75%;
		}
	}
	
}
</style>