调整

pages/index/index.vue

@@ -1,148 +1,253 @@
-<template>
-	<view>
-		<u-navbar title="充电中" :is-back="false">
-			<view class="slot-wrap">
-				<view class="navbar-left"></view>				
-				<view class="navbar-right">
-					<u-icon name="shuaxin" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>
-				</view>
-			</view>
-		</u-navbar>
-		<view class="chargeInfo">
-			<view class="chargeInfo-text">
-				<p>桩名：打赏打赏安舒打赏</p>
-				<p>桩号：121564</p>
-			</view>
-			<view class="chargeInfo-btn">
-				通道:5
-			</view>
-		</view>
-		<view class="chargeImg">
-			<img src="/static/img/charge1.png" alt="">
-			<!-- <img src="/static/img/charge2.png" alt=""> -->
-		</view>
-		<view class="chargeTime">
-			<p>剩余时长</p>
-			<u-line-progress active-color="#2979ff" :percent="70"></u-line-progress>
-		</view>
-		<view class="chargeData">
-			<view class="chargeData-item">
-				<u-icon name="jiagebaohu" custom-prefix="custom-icon" color="#1677ff" size="56"></u-icon>
-				<h2>0.25元</h2>
-				<p>消费金额</p>
-			</view>
-			<view class="chargeData-item">
-				<u-icon name="dian" custom-prefix="custom-icon" color="#1677ff" size="56"></u-icon>
-				<h2>100</h2>
-				<p>充电功率</p>
-			</view>
-		</view>
-		<view class="chargeBtn">
-			<view class="chargeBtn-item">退款</view>
-			<view class="chargeBtn-item">费用说明</view>
-		</view>
-		<Tabbar :current="0" ></Tabbar>
- 	</view>
-</template>
-
-<script>
-	import Tabbar from '@/components/Tabbar.vue'
-	
-	export default {
-		data() {
+<template>
+	<view>
+		<u-navbar title="充电中" :is-back="false">
+			<view class="slot-wrap">
+				<view class="navbar-left"></view>
+				<view class="navbar-right" @click="f5()" style="    color: #1d7cff;">
+					<u-icon name="shuaxin" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>刷新
+				</view>
+			</view>
+		</u-navbar>
+
+		<swiper class="swiper" style="    height: 650px;">
+			<swiper-item>
+				<view class="chargeInfo">
+					<view class="chargeInfo-text">
+						<p>桩名：打赏打赏安舒打赏</p>
+						<p>桩号：121564</p>
+					</view>
+					<view class="chargeInfo-btn">
+						通道:5
+					</view>
+				</view>
+				<view class="chargeImg">
+					<img src="/static/img/charge1.png" alt="">
+					<!-- <img src="/static/img/charge2.png" alt=""> -->
+				</view>
+
+				<view class="chargeTime">
+					<p>剩余时长</p>
+					<u-line-progress active-color="#ececec"  height="48" :percent="percent">
+						<div style="     
+						border-radius: 100px;
+						 min-width: 70px;  width: 100%;background-color: rgba(51, 136, 255, 100);height: 8px;">
+							&nbsp;
+							<div class="" style="float: right;
+										
+										padding: 0 8px;
+										border-radius: 100px;
+										background-color: rgba(51, 136, 255, 100);
+										color: rgb(255, 255, 255);
+										font-size: 12px;
+										text-align: center;
+										font-family: -apple-system;
+										top: -5px;
+										position: relative;							
+							">{{percent}}%</div>
+						</div>
+
+
+					</u-line-progress>
+				</view>
+				<view class="chargeData">
+					<view class="chargeData-item">
+						<u-icon name="jiagebaohu" custom-prefix="custom-icon" color="#1677ff" size="56"></u-icon>
+						<h2>0.25元</h2>
+						<p>消费金额</p>
+					</view>
+					<view class="chargeData-item">
+						<u-icon name="dian" custom-prefix="custom-icon" color="#1677ff" size="56"></u-icon>
+						<h2>100</h2>
+						<p>充电功率</p>
+					</view>
+				</view>
+				<view class="chargeBtn">
+					<view class="chargeBtn-item" @click="returnMoney()">退款</view>
+					<view class="chargeBtn-item" @click="showTips()">费用说明</view>
+				</view>
+			</swiper-item>
+
+			<swiper-item>
+				<view class="chargeInfo">
+					<view class="chargeInfo-text">
+						<p>桩名：打赏打赏安舒打赏</p>
+						<p>桩号：121564</p>
+					</view>
+					<view class="chargeInfo-btn">
+						通道:5
+					</view>
+				</view>
+				<view class="chargeImg">
+					<img src="/static/img/charge1.png" alt="">
+					<!-- <img src="/static/img/charge2.png" alt=""> -->
+				</view>
+				<view class="chargeTime">
+					<p>剩余时长</p>
+					<u-line-progress active-color="#2979ff" :percent="70"></u-line-progress>
+				</view>
+				<view class="chargeData">
+					<view class="chargeData-item">
+						<u-icon name="jiagebaohu" custom-prefix="custom-icon" color="#1677ff" size="56"></u-icon>
+						<h2>0.25元</h2>
+						<p>消费金额</p>
+					</view>
+					<view class="chargeData-item">
+						<u-icon name="dian" custom-prefix="custom-icon" color="#1677ff" size="56"></u-icon>
+						<h2>100</h2>
+						<p>充电功率</p>
+					</view>
+				</view>
+				<view class="chargeBtn">
+					<view class="chargeBtn-item" @click="returnMoney()">退款</view>
+					<view class="chargeBtn-item" @click="showTips()">费用说明</view>
+				</view>
+			</swiper-item>
+		</swiper>
+		<Tabbar :current="0"></Tabbar>
+	</view>
+</template>
+
+<script>
+	import Tabbar from '@/components/Tabbar.vue'
+	import * as API from '@/apis/index.js'
+
+	export default {
+		data() {
 			return {
-				 
-			}
-		},
-		methods: {
-
-		},components: {
-			Tabbar
-			
-		},
-	}
-</script>
-
-<style lang="scss" scoped>
-	.slot-wrap {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		flex: 1;
-	}
-	.navbar-right {
-		display: flex;
-		margin-right: 20rpx;
-		align-items: center;
-	}
-	.chargeInfo{
-		padding: 10px;
-		position: relative;
-		.chargeInfo-text{
-			p{
-				color:#777;
-				margin-bottom: 5px;
-			}
-		}
-		.chargeInfo-btn{
-			background-color: #E0EDFF;
-			width: 72px;
-			height: 32px;
-			border-radius:16px 0 0 16px;
-			line-height: 32px;
-			text-align: center;
-			position: absolute;
-			right: 0;
-			top:16px;
-			color:#1677FF;
-		}
-	}
-	.chargeImg{
-		height: 300px;
-		width: 300px;
-		margin: 10px auto 0;
-		img{
-			height: 100%;
-			width: 100%;
-		}
-	}
-	.chargeTime{
-		padding: 20px 30px;
-		text-align: center;
-		p{
-			color:#999;
-			margin-bottom: 10px;
-		}
-	}
-	.chargeBtn{
-		display: flex;
-		justify-content: space-around;
-		padding: 20px 50px;
-		.chargeBtn-item{
-			width: 80px;
-			height: 32px;
-			background-color: #1677FF;
-			line-height: 32px;
-			color:#fff;
-			text-align: center;
-			border-radius: 16px;
-		}
-
-	}
-	.chargeData{
-		display: flex;
-		justify-content: space-around;
-		.chargeData-item{
-			text-align: center;
-			h2{
-				font-size: 24px;
-				font-weight: normal;
-				color:#1677FF;
-				margin: 10px 0;
-			}
-			p{
-				color:#999;
-			}
-		}
-	}
+				percent:0,
+				detail: {
+
+				},
+				detailIng: {
+
+				},
+			}
+		},
+		methods: {
+			showTips() {},
+			returnMoney() {
+
+			},
+			f5() {
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+				var data = {
+					companyId: this.companyId,
+
+				};
+				API.getCompany(data).then((res) => {
+					this.companyInfo = res.data
+					this.getCompanyDetails()
+				}).catch(error => {
+					uni.showToast({
+						title: error
+					})
+				})
+			},
+		},
+		components: {
+			Tabbar
+
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.slot-wrap {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex: 1;
+	}
+
+	.navbar-right {
+		display: flex;
+		margin-right: 20rpx;
+		align-items: center;
+	}
+
+	.chargeInfo {
+		padding: 10px;
+		position: relative;
+
+		.chargeInfo-text {
+			p {
+				color: #777;
+				margin-bottom: 5px;
+			}
+		}
+
+		.chargeInfo-btn {
+			background-color: #E0EDFF;
+			width: 72px;
+			height: 32px;
+			border-radius: 16px 0 0 16px;
+			line-height: 32px;
+			text-align: center;
+			position: absolute;
+			right: 0;
+			top: 16px;
+			color: #1677FF;
+		}
+	}
+
+	.chargeImg {
+		height: 300px;
+		width: 300px;
+		margin: 10px auto 0;
+
+		img {
+			height: 100%;
+			width: 100%;
+		}
+	}
+
+	.chargeTime {
+		padding: 20px 30px;
+		text-align: center;
+
+		p {
+			color: #999;
+			margin-bottom: 10px;
+		}
+	}
+
+	.chargeBtn {
+		display: flex;
+		justify-content: space-around;
+		padding: 20px 50px;
+
+		.chargeBtn-item {
+			width: 80px;
+			height: 32px;
+			background-color: #1677FF;
+			line-height: 32px;
+			color: #fff;
+			text-align: center;
+			border-radius: 16px;
+		}
+
+	}
+
+	.chargeData {
+		display: flex;
+		justify-content: space-around;
+
+		.chargeData-item {
+			text-align: center;
+
+			h2 {
+				font-size: 24px;
+				font-weight: normal;
+				color: #1677FF;
+				margin: 10px 0;
+			}
+
+			p {
+				color: #999;
+			}
+		}
+	}
 </style>