计算器-

htmldev/loan/src/views/loan/calculator/config/index.js

@@ -2,7 +2,7 @@ const loanYear = () => {
   const years = []
   for (let i = 1; i < 31; i++) {
     years.push({
-      text: i + '年',
+      text: i,
       value: i
     })
   }

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

@@ -21,105 +21,94 @@
           </p>
         </template>
       </van-field>
-      <!--公积金-->
+      <!--商业贷款：金额-->
       <template>
-        <van-field :class="loanType.value === 2 || loanType.value === 3 ? '' : 'hide'"
-                   v-model="gjjjine"
+        <van-field :class="loanType.value === 1 || loanType.value === 3 ? '' : 'hide'"
+                   v-model="sdjine"
                    type="tel"
-                   name="gjjjine"
+                   name="sdjine"
                    :border="false"
-                   placeholder="请输入金额"
+                   placeholder="请输入您的商贷金额"
                    class="ttyf-van-cell ttyf-no-arrow"
-                   @input="gjjjine=gjjjine.replace(/^\D*(\d*(?:\.\d{0,5})?).*$/g, '$1')">
+                   @input="sdjine = sdjine.replace(/^\D*(\d*(?:\.\d{0,5})?).*$/g, '$1')">
           <template #label>
             <p>
-            <span v-for="(str, index) in '公积金贷款金额(万)'"
+            <span v-for="(str, index) in '商贷金额(万)'"
                   :key="index">{{ str }}</span>
             </p>
           </template>
         </van-field>
-        <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 '贷款年限'"
-                    :key="index">{{ str }}</span>
-            </p>
-          </template>
-        </van-field>
-        <van-field :class="loanType.value === 2 || loanType.value === 3 ? '' : 'hide'"
-                   readonly
-                   clickable
-                   name="gjjlilv"
-                   :value="gjjlilv.lilv"
-                   :border="false"
-                   :right-icon="iconOfarrow"
-                   placeholder="请选择利率"
-                   class="ttyf-van-cell"
-                   @click="showPicker2 = true">
-          <template #label>
-            <p>
-              <span v-for="(str, index) in '公积金贷款利率(%)'"
-                    :key="index">{{ str }}</span>
-            </p>
-          </template>
-        </van-field>
       </template>
-      <!--商业贷款-->
+      <!--公积金：金额-->
       <template>
-        <van-field :class="loanType.value === 1 || loanType.value === 3 ? '' : 'hide'"
-                   v-model="sdjine"
+        <van-field :class="loanType.value === 2 || loanType.value === 3 ? '' : 'hide'"
+                   v-model="gjjjine"
                    type="tel"
-                   name="sdjine"
+                   name="gjjjine"
                    :border="false"
-                   placeholder="请输入您的商贷金额"
+                   placeholder="请输入金额"
                    class="ttyf-van-cell ttyf-no-arrow"
-                   @input="sdjine = sdjine.replace(/^\D*(\d*(?:\.\d{0,5})?).*$/g, '$1')">
+                   @input="gjjjine=gjjjine.replace(/^\D*(\d*(?:\.\d{0,5})?).*$/g, '$1')">
           <template #label>
             <p>
-            <span v-for="(str, index) in '商贷金额(万)'"
+            <span v-for="(str, index) in '公积金贷款金额(万)'"
                   :key="index">{{ str }}</span>
             </p>
           </template>
         </van-field>
+      </template>
+      <!--公积金/商贷：年限-->
+      <van-field 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 '贷款年限(年)'"
+                    :key="index">{{ str }}</span>
+          </p>
+        </template>
+      </van-field>
+      <!--商业贷款：利率-->
+      <template>
         <van-field :class="loanType.value === 1 || loanType.value === 3 ? '' : 'hide'"
                    readonly
                    clickable
-                   name="sdnianxian"
-                   :value="sdnianxian.text"
+                   name="sdlilv"
+                   :value="sdlilv"
                    :border="false"
                    :right-icon="iconOfarrow"
-                   placeholder="请选择贷款年限"
+                   placeholder="请选择利率"
                    class="ttyf-van-cell"
-                   @click="showPicker3 = true">
+                   @click="showPicker4 = true">
           <template #label>
             <p>
-              <span v-for="(str, index) in '贷款年限'"
+              <span v-for="(str, index) in '商贷利率(%)'"
                     :key="index">{{ str }}</span>
             </p>
           </template>
         </van-field>
-        <van-field :class="loanType.value === 1 || loanType.value === 3 ? '' : 'hide'"
+      </template>
+      <!--公积金：利率-->
+      <template>
+        <van-field :class="loanType.value === 2 || loanType.value === 3 ? '' : 'hide'"
                    readonly
                    clickable
-                   name="sdlilv"
-                   :value="sdlilv.lilv"
+                   name="gjjlilv"
+                   :value="gjjlilv"
                    :border="false"
                    :right-icon="iconOfarrow"
                    placeholder="请选择利率"
                    class="ttyf-van-cell"
-                   @click="showPicker4 = true">
+                   @click="showPicker2 = true">
           <template #label>
             <p>
-              <span v-for="(str, index) in '商贷利率(%)'"
+              <span v-for="(str, index) in '公积金贷款利率(%)'"
                     :key="index">{{ str }}</span>
             </p>
           </template>
@@ -152,7 +141,7 @@
                  :value="meiyuehuanchuan"
                  :border="false"
                  placeholder=""
-                 class="ttyf-van-cell ttyf-no-arrow">
+                 class="ttyf-van-cell">
         <template #label>
           <p>
               <span v-for="(str, index) in '每月还款(元)'"
@@ -225,20 +214,6 @@
                   ref="myPicker2"
       />
     </van-popup>
-    <!--商贷年限选择-->
-    <van-popup v-model="showPicker3"
-               :close-on-click-overlay="false"
-               @click-overlay="onCancel3"
-               position="bottom">
-      <van-picker
-        show-toolbar
-        :columns="columns3"
-        :default-index="defaultIndex3"
-        @confirm="onConfirm3"
-        @cancel="onCancel3"
-        ref="myPicker3"
-      />
-    </van-popup>
     <!--商贷利率选择-->
     <van-popup v-model="showPicker4"
                :close-on-click-overlay="false"
@@ -291,16 +266,13 @@ export default {
   },
   data () {
     return {
-      loanType: loanConfig.loanType[0], // 贷款类型
+      loanTypeIndx: 1,
       gjjjine: '', // 公积金贷款金额
-      gjjnianxian: loanConfig.loanYear[19], // 公积金贷款年限
-      gjjlilv: loanConfig.gjjSelect[0] * 100, // 公积金贷款利率
+      gjjnianxianIndex: 19,
       gjjlilvIndex: 0,
       sdjine: '', // 商贷金额
-      sdnianxian: loanConfig.loanYear[19], // 商贷年限
-      sdlilv: loanConfig.shangdaiSelect[0], // 商贷利率
       sdlilvIndex: 0,
-      hkfangshi: loanConfig.payType[0], // 还款方式
+      hkfangshiIndex: 0,
       meiyuehuanchuan: '', // 每月还款
       zonglixi: '', // 总共支付利息
       showPicker0: false,
@@ -311,9 +283,6 @@ export default {
       defaultIndex1: 19,
       showPicker2: false,
       defaultIndex2: 0,
-      showPicker3: false,
-      columns3: loanConfig.loanYear,
-      defaultIndex3: 19,
       showPicker4: false,
       defaultIndex4: 0,
       showPicker5: false,
@@ -325,13 +294,13 @@ export default {
     iconOfarrow () {
       return require('./image/btn_next@2x.png')
     },
-    // 公积金利率
+    // 公积金利率列表数据
     columns2 () {
       return this.lilvCal(this.gjjnianxian.value, loanConfig.gjjLilv, loanConfig.gjjSelect)
     },
-    // 商贷利率
+    // 商贷利率列表数据
     columns4 () {
-      return this.lilvCal(this.sdnianxian.value, loanConfig.shangdaiLilv, loanConfig.shangdaiSelect)
+      return this.lilvCal(this.gjjnianxian.value, loanConfig.shangdaiLilv, loanConfig.shangdaiSelect)
     },
     recommendedProduct: {
       get () {
@@ -340,6 +309,36 @@ export default {
       set (val) {
         this.$store.commit('loan/UPDATE_RECOMMENDEDPRODUCT', val)
       }
+    },
+    // 贷款类型
+    loanType: {
+      get () {
+        return loanConfig.loanType[this.loanTypeIndx]
+      }
+    },
+    // 公积金贷款年限
+    gjjnianxian: {
+      get () {
+        return loanConfig.loanYear[this.gjjnianxianIndex]
+      }
+    },
+    // 公积金贷款利率
+    gjjlilv: {
+      get () {
+        return (this.columns2[this.gjjlilvIndex].lilv * 100).toFixed(2)
+      }
+    },
+    // 商贷利率
+    sdlilv: {
+      get () {
+        return (this.columns4[this.sdlilvIndex].lilv * 100).toFixed(2)
+      }
+    },
+    // 还款方式
+    hkfangshi: {
+      get () {
+        return loanConfig.payType[this.hkfangshiIndex]
+      }
     }
   },
   activated () {
@@ -364,76 +363,47 @@ export default {
     },
     // 贷款类型
     onConfirm0 (value, index) {
-      this.loanType = value
+      this.loanTypeIndx = index
       this.showPicker0 = false
     },
     onCancel0 () {
-      const index = this.columns0.findIndex(item => item.value === this.loanType.value)
-      if (index > -1) {
-        this.$refs.myPicker0.setIndexes([index])
-      }
+      this.$refs.myPicker0.setIndexes([this.loanTypeIndx])
       this.showPicker0 = false
     },
     // 公积金贷款年限
     onConfirm1 (value, index) {
-      this.gjjnianxian = value
+      this.gjjnianxianIndex = index
       this.showPicker1 = false
     },
     onCancel1 () {
-      const index = this.columns1.findIndex(item => item.value === this.gjjnianxian.value)
-      if (index > -1) {
-        this.$refs.myPicker1.setIndexes([index])
-      }
+      this.$refs.myPicker1.setIndexes([this.gjjnianxianIndex])
       this.showPicker1 = false
     },
     // 公积金贷款利率
     onConfirm2 (value, index) {
       this.gjjlilvIndex = index
-      this.gjjlilv = value
       this.showPicker2 = false
     },
     onCancel2 () {
-      const index = this.columns2.findIndex(item => item.lilv === this.gjjlilv.lilv)
-      if (index > -1) {
-        this.$refs.myPicker2.setIndexes([index])
-      }
+      this.$refs.myPicker2.setIndexes([this.gjjlilvIndex])
       this.showPicker2 = false
     },
-    // 商贷年限
-    onConfirm3 (value) {
-      this.sdnianxian = value
-      this.showPicker3 = false
-    },
-    onCancel3 () {
-      const index = this.columns3.findIndex(item => item.value === this.sdnianxian.value)
-      if (index > -1) {
-        this.$refs.myPicker3.setIndexes([index])
-      }
-      this.showPicker3 = false
-    },
     // 商贷利率
     onConfirm4 (value, index) {
       this.sdlilvIndex = index
-      this.sdlilv = value
       this.showPicker4 = false
     },
     onCancel4 () {
-      const index = this.columns4.findIndex(item => item.lilv === this.sdlilv.lilv)
-      if (index > -1) {
-        this.$refs.myPicker4.setIndexes([index])
-      }
+      this.$refs.myPicker4.setIndexes([this.sdlilvIndex])
       this.showPicker4 = false
     },
     // 还款方式
     onConfirm5 (value, index) {
-      this.hkfangshi = value
+      this.hkfangshiIndex = index
       this.showPicker5 = false
     },
     onCancel5 () {
-      const index = this.columns5.findIndex(item => item.value === this.hkfangshi.value)
-      if (index > -1) {
-        this.$refs.myPicker5.setIndexes([index])
-      }
+      this.$refs.myPicker5.setIndexes([this.hkfangshiIndex])
       this.showPicker5 = false
     },
     // 将数值四舍五入(保留2位小数)后格式化成金额形式
@@ -465,7 +435,7 @@ export default {
       switch (this.loanType.value) {
         case 1:
           if (this.sdjine) {
-            result = calcute.singleDk(payType, this.sdjine, this.sdnianxian.value, sdlilv.lilv)
+            result = calcute.singleDk(payType, this.sdjine, this.gjjnianxian.value, sdlilv.lilv)
           }
           break
         case 2:
@@ -475,7 +445,7 @@ export default {
           break
         case 3:
           if (this.sdjine && this.gjjjine) {
-            result = calcute.zuhe(payType, this.sdjine, this.gjjjine, this.sdnianxian.value, this.gjjnianxian.value, sdlilv.lilv, gjjlilv.lilv)
+            result = calcute.zuhe(payType, this.sdjine, this.gjjjine, this.gjjnianxian.value, this.gjjnianxian.value, sdlilv.lilv, gjjlilv.lilv)
           }
           break
       }
@@ -492,17 +462,14 @@ export default {
       this.zonglixi = totalLixi
     },
     fetchRecommendProduct (moneyRate) {
+      const productMmaxYear = this.gjjnianxian.value
       let totalMoney = 0
-      let productMmaxYear = 0
       if (this.loanType.value === 1) {
         totalMoney = parseFloat(this.sdjine) * 10000
-        productMmaxYear = this.sdnianxian.value
       } else if (this.loanType.value === 2) {
         totalMoney = parseFloat(this.gjjjine) * 10000
-        productMmaxYear = this.gjjnianxian.value
       } else if (this.loanType.value === 3) {
         totalMoney = parseFloat(this.gjjjine) * 10000 + parseFloat(this.sdjine) * 10000
-        productMmaxYear = this.gjjnianxian.value + this.sdnianxian.value
       }
       const postData = {
         total_money: totalMoney, // 总贷款金额(单位：元)