调整

components/u-navbar/u-navbar.vue

@@ -0,0 +1,343 @@
+<template>
+	<view class="">
+		<view class="u-navbar" v-if="show" :style="[navbarStyle]" :class="{ 'u-navbar-fixed': isFixed, 'u-border-bottom': borderBottom }">
+			<view class="u-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
+			<view class="u-navbar-inner" :style="[navbarInnerStyle]">
+				<view class="u-back-wrap" v-if="isBack" @tap="goBack">
+					<view class="u-icon-wrap">
+						<u-icon :name="backIconName" :color="backIconColor" :size="backIconSize"></u-icon>
+					</view>
+					<view class="u-icon-wrap u-back-text u-line-1" v-if="backText" :style="[backTextStyle]">{{ backText }}</view>
+				</view>
+				<view class="u-navbar-content-title" v-if="title" :style="[titleStyle]">
+					<view
+					    class="u-title u-line-1"
+					    :style="{
+							color: titleColor,
+							fontSize: titleSize + 'rpx',
+							fontWeight: titleBold ? 'bold' : 'normal'
+						}">
+						{{ title }}
+					</view>
+				</view>
+				<view class="u-slot-content">
+					<slot></slot>
+				</view>
+				<view class="u-slot-right">
+					<slot name="right"></slot>
+				</view>
+			</view>
+		</view>
+		<!-- 解决fixed定位后导航栏塌陷的问题 -->
+		<view    class="u-navbar-placeholder" v-if="show&&isFixed && !immersive" :style="{ width: '100%', height: Number(navbarHeight) + statusBarHeight + 'px' }"></view>
+		
+	
+	
+	</view>
+</template>
+
+<script>
+	// 获取系统状态栏的高度
+	let systemInfo = uni.getSystemInfoSync();
+	let menuButtonInfo = {};
+	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
+	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
+	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+	// #endif
+	/**
+	 * navbar 自定义导航栏
+	 * @description 此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uniapp自带的导航栏。
+	 * @tutorial https://www.uviewui.com/components/navbar.html
+	 * @property {String Number} height 导航栏高度(不包括状态栏高度在内，内部自动加上)，注意这里的单位是px（默认44）
+	 * @property {String} back-icon-color 左边返回图标的颜色（默认#606266）
+	 * @property {String} back-icon-name 左边返回图标的名称，只能为uView自带的图标（默认arrow-left）
+	 * @property {String Number} back-icon-size 左边返回图标的大小，单位rpx（默认30）
+	 * @property {String} back-text 返回图标右边的辅助提示文字
+	 * @property {Object} back-text-style 返回图标右边的辅助提示文字的样式，对象形式（默认{ color: '#606266' }）
+	 * @property {String} title 导航栏标题，如设置为空字符，将会隐藏标题占位区域
+	 * @property {String Number} title-width 导航栏标题的最大宽度，内容超出会以省略号隐藏，单位rpx（默认250）
+	 * @property {String} title-color 标题的颜色（默认#606266）
+	 * @property {String Number} title-size 导航栏标题字体大小，单位rpx（默认32）
+	 * @property {Function} custom-back 自定义返回逻辑方法
+	 * @property {String Number} z-index 固定在顶部时的z-index值（默认980）
+	 * @property {Boolean} is-back 是否显示导航栏左边返回图标和辅助文字（默认true）
+	 * @property {Object} background 导航栏背景设置，见官网说明（默认{ background: '#ffffff' }）
+	 * @property {Boolean} is-fixed 导航栏是否固定在顶部（默认true）
+	 * @property {Boolean} immersive 沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效（默认false）
+	 * @property {Boolean} border-bottom 导航栏底部是否显示下边框，如定义了较深的背景颜色，可取消此值（默认true）
+	 * @example <u-navbar back-text="返回" title="剑未配妥，出门已是江湖"></u-navbar>
+	 */
+	export default {
+		name: "u-navbar",
+		props: {
+			show:{
+				type: Boolean,
+				default:true
+			},
+			// 导航栏高度，单位px，非rpx
+			height: {
+				type: [String, Number],
+				default: ''
+			},
+			// 返回箭头的颜色
+			backIconColor: {
+				type: String,
+				default: '#606266'
+			},
+			// 左边返回的图标
+			backIconName: {
+				type: String,
+				default: 'nav-back'
+			},
+			// 左边返回图标的大小，rpx
+			backIconSize: {
+				type: [String, Number],
+				default: '44'
+			},
+			// 返回的文字提示
+			backText: {
+				type: String,
+				default: ''
+			},
+			// 返回的文字的 样式
+			backTextStyle: {
+				type: Object,
+				default () {
+					return {
+						color: '#606266'
+					}
+				}
+			},
+			// 导航栏标题
+			title: {
+				type: String,
+				default: ''
+			},
+			// 标题的宽度，如果需要自定义右侧内容，且右侧内容很多时，可能需要减少这个宽度，单位rpx
+			titleWidth: {
+				type: [String, Number],
+				default: '250'
+			},
+			// 标题的颜色
+			titleColor: {
+				type: String,
+				default: '#606266'
+			},
+			// 标题字体是否加粗
+			titleBold: {
+				type: Boolean,
+				default: false
+			},
+			// 标题的字体大小
+			titleSize: {
+				type: [String, Number],
+				default: 32
+			},
+			isBack: {
+				type: [Boolean, String],
+				default: true
+			},
+			// 对象形式，因为用户可能定义一个纯色，或者线性渐变的颜色
+			background: {
+				type: Object,
+				default () {
+					return {
+						background: '#ffffff'
+					}
+				}
+			},
+			// 导航栏是否固定在顶部
+			isFixed: {
+				type: Boolean,
+				default: true
+			},
+			// 是否沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效
+			immersive: {
+				type: Boolean,
+				default: false
+			},
+			// 是否显示导航栏的下边框
+			borderBottom: {
+				type: Boolean,
+				default: true
+			},
+			zIndex: {
+				type: [String, Number],
+				default: ''
+			},
+			// 自定义返回逻辑
+			customBack: {
+				type: Function,
+				default: null
+			}
+		},
+		data() {
+			return {
+				
+				menuButtonInfo: menuButtonInfo,
+				statusBarHeight: systemInfo.statusBarHeight
+			};
+		},
+		computed: {
+			// 导航栏内部盒子的样式
+			navbarInnerStyle() {
+				let style = {};
+				// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
+				style.height = this.navbarHeight + 'px';
+				// // 如果是各家小程序，导航栏内部的宽度需要减少右边胶囊的宽度
+				// #ifdef MP
+				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
+				style.marginRight = rightButtonWidth + 'px';
+				// #endif
+				return style;
+			},
+			// 整个导航栏的样式
+			navbarStyle() {
+				let style = {};
+				style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.navbar;
+				// 合并用户传递的背景色对象
+				Object.assign(style, this.background);
+				return style;
+			},
+			// 导航中间的标题的样式
+			titleStyle() {
+				let style = {};
+				// #ifndef MP
+				style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
+				style.right = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
+				// #endif
+				// #ifdef MP
+				// 此处是为了让标题显示区域即使在小程序有右侧胶囊的情况下也能处于屏幕的中间，是通过绝对定位实现的
+				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
+				style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
+				style.right = rightButtonWidth - (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + rightButtonWidth +
+					'px';
+				// #endif
+				style.width = uni.upx2px(this.titleWidth) + 'px';
+				return style;
+			},
+			// 转换字符数值为真正的数值
+			navbarHeight() {
+				// #ifdef APP-PLUS || H5
+				return this.height ? this.height : 44;
+				// #endif
+				// #ifdef MP
+				// 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
+				// 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
+				// return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
+				let height = systemInfo.platform == 'ios' ? 44 : 48;
+				return this.height ? this.height : height;
+				// #endif
+			}
+		},
+		created() {
+			
+		},
+		methods: {
+			alerttipsCk(){
+				if(this.descriptionHtml){
+					this.descriptionShow2=true;
+				}
+			},
+			navberBack(){
+				const pages=getCurrentPages()
+				if(pages.length===1){
+					history.back()
+				}else{
+					uni.navigateBack();
+				}
+			},
+			goBack() {
+					//console.log("修复bug， 刷新后不能返回问题")
+			
+				// 如果自定义了点击返回按钮的函数，则执行，否则执行返回逻辑
+				if (typeof this.customBack === 'function') {
+					// 在微信，支付宝等环境(H5正常)，会导致父组件定义的customBack()函数体中的this变成子组件的this
+					// 通过bind()方法，绑定父组件的this，让this.customBack()的this为父组件的上下文
+					this.customBack.bind(this.$u.$parent.call(this))();
+				} else {
+					this.navberBack();
+				}
+			}
+		}
+	};
+</script>
+
+<style scoped lang="scss">
+	// @import "../../libs/css/style.components.scss";
+	.u-line-1{
+		    overflow: unset;
+	}
+	.u-navbar {
+		width: 100%;
+	}
+
+	.u-navbar-fixed {
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		z-index: 991;
+	}
+
+	.u-status-bar {
+		width: 100%;
+	}
+
+	.u-navbar-inner {
+		// @include vue-flex;
+		display: flex;
+		justify-content: space-between;
+		position: relative;
+		align-items: center;
+	}
+
+	.u-back-wrap {
+		display: flex;
+		align-items: center;
+		flex: 1;
+		flex-grow: 0;
+		padding: 14rpx 14rpx 14rpx 24rpx;
+	}
+
+	.u-back-text {
+		padding-left: 4rpx;
+		font-size: 30rpx;
+	}
+
+	.u-navbar-content-title {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 60rpx;
+		text-align: center;
+		flex-shrink: 0;
+	}
+
+	.u-navbar-centent-slot {
+		flex: 1;
+	}
+
+	.u-title {
+		line-height: 60rpx;
+		font-size: 32rpx;
+		flex: 1;
+	}
+
+	.u-navbar-right {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+	}
+
+	.u-slot-content {
+		flex: 1;
+		display: flex;
+		align-items: center;
+	}
+</style>

pages.json

@@ -1,6 +1,8 @@
 {
 	"easycom": {
-		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
+		"ujp-(.*)": "components/u-$1/u-$1.vue"
+		
 	},
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages	
 		{

pages/charge/chargeDetails.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
-		<u-navbar title="充电详情">
-		</u-navbar>
+		<ujp-navbar title="充电详情">
+		</ujp-navbar>
 		<view class="chargeDetails">
 			<view class="chargeDetails-item">
 				<span>金额</span>

pages/charge/chargeList.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
-		<u-navbar title="充电记录">
-		</u-navbar>
+		<ujp-navbar title="充电记录">
+		</ujp-navbar>
 		<view class="chargeScreen">
 			<view class="chargeScreen-item">
 				<p>

pages/charge/index.vue

@@ -1,12 +1,12 @@
 <template>
 	<view>
-		<u-navbar title="充电">
+		<ujp-navbar title="充电">
 			<view class="slot-wrap">
 				<view class="navbar-left"></view>
 				<!-- 				<view class="navbar-right"><u-icon name="iconfontscan" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon></view>
  -->
 			</view>
-		</u-navbar>
+		</ujp-navbar>
 		<view class="charge" style="padding-bottom: 0px;">
 			<view class="chargeInfo">
 				<view class="chargeInfo-row">
@@ -56,12 +56,12 @@
 
 			</view>
 		</view>
-		<view class="charge">
-			<view class="chargeInfo" style="margin-bottom: 10px;">
-				<p><span style="color:red">*</span>充电{{listTypeIndex==0?'时长':'金额'}} <span style="color:#1677FF;margin-left:10px ">{{getListName()}}</span></p>
-			</view>
-			
-			 
+		<view class="charge">
+			<view class="chargeInfo" style="margin-bottom: 10px;">
+				<p><span style="color:red">*</span>充电{{listTypeIndex==0?'时长':'金额'}} <span style="color:#1677FF;margin-left:10px ">{{getListName()}}</span></p>
+			</view>
+			
+			 
 			
 			<u-subsection :list="listType" mode="subsection" active-color="#3786f4" :current="0"
 				@change="changeListType"></u-subsection>
@@ -97,11 +97,11 @@
 				</template>
 
 
-			</view>
-			<view class="chargeInfo" style="margin-bottom: 10px;">
-				<p v-show="listTypeIndex==0"><span style="color:red">*</span>按时间付费：需要先充值，从余额中扣费，适用会员用户。</p>
-				<p v-show="listTypeIndex==1"><span style="color:red">*</span>按金额付费：无需充值，先付费后使用，未使用完的费用原路退回。</p>
-				
+			</view>
+			<view class="chargeInfo" style="margin-bottom: 10px;">
+				<p v-show="listTypeIndex==0"><span style="color:red">*</span>按时间付费：需要先充值，从余额中扣费，适用会员用户。</p>
+				<p v-show="listTypeIndex==1"><span style="color:red">*</span>按金额付费：无需充值，先付费后使用，未使用完的费用原路退回。</p>
+				
 			</view>
 		</view>
 
@@ -173,7 +173,7 @@
 			</div>
 
 			<p class="showmodel" style="color: red;" v-if="listTypeIndex==0&&submitForm.hour==0">充满自停模式，设备充满后会自动停止计费，剩余费用会原路返还</p>
-			<p class="showmodel" style="color: red;" v-if="listTypeIndex==1">按金额付费：无需充值，先付费后使用，未使用完的费用原路退回。</p>
+			<p class="showmodel" style="color: red;" v-if="listTypeIndex==1">按金额付费：无需充值，先付费后使用，未使用完的费用原路退回。</p>
 			
 		</u-modal>
 		<u-modal v-model="showmodal2" :show-cancel-button="true" title="余额不足" confirm-text="前往充值"
@@ -185,9 +185,9 @@
 
 <script>
 	import * as API from '@/apis/index.js'
-	import * as Pay from '@/apis/weixin.js'
-	import {
-		wxPayJs
+	import * as Pay from '@/apis/weixin.js'
+	import {
+		wxPayJs
 	} from '@/utils/wxpay'
 	export default {
 		data() {
@@ -195,9 +195,9 @@
 				showmodal: false,
 				show: false,
 				otherNum_f: '',
-				moneyList_f: [],
+				moneyList_f: [],
 				showmodal2: false,
-				moneyActiveClass_f: "-1",
+				moneyActiveClass_f: "-1",
 				fee:"",
 				id: "",
 				showPriceList: false,
@@ -219,8 +219,8 @@
 				],
 				list: [
 
-				],
-				recordId:"",
+				],
+				recordId:"",
 			
 				moneylist: [{
 						id: '0.5',
@@ -320,33 +320,33 @@
 
 
 		},
-		methods: {
-			wxpay(){
-				uni.showLoading({
-					title: "加载中",
-					mask: true,
-				})
-				Pay.wxpay2({
-					recordId:this.recordId,
-					amount:this.fee
-				}).then((response) => {
-					if(!response.result){		
-						uni.showToast({
-							title:  response.message
-						})
-						return
-					}
-					var data = response.data
-					uni.hideLoading()
-					console.log("Pay+"+new Date().getTime())		
-					wxPayJs(data);
-						
-				}).catch(error => {
-					uni.showToast({
-					
-						title: error
-					})	
-				})
+		methods: {
+			wxpay(){
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+				Pay.wxpay2({
+					recordId:this.recordId,
+					amount:this.fee
+				}).then((response) => {
+					if(!response.result){		
+						uni.showToast({
+							title:  response.message
+						})
+						return
+					}
+					var data = response.data
+					uni.hideLoading()
+					console.log("Pay+"+new Date().getTime())		
+					wxPayJs(data);
+						
+				}).catch(error => {
+					uni.showToast({
+					
+						title: error
+					})	
+				})
 			},
 			getListName() {
 				var list = [];
@@ -483,9 +483,9 @@
 				//paytype:'YE',
 
 				API.startCharging(submitForm).then((res) => {
-					
+					
 					if(res.data.status=="5"){
-						uni.hideLoading()
+						uni.hideLoading()
 						
 						
 						this.recordId=res.data.recordId;
@@ -494,14 +494,14 @@
 					
 						
 						this.fee=(fee-this.user.availableBalance).toFixed(2);
-						//this.otherNum_f=this.fee;
-						if(bl){
-							this.wxpay();
-						}else{
-							this.showmodal2=true;
+						//this.otherNum_f=this.fee;
+						if(bl){
+							this.wxpay();
+						}else{
+							this.showmodal2=true;
 						}
 					}else{
-						this.gotoUrl("pages/index/index");
+						this.gotoUrl("pages/index/index");
 					}
 					// uni.showModal({
 					//     title: '提示',
@@ -582,10 +582,10 @@
 						}
 					});
 				} else {
-					if( this.listTypeIndex==0){
-						this.showmodel = true;
-					}else{
-						this.confirm(true)
+					if( this.listTypeIndex==0){
+						this.showmodel = true;
+					}else{
+						this.confirm(true)
 					}
 					
 				}
@@ -766,91 +766,91 @@
 		right: 0;
 		bottom: 0;
 		background-color: #fff;
-	}
-	
-	
-		.recharge {
-			padding: 16px;
-			// padding-bottom: 80px;
-			.title {
-			
-				font-size: 16px;
-	position: relative;
-			}
-	
-			p {
-				color: #666;
-				margin-top: 4px;
-			}
-	
-			.self-stop.active {
-	
-				background-color: #EFFFF7;
-				border-color: #00B962;
-				color: #00B962;
-	
-			}
-	
-			.rechargeMain {
-				display: flex;
-				flex-wrap: wrap;
-				// justify-content: space-between;
-				margin-top: 12px;
-				margin-bottom: 5px;
-	
-				.recharge-item {
-					.u-input {
-						text-align: center !important;
-					}
-					width: 31%;
-					border: 1px solid #e3e3e3;
-					padding: 10px 0;
-					border-radius: 4px;
-					text-align: center;
-					margin-bottom: 10px;
-					position: relative;
-						margin-left: 5px;
-					
-					font-size: 16px;
-				}
-	
-				.active {
-					background-color: #EFFFF7;
-					border-color: #00B962;
-					color: #00B962;
-				}
-			}
-	
-			.self-stop {
-				width: 105px;
-				height: 48px;
-				line-height: 48px;
-				border-radius: 4px;
-				color: #101010;
-			
-				font-size: 16px;
-				text-align: center;
-				font-family: Arial;
-				border: 1px solid rgba(227, 227, 227, 100);
-				margin-top: 12px;
-			}
-		}
-	
-		.recharge-input {
-			margin-top: 8px;
-			margin-bottom: 32px;
-		}
-	
-		.recharge-radio {
-			margin-top: 10px;
-	
-			.recharge-radio-item {
-				display: flex;
-				align-items: center;
-			}
-	
-			.recharge-radio-name {
-				margin-left: 8px;
-			}
+	}
+	
+	
+		.recharge {
+			padding: 16px;
+			// padding-bottom: 80px;
+			.title {
+			
+				font-size: 16px;
+	position: relative;
+			}
+	
+			p {
+				color: #666;
+				margin-top: 4px;
+			}
+	
+			.self-stop.active {
+	
+				background-color: #EFFFF7;
+				border-color: #00B962;
+				color: #00B962;
+	
+			}
+	
+			.rechargeMain {
+				display: flex;
+				flex-wrap: wrap;
+				// justify-content: space-between;
+				margin-top: 12px;
+				margin-bottom: 5px;
+	
+				.recharge-item {
+					.u-input {
+						text-align: center !important;
+					}
+					width: 31%;
+					border: 1px solid #e3e3e3;
+					padding: 10px 0;
+					border-radius: 4px;
+					text-align: center;
+					margin-bottom: 10px;
+					position: relative;
+						margin-left: 5px;
+					
+					font-size: 16px;
+				}
+	
+				.active {
+					background-color: #EFFFF7;
+					border-color: #00B962;
+					color: #00B962;
+				}
+			}
+	
+			.self-stop {
+				width: 105px;
+				height: 48px;
+				line-height: 48px;
+				border-radius: 4px;
+				color: #101010;
+			
+				font-size: 16px;
+				text-align: center;
+				font-family: Arial;
+				border: 1px solid rgba(227, 227, 227, 100);
+				margin-top: 12px;
+			}
+		}
+	
+		.recharge-input {
+			margin-top: 8px;
+			margin-bottom: 32px;
 		}
-</style>
+	
+		.recharge-radio {
+			margin-top: 10px;
+	
+			.recharge-radio-item {
+				display: flex;
+				align-items: center;
+			}
+	
+			.recharge-radio-name {
+				margin-left: 8px;
+			}
+		}
+</style>

pages/charge/switchCharge.vue

@@ -1,66 +1,66 @@
 <template>
 	<view>
-		<u-navbar title="选择充电桩" :autoBack="false" :customBack="customBack">
+		<ujp-navbar title="选择充电桩" :autoBack="false" :customBack="customBack">
 
 			<!-- <view class="slot-wrap">
 				<view class="navbar-left"></view>
 				<view class="navbar-right" @click="selectBtn"><span>确定选择</span></view>
 			</view> -->
-		</u-navbar>
-		
-		<view class="chargeListStation" v-show="stationShow">
-			<view style="text-align: center;margin-top: 100px" v-if="!stationList.length">
-			
-				<img src="@/assets/img/blankpage.png">
-				<p v-if="isPoint">暂无充电站</p>
-				<p  v-else >暂无充电站</p>
-				<p><span style="color: #1677ff;" @click="getPoint()">重新定位？</span></p>
-			</view>
-			<view class="chargeHead" v-if="stationList.length" >已为您查询附近2公里内的充电站</view>
-			
-			<template v-for="(item,i) in stationList">
-				
-				<view class="chargeList-item " @click="stationIdSelect=item.id,stationShow=false,getList()" :class="{
-				
-			}" :key="i">
-		
-					<view class="chargeList-item-row">
-						<u-icon name="qichexiangguan-chongdianzhan" custom-prefix="custom-icon" color="#1677ff"
-							size="40"></u-icon>
-						<p>名称</p>
-						<span> {{item.name}}</span>
-					</view>
-					<view class="chargeList-item-row" v-if="false">
-						<u-icon name="shoujichongdian" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>
-						<p>空闲</p>
-						<span>{{item.availableNumOfChannel}}</span>
-						
-					</view>
-				<!-- 	<view class="chargeList-item-row">
-						<u-icon name="juli" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>
-						<p>位置</p>
-						
-					</view> -->
-						
-				<view class="chargeList-item-row">
-					<u-icon name="dizhi" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>
-					<p>地址</p>
-					<span>{{item.address}}</span>
-				</view>
-				</view>
-			</template>
-		
-		</view>
+		</ujp-navbar>
 		
-		<view class="chargeList" v-show="!stationShow">
-			<view style="text-align: center;margin-top: 100px" v-if="!list.length">
-			
-				<img src="@/assets/img/blankpage.png">
-				<p>暂无充电桩</p>
-				<p><span style="color: #1677ff;" @click="getPoint()">查询附近站点</span></p>
-			</view>
-			
-			<view class="chargeHead" v-if="list.length" >{{stationName}}<span @click="getPoint()">查询附近站点</span></view>
+		<view class="chargeListStation" v-show="stationShow">
+			<view style="text-align: center;margin-top: 100px" v-if="!stationList.length">
+			
+				<img src="@/assets/img/blankpage.png">
+				<p v-if="isPoint">暂无充电站</p>
+				<p  v-else >暂无充电站</p>
+				<p><span style="color: #1677ff;" @click="getPoint()">重新定位？</span></p>
+			</view>
+			<view class="chargeHead" v-if="stationList.length" >已为您查询附近2公里内的充电站</view>
+			
+			<template v-for="(item,i) in stationList">
+				
+				<view class="chargeList-item " @click="stationIdSelect=item.id,stationShow=false,getList()" :class="{
+				
+			}" :key="i">
+		
+					<view class="chargeList-item-row">
+						<u-icon name="qichexiangguan-chongdianzhan" custom-prefix="custom-icon" color="#1677ff"
+							size="40"></u-icon>
+						<p>名称</p>
+						<span> {{item.name}}</span>
+					</view>
+					<view class="chargeList-item-row" v-if="false">
+						<u-icon name="shoujichongdian" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>
+						<p>空闲</p>
+						<span>{{item.availableNumOfChannel}}</span>
+						
+					</view>
+				<!-- 	<view class="chargeList-item-row">
+						<u-icon name="juli" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>
+						<p>位置</p>
+						
+					</view> -->
+						
+				<view class="chargeList-item-row">
+					<u-icon name="dizhi" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>
+					<p>地址</p>
+					<span>{{item.address}}</span>
+				</view>
+				</view>
+			</template>
+		
+		</view>
+		
+		<view class="chargeList" v-show="!stationShow">
+			<view style="text-align: center;margin-top: 100px" v-if="!list.length">
+			
+				<img src="@/assets/img/blankpage.png">
+				<p>暂无充电桩</p>
+				<p><span style="color: #1677ff;" @click="getPoint()">查询附近站点</span></p>
+			</view>
+			
+			<view class="chargeHead" v-if="list.length" >{{stationName}}<span @click="getPoint()">查询附近站点</span></view>
 			
 			<template v-for="(item,i) in list">
 				<view class="chargeList-item " @click="select=item.id,selectBtn()" :class="{
@@ -75,10 +75,10 @@
 					</view>
 					<view class="chargeList-item-row">
 						<u-icon name="shoujichongdian" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>
-						<p>通道数</p>
-						<span>{{item.numOfChannel}}</span>
+						<p>通道数</p>
+						<span>{{item.numOfChannel}}</span>
 						<p>空闲</p>
-						<span>{{item.availableNumOfChannel}}</span>
+						<span>{{item.availableNumOfChannel}}</span>
 						
 					</view>
 					<!-- 	<view class="chargeList-item-row">
@@ -106,18 +106,18 @@
 			return {
 				list: [
 
-				],
+				],
 				stationList:[],
-				stationId: '',
-				stationIdSelect: '',
+				stationId: '',
+				stationIdSelect: '',
 				stationShow: false,
 				select: '',
 				selectBtnId: '',
-				index: false,
-				stationName:'',
-				isReady:false,
-				isPoint:true,
-				longitude: 0,
+				index: false,
+				stationName:'',
+				isReady:false,
+				isPoint:true,
+				longitude: 0,
 				latitude: 0,
 			}
 		},
@@ -132,76 +132,76 @@
 			}
 			if (op.index) {
 				this.index = true;
-			}
-			WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
-				// //(res)
-				this.isReady=true;
-				
-			}).catch(error => {
-				//(res)
+			}
+			WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
+				// //(res)
+				this.isReady=true;
+				
+			}).catch(error => {
+				//(res)
 			})
 		},
-		methods: {
-			getPoint() {
-				uni.showToast({
-					title: "定位中...请打开定位设置",
-					icon: "none"
-				})
-				WxJsApi.getLocation().then((res) => {
-					this.isPoint=true;
-					this.latitude = parseFloat(res.latitude);
-					this.longitude = parseFloat(res.longitude);
-				
-			
-					if (res.errMsg != 'getLocation:ok') {
-						uni.showToast({
-							title: res
-						})
-					} else {
-						this.searchStationData()
-					}
-				}).catch(error => {
-					this.isPoint=false;
-					uni.showToast({
-						title: error,
-						icon: "none"
-					})
-				})
-			},
-			searchStationData(){
-				uni.showLoading({
-					title: "加载中",
-					mask: true,
-				})
-				
-				var data={
-					longitude: this.longitude,
-					latitude: this.latitude,
-					pageSize:50,
-					raidus:2,
-				}
-				API.chargingStationData(data).then((res) => {
-					this.stationList = res.data.data;
-					this.stationShow = true;
-					uni.hideLoading()
-				
-				}).catch(error => {
-					uni.showToast({
-				
-						title: error
-					})
-				})
+		methods: {
+			getPoint() {
+				uni.showToast({
+					title: "定位中...请打开定位设置",
+					icon: "none"
+				})
+				WxJsApi.getLocation().then((res) => {
+					this.isPoint=true;
+					this.latitude = parseFloat(res.latitude);
+					this.longitude = parseFloat(res.longitude);
+				
+			
+					if (res.errMsg != 'getLocation:ok') {
+						uni.showToast({
+							title: res
+						})
+					} else {
+						this.searchStationData()
+					}
+				}).catch(error => {
+					this.isPoint=false;
+					uni.showToast({
+						title: error,
+						icon: "none"
+					})
+				})
 			},
-			customBack() {
+			searchStationData(){
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
 				
-				if(this.stationShow&&this.stationId){
-					this.stationShow=false
-					this.stationIdSelect=stationId
-					this.getList()
-				}else{
-					uni.redirectTo({
-						url: '/pages/charge/index'
-					})
+				var data={
+					longitude: this.longitude,
+					latitude: this.latitude,
+					pageSize:50,
+					raidus:2,
+				}
+				API.chargingStationData(data).then((res) => {
+					this.stationList = res.data.data;
+					this.stationShow = true;
+					uni.hideLoading()
+				
+				}).catch(error => {
+					uni.showToast({
+				
+						title: error
+					})
+				})
+			},
+			customBack() {
+				
+				if(this.stationShow&&this.stationId){
+					this.stationShow=false
+					this.stationIdSelect=stationId
+					this.getList()
+				}else{
+					uni.redirectTo({
+						url: '/pages/charge/index'
+					})
 				}
 				
 			},
@@ -227,9 +227,9 @@
 				};
 				API.chargingDeviceData(data).then((res) => {
 					console.log(res)
-					this.list =res.data.data;
-					if(this.list.length){
-						this.stationName=this.list[0].stationName
+					this.list =res.data.data;
+					if(this.list.length){
+						this.stationName=this.list[0].stationName
 					}
 					this.recordsTotal = res.data.recordsTotal
 					uni.hideLoading()
@@ -243,12 +243,12 @@
 			}
 		},
 		onReady() {
-			if(this.stationId){
-				this.stationIdSelect=this.stationId
-				this.getList()
-			}else{
-				this.stationShow = true;
-				this.getPoint()
+			if(this.stationId){
+				this.stationIdSelect=this.stationId
+				this.getList()
+			}else{
+				this.stationShow = true;
+				this.getPoint()
 			}
 			
 		},
@@ -272,14 +272,14 @@
 		margin-right: 20rpx;
 		align-items: center;
 		color: #1677ff;
-	}
-	.chargeHead{
-		padding:0 15px ;
-		margin-top: 10px;
-		span{
-			float: right;
-			color: #1677ff;
-		}
+	}
+	.chargeHead{
+		padding:0 15px ;
+		margin-top: 10px;
+		span{
+			float: right;
+			color: #1677ff;
+		}
 	}
 
 	.chargeList-item {
@@ -307,4 +307,4 @@
 	.chargeList-item.active {
 		border: 1px solid #1677ff;
 	}
-</style>
+</style>

pages/index/index.vue

@@ -1,13 +1,13 @@
 <template>
 	<view>
-		<u-navbar title="充电中" :is-back="false">
+		<ujp-navbar title="充电中" :is-back="false">
 			<view class="slot-wrap">
 				<view class="navbar-left"></view>
 				<view class="navbar-right" @click="f5(true)" style="    color: #1d7cff;">
 					<u-icon name="shuaxin" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>刷新
 				</view>
 			</view>
-		</u-navbar>
+		</ujp-navbar>
 		<view class="chargeInfoNull" v-if="list.length==0">
 			<img height="80" width="80" src="@/assets/img/ddc.png" alt="">
 			<p>暂无充电车辆</p>
@@ -100,11 +100,11 @@
 			<p v-if="showitem.length==0">当前为免费充电桩</p>
 			<p v-for="(item,i) in showitem" class="showmodel" :key="i">{{item.minPower}}W-{{item.maxPower}}W
 				<span>{{item.price}}元每小时</span></p>
-
-
-		<p style="    padding: 15px;" v-if="roundingMinute!=null&&roundingMinute!=-1">超过{{roundingMinute}}分钟，按1小时记，不足{{roundingMinute}}分钟，不计费</p>
-			<p style="    padding: 15px;" v-if="showitem.length==0">无费用说明或为免费充电模式</p>
-	
+
+
+		<p style="    padding: 15px;" v-if="roundingMinute!=null&&roundingMinute!=-1">超过{{roundingMinute}}分钟，按1小时记，不足{{roundingMinute}}分钟，不计费</p>
+			<p style="    padding: 15px;" v-if="showitem.length==0">无费用说明或为免费充电模式</p>
+	
 
 		</u-modal>
 		<Tabbar :current="0" ref="tabbarMain"  :id="id"></Tabbar>
@@ -130,7 +130,7 @@
 				list: [],
 				showtime: {},
 				isReady: false,
-				isCharge: false,
+				isCharge: false,
 				roundingMinute:-1,
 				detail: {
 
@@ -149,11 +149,11 @@
 			}
 			
 			if (op.id) {
-				this.id = op.id;
+				this.id = op.id;
 				this.carhelp.set("qr-default-id",op.id);
-			}else{
-				//用于支付后返回系统  -- 点金计划
-				this.id =this.carhelp.get("qr-default-id");
+			}else{
+				//用于支付后返回系统  -- 点金计划
+				this.id =this.carhelp.get("qr-default-id");
 			}
 			uni.showLoading({
 				title: "加载中",
@@ -168,7 +168,7 @@
 				clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
 			}
 		},
-		methods: {
+		methods: {
 			
 			changeswiper(e) {
 				this.current = e.detail.current;
@@ -213,7 +213,7 @@
 						var ms = item.estimateMinute * 60 - second
 						if (ms > 0) {
 							var Hour = parseInt(Math.floor(ms / (60 * 60)));
-							var Fen = parseInt(Math.floor(ms % (60 * 60) / 60));
+							var Fen = parseInt(Math.floor(ms % (60 * 60) / 60));
 							
 							obj.value = (Hour > 9 ? "" : "0") + Hour + ":" + (Fen > 9 ? "" : "0") + Fen
 						}
@@ -239,12 +239,12 @@
 				return obj;
 			},
 			showTips(item) {
-				this.showmodel = true;
-				this.roundingMinute=item.roundingMinute;
-				if(this.roundingMinute==null){
-					this.roundingMinute=5;
+				this.showmodel = true;
+				this.roundingMinute=item.roundingMinute;
+				if(this.roundingMinute==null){
+					this.roundingMinute=5;
 				}
-				this.showitem = item.chargingPriceList;
+				this.showitem = item.chargingPriceList;
 				
 			},
 			returnMoney(item) {
@@ -301,14 +301,14 @@
 
 					this.list = res.data.chargingRecordList;
 					this.isCharge = res.data.isCharge;
-					this.isReady = true;
+					this.isReady = true;
 					
-					if (!this.isCharge && this.k != 1) {
-						if( this.id){
-							this.gotoUrl("pages/charge/index?id=" + this.id)
-						}else{
-								uni.hideLoading()							
-						}
+					if (!this.isCharge && this.k != 1) {
+						if( this.id){
+							this.gotoUrl("pages/charge/index?id=" + this.id)
+						}else{
+								uni.hideLoading()							
+						}
 						return
 					} else {
 						uni.hideLoading()
@@ -365,9 +365,9 @@
 		onShow() {
 			if (this.isReady) {
 				this.f5(true)
-			}
-			if(this.$refs.tabbarMain){
-				this.$refs.tabbarMain.setcount(0);
+			}
+			if(this.$refs.tabbarMain){
+				this.$refs.tabbarMain.setcount(0);
 			}
 		}
 	}
@@ -526,4 +526,4 @@
 			}
 		}
 	}
-</style>
+</style>

pages/index/none.vue

@@ -1,13 +1,13 @@
 <template>
 	<view>
-		<u-navbar title="充电中" :is-back="false">
+		<ujp-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>
+		</ujp-navbar>
 		<view class="chargeInfo">
  			<p>暂无充电车辆</p>
 		</view>

pages/user/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<u-navbar title="个人中心" :is-back="false"  :background="background" title-color="#fff" :border-bottom="false"></u-navbar>
+		<ujp-navbar title="个人中心" :is-back="false"  :background="background" title-color="#fff" :border-bottom="false"></ujp-navbar>
 		<view class="userHead">
 			<view class="userHead-top">
 				<view class="userHead-data">

pages/user/recharge.vue

@@ -1,10 +1,10 @@
 <template>
 	<view>
-		<u-navbar title="充值">
+		<ujp-navbar title="充值">
 			<view class="slot-wrap">
 				<span class="navBtn "  @click="toRefundList">退余额</span>
 			</view>
-		</u-navbar>
+		</ujp-navbar>
 		<view class="recharge">
 			<view class="recharge-text">
 				<p>账户余额（元）</p>

pages/user/rechargeDeatils.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
-		<u-navbar title="充值详情">
-		</u-navbar>
+		<ujp-navbar title="充值详情">
+		</ujp-navbar>
 		<view class="chargeDetails">
 			<view class="chargeDetails-item">
 				<span>金额</span>

pages/user/rechargeList-test.vue

@@ -1,7 +1,7 @@
 
 <template>
 	<view>
-		<u-navbar title="充值记录"></u-navbar>
+		<ujp-navbar title="充值记录"></ujp-navbar>
 		<view class="rechargeTime" @click="show = true">
 			<u-picker mode="time" v-model="show" :params="params" @confirm="confirmTime" @cancel="cancelTime"></u-picker>
 			<span>{{month}}月</span>

pages/user/rechargeList.vue

@@ -1,11 +1,11 @@
 
 <template>
 	<view>
-		<u-navbar title="充值记录">
+		<ujp-navbar title="充值记录">
 			<view class="slot-wrap">
 				<span class="navBtn "  @click="toRefundList">退余额</span>
 			</view>
-		</u-navbar>
+		</ujp-navbar>
 		<view class="rechargeTime" @click="show = true">
 			<u-picker mode="time" v-model="show" :params="params" 
 			:default-time="dateMonth"

pages/user/refundList.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<u-navbar title="退费记录"></u-navbar>
+		<ujp-navbar title="退费记录"></ujp-navbar>
 		<view class="balance">
 			<view class="balanceHead">
 				<view class="payPrice">