Browse Source

占位费相关功能

jiuling 3 months ago
parent
commit
e2fe9a7f41

+ 2 - 2
app.json

@@ -1,7 +1,6 @@
 {
   "lazyCodeLoading": "requiredComponents",
   "pages": [
-
     "pages/index/index",
     "pages/routes/routes",
     "pages/charginfo/charginfo",
@@ -58,7 +57,8 @@
     "pages/ucenter/control/batteryControl",
     "pages/scan_result/elpackage",
     "pages/batteryPack/batteryPackWait",
-    "pages/charginfo/eleCarMap"
+    "pages/charginfo/eleCarMap",
+    "pages/ucenter/zhanw/zhanw"
   ],
   "window": {
     "backgroundTextStyle": "light",

+ 30 - 0
components/parking-info/parking-info.js

@@ -0,0 +1,30 @@
+// components/parking-info/index.js
+Component({
+  properties: {
+    // 可根据需要定义组件的属性
+    occupyFee:{
+      type: Object,
+        value:{
+          cost_cycle:0,
+          max_fee_time:0,
+          cost_time_period:'',
+          free_time:0
+        }
+    }
+  },
+  lifetimes:{
+    attached: function () {
+      this.initData()
+    }
+  },
+  data: {
+    // 组件内部数据
+  },
+  methods: {
+    // 组件的方法
+    initData() {
+      const { cost_cycle, max_fee_time, cost_time_period, free_time } = this.data.occupyFee;
+      console.log("this.occupyFee",this.data);
+    }
+  }
+})

+ 4 - 0
components/parking-info/parking-info.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

+ 27 - 0
components/parking-info/parking-info.wxml

@@ -0,0 +1,27 @@
+<!-- components/parking-info/index.wxml -->
+<view class="parking-info">
+  <!-- 标题区域 -->
+  <view>
+    <view class="title-block">
+      <image class="iconZW" src="/images/zhangweifei.png" />
+      <view class="title">超时占位费</view>
+    </view>
+    <!-- 费用信息 -->
+    <view class="fee-info">
+      <view class="fee-rate">{{occupyFee.cost_cycle}}元/分钟 单次封顶{{occupyFee.max_fee_time}}元/次</view>
+    </view>
+    <!-- 时间信息 -->
+    <view class="time-info">
+      <view class="time-label">收费时段:</view>
+      <view class="time-value">{{occupyFee.cost_time_period}}</view>
+    </view>
+    <!-- 提示信息 -->
+    <view class="notice-block">
+      <view class="notice-text">充电结束{{occupyFee.free_time}}分钟未挪车,将按占用时长收取超时占位费</view>
+    </view>
+  </view>
+  <!-- 费用说明 -->
+  <view class="description">
+    <view class="desc-text">费用说明:非充电状态占用充电设备或车位,充电站将收取占位费,请及时结束充电并按时挪车,避免额外费用带来经济损失。</view>
+  </view>
+</view>

+ 59 - 0
components/parking-info/parking-info.wxss

@@ -0,0 +1,59 @@
+.parking-info {
+  margin-top: 10rpx;
+  padding-left: 15rpx;
+  background-color: rgba(233, 157, 66,0.1);
+}
+ .title-block {
+  display: flex;
+  align-items: center;
+  margin-left:-10px;
+ }
+ .iconZW{
+  width: 35rpx;
+  height: 35rpx;
+  color: #35b2ab;
+  margin: 10rpx 20rpx;
+  display: inline-block;
+  line-height: 35rpx;
+  text-align: center;
+  border-radius: 10rpx;
+  font-size: 26rpx;
+}
+ .title {
+  font-size: 25rpx;
+  font-weight:600;
+  color: rgb(17, 17, 17);
+ }
+ .fee-info {
+  margin-bottom: 12rpx;
+ }
+ .fee-rate {
+  font-size: 22rpx;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.9);
+ }
+ .time-info {
+  display: flex;
+}
+.time-label {
+  color: #101010;
+  font-size: 22rpx;
+  font-weight: 600;
+  white-space: nowrap;
+}
+ .time-value {
+  font-size: 22rpx;
+  font-weight: 600;
+  color: #333;
+ }
+ .notice-text {
+  font-size: 22rpx;
+  color: #E99D42;
+ }
+ .description {
+  padding-bottom: 10rpx;
+ }
+ .desc-text {
+  font-size: 22rpx;
+  color: #AAAAAA;
+ }

+ 47 - 0
components/parking-order/parking-order.js

@@ -0,0 +1,47 @@
+// components/parking-order.js
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    occupyOrder:{
+      type: Array,
+      value: [] 
+    }
+  },
+  lifetimes:{
+    attached(){
+      // 页面加载时显示弹窗
+      this.setData({
+        showPopup: true
+      });
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    showPopup: true,
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    handleConfirm() {
+      // 点击确认按钮
+      this.setData({
+        showPopup: false
+      });
+    },
+  
+    handleContact() {
+      // 联系客服
+      wx.makePhoneCall({
+        phoneNumber: '18888888888' // 替换为实际的客服电话
+      });
+    },
+  }
+})

+ 4 - 0
components/parking-order/parking-order.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

+ 45 - 0
components/parking-order/parking-order.wxml

@@ -0,0 +1,45 @@
+<!--components/parking-order.wxml-->
+<view class="popup-mask" wx:if="{{showPopup}}" wx:for="{{occupyOrder}}" wx:key="id">
+  <view class="popup-content">
+    <!-- 标题 -->
+    <view class="popup-title">占位提醒</view>
+    <!-- 充电站信息区域 -->
+    <view class='charging_text_title'>
+        <view class='charging'>
+          <image src='/images/zhangweifei.png'></image>
+        </view>
+        <view class='charging_text_title1'>
+          <text class='bold'>{{item.chargstationname}}</text>
+          <text class="chargpile">{{item.chargpileids}} </text>
+        </view>
+      </view>
+    <!-- 充电桩名称 -->
+    <view class="pile-info">{{item.chargpilename}}</view>
+    <!-- 时间信息 -->
+    <view class="time-info">
+      <view class="info-row">
+        <text class="label">占位开始时间:</text>
+        <text class="value">{{item.occupyBeginTime || 0}}</text>
+      </view>
+      <view class="info-row">
+        <text class="label">已占位时长:</text>
+        <text class="value">{{item.occupyTime || 0}}</text>
+      </view>
+    </view>
+    <!-- 费用信息 -->
+    <view class="info-row fee-info">
+      <text class="label">已产生占位费:</text>
+      <text class="value">{{item.occupyFee || 0}}</text>
+    </view>
+    <!-- 警告文字 -->
+    <view class="warning-text">
+      为避免给您带来更多的经济损失,请充电结束后及时挪车!
+    </view>
+    <!-- 按钮 -->
+    <button class="confirm-btn" bindtap="handleConfirm">
+      我已知晓,将尽快挪车
+    </button>
+    <!-- 联系客服 -->
+    <view class="contact-link" bindtap="handleContact">联系客服</view>
+  </view>
+</view>

+ 198 - 0
components/parking-order/parking-order.wxss

@@ -0,0 +1,198 @@
+/* components/parking-order.wxss */
+.popup-mask {
+  /* width: 800rpx;
+  height: 1200rpx; */
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 99998;
+}
+
+.popup-content {
+  width: 65%;
+  background: #fff;
+  border-radius: 12rpx;
+  padding: 24rpx;
+  position: absolute;
+  z-index: 99999;
+}
+
+.popup-title {
+  text-align: center;
+  font-size: 34rpx;
+  /* margin-bottom: 20rpx; */
+}
+
+.station-section {
+  display: flex;
+  align-items: flex-start;
+  padding: 0 10rpx;
+  margin-bottom: 10rpx;
+}
+
+.station-icon {
+  width: 40rpx;
+  height: 40rpx;
+  margin-right: 10rpx;
+  margin-top: 4rpx;
+}
+
+.station-info {
+  flex: 1;
+}
+
+.station-name {
+  font-size: 30rpx;
+  color: #333;
+  margin-bottom: 4rpx;
+}
+
+.station-id {
+  font-size: 28rpx;
+  color: #999;
+}
+
+.pile-info {
+  font-size: 24rpx;
+  color: #333;
+  padding: 0 10rpx;
+  font-weight: 600;
+}
+
+.time-info {
+  margin-bottom: 10rpx;
+}
+
+.info-row {
+  font-size: 28rpx;
+  color: #333;
+  padding: 0 10rpx;
+  text-align: left;
+}
+
+.label {
+  display: inline;
+ font-weight: 600;
+}
+
+.value {
+  display: inline;
+  color: #AAAAAA;
+}
+
+.fee-info {
+  margin-bottom: 10rpx;
+}
+
+.warning-text {
+  color: #E99D42;
+  font-size: 28rpx;
+  padding: 0 10rpx;
+  margin-bottom: 50rpx;
+  line-height: 1.4;
+}
+
+.warning-code {
+  color: #999;
+  font-size: 26rpx;
+  text-align: center;
+  margin-bottom: 20rpx;
+}
+
+.confirm-btn {
+  background: #21adff;
+  color: #fff;
+  font-size: 28rpx;
+  height: 66rpx;
+  line-height: 66rpx;
+  border-radius: 8rpx;
+  margin-bottom: 16rpx;
+  width: 70% !important;
+  padding: 0;
+  border: none;
+}
+
+.contact-link {
+  color: #848484;
+  font-size: 28rpx;
+  text-align: center;
+}
+.chargpile {
+  font-size: 22rpx;
+  line-height: 42rpx;
+  height: 42rpx;
+  min-height: 42rpx;
+  color: #9d9d9d;
+  /* margin-left: -50rpx; */
+}
+.charging {
+  width: 62rpx;
+  height: 62rpx;
+  margin: 30rpx 30rpx 30rpx 0;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.charging image {
+  width: 62rpx;
+  height: 62rpx;
+}
+.charging_text_title {
+  height: 105rpx;
+  width: 100%;
+  display: flex;
+  margin-bottom: 20rpx;
+}
+
+.charging_text_title1 {
+  /* width: 100%; */
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+text {
+  margin: 0 0 20rpx 0;
+  display: block;
+  font-size: 24rpx;
+  font-family: 'Lucida Sans',
+                 'Lucida Sans Regular',
+                 'Lucida Grande',
+                 'Lucida Sans Unicode',
+                 Geneva,
+                 Verdana,
+                 sans-serif;
+  color: #545253;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  line-height: 24rpx;
+  height: 24rpx;
+  min-height: 24rpx;
+}
+text.bold {
+  font-weight: bold;
+  line-height: 50rpx;
+  height: 50rpx;
+  min-height: 50rpx;
+  margin: 20rpx 0 0 0;
+  display: block;
+  font-size: 32rpx;
+}
+text.inline{
+ display: inline-block;
+ margin:0;
+}
+.h1 {
+  font-size: 22rpx;
+  line-height: 42rpx;
+  height: 42rpx;
+  min-height: 42rpx;
+  color: #9d9d9d;
+  margin: 0;
+}

BIN
images/zhangweifei.png


+ 19 - 0
pages/charginfo/charginfo.js

@@ -47,6 +47,8 @@ Page({
     parkTime: 0,
     activeTab: '0',
     scrollTop:0
+    occupyFee:{},
+    showOccupyFee:false
   },
   execParking(that,stationId){
     wx.request({
@@ -170,6 +172,7 @@ Page({
     this.fastAndSlow()
     this.ori_getPage();
     this.ele_getPage();
+    this.getOccupyFee();
   },
   fastAndSlow(e){
     let that = this;
@@ -211,6 +214,22 @@ Page({
         that.ele_getPage();
     }
   },
+  getOccupyFee(){
+    // test对象对接后端服务传递过来的数据
+    var test = {
+      cost_cycle:2,
+      max_fee_time:120,
+      cost_time_period:'00:00-08:00,12:00-14:00,18:00-21:00,22:00-23:00,22:00-23:00',
+      free_time:10
+    }
+    if (Object.keys(test).length > 0) { // 判断对象数据是否为空
+      this.setData({
+        occupyFee:test,
+        showOccupyFee:true
+      })
+    }  
+    console.log("occupyFee",Object.keys(this.data.occupyFee).length > 0);
+  },
 
   ori_getPage(){
     // ivType

+ 3 - 0
pages/charginfo/charginfo.json

@@ -1,3 +1,6 @@
 {
+  "usingComponents": {
+    "parking-info": "/components/parking-info/parking-info"
+  },
   "navigationBarTitleText": "充电站详情"
 }

+ 2 - 0
pages/charginfo/charginfo.wxml

@@ -74,6 +74,8 @@
       <text decode='true' style='font-size:20rpx;color:#aaaaaa;'>尖峰:7\8月11:00-13:00&nbsp;&nbsp;16:00-17:00</text>
     </view>
 --> <text class="parkingfee" wx:if="{{carParkingRate}}">充电即减免 <text>{{parkTime}}</text> 小时停车费</text>
+<!-- 占位费模版信息 -->
+<!-- <parking-info wx:if="{{showOccupyFee}}"  occupyFee="{{occupyFee}}"></parking-info> -->
     <scroll-view class='pictureScroll' scroll-x='true'>
       <view wx:for="{{chargfeatureList}}" wx:key="unique" data-index="{{index}}" bindtap="previewImage" class="chargfeatureImage">
       <image src="{{item}}" ></image>

+ 33 - 1
pages/index/index.js

@@ -79,7 +79,8 @@ Page({
     showModal: false,
     notice: null,
     carParkingRate: false,
-    showPrivacy:false
+    showPrivacy:false,
+    occupyFeeOrderList:[]
   },
   howtouse(){
     wx.navigateTo({
@@ -551,8 +552,39 @@ Page({
         }
       });
     }
+    // 占位费查询
+    // that.loadOccupyOrder()
 
   },
+  loadOccupyOrder(){
+    let that = this;
+    wx.request({
+      url: getApp().globalData.postHeadAgreement +'/restapi/wechat/queryOccupyFeeOrder',
+      data: {
+        userId: wx.getStorageSync('userInfo').userId,
+        searchIndex: 2,
+        pagenum: this.data.pagenum++,
+        pagesize: 10,
+      },
+      method: 'POST',
+      success(res) {
+        console.log("占位费",res);
+        if (res.data.result.rows) {
+          let {
+            rows: occupyFeeOrderList
+          } = res.data.result;
+          // that.startTimeOrder(charginglogs);
+          // that.formatCharginglogs(occupyFeeOrderList);
+          // wx.hideLoading()
+          that.setData({
+            occupyFeeOrderList: that.data.occupyFeeOrderList.concat(occupyFeeOrderList),
+            // total: res.data.result.total,
+            // dataLoading: false
+          });
+        }
+      }
+    });
+  },
   //跳转个人中心
   bindUserAvatarUrl() {
     let url = `/pages/ucenter/index/index`;

+ 2 - 1
pages/index/index.json

@@ -1,7 +1,8 @@
 {
     "navigationBarTitleText": "派捷充电",
     "usingComponents": {
-        "van-dialog": "/vant/dialog/index"
+        "van-dialog": "/vant/dialog/index",
+        "parking-order": "/components/parking-order/parking-order"
     }
 
 }

+ 2 - 1
pages/index/index.wxml

@@ -70,7 +70,8 @@
     </view>
   </view>
 </view>
-
+<!-- 占位费订单 -->
+<!-- <parking-order occupyOrder="{{occupyFeeOrderList}}"></parking-order>  -->
 <!-- 通知 -->
 <van-dialog custom-class="privacy_box" 
 use-slot

+ 19 - 1
pages/scan_result/scan_result.js

@@ -17,7 +17,9 @@ Page({
     parkTime: 0,
     url:'/images/scan_result.png',
     authStatus: 1,
-    defPlateNumber:''
+    defPlateNumber:'',
+    occupyFee:{},
+    showOccupyFee:false
   },
   resetResultList(resultList){
     let that = this
@@ -108,6 +110,22 @@ Page({
       }
     });
   },
+  getOccupyFee(){
+    // test对象对接后端服务传递过来的数据
+    var test = {
+      // cost_cycle:2,
+      // max_fee_time:120,
+      // cost_time_period:'00:00-08:00,12:00-14:00,18:00-21:00,22:00-23:00,22:00-23:00',
+      // free_time:10
+    }
+    if (Object.keys(test).length > 0) { // 判断对象数据是否为空
+      this.setData({
+        occupyFee:test,
+        showOccupyFee:true
+      })
+    }  
+    console.log("occupyFee我草",Object.keys(this.data.occupyFee).length > 0);
+  },
   execParking(that,chargPile){
     let stationId = chargPile.chargStationId;
     wx.request({

+ 3 - 1
pages/scan_result/scan_result.json

@@ -1,5 +1,7 @@
 {
-    "usingComponents": {},
+  "usingComponents": {
+    "parking-info": "/components/parking-info/parking-info"
+  },
     "navigationBarTitleText": "终端详情",
     "backgroundColor": "#FFFFFF"
 }

+ 2 - 0
pages/scan_result/scan_result.wxml

@@ -89,6 +89,8 @@
   <view  style='margin-top:10rpx;' wx:if="{{carParkingRate}}">
     <rich-text style='line-height:36rpx;color:#1D9BF7;font-size:30rpx;word-break:break-all;font-weight: bold;'>充电即减免 <text class="richHourNum">{{parkTime}}</text>小时停车费。请您确认入场车辆与启动充电时录入的车牌信息保持一致,如录入不一致将无法享受充电减免停车费优惠。</rich-text>
   </view>
+  <!-- 占位费模版信息 -->
+<!-- <parking-info wx:if="{{showOccupyFee}}"  occupyFee="{{occupyFee}}"></parking-info> -->
   <!-- <block wx:if="{{authStatus==0}}"> -->
   <block wx:if="{{false}}">
   <image class="scan_img" src="{{url}}" data-src="{{url}}" bindtap="previewImage"></image>

+ 14 - 0
pages/ucenter/index/index.js

@@ -172,6 +172,20 @@ Page({
     });
 
   },
+  gozhanw(e){
+    if (!this.data.isLogin) {
+      let url = `/pages/login/phone_login/phone_login`;
+      wx.navigateTo({
+        url
+      });
+      return;
+    }
+    let url = '/pages/ucenter/zhanw/zhanw'
+    wx.navigateTo({
+      url
+    });
+
+  },
   goPurse(e) {
     if (!this.data.isLogin) {
       let url = `/pages/login/phone_login/phone_login`;

+ 12 - 0
pages/ucenter/index/index.wxml

@@ -82,6 +82,18 @@
           <image src='/images/enter.png'></image>
         </view>
       </view>   
+      <!-- <view class="zan-cell" wx:if='{{!userInfo.flag}}' hover-class="active" bindtap="gozhanw">
+        <view class="zan-icon">
+          <!-- <image src='/images/purse.png'></image>
+          <image src='/images/column.png'></image>
+        </view>
+        <view class="zan-text">
+          <text>占位费记录</text>
+        </view>
+        <view class="zan-ft">
+          <image src='/images/enter.png'></image>
+        </view>
+      </view>    -->
       <view class="zan-cell" wx:if='{{!userInfo.flag}}' hover-class="active" bindtap="goPurse">
         <view class="zan-icon">
           <!-- <image src='/images/purse.png'></image> -->

+ 303 - 0
pages/ucenter/zhanw/zhanw.js

@@ -0,0 +1,303 @@
+// pages/ucenter/zhanw/zhanw.js
+let Util = require("../../../utils/util");
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    searchIndex:-1,
+    occupyFeeOrderList: [],
+    pagesize:10,
+    pagenum:1,
+    total:-1,
+    loadTotal: 0,
+    dataLoading: false,
+    finishedLoadTap: 0,
+    finishedLoadShowTimes: 0,
+    chongdianzhuangmingcheng: false,
+    chongdianzhuangbianhao: false,
+    chongdianshichang: false,
+    chongdiankaishijieshu: false,
+    customerServiceFlag: false,
+    cancleBtnFlag: false,
+    servicetel: getApp().globalData.helpPhoneNum,
+  },
+  switchBar(e){
+    let searchIndex = e.currentTarget.dataset.idx;
+    this.setData({
+      searchIndex
+    })
+    this.resetListZero();
+    this.getPage();
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function(options) {
+    let userInfo = wx.getStorageSync('userInfo');
+    let isLogin = wx.getStorageSync('isLogin');
+    let that = this;
+    // 页面显示
+    if (userInfo && isLogin) {
+      this.resetListZero();
+      this.getPage();
+    }
+    
+  },
+  resetListZero(){
+    let occupyFeeOrderList =  []
+    let pagesize = 10
+    let pagenum = 1
+    let total = -1
+    let loadTotal =  0
+    let dataLoading =  false
+    let finishedLoadTap =  0
+    let finishedLoadShowTimes =  0
+    this.setData({
+      occupyFeeOrderList,
+      pagesize,
+      pagenum,
+      total,
+      loadTotal,
+      dataLoading,
+      finishedLoadTap,
+      finishedLoadShowTimes,
+    })
+  },
+  getPage(){
+    // console.info(this.data.occupyFeeOrderList.length + " MMM " + this.data.total)
+    
+    if(this.data.occupyFeeOrderList.length == this.data.total){
+      this.setData({
+        finishedLoadTap:this.data.finishedLoadTap+1
+      })
+      if(this.data.finishedLoadTap>0 && this.data.finishedLoadShowTimes==0){
+        this.setData({
+          finishedLoadShowTimes:this.data.finishedLoadShowTimes+1
+        })
+        wx.showToast({
+          title: '全部加载完毕',
+          icon: 'success',
+          duration: 2000
+        })
+      }
+      return
+    }
+
+    if(this.data.dataLoading){
+      return
+    }
+    this.setData({
+      dataLoading: true
+    })
+    wx.showLoading({
+      title: '数据加载中....',
+    })
+
+  let that = this;
+
+    wx.request({
+      url: getApp().globalData.postHeadAgreement +'/restapi/wechat/queryOccupyFeeOrder',
+      data: {
+        userId: wx.getStorageSync('userInfo').userId,
+        searchIndex: that.data.searchIndex<0?null:that.data.searchIndex,
+        pagenum: this.data.pagenum++,
+        pagesize: 10,
+      },
+      method: 'POST',
+      success(res) {
+        console.log("占位费",res);
+        if (res.data.result.rows) {
+          let {
+            rows: occupyFeeOrderList
+          } = res.data.result;
+          // that.startTimeOrder(charginglogs);
+          that.formatCharginglogs(occupyFeeOrderList);
+          wx.hideLoading()
+          that.setData({
+            occupyFeeOrderList: that.data.occupyFeeOrderList.concat(occupyFeeOrderList),
+            total: res.data.result.total,
+            dataLoading: false
+          });
+        }
+      }
+    });
+  },
+
+
+  formatCharginglogs(formatCharginglogs) {
+    formatCharginglogs.forEach((item, index) => {
+      try {
+        console.log("item",item);
+          // 时间截取
+          item.occupyBeginTime = item.occupyBeginTime.substr(0,16)
+          item.occupyEndTime = item.occupyEndTime.substr(0,16)
+          // 状态翻译
+          if(item.status==3){
+            item.occupyStatusCN = '未支付'
+          }else if(item.status==4){
+            item.occupyStatusCN = '已支付'
+          }else if(item.status==6){
+            item.occupyStatusCN = '已取消'
+          }else if(item.status==7){
+            item.occupyStatusCN = '已退款'
+          };
+          // 判断标记为  chongdianzhuangmingcheng chongdianzhuangbianhao chongdianshichang chongdiankaishijieshu
+          // let chongdianzhuangmingcheng =  false
+          // let chongdianzhuangbianhao =  false
+          // let chongdianshichang =  false
+          // let chongdiankaishijieshu =  false
+          // let chongdianfeiyong =  false
+          let customerServiceFlag = false;
+          let cancleBtnFlag= false;
+          let height= 'h3';
+
+          if(item.status==3){
+            customerServiceFlag = true;
+          }
+          if(item.status==3 || item.status == 4){
+            cancleBtnFlag = true;
+          }
+          // item.chongdianzhuangmingcheng = chongdianzhuangmingcheng;
+          // item.chongdianzhuangbianhao = chongdianzhuangbianhao;
+          // item.chongdianshichang = chongdianshichang;
+          // item.chongdiankaishijieshu = chongdiankaishijieshu;
+          // item.chongdianfeiyong = chongdianfeiyong;
+          item.customerServiceFlag = customerServiceFlag;
+          item.cancleBtnFlag = cancleBtnFlag;
+          item.height = height;
+        //console.log(item.chargPile);
+      } catch (err) {
+        //在这里处理错误
+      }
+      try {
+        let chargePile = item.pileLog;
+        console.info(chargePile)
+        let startDate = Util.parseDate(chargePile.chargstarttime);
+        let endDate = Util.parseDate(chargePile.chargendtime)
+        let totalTime = Math.round((endDate.getTime() - startDate.getTime()) / 60000);
+        let totalTimeHour = Math.floor(totalTime / 60);
+        let totalTimeMinute = totalTime % 60;
+        let startTime = startDate.getFullYear() + "年" + Util.formatNumber(startDate.getMonth() + 1) + '月' + Util.formatNumber(startDate.getDate()) + '日  ' + Util.formatNumber(startDate.getHours()) + ':' + Util.formatNumber(startDate.getMinutes()) + ':' + Util.formatNumber(startDate.getSeconds());
+        let endTime = endDate.getFullYear() + "年" + Util.formatNumber(endDate.getMonth() + 1) + '月' + Util.formatNumber(endDate.getDate()) + '日  ' + Util.formatNumber(endDate.getHours()) + ':' + Util.formatNumber(endDate.getMinutes()) + ':' + Util.formatNumber(endDate.getSeconds());
+        totalTime = Util.formatNumber(totalTimeHour) + "时" + Util.formatNumber(totalTimeMinute) + "分";
+        chargePile.startTime = startTime;
+        chargePile.endTime = endTime;
+        chargePile.totalTime = totalTime;
+        chargePile.chargallmoney = chargePile.chargallmoney.toFixed(2);
+        chargePile.chargservice = chargePile.chargservice.toFixed(2);
+        chargePile.chargmoney = chargePile.chargmoney.toFixed(2);
+        //console.log(chargePile.chargPile);
+      } catch (err) {
+        //在这里处理错误
+      }
+
+
+    });
+
+  },
+  startTimeOrder(charginglogs) {
+    if (charginglogs && 0 != charginglogs.length) {
+      charginglogs.sort(function(ma, mb) {
+        return mb.chargstarttime.localeCompare(ma.chargstarttime);
+      });
+    }
+  },
+  customerServiceBtn(){
+    wx.makePhoneCall({
+      phoneNumber: this.data.servicetel
+    })
+  },
+  cancleBtn(e){
+    let  that = this
+    let reservId = e.currentTarget.dataset.idx;
+    let userInfo = wx.getStorageSync('userInfo');
+    let isLogin = wx.getStorageSync('isLogin');
+    wx.showModal({
+      title: '提示',
+      confirmColor: '#00AADD',
+      content: '若对当前占位费订单有疑问,请拨打客服电话4009608068,工作时间:08:00-18:00',
+      complete: (res) => {
+        // 可以在这里添加回调逻辑
+        if (res.confirm) {
+          console.log('用户点击了确认按钮');
+        }else{
+          console.log('用户点击了取消按钮');
+        }
+      }
+    });
+
+
+  },
+  cancelM:function(e){
+    this.setData({
+       hiddenmodalput: true,
+    })
+ },
+
+ confirmM: function (e) {
+    console.log("姓名:" + this.data.name + "  电话:" + this.data.phoneNum);
+ },
+
+ iName: function (e) {
+    this.setData({
+       name:e.detail.value
+    })
+ },
+ iPhoneNum: function (e) {
+    this.setData({
+       phoneNum: e.detail.value
+    })
+ },
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function() {
+
+  },
+  bindScrollTolowerEvent: function(){
+    this.getPage();
+  },
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function() {
+
+  }
+})

+ 4 - 0
pages/ucenter/zhanw/zhanw.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "占位费记录"
+}

+ 59 - 0
pages/ucenter/zhanw/zhanw.wxml

@@ -0,0 +1,59 @@
+<!--pages/ucenter/zhanw/zhanw.wxml-->
+<view class="topBar">
+<view class="card {{searchIndex==-1?'active':''}}" data-idx="-1" bindtap="switchBar">未支付</view>
+<view class="card {{searchIndex==4?'active':''}}" data-idx="4" bindtap="switchBar">已支付</view>
+<view class="card {{searchIndex==6?'active':''}}" data-idx="6" bindtap="switchBar">已取消</view>
+<view class="card {{searchIndex==7?'active':''}}" data-idx="7" bindtap="switchBar">已退款</view>
+</view>
+
+<scroll-view class='context' scroll-y='true'  bindscrolltolower="bindScrollTolowerEvent" >
+  <view class='context_block'></view>
+  
+  <block  wx:for="{{occupyFeeOrderList}}" wx:key="id">
+    <view class="text_context {{item.height}}" hover-class='active'>
+    <view class="upFlag" >{{item.occupyStatusCN}}</view>
+    
+      <view class='charging_text_title'>
+        <view class='charging'>
+          <image src='/images/zhangweifei.png'></image>
+        </view>
+        <view class='charging_text_title1'>
+          <text class='bold'>{{item.chargstationname}}</text>
+          <text class="h1">{{item.chargpileids}}</text>
+        </view>
+      </view>
+      <text>{{item.chargpilename}}</text>
+      <view  class="inline-view">
+        <view class='inlineView' decode='true'>
+        <text space="nbsp">占位开始时间: </text>
+        <text class="gray2"> {{item.occupyBeginTime}}</text>
+        </view>
+      </view>
+      <view  class="inline-view">
+        <view class='inlineView' decode='true'><text space="nbsp">占位结束时间: </text>  <text class="gray2">{{item.occupyEndTime}}</text></view>
+      </view>
+      <view style='line-height:0;' >
+        <text class='inline gray1'>占位时长:</text>
+        <text class='inline red'>{{item.occupyTime || 0}}</text>
+        <text class='inline red' decode='true'>分</text>
+        <text class='inline gray1' decode='true'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;占位费:</text>
+        <text class='inline red'>{{item.occupyFee || 0}}</text>
+        <text class='inline red'>元</text> 
+        
+      </view>
+      <view class="button-container">
+  <!-- 使用 wx:if 动态控制按钮显示 -->
+  <view  class="downBtn" wx:if="{{item.customerServiceFlag}}" bindtap="customerServiceBtn" data-idx="{{item.id}}">去支付</view>
+  <view  class="downBtn" wx:if="{{item.cancleBtnFlag}}" bindtap="cancleBtn">联系客服</view>
+  <!-- <modal hidden="{{hiddenmodalput}}" title="完善资料" confirm-text="提交" cancel-text="取消" bindcancel="cancelM" bindconfirm="confirmM">
+      <input bindinput='iName' type='text' placeholder="请输入姓名..." auto-focus/>
+      <input bindinput='iPhoneNum' type='number' placeholder="请输入手机号码..." />
+   </modal> -->
+</view>
+    </view>
+  </block>
+  <view class='context_block'></view>
+  <view class='context_block'></view>
+  <view class='context_block'></view>
+  <view class='context_block'></view>
+</scroll-view>

+ 183 - 0
pages/ucenter/zhanw/zhanw.wxss

@@ -0,0 +1,183 @@
+/* pages/ucenter/zhanw/zhanw.wxss */
+
+page {
+  background-color: #f4f4f4;
+  height: 100%;
+  overflow-y: hidden;
+}
+
+.context {
+  height: 100%;
+}
+
+.context_block {
+  width: 100%;
+  height: 24rpx;
+}
+.upFlag{
+  position: absolute;
+  color:#E99D42;
+  font-size: 28rpx;
+  right: 20rpx;
+  top: 60rpx;
+}
+.button-container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+}
+.downBtn , .downBtn2{
+  margin-left: 10rpx; 
+}
+
+.downBtn{
+  color:#000000;
+  border: 1px solid #aaaaaa;
+  border-radius: 30rpx;
+  padding: 6rpx 30rpx;
+  font-size: 22rpx;
+  font-weight: 600;
+}
+
+.text_context {
+  position: relative;
+  height: 308rpx;
+  background: #fff;
+  padding: 0 30rpx;
+  margin: 0 28rpx 24rpx 28rpx;
+  border-radius: 20rpx;
+  box-shadow: 0rpx 4rpx 4rpx #d5d5d5;
+}
+
+.text_context.h1 {
+  height: 396rpx;
+}
+.text_context.h2 {
+  height: 478rpx;
+}
+.text_context.h3 {
+  height: 348rpx;
+}
+.text_context.h4 {
+  height: 308rpx;
+}
+
+.text_context.active {
+  background-color: #ebebeb;
+}
+
+.charging_text_title {
+  height: 105rpx;
+  width: 100%;
+  display: flex;
+  margin-bottom: 20rpx;
+}
+
+.charging_text_title1 {
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.charging {
+  width: 62rpx;
+  height: 62rpx;
+  margin: 30rpx 30rpx 30rpx 0;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.charging image {
+  width: 62rpx;
+  height: 62rpx;
+}
+
+.text_context text {
+  margin: 0 0 18rpx 0;
+  display: block;
+  font-size: 26rpx;
+  /* font-family: 'Lucida Sans',
+                 'Lucida Sans Regular',
+                 'Lucida Grande',
+                 'Lucida Sans Unicode',
+                 Geneva,
+                 Verdana,
+                 sans-serif; */
+  color: #231400;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  line-height: 30rpx;
+  height: 30rpx;
+  min-height: 30rpx;
+}
+
+.text_context .bold {
+  font-weight: bold;
+  line-height: 34rpx;
+  height: 34rpx;
+  min-height: 34rpx;
+  margin-top: 28rpx;
+  margin-bottom: 8rpx;
+  display: block;  
+  font-size: 30rpx;
+}
+.text_context .h1 {
+  margin: 0rpx 0rpx 24rpx 0rpx;
+  font-size: 24rpx;
+  line-height: 28rpx;
+  height: 28rpx;
+  min-height: 28rpx;
+  color: #a3a3a3;
+}
+.inline-view{
+  height: 42rpx;
+}
+text.gray {
+  color: #a3a3a3;
+  font-size: 24rpx;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  line-height: 28rpx;
+  height: 28rpx;
+  min-height: 28rpx;
+  margin-bottom: 24rpx;
+}
+text.gray1 {
+  color: #575757;
+}
+
+text.gray2 {
+  color: #AAAAAA;
+}
+
+.inlineView text{
+  display: inline-block;
+}
+text.inline {
+  display: inline-block;
+}
+view.inline {
+  display: inline-block;
+}
+text.red {
+  color: #AAAAAA;
+}
+
+.topBar{
+  height: 60rpx;
+  font-size: 30rpx;
+  line-height: 80rpx;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 0 40rpx;
+  color:#848484;
+}
+
+.topBar .active{
+  color: #000000;
+}