JP-ChargeTeam51/pages/parking/request.vue

<template>
	<view>
		<u-navbar title="请求进场"back-icon-name="close" back-icon-size="30" :is-back="false" ></u-navbar>
		<view class="success">
			<u-icon name="chenggong" custom-prefix="custom-icon" size="180" color="#00B962"></u-icon>
			<view class="title" >进场成功</view>
		</view>
		<view class="infos">
			<view class="info-item">
				<view class="title">
					临牌
				</view>
				<view class="content">
					{{detail.carNum}}
				</view>
			</view>
			<view class="info-item">
				<view class="title">
					注意事项
				</view>
				<view class="content attention">
					此车牌为无车牌进场系统随机分配
				</view>
			</view>
			<view class="info-item">
				<view class="title">
					入场大门
				</view>
				<view class="content">
					{{detail.inChannel}}
				</view>
			</view>
			<view class="info-item">
				<view class="title">
					停车场组
				</view>
				<view class="content">
					{{detail.parkName}}
				</view>
			</view>
			<view class="info-item">
				<view class="title">
					入门时间
				</view>
				<view class="content">
					{{detail.inParkingTime}}
				</view>
			</view>
			<view class="info-item">
				<view class="title">
					注意事项
				</view>
				<view class="content attention">
					进出门请用相同微信号扫码
				</view>
			</view>
			
		</view>
		<view class="service" @click="openModal">
			联系停车场客服
		</view>
		<u-modal v-model="show" @confirm="confirmPhone" :confirm-text="confirmText" confirm-color="#606266" :show-cancel-button="true" ref="uModal"
				:asyncClose="true" :title="title" :content="content" :content-style="{fontSize: '24px',color: '#101010'}"></u-modal>
		
	</view>
</template>


<script>
	import * as API from '@/apis/parking.js'
	import * as newsApi from '@/apis/news.js'
	
	export default {
		data() {
			return {
				id:'',
				detail:{},
				content:'',
					confirmText:"拨打电话",
				title:"客服电话",
				show:false,
			}
		},onLoad(op) {
			this.detail=this.carhelp.get("parkingregistration_submit")
			
			 this.getPhone()
		},	methods: {
			
			getPhone(){
				newsApi.findConfigureByKey({
					key:'consumerPhone'
				}).then((res) => {
									
					this.content = res.data.value;
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			openModal() {
				 
				this.show = true;
			},
			confirmPhone(){
				
				
				this.show = false;
				uni.makePhoneCall({
					phoneNumber:this.content //仅为示例
				});
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	     
		
	}
	.success {
		text-align: center;
		padding: 36px 0;
	
		.title {
			
			font-size: 20px;
			margin-top: 20px;
		}
	}
.infos{
	padding: 0 20px;
	.info-item{
		display: flex;
		justify-content: space-between;
		margin-bottom: 12px;
		.title{
			width: 25vw;
			color: #9C8689;
			font-size: 16px;
			
		}
		.content{
			width: 64vw;
			color: rgba(51, 51, 51, 100);
			font-size: 16px;
			text-align: right;
			
		}
		.attention{
			color: #ff4a2d;
		}
	}
}
.service{
	    
  		color: rgba(0, 90, 217, 100);
  		font-size: 16px;
  		text-align: center;
  		
  		    bottom: 0px;
  		    left: 0;
  		    right: 0;
  		    height: 40px;
  		    background-color: #fff;
		    position: fixed;
		
  }

</style>