充值记录 消费记录UI修改

src/assets/less/consume.less

@@ -7,7 +7,7 @@
     align-items: center;
 
     text {
-      color: #333;
+      color: #999;
       font-size: 30px;
     }
 
@@ -25,12 +25,15 @@
         margin-top: 10px;
 
         &--active {
-          background-color: #3284ff;
+          background-color: #EF5952;
+          
         }
       }
       
       .active {
-        color: #3284ff;
+        color: #EF5952;
+        font-size:36px;
+          font-weight: bold;
       }
     }
   }

src/assets/less/recharge.less

@@ -2,61 +2,44 @@
   flex-direction: column;
 
   .user-account__wrap {
-    flex-direction: column;
-    border-bottom: 12px solid #f7f7f7;
-
-    .title-bar {
-      margin: 35px 0;
-      align-items: center;
-
-      .title {
-        font-size: 28px;
-        color: #3284ff;
+    width: 690px;
+    height: 180px;
+    background: linear-gradient(45deg, #fff2e2, #fff6e2);
+    border-radius: 12px;
+    margin: 20px auto 40px;
+    align-items: center;
+    padding: 0 30px 0 40px;
+    justify-content: space-between;
+    .account-blance {
+      flex-direction: column;
+      .blance-title {
+        font-size: 36px;
+        color: #3d2b15;
+        font-weight: bold;
       }
-
-      .border-bar {
-        width: 6px;
-        height: 100%;
-        background-color: #3284ff;
-        border-radius: 4px;
-        margin-right: 20px;
+      .blance-info {
+        font-size: 30px;
+        color: #ef5952;
       }
     }
-
-    .balance-bar {
-      justify-content: space-between;
-      align-items: center;
-      padding: 0 40px;
-      margin-bottom: 34px;
-
-      .balance {
-        text {
-          font-size: 24px;
-          color: #333;
-        }
-
-        .balance-number {
-          color: #ff6060;
-          font-weight: bold;
-          font-size: 32px;
-        }
-      }
-
-      .pay-btn {
-        background-color: #ff6060;
-        color: #fff;
-        font-size: 26px;
-        text-align: center;
-        width: 180px;
-        height: 60px;
-        line-height: 60px;
-        border-radius: 6px;
-      }
+    .account-pay {
+      border-radius: 26px;
+      background-color: #ef5952;
+      width: 150px;
+      height: 50px;
+      font-size: 24px;
+      color: #fff;
+      line-height: 50px;
+      text-align: center;
     }
   }
-
+  .title-bar {
+    margin: 10px 0 0 24px;
+    font-size: 32px;
+  }
   .recharge-list__wrap {
     border-bottom: 0;
+    flex-direction: column;
   }
 
   .recharge-list {
@@ -65,33 +48,29 @@
     .recharge-item {
       justify-content: space-between;
       align-items: center;
-      margin: 24px 24px 0;
-      border-bottom: 2px solid #f7f7f7;
 
+      padding: 24px 24px 0;
+      border-bottom: 2px solid #f7f7f7;
       .item-info {
         flex: 1;
         flex-direction: column;
         justify-content: flex-start;
         align-items: flex-start;
-
         .item-name,
         .item-number {
           font-size: 24px;
           color: #999;
         }
-
         .item-number {
           margin: 10px 0;
         }
 
         .item-pay {
           padding-bottom: 20px;
-
           text {
             font-size: 24px;
             color: #333;
           }
-
           .pay-number {
             font-size: 36px;
             font-weight: bold;
@@ -99,15 +78,13 @@
           }
         }
       }
-
+      .paid {
+        color: #999;
+      }
       .item-status {
         font-size: 24px;
         color: #ff6060;
       }
-
-      .paid {
-        color: greenyellow;
-      }
     }
   }
-}
+}

src/manifest.json

@@ -54,7 +54,7 @@
     "logLevel": "debug"
   },
   "router": {
-    "entry": "views/Shelf",
+    "entry": "views/Recharge",
     "pages": {
       "views/Index": {
         "component": "index"

src/views/Recharge/index.ux

@@ -2,38 +2,32 @@
  
 <template>
   <div class="recharge-record__wrap">
-    <div class="user-account__wrap">
-      <div class="title-bar">
-        <text class="border-bar"></text>
-        <text class="title">账户信息</text>
-      </div>
-      <div class="balance-bar">
-        <div class="balance">
-          <text>余额：</text>
-          <text class="balance-number">{{user.balance}}</text>
-          <text>书币</text>
-        </div>
-        <text class="pay-btn" @click="toPay">立即充值</text>
+    <div class="user-account__wrap" if="{{user}}">
+      <div class="account-blance">
+        <text class="blance-title">余额</text>
+        <text class="blance-info">{{user.balance}}书币</text>
       </div>
+      <text class="account-pay" @click="toPay">
+        去充值
+      </text>
     </div>
-    <div class="user-account__wrap recharge-list__wrap">
+
+    <div class=" recharge-list__wrap">
       <div class="title-bar">
-        <text class="border-bar"></text>
         <text class="title">充值订单</text>
       </div>
       <div class="recharge-list">
         <block for="{{rechargeList}}">
           <div class="recharge-item">
             <div class="item-info">
-              <text class="item-name">订单号：</text>
-              <text class="item-number">{{$item.trade_no}}</text>
+              <text class="item-number">订单号：{{$item.trade_no}}</text>
               <div class="item-pay">
                 <text>充值</text>
                 <text class="pay-number">{{$item.price}}</text>
                 <text>元</text>
               </div>
             </div>
-            <text class="item-status">{{$item.status==='UNPAID'?'未支付':'已支付'}}</text>
+            <text class="item-status {{$item.status==='UNPAID'?'':'paid'}}" >{{$item.status==='UNPAID'?'未支付':'已支付'}}</text>
           </div>
         </block>
       </div>
@@ -62,6 +56,7 @@ export default {
   async getUserInfo(){
     let user =await getUserInfo();
     this.user=user;
+    console.log(this.user,'rrrrrrrrrrr')
   },
   async getOrder(page=1,page_size=10) {
     let res= await rechargeApi({page:page,page_size});