JP-ChargeTeam51/pages/searchPile/chargeProcess/dcCharging.vue

<template>
	<view style="background-color: #fff; padding-bottom: 40px;">
		<u-navbar title="启动中">
		</u-navbar>
		<view class="iconfont tittle-font">
			&#xe616;
		</view>
		
		<view class="progress-bar">
				<u-circle-progress width="440" active-color="green" :percent="30" border-width="50">
					<view class="u-progress-content">
						<view class="u-progress-dot"></view>
						<text class='u-progress-info'>0.0%</text>
					</view>
					<view class="bot"></view>
				</u-circle-progress>
		</view>
		<view class="starting">
			启动中...</view>
		<view class="timer">
			00:00:00
		</view>
		<view class="charged">
			已充电0度
		</view>
		<view class="cost">
			<view class="">
				<view class="cost-top">
					0元
				</view>
				<view class="cost-bottom">
					实时费用
				</view>
			</view>
			<view class="line"></view>
			<view class="">
				<view class="cost-top">
					50.00元
					<view class="iconfont cost-font">&#xe633;</view>
				</view>
				<view class="cost-bottom">
					账户余额
				</view>
			</view>
		</view>
		<view class="power">
			<view>
				<view class="power-num">
					0.0v
				</view>
				<view class="power-text">
					电压
				</view>
			</view>
			<view class="line"></view>
			<view>
				<view class="power-num">
					0.00kW
				</view>
				<view class="power-text">
					功率
				</view>
			</view>
			<view class="line"></view>
			<view>
				<view class="power-num">
					0.0A
				</view>
				<view class="power-text">
					电流
				</view>
			</view>
		</view>
	     <view class="info">
	     	<view class="info-name">
	     		充电车辆
	     	</view>
			<view class="info-text">
				鄂D999999
			</view>
	     </view>
		 <view class="info">
		 	<view class="info-name">
		 		站点
		 	</view>
		 			<view class="info-text">
		 				荆鹏软件充电站 / A000152
		 			</view>
		 </view>
		 <view class="info">
		 	<view class="info-name">
		 		占位费说明
		 	</view>
		 			<view class="info-text">
		 				停止充电后30分钟即开始收取占位费用，1元/分钟
		 			</view>
		 </view>
		<view class="bottom">
			 <u-button type="primary" shape="circle">结束充电</u-button>
		</view>
	</view>
	
</template>


<script>
	import * as API from '@/apis/chargeProcess.js'

	export default {
		data() {
			return {
				id:"",
				detail: {},
				
			}
		},
		onLoad(op) {
			if (op.id) {
				this.id = op.id;
				this.getInfo()
			}


		},
		onReady() {
			
		},
		methods: {
			
			getInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.chargingDetail({
					id:this.id
				}).then((res) => {
					this.user = res.data
					this.isReady = true;
					uni.hideLoading()

				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			
			submit() {
	
				if(this.moneyActiveClass==-1&&!this.otherNum){
					this.submitForm.chargeStrategy=0;
					this.submitForm.amount=0
				}else{
					this.submitForm.chargeStrategy=2;
					if(this.otherNum){
						this.submitForm.amount=this.otherNum
					}else{
						this.submitForm.amount=this.moneyActiveClass
					}
				}
				
				if (!this.submitForm.channelNo) {
					uni.showToast({
						title: '请先选择充电通道'
					})
					return
				}
				
			 
				if (this.submitForm.chargeStrategy == 0 && this.user.balance < 5) {
					uni.showModal({
						title: '支付',
						content: '余额不足5元无法开启充满自停，是否充值？',
						success: res => {
							if (res.confirm) {
								//付钱  改为组件
								this.gotoUrl("pages/user/finance/recharge");

							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {

					this.confirm()
				}


			},
		}

	}
</script>
<style>
	page{
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.tittle-font {
		font-size: 24px;
		position: fixed;
		top: 12px;
		right: 16px;
		z-index: 99999;

	}
	.bot{
		width: 220px;
		height: 220px;
		border: 2px #00b962 dotted;
		border-radius: 999px;
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		margin: auto;
	}
.progress-bar{
	
	
	
	/deep/.u-circle-progress{
		margin-left: 23.3% !important;
		position: relative;
	}
	
	.u-progress-content {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		
		.u-progress-dot {
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background-color: #fb9126;
		}
		
		.u-progress-info {
			font-size: 36px;
			padding-left: 16rpx;
			letter-spacing: 2rpx;
			color: rgba(51, 51, 51, 100);
		}
		/deep/.u-progress-dot[data-v-05b104e0]{
			display: none;
		}
		/deep/.u-circle-progress[data-v-cab6fc66]{
			margin: 30px ;
		}
	
}

.starting{
	height: 22px;
	color: rgba(0, 185, 98, 100);
	font-size: 16px;
	text-align: center;
}
.timer{
	height: 43px;
	color: rgba(51, 51, 51, 100);
	font-size: 36px;
	text-align: center;
	margin-top: 40px;
}
.charged{
	height: 20px;
	color: rgba(153, 153, 153, 100);
	font-size: 14px;
	text-align: center;
	margin-top: 4px;
}
.cost{
	// width: 50%;
	padding: 0 90px;
	margin-top: 16px;
	display: flex;
	justify-content: space-between;
	.cost-top{
		line-height: 33px;
		text-align: center;
		font-size: 24px;
		position: relative;
		.cost-font{
			position: absolute;
			top: 0;right: -25px;
			color: #ff6200;
			font-size: 24px
		}
	}
	.cost-bottom{
		line-height: 20px;
		color: #999999;text-align: center;
	}
}
.line{
	width: 0;
	height:36px;
	border: 1px solid rgba(237, 237, 237, 100);
	margin-top: 10px;
	background-color: #ededed;
}

.power{
	display: flex;
	justify-content: space-around;
	padding: 0 55px;
	margin-top: 40px;
	.power-num{
		height: 27px;
		color: rgba(51, 51, 51, 100);
		font-size: 20px;
		text-align: center;
	}
	.power-text{
		height: 20px;
		color: rgba(153, 153, 153, 100);
		font-size: 14px;
		text-align: center;
	}
}

.info{
	display: flex;
	justify-content: space-between;
	margin: 0 40px;
	// height: 48px;
	line-height: 48px;
	background-color: rgba(255, 255, 255, 100);
	color: rgba(16, 16, 16, 100);
	border-bottom: 1px solid #ededed;
	.info-text{
		line-height: 23px;
		padding: 13px 0 12px;
		width: 200px;
		text-align: right;
	}
}

.bottom{
	  width: 343px;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  margin: auto;
	  .u-btn--primary[data-v-3bf2dba7]{
		  background-color: #9be6c2;
	  }
}
</style>