feat: 融资计算器

README.md

@@ -17,34 +17,39 @@ npm run dev   本地运行
 }
 </route>
 ```
----
+&#x1F170;
 
-### 子应用
+---
 
-1. 融资计算器 &#x1F170;
-2. 融资意向 &#x2705; 
-3. 项目查询
-4. 合同签约 （E签宝， 预览签署文件）
-5. 还款计划 （支付）
-6. 还款计划查询  （发票预览下载）
-7. 自助服务  &#x2705;
-8. 客户信息变更
+> &#x270B; ：计划人天数； &#x2705; ：页面已画完，
 
+### 子应用 
 
-#### 导航
-- 首页
-- 消息 （消息通知）
-- 我的
+1. 融资计算器 &#x2705; （ &#x270B;.5）
+2. 融资意向 &#x2705;  （ &#x270B;.5）
+3. 项目查询  (&#x270B;1.5 项目信息明细页面需要重头画)
+4. 合同签约 （E签宝， 预览签署文件） （&#x270B; 2）
+5. 还款计划 （支付）（&#x270B; 2）
+6. 还款计划查询  （发票预览下载） （&#x270B; 2）
+7. 自助服务  &#x2705; （ &#x270B;.5）
+8. 客户信息变更  （&#x270B; 1）
 
 #### 首页
-1.  还款情况展示
-2. 最近消息展板
-3. 定位
+1. 还款情况展示  （&#x270B; 2）
+2. 最近消息展板 （&#x270B; 2）
+3. 定位 （只作用于 **融资意向** 选择代理店的时候使用）？
 
 #### 我的
 
-1. 我的奖励券
-2. 关联项目
-3. 投诉与建议 
-4. 关于我们
-5. 退出登录 
+1. 我的奖励券 （&#x270B; 1）
+2. 关联项目  （&#x270B; 1.5）
+3. 投诉与建议  （&#x270B; .5）
+4. 关于我们 （&#x270B; .5）
+
\ No newline at end of file
+### 其他
+
+- 关于海马汇方案的特殊情况处理（打包问题， 显示问题，兼容性问题等等）  （&#x270B; 3）
+
+- 消息推送 （极光推送）（&#x270B; 1）
+
+### **合计：** 22.5 （接口完毕情况下）
\ No newline at end of file

package.json

@@ -5,7 +5,8 @@
     "dev": "VITE_TARGET=ALL vite ",
     "build": "vite build",
     "build:selfService": "VITE_TARGET=selfService vite build",
-    "build:intention": "VITE_TARGET=intention vite build"
+    "build:intention": "VITE_TARGET=intention vite build",
+    "build:calculator": "VITE_TARGET=calculator vite build"
   },
   "dependencies": {
     "@hips/plugin-vue-jssdk": "^1.1.2",

src/components/ListItem.vue

 <template>
-  <div class="box">
-    <template v-if="title">
-      <h1 class="title ">
-        {{ title }}
-        <span v-if="!!other_title" class="title-other">{{ other_title }}</span>
-      </h1>
-      <hr />
-    </template>
-    <table :class="{ only_two: values.length < 3 }">
-      <template v-for="(value, i ) in values">
-        <tr>
-          <th v-if="i === 0" v-for="text in value">{{ text }}</th>
-          <td v-else v-for="text in value">{{ text }}</td>
-        </tr>
+  <SwipeCell class="swipe" :disabled="!isSwiper">
+    <div class="box">
+      <template v-if="title">
+        <h1 class="title ">
+          {{ title }}
+          <span v-if="!!other_title" class="title-other">{{ other_title }}</span>
+        </h1>
+        <hr />
       </template>
-    </table>
-  </div>
+      <table :class="{ only_two: values[0].length < 3 }">
+        <template v-for="(value, i ) in values">
+          <tr>
+            <th v-if="i === 0" v-for="text in value">{{ text }}</th>
+            <td v-else v-for="text in value">{{ text }}</td>
+          </tr>
+        </template>
+      </table>
+    </div>
+
+    <template #right>
+      <Button square type="danger" style="height: 100%" @click.stop="$emit('clickRight')">
+        <Icon name="delete" color="#fff" size="30" />
+      </Button>
+
+    </template>
+  </SwipeCell>
 </template>
 
 <script setup>
+import { SwipeCell, Button, Icon } from 'vant'
+
 defineProps({
   title: {
     type: String,
@@ -31,8 +42,14 @@ defineProps({
   values: {
     type: Array,
     default() { return [] }
+  },
+  isSwiper: {
+    type: Boolean,
+    default: false
   }
 })
+
+defineEmits(['clickRight'])
 </script>
 
 <style scoped lang="less">
@@ -40,12 +57,8 @@ defineProps({
   box-sizing: border-box;
   height: auto;
   background-color: white;
-  width: 90%;
-  margin: 0 auto;
-  border-left: 3px solid #019ae5;
+  width: 100%;
   padding: 8px 8px;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
 }
 
 .box+.box {
@@ -94,4 +107,15 @@ table.only_two tr>td:nth-child(2) {
 table.only_two tr>td:nth-child(2) {
   color: orange
 }
+
+.swipe {
+  box-sizing: border-box;
+  background-color: white;
+  width: 92%;
+  margin: 0 auto;
+  border-left: 3px solid #019ae5;
+  // padding: 8px 8px 0px 8px;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
 </style>
\ No newline at end of file

src/components/RepayPlan.vue

+<template>
+  <div class="container">
+    <NavBar :title="navTitle" left-arrow @click-left="goBack" />
+    <div class="content">
+      <header>
+        <div class="header-top">
+          <p class="key">融资金额</p>
+          <p class="value">￥ {{ currencyObj.financingCurrency }}</p>
+
+          <div class="times">
+            {{ currencyObj.times }}期
+          </div>
+        </div>
+        <div class="header-bottom">
+          <table>
+            <tr class="key">
+              <td>头金金额</td>
+              <td>首期租金</td>
+            </tr>
+            <tr class="secend_value">
+              <td>￥{{ currencyObj.fristCurrency }}</td>
+              <td>￥{{ currencyObj.fristCurrency }}</td>
+            </tr>
+          </table>
+        </div>
+      </header>
+
+      <div class="list">
+        <p>还款计划</p>
+        <div class="plan-list">
+          <slot name="list"></slot>
+        </div>
+        <div class="plan-footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { goBack } from "@/utils/globalFun"
+import { NavBar } from "vant";
+
+defineProps({
+  navTitle: {
+    type: String,
+    default: ''
+  },
+  currencyObj: {
+    type: Object,
+    default: {
+      financingCurrency: '0.00',
+      headerCurrency: '0.00',
+      fristCurrency: '0.00',
+      times: '0'
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+@bc: #3079d8;
+
+.container {
+  background-color: @bc;
+  background-image: radial-gradient(transparent 40%, #538fe0 40%, #538fe0 55%, #3079d8 55%);
+  background-size: 100vw 100vw;
+  background-repeat: no-repeat;
+  background-position: 50vw -50vw;
+  color: #fff;
+}
+
+:deep(.van-nav-bar) {
+  background-color: transparent !important;
+}
+
+:deep(.van-nav-bar__title) {
+  color: #fff;
+}
+
+:deep(.van-nav-bar .van-icon) {
+  color: #fff !important;
+}
+
+:deep(.van-hairline--bottom:after) {
+  border-color: transparent;
+}
+
+.content {
+  height: calc(100% - var(--van-nav-bar-height));
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+header {
+  height: 19vh;
+  width: 100%;
+  padding-left: 10vw;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 19vh);
+  background-color: #fff;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  box-sizing: border-box;
+  padding: 20px 5px 5px 20px;
+  color: black;
+  overflow: hidden;
+
+  p {
+    font-size: 17px;
+  }
+}
+
+.plan-list {
+  flex: 1 0 auto;
+  height: 99%;
+}
+
+.plan-footer {
+  flex: 0 1 50px;
+}
+
+.header-top {
+  position: relative;
+  height: 11vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.key {
+  line-height: 4vh;
+}
+
+.value {
+  font-size: 23px;
+  font-weight: 600;
+  line-height: 4vh;
+}
+
+.times {
+  position: absolute;
+  right: 20vw;
+  top: 2vw;
+  height: 5vh;
+  width: 7vh;
+  background-color: #fff;
+  border-radius: 5px;
+  font-weight: 600;
+  color: @bc;
+  line-height: 5.5vh;
+  text-align: center;
+  font-size: 14px;
+}
+
+.times::after {
+  content: '';
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-image: linear-gradient(143deg, #fff 0%, #fff 50%, transparent 50%);
+  transform: translateY(-10px);
+}
+
+table {
+  width: 100%;
+}
+
+.secend_value {
+  font-weight: 600;
+}
+</style>
\ No newline at end of file

src/modules/calculator/api/index.js

+import { get, put, post, File, deleteReq } from '@/utils/http'
+
+const baseURL = import.meta.env.VITE_HTTP_BASE_URL
+const api = {
+  // getMakingList (data) { // 查询合同制作列表
+  //   return get(
+  //     `${baseURL}/hlct/v1/0/contracts/toMake`,
+  //     {...data}
+  //   )
+  // },
+};
+
+export default api;

src/modules/calculator/components/ListItem.vue

+<template>
+  <div class="box">
+    <template v-if="title">
+      <h1 class="title ">{{ title }}</h1>
+      <hr />
+    </template>
+    <table>
+      <template v-for="(value, i ) in values">
+        <tr v-if="i === 0">
+          <th>{{ value[0] }}</th>
+          <th>{{ value[1] }}</th>
+          <th>{{ value[2] }}</th>
+        </tr>
+        <tr v-else>
+          <td>{{ value[0] }}</td>
+          <td>{{ value[1] }}</td>
+          <td>{{ value[2] }}</td>
+        </tr>
+      </template>
+    </table>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  values: {
+    type: Array,
+    default() { return [] }
+  }
+})
+</script>
+
+<style scoped lang="less">
+.box {
+  box-sizing: border-box;
+  height: auto;
+  background-color: white;
+  width: 90%;
+  margin: 0 auto;
+  border-left: 3px solid #019ae5;
+  padding: 5px 3px;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.box+.box {
+  margin-top: 20px;
+}
+
+.title {
+  font-weight: 600;
+}
+
+hr {
+  border: 1px solid #f7f8f8;
+  background-color: #f7f8f8;
+}
+
+table {
+  width: 100%;
+
+  th {
+    color: gray;
+  }
+
+  td,
+  th {
+    text-align: center;
+    height: 25px;
+    line-height: 20px;
+  }
+}
+</style>
\ No newline at end of file

src/modules/calculator/components/Notice.vue

+<template>
+  <section class="hint">
+    <p class="title">
+      <Icon class="icon" name="info" color="#7dc401" size="6vw" />
+      <span>温馨提示</span>
+    </p>
+    <div class="detail">{{ detail }}</div>
+  </section>
+</template>
+
+<script setup>
+import { Icon } from "vant";
+defineProps({
+  detail: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.hint {
+  box-sizing: border-box;
+  height: 60px;
+  width: 95%;
+  margin: 5px auto 10px;
+  background-color: #f0f9e5;
+  padding: 6px 7px;
+}
+
+.title {
+  color: #7dc401;
+  font-weight: 600;
+  line-height: 6vw;
+
+  i {
+    vertical-align: middle;
+    margin-right: 8px;
+  }
+}
+
+.detail {
+  width: 100%;
+  text-align: center;
+  color: gray;
+}
+</style>
\ No newline at end of file

src/modules/calculator/components/Plus.vue

+<template>
+  <div class="plus">
+    <Icon class="icon" name="plus" color="#fff" size="6vw" />
+  </div>
+</template>
+
+<script setup>
+import { Icon } from 'vant'
+</script>
+
+<style lang="less" scoped>
+.plus {
+  width: 40px;
+  height: 40px;
+  background-color: #019ae5;
+  border-radius: 50%;
+  position: absolute;
+  bottom: 70px;
+  right: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.icon {
+  line-height: 38px;
+}
+</style>
\ No newline at end of file

src/modules/calculator/store/index.js

+const state = {};
+
+export default {
+  namespaced: true,
+  state,
+};

src/modules/calculator/views/detail.vue

+<template>
+  <div class="container">
+    <NavBar title="试算详情" left-arrow @click-left="goBack" />
+
+    <Noticce detail="如需使用其他测算方式可联系当地代理店"></Noticce>
+
+    <div class="content">
+      <section class="form-area">
+        <AuForm v-model="formConfig" :key="form" />
+      </section>
+
+      <section class="sub">
+        <Button type="primary" block @click="computing">计算</Button>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { goBack } from "@/utils/globalFun"
+import { NavBar, Button } from "vant";
+import Noticce from "@/components/Notice.vue"
+import AuForm from '@/components/AuForm.vue';
+import AuFormClass from "@/components/useAuForm";
+import { useRouter } from "vue-router";
+
+const form = $ref();
+const formConfig = $ref(new AuFormClass([
+  {
+    title: '物件价格',
+    propName: 'paymentReqDate',
+    type: 'currency',
+    value: '',
+    isRequired: true
+  },
+  {
+    title: '还款方式',
+    propName: 'paymentRe3qDat3e',
+    type: 'cell',
+    value: '',
+    isRequired: true,
+    select: [],
+  },
+  {
+    title: '融资租期（月）',
+    propName: 'paymentReqDat3e',
+    type: 'digit',
+    value: '',
+    isRequired: true
+  },
+  {
+    title: '首付款比例',
+    propName: 'paymentReqDat3e',
+    type: 'rate',
+    value: '',
+    isRequired: true
+  },
+  {
+    title: '首付租金日',
+    propName: 'paymentReqDat3e',
+    type: 'cell',
+    value: '',
+    isRequired: true,
+    select: 'date'
+  },
+]))
+
+const router = useRouter();
+const computing = () => {
+  router.push({ name: 'calculator-views-plan' })
+}
+</script>
+
+<style lang="less" scoped>
+.sub {
+  width: 70%;
+  margin: 50px auto 5px;
+}
+
+.form-area {
+  padding: 10px;
+}
+
+.content {
+  height: calc(100% - var(--van-nav-bar-height));
+  overflow-y: auto;
+}
+</style>
\ No newline at end of file

src/modules/calculator/views/index.vue

+<template>
+  <div class="container">
+    <NavBar title="融资计算器" left-arrow @click-left="goBack" />
+
+    <section class="list">
+      <PullRefresh v-model="refreshing" @refresh="onRefresh" class="scroll">
+        <List :finished="finished" finished-text="没有更多了" @load="loadApproval">
+          <ListItem v-for="item in listValue" :other_title="item.other_title" :title="item.title" :values="item.values"
+            @click="jump" @clickRight="clickRight" isSwiper />
+        </List>
+      </PullRefresh>
+    </section>
+
+    <Plus @click="jump" />
+  </div>
+</template>
+
+<script setup>
+import { goBack } from "@/utils/globalFun"
+import { NavBar, List, PullRefresh } from "vant";
+import ListItem from '@/components/ListItem.vue'
+import Plus from '@/components/Plus.vue'
+import api from "../api";
+import { useRouter } from "vue-router";
+
+const listValue = $ref([
+  {
+    title: '2022-07-18',
+    other_title: "2022-07-18",
+    values: [["物件价格", "融资金额", "每期还款"], ["￥ 20,000.00", "￥ 20,000.00", "￥ 20,000.00"]]
+  }
+])
+
+const refreshing = $ref(true);
+const finished = $ref(true);
+
+const onRefresh = () => {
+  // 下拉重置参数，重新加载
+};
+
+const loadApproval = () => {
+
+}
+
+const router = useRouter();
+const jump = () => {
+  router.push({ name: 'calculator-views-detail' })
+}
+
+const clickRight = () => { console.log(333) }
+</script>
+
+<style scoped lang="less">
+.list {
+  box-sizing: border-box;
+  height: calc(100vh - var(--van-nav-bar-height));
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-top: 8px;
+  padding-bottom: 10px;
+}
+
+.scroll {
+  box-sizing: border-box;
+  height: 100%;
+  overflow-y: auto;
+}
+</style>
+
+<route>
+{
+  meta: {
+    title: '融资计算器'
+  }
+}
+</route>
+

src/modules/calculator/views/plan.vue

+<template>
+  <RepayPlan navTitle="还款计划" :currencyObj="currencyObj">
+    <template #list>
+      <div class="repay_list">
+        <div class="left">
+          <div class="times-box" v-for="i in 12">
+            <div class="times">{{ i }}期</div>
+          </div>
+        </div>
+        <div class="right">
+          <div class="item" v-for="i in 12">
+            <div class="item-head">
+              <span>租金</span>
+              <span>￥10,000.00</span>
+              <span>2022-06-20</span>
+            </div>
+            <div class="item-foot">
+              <span>本金</span>
+              <span>￥10,000.00</span>
+              <span>利息</span>
+              <span>￥10,000.00</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+
+    </template>
+  </RepayPlan>
+</template>
+
+<script setup>
+import RepayPlan from '@/components/RepayPlan.vue'
+
+const currencyObj = $ref({
+  financingCurrency: '200,000.00',
+  headerCurrency: '5,000.00',
+  fristCurrency: '10,000.00',
+  times: '12'
+}) 
+</script>
+
+<style lang="less" scoped>
+@lineColr: #dcdddf;
+
+.repay_list {
+  display: flex;
+  width: 100%;
+  height: 98%;
+  overflow-y: auto;
+  scrollbar-width: none; /* firefox */
+}
+
+.repay_list::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+}
+
+@leftW: 45px;
+
+.left {
+  flex: 0 1 @leftW;
+}
+
+.times-box {
+  display: flex;
+  height: 100px;
+  flex-direction: column;
+  justify-content: center;
+  background-image: linear-gradient(@lineColr 0%, @lineColr 16%, transparent 16%, transparent 33%, @lineColr 33%, @lineColr 83%, transparent 83%, transparent 100%);
+  /* 35%设置虚线点y轴上的长度 */
+  background-position: 50% 50%;
+  /* right配置右边框位置的虚线 */
+  background-size: 1px 20px;
+  /* 第一个参数设置虚线点x轴上的长度；第二个参数设置虚线点的间距 */
+  background-repeat: repeat-y;
+}
+
+
+.times-box:nth-child(1) {
+  margin-top: 25px;
+  height: 70px;
+  justify-content: flex-start;
+}
+
+.times-box:nth-last-child(1) {
+  // bottom: 80px;
+  height: 70px;
+  justify-content: flex-end;
+}
+
+.times {
+  height: @leftW;
+  width: @leftW;
+  display: flex;
+  justify-content: center;
+  line-height: @leftW;
+  color: #fff;
+  background-color: #019ae5;
+  border-radius: 5px;
+}
+
+.right {
+  flex: 1 0 auto;
+  padding-left: 20px;
+}
+
+.item {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  box-sizing: border-box;
+  margin-top: 15px;
+  margin-bottom: 30px;
+  width: 98%;
+  height: 70px;
+  border: 1px solid #dedede;
+  background-color: #eef5fd;
+  border-radius: 5px;
+  padding: 10px 10px 3px;
+}
+
+.item-head {
+  display: flex;
+  justify-content: space-around;
+  font-weight: 600;
+  color: #019ae5;
+}
+
+.item-foot {
+  color: gray;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+
+  span {
+    margin-right: 5px;
+    font-size: 12.5px;
+  }
+}
+</style>
\ No newline at end of file