计算器-代码格式化

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

@@ -22,15 +22,15 @@
         </template>
       </van-field>
       <!--公积金-->
-      <template v-if="[2, 3].findIndex(item => item === loanType.value) > -1">
-        <van-field
-          v-model="gjjjine"
-          type="tel"
-          name="gjjjine"
-          :border="false"
-          placeholder="请输入金额"
-          class="ttyf-van-cell ttyf-no-arrow"
-          @input="gjjjine=gjjjine.replace(/^\D*(\d*(?:\.\d{0,5})?).*$/g, '$1')">
+      <template>
+        <van-field :class="loanType.value === 2 || loanType.value === 3 ? '' : 'hide'"
+                   v-model="gjjjine"
+                   type="tel"
+                   name="gjjjine"
+                   :border="false"
+                   placeholder="请输入金额"
+                   class="ttyf-van-cell ttyf-no-arrow"
+                   @input="gjjjine=gjjjine.replace(/^\D*(\d*(?:\.\d{0,5})?).*$/g, '$1')">
           <template #label>
             <p>
             <span v-for="(str, index) in '公积金贷款金额(万)'"
@@ -38,16 +38,16 @@
             </p>
           </template>
         </van-field>
-        <van-field
-          readonly
-          clickable
-          name="gjjnianxian"
-          :value="gjjnianxian.text"
-          :border="false"
-          :right-icon="iconOfarrow"
-          placeholder="请选择贷款年限"
-          class="ttyf-van-cell"
-          @click="showPicker1 = true">
+        <van-field :class="loanType.value === 2 || loanType.value === 3 ? '' : 'hide'"
+                   readonly
+                   clickable
+                   name="gjjnianxian"
+                   :value="gjjnianxian.text"
+                   :border="false"
+                   :right-icon="iconOfarrow"
+                   placeholder="请选择贷款年限"
+                   class="ttyf-van-cell"
+                   @click="showPicker1 = true">
           <template #label>
             <p>
               <span v-for="(str, index) in '贷款年限'"
@@ -55,16 +55,16 @@
             </p>
           </template>
         </van-field>
-        <van-field
-          readonly
-          clickable
-          name="gjjlilv"
-          :value="gjjlilv.text"
-          :border="false"
-          :right-icon="iconOfarrow"
-          placeholder="请选择利率"
-          class="ttyf-van-cell"
-          @click="showPicker2 = true">
+        <van-field :class="loanType.value === 2 || loanType.value === 3 ? '' : 'hide'"
+                   readonly
+                   clickable
+                   name="gjjlilv"
+                   :value="gjjlilv.text"
+                   :border="false"
+                   :right-icon="iconOfarrow"
+                   placeholder="请选择利率"
+                   class="ttyf-van-cell"
+                   @click="showPicker2 = true">
           <template #label>
             <p>
               <span v-for="(str, index) in '公积金贷款利率(%)'"
@@ -74,15 +74,15 @@
         </van-field>
       </template>
       <!--商业贷款-->
-      <template v-if="[1, 3].findIndex(item => item === loanType.value) > -1">
-        <van-field
-          v-model="sdjine"
-          type="tel"
-          name="sdjine"
-          :border="false"
-          placeholder="请输入您的商贷金额"
-          class="ttyf-van-cell ttyf-no-arrow"
-          @input="sdjine = sdjine.replace(/^\D*(\d*(?:\.\d{0,5})?).*$/g, '$1')">
+      <template>
+        <van-field :class="loanType.value === 1 || loanType.value === 3 ? '' : 'hide'"
+                   v-model="sdjine"
+                   type="tel"
+                   name="sdjine"
+                   :border="false"
+                   placeholder="请输入您的商贷金额"
+                   class="ttyf-van-cell ttyf-no-arrow"
+                   @input="sdjine = sdjine.replace(/^\D*(\d*(?:\.\d{0,5})?).*$/g, '$1')">
           <template #label>
             <p>
             <span v-for="(str, index) in '商贷金额(万)'"
@@ -90,16 +90,16 @@
             </p>
           </template>
         </van-field>
-        <van-field
-          readonly
-          clickable
-          name="sdnianxian"
-          :value="sdnianxian.text"
-          :border="false"
-          :right-icon="iconOfarrow"
-          placeholder="请选择贷款年限"
-          class="ttyf-van-cell"
-          @click="showPicker3 = true">
+        <van-field :class="loanType.value === 1 || loanType.value === 3 ? '' : 'hide'"
+                   readonly
+                   clickable
+                   name="sdnianxian"
+                   :value="sdnianxian.text"
+                   :border="false"
+                   :right-icon="iconOfarrow"
+                   placeholder="请选择贷款年限"
+                   class="ttyf-van-cell"
+                   @click="showPicker3 = true">
           <template #label>
             <p>
               <span v-for="(str, index) in '贷款年限'"
@@ -107,16 +107,16 @@
             </p>
           </template>
         </van-field>
-        <van-field
-          readonly
-          clickable
-          name="sdlilv"
-          :value="sdlilv.text"
-          :border="false"
-          :right-icon="iconOfarrow"
-          placeholder="请选择利率"
-          class="ttyf-van-cell"
-          @click="showPicker4 = true">
+        <van-field :class="loanType.value === 1 || loanType.value === 3 ? '' : 'hide'"
+                   readonly
+                   clickable
+                   name="sdlilv"
+                   :value="sdlilv.text"
+                   :border="false"
+                   :right-icon="iconOfarrow"
+                   placeholder="请选择利率"
+                   class="ttyf-van-cell"
+                   @click="showPicker4 = true">
           <template #label>
             <p>
               <span v-for="(str, index) in '商贷利率(%)'"
@@ -125,16 +125,15 @@
           </template>
         </van-field>
       </template>
-      <van-field
-        readonly
-        clickable
-        name="hkfangshi"
-        :value="hkfangshi.text"
-        :border="false"
-        :right-icon="iconOfarrow"
-        placeholder="请选择还款方式"
-        class="ttyf-van-cell"
-        @click="showPicker5 = true">
+      <van-field readonly
+                 clickable
+                 name="hkfangshi"
+                 :value="hkfangshi.text"
+                 :border="false"
+                 :right-icon="iconOfarrow"
+                 placeholder="请选择还款方式"
+                 class="ttyf-van-cell"
+                 @click="showPicker5 = true">
         <template #label>
           <p>
               <span v-for="(str, index) in '还款方式'"
@@ -147,14 +146,13 @@
                   @click="handleComputed">开始计算
       </van-button>
       <p class="ttyf-tip">计算结果：</p>
-      <van-field
-        readonly
-        clickable
-        name="meiyuehuanchuan"
-        :value="meiyuehuanchuan"
-        :border="false"
-        placeholder=""
-        class="ttyf-van-cell ttyf-no-arrow">
+      <van-field readonly
+                 clickable
+                 name="meiyuehuanchuan"
+                 :value="meiyuehuanchuan"
+                 :border="false"
+                 placeholder=""
+                 class="ttyf-van-cell ttyf-no-arrow">
         <template #label>
           <p>
               <span v-for="(str, index) in '每月还款(元)'"
@@ -162,14 +160,13 @@
           </p>
         </template>
       </van-field>
-      <van-field
-        readonly
-        clickable
-        name="zonglixi"
-        :value="zonglixi"
-        :border="false"
-        placeholder=""
-        class="ttyf-van-cell">
+      <van-field readonly
+                 clickable
+                 name="zonglixi"
+                 :value="zonglixi"
+                 :border="false"
+                 placeholder=""
+                 class="ttyf-van-cell">
         <template #label>
           <p>
               <span v-for="(str, index) in '总共支付利息(元)'"
@@ -219,13 +216,12 @@
                :close-on-click-overlay="false"
                @click-overlay="onCancel2"
                position="bottom">
-      <van-picker
-        show-toolbar
-        :columns="columns2"
-        :default-index="defaultIndex2"
-        @confirm="onConfirm2"
-        @cancel="onCancel2"
-        ref="myPicker2"
+      <van-picker show-toolbar
+                  :columns="columns2"
+                  :default-index="defaultIndex2"
+                  @confirm="onConfirm2"
+                  @cancel="onCancel2"
+                  ref="myPicker2"
       />
     </van-popup>
     <!--商贷年限选择-->
@@ -247,13 +243,12 @@
                :close-on-click-overlay="false"
                @click-overlay="onCancel4"
                position="bottom">
-      <van-picker
-        show-toolbar
-        :columns="columns4"
-        :default-index="defaultIndex4"
-        @confirm="onConfirm4"
-        @cancel="onCancel4"
-        ref="myPicker4"
+      <van-picker show-toolbar
+                  :columns="columns4"
+                  :default-index="defaultIndex4"
+                  @confirm="onConfirm4"
+                  @cancel="onCancel4"
+                  ref="myPicker4"
       />
     </van-popup>
     <!--贷款类型选择-->
@@ -261,13 +256,12 @@
                :close-on-click-overlay="false"
                @click-overlay="onCancel5"
                position="bottom">
-      <van-picker
-        show-toolbar
-        :columns="columns5"
-        :default-index="defaultIndex5"
-        @confirm="onConfirm5"
-        @cancel="onCancel5"
-        ref="myPicker5"
+      <van-picker show-toolbar
+                  :columns="columns5"
+                  :default-index="defaultIndex5"
+                  @confirm="onConfirm5"
+                  @cancel="onCancel5"
+                  ref="myPicker5"
       />
     </van-popup>
   </div>
@@ -299,9 +293,11 @@ export default {
       gjjjine: '', // 公积金贷款金额
       gjjnianxian: loanConfig.loanYear[19], // 公积金贷款年限
       gjjlilv: loanConfig.gjjSelect[0], // 公积金贷款利率
+      gjjlilvIndex: 0,
       sdjine: '', // 商贷金额
       sdnianxian: loanConfig.loanYear[19], // 商贷年限
       sdlilv: loanConfig.shangdaiSelect[0], // 商贷利率
+      sdlilvIndex: 0,
       hkfangshi: loanConfig.payType[0], // 还款方式
       meiyuehuanchuan: '', // 每月还款
       zonglixi: '', // 总共支付利息
@@ -382,6 +378,7 @@ export default {
     },
     // 公积金贷款利率
     onConfirm2 (value, index) {
+      this.gjjlilvIndex = index
       this.gjjlilv = value
       this.showPicker2 = false
     },
@@ -406,6 +403,7 @@ export default {
     },
     // 商贷利率
     onConfirm4 (value, index) {
+      this.sdlilvIndex = index
       this.sdlilv = value
       this.showPicker4 = false
     },
@@ -430,28 +428,31 @@ export default {
     },
     async handleComputed () {
       await this.$nextTick()
+      const sdlilv = this.columns4[this.sdlilvIndex]
+      const gjjlilv = this.columns2[this.gjjlilvIndex]
       let result = {}
       // 还款方式
       const payType = this.hkfangshi.value
       switch (this.loanType.value) {
         case 1:
           if (this.sdjine) {
-            result = calcute.singleDk(payType, this.sdjine, this.sdnianxian.value, this.sdlilv.lilv)
+            result = calcute.singleDk(payType, this.sdjine, this.sdnianxian.value, sdlilv.lilv)
           }
           break
         case 2:
           if (this.gjjjine) {
-            result = calcute.singleDk(payType, this.gjjjine, this.gjjnianxian.value, this.gjjlilv.lilv)
+            result = calcute.singleDk(payType, this.gjjjine, this.gjjnianxian.value, gjjlilv.lilv)
           }
           break
         case 3:
           if (this.sdjine && this.gjjjine) {
-            result = calcute.zuhe(payType, this.sdjine, this.gjjjine, this.sdnianxian.value, this.gjjnianxian.value, this.sdlilv.lilv, this.gjjlilv.lilv)
+            result = calcute.zuhe(payType, this.sdjine, this.gjjjine, this.sdnianxian.value, this.gjjnianxian.value, sdlilv.lilv, gjjlilv.lilv)
           }
           break
       }
-      this.meiyuehuanchuan = result.yuegong
-      this.zonglixi = result.totalLixi
+
+      this.meiyuehuanchuan = result.yuegong * 1 > 0 ? result.yuegong.toFixed(2) : 0
+      this.zonglixi = result.totalLixi * 1 > 0 ? result.totalLixi.toFixed(2) : 0
     }
   },
   beforeDestroy () {
@@ -501,6 +502,10 @@ form {
     }
   }
 
+  &.hide {
+    display: none;
+  }
+
   ::v-deep .van-field__label {
     position: relative;
     left: 0;