Skip to content

K
komatsu-lease-app
Commit 10f2c2c8 authored by Step_by_step's avatar Step_by_step
Browse files
Options

feat: 融资计算器

parent 6e4a2f36
Hide whitespace changes
Inline Side-by-side
Showing with 727 additions and 44 deletions
README.md
View file @ 10f2c2c8
......@@ -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. 退出登录
\ No newline at end of file
1. 我的奖励券 （&#x270B; 1）
2. 关联项目 （&#x270B; 1.5）
3. 投诉与建议 （&#x270B; .5）
4. 关于我们 （&#x270B; .5）
### 其他
- 关于海马汇方案的特殊情况处理（打包问题， 显示问题，兼容性问题等等） （&#x270B; 3）
- 消息推送 （极光推送）（&#x270B; 1）
### **合计：** 22.5 （接口完毕情况下）
\ No newline at end of file
package.json
View file @ 10f2c2c8
......@@ -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
View file @ 10f2c2c8
<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 0 → 100644
View file @ 10f2c2c8
<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 0 → 100644
View file @ 10f2c2c8
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 0 → 100644
View file @ 10f2c2c8
<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 0 → 100644
View file @ 10f2c2c8
<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 0 → 100644
View file @ 10f2c2c8
<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 0 → 100644
View file @ 10f2c2c8
const state = {};
export default {
namespaced: true,
state,
};
src/modules/calculator/views/detail.vue 0 → 100644
View file @ 10f2c2c8
<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 0 → 100644
View file @ 10f2c2c8
<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 0 → 100644
View file @ 10f2c2c8
<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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment