jp-commuter-ds/pages/buytickets/success.vue

<template>
	<view>
		<car-common    ref="common"  ></car-common>
		
		<u-navbar title="缴费结果"  :is-back="false">
			<view class="slot-wrap"></view>
			<view class="navbar-right"  @click="gotoHome"  >
				<u-icon name="home-fill" color="#999" size="28"></u-icon>
				<span >前往首页</span>
			</view>
		</u-navbar>
		
		<view class="success">
			<u-icon name="checkmark-circle-fill" color="#08d152" size="200"></u-icon>
			<h3>支付成功</h3>
		</view>
		
		<view class="ticket-item" v-for="item,i in pay.list" :key="i" >
			<view class="ticket-item-left" >
				<view class="ticket-head">
					<h3>{{item.startStation}} - {{item.endStation}}</h3>
				</view>
				<view class="ticket-text">
					<view class="ticket-text-row">
						<p>票种：</p><span>{{item.ticketTypeName}}</span>
					</view>
					<view class="ticket-text-row">
						<p>货票：</p><span>￥{{item.goodTicket}}</span>
					</view>
				</view>
			</view>
			<view class="ticket-item-right">
				<u-avatar :src="item.imageUrl" size="default"></u-avatar>
				<h3>{{item.totalFee}}</h3>
			</view>
		</view>
		<view class="upload-button">
			<u-button class="upload-btn" type="primary" shape="circle" @click="backBtn" plain>继续购票</u-button>
			<u-button class="upload-btn" type="primary" shape="circle" @click="lookBtn">查看购票记录</u-button>
		</view>
	</view>
</template>

<script>
	import api from './success.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;
		box-shadow:3px 3px 3px rgba(0,0,0,0.1);
		.ticket-item-left{
			padding: 30rpx;
			.ticket-head{
				display: flex;
				align-items: center;
			}
			.ticket-text{
				margin-top: 20rpx;
				.ticket-text-row{
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
					&:last-child{
						margin-bottom: 0;
					}
					span{
						color:#007AFF
					}
				}
			}
		}
		.ticket-item-right{
			width: 120px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-left: 1px dashed #eee;
			position: relative;
			padding: 20rpx;
			&: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;
			}
		}
		
	}
	.upload-button{
		display: flex;
		font-size:24px;
		position: fixed;
		left: 30rpx;
		bottom:30rpx;
		right: 30rpx;
		.upload-btn{
			flex: 1;
			&:first-child{
				margin-right: 10px;
			}
		}
	}
	.success{
		text-align: center;
		padding: 100rpx 0 40rpx;
		
	}
	.navbar-right {
			display: flex;
			margin-right: 20rpx;
			span{
				color:rgb(96, 98, 102);
				margin-left: 3px;
			}
		}
		.slot-wrap {
				display: flex;
				align-items: center;
				flex: 1;
			}
</style>