体现界面优化

projects/live-app/src/modules/account/wattle/wattle.component.scss

@@ -31,7 +31,7 @@
 
     .account_info {
       display: flex;
-      justify-content: center;
+      justify-content: space-around;
       align-items: center;
       width: 100%;
       height: 14vh;

projects/live-app/src/modules/account/withdrawal/withdrawal.component.html

@@ -1,5 +1,10 @@
 <nav title="申请提现"></nav>
 <ion-content class="content">
+  <div class="bar">
+    <div class="title">可提现收益</div>
+    <div class="total">￥{{income.balance}}</div>
+    <div class="tp">累计总收益￥{{income.total}}</div>
+  </div>
   <div class="way">
     <div class="icon"></div>
     提现方式
@@ -62,7 +67,7 @@
   </div>
   <div class="way">
     <div class="icon"></div>
-    提现金额(可提现：￥{{ balance || 0 }})
+    提现金额(可提现：￥{{ income.balance || 0 }})
   </div>
   <div class="chooses">
     <div>￥</div>
@@ -74,6 +79,7 @@
       autocomplete="off"
       placeholder="请输入提现金额"
       class="input"
+      (blur)="onChangePrice()"
     />
   </div>
   <div class="withdrawal" (click)="withdrawal()">立即提现</div>

projects/live-app/src/modules/account/withdrawal/withdrawal.component.scss

@@ -6,7 +6,21 @@
   background: #dbe5fd;
   z-index: 100;
 }
-
+.bar{
+  margin: 20px;
+    background: #fd706b;
+    color: white;
+    padding: 10px;
+    border-radius: 10px;
+    text-align: center;
+    .total{
+      font-size: 20px;
+      margin: 4px auto 10px;
+    }
+    .tp{
+      font-size: 14px;
+    }
+}
 .content {
   background-image: url("https://file-cloud.fmode.cn/Qje9D4bqol/20241220/b313ov054708770.png");
   background-repeat: no-repeat;
@@ -19,10 +33,10 @@
   .way {
     margin: 5.1282vw;
     display: flex;
-    color: #5973ff;
+    color: #e7435c;
 
     .icon {
-      background: #5973ff;
+      background: #e7435c;
       width: 0.7692vw;
       height: 5.1282vw;
       margin-right: 1.2821vw;
@@ -32,14 +46,14 @@
   .choose {
     margin: 5.1282vw;
     border-radius: 2.3077vw;
-    border: 0.2564vw solid #000000;
+    border: 0.2564vw solid #e7435c;
     padding: 2.5641vw;
 
     .type {
       // display: flex;
 
       .icon {
-        background: #5973ff;
+        background: #e7435c;
         margin: auto 0;
         width: 3.8462vw;
         height: 3.8462vw;
@@ -53,7 +67,8 @@
         // border: none;
         border: 0.2564vw solid #cbcbcb;
         border-radius: 1.0256vw;
-        padding: 0.5128vw 1.0256vw;
+        padding: 6px 10px;
+        width: 100%;
       }
 
       .bank {
@@ -65,13 +80,14 @@
   .chooses {
     margin: 5.1282vw;
     border-radius: 2.3077vw;
-    border: 0.2564vw solid #000000;
-    padding: 2.5641vw;
+    border: 0.2564vw solid #e7435c;
+    padding: 6px 10px;
     display: flex;
 
     .input {
       background: none;
       border: none;
+      flex: 1;
     }
   }
 
@@ -79,7 +95,7 @@
     width: 60%;
     margin: 12.8205vw auto;
     text-align: center;
-    background: #5973ff;
+    background: #e7435c;
     border-radius: 4.6154vw;
     color: #ffffff;
     padding: 2.5641vw 0;

projects/live-app/src/modules/account/withdrawal/withdrawal.component.ts

@@ -21,7 +21,16 @@ export class WithdrawalComponent implements OnInit {
     private aiServ: AiChatService
   ) {}
   price: number = 0;
-  balance: number = 0;
+  income:{
+    balance:number,
+    used:number,
+    total:number
+  } = {
+    balance:0,
+    used:0,
+    total:0
+  }
+
   bankinfo: {
     bankname: string;
     name: string;
@@ -53,7 +62,10 @@ export class WithdrawalComponent implements OnInit {
     }
     console.log(this.account);
     let anthorWallet = await this.aiServ.getAuthorWallet(id!);
-    this.balance = anthorWallet.balance;
+    this.income = anthorWallet;
+  }
+  onChangePrice(){
+    this.price = Math.round(this.price * 100) / 100;
   }
   async withdrawal() {
     if (
@@ -68,7 +80,7 @@ export class WithdrawalComponent implements OnInit {
       this.toast('请输入正确金额', 1500);
       return;
     }
-    if (this.balance < this.price) {
+    if (this.income.balance < this.price) {
       this.toast('提现金额不得超过余额！', 1500);
       return;
     }