JP-ChargeTeam51/pages/parking/outPayment.vue

<template>
	<view>
		<u-navbar title="无车辆扫码停车" back-icon-name="close" back-icon-size="30"></u-navbar>
		<view class="main">
			<view class="park-name">
				<img src="../../static/img/if-location-pin@2x.png" alt="">
				<text>玉桥公园停车场</text>
			</view>
			<view class="infos">
				<view class="item">
					<view class="title">
						车牌号
					</view>
					<view class="content">
						临D101010
					</view>
				</view>
				<view class="item">
					<view class="title">
						停车费
					</view>
					<view class="content">
						10.00元
					</view>
				</view>
				
			</view>
			
		</view>
		<view class="details">
			<view class="detail-item">
				<view class="title">
					进场时间
				</view>
				<view class="content">
					2022-06-01 12:00:00
				</view>
			</view>
			<view class="detail-item">
				<view class="title">
					离场时间
				</view>
				<view class="content">
					2022-06-01 17:20:22
				</view>
			</view>
			<view class="detail-item">
				<view class="title">
					停车时长
				</view>
				<view class="content">
					5小时23分钟
				</view>
			</view>
			<view class="detail-item">
				<view class="title">
					收费标准
				</view>
				<view class="content">
					4.00/小时
				</view>
			</view>
		</view>
		<view class="payment">
			<p>付款方式</p>
			<view class="methods">
				<view class="recharge-radio" >
					<u-radio-group v-model="value"  :wrap="true" width="100%">
						<u-radio active-color="#0076ff"  v-for="(item, index) in list" :key="index"
							:name="item.id" :disabled="item.disabled" width="100%">
							<view class="recharge-radio-item">
								<u-icon :name="item.icon" custom-prefix="custom-icon" :color="item.color" size="48">
								</u-icon>
								<view class="recharge-radio-name oldTextjp2" oldstyle="font-size:18px">
									{{item.name}}
								</view>
							</view>
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			
		</view>
		
		<u-button>缴纳停车费</u-button>
		<view class="service">
			联系停车场客服
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id:'0',
						name: '微信',
						icon: 'wechat-pay-fill',
						color: '#22ac38',
					},
					{
						id:'1',
						name: '支付宝',
						icon: 'alipay-fill',
						color: '#1677ff',
					},
				],
				value:0
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>

	.main{
		height: 200px;
		padding: 20px 23px;
		background: linear-gradient(#1F55FF,#27ABFF);
		
		.park-name{
		    line-height: 20px;
			color: rgba(255, 255, 255, 100);
			font-size: 20px;
			position: relative;
			text{
				margin-left: 25px;
			}
			img{
				width: 20px;
				height: 20px;
				margin-right: 8px;
				position: absolute;
				
			}
		}
		.infos{
			margin-top: 28px;
			color: #fff;
			font-size: 24px;
			.item{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20px;
			}
		}
	}

  .details{
	  width: 89.3%;
	  padding: 20px 20px 5px;
	  margin: auto;
	  border-radius: 12px;
	  background-color: #fff;
	  position: relative;
	  top: -30px;
	  left: 0;
	  right: 0;
	  .detail-item{
		  display: flex;
		  justify-content: space-between;
		  margin-bottom: 15px;
		  .title{
			  color: #86898c;
		  }
	  }
  }
  .payment{
	  width: 89.3%;
	  margin:0 auto ;
	  .methods{
		  border-radius: 8px;
		  background-color: #fff;
		  margin-top: 12px;
		  padding: 0px 12px;
		  .recharge-radio {
		
		  	.recharge-radio-item {
		  		display: flex;
		  		align-items: center;
				
		  	}
		  
		  	.recharge-radio-name {
		  		margin-left: 8px;
		  	}
		  }
		  /deep/.u-radio-group {
		  	width: 100%;
		  }
		  /deep/.u-radio {
		  	position: relative;
		  }
		  
		  /deep/.u-radio__icon-wrap {
		  	position: absolute;
		  	right: 0;
		  }
	  }
	  
  }
  .u-btn{
  		  width: 89.3%;
  		  background-color: #0051db;
  		  border-radius: 12px;
  		  color: #fff;
  		  margin-top: 20px;
  }
  .service{
  		color: rgba(0, 90, 217, 100);
  		font-size: 16px;
  		text-align: center;
  		
		position: absolute;
		bottom:20px;
		left: 0;
	    right: 0;
		
		
  }
</style>