增加手机端充值记录显示。

src/api/remoteApi.js

@@ -48,6 +48,18 @@ var remoteApi = {
     },
     tradePrecreatePay: function(recordId) {
         return request.get(basePath + `/aliPay/tradePrecreatePay?recordId=${recordId}`);
+    },
+    queryRechargeList: function(roomId,pageNum,pageSize) {
+        // var formData = new FormData()
+
+        // formData.append("roomId",roomId);
+        // formData.append("pageNum",pageNum);
+        // formData.append("pageSize",pageSize);
+        return request.get(basePath + `/mobileApi/rechargeList`,{
+            params:{
+                roomId,pageNum,pageSize
+            }
+        });
     }
 }
 

src/assets/css/ammeter.css

@@ -128,8 +128,19 @@
     height: 100%;
     background-color: #eee;
     position: fixed;
+    display: flex;
+    flex-direction: column;
+}
+
+.paylist-wrapper {
+    flex:1;
+    overflow: auto;
 }
 
+/* .paylist-body .van-pull-refresh{
+    flex: 1;
+} */
+
 .fyycontent-list .van-cell, .fyycontent-list p {
     padding: 5px 15px;
 }

src/components/Pay.vue

@@ -52,7 +52,7 @@
       overlay
       confirm = "paying = false"
     >
-      <div ref="qrcodeDiv" class="qrcode"></div>
+      <div ref="qrcodeDiv" class="qrcode"></div>  
     </van-dialog>
   </div>
 </template>
@@ -82,7 +82,12 @@ export default {
       this.$router.push("/Paylist")
     },
     back() {
-      this.$router.push("/")
+      this.$router.push({
+        path:"/",
+        query: {
+            roomId : this.selectedRoomId 
+        }
+      });
     },
     pay() {
       var self = this
@@ -163,7 +168,6 @@ export default {
     }
   },
   mounted () {
-    // 当前页面是否获取到了openid?
     this.roomId = this.$route.query.roomId;
 
     if(this.roomId==null || this.roomId.length==0){

src/components/Paylist.vue

@@ -1,44 +1,118 @@
 <template id='Paylist'>
   <div class="paylist-body">
     <van-nav-bar title="充值记录" left-arrow @click-left="back"></van-nav-bar>
-    <div class="fyycontent-list">
-      <van-cell-group>
-        <p>
-          2019年11月21日
-          <span>14:20</span>
-        </p>
-        <van-cell title="充值电量" value="100度" />
-        <van-cell title="核定金额" value="50.66元" />
-        <van-cell title="充值方式" value="线下支付" />
-      </van-cell-group>
-      <van-cell-group>
-        <p>
-          2019年11月21日
-          <span>14:20</span>
-        </p>
-        <van-cell title="充值电量" value="100度" />
-        <van-cell title="核定金额" value="50.66元" />
-        <van-cell title="充值方式" value="线下支付" />
-      </van-cell-group>
-      <van-cell-group>
-        <p>
-          2019年11月21日
-          <span>14:20</span>
-        </p>
-        <van-cell title="充值电量" value="100度" />
-        <van-cell title="核定金额" value="50.66元" />
-        <van-cell title="充值方式" value="线下支付" />
-      </van-cell-group>
+    <div class="paylist-wrapper">
+      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+        <van-list
+          v-model="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
+        >
+          <div class="fyycontent-list">
+            <van-cell-group v-for="row in rows" :key="row.id">
+              <p v-html="row.createTime"></p>
+              <van-cell title="充值电量" :value="row.buyElectricity + '度'" />
+              <van-cell title="核定金额" :value="row.buyAmount + '元'" />
+              <van-cell title="充值方式" :value="displayBuyType(row.buyType)" />
+              <van-cell title="充电状态" :value="displayChargingStatus(row.chargingStatus)" />
+            </van-cell-group>
+          </div>
+        </van-list>
+      </van-pull-refresh>
     </div>
   </div>
 </template>
 
 <script>
+import remoteApi from '@/api/remoteApi'
+import Cookies from 'js-cookie'
+
 export default {
-    methods: {
+  data () {
+    return {
+      pageNum: 1,
+      pageSize: 10,
+      roomId: '',
+      refreshing: false,
+      loading: false,
+      finished: false,
+      rows: []
+    }
+  },
+  methods: {
     back() {
       this.$router.push("/Pay");
+    },
+    onRefresh() {
+      this.pageNum = 1;
+
+      remoteApi.queryRechargeList(this.roomId,this.pageNum,this.pageSize).then((resp)=>{
+        if(resp.result){
+          this.rows = resp.data.rows;
+          this.refreshing = false;
+        }
+        else{
+          this.$toast.fail(resp.message)
+        }
+      });
+    },
+    onLoad() {
+      remoteApi.queryRechargeList(this.roomId,this.pageNum+1,this.pageSize).then((resp)=>{
+        if(resp.result){
+          resp.data.rows.forEach(row=>{
+            this.rows.push(row)
+          })
+
+          this.loading = false;
+          this.pageNum++;
+
+          if(resp.data.totalRows<= this.rows.length){
+            this.finished = true;
+          }
+        }
+        else{
+          this.$toast.fail(resp.message)
+        }
+      });
+    },
+    displayBuyType(buyType){
+      var text = "";
+
+      if(buyType=='alipay'){
+        text = "支付宝";
+      }
+      else if(buyType=='weipay'){
+        text ="微信";
+      }
+      else if(buyType=='cash'){
+        text = "现金";
+      }
+
+      return text;
+    },
+    displayChargingStatus(status){
+      var text = "";
+
+      if(status=="10"){
+        text = "未充电";
+      }
+      else if(status=="20"){
+        text = "已充电";
+      }
+
+      return text;
     }
+  },
+  mounted () {
+    this.roomId = this.$route.query.roomId;
+
+    if(this.roomId==null || this.roomId.length==0){
+      this.roomId = Cookies.get("selectedRoomId");
+    }
+
+    this.refreshing = true;
+    this.onRefresh();
   }
 };
 </script>

src/main.js

@@ -15,7 +15,10 @@ import { Toast } from 'vant'
 import AxiosPlugin from './plugins/AxiosPlugin'
 import { RadioGroup, Radio } from 'vant'
 import { Image,Dialog,Overlay } from 'vant'
+import { PullRefresh ,List } from 'vant';
 
+Vue.use(PullRefresh)
+Vue.use(List)
 Vue.use(Overlay)
 Vue.use(Dialog)
 Vue.use(Image)