diyici
This commit is contained in:
dt_2916866708
112
pages/ChargingStation/AntiCorruptionLayer.js
Normal file
112
pages/ChargingStation/AntiCorruptionLayer.js
Normal file
@@ -0,0 +1,112 @@
|
||||
let page = [{
|
||||
outputField: 'list',
|
||||
field: 'data',
|
||||
type: 'object',
|
||||
defaultValue: [],
|
||||
childField: [{
|
||||
outputField: 'stationLng',
|
||||
field: 'stationLng',
|
||||
type: 'number',
|
||||
defaultValue: 116.38,
|
||||
},{
|
||||
outputField: 'stationLat',
|
||||
field: 'stationLat',
|
||||
type: 'number',
|
||||
defaultValue: 39.90,
|
||||
},{
|
||||
outputField: 'id',
|
||||
field: 'id',
|
||||
type: 'string',
|
||||
defaultValue: '暂无数据',
|
||||
},{
|
||||
outputField: 'fastChargingIdleRatio',
|
||||
field: 'fastChargingIdleRatio',
|
||||
type: 'string',
|
||||
defaultValue: '暂无数据',
|
||||
},{
|
||||
outputField: 'slowChargingIdleRatio',
|
||||
field: 'slowChargingIdleRatio',
|
||||
type: 'string',
|
||||
defaultValue: '暂无数据',
|
||||
},{
|
||||
outputField: 'otherIdleRatio',
|
||||
field: 'otherIdleRatio',
|
||||
type: 'string',
|
||||
defaultValue: '暂无数据',
|
||||
},{
|
||||
outputField: 'name',
|
||||
field: 'stationName',
|
||||
type: 'string',
|
||||
defaultValue: '暂无数据',
|
||||
},{
|
||||
outputField: 'address',
|
||||
field: 'address',
|
||||
type: 'string',
|
||||
defaultValue: '山东省潍坊市奎文区金马路119号',
|
||||
}, {
|
||||
outputField: 'tags',
|
||||
field: 'tags',
|
||||
type: 'object',
|
||||
defaultValue: [],
|
||||
childField:[
|
||||
{
|
||||
outputField: 'label',
|
||||
field: 'label',
|
||||
type: 'string',
|
||||
defaultValue: '标签',
|
||||
},
|
||||
{
|
||||
outputField: 'color',
|
||||
field: 'color',
|
||||
type: 'string',
|
||||
defaultValue: '#6EA29BCC',
|
||||
}
|
||||
]
|
||||
},{
|
||||
outputField: 'distance',
|
||||
field: 'distance',
|
||||
type: 'number',
|
||||
defaultValue: 3.8,
|
||||
}, {
|
||||
outputField: 'unitPrice',
|
||||
field: 'totalFee',
|
||||
type: 'number',
|
||||
defaultValue: 0.6,
|
||||
}, {
|
||||
outputField: 'parkFee',
|
||||
field: 'parkFee',
|
||||
type: 'string',
|
||||
defaultValue: '免费停车',
|
||||
}, {
|
||||
outputField: 'quickChargeNumber',
|
||||
field: 'quickChargeNumber',
|
||||
type: 'number',
|
||||
defaultValue: 2,
|
||||
}, {
|
||||
outputField: 'usingQuickChargeNumber',
|
||||
field: 'usingQuickChargeNumber',
|
||||
type: 'number',
|
||||
defaultValue: 1,
|
||||
}, {
|
||||
outputField: 'trickleChargeNumber',
|
||||
field: 'trickleChargeNumber',
|
||||
type: 'number',
|
||||
defaultValue: 2,
|
||||
}, {
|
||||
outputField: 'usingTrickleChargeNumber',
|
||||
field: 'usingTrickleChargeNumber',
|
||||
type: 'number',
|
||||
defaultValue: 1,
|
||||
}, {
|
||||
outputField: 'otherChargingNumber',
|
||||
field: 'trickleChargeNumber',
|
||||
type: 'number',
|
||||
defaultValue: 2,
|
||||
}, {
|
||||
outputField: 'usingOtherChargingNumber',
|
||||
field: 'usingOtherChargingNumber',
|
||||
type: 'number',
|
||||
defaultValue: 1,
|
||||
}]
|
||||
}]
|
||||
export { page }
|
||||
90
pages/ChargingStation/index.scss
Normal file
90
pages/ChargingStation/index.scss
Normal file
@@ -0,0 +1,90 @@
|
||||
.ChargingStation_container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.ChargingStation_list_container{
|
||||
flex: 1;
|
||||
background: #FFFFFF;
|
||||
border-radius: 70rpx 70rpx 0rpx 0rpx;
|
||||
padding: 44rpx 0rpx;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 0;
|
||||
overflow: hidden;
|
||||
.ChargingStation_list_header{
|
||||
padding: 0 31rpx;
|
||||
.switch{
|
||||
margin-left: 20rpx;
|
||||
text{
|
||||
font-size: 26rpx;
|
||||
color: #000000;
|
||||
font-weight: 600;
|
||||
}
|
||||
.switch_logo{
|
||||
margin-right: 20rpx;
|
||||
width: 37.11rpx;
|
||||
height: 33rpx;
|
||||
}
|
||||
}
|
||||
// 输入框
|
||||
.ChargingStation_list_header_input{
|
||||
background: #F7F7F7;
|
||||
border-radius: 81rpx ;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
padding: 10rpx 31rpx;
|
||||
.ChargingStation_list_header_input_icon{
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
input {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
// box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
// 选项列表
|
||||
.ChargingStation_list_option_list{
|
||||
font-size: 24rpx;
|
||||
margin: 30rpx 0;
|
||||
.ChargingStation_list_option_list_item{
|
||||
width: 142rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 48rpx 48rpx 48rpx 48rpx;
|
||||
border: 1rpx solid #121836;
|
||||
box-sizing: border-box;
|
||||
color: #121836;
|
||||
}
|
||||
.select_ChargingStation_list_option_list_item{
|
||||
background-color: #0B1123;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ChargingStation_list{
|
||||
flex: 1;
|
||||
// margin-top: 62rpx;
|
||||
overflow: hidden;
|
||||
::-webkit-scrollbar {width: 0;height: 0;background-color: transparent;}
|
||||
}
|
||||
}
|
||||
.ChargingStation_title{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 32rpx;
|
||||
// padding-left: 31rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
text{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
}
|
||||
.ChargingStation_title_logo{
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
112
pages/ChargingStation/index.vue
Normal file
112
pages/ChargingStation/index.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<!-- <view :style="{paddingTop:`${titleStyle.top}px`}" class="page_body"> -->
|
||||
<view class="ChargingStation_container" style="height: 100%;overflow: hidden;">
|
||||
<view :style="{height:`${titleStyle.height}px`}" class="ChargingStation_title">
|
||||
<text> 星云闪充</text>
|
||||
</view>
|
||||
<!-- 列表 -->
|
||||
<view style="overflow: hidden;" class="ChargingStation_list_container flex column">
|
||||
<!-- 搜索框 -->
|
||||
<view class="ChargingStation_list_header">
|
||||
<!-- 输入框 -->
|
||||
<view class="flex">
|
||||
<view class="ChargingStation_list_header_input oneflex">
|
||||
<uni-icons class="ChargingStation_list_header_input_icon" type="search" size="20"></uni-icons>
|
||||
<input :disabled="true" @confirm="seach" @tap="focus" v-model="pageData.address" placeholder="搜索" type="text">
|
||||
<!-- <uni-icons v-if="pageData.stationName!==''" @click="pageData.stationName = '';getList() "
|
||||
type="clear" size="20"></uni-icons> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- 选项 -->
|
||||
<view class="ChargingStation_list_option_list flex around">
|
||||
<view @click="pageData.equipmentTypes = []" :class=" `ChargingStation_list_option_list_item flex jc ac` + (!pageData.equipmentTypes.length ?' select_ChargingStation_list_option_list_item':'') ">
|
||||
全部
|
||||
</view>
|
||||
<view @click="pageData.equipmentTypes = [item.value]" v-for="(item,index) in options " :key="index"
|
||||
:class=" `ChargingStation_list_option_list_item flex jc ac` + (pageData.equipmentTypes.includes(item.value) ?' select_ChargingStation_list_option_list_item':'') ">
|
||||
{{item.label}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 地图 -->
|
||||
<view class="ChargingStation_list">
|
||||
<charging-station-map ref="ChargingStationMap" :pageData.sync='pageData' ></charging-station-map>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
page
|
||||
} from './AntiCorruptionLayer.js'
|
||||
import station from '@/api/station.js'
|
||||
import ChargingStationMap from "@/components/ChargingStationMap/ChargingStationMap.vue"
|
||||
export default {
|
||||
components: {
|
||||
ChargingStationMap
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageData: {
|
||||
equipmentTypes: [],
|
||||
ranger: 2000,
|
||||
stationLng:'',
|
||||
stationLat:'',
|
||||
address:''
|
||||
},
|
||||
titleStyle: {},
|
||||
options: [ {
|
||||
label: '快充',
|
||||
value: 1
|
||||
}, {
|
||||
label: '慢充',
|
||||
value: 2
|
||||
}]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
watch: {
|
||||
'pageData.equipmentTypes'(e) {
|
||||
this.$refs.ChargingStationMap.getList(0)
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.$refs.ChargingStationMap.getPosition()
|
||||
},
|
||||
methods: {
|
||||
focus(){
|
||||
let { latitude,longitude} = this.$refs.ChargingStationMap.location;
|
||||
uni.navigateTo({
|
||||
url:'/ChargingStation/pages/chooseLocation/index?type='+`start/${latitude},${longitude}`
|
||||
})
|
||||
},
|
||||
onshow(){
|
||||
this.$refs.ChargingStationMap.onshow();
|
||||
this.$refs.ChargingStationMap.getPosition();
|
||||
},
|
||||
refresherrefresh() {
|
||||
this.seach()
|
||||
},
|
||||
seach() {
|
||||
},
|
||||
async init() {
|
||||
let that = this;
|
||||
this.titleStyle = wx.getMenuButtonBoundingClientRect(); //获取高度
|
||||
uni.$on('UpdateAddress',(e)=>{
|
||||
that.pageData.address = `${e.title}${e.address}`
|
||||
let { lat,lng} = e.location;
|
||||
that.$refs.ChargingStationMap.moveToLocation(lng,lat);
|
||||
});
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'index.scss';
|
||||
@import '../index/index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user