feats

src/components/Tabs/index.jsx

@@ -1,11 +1,12 @@
-import React, { useState } from 'react'
+import React, { useRef, useState } from 'react'
 import { View, ScrollView } from '@tarojs/components'
 import './style.scss'
 
 export default (props) => {
   const { current, tabs, onChange } = props
+  const idPreRef = useRef(`scroll-it-${Math.random().toString(26).substring(2, 9)}`)
 
-  const handleTabClick = (index) => () => {
+  const handleTabClick = (index) => {
     if (onChange) {
       onChange(index + 1)
     }
@@ -13,7 +14,7 @@ export default (props) => {
 
   return (
     <View className='yz-tabs'>
-      <ScrollView scrollX scrollIntoView={`item-${current}`}>
+      <ScrollView scrollX scrollIntoView={`${idPreRef.current}-${current}`}>
         <View className='yz-tabs-nav'>
         {
           (tabs||[]).map((item, index) => {
@@ -22,9 +23,9 @@ export default (props) => {
             return (
               <View
                 key={item}
-                id={`item-${index}`}
+                id={`${idPreRef.current}-${index}`}
                 className={`yz-tabs-tab ${activeClass}`}
-                onClick={handleTabClick(index)}
+                onClick={() => handleTabClick(index)}
               >{item}</View>
             )
           })

src/components/Tabs/style.scss

@@ -4,6 +4,7 @@
   position: relative;
   border-top: 1px solid #eee;
   border-bottom: 1px solid #eee;
+  box-sizing: border-box;
 
   .yz-tabs-nav {
     width: 100%;

src/native/PageContainer/index.js

@@ -25,7 +25,7 @@ Component({
       value: '100%',
       observer: function(val) {
         const h = val || '100%'
-        const customStyle = 'height: '+ h +';'
+        const customStyle = 'height: '+ h +'; z-index:999'
         this.setData({ customStyle })
       }
     },
@@ -33,16 +33,16 @@ Component({
       type: String,
       value: 'black',
       observer: function(val) {
-        let overlayStyle = ''
+        let overlayStyle = 'z-index:99'
         switch(val) {
           case 'white':
-            overlayStyle = 'background-color: rgba(255, 255, 255, 0.7)'
+            overlayStyle += 'background-color: rgba(255, 255, 255, 0.7)'
             break
           case 'blur':
-            overlayStyle = 'background-color: rgba(0, 0, 0, 0.7); filter: blur(4px);'
+            overlayStyle += 'background-color: rgba(0, 0, 0, 0.7); filter: blur(4px);'
             break
           default:
-            overlayStyle = 'background-color: rgba(0, 0, 0, 0.7)'
+            overlayStyle += 'background-color: rgba(0, 0, 0, 0.7)'
         }
         this.setData({ overlayStyle })
       }

src/pages/mine/mortgageCalc/calc.js

@@ -5,130 +5,167 @@
  * @param {*} year 
  * @param {*} rate 
  */
-export function calcBJSummary (moneyW, year, rateB) {
-  let money = moneyW * 10000;
+export function calcBJ (moneyW, year, rateB) {
+  const money = moneyW * 10000;
   const month = year * 12;
-  const rate= rateB / 100;
-  let benjin= money / month; //每个月还款本金 
-  
-  let lxTotal=0;
-  let mostlx = 0; // 最高利息
-  let emTotal = 0; // 最高月付
+  const rate= rateB / 100 / 12; // 月利率
+
+  // 等额本金 每个月还款本金是固定的, 利息不固定
+  const benjin = money / month; //每个月还款本金 
+
+  const list = [];
+  let bjLeft = money; //剩余本金
+  let paid = 0; // 已还贷款
+  let totalRate = 0;
+  let firstRate = 0; // 最高利息
+  let firstMoney = 0; // 最高月付
   for(let i = 0; i < month; i += 1) {
-    const lixi = (money * rate / 12); //每月还款利息 
-    money -= benjin; //剩余本金
-    lxTotal += lixi; //利息总额
+    // 每月还款利息
+    const lx = bjLeft * rate;
+    // 每月还金额
+    const benxi = benjin + lx;
+
+    bjLeft -= benjin; //剩余本金
+    totalRate += lx; //利息总额
+    paid += benxi;
 
     if(i === 0) {
-      mostlx = lixi;
-      emTotal = benjin + mostlx;
+      firstRate = lx;
+      firstMoney = benjin + firstRate;
     }
-  }
 
-  return {
-    totalRate: parseFloat(lxTotal/10000).toFixed(2),
-    totalMoney: parseFloat((moneyW*10000+lxTotal)/10000).toFixed(2),
-    rateOfFirstMonth: parseFloat(mostlx/10000).toFixed(2),
-    moneyOfFirstMonth: parseFloat(emTotal/10000).toFixed(2),
-  }
-}
-
-/**
- * 等额本金 列表
- * @param {*} moneyW 
- * @param {*} year 
- * @param {*} rateB 
- * @returns 
- */
-export function calcBJList (moneyW, year, rateB) {
-  let money = moneyW * 10000;
-  const month = year * 12;
-  const rate = rateB / 100;
-  const benjin = money / month; //每个月还款本金 
-
-  const result = [];
-  for(let i = 0; i < month; i += 1) {
-    const lx = (money * rate / 12); // 每月还款利息
-    money -= benjin; //剩余本金
-
-    result.push({
-      benjin: parseFloat(benjin).toFixed(2),
-      benxi: parseFloat(benjin +lx).toFixed(2),
-      rate: parseFloat(lx).toFixed(2),
-      left: parseFloat(money).toFixed(2),
+    list.push({
+      benjin,
+      benxi,
+      rate: lx,
+      paid,
     })
   }
 
-  if (result.length > 0) {
-    // 修改最后一条记录的剩余金额为0
-    result[result.length - 1].left = 0
+  const summary = {
+    year,
+    money,
+    totalRate,
+    totalMoney: money + totalRate,
+    rateOfFirstMonth: firstRate,
+    moneyOfFirstMonth: firstMoney,
   }
 
-  return result;
+  return { summary, list }
 }
 
+// /**
+//  * 等额本金 列表
+//  * @param {*} moneyW 
+//  * @param {*} year 
+//  * @param {*} rateB 
+//  * @returns 
+//  */
+// export function calcBJList (moneyW, year, rateB) {
+//   let money = moneyW * 10000;
+//   const month = year * 12;
+//   const rate = rateB / 100 / 12; // 月利率
+//   const benjin = money / month; //每个月还款本金 
+
+//   const result = [];
+//   let left = money;
+//   for(let i = 0; i < month; i += 1) {
+//     const lx = (money * rate); // 每月还款利息
+//     money -= benjin;
+//     left = left - benjin - lx;
+
+//     result.push({
+//       benjin,
+//       benxi: benjin + lx,
+//       rate: lx,
+//       left,
+//     })
+//   }
+
+//   return result;
+// }
+
 /**
  * 等额本息 摘要
  * @param {*} moneyW 
  * @param {*} year 
  * @param {*} rateB 
  */
-export function calcBXSummary (moneyW, year, rateB) {
-  let money = moneyW*10000;
+export function calcBX (moneyW, year, rateB) {
+  const money = moneyW * 10000;
   const month = year * 12;
-  const rate = rateB/100;
-  const emTotal = (money * rate / 12 * Math.pow(1 + rate / 12, month) / (Math.pow(1 + rate/ 12, month) - 1)); //每月还款金额
+  const rate = rateB / 100 / 12; // 月利息
 
-  let lxTotal = 0; //总利息
-  let mostlx = 0;
-  for (var i = 0; i < month; i+=1) {
-      const lx=(money * rate / 12);  //每月还款利息 
-      if(i===0) mostlx=lx; //最高利息
-      const em = emTotal-lx; //每月还款本金 
-      money -= em;
-      lxTotal+=lx;
-  }
+  // 等额本息 每个月还款额是固定的, 本金 与 利息不固定
+  const benxi = (money * rate * Math.pow(1 + rate, month) / (Math.pow(1 + rate, month) - 1)); // 每月还款金额
 
-  return {
-    totalRate: parseFloat(lxTotal/10000).toFixed(2),
-    totalMoney: parseFloat((moneyW*10000+lxTotal)/10000).toFixed(2),
-    rateOfFirstMonth: parseFloat(mostlx/10000).toFixed(2),
-    moneyOfFirstMonth: parseFloat(emTotal/10000).toFixed(2),
-  }
-}
-
-/**
- * 等额本息 列表
- * @param {*} moneyW 
- * @param {*} year 
- * @param {*} rateB 
- * @returns 
- */
-export function calcBXList (moneyW, year, rateB) {
-  let money = moneyW*10000;
-  const month = year * 12;
-  const rate = rateB/100;
-  const emTotal = (money * rate / 12 * Math.pow(1 + rate / 12, month) / (Math.pow(1 + rate/ 12, month) - 1)); //每月还款金额
-
-  const result = [];
-  for(let i = 0; i < month; i += 1) {
-    const lx=(money * rate / 12);  //每月还款利息 
-    const em = emTotal-lx; //每月还款本金 
-    money = money - em;
+  const list = [];
+  let bjLeft = money; //剩余本金
+  let paid = 0; // 已还贷款
+  let totalRate = 0;
+  let firstRate = 0; // 
+  for (var i = 0; i < month; i+=1) {
+    // 每月还款利息
+    const lx = bjLeft * rate;
+    //每月还款本金
+    const benjin = benxi - lx;
 
+    bjLeft -= benjin;
+    totalRate += lx;
+    paid += benxi;
 
-    result.push({
-      benjin: parseFloat(em).toFixed(2),
-      benxi: parseFloat(em +lx).toFixed(2),
-      rate: parseFloat(lx).toFixed(2),
-      left: parseFloat(money).toFixed(2),
+    if (i === 0) {
+      firstRate = lx
+    }
+      
+    list.push({
+      benjin,
+      benxi,
+      rate: lx,
+      paid,
     })
   }
 
-  if (result.length > 0) {
-    // 修改最后一条记录的剩余金额为0
-    result[result.length - 1].left = 0
+  const summary = {
+    year,
+    money,
+    totalRate,
+    totalMoney: money + totalRate,
+    rateOfFirstMonth: firstRate,
+    moneyOfFirstMonth: benxi,
   }
 
-  return result;
+  return { summary, list } 
 }
+
+// /**
+//  * 等额本息 列表
+//  * @param {*} moneyW 
+//  * @param {*} year 
+//  * @param {*} rateB 
+//  * @returns 
+//  */
+// export function calcBXList (moneyW, year, rateB) {
+//   let money = moneyW*10000;
+//   const month = year * 12;
+//   const rate = rateB / 100 / 12; // 月利息
+//   const emTotal = (money * rate * Math.pow(1 + rate, month) / (Math.pow(1 + rate, month) - 1)); //每月还款金额
+
+//   const result = [];
+//   let left = money;
+//   for(let i = 0; i < month; i += 1) {
+//     const lx = money * rate;  //每月还款利息
+//     const em = emTotal-lx; //每月还款本金 
+//     money -= em;
+//     left = left - em - lx;
+
+//     result.push({
+//       benjin: parseFloat(em).toFixed(2),
+//       benxi: parseFloat(em +lx).toFixed(2),
+//       rate: parseFloat(lx).toFixed(2),
+//       left: parseFloat(left).toFixed(2),
+//     })
+//   }
+
+//   return result;
+// }

src/pages/mine/mortgageCalc/components/GJJForm.jsx

@@ -11,9 +11,9 @@ export default (props) => {
   useEffect(() => {
     if (onChange) {
       onChange({
-        money: money||0 - 0,
-        year: year||0 - 0,
-        rate: rate||0 - 0,
+        money: (money||0) - 0,
+        year: (year||0) - 0,
+        rate: (rate||0) - 0,
       })
     }
   }, [money, year, rate, onChange])

src/pages/mine/mortgageCalc/components/Result.jsx

@@ -0,0 +1,164 @@
+import React, { useEffect, useState } from 'react'
+import { ScrollView } from '@tarojs/components'
+import InnerTabs from '@/components/Tabs'
+import './style.scss'
+
+const tabs = ['等额本息', '等额本金']
+
+const getMixList = (lst1, lst2) => {
+  const len = lst1.length > lst2.length ? lst1.length : lst2.length
+  const rtn = []
+
+  let lastPaid1 = 0;
+  let lastPaid2 = 0;
+  for (let i = 0; i < len; i += 1) {
+    const it1 = lst1[i] || {}
+    const it2 = lst2[i] || {}
+
+    const paid1 = it1.paid||0;
+    const paid2 = it2.paid||0;
+
+    rtn.push({
+      benjin: (it1.benjin||0) + (it2.benjin||0),
+      benxi: (it1.benxi||0) + (it2.benxi||0),
+      rate: (it1.rate||0) + (it2.rate||0),
+      paid: (paid1||lastPaid1) + (paid2||lastPaid2),
+    })
+
+    if (paid1 > 0) {
+      lastPaid1 = paid1;
+    }
+    if (paid2 > 0) {
+      lastPaid2 = paid2;
+    }
+  }
+
+  return rtn;
+}
+
+export default (props) => {
+  const { dataSource, isMixed, onClose } = props
+
+  const [current, setCurrent] = useState(1)
+  const [data, setData] = useState({})
+  const [summary, setSummary] = useState({})
+  const [list, setList] = useState([])
+
+  const tipText = isMixed ? '贷款总额' : (current === 1 ? '每月还款' : '首月还款')
+
+  useEffect(() => {
+    if (!dataSource[0] && !dataSource[1]) return;
+
+    if (isMixed) {
+      //
+      const bj = {
+        summary: {
+          money: dataSource[0].bj.summary.money + dataSource[1].bj.summary.money,
+          totalRate: dataSource[0].bj.summary.totalRate + dataSource[1].bj.summary.totalRate,
+          totalMoney: dataSource[0].bj.summary.totalMoney + dataSource[1].bj.summary.totalMoney,
+        },
+        list: getMixList(dataSource[0].bj.list, dataSource[1].bj.list)
+      }
+      const bx = {
+        summary: {
+          money: dataSource[0].bx.summary.money + dataSource[1].bx.summary.money,
+          totalRate: dataSource[0].bx.summary.totalRate + dataSource[1].bx.summary.totalRate,
+          totalMoney: dataSource[0].bx.summary.totalMoney + dataSource[1].bx.summary.totalMoney,
+        },
+        list: getMixList(dataSource[0].bx.list, dataSource[1].bx.list)
+      }
+
+      setData({bj, bx})
+    } else {
+      const res = dataSource[0] || dataSource[1]
+      setData(res)
+    }
+  }, [dataSource, isMixed])
+
+  useEffect(() => {
+    const {bj, bx} = data || {}
+    if (current === 1) {
+      setSummary(bx?.summary||{})
+      setList(bx?.list||[])
+    } else {
+      setSummary(bj?.summary||{})
+      setList(bj?.list||[])
+    }
+  }, [current, data])
+
+  return (
+    <view className='calc-result'>
+      <view className='header-nav'>
+        <InnerTabs tabs={tabs} current={current} onChange={setCurrent} />
+        <view className='header-close' onClick={onClose}>
+          <text>×</text>
+        </view>
+      </view>
+
+      <view className='summary-card'>
+        <view className='tip'>{tipText}</view>
+        <view className='money'>
+          {isMixed ? Number(summary.money/10000).toFixed(0) : Number(summary.moneyOfFirstMonth||0).toFixed(2)}
+          <text className='small'>{isMixed ? '万元' : '元'}</text>
+        </view>
+        <view className='footer flex'>
+          <view>
+            <view>{`${Number((summary.totalRate||0)/10000).toFixed(2)}万`}</view>
+            <view className='label'>利息总额</view>
+          </view>
+          <view>
+            <view>{`${Number((summary.totalMoney||0)/10000).toFixed(2)}万`}</view>
+            <view className='label'>还款总额</view>
+          </view>
+          {
+            !isMixed && (
+              <view>
+                <view>{`${Number(summary.money/10000).toFixed(0)}万`}</view>
+                <view className='label'>贷款金额</view>
+              </view>
+            )
+          }
+          {
+            !isMixed && (
+              <view>
+                <view>{`${summary.year||0}年`}</view>
+                <view className='label'>贷款期限</view>
+              </view>
+            )
+          }
+        </view>
+      </view>
+
+      <view className='result-list'>
+        <view className='flex result-list-item result-list-title'>
+          <view>期数</view>
+          <view>月供总额</view>
+          <view>月供本金</view>
+          <view>月供利息</view>
+          <view>剩余还款</view>
+        </view>
+        <ScrollView scrollY className='result-scroll'>
+          {
+            list.map((it, inx) => {
+              const no = inx + 1
+              const benxi = Number(it.benxi).toFixed(0)
+              const benjin = Number(it.benjin).toFixed(0)
+              const rate = Number(it.rate).toFixed(0)
+              const left = Number(summary.totalMoney - it.paid).toFixed(0)
+
+              return (
+                <view className='flex result-list-item' key={inx}>
+                  <view>{no}</view>
+                  <view>{benxi}</view>
+                  <view>{benjin}</view>
+                  <view>{rate}</view>
+                  <view>{left}</view>
+                </view>
+              )
+            })
+          }
+        </ScrollView>
+      </view>
+    </view>
+  )
+}

src/pages/mine/mortgageCalc/components/SYForm.jsx

@@ -17,9 +17,9 @@ export default (props) => {
   useEffect(() => {
     if (onChange) {
       onChange({
-        money: money||0 - 0,
-        year: year||0 - 0,
-        rate: rate||0 - 0,
+        money: (money||0) - 0,
+        year: (year||0) - 0,
+        rate: (rate||0) - 0,
       })
     }
   }, [money, year, rate, onChange])

src/pages/mine/mortgageCalc/components/style.scss

@@ -0,0 +1,98 @@
+.calc-result {
+  .header-nav {
+    display: flex;
+
+    & > view {
+      &:first-child {
+        flex: auto;
+      }
+    }
+
+    .header-close {
+      flex: none;
+      width: 3em;
+      text-align: center;
+      box-sizing: border-box;
+      border: 1px solid #eee;
+      line-height: 100%;
+      vertical-align: middle;
+
+      text {
+        font-size: 2em;
+        line-height: 1.1em;
+        display: inline-block;
+      }
+    }
+  }
+
+  .summary-card {
+    color: #fff;
+    background: #193C83;
+    border-radius: 24px;
+    box-sizing: border-box;
+    padding: 1em;
+    margin: 1em;
+
+    .tip {
+      font-size: .8em;
+    }
+
+    .money {
+      font-size: 1.8em;
+      line-height: 2.0em;
+
+      .small {
+        display: inline-block;
+        margin-left: 1em;
+        font-size: .5em;
+        color: #fff;
+      }
+    }
+
+    .footer {
+      & > view {
+        color: #fff;
+        font-size: .8em;
+        text-align: center;
+        line-height: 1.6em;
+      }
+
+      .label {
+        color: rgba(255,255,255, .6);
+      }
+    }
+  }
+
+  .flex {
+    display: flex;
+    & > view {
+      flex: auto;
+    }
+  }
+
+  .result-scroll {
+    height: calc(100vh - 560rpx);
+  }
+
+  .result-list {
+    margin-top: .5em;
+    padding: 0 1em;
+
+    .result-list-title {
+      background:rgba(25,60,131, .1) !important;
+    }
+
+    .result-list-item {
+      font-size: .9em;
+      line-height: 2.4em;
+      text-align: center;
+
+      &:nth-of-type(odd) {
+        background: #fff;
+      }
+      &:nth-of-type(even) {
+        background:rgba(25,60,131, .1);
+      }
+    }
+  }
+}

src/pages/mine/mortgageCalc/index.config.js

@@ -1,3 +1,6 @@
 export default {
-  navigationBarTitleText: '房贷计算器'
+  navigationBarTitleText: '房贷计算器',
+  usingComponents: {
+    'page-modal': '@/native/PageContainer/index'
+  }
 }

src/pages/mine/mortgageCalc/index.jsx

@@ -6,6 +6,7 @@ import Tabs from '@/components/Tabs'
 import Cell from '@/components/Cell'
 import GJJForm from './components/GJJForm'
 import SYForm from './components/SYForm'
+import Result from './components/Result'
 import * as sdk from './calc'
 import './index.scss'
 
@@ -15,10 +16,12 @@ const showError = title => Taro.showToast({ title, icon: 'none'});
 
 export default withLayout(() => {
   const [loading, setLoading] = useState(false)
+  const [visible, setVisible] = useState(false)
   const [current, setCurrent] = useState(1)
 
   const [SYFormData, setSYFormData] = useState()
   const [GJJFormData, setGJJFormData] = useState()
+  const [result, setResult] = useState([])
 
   const handleCalc = () => {
     // 校验商业贷款
@@ -47,33 +50,29 @@ export default withLayout(() => {
     }
 
     setLoading(true)
-    const syResult ={}
+    const syResult = {}
     const gjjResult = {}
     if (current !== 2) {
-      syResult.bj = {
-        summary: sdk.calcBJSummary(SYFormData.money, SYFormData.year, SYFormData.rate),
-        list: sdk.calcBJList(SYFormData.money, SYFormData.year, SYFormData.rate),
-      }
-      syResult.bx = {
-        summary: sdk.calcBXSummary(SYFormData.money, SYFormData.year, SYFormData.rate),
-        list: sdk.calcBXList(SYFormData.money, SYFormData.year, SYFormData.rate),
-      }
+      syResult.bj = sdk.calcBJ(SYFormData.money, SYFormData.year, SYFormData.rate)
+      syResult.bx = sdk.calcBX(SYFormData.money, SYFormData.year, SYFormData.rate)
     }
 
     if (current !== 1) {
-      gjjResult.bj = {
-        summary: sdk.calcBJSummary(GJJFormData.money, GJJFormData.year, GJJFormData.rate),
-        list: sdk.calcBJList(GJJFormData.money, GJJFormData.year, GJJFormData.rate),
-      }
-      gjjResult.bx = {
-        summary: sdk.calcBXSummary(GJJFormData.money, GJJFormData.year, GJJFormData.rate),
-        list: sdk.calcBXList(GJJFormData.money, GJJFormData.year, GJJFormData.rate),
-      }
+      gjjResult.bj = sdk.calcBJ(GJJFormData.money, GJJFormData.year, GJJFormData.rate)
+      gjjResult.bx = sdk.calcBX(GJJFormData.money, GJJFormData.year, GJJFormData.rate)
     }
     setLoading(false)
 
-    console.log('------商业------>', syResult)
-    console.log('------公积金------>', gjjResult)
+    const res = [undefined, undefined]
+    if (current !== 2) {
+      res[0] = syResult
+    }
+    if (current !== 1) {
+      res[1] = gjjResult
+    }
+
+    setResult(res)
+    setVisible(true)
   }
 
   return (
@@ -104,7 +103,9 @@ export default withLayout(() => {
       <view className='Btn'>
         <button loading={loading} onClick={handleCalc}>开始计算</button>
       </view>
-
+      <page-modal show={visible} position='bottom'>
+        <Result dataSource={result} isMixed={current === 3} onClose={() => setVisible(false)} />
+      </page-modal>
     </view>
   )
 })