feats

src/components/Cell/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { View } from '@tarojs/components'
+import './style.scss'
+
+export default (props) => {
+  const { header, footer, children } = props
+  return (
+    <View className='yz-cell'>
+      <View className='yz-cell-header'>{header}</View>
+      <View className='yz-cell-body'>{children}</View>
+      <View className='yz-cell-footer'>{footer}</View>
+    </View>
+  )
+}

src/components/Cell/style.scss

@@ -0,0 +1,29 @@
+
+.yz-cell {
+  width: 100%;
+  position: relative;
+  display: flex;
+  border-bottom: 1px solid #eee;
+  padding: 0.5em 1em;
+  box-sizing: border-box;
+
+  &-header, &-footer {
+    flex: none;
+  }
+
+  &-header {
+    box-sizing: border-box;
+    padding-right: .5em;
+  }
+
+  &-footer {
+    box-sizing: border-box;
+    padding-left: .5em;
+  }
+
+  &-body {
+    flex: auto;
+    text-align: right;
+    box-sizing: border-box;
+  }
+}

src/components/Tabs/index.jsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react'
+import { View, ScrollView } from '@tarojs/components'
+import './style.scss'
+
+export default (props) => {
+  const { current, tabs, onChange } = props
+
+  const handleTabClick = (index) => () => {
+    if (onChange) {
+      onChange(index + 1)
+    }
+  }
+
+  return (
+    <View className='yz-tabs'>
+      <ScrollView scrollX scrollIntoView={`item-${current}`}>
+        <View className='yz-tabs-nav'>
+        {
+          (tabs||[]).map((item, index) => {
+            const activeClass = current === (index + 1) ? 'active' : ''
+
+            return (
+              <View
+                key={item}
+                id={`item-${index}`}
+                className={`yz-tabs-tab ${activeClass}`}
+                onClick={handleTabClick(index)}
+              >{item}</View>
+            )
+          })
+        }
+        </View>
+      </ScrollView>
+    </View>
+  )
+}

src/components/Tabs/style.scss

@@ -0,0 +1,32 @@
+.yz-tabs {
+  width: 100%;
+  background: #fff;
+  position: relative;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+
+  .yz-tabs-nav {
+    width: 100%;
+    display: flex;
+  }
+
+  .yz-tabs-tab {
+    text-align: center;
+    flex: auto;
+    padding: 0.5em 0;
+    outline: none;
+    box-sizing: border-box;
+    min-width: 20%;
+    border-bottom-width: 4px;
+    border-bottom-style: solid;
+    border-bottom-color: transparent;
+
+    & + .yz-tabs-tab {
+      border-left: 1px solid #eee;
+    }
+
+    &.active {
+      border-bottom-color: #193C83;
+    }
+  }
+}

src/pages/mine/customerAnalyse/index.jsx

@@ -5,11 +5,13 @@ import { ScrollView } from '@tarojs/components'
 import { useSelector } from 'react-redux'
 import { fetch } from '@/utils/request'
 import { API_SEX_INFO, API_ECHERTS_DAILY } from '@/constants/api'
-import echarts from '@/native/ec-canvas/echarts'
+import LineChart from './components/LineChart'
 // import dayjs from 'dayjs'
 import './index.scss'
 
-export default withLayout(() => {
+export default withLayout((props) => {
+  const { person } = props
+  const PersonId = person.personId
 
   const [MenuList] = useState([
     { name: '新增客户', id: 1 },
@@ -26,14 +28,9 @@ export default withLayout(() => {
 
   const [ChartList, setChartList] = useState([])
   const [SexList, setSexList] = useState([])
-  const user = useSelector(state => state.user)
-  const [PersonId, setPersonId] = useState(null)
 
-  useEffect(() => {
-    if (PersonId !== user.userInfo.person.personId) {
-      setPersonId(user.userInfo.person.personId)
-    }
-  }, [user])
+  const [dimensions, setDimensions] = useState(['day', 'customerNum'])
+  const [source, setSource] = useState([])
 
   useEffect(() => {
     setChartList([])
@@ -66,6 +63,7 @@ export default withLayout(() => {
     fetch({ url: `${API_ECHERTS_DAILY}/${CurrentMenuId === 1 ? 'new' : CurrentMenuId === 2 ? 'follow' : 'visite'}`, method: 'get' }).then((res) => {
       const Arr = (res || []).reverse()
       setChartList(Arr.map(x => ({ name: x.day, value: x.customerNum })))
+      setSource(Arr)
     })
   }
 
@@ -185,7 +183,7 @@ export default withLayout(() => {
                   }
                 </view>
                 <view className='LineChart'>
-                  <ec-canvas id='CanvasChart' canvas-id='CanvasChart' ec={{ lazyLoad: true }}></ec-canvas>
+                  <LineChart dimensions={dimensions} source={source} />
                 </view>
               </view>
 

src/pages/mine/mortgageCalc/calc.js

@@ -0,0 +1,134 @@
+
+/**
+ * 等额本金 摘要
+ * @param {*} money 
+ * @param {*} year 
+ * @param {*} rate 
+ */
+export function calcBJSummary (moneyW, year, rateB) {
+  let money = moneyW * 10000;
+  const month = year * 12;
+  const rate= rateB / 100;
+  let benjin= money / month; //每个月还款本金 
+  
+  let lxTotal=0;
+  let mostlx = 0; // 最高利息
+  let emTotal = 0; // 最高月付
+  for(let i = 0; i < month; i += 1) {
+    const lixi = (money * rate / 12); //每月还款利息 
+    money -= benjin; //剩余本金
+    lxTotal += lixi; //利息总额
+
+    if(i === 0) {
+      mostlx = lixi;
+      emTotal = benjin + mostlx;
+    }
+  }
+
+  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),
+    })
+  }
+
+  if (result.length > 0) {
+    // 修改最后一条记录的剩余金额为0
+    result[result.length - 1].left = 0
+  }
+
+  return result;
+}
+
+/**
+ * 等额本息 摘要
+ * @param {*} moneyW 
+ * @param {*} year 
+ * @param {*} rateB 
+ */
+export function calcBXSummary (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)); //每月还款金额
+
+  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;
+  }
+
+  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;
+
+
+    result.push({
+      benjin: parseFloat(em).toFixed(2),
+      benxi: parseFloat(em +lx).toFixed(2),
+      rate: parseFloat(lx).toFixed(2),
+      left: parseFloat(money).toFixed(2),
+    })
+  }
+
+  if (result.length > 0) {
+    // 修改最后一条记录的剩余金额为0
+    result[result.length - 1].left = 0
+  }
+
+  return result;
+}

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

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react'
+import Cell from '@/components/Cell'
+
+export default (props) => {
+  const { onChange } = props
+
+  const [money, setMoney] = useState()
+  const [year, setYear] = useState(20)
+  const [rate, setRate] = useState(3.25)
+
+  useEffect(() => {
+    if (onChange) {
+      onChange({
+        money: money||0 - 0,
+        year: year||0 - 0,
+        rate: rate||0 - 0,
+      })
+    }
+  }, [money, year, rate, onChange])
+
+  return (
+    <view>
+      <Cell header='贷款总额 : ' footer='万元'>
+        <input type='digit' placeholder='请填写金额' value={money} onInput={e => setMoney(e.detail.value)} />
+      </Cell>
+      <Cell header='贷款年限 : ' footer='年'>
+        <slider min={10} max={30} showValue activeColor='#193C83' value={year} onChange={e => setYear(e.detail.value)} />
+      </Cell>
+      <Cell header='贷款利率 : ' footer='%'>
+        <input type='digit' placeholder='请输入利率' value={rate} onInput={e => setRate(e.detail.value)} />
+      </Cell>
+    </view>
+  )
+}

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

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from 'react'
+import Cell from '@/components/Cell'
+
+export default (props) => {
+  const { onChange } = props
+
+  const [money, setMoney] = useState()
+  const [year, setYear] = useState(20)
+  const [LPR, setLPR] = useState(4.65)
+  const [add, setAdd] = useState()
+  const [rate, setRate] = useState(4.65)
+
+  useEffect(() => {
+    setRate((LPR||0) + (add||0)/100)
+  }, [LPR, add])
+
+  useEffect(() => {
+    if (onChange) {
+      onChange({
+        money: money||0 - 0,
+        year: year||0 - 0,
+        rate: rate||0 - 0,
+      })
+    }
+  }, [money, year, rate, onChange])
+
+  return (
+    <view>
+      <Cell header='贷款总额 : ' footer='万元'>
+        <input type='digit' placeholder='请填写金额' value={money} onInput={e => setMoney(e.detail.value)} />
+      </Cell>
+      <Cell header='贷款年限 : ' footer='年'>
+        <slider min={10} max={30} showValue activeColor='#193C83' value={year} onChange={e => setYear(e.detail.value)} />
+      </Cell>
+      <Cell header='LPR : ' footer='%'>
+        <input type='digit' placeholder='请输入LPR' value={LPR} onInput={e => setLPR(e.detail.value)} />
+      </Cell>
+      <Cell header='基点 : ' footer='BP‱'>
+        <input type='digit' placeholder='请输入基点' value={add} onInput={e => setAdd(e.detail.value)} />
+      </Cell>
+      <Cell header='贷款利率 : ' footer='%'>
+        {`${LPR}% + ${add||''}BP‱ = ${rate}`}
+      </Cell>
+    </view>
+  )
+}

src/pages/mine/mortgageCalc/index.jsx

@@ -1,72 +1,109 @@
 import { useState, useEffect } from 'react'
+import Taro from '@tarojs/taro'
 import withLayout from '@/layout'
-import { ScrollView, Input } from '@tarojs/components'
-import '@/assets/css/iconfont.css'
+import { RadioGroup, Label, Radio } from '@tarojs/components'
+import Tabs from '@/components/Tabs'
+import Cell from '@/components/Cell'
+import GJJForm from './components/GJJForm'
+import SYForm from './components/SYForm'
+import * as sdk from './calc'
 import './index.scss'
 
-export default withLayout(() => {
+const tabs = ['商业贷款', '公积金贷款', '组合贷款']
 
-  return (
-    <view className='Page mortgageCalc'>
+const showError = title => Taro.showToast({ title, icon: 'none'});
 
-      <ScrollView scroll-y>
-        <view className='PageContent'>
+export default withLayout(() => {
+  const [loading, setLoading] = useState(false)
+  const [current, setCurrent] = useState(1)
 
-          <text>房产总价/万元</text>
-          <view className='FormLine flex-h'>
-            <view className='flex-item'>
-              <Input placeholder='请输入房产总额'></Input>
-            </view>
-          </view>
+  const [SYFormData, setSYFormData] = useState()
+  const [GJJFormData, setGJJFormData] = useState()
 
-          <text>首付比例</text>
-          <view className='FormLine flex-h'>
-            <view className='flex-item'>
-              <text>请选择</text>
-            </view>
-            <text className='iconfont icon-jiantoudown'></text>
-          </view>
+  const handleCalc = () => {
+    // 校验商业贷款
+    if (current !== 2) {
+      if (SYFormData.year < 0 || SYFormData.year > 30) {
+        showError('商业贷款年限设置不正确');
+        return
+      }
+      // eslint-disable-next-line no-restricted-globals
+      if (isNaN(SYFormData.money) || isNaN(SYFormData.rate)) {
+        showError('商业贷款金额或利率设置不正确');
+        return
+      }
+    }
+    // 校验公积金贷款
+    if (current !== 1) {
+      if (GJJFormData.year < 0 || GJJFormData.year > 30) {
+        showError('公积金贷款年限设置不正确');
+        return
+      }
+      // eslint-disable-next-line no-restricted-globals
+      if (isNaN(GJJFormData.money) || isNaN(GJJFormData.rate)) {
+        showError('公积金贷款金额或利率设置不正确');
+        return
+      }
+    }
 
-          <text>首付金额/万元</text>
-          <view className='FormLine flex-h'>
-            <view className='flex-item'>
-              <Input placeholder='请输入首付金额/万元'></Input>
-            </view>
-          </view>
+    setLoading(true)
+    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),
+      }
+    }
 
-          <text>商业贷款/万元</text>
-          <view className='FormLine flex-h'>
-            <view className='flex-item'>
-              <Input placeholder='请输入商业贷款/万元'></Input>
-            </view>
-          </view>
+    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),
+      }
+    }
+    setLoading(false)
 
-          <text>贷款年限</text>
-          <view className='FormLine flex-h'>
-            <view className='flex-item'>
-              <slider min="10" max="30" show-value activeColor='#193C83' />
-            </view>
-          </view>
-
-          <text>商业贷款利率</text>
-          <view className='FormLine flex-h'>
-            <view className='flex-item'>
-              <text>请选择</text>
-            </view>
-            <text className='iconfont icon-jiantoudown'></text>
-          </view>
+    console.log('------商业------>', syResult)
+    console.log('------公积金------>', gjjResult)
+  }
 
-          <view className='Agree'>
-            <text className='iconfont icon-gou'></text>
-            <text>使用公积金贷款</text>
+  return (
+    <view className='Page mortgageCalc'>
+      <Tabs tabs={tabs} current={current} onChange={setCurrent} />
+      {/* <Cell header='还款方式 : '>
+        <RadioGroup>
+          <Label><Radio value='debx' /> 等额本息</Label>
+          <Label style={{marginLeft: '1em'}}><Radio value='debj' /> 等额本金</Label>
+        </RadioGroup>
+      </Cell> */}
+      {
+        current !== 2 && (
+          <view className='container'>
+            {current === 3 && <view className='title'>商业贷款</view>}
+            <SYForm onChange={setSYFormData} />
           </view>
-
-          <view className='Btn'>
-            <text>计算</text>
+        )
+      }
+      {
+        current !== 1 && (
+          <view className='container'>
+            {current === 3 && <view className='title'>公积金贷款</view>}
+            <GJJForm onChange={setGJJFormData} />
           </view>
-
-        </view>
-      </ScrollView>
+        )
+      }
+      <view className='Btn'>
+        <button loading={loading} onClick={handleCalc}>开始计算</button>
+      </view>
 
     </view>
   )

src/pages/mine/mortgageCalc/index.scss

@@ -1,87 +1,36 @@
 .Page.mortgageCalc {
-  background: #fff;
+  background: #fafafa;
   height: 100vh;
   width: 100%;
-  > scroll-view {
-    width: 100%;
-    height: 100%;
-    .PageContent {
-      position: relative;
-      overflow: hidden;
-      min-height: 100vh;
-      > text {
-        font-size: 34px;
-        font-weight: bold;
-        color: #333;
-        display: block;
-        text-indent: 40px;
-        margin-top: 30px;
-      }
-      > .flex-h {
-        padding: 20px 40px;
-        border-bottom: 2px solid rgba(0, 0, 0, 0.12);
-        margin-top: 10px;
-        align-items: center;
-        >view {
-          > input {
-            display: block;
-            width: 100%;
-            background: none;
-            font-size: 26px;
-            line-height: 40px;
-            height: 40px;
-          }
-          >text {
-            display: block;
-            width: 100%;
-            background: none;
-            font-size: 26px;
-            line-height: 40px;
-            height: 40px;
-          }
-        }
-        >text {
-          font-size: 30px;
-        }
-      }
-      >.Agree {
-        font-size: 0;
-        white-space: nowrap;
-        padding: 0 30px;
-        >text {
-          display: inline-block;
-          vertical-align: middle;
-          font-size: 30px;
-          font-weight: bold;
-          color: #333;
-          line-height: 1;
-          margin-top: 40px;
-          &.iconfont {
-            font-weight: normal;
-            margin-right: 10px;
-            color: #ccc;
-            &.active {
-              color: #193C83;
-            }
-          }
-        }
-      }
-      .Btn {
-        padding: 40px;
-        position: relative;
-        overflow: hidden;
-        margin-top: 80px;
-        >text {
-          display: block;
-          text-align: center;
-          font-size: 32px;
-          line-height: 92px;
-          background: #193C83;
-          color: #fff;
-          font-weight: bold;
-          border-radius: 92px;
-        }
-      }
+
+  .container {
+    margin-top: 1em;
+    background: #fff;
+  }
+
+  .title {
+    padding-left: 1em;
+    padding-bottom: .5em;
+    background: #fafafa;
+  }
+
+  slider {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .Btn {
+    padding: 40px;
+    position: relative;
+    overflow: hidden;
+    > button {
+      display: block;
+      text-align: center;
+      font-size: 32px;
+      line-height: 92px;
+      background: #193c83;
+      color: #fff;
+      border-radius: 92px;
     }
   }
 }