jp-charge/pages/index/index.vue

<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 {
				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>