|
|
@@ -0,0 +1,341 @@
|
|
|
+<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="../../../static/img/电桩管理.png" alt="">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="station-address">
|
|
|
+ <img src="static/img/Frame 201.png" alt="">
|
|
|
+ <view class="address-text">
|
|
|
+ 湖北省荆州市沙市区江津东路附155号
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="navigation">
|
|
|
+ <view class="iconfont address-font">
|
|
|
+ 
|
|
|
+
|
|
|
+ </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元/度"></u-cell-item>
|
|
|
+ <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="options" v-if="current==0">
|
|
|
+ <u-cell-group>
|
|
|
+ <u-cell-item title="开放共享" :arrow="false">
|
|
|
+ <view class="">
|
|
|
+ <u-radio-group v-model="value" @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 v-model="value" @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 v-model="value" @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">
|
|
|
+ <p>预约时长选项</p>
|
|
|
+ <view class="radio-box">
|
|
|
+ <u-radio-group v-model="value" @change="radioGroupChange">
|
|
|
+ <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-item>
|
|
|
+ <u-cell-item title="工作状态" :arrow="false"><view class="bot charging-bot">
|
|
|
+
|
|
|
+ </view>充电中</u-cell-item>
|
|
|
+ <u-cell-item title="运行状态":arrow="false"><view class="bot">
|
|
|
+
|
|
|
+ </view>正常</u-cell-item>
|
|
|
+ <u-cell-item title="网络状态":arrow="false"><view class="bot">
|
|
|
+
|
|
|
+ </view>联网</u-cell-item>
|
|
|
+ <u-cell-item title="故障状态":arrow="false"><view class="bot">
|
|
|
+
|
|
|
+ </view>正常</u-cell-item>
|
|
|
+ </u-cell-group>
|
|
|
+ </view>
|
|
|
+</view>
|
|
|
+
|
|
|
+<view class="bottom">
|
|
|
+ <u-button type="success" shape="circle">保存</u-button>
|
|
|
+</view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list1: [{
|
|
|
+ name: '1号充电枪'
|
|
|
+ }, {
|
|
|
+ name: '2号充电枪'
|
|
|
+ }],
|
|
|
+ list2: [{
|
|
|
+ name: '是'
|
|
|
+ }, {
|
|
|
+ name: '否'
|
|
|
+ }],
|
|
|
+ timeList:[{
|
|
|
+ name:"10分钟"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:"20分钟"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:"30分钟"
|
|
|
+ }],
|
|
|
+ current: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ change(index) {
|
|
|
+ this.current = index;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ page{
|
|
|
+ padding-bottom: 233px;
|
|
|
+ }
|
|
|
+ .delete {
|
|
|
+ margin-left: 85.3%;
|
|
|
+ color: #cccccc;
|
|
|
+ font-size: 12px
|
|
|
+ }
|
|
|
+
|
|
|
+ .details {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 16px 0 16px 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: 12px
|
|
|
+ }
|
|
|
+
|
|
|
+ .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: 20px;
|
|
|
+ color: #101010
|
|
|
+ }
|
|
|
+ /deep/.u-cell_title{
|
|
|
+ width: 30% !important;
|
|
|
+ color: #777777;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+// 充电枪选项
|
|
|
+.gun-options{
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 12px;
|
|
|
+ /deep/.u-cell_title{
|
|
|
+ width: 30% !important;
|
|
|
+ }
|
|
|
+ /deep/.u-cell__value{
|
|
|
+ text-align: left;
|
|
|
+ color: #101010;
|
|
|
+ font-size: 16px
|
|
|
+ }
|
|
|
+ .u-radio-group{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .time-cell{
|
|
|
+ /deep/.u-cell_title{
|
|
|
+ width: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bot{
|
|
|
+ display: inline-block;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ border-radius: 999px;
|
|
|
+ background-color: #00b962;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ .charging-bot{
|
|
|
+ background-color: #ff7300;
|
|
|
+ }
|
|
|
+}
|
|
|
+.bottom{
|
|
|
+ width: 100%;
|
|
|
+ height: 64px;
|
|
|
+ background-color: #fff;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ .u-btn{
|
|
|
+ width: 91.4%;
|
|
|
+ height: 40px;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
