feat: 缴费记录+缴费详情

src/pages/parkingFee/parkingFee.vue

@@ -2,8 +2,6 @@
   <scroll-view
     style="background-color: #F4F7FF"
     scroll-y="true"
-    scroll-bottom="1000"
-    ref="scroll"
   >
     <!--    <authorize ref="authorize"></authorize>-->
     <!--    <div v-if="userInfo && userInfo.vipcode">vipcode: {{userInfo.vipcode}}</div>-->

src/pages/parkingFee/parkingFeeList.vue

@@ -1,5 +1,6 @@
 <template>
   <scroll-view
+    style="background-color: #F4F7FF"
     class="scroll-Y"
     id="slideview"
     scroll-y
@@ -10,48 +11,32 @@
     enable-back-to-top="false"
     @scrolltolower="bindscrolltolower"
   >
-    <!--    <authorize ref="authorize"></authorize>-->
-    <!--    <ul>-->
-    <!--      <li v-for="i in 100" :key="i">{{ i }}</li>-->
-    <!--    </ul>-->
-    <template>
-      <uni-view
-        class="choice_card"
+    <div>
+      <div
+        :class="['choice_card', index === 0 && 'mt30']"
         v-for="(item, index) in list"
         :key="index"
         @click="toDetail(item.orderno)"
       >
-        <uni-view
-          class="choice_card_index choice_card_index1"
-          style="font-size: 30px; margin: 0 12px"
-        >
-          <uni-view style="margin-left: 6px"
-            >{{ item.orderno + '-' + item.carno }}
-          </uni-view>
-          <uni-view style="color: red; margin-right: 6px"
-            >{{ (item.servicefee / 100) | currency }}
-          </uni-view>
-        </uni-view>
-        <uni-view class="choice_card_index choice_card_index2"
+        <div class="carno-box">
+          <div class="carno">{{ item.carno }}</div>
+          <div class="servicefee">{{ (item.servicefee / 100) | currency }}</div>
+        </div>
+        <uni-view class="choice_card_index"
           >{{ item.parkname }}
         </uni-view>
-        <uni-view class="choice_card_index choice_card_index3">
+        <uni-view class="choice_card_index orderno-box">
+          <div class="orderno">订单号 : {{ item.orderno }}</div>
+          <van-icon name="arrow" />
+        </uni-view>
+        <uni-view class="choice_card_index">
           <uni-view>入场时间 : {{ item.entertime }}</uni-view>
-          <uni-view style="margin-right: 20px">
-            <uni-icons
-              class="align-top"
-              color="#B3B3B3"
-              size="14"
-              type="arrowright"
-            />
-          </uni-view>
         </uni-view>
         <uni-view
-          class="choice_card_index choice_card_index3"
-          style="padding-bottom: 20px"
+          class="choice_card_index mb0 pb0"
         >
           <uni-view>停车时长 : {{ item.serviceMin | parkingTime }}</uni-view>
-          <uni-view style="margin-right: 20px">
+          <uni-view :class="['status-box', item.payStatus !== 1 && 'other']">
             {{
               item.refundStatus === 1
                 ? '已退款'
@@ -61,19 +46,13 @@
             }}
           </uni-view>
         </uni-view>
-      </uni-view>
+      </div>
       <uni-view class="notice-info">
         <uni-view
           >{{ list.length === 4 ? '查看更多' : '没有更多数据了' }}
         </uni-view>
-        <uni-icons
-          v-if="list.length === 4"
-          type="arrowdown"
-          size="14"
-          color="##b5b3b3"
-        ></uni-icons>
       </uni-view>
-    </template>
+    </div>
   </scroll-view>
 </template>
 
@@ -87,6 +66,7 @@ let pageNum = 1;
 import moment from 'moment';
 import authorize from '@/components/authorize/authorize.vue';
 import { mapState } from 'vuex';
+// import {data as mockData} from './list'
 
 export default {
   components: {
@@ -208,6 +188,7 @@ export default {
             } else {
               this.initPage();
             }
+            // this.list = mockData.data
           }
           canloading = true;
         },
@@ -232,8 +213,9 @@ export default {
     },
     // 查看详情
     toDetail(orderno) {
+      console.log(216);
       this.$router.push({
-        path: './parkingFeeDetailSuccess?orderNo=' + orderno,
+        path: '/parkingFeeDetailSuccess?orderNo=' + orderno,
       });
     },
   },
@@ -295,45 +277,69 @@ export default {
 }
 
 .choice_card {
-  width: 92%;
-  margin-left: 4%;
-  margin-top: 30px;
+  width: calc( 100% - 120px);
+  margin-left: 30px;
+  // margin-top: 30px;
   margin-bottom: 30px;
-  border-radius: 20px;
-  background-color: #fff;
+  padding: 30px;
+  // border-radius: 20px;
   position: relative;
-
-  .choice_card_index {
-    margin-left: 18px;
-    padding-top: 6px;
-    padding-bottom: 6px;
-    font-size: 28px;
+  background-color: #FAFBFF;
+  border-radius: 4px;
+  border: 1px solid #D8DAE0;
+  &.mt30 {
+    margin-top: 30px;
   }
-
-  .choice_card_index1 {
-    border-bottom: 1px solid #f2f2f2;
+  .carno-box {
     display: flex;
-    align-items: center;
-    padding-top: 22px;
-    padding-bottom: 22px;
+    padding-bottom: 18px;
+    border-bottom: 1px solid #D8DAE0;
     justify-content: space-between;
+    margin-bottom: 20px;
+    .carno {
+      font-size: 36px;
+      color: #333333;
+      font-weight: 600;
+      line-height: 50px;
+    }
+    .servicefee {
+      font-size: 30px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 42px;
+    }
   }
 
-  .choice_card_index2 {
-    padding-top: 20px;
-    color: #808080;
-  }
-
-  .choice_card_index3 {
+  .choice_card_index {
+    font-size: 28px;
+    font-weight: 400;
+    color: #999999;
+    line-height: 40px;
+    margin-bottom: 12px;
     display: flex;
-    align-items: center;
     justify-content: space-between;
-    color: #808080;
+    &.mt0{
+      margin-top: 0;
+    }
+    &.mb0{
+      margin-bottom: 0;
+    }
+    &.pb0{
+      padding-bottom: 0;
+    }
+    .status-box {
+      font-size: 30px;
+      font-weight: 400;
+      color: #064C8A;
+      line-height: 42px;
+      &.other {
+        color: #999999;
+      }
+    }
   }
-
-  .choice_card_index4 {
-    color: #808080;
-    padding-bottom: 20px;
+  .orderno-box {
+    display: flex;
+    justify-content: space-between;
   }
 }