|
|
@@ -0,0 +1,327 @@
|
|
|
+<template>
|
|
|
+ <view >
|
|
|
+ <ujp-navbar title="适用站点"></ujp-navbar>
|
|
|
+
|
|
|
+ <view class="carNone" v-if="list.length == 0">
|
|
|
+ <img src="static/img/暂无数据-缺省页.png" alt="">
|
|
|
+ <p class="oldTextjp2" oldstyle="font-size: 18px;">加载中</p>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="charing-slow" v-for="(item,index) in list" :key="item.id" >
|
|
|
+<!-- <text class="trickle-charge">慢充</text> <text class="station-items">{{item.name}}</text>
|
|
|
+ --> <text :class="item.type == '1' ? 'fast-charge':(item.type == '2' ? 'trickle-charge':'fast-trickle-charge')">{{item.type==1?'快充':(item.type==2?'慢充':'快\\慢')}}</text> <text class="station-items">{{item.name}}</text>
|
|
|
+
|
|
|
+ <view class="address">
|
|
|
+ {{item.address}}
|
|
|
+ </view>
|
|
|
+ <view class="price">
|
|
|
+ <view class="num">{{(item.costPrice*100+item.servicePrice*100)/100}}</view>
|
|
|
+ <view class="unit">
|
|
|
+ 元/度 起
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="park">
|
|
|
+ <text class="park-p">p</text>
|
|
|
+ <text class="park-text">以实际费用为准</text>
|
|
|
+ </view> -->
|
|
|
+ <view class="free">
|
|
|
+ <view class="free-num">
|
|
|
+ <text style="color:#009143;">空闲{{item.availableNum}}</text>/总数{{item.totalNum}}
|
|
|
+ </view>
|
|
|
+ <view class="distance">
|
|
|
+ <text class="iconfont distance-font"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-divider v-if="list.length == recordsTotal && recordsTotal != 0" style="margin-top: 10px;background-color: #F2F4F4;">已经到底了</u-divider>
|
|
|
+
|
|
|
+
|
|
|
+<!-- <u-divider margin-top="20" bg-color="#F2F4F4">已经到底了</u-divider>
|
|
|
+ --> </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as API from '@/apis/site.js';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tabbarList: [{
|
|
|
+ iconPath: "home-3-line",
|
|
|
+ selectedIconPath: "home-3-fill",
|
|
|
+ text: '主页 ',
|
|
|
+ count: 0,
|
|
|
+ isDot: true,
|
|
|
+ customIcon: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ iconPath: "road-map-line",
|
|
|
+ selectedIconPath: "road-map-fill",
|
|
|
+ text: '找桩',
|
|
|
+ midButton: true,
|
|
|
+ customIcon: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ iconPath: "user-5-line",
|
|
|
+ selectedIconPath: "user-5-fill",
|
|
|
+ text: '我的',
|
|
|
+ count: 0,
|
|
|
+ isDot: false,
|
|
|
+ customIcon: true,
|
|
|
+
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ current: 0,
|
|
|
+ monthlyRentCardId:null,
|
|
|
+
|
|
|
+ pageIndex: 1,
|
|
|
+ recordsTotal: 0,
|
|
|
+ list: [],
|
|
|
+ }
|
|
|
+ },onLoad(op){
|
|
|
+ this.monthlyRentCardId=op.cardId
|
|
|
+ this.getInfo()
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if (this.chargeList.length < this.recordsTotal) {
|
|
|
+ this.myLoadmore();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ myLoadmore() {
|
|
|
+ this.pageIndex += 1;
|
|
|
+ this.getInfo()
|
|
|
+ },
|
|
|
+ getInfo(){
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.searchStationData({
|
|
|
+ monthlyRentCardId:this.monthlyRentCardId
|
|
|
+ }).then((response) => {
|
|
|
+ console.log(response)
|
|
|
+ this.list = [
|
|
|
+ ...this.list,
|
|
|
+ ...response.data.data
|
|
|
+ ];
|
|
|
+ this.recordsTotal = response.data.recordsTotal;
|
|
|
+ //this.detail=response.data.monthlyRentCard
|
|
|
+ uni.hideLoading()
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .carNone{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ margin-top: -60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 88px;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ height: 44px;
|
|
|
+ color: #666666;
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
+ padding: 12px 16px;
|
|
|
+
|
|
|
+
|
|
|
+ .u-search[data-v-1a326067] {
|
|
|
+ flex: 0.9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ margin-left: 2px;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .condition {
|
|
|
+ width: 100%;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 20px;
|
|
|
+ padding: 12px 16px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .condition-type {
|
|
|
+ margin-left: 36px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .condition-screen {
|
|
|
+ margin-left: 159px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .charing-slow {
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 0 12px;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 10px 12px 0px;
|
|
|
+ margin-top: 12px;
|
|
|
+ .trickle-charge {
|
|
|
+ display: inline-block;
|
|
|
+ width: 44px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: rgba(0, 185, 98, 100);
|
|
|
+ color: rgba(255, 255, 255, 100);
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fast-charge {
|
|
|
+ display: inline-block;
|
|
|
+ width: 44px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: #9d9fff;
|
|
|
+ color: rgba(255, 255, 255, 100);
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .fast-slow{
|
|
|
+ display: inline-block;
|
|
|
+ width: 44px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: #00bac8;
|
|
|
+ color: rgba(255, 255, 255, 100);
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .station-items {
|
|
|
+ display: inline-block;
|
|
|
+ height: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-left: 4px;
|
|
|
+ color: #101010;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .address {
|
|
|
+ margin-top: 8px;
|
|
|
+ line-height: 16px;
|
|
|
+ font-size: 11px;
|
|
|
+ color: rgba(119, 119, 119, 100);
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ display: flex;
|
|
|
+ height: 20px;
|
|
|
+ margin-top: 8px;
|
|
|
+
|
|
|
+ .num {
|
|
|
+ height: 20px;
|
|
|
+ color: rgba(255, 98, 0, 100);
|
|
|
+ font-size: 20px;
|
|
|
+ text-align: left;
|
|
|
+ font-family: Roboto-medium;
|
|
|
+ }
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ height: 14px;
|
|
|
+ line-height: 14px;
|
|
|
+ color: rgba(102, 102, 102, 100);
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: left;
|
|
|
+ font-family: AlibabaPuHui-regular;
|
|
|
+ margin-top: 6px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .park {
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .park-p {
|
|
|
+ display: inline-block;
|
|
|
+ width: 20px;
|
|
|
+ height: 18px;
|
|
|
+ line-height: 12px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: rgba(125, 177, 255, 100);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .park-text {
|
|
|
+ display: inline-block;
|
|
|
+ width: 300px;
|
|
|
+ height: 17px;
|
|
|
+ color: rgba(102, 102, 102, 100);
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: left;
|
|
|
+ margin-left: 4px;
|
|
|
+ margin-top: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .free {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 52px;
|
|
|
+ border-top: 1px solid rgba(238, 242, 240, 100);
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .free-num {
|
|
|
+ line-height: 52px;
|
|
|
+ font-size: 14px
|
|
|
+ }
|
|
|
+
|
|
|
+ .distance {
|
|
|
+ width: 130px;
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: rgba(255, 255, 255, 100);
|
|
|
+ font-size: 14px;
|
|
|
+ background-color: #00b962;
|
|
|
+ border-radius: 50px;
|
|
|
+ margin: 12px;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .distance-font {
|
|
|
+ font-size: 16px
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
zhengkaixin