驼驼-商城

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

@@ -0,0 +1,233 @@
+var calcute = {
+  //商贷-公积金贷款统一函数
+  singleDk: function (type, num, year, lilv) {
+    var _this = this
+    // type:1等额本息 2等额本金，num 贷款金额 year贷款年限，lilv：贷款基准利率
+    if (type == 1) {
+      return _this.benxi(type, num, year, lilv)
+    } else if (type == 2) {
+      return _this.benjin(type, num, year, lilv)
+    }
+  },
+  //组合贷款计算
+  zuhe: function (type, sdnum, gjjnum, sdyear, gjjyear, sdlilv, gjjlilv) {
+    var _this = this,
+      year = sdyear > gjjyear ? sdyear : gjjyear
+    if (type == 1) {
+      var sdObj = _this.benxi(type, sdnum, sdyear, sdlilv)
+      var gjjObj = _this.benxi(type, gjjnum, gjjyear, gjjlilv)
+      if (sdObj.mouthdataArray.length > gjjObj.mouthdataArray.length) {
+        var mergemouthdataArray = sdObj.mouthdataArray.map(function (item, index) {
+          if (index < gjjObj.mouthdataArray.length) {
+            return {
+              monthName: item.monthName,
+              yuelixi: item.yuelixi + gjjObj.mouthdataArray[index].yuelixi,
+              yuebenjin: item.yuebenjin + gjjObj.mouthdataArray[index].yuebenjin,
+              leftFund: item.leftFund + gjjObj.mouthdataArray[index].leftFund
+            }
+          } else {
+            return {
+              monthName: item.monthName,
+              yuelixi: item.yuelixi,
+              yuebenjin: item.yuebenjin,
+              leftFund: item.leftFund
+            }
+          }
+
+        })
+      } else {
+        var mergemouthdataArray = gjjObj.mouthdataArray.map(function (item, index) {
+          if (index < sdObj.mouthdataArray.length) {
+            return {
+              monthName: item.monthName,
+              yuelixi: item.yuelixi + sdObj.mouthdataArray[index].yuelixi,
+              yuebenjin: item.yuebenjin + sdObj.mouthdataArray[index].yuebenjin,
+              leftFund: item.leftFund + sdObj.mouthdataArray[index].leftFund
+            }
+          } else {
+            return {
+              monthName: item.monthName,
+              yuelixi: item.yuelixi,
+              yuebenjin: item.yuebenjin,
+              leftFund: item.leftFund
+            }
+          }
+        })
+      }
+      return {
+        yuegong: sdObj.yuegong + gjjObj.yuegong,
+        totalLixi: sdObj.totalLixi + gjjObj.totalLixi,
+        totalPrice: sdObj.totalPrice + gjjObj.totalPrice,
+        mouthdataArray: mergemouthdataArray,
+        totalDknum: parseFloat(sdObj.totalDknum) + parseFloat(gjjObj.totalDknum),
+        year: year
+      }
+
+    } else if (type == 2) {
+      var sdObj = _this.benjin(type, sdnum, sdyear, sdlilv)
+      var gjjObj = _this.benjin(type, gjjnum, gjjyear, gjjlilv)
+      if (sdObj.mouthdataArray.length > gjjObj.mouthdataArray.length) {
+        var mergemouthdataArray = sdObj.mouthdataArray.map(function (item, index) {
+          if (index < gjjObj.mouthdataArray.length) {
+            return {
+              monthName: item.monthName,
+              yuelixi: item.yuelixi + gjjObj.mouthdataArray[index].yuelixi,
+              yuebenjin: item.yuebenjin + gjjObj.mouthdataArray[index].yuebenjin,
+              leftFund: item.leftFund + gjjObj.mouthdataArray[index].leftFund
+            }
+          } else {
+            return {
+              monthName: item.monthName,
+              yuelixi: item.yuelixi,
+              yuebenjin: item.yuebenjin,
+              leftFund: item.leftFund
+            }
+          }
+
+        })
+      } else {
+        var mergemouthdataArray = gjjObj.mouthdataArray.map(function (item, index) {
+          if (index < sdObj.mouthdataArray.length) {
+            return {
+              monthName: item.monthName,
+              yuelixi: item.yuelixi + sdObj.mouthdataArray[index].yuelixi,
+              yuebenjin: item.yuebenjin + sdObj.mouthdataArray[index].yuebenjin,
+              leftFund: item.leftFund + sdObj.mouthdataArray[index].leftFund
+            }
+          } else {
+            return {
+              monthName: item.monthName,
+              yuelixi: item.yuelixi,
+              yuebenjin: item.yuebenjin,
+              leftFund: item.leftFund
+            }
+          }
+        })
+      }
+      return {
+        yuegong: sdObj.yuegong + gjjObj.yuegong,
+        totalLixi: sdObj.totalLixi + gjjObj.totalLixi,
+        totalPrice: sdObj.totalPrice + gjjObj.totalPrice,
+        yuegongdijian: sdObj.yuegongdijian + gjjObj.yuegongdijian,
+        totalDknum: parseFloat(sdObj.totalDknum) + parseFloat(gjjObj.totalDknum),
+        year: year,
+        mouthdataArray: mergemouthdataArray
+      }
+    }
+
+  },
+  //等额本息计算
+  benxi: function (type, num, year, lilv) {
+    //每月月供额=〔贷款本金×月利率×(1＋月利率)＾还款月数〕÷〔(1＋月利率)＾还款月数-1〕
+    var mouth = parseInt(year) * 12,
+      mouthlilv = parseFloat(lilv) / 12,
+      dknum = parseFloat(num) * 10000
+    //每月月供
+    var yuegong = (dknum * mouthlilv * Math.pow((1 + mouthlilv), mouth)) / (Math.pow((1 + mouthlilv), mouth) - 1)
+    //总利息=还款月数×每月月供额-贷款本金
+    var totalLixi = mouth * yuegong - dknum
+    //还款总额 总利息+贷款本金
+    var totalPrice = totalLixi + dknum,
+      leftFund = totalLixi + dknum
+
+    //循环月份
+    var mouthdataArray = [],
+      nowmouth = new Date().getMonth(),
+      realmonth = 0
+
+    for (var i = 1; i <= mouth; i++) {
+      realmonth = nowmouth + i
+      var yearlist = Math.floor(i / 12)
+
+      realmonth = realmonth - 12 * yearlist
+
+      if (realmonth > 12) {
+        realmonth = realmonth - 12
+      }
+      //console.log(realmonth)
+      //每月应还利息=贷款本金×月利率×〔(1+月利率)^还款月数-(1+月利率)^(还款月序号-1)〕÷〔(1+月利率)^还款月数-1〕
+      var yuelixi = dknum * mouthlilv * (Math.pow((1 + mouthlilv), mouth) - Math.pow((1 + mouthlilv), i - 1)) / (Math.pow((1 + mouthlilv), mouth) - 1)
+      //每月应还本金=贷款本金×月利率×(1+月利率)^(还款月序号-1)÷〔(1+月利率)^还款月数-1〕
+      var yuebenjin = dknum * mouthlilv * Math.pow((1 + mouthlilv), i - 1) / (Math.pow((1 + mouthlilv), mouth) - 1)
+      leftFund = leftFund - (yuelixi + yuebenjin)
+      if (leftFund < 0) {
+        leftFund = 0
+      }
+      mouthdataArray[i - 1] = {
+        monthName: realmonth + '月',
+        yuelixi: yuelixi,
+        yuebenjin: yuebenjin,
+        //剩余还款
+        leftFund: leftFund
+      }
+    }
+    return {
+      yuegong: yuegong,
+      totalLixi: totalLixi,
+      totalPrice: totalPrice,
+      mouthdataArray: mouthdataArray,
+      totalDknum: num,
+      year: year
+    }
+  },
+  //等额本金计算
+  benjin: function (type, num, year, lilv) {
+    var mouth = parseInt(year) * 12,
+      mouthlilv = parseFloat(lilv) / 12,
+      dknum = parseFloat(num) * 10000,
+      yhbenjin = 0 //首月还款已还本金金额是0
+    //每月应还本金=贷款本金÷还款月数
+    var everymonthyh = dknum / mouth
+    //每月月供额=(贷款本金÷还款月数)+(贷款本金-已归还本金累计额)×月利率
+    var yuegong = everymonthyh + (dknum - yhbenjin) * mouthlilv
+    //每月月供递减额=每月应还本金×月利率=贷款本金÷还款月数×月利率
+    var yuegongdijian = everymonthyh * mouthlilv
+    //总利息=〔(总贷款额÷还款月数+总贷款额×月利率)+总贷款额÷还款月数×(1+月利率)〕÷2×还款月数-总贷款额
+    var totalLixi = ((everymonthyh + dknum * mouthlilv) + dknum / mouth * (1 + mouthlilv)) / 2 * mouth - dknum
+    //还款总额 总利息+贷款本金
+    var totalPrice = totalLixi + dknum,
+      leftFund = totalLixi + dknum
+
+    //循环月份
+    var mouthdataArray = [],
+      nowmouth = new Date().getMonth(),
+      realmonth = 0
+
+    for (var i = 1; i <= mouth; i++) {
+      realmonth = nowmouth + i
+      var yearlist = Math.floor(i / 12)
+
+      realmonth = realmonth - 12 * yearlist
+
+      if (realmonth > 12) {
+        realmonth = realmonth - 12
+      }
+      yhbenjin = everymonthyh * (i - 1)
+      var yuebenjin = everymonthyh + (dknum - yhbenjin) * mouthlilv
+      //每月应还利息=剩余本金×月利率=(贷款本金-已归还本金累计额)×月利率
+      var yuelixi = (dknum - yhbenjin) * mouthlilv
+      leftFund = leftFund - yuebenjin
+      if (leftFund < 0) {
+        leftFund = 0
+      }
+      mouthdataArray[i - 1] = {
+        monthName: realmonth + '月',
+        yuelixi: yuelixi,
+        //每月本金
+        yuebenjin: everymonthyh,
+        //剩余还款
+        leftFund: leftFund
+      }
+    }
+    return {
+      yuegong: yuegong,
+      totalLixi: totalLixi,
+      totalPrice: totalPrice,
+      yuegongdijian: yuegongdijian,
+      mouthdataArray: mouthdataArray,
+      totalDknum: num,
+      year: year
+    }
+
+  }
+}

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

@@ -0,0 +1,54 @@
+const loanYear = () => {
+  const years = []
+  for (let i = 1; i < 31; i++) {
+    years.push({
+      text: i + '年',
+      value: i
+    })
+  }
+  return years
+}
+
+export const loanConfig = {
+  loanYear: loanYear(),
+  loanType: [
+    { text: '商业贷款', value: '1' },
+    { text: '公积金贷款', value: '2' },
+    { text: '组合贷款', value: '3' }
+  ],
+  payType: [
+    { text: '等额本息', value: 'benxi' },
+    { text: '等额本金', value: 'benjin' }
+  ],
+  shangdaiLilv: [
+    { year: 1, lilv: '0.0435' },
+    { year: 2, lilv: '0.0475' },
+    { year: 6, lilv: '0.049' }
+  ],
+  shangdaiSelect: [
+    { lilv: 1, text: '基准利率' },
+    { lilv: 1.1, text: '1.1倍利率' },
+    { lilv: 1.15, text: '1.15倍利率' },
+    { lilv: 1.2, text: '1.2倍利率' },
+    { lilv: 1.3, text: '1.3倍利率' },
+    { lilv: 0.9, text: '9折利率' },
+    { lilv: 0.85, text: '85折利率' },
+    { lilv: 0.8, text: '8折利率' },
+    { lilv: 0.7, text: '7折利率' }
+  ],
+  gjjLilv: [
+    { year: 1, lilv: '0.0275' },
+    { year: 6, lilv: '0.0325' }
+  ],
+  gjjSelect: [
+    { lilv: 1, text: '基准利率' },
+    { lilv: 1.1, text: '1.1倍利率' },
+    { lilv: 1.15, text: '1.15倍利率' },
+    { lilv: 1.2, text: '1.2倍利率' },
+    { lilv: 1.3, text: '1.3倍利率' },
+    { lilv: 0.9, text: '9折利率' },
+    { lilv: 0.85, text: '85折利率' },
+    { lilv: 0.8, text: '8折利率' },
+    { lilv: 0.7, text: '7折利率' }
+  ]
+}

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

@@ -8,8 +8,8 @@
       <van-field
         readonly
         clickable
-        name="CompanyNature"
-        :value="CompanyNature"
+        name="loanType"
+        :value="loanType"
         :border="false"
         :right-icon="iconOfarrow"
         placeholder="请选择贷款类型"
@@ -23,13 +23,13 @@
         </template>
       </van-field>
       <van-field
-        v-model="Cellphone"
+        v-model="gjjjine"
         type="tel"
-        name="Cellphone"
+        name="gjjjine"
         :border="false"
         placeholder="请输入金额"
         class="ttyf-van-cell ttyf-no-arrow"
-        @input="Cellphone = Cellphone.replace(/^[0]|[^\d]/, '')">
+        @input="gjjjine=gjjjine.replace(/^\D*(\d*(?:\.\d{0,5})?).*$/g, '$1')">
         <template #label>
           <p>
             <span v-for="(str, index) in '公积金贷款金额(万)'"
@@ -40,13 +40,13 @@
       <van-field
         readonly
         clickable
-        name="CompanyNature"
-        :value="CompanyNature"
+        name="gjjnianxian"
+        :value="gjjnianxian"
         :border="false"
         :right-icon="iconOfarrow"
         placeholder="请选择贷款年限"
         class="ttyf-van-cell"
-        @click="showPicker0 = true">
+        @click="showPicker1 = true">
         <template #label>
           <p>
               <span v-for="(str, index) in '贷款年限'"
@@ -57,13 +57,13 @@
       <van-field
         readonly
         clickable
-        name="CompanyNature"
-        :value="CompanyNature"
+        name="gjjlilv"
+        :value="gjjlilv"
         :border="false"
         :right-icon="iconOfarrow"
         placeholder="请选择利率"
         class="ttyf-van-cell"
-        @click="showPicker0 = true">
+        @click="showPicker2 = true">
         <template #label>
           <p>
               <span v-for="(str, index) in '公积金贷款利率(%)'"
@@ -72,13 +72,13 @@
         </template>
       </van-field>
       <van-field
-        v-model="Cellphone"
+        v-model="sdjine"
         type="tel"
-        name="Cellphone"
+        name="sdjine"
         :border="false"
         placeholder="请输入您的商贷金额"
         class="ttyf-van-cell ttyf-no-arrow"
-        @input="Cellphone = Cellphone.replace(/^[0]|[^\d]/, '')">
+        @input="sdjine = sdjine.replace(/^\D*(\d*(?:\.\d{0,5})?).*$/g, '$1')">
         <template #label>
           <p>
             <span v-for="(str, index) in '商贷金额(万)'"
@@ -89,13 +89,13 @@
       <van-field
         readonly
         clickable
-        name="CompanyNature"
-        :value="CompanyNature"
+        name="sdnianxian"
+        :value="sdnianxian"
         :border="false"
         :right-icon="iconOfarrow"
         placeholder="请选择贷款年限"
         class="ttyf-van-cell"
-        @click="showPicker0 = true">
+        @click="showPicker3 = true">
         <template #label>
           <p>
               <span v-for="(str, index) in '贷款年限'"
@@ -106,13 +106,13 @@
       <van-field
         readonly
         clickable
-        name="CompanyNature"
-        :value="CompanyNature"
+        name="sdlilv"
+        :value="sdlilv"
         :border="false"
         :right-icon="iconOfarrow"
         placeholder="请选择利率"
         class="ttyf-van-cell"
-        @click="showPicker0 = true">
+        @click="showPicker4 = true">
         <template #label>
           <p>
               <span v-for="(str, index) in '商贷利率(%)'"
@@ -123,13 +123,13 @@
       <van-field
         readonly
         clickable
-        name="CompanyNature"
-        :value="CompanyNature"
+        name="hkfangshi"
+        :value="hkfangshi"
         :border="false"
         :right-icon="iconOfarrow"
         placeholder="请选择还款方式"
-        class="ttyf-van-cell"
-        @click="showPicker0 = true">
+        class="ttyf-van-cell ttyf-no-arrow"
+        @click="showPicker5 = true">
         <template #label>
           <p>
               <span v-for="(str, index) in '还款方式'"
@@ -140,12 +140,11 @@
       <van-field
         readonly
         clickable
-        name="CompanyNature"
-        :value="CompanyNature"
+        name="meiyuehuanchuan"
+        :value="meiyuehuanchuan"
         :border="false"
         placeholder=""
-        class="ttyf-van-cell"
-        @click="showPicker0 = true">
+        class="ttyf-van-cell ttyf-no-arrow">
         <template #label>
           <p>
               <span v-for="(str, index) in '每月还款(元)'"
@@ -156,12 +155,11 @@
       <van-field
         readonly
         clickable
-        name="CompanyNature"
-        :value="CompanyNature"
+        name="zonglixi"
+        :value="zonglixi"
         :border="false"
         placeholder=""
-        class="ttyf-van-cell"
-        @click="showPicker0 = true">
+        class="ttyf-van-cell">
         <template #label>
           <p>
               <span v-for="(str, index) in '总共支付利息(元)'"
@@ -178,7 +176,7 @@
         <a href="javascript:;">点击查看详情></a>
       </div>
     </van-form>
-    <!--企业性质选择-->
+    <!--贷款类型选择-->
     <van-popup v-model="showPicker0"
                :close-on-click-overlay="false"
                @click-overlay="onCancel0"
@@ -192,7 +190,7 @@
         ref="myPicker0"
       />
     </van-popup>
-    <!--企业规模选择-->
+    <!--公积金年限选择-->
     <van-popup v-model="showPicker1"
                :close-on-click-overlay="false"
                @click-overlay="onCancel1"
@@ -206,14 +204,69 @@
         ref="myPicker1"
       />
     </van-popup>
+    <!--公积金利率选择-->
+    <van-popup v-model="showPicker2"
+               :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-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"
+               @click-overlay="onCancel4"
+               position="bottom">
+      <van-picker
+        show-toolbar
+        :columns="columns4"
+        :default-index="defaultIndex4"
+        @confirm="onConfirm4"
+        @cancel="onCancel4"
+        ref="myPicker4"
+      />
+    </van-popup>
+    <!--贷款类型选择-->
+    <van-popup v-model="showPicker5"
+               :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-popup>
   </div>
 </template>
 
 <script>
 import { Form, Field, Popup, Picker } from 'vant'
+import { loanConfig } from './config'
 
-const COLUMNS0 = ['民营', '国营', '个体工商户', '其它']
-const COLUMNS1 = ['0~20人', '20人-99人', '99人~200人', '200人~500人', '500人以上']
 export default {
   name: 'index',
   components: {
@@ -230,14 +283,34 @@ export default {
   },
   data () {
     return {
-      Cellphone: '', // 联系人手机号
-      CompanyNature: '', // 企业性质
+      loanType: loanConfig.loanType[0].text, // 贷款类型
+      gjjjine: '', // 公积金贷款金额
+      gjjnianxian: loanConfig.loanYear[19].text, // 公积金贷款年限
+      gjjlilv: loanConfig.gjjSelect[0].text, // 公积金贷款利率
+      sdjine: '', // 商贷金额
+      sdnianxian: loanConfig.loanYear[19].text, // 商贷年限
+      sdlilv: loanConfig.shangdaiSelect[0].text, // 商贷利率
+      hkfangshi: loanConfig.payType[0].text, // 还款方式
+      meiyuehuanchuan: '', // 每月还款
+      zonglixi: '', // 总共支付利息
       showPicker0: false,
-      columns0: COLUMNS0,
+      columns0: loanConfig.loanType,
       defaultIndex0: 0,
       showPicker1: false,
-      columns1: COLUMNS1,
-      defaultIndex1: 0
+      columns1: loanConfig.loanYear,
+      defaultIndex1: 19,
+      showPicker2: false,
+      columns2: loanConfig.gjjSelect,
+      defaultIndex2: 0,
+      showPicker3: false,
+      columns3: loanConfig.loanYear,
+      defaultIndex3: 19,
+      showPicker4: false,
+      columns4: loanConfig.shangdaiSelect,
+      defaultIndex4: 0,
+      showPicker5: false,
+      columns5: loanConfig.payType,
+      defaultIndex5: 0
     }
   },
   computed: {
@@ -256,40 +329,82 @@ export default {
   },
   activated () {
     if (!this.$route.meta.isUseCache) {
-      this.Cellphone = ''
-      this.CompanyNature = ''
-      this.showPicker0 = false
-      this.columns0 = COLUMNS0
-      this.defaultIndex0 = 0
-      this.showPicker1 = false
-      this.columns1 = COLUMNS1
-      this.defaultIndex1 = 0
     }
     this.$route.meta.isUseCache = false
   },
   methods: {
+    // 贷款类型
     onConfirm0 (value, index) {
-      this.CompanyNature = value
+      this.loanType = value.text
       this.showPicker0 = false
     },
     onCancel0 () {
-      const index = this.columns0.findIndex(item => item === this.CompanyNature)
+      const index = this.columns0.findIndex(item => item.text === this.loanType)
       if (index > -1) {
         this.$refs.myPicker0.setIndexes([index])
       }
       this.showPicker0 = false
     },
+    // 公积金贷款年限
     onConfirm1 (value, index) {
-      this.CompanySize = value
+      this.gjjnianxian = value
       this.showPicker1 = false
     },
     onCancel1 () {
-      const index = this.columns1.findIndex(item => item === this.CompanySize)
+      const index = this.columns1.findIndex(item => item.text === this.gjjnianxian)
       if (index > -1) {
         this.$refs.myPicker1.setIndexes([index])
       }
       this.showPicker1 = false
     },
+    // 公积金贷款利率
+    onConfirm2 (value, index) {
+      this.gjjlilv = value.text
+      this.showPicker2 = false
+    },
+    onCancel2 () {
+      const index = this.columns2.findIndex(item => item.text === this.gjjlilv)
+      if (index > -1) {
+        this.$refs.myPicker2.setIndexes([index])
+      }
+      this.showPicker2 = false
+    },
+    // 商贷年限
+    onConfirm3 (value, index) {
+      this.sdnianxian = value
+      this.showPicker3 = false
+    },
+    onCancel3 () {
+      const index = this.columns3.findIndex(item => item.text === this.sdnianxian)
+      if (index > -1) {
+        this.$refs.myPicker3.setIndexes([index])
+      }
+      this.showPicker3 = false
+    },
+    // 商贷利率
+    onConfirm4 (value, index) {
+      this.sdlilv = value
+      this.showPicker4 = false
+    },
+    onCancel4 () {
+      const index = this.columns4.findIndex(item => item.text === this.sdlilv)
+      if (index > -1) {
+        this.$refs.myPicker4.setIndexes([index])
+      }
+      this.showPicker4 = false
+    },
+    // 还款方式
+    onConfirm5 (value, index) {
+      this.hkfangshi = value
+      this.showPicker5 = false
+    },
+    onCancel5 () {
+      const index = this.columns5.findIndex(item => item.text === this.hkfangshi)
+      if (index > -1) {
+        this.$refs.myPicker5.setIndexes([index])
+      }
+      this.showPicker5 = false
+    },
     onSubmit (values = {}) {
     }
   },