充值记录意见修改、监听小程序信息代码添加

src/assets/scss/common.scss

@@ -17,11 +17,11 @@
         line-height: 44px;
     }
     .img {
-        width: 25px;
         margin: 4px auto;
         float: left;
         img {
-            border-radius: 50%;
+            width: 35px;
+            height: 35px;
         }
     }
 }

src/router/index.js

@@ -35,6 +35,12 @@ const routes = [
         component: () =>
             import ( /* webpackChunkName: "about" */ '../views/amount')
     },
+    {
+        path: '/result', //充值结果页面
+        name: 'result',
+        component: () =>
+            import ( /* webpackChunkName: "about" */ '../views/result')
+    },
     // {
     //     path: '/amount',
     //     name: 'amount',

src/views/function/index.vue

@@ -2,7 +2,7 @@
   <div class="mianBox">
     <van-row class="headerBox">
       <!-- <van-icon name="arrow-left" @click="$router.go(-1)" /> -->
-      <van-image :src="portrait" class="img"  @click="information" />
+      <van-image :src="portrait" class="img"  @click="information" round/>
       <div class="headerTitle">{{title}}</div>
       
     </van-row>
@@ -282,7 +282,6 @@ export default {
     information(){
       let parmas = encrypt(123)
       let url = window.location.host
-      //window.location.href = `http://${url}/vuepay/html/company.html?params=${parmas}`
       this.$router.push({ path: "/information"})
     },
     //一卡通

src/views/recharge/index.vue

@@ -74,6 +74,29 @@ export default {
     }else{
       document.title = '中国东信智慧园区'
     }
+
+    // 监听APP的传过来的消息
+    window.document.addEventListener('message', function (e) {
+        /*
+        * e.data 是APP返回的JSON字符串，字段：
+        * eventType 事件类型
+        * source    来源
+        * data      业务参数 - 返回数据放这里
+        * */
+        const res = JSON.parse(e.data); // 报文参数
+
+        switch (res.eventType) {
+            case "WXLaunchMiniProgramReq.Resp": { // 小程序返回·
+                // Do Something ...
+                if(res.errCode == "0"){
+                  this.$router.push({ path: "/result",query: {id: 0}})
+                }else{
+                   this.$router.push({ path: "/result",query: {id: 1}})
+                }
+                break
+            }
+        }
+    })
   
   },
   created() {

src/views/record/index.vue

@@ -11,8 +11,13 @@
       line-width="60px"
       @click="tab"
     >
+    <div class="timeSelectWrap">
+      <p class="start" @click="start(1)">{{startTime2}}</p> ~
+      <p class="end" @click="end(2)">{{endTime2}}</p>
+      <van-icon name="search"  @click="search" class="searchIcon"/>
+    </div>
       <van-tab title="充值记录">
-        <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
+        <div class="listHeight">
           <van-list
             v-model="loading"
             :finished="finished"
@@ -36,10 +41,10 @@
               <van-col span="6" class="jlMoney just">{{ item.amt }}元</van-col>
             </van-row>
           </van-list>
-        <!-- </van-pull-refresh> -->
+        </div>
       </van-tab>
       <van-tab title="消费记录">
-        <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
+        <div class="listHeight">
           <van-list
             v-model="loading"
             :finished="finished"
@@ -57,15 +62,11 @@
               <van-col span="6" class="jlMoney negative"> - {{ item.amt }}元</van-col>
             </van-row>
           </van-list>
-        <!-- </van-pull-refresh> -->
+        </div>
+
       </van-tab>
     </van-tabs>
-    <div class="timeSelectWrap">
-      <p class="start" @click="start(1)">开始时间：{{startTime2}}</p>
-      <p class="end" @click="end(2)">结束时间：{{endTime2}}</p>
-      <van-button  size="mini" class="search" @click="search">搜索</van-button>
-      
-    </div>
+    
 
     <van-overlay :show="loading3" style="z-index: 1; position: fixed" />
     <van-datetime-picker
@@ -419,18 +420,27 @@ export default {
   overflow-y: auto;
 }
 .timeSelectWrap{
-  width:100%;
-  position: absolute;
-  left:10px;
+  width:calc(100% - 20px);
+  margin:10px;
+  overflow: hidden;
+  background-color: #fff;
+  border:1px solid #ccc;
+  border-radius: 20px;
+  height:35px;
+  line-height: 35px;
+  position: relative;
   .start{
     display: inline-block;
-    width:42%;
-    font-size: 12px;
+    font-size: 16px;
+    line-height: 30px;
+    margin-left:15px;
+    width:30%;
   }
   .end{
     display: inline-block;
-    width:42%;
-    font-size: 12px;
+    font-size: 16px;
+    width:30%;
+    margin-left:10px;
   }
   .search{
     background-color: rgba(242, 46, 60, 1);
@@ -438,7 +448,14 @@ export default {
     margin-top:-2px;
     color:#fff;
     width:10%;
-    vertical-align: top;
+    
+  }
+  .searchIcon{
+    color:rgba(242, 46, 60, 1);
+    font-size: 30px;
+    position: absolute;
+    top:4px;
+    right:15px;
   }
 }
 .timeSelect2{
@@ -465,68 +482,68 @@ export default {
   z-index: 10
 }
 
-
-
-
-
-
-
-
-
-
-
-
-.listData{
-  margin-top:40px;
-  height:calc(100vh - 10rem);
-  overflow-y: scroll;
-}
-/deep/ .van-list__finished-text{
-  margin-bottom:30px !important;
-}
-@media screen and (max-width:374px){
-  .timeSelect{
-    position: absolute; 
-    top: 86px; 
-  }
-}
-@media screen and (max-width:350px){
-  .timeSelect{
-    position: absolute; 
-    top: 84px; 
-  }
-}
-@media screen and (min-width:410px){
+.listHeight{
+  margin-top:10px;
+  height:72vh;
+  width:100%;
+  overflow: hidden;
+  padding-bottom:50px;
   .listData{
-    margin-top:50px
+    height:100%;
+    overflow-y: scroll;
+    padding:0 4px;
   }
 }
 
-@media screen and (min-height:550px) and (max-height:570px){
-   .timeSelectWrap{
-      top:16%;
-  }
-}
-@media screen and (min-height:600px) and (max-height:650px){
-   .timeSelectWrap{
-      top:16%;
-  }
-}
-@media screen and (min-height:651px) and (max-height:670px){
-  .timeSelectWrap{
-      top:15%;
-  }
-}
-@media screen and (min-height:680px) and (max-height:740px){
-  .timeSelectWrap{
-      top:15%;
-  }
-}
-@media screen and (min-height:800px){
-  .timeSelectWrap{
-      top:13%;
-  }
+/deep/ .van-list__finished-text{
+  margin-bottom:30px !important;
 }
+// @media screen and (max-width:374px){
+//   .timeSelect{
+//     position: absolute; 
+//     top: 86px; 
+//   }
+//   .listData{
+//     margin-top:70px
+//   }
+// }
+// @media screen and (max-width:350px){
+//   .timeSelect{
+//     position: absolute; 
+//     top: 84px; 
+//   }
+// }
+// @media screen and (min-width:410px){
+//   .listData{
+//     margin-top:60px
+//   }
+// }
+
+// @media screen and (min-height:550px) and (max-height:570px){
+//    .timeSelectWrap{
+//       top:16%;
+//   }
+// }
+// @media screen and (min-height:600px) and (max-height:650px){
+//    .timeSelectWrap{
+//       top:18%;
+//   }
+// }
+// @media screen and (min-height:651px) and (max-height:670px){
+//   .timeSelectWrap{
+//       top:15%;
+//   }
+// }
+// @media screen and (min-height:680px) and (max-height:740px){
+//   .timeSelectWrap{
+//       top:15%;
+//   }
+// }
+// @media screen and (min-height:800px){
+//   .timeSelectWrap{
+//       top:13%;
+//   }
+// }
 </style>
 <style>
 /* .van-cell__title, .van-cell__value{
@@ -535,4 +552,7 @@ export default {
 .van-cell__value{
   margin-left:20px
 } */
+.van-tab__text--ellipsis{
+  font-size: 16px !important;
+}
 </style>

src/views/result/index.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="mianBox" >
+        <van-row class="headerBox">
+            <van-icon name="arrow-left" @click="$router.go(-1)" />
+            充值结果
+        </van-row>
+        <div v-if="result">
+            <img src="../../assets/image/success.png" alt="" class="result">
+            <van-row class="text">支付完成</van-row>
+            <van-button   type="danger" @click="$router.go(-1)" class="fanhui">返 回</van-button>
+        </div>
+        <div v-if="!result">
+            <img src="../../assets/image/fail.png" alt="" class="result">
+            <van-row class="text">支付失败</van-row>
+            <van-button  type="danger" @click="$router.go(-1)" class="fanhui">返 回</van-button>
+        </div>
+    </div>
+        
+</template>
+<script>
+export default {
+  data() {
+    return {
+      result:undefined,
+    };
+  },
+
+  created() {
+     if(this.$route.query){
+        if(this.$route.query.id == "0"){
+            this.result = false
+        }else{
+            this.result = true
+        }
+    }
+  },
+  methods: {
+    fanhui(){
+        // window.location.href = ""
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mianBox {
+  width: 100vw;
+  height: 100vh;
+  padding:20px;
+  color: #000;
+  box-sizing: border-box;
+  overflow-y: hidden;
+  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
+  letter-spacing: 1px;
+  text-align: center;
+  position: relative;
+  .result{
+      width:30%;
+      margin:50px 35% 0;
+
+  }
+  .text{
+    font-size: 16px;
+    margin:10px auto;
+  }
+  .fanhui{
+    //   width: calc(100% - 40px);
+    //   position: absolute;
+    //   bottom:20px;
+    //   left:20px;
+      width:100%;
+      margin-top:60px;
+      font-size: 18px;
+      
+  }
+}
+</style>