新增页面

App.vue

@@ -27,7 +27,7 @@
 	//
 	/*每个页面公共css */
 	//@import 'static/css/style.css';
-	
+	@import '@/iconfont/iconfont.css';
 	@import '@/assets/font/iconfont.css';
 	.uni-icon-success-no-circle:before {
 	    content: "" !important ;

iconfont/iconfont.css

@@ -0,0 +1,225 @@
+@font-face {
+ 	font-family: 'iconfont';
+ 	/* project id 3394761 */
+ 	src:
+ 		url('http://at.alicdn.com/t/font_3394761_gttmqpiz6ov.woff2?t=1653637499858') format('woff2'),
+ 		url('http://at.alicdn.com/t/font_3394761_gttmqpiz6ov.woff?t=1653637499858') format('woff'),
+ 		url('http://at.alicdn.com/t/font_3394761_gttmqpiz6ov.ttf?t=1653637499858') format('truetype');
+ }
+
+
+ .iconfont {
+ 	font-family: "iconfont" !important;
+ 	font-size: 16px;
+ 	font-style: normal;
+ 	-webkit-font-smoothing: antialiased;
+ 	-moz-osx-font-smoothing: grayscale;
+ }
+
+ .icon-chongzhi:before {
+ 	content: "\e633";
+ }
+
+ .icon-arrow-right-s-line:before {
+ 	content: "\e600";
+ }
+
+ .icon-arrow-drop-right-line:before {
+ 	content: "\e601";
+ }
+
+ .icon-arrow-left-s-line:before {
+ 	content: "\e602";
+ }
+
+ .icon-arrow-drop-up-fill:before {
+ 	content: "\e603";
+ }
+
+ .icon-arrow-drop-up-line:before {
+ 	content: "\e604";
+ }
+
+ .icon-arrow-up-s-fill:before {
+ 	content: "\e605";
+ }
+
+ .icon-charging-pile-fill:before {
+ 	content: "\e606";
+ }
+
+ .icon-arrow-up-s-line:before {
+ 	content: "\e607";
+ }
+
+ .icon-camera-fill:before {
+ 	content: "\e608";
+ }
+
+ .icon-close-line:before {
+ 	content: "\e609";
+ }
+
+ .icon-charging-pile-line:before {
+ 	content: "\e60a";
+ }
+
+ .icon-close-circle-fill:before {
+ 	content: "\e60b";
+ }
+
+ .icon-compass-3-fill:before {
+ 	content: "\e60c";
+ }
+
+ .icon-customer-service-2-line:before {
+ 	content: "\e60d";
+ }
+
+ .icon-compass-discover-line:before {
+ 	content: "\e60e";
+ }
+
+ .icon-error-warning-line:before {
+ 	content: "\e60f";
+ }
+
+ .icon-home-3-fill:before {
+ 	content: "\e610";
+ }
+
+ .icon-feedback-fill:before {
+ 	content: "\e611";
+ }
+
+ .icon-eye-fill:before {
+ 	content: "\e612";
+ }
+
+ .icon-list-check-2:before {
+ 	content: "\e613";
+ }
+
+ .icon-parking-box-fill:before {
+ 	content: "\e614";
+ }
+
+ .icon-navigation-fill:before {
+ 	content: "\e615";
+ }
+
+ .icon-customer-service-fill:before {
+ 	content: "\e616";
+ }
+
+ .icon-information-fill:before {
+ 	content: "\e617";
+ }
+
+ .icon-plug-line:before {
+ 	content: "\e618";
+ }
+
+ .icon-home-3-line:before {
+ 	content: "\e619";
+ }
+
+ .icon-qr-scan-2-line:before {
+ 	content: "\e61a";
+ }
+
+ .icon-qr-scan-line:before {
+ 	content: "\e61b";
+ }
+
+ .icon-parking-box-line:before {
+ 	content: "\e61c";
+ }
+
+ .icon-question-line:before {
+ 	content: "\e61d";
+ }
+
+ .icon-question-fill:before {
+ 	content: "\e61e";
+ }
+
+ .icon-search-2-line:before {
+ 	content: "\e61f";
+ }
+
+ .icon-road-map-fill:before {
+ 	content: "\e620";
+ }
+
+ .icon-store-3-line:before {
+ 	content: "\e621";
+ }
+
+ .icon-road-map-line:before {
+ 	content: "\e622";
+ }
+
+ .icon-settings-4-fill:before {
+ 	content: "\e623";
+ }
+
+ .icon-user-2-fill:before {
+ 	content: "\e624";
+ }
+
+ .icon-todo-line:before {
+ 	content: "\e625";
+ }
+
+ .icon-todo-fill:before {
+ 	content: "\e626";
+ }
+
+ .icon-user-5-line:before {
+ 	content: "\e627";
+ }
+
+ .icon-user-5-fill:before {
+ 	content: "\e628";
+ }
+
+ .icon-wallet-3-line:before {
+ 	content: "\e629";
+ }
+
+ .icon-arrow-drop-down-fill:before {
+ 	content: "\e62a";
+ }
+
+ .icon-arrow-down-s-fill:before {
+ 	content: "\e62b";
+ }
+
+ .icon-arrow-down-s-line:before {
+ 	content: "\e62c";
+ }
+
+ .icon-wechat-pay-fill:before {
+ 	content: "\e62d";
+ }
+
+ .icon-arrow-drop-down-line:before {
+ 	content: "\e62e";
+ }
+
+ .icon-arrow-drop-left-fill:before {
+ 	content: "\e62f";
+ }
+
+ .icon-alipay-fill:before {
+ 	content: "\e630";
+ }
+
+ .icon-arrow-drop-left-line:before {
+ 	content: "\e631";
+ }
+
+ .icon-arrow-drop-right-fill:before {
+ 	content: "\e632";
+ }

pages.json

@@ -222,7 +222,41 @@
 			
 				//"navigationStyle": "custom" // 隐藏系统导航栏
 			}
+		},
+		{
+			"name":"电桩管理",
+			"path": "pagesFinance/user/pileManagement",
+			"style": {
+			
+				//"navigationStyle": "custom" // 隐藏系统导航栏
+			}
+		},
+		{
+			"name":"充电枪设置",
+			"path": "pagesFinance/user/myPile",
+			"style": {
+			
+				//"navigationStyle": "custom" // 隐藏系统导航栏
+			}
+		},
+		{
+			"name":"我被预约",
+			"path": "pagesFinance/preengaged/preengaged",
+			"style": {
+			
+				//"navigationStyle": "custom" // 隐藏系统导航栏
+			}
+		},
+		{
+			"name":"预约单详情",
+			"path": "pagesFinance/preengaged/preengagedListDetails",
+			"style": {
+			
+				//"navigationStyle": "custom" // 隐藏系统导航栏
+			}
 		}
+		
+		
 
     ],
 	"globalStyle": {

pagesFinance/preengaged/preengaged.vue

@@ -0,0 +1,520 @@
+<template>
+	<view>
+		<u-navbar title="我被预约">
+			<view class="screen">筛选</view>
+		</u-navbar>
+		<view class="reservation-items">
+			<view class="station-name">
+				预约30分钟后充电
+				<view class="toBe-confirmed btn">
+					待确认
+				</view>
+			</view>
+			<view class="details-items">
+				<view class="items">
+					<view class="items-name">
+						预留截止时间
+
+					</view>
+					<view class="items-content">
+						2022-05-31 09:30:00
+						
+					</view>
+				</view>
+				<view class="items">
+					<view class="items-name">
+					
+						预计充电时长
+					
+					</view>
+					<view class="items-content">
+						
+						6小时
+						
+					</view>
+				</view>
+				<view class="items">
+					<view class="items-name">
+						
+						预约站点
+						
+					</view>
+					<view class="items-content">
+						荆鹏充电站
+					</view>
+				</view>
+				<view class="items">
+					<view class="items-name">
+						
+						预约桩号
+					</view>
+					<view class="items-content">
+						1号快充桩
+					</view>
+				</view>
+				<view class="items">
+					<view class="items-name">
+						充电桩类型
+					</view>
+					<view class="items-content">
+						交流充电桩
+					</view>
+				</view>
+				
+			</view>
+			<view class="button">
+					<u-button class="affirm" shape="circle">确认</u-button>
+					<u-button class="contact" shape="circle">联系他</u-button>
+				<u-button class="refuse" shape="circle">拒绝</u-button>
+
+			</view>
+		</view>
+
+		<view class="reservation-items">
+			<view class="station-name">
+				预约30分钟后充电
+				<view class="confirmed btn">
+					已确认
+				</view>
+			</view>
+			<view class="details-items">
+				<view class="items">
+					<view class="items-name">
+						预留截止时间
+			
+					</view>
+					<view class="items-content">
+						2022-05-31 09:30:00
+						
+					</view>
+				</view>
+				<view class="items">
+					<view class="items-name">
+					
+						预计充电时长
+					
+					</view>
+					<view class="items-content">
+						
+						6小时
+						
+					</view>
+				</view>
+				<view class="items">
+					<view class="items-name">
+						
+						预约站点
+						
+					</view>
+					<view class="items-content">
+						荆鹏充电站
+					</view>
+				</view>
+				<view class="items">
+					<view class="items-name">
+						
+						预约桩号
+					</view>
+					<view class="items-content">
+						1号快充桩
+					</view>
+				</view>
+				<view class="items">
+					<view class="items-name">
+						充电桩类型
+					</view>
+					<view class="items-content">
+						交流充电桩
+					</view>
+				</view>
+				
+			</view>
+			<view class="button">
+
+				<u-button class="contact" shape="circle">联系他</u-button>
+			
+			</view>
+		</view>
+
+
+
+		<view class="reservation-items">
+			<view class="station-name">
+				预约30分钟后充电
+				<view class="canceled btn">
+					已取消
+				</view>
+			</view>
+			<view class="details-items">
+							<view class="items">
+								<view class="items-name">
+									预留截止时间
+			
+								</view>
+								<view class="items-content">
+									2022-05-31 09:30:00
+									
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+								
+									预计充电时长
+								
+								</view>
+								<view class="items-content">
+									
+									6小时
+									
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									
+									预约站点
+									
+								</view>
+								<view class="items-content">
+									荆鹏充电站
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									
+									预约桩号
+								</view>
+								<view class="items-content">
+									1号快充桩
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									充电桩类型
+								</view>
+								<view class="items-content">
+									交流充电桩
+								</view>
+							</view>
+							
+						</view>
+			<view class="button">
+
+				<u-button class="delete" shape="circle">删除</u-button>
+			</view>
+		</view>
+
+
+		<view class="reservation-items">
+			<view class="station-name">
+				预约30分钟后充电
+				<view class="have-expired btn">
+					已过期
+				</view>
+			</view>
+			<view class="details-items">
+							<view class="items">
+								<view class="items-name">
+									预留截止时间
+			
+								</view>
+								<view class="items-content">
+									2022-05-31 09:30:00
+									
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+								
+									预计充电时长
+								
+								</view>
+								<view class="items-content">
+									
+									6小时
+									
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									
+									预约站点
+									
+								</view>
+								<view class="items-content">
+									荆鹏充电站
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									
+									预约桩号
+								</view>
+								<view class="items-content">
+									1号快充桩
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									充电桩类型
+								</view>
+								<view class="items-content">
+									交流充电桩
+								</view>
+							</view>
+							
+						</view>
+			<view class="button">
+				<u-button class="contact" shape="circle">联系他</u-button>
+                 <u-button class="delete" shape="circle">删除</u-button>
+				
+			</view>
+		</view>
+		
+		<view class="reservation-items">
+			<view class="station-name">
+				预约30分钟后充电
+				<view class="finished btn">
+					已完成
+				</view>
+			</view>
+			<view class="details-items">
+							<view class="items">
+								<view class="items-name">
+									预留截止时间
+			
+								</view>
+								<view class="items-content">
+									2022-05-31 09:30:00
+									
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+								
+									预计充电时长
+								
+								</view>
+								<view class="items-content">
+									
+									6小时
+									
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									
+									预约站点
+									
+								</view>
+								<view class="items-content">
+									荆鹏充电站
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									
+									预约桩号
+								</view>
+								<view class="items-content">
+									1号快充桩
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									充电桩类型
+								</view>
+								<view class="items-content">
+									交流充电桩
+								</view>
+							</view>
+							
+						</view>
+			<view class="button">
+				<u-button class="contact" shape="circle">联系他</u-button>
+			</view>
+		</view>
+		
+		<view class="reservation-items">
+			<view class="station-name">
+				预约30分钟后充电
+				<view class="refused btn">
+					已拒绝
+				</view>
+			</view>
+			<view class="details-items">
+							<view class="items">
+								<view class="items-name">
+									预留截止时间
+			
+								</view>
+								<view class="items-content">
+									2022-05-31 09:30:00
+									
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+								
+									预计充电时长
+								
+								</view>
+								<view class="items-content">
+									
+									6小时
+									
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									
+									预约站点
+									
+								</view>
+								<view class="items-content">
+									荆鹏充电站
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									
+									预约桩号
+								</view>
+								<view class="items-content">
+									1号快充桩
+								</view>
+							</view>
+							<view class="items">
+								<view class="items-name">
+									充电桩类型
+								</view>
+								<view class="items-content">
+									交流充电桩
+								</view>
+							</view>
+							
+						</view>
+		
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+				
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page{
+		padding-bottom: 155px;
+	}
+	.screen {
+		margin-left: 85.3%;
+		color: rgba(119, 119, 119, 100);
+		font-size: 12px
+	}
+
+	.btn {
+		width: 60px;
+		height: 24px;
+		line-height: 20px;
+		border-radius: 4px;
+		background-color: rgba(255, 255, 255, 100);
+		font-size: 14px;
+		text-align: center;
+		float: right;
+		margin-right: 24px;
+		margin-top: 12px;
+	}
+// 待确认按钮
+	.toBe-confirmed {
+
+		color: rgba(78, 141, 246, 100);
+		border: 1px solid rgba(78, 141, 246, 100);
+
+	}
+// 已确认按钮
+	.confirmed {
+		border: 1px solid rgba(0, 185, 98, 100);
+		color: rgba(0, 185, 98, 100);
+
+	}
+// 已取消按钮
+	.canceled {
+		border: 1px solid rgba(153, 153, 153, 100);
+		color: rgba(153, 153, 153, 100);
+		;
+	}
+// 已过期/已完成按钮
+	.have-expired,.finished{
+		color: rgba(162, 169, 181, 100);
+		border: 1px solid rgba(162, 169, 181, 100);
+	}
+	
+	// 已拒绝
+	.refused{
+		color: rgba(255, 79, 63, 100);
+		border: 1px solid rgba(255, 79, 63, 100);
+	}
+	.reservation-items {
+		width: 100%;
+		background-color: #fff;
+		padding-left: 14px;
+		margin-bottom: 12px;
+
+		.station-name {
+			line-height: 48px;
+			color: rgba(16, 16, 16, 100);
+			font-size: 20px
+		}
+
+		.details-items {
+			border: 1px solid rgba(238, 242, 240, 100);
+			border-left: none;
+			padding-bottom: 13px;
+
+			.items {
+				display: flex;
+				justify-content: space-between;
+				padding: 12px 14px 0px 0;
+				line-height: 20px;
+			}
+
+		}
+
+		
+
+		.button {
+			height: 56px;
+			padding: 12px 0;
+
+			/deep/.u-btn {
+				height: 32px;
+				line-height: 32px;
+				background-color: rgba(255, 255, 255, 100);
+				color: rgba(153, 153, 153, 100);
+				font-size: 16px;
+				text-align: center;
+				float: right;
+				margin-right: 16px;
+			}
+      .refuse,.delete{
+		  color: #999999;
+	  }
+		.contact,.affirm{
+			color: #00b962;
+		}
+			
+
+			
+		}
+	}
+</style>

pagesFinance/preengaged/preengagedListDetails.vue

@@ -0,0 +1,247 @@
+<template>
+	<view>
+		<u-navbar title="预约单详情">
+
+		</u-navbar>
+		
+		<u-alert-tips type="warning"  :description="description"></u-alert-tips>
+		<view class="reverse-time">
+			<view class="time">
+				预留30分钟
+			</view>
+			<view class="details-item">
+				<view class="item">
+					<view class="item-name">
+						预约单号
+					</view>
+					<view class="item-content">
+						0000111122223333
+					</view>
+				</view>
+				<view class="item">
+					<view class="item-name">
+						预计开始充电
+					</view>
+					<view class="item-content">
+
+						2022-05-31 09:30:00
+
+					</view>
+				</view>
+				<view class="item">
+					<view class="item-name">
+						预计充电时长
+					</view>
+					<view class="item-content">
+						6小时
+					</view>
+				</view>
+			</view>
+
+		</view>
+		<!-- 充电桩详情 -->
+		<view class="charge-pile">
+			<view class="box">
+				<view class="name">
+					荆鹏软件园充电站/1号快充桩
+				</view>
+				<view class="address">
+					湖北省荆州市沙市区江津东路附155号
+				</view>
+				<text class="iconfont more">
+					&#xe600;
+				</text>
+			</view>
+
+			<view class="tel">
+				<view class="tel-text">
+					联系电话
+				</view>
+				<view class="tel-num">
+					李先生 15100001111
+					<text class="iconfont more2">
+						&#xe600;
+					</text>
+				</view>
+			</view>
+			<view class="details-item">
+				<view class="item">
+					<view class="item-name">
+						预约单生成时间
+
+					</view>
+					<view class="item-content">
+						2022-05-31 09:00:00
+
+					</view>
+				</view>
+				<view class="item">
+					<view class="item-name">
+
+						电费单价(kW/h)
+
+					</view>
+					<view class="item-content">
+						1.00元
+					</view>
+				</view>
+				<view class="item">
+					<view class="item-name">
+
+						充电服务费(kW/h)
+					</view>
+					<view class="item-content">
+						1.00元
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 底部按钮 -->
+		<view class="bottom">
+			<u-button shape='circle' class="refuse-btn">拒绝</u-button>
+			<u-button type="success" shape='circle'>确认</u-button>
+			
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				description: '等待桩主确认预约单，剩余时间04:59:59'
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page{
+		padding-bottom: 151px;
+	}
+	.tittle-font {
+
+		font-size: 24px;
+		position: fixed;
+		top: 12px;
+		right: 16px;
+		z-index: 99999;
+
+	}
+
+	/deep/.u-alert-desc {
+		width: 100vw;
+		text-align: center;
+		color: #ff5a00;
+	}
+
+	.reverse-time {
+		background-color: #fff;
+		padding: 36px 12px 16px 28px;
+
+		.time {
+			height: 36px;
+			color: rgba(0, 185, 98, 100);
+			font-size: 36px;
+			text-align: center;
+		}
+
+	}
+
+	.details-item {
+		margin-top: 32px;
+		padding-right: 16px;
+		padding-bottom: 12px;
+
+		.item {
+			display: flex;
+			justify-content: space-between;
+			margin-top: 8px;
+		}
+	}
+
+	// 充电桩详情
+	.charge-pile {
+		background-color: #fff;
+		margin-top: 12px;
+		padding: 0 0 12px 16px;
+
+		.box {
+			position: relative;
+			height: 66px;
+			padding: 12px 0;
+
+			.more {
+				position: absolute;
+				top: 19px;
+				right: 12px;
+				font-size: 24px;
+				color: #b3b3b3;
+			}
+		}
+
+		.name {
+			line-height: 18px;
+			color: rgba(16, 16, 16, 100);
+			font-size: 18px;
+			font-weight: 600;
+		}
+
+		.address {
+			line-height: 20px;
+			color: rgba(51, 51, 51, 100);
+			margin-top: 4px;
+		}
+
+		// 联系电话
+		.tel {
+			line-height: 48px;
+			display: flex;
+			justify-content: space-between;
+			border: 1px solid #eef2f0;
+			border-left: none;
+			position: relative;
+
+			.tel-num {
+				width: 50%;
+			}
+
+			.more2 {
+				display: inline-block;
+				font-size: 24px;
+				color: #b3b3b3;
+				height: 48px;
+				position: absolute;
+				top: 1px;
+				right: 12px;
+
+			}
+		}
+
+		.item {
+			margin-top: 20px;
+		}
+	}
+
+
+// 按钮
+.bottom{
+	width: 100%;
+	height: 56px;
+	position: fixed;
+	bottom: 0;
+	background-color: #fff;
+	display: flex;
+	.refuse-btn{
+		background-color: #DBDBDB;
+	}
+	.u-btn{
+		width: 44%;
+		height: 40px;
+		margin: auto;
+		font-size: 18px;
+		
+	}
+}
+</style>

pagesFinance/user/myPile.vue

@@ -0,0 +1,184 @@
+<template>
+	<view>
+		<u-navbar title="充电桩设置"></u-navbar>
+
+		<view class="options">
+
+			<u-cell-group>
+
+				<u-cell-item title="开放共享" :arrow="false">
+
+					<view class="">
+
+						<u-radio-group>
+
+							<u-radio @change="radioChange" v-for="(item, index) in list2" :key="index" :name="item.name"
+								:disabled="item.disabled" active-color="#00b962">
+
+								{{item.name}}
+
+							</u-radio>
+
+						</u-radio-group>
+
+					</view>
+
+
+
+				</u-cell-item>
+
+				<u-cell-item title="开放预约" :arrow="false">
+					<view class="">
+
+						<u-radio-group @change="radioGroupChange">
+
+							<u-radio @change="radioChange" v-for="(item, index) in list2" :key="index" :name="item.name"
+								:disabled="item.disabled" active-color="#00b962">
+
+								{{item.name}}
+
+							</u-radio>
+
+						</u-radio-group>
+
+					</view>
+				</u-cell-item>
+
+				<u-cell-item title="预约自动确认" :arrow="false">
+					<view class="">
+
+						<u-radio-group @change="radioGroupChange">
+
+							<u-radio @change="radioChange" v-for="(item, index) in list2" :key="index" :name="item.name"
+								:disabled="item.disabled" active-color="#00b962">
+
+								{{item.name}}
+
+							</u-radio>
+
+						</u-radio-group>
+
+					</view>
+				</u-cell-item>
+
+				<u-cell-item title="允许预约日期" value="周一/周二/周三/周四/周五/周六/周日"></u-cell-item>
+
+				<u-cell-item title="允许预约时段" value="10:00至12:00"></u-cell-item>
+
+				<u-cell-item :arrow="false" class="time-cell border-bottom" title="预约时长选项">
+
+
+
+
+				</u-cell-item>
+
+
+				<!-- <p>预约时长选项</p> -->
+
+
+				<view class="" style="padding-left: 16px;">
+					<u-radio-group @change="radioGroupChange" class="radio-padding" shape="square">
+
+						<u-radio @change="radioChange" v-for="(item, index) in timeList" :key="index" :name="item.name"
+							:disabled="item.disabled" active-color="#00b962">
+
+							{{item.name}}
+
+						</u-radio>
+					</u-radio-group>
+
+				</view>
+
+
+
+
+
+
+
+
+
+			</u-cell-group>
+
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list2: [{
+						name: "是"
+					},
+					{
+						name: "否"
+					}
+				],
+				timeList: [{
+						name: "10分钟"
+					},
+					{
+						name: "20分钟"
+					},
+					{
+						name: "30分钟"
+					}
+				]
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	/deep/.u-cell_title {
+
+		width: 30% !important;
+	}
+
+	/deep/ .u-cell {
+		line-height: 20px;
+		padding: 12px 20px 12px 0;
+		margin-left: 12px;
+	}
+
+	/deep/.u-radio-group {
+		justify-content: start !important;
+	}
+
+	/deep/.u-radio-group:last-child {
+
+		justify-content: space-between !important;
+		padding: 0 0 10px 0px;
+	}
+
+
+	/deep/.u-cell__value {
+
+		text-align: left;
+
+		color: #101010;
+
+		font-size: 16px
+	}
+
+	/deep/.u-radio-group {
+		line-height: 30px;
+		width: 100%;
+		display: flex;
+		justify-content: space-around;
+
+	}
+
+
+
+	/deep/.border-bottom:after {
+		border-bottom-width: 0px !important;
+
+
+
+	}
+</style>

pagesFinance/user/pileManagement.vue

@@ -0,0 +1,467 @@
+<template>
+	<view>
+		<u-navbar title="电桩管理">
+			<view class="delete">删除</view>
+		</u-navbar>
+		<view class="details">
+			<view class="name">
+				大润发顶楼停车场01号直流80kW
+			</view>
+			<view class="info">
+				<view class="info-text">
+					<p>2015国标 |<text class="dc-fast"> 直流快充 </text> | 80kW</p>
+					<p class="tag-items">
+						<view class="tag">
+							对外开放
+						</view>
+						<view class="tag">
+							可预约
+						</view>
+						<view class="tag">
+							设备在线
+						</view>
+					</p>
+				</view>
+				<view class="info-img">
+					<img src="../../assets/img/电桩管理.png" alt="">
+				</view>
+			</view>
+
+			<view class="station-address">
+				<img src="../../assets/img/Frame 201.png" alt="">
+				<view class="address-text">
+					湖北省荆州市沙市区江津东路附155号
+				</view>
+
+				<view class="navigation">
+					<view class="iconfont address-font">
+						&#xe60c;
+
+					</view>
+					<view class="view-map">导航</view>
+
+				</view>
+
+			</view>
+			
+			<u-cell-group  >
+				<u-cell-item title="联系人" :arrow="false" value="李先生 15500001111"></u-cell-item>
+				<u-cell-item  title="电价" :arrow="false" value="1.25元/度(12:00-14:00)"> </u-cell-item>
+				<view class="price-detail">
+					价格详情
+				</view>
+				<u-cell-item  title="停车费" :arrow="false" value="新能源车2小时停车费"></u-cell-item>
+			</u-cell-group>
+
+		</view>
+
+<!-- 充电枪选项 -->
+<view class="gun-options">
+	<u-tabs :list="list1" :is-scroll="false" :current="current" @change="change" bar-width="125" inactive-color="#777777" active-color="#101010"></u-tabs>
+	<view class="tab-equipment" v-show="current==0">
+		<view class="equipment-top">
+			<text class="name">1号充电枪</text>  
+			<text class="switch"><u-switch v-model="checked" size="40" active-color="#FF7300"></u-switch></text>
+			<text class="radio"> 	
+			开启共享</text>
+		</view>
+		<view class="state">
+			<view class="state-item">
+				工作状态：充电中 <text class="bot1"></text>
+			</view>
+			<view class="state-item">
+				工作状态：正常 <text class="bot1 bot2"></text>
+			</view>
+			<view class="state-item">
+				工作状态：故障 <text class="bot1 bot2"></text>
+			</view>
+			<view class="state-item">
+				工作状态：联网 <text class="bot1 bot2"></text>
+			</view>
+			<view class="iconfont more"><text class="set" >设置</text>&#xe600;</view>
+		</view>
+		
+	</view>	
+	
+	<view class="tab-equipment"  v-show="current==0">
+		<view class="equipment-top">
+			<text class="name">2号充电枪</text>  
+			<text class="switch"><u-switch v-model="checked" size="40" active-color="#FF7300"></u-switch></text>
+			<text class="radio"> 	
+			开启共享</text>
+		</view>
+		<view class="state">
+			<view class="state-item">
+				工作状态：空闲 <text class="bot1 bot2"></text>
+			</view>
+			<view class="state-item">
+				工作状态：正常 <text class="bot1 bot2"></text>
+			</view>
+			<view class="state-item">
+				工作状态：故障 <text class="bot1 bot2"></text>
+			</view>
+			<view class="state-item">
+				工作状态：联网 <text class="bot1 bot2"></text>
+			</view>
+			<view class="iconfont more"><text class="set" >设置</text>&#xe600;</view>
+		</view>
+		
+	</view>
+	<!-- 分润比例 -->
+	<view class="share" v-show="current==1">
+		<view class="title" >
+			<text class="line"></text>分润比列
+		</view>
+		<view class="item">
+			<view >
+				投资方
+			</view>
+			<view >
+				93% 
+			</view>
+		</view>
+		<view class="item">
+			<view >
+				平台收益
+			</view>
+			<view >
+				7%
+			</view>
+		</view>
+		
+	</view>
+	<!-- 设备信息 -->
+	<view class="equipment-info" v-show="current==2">
+	  <view class="title" >
+	  	<text class="line"></text>设备相关信息
+	  </view>
+	  <view class="item">
+		  <view class="">
+		  	设备型号
+		  </view>
+		  <view class="">
+		  	HCD0001-A
+		  </view>
+	  	
+	  </view>
+	  <view class="item">
+	  		  <view class="">
+	  		  	初次安装时间
+	  		  </view>
+	  		  <view class="">
+	  		  	2022-04-1
+	  		  </view>
+	  	
+	  </view>
+	  <view class="item">
+	  		  <view class="">
+	  		  	输出功率范围(瓦)
+	  		  </view>
+	  		  <view class="">
+	  		  	100-400
+	  		  </view>
+	  	
+	  </view>
+	
+
+	</view>
+	
+</view>
+
+
+	</view>
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				list1: [{
+					name: '设备列表'
+				}, {
+					name: '分润比例'
+				},{
+					name:'设备信息'
+				}],
+				list2: [{
+					name: '是'
+				}, {
+					name: '否'
+				}],
+				timeList:[{
+					name:"10分钟"
+				},
+				{
+					name:"20分钟"
+				},
+				{
+					name:"30分钟"
+				}],
+				current: 0,
+					checked: false,
+			}
+		},
+		methods: {
+			change(index) {
+				this.current = index;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	page{
+		padding-bottom: 233px;
+		background-color: #F6F8F8;
+		
+	}
+	.delete {
+		margin-left: 85.3%;
+		color: #cccccc;
+		font-size: 12px
+	}
+
+	.details {
+		width: 100%;
+		background-color: #fff;
+		padding: 16px 0 0px 16px;
+
+		.name {
+			height: 20px;
+			color: rgba(16, 16, 16, 100);
+			font-size: 20px;
+			font-weight: 600;
+		}
+
+		.info {
+			height: 75px;
+			line-height: 16px;
+			color: rgba(102, 102, 102, 100);
+			font-size: 16px;
+			margin-top: 12px;
+			display: flex;
+
+			// justify-content: space-between;
+			.dc-fast {
+
+				color: #CDC0FF;
+				margin: 0 4px;
+			}
+
+			.info-text {
+				width: 69%;
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+
+				.tag-items {
+					display: flex;
+					// justify-content: space-between;
+				}
+
+				.tag {
+					line-height: 26px;
+					border-radius: 4px;
+					background-color: rgba(255, 255, 255, 100);
+					color: rgba(119, 119, 119, 100);
+					text-align: center;
+					border: 1px solid rgba(119, 119, 119, 100);
+					padding: 0 4px;
+					margin-right: 8px;
+
+				}
+			}
+
+			.info-img {
+				// margin-left: 35px;
+			}
+		}
+
+		.station-address {
+			width: 100%;
+
+			margin-top: 17px;
+			position: relative;
+
+			img {
+				width: 100%;
+				height: 100%;
+			}
+
+			.address-text {
+				line-height: 40px;
+				position: absolute;
+				top: 0px;
+				left: 0;
+				font-size: 16px
+			}
+
+			.navigation {
+				position: absolute;
+				top: 0;
+				right: 28px;
+			}
+
+			.address-font {
+				font-size: 28px;
+				color: #4e94ff;
+
+
+			}
+
+			.view-map {
+				font-size: 12px;
+				text-align: center;
+
+			}
+		}
+		/deep/.u-cell__value{
+			text-align: left;
+			margin-left: 16px;
+			color: #101010;
+			 font-size: 16px;
+		}
+		/deep/.u-cell_title{
+			width: 15% !important;
+		    font-size: 16px;
+			color: #777777;
+		}
+		.u-cell{
+			position: relative;
+			    padding: 13px 16px 13px 0 ;
+		}
+		.price-detail{
+			width: 56px;
+			height: 20px;
+			color: rgba(22, 119, 255, 100);
+			font-size: 14px;
+			position: absolute;
+			top: 70px;
+			right: 20px;
+		}
+	}
+
+
+// 充电枪选项
+.gun-options{
+	background-color: #fff;
+	margin-top: 12px;
+	.tab-equipment{
+		background-color: #fff;
+		padding: 16px 16px 16px 0;
+		margin-left: 16px ;
+		border-bottom: 1px solid #E5E7EA;
+		position: relative;
+		.equipment-top{
+			line-height: 27px;
+			position: relative;
+		}
+		.name{
+			line-height: 20px;
+			line-height: 20px;
+			font-weight: 600;
+			color: rgba(16, 16, 16, 100);
+		}
+		.radio{
+			margin-left: 54px;
+			
+			
+		}
+		.switch{
+			position:absolute;
+			top: 3px;
+			left: 21%;
+		}
+		.state{
+			margin-top: 12px;
+			display: flex;
+			justify-content: space-between;
+			width: 75%;
+			flex-wrap: wrap;
+			.state-item{
+				height: 20px;
+				line-height: 20px;
+				margin-top: 4px;
+				color: rgba(16, 16, 16, 100);
+				.bot1{
+					display: inline-block;
+					width: 12px;
+					height: 12px;
+					margin-left: 2px;
+					background-color: rgba(255, 115, 0, 100);
+					border-radius: 999px;
+					
+				}
+				.bot2{
+					background-color: rgba(0, 185, 98, 100);
+				}
+				
+				
+			}
+			.more{
+				
+				line-height: 24px;
+				font-size: 24px;
+				color: #b3b3b3;
+				position: absolute;
+				right: 20px;
+				top: 16px;
+			
+				.set{
+					display: inline-block;
+					width: 30px;
+					font-size: 14px;
+					color: #1677ff;
+			        position: absolute;
+					top: 0;
+					left: -29px;
+					
+				}
+			}
+			
+		}
+	}
+	/deep/.u-tab-bar{
+		background-color: #00B962 !important;
+	}
+.share{
+	padding: 16px;
+    
+}
+	
+.equipment-info{
+	padding: 16px;
+}
+.title{
+	font-size: 16px;
+	font-weight: 600;
+	.line{
+		display: inline-block;
+		height:12px;
+		width: 4px;
+		background-color: #00B962;
+		margin-right: 8px;
+	}
+	
+	}
+	.item{
+			display: flex;
+			justify-content: space-between;
+			margin-top: 20px;
+		}
+}
+.bottom{
+	width: 100%;
+	height: 64px;
+	background-color: #fff;
+	position: fixed;
+	bottom: 0;
+	display: flex;
+	.u-btn{
+		width: 91.4%;
+		height: 40px;
+		margin: auto;
+	}
+}
+
+</style>