妥妥银服-贷款计算器样式优化

htmldev/loan/src/views/loan/calculator/index.vue

@@ -3,7 +3,26 @@
     <!--信息编辑-->
     <van-form ref="myVanform">
       <!--标题：妥妥计算器-->
-      <img class="title" src="./image/icon_title@2x.png" alt="">
+      <img class="title" src="./image/icon_title@2x.png" alt="" v-show="false">
+      <!--计算结果展示-->
+      <div class="calculator-wrap">
+        <div class="left">
+          <p class="label">参考月供(元)</p>
+          <p class="value">{{ meiyuehuanchuan }}</p>
+          <div class="wrap">
+            <span class="label">还款总额(元)</span>
+            <span class="value">{{ totalPrice ? totalPrice + '万' : '' }}</span>
+          </div>
+        </div>
+        <div class="right">
+          <p class="label">{{ hkfangshiIndex === 1 ? '每月递减(元)' : '' }}</p>
+          <p class="value">{{ hkfangshiIndex === 1 ? yuegongdijian : '' }}</p>
+          <div class="wrap">
+            <span class="label">支付利息(元)</span>
+            <span class="value">{{ zonglixi ? zonglixi + '万' : '' }}</span>
+          </div>
+        </div>
+      </div>
       <van-field
         readonly
         clickable
@@ -128,35 +147,6 @@
                   type="info"
                   @click="handleComputed">开始计算
       </van-button>
-      <p class="ttyf-tip">计算结果：</p>
-      <van-field readonly
-                 clickable
-                 name="meiyuehuanchuan"
-                 :value="meiyuehuanchuan"
-                 :border="false"
-                 placeholder=""
-                 class="ttyf-van-cell">
-        <template #label>
-          <p>
-              <span v-for="(str, index) in '每月还款(元)'"
-                    :key="index">{{ str }}</span>
-          </p>
-        </template>
-      </van-field>
-      <van-field readonly
-                 clickable
-                 name="zonglixi"
-                 :value="zonglixi"
-                 :border="false"
-                 placeholder=""
-                 class="ttyf-van-cell">
-        <template #label>
-          <p>
-              <span v-for="(str, index) in '总共支付利息(万元)'"
-                    :key="index">{{ str }}</span>
-          </p>
-        </template>
-      </van-field>
       <div class="footer"
            @click="$router.push({name: 'loanRecommend'})"
            v-if="recommendedProduct.length">
@@ -242,8 +232,10 @@ export default {
       sdjine: '', // 商贷金额
       sdlilv: '', // 商贷利率
       hkfangshiIndex: 0,
-      meiyuehuanchuan: '', // 每月还款
-      zonglixi: '', // 总共支付利息
+      meiyuehuanchuan: '0.00', // 每月还款
+      zonglixi: '0.00', // 总共支付利息
+      totalPrice: '0.00', // 还款总额
+      yuegongdijian: '0.00', // 月供递减
       showPicker0: false,
       columns0: loanConfig.loanType,
       defaultIndex0: 0,
@@ -295,8 +287,10 @@ export default {
       this.sdjine = ''
       this.sdlilv = ''
       this.hkfangshiIndex = 0
-      this.meiyuehuanchuan = ''
-      this.zonglixi = ''
+      this.meiyuehuanchuan = '0.00'
+      this.zonglixi = '0.00'
+      this.totalPrice = '0.00'
+      this.yuegongdijian = '0.00'
       this.showPicker0 = false
       this.columns0 = loanConfig.loanType
       this.defaultIndex0 = 0
@@ -360,8 +354,10 @@ export default {
       const sdlilv = this.sdlilv / 100
       const gjjlilv = this.gjjlilv / 100
       let result = {}
-      let yuegong = ''
-      let totalLixi = ''
+      let yuegong = '0.00'
+      let totalLixi = '0.00'
+      let totalPrice = '0.00'
+      let yuegongdijian = '0.00'
       // 还款方式
       const payType = this.hkfangshi.value
       switch (this.loanType.value) {
@@ -386,12 +382,23 @@ export default {
         yuegong = this.formatCurrency(result.yuegong)
       }
 
+      if (result.totalPrice) {
+        totalPrice = this.formatCurrency(result.totalPrice / 10000)
+      }
+
       if (result.totalLixi) {
         totalLixi = this.formatCurrency(result.totalLixi / 10000)
         this.fetchRecommendProduct(result.totalLixi)
       }
+
+      if (result.yuegongdijian) {
+        yuegongdijian = result.yuegongdijian.toFixed(2)
+      }
+
       this.meiyuehuanchuan = yuegong
       this.zonglixi = totalLixi
+      this.totalPrice = totalPrice
+      this.yuegongdijian = yuegongdijian
     },
     fetchRecommendProduct (moneyRate) {
       const productMmaxYear = this.gjjnianxian.value
@@ -448,14 +455,57 @@ form {
   align-items: center;
   width: 356px;
   border-radius: 16px;
-  padding: 4px 0 11px;
+  padding: 0 0 11px;
   margin: 0 auto;
   background: #fff;
 
   img.title {
     width: 349px;
     height: 56px;
-    margin-bottom: 16px;
+  }
+}
+
+.calculator-wrap {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  padding: 10px 0 20px;
+  margin-bottom: 16px;
+  background: #EBE1D7;
+
+  .left,
+  .right {
+    width: 50%;
+    padding-left: 20px;
+  }
+
+  p.label,
+  span.label {
+    height: 17px;
+    font-size: 12px;
+    line-height: 17px;
+  }
+
+  p.value,
+  span.value {
+    height: 22px;
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+    line-height: 22px;
+  }
+
+  span.value {
+    margin-left: 4px;
+  }
+
+  .wrap {
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
   }
 }
 
@@ -545,7 +595,6 @@ form {
   background: #FEF0E7;
   border-radius: 4px;
   padding-right: 15px;
-  margin-top: 13px;
   text-align: right;
 
   p {