Skip to content

K
komatsu-lease-app
Commit d7cbe26c authored by WangRui's avatar WangRui
Browse files
Options

[feature]还款计划界面

parent 5c8018c1
Hide whitespace changes
Inline Side-by-side
Showing with 603 additions and 5 deletions
src/assets/alipay.svg 0 → 100644
View file @ d7cbe26c
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1670374954139" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5099" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M230.771014 576.556522c-12.614493 9.646377-25.228986 23.744928-28.93913 42.295652-5.194203 24.486957-0.742029 55.652174 22.26087 80.13913 28.93913 28.93913 72.718841 37.101449 92.011594 38.585508 51.2 3.710145 106.110145-22.26087 147.663768-50.457971 16.324638-11.130435 43.77971-34.133333 70.492754-69.750725-59.362319-30.423188-133.565217-64.556522-212.22029-61.588406-41.553623 1.484058-70.492754 9.646377-91.269566 20.776812zM983.188406 712.347826c25.971014-61.588406 40.811594-129.113043 40.811594-200.347826 0-281.971014-230.028986-512-512-512S0 230.028986 0 512s230.028986 512 512 512c170.666667 0 321.298551-83.849275 414.794203-212.22029C838.492754 768.742029 693.797101 696.023188 604.011594 652.985507c-42.295652 48.973913-105.368116 97.205797-176.602898 117.982609-44.521739 13.356522-85.333333 18.550725-126.886957 9.646377-42.295652-8.904348-72.718841-28.197101-90.527536-47.489855-8.904348-10.388406-19.292754-22.26087-27.455073-37.843479 0.742029 0.742029 0.742029 2.226087 0.742029 2.968116 0 0-4.452174-7.42029-7.420289-19.292753-1.484058-5.936232-2.968116-11.872464-3.710145-17.808696-0.742029-4.452174-0.742029-8.904348 0-12.614493-0.742029-7.42029 0-15.582609 1.484058-23.744927 4.452174-20.776812 12.614493-43.77971 35.617391-65.298551 48.973913-48.231884 115.014493-50.457971 149.147826-50.457971 50.457971 0.742029 138.017391 22.26087 212.22029 48.973913 20.776812-43.77971 34.133333-89.785507 42.295652-121.692754H304.973913v-33.391304h158.052174v-66.782609H272.324638v-34.133333h190.701449v-66.782609c0-8.904348 2.226087-16.324638 16.324638-16.324637h74.944927v83.107246h207.026087v33.391304H554.295652v66.782609H719.768116S702.701449 494.933333 651.501449 586.202899c115.014493 40.811594 277.518841 104.626087 331.686957 126.144927z m0 0" fill="#1296db" p-id="5100"></path></svg>
\ No newline at end of file
src/assets/bankCard.svg 0 → 100644
View file @ d7cbe26c
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1670375105765" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8653" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M236.10511 787.545l75.156-328.942h-2.593c-2.588 0-6.48 1.314-9.067 2.632-1.299 6.58-5.185 24.997-7.777 32.895-3.887 17.104-3.887 19.736-5.18 28.948l-1.3 1.313H252.95011l-1.294-1.313 7.773-31.581c6.48-28.947 7.773-39.472 10.365-53.948l1.298-1.314c14.252-2.632 18.14-2.632 34.988-5.264l1.294 1.318-2.592 9.206c2.592-1.314 5.185-3.946 7.777-5.26 1.294-1.318 2.588-1.318 5.18-2.632l38.874-167.1c7.778-36.847 44.06-65.794 79.047-65.794H199.82011c-36.28 0-71.268 28.947-79.042 65.792L1.56011 787.545c-7.773 36.84 14.256 65.787 49.243 65.787h234.542c-36.28 0-58.31-30.261-49.239-65.787z m-23.328-273.679c-11.659 6.578-28.504 10.525-46.647 10.525-14.256 0-38.873-2.632-46.65-17.103-3.887-5.266-5.18-10.53-5.18-17.11l2.587-23.681 1.298-6.58 19.437-85.523 1.293-5.265s6.48 1.318 42.765 0v1.318c-3.886 10.526-22.029 85.524-22.029 85.524l-3.887 22.37v3.945c1.295 10.526 7.774 17.104 19.438 17.104 7.772 0 12.958-2.632 19.437-6.578 9.071-7.893 11.66-19.737 15.55-36.84 0 0 18.138-82.896 18.138-88.157 2.594 0 10.37 1.314 36.287 0v1.314c-3.89 10.525-22.03 89.474-22.03 89.474l-2.593 7.894c-2.592 17.103-7.772 35.525-27.214 47.369z" fill="#D43634" p-id="8654"></path><path d="M517.30011 787.545l19.435-86.842h-23.327c-3.887 0-6.48 0-9.072-1.314-2.588-1.318-5.18-3.946-5.18-6.578s1.294-6.58 2.592-11.844l40.167-134.207h28.51l-3.887 14.471 3.886-3.946 7.778-32.893H560.06011v-1.314c1.294-5.266 2.592-11.844 3.886-17.11l1.3-7.892c2.587-11.843 5.18-26.315 5.18-31.58 0-2.631 1.297-9.21-6.48-9.21-2.592 0-6.478 1.317-10.365 2.631-1.299 6.58-5.185 25.002-7.777 32.895-3.888 17.108-3.888 19.736-5.182 28.947l-1.298 1.319h-32.395l-1.294-1.319 7.774-31.58c6.48-28.943 7.777-39.472 9.07-53.944l1.3-1.318c14.251-2.628 18.137-2.628 34.983-5.26l1.298 1.314-2.592 9.21c2.592-1.313 5.184-3.946 7.777-5.264 7.773-3.946 15.546-5.26 20.73-5.26 3.888 0 7.774 0 11.664 2.632l37.577-167.105c7.776-36.84 44.058-65.788 80.34-65.788h-281.19c-36.285 0-71.273 28.947-79.046 65.788L317.74011 432.29c6.48-2.633 11.664-2.633 15.55-2.633 6.48 0 14.257 2.633 18.144 10.526 2.592 7.893 1.294 17.103-2.593 34.211l-2.592 9.207c-3.887 19.736-5.18 23.688-6.479 36.844l-3.886 3.948h-32.396v-1.314c1.295-5.266 2.593-11.844 3.887-17.11l1.294-7.892c2.593-11.843 5.185-26.315 5.185-31.58 0-2.631 1.294-7.893-3.886-9.21l-75.16 328.94c-7.774 36.845 14.256 65.792 49.243 65.792H566.54011c-34.987 1.314-57.017-28.947-49.24-64.473z m10.363-230.26l-6.478 21.054h-45.353l-5.185 3.946c-2.592 2.634-2.592 1.315-5.185 2.634-2.588 1.314-7.773 3.946-15.55 3.946H435.66011l6.48-19.736h3.886c3.886 0 6.48 0 7.778-1.318 1.294-1.315 2.592-2.63 5.18-6.58l7.777-15.79h33.69l-5.18 11.844h32.393z m-120.512-109.21l-6.479 26.318c-1.294 5.261-2.592 11.84-3.886 17.104-2.592 11.84-3.887 17.105-5.186 19.737-1.294 2.632-1.294 5.264-2.592 11.844h-37.575c1.294-6.58 2.592-9.212 3.886-11.844 1.294-2.632 1.294-5.265 3.887-11.844 2.592-9.211 3.886-15.79 5.185-22.368 1.294-5.26 3.887-21.05 5.18-26.315-1.293-3.946 1.3-7.893 6.48-11.84 7.777-5.264 19.437-6.578 27.214-2.632 5.184 2.633 6.48 7.893 3.886 11.84z m6.48 30.265c2.592-11.843 7.776-25 16.844-34.212 14.256-13.157 31.1-13.157 38.878-13.157 11.66 0 24.617 2.632 31.097 11.843 3.886 5.26 7.777 15.79 3.886 35.526-1.294 6.579-5.18 21.05-14.252 30.262-11.664 11.842-25.916 15.79-41.467 15.79-5.184 0-14.252-1.314-20.73-3.948-19.438-7.896-16.849-28.947-14.257-42.104z m69.975 222.363h-37.58c-2.593 0-5.18 0-9.073-1.314-2.588-1.318-5.18-2.632-6.478-3.946-1.294-2.632-3.886-3.95-2.588-9.212l10.366-36.844H420.11011l6.48-21.05h18.142l5.18-17.104h-18.138l6.48-19.736h81.634l-6.479 19.736h-32.396l-5.18 17.105h33.69l-5.186 21.05h-33.689l-7.773 27.633c-1.298 2.632 7.773 3.946 11.66 3.946l16.844-2.632-7.772 22.368z" fill="#034582" p-id="8655"></path><path d="M563.94511 567.81l-6.478 22.369s2.592-1.314 5.184-3.946l3.887-18.422h-2.593z m-111.44-63.155c3.89 0 6.478-2.633 9.07-6.579 3.887-5.264 6.48-18.422 7.778-21.054 3.887-15.786 2.588-24.997-5.185-24.997-10.365 0-14.257 13.158-18.143 27.63-1.294 5.264-2.592 10.524-2.592 14.475 2.592 10.525 9.072 10.525 9.072 10.525z m81.638 165.787c-1.298 3.947-1.298 6.579-1.298 6.579 1.298 1.314 2.592 2.632 3.89 2.632h3.886l11.66-51.315h-6.478l-11.66 42.104z m20.73-71.052l-2.592 9.21h6.48l2.592-9.21h-6.48z" fill="#034582" p-id="8656"></path><path d="M773.87011 504.654c3.886 0 10.366-2.632 12.958-6.578 1.294-1.318 2.592-5.264 3.886-7.898 1.294-3.946 2.592-9.206 2.592-13.156 1.294-2.63 1.294-5.261 1.294-7.893 1.3-10.526-2.592-17.104-9.07-17.104-10.366 0-14.252 13.157-18.139 27.629-1.298 5.264-2.593 10.524-2.593 14.476 2.593 10.524 9.072 10.524 9.072 10.524zM598.93311 608.6l2.592-9.21H560.06011l-2.592 9.21h34.987c5.185 0 6.48 1.314 6.48 0z" fill="#107C84" p-id="8657"></path><path d="M972.13011 202.028H716.85311c-36.28 0-71.27 28.947-80.34 65.788l-37.58 167.1c2.592 1.319 5.185 3.951 6.48 7.897 2.591 7.894 1.293 17.104-2.593 34.209l-2.593 9.21c-3.887 19.736-5.18 23.688-6.479 36.845l-1.294 1.314h-14.252l-7.778 32.894c2.593-2.632 7.778-5.265 10.366-6.58 6.48-2.632 20.735-5.264 20.735-5.264h45.354l-15.55 52.635c-2.594 9.206-5.182 14.471-7.774 17.104-1.298 2.632-3.886 5.264-7.778 7.892-3.886 2.632-7.773 3.95-10.365 3.95H553.58011l-11.664 51.312 15.551-1.314-6.48 23.682H538.03011l-20.73 86.843c-7.778 36.84 14.252 65.787 49.24 65.787h255.276c36.282 0 71.27-28.947 80.34-65.787l119.215-519.729c7.773-36.84-14.252-65.788-49.24-65.788zM789.42011 432.289c5.18 2.628 9.068 5.26 11.66 9.206v-3.946l1.298-1.314c15.546-2.632 19.437-2.632 36.281-5.264v1.318c-2.592 11.838-6.478 24.996-9.07 36.84-6.48 26.315-7.774 39.472-10.366 52.63l-1.299 1.318h-33.688l-1.294-1.318c0-1.315 1.294-3.947 1.294-5.261-5.186 3.946-10.366 7.893-16.845 7.893-6.48 0-11.664-1.314-18.143-3.947-19.437-7.896-16.845-30.266-14.253-42.104 2.59-11.844 7.774-25.001 16.846-34.213 14.252-11.838 29.802-14.471 37.58-11.838z m-176.235 92.102l24.622-103.946 10.366-47.37s1.298-3.946 1.298-5.26c5.18 0 15.55 1.314 44.06 0h10.364c22.03 0 40.168 0 50.538 13.157 3.886 5.261 5.18 11.84 5.18 18.422 0 5.261-1.294 10.526-1.294 14.472-3.886 17.105-12.958 31.58-24.622 40.791-18.142 14.472-42.76 14.472-63.495 14.472h-2.593l-2.588 2.632c0 1.314-5.185 21.05-5.185 21.05s-5.185 27.633-6.479 32.894c-6.478-1.314-16.844-1.314-40.172-1.314z m9.072 119.736c-1.294 3.946-2.588 6.578-5.18 9.21-2.594 2.628-6.48 5.262-15.552 5.262h-15.55v14.474c0 3.947 1.294 3.947 1.294 3.947s1.3 1.314 2.593 1.314h5.184l15.55-1.314-7.776 23.682h-16.846c-11.663 0-20.73 0-24.62-2.632-2.593-1.314-3.887-3.946-2.593-7.892l1.298-56.576h27.21v11.839h6.48c2.591 0 3.89 0 5.184-1.314 1.294-1.318 1.294-1.318 1.294-2.633l2.593-9.21h22.03l-2.593 11.843z m95.89 56.575h-29.803l2.593-6.578h-59.609l6.48-19.736h6.477l31.101-106.578 6.48-21.05h29.802l-2.592 10.525s7.777-5.265 15.55-7.894c6.48-1.318 37.58-2.632 47.946-2.632h32.394v11.84c0 2.632 1.3 2.632 5.186 2.632h5.184l-5.184 21.054h-16.846c-15.55 1.315-20.734-5.264-20.734-13.157v-11.843l-2.593 10.525h-10.366l-31.096 105.263h7.774l-6.48 21.051h-9.072l-2.592 6.578z m133.47-93.42h-32.394l-5.185 17.108h32.395l-5.18 17.104h-34.988l-6.479 7.893h14.252l3.886 22.368c0 2.633 0 3.952 1.3 5.265 1.293 1.314 5.18 1.314 7.772 1.314h3.887l-6.479 22.368h-18.14c-3.886 0-5.184-2.632-7.776-3.946-2.588-1.314-5.182-3.946-5.182-7.892l-3.886-22.369-15.55 22.37c-5.185 6.577-11.664 11.837-23.327 11.837h-22.026l6.478-19.735h9.068c2.592 0 5.185-1.314 6.48-1.314 1.298-1.319 2.592-1.319 5.184-3.946l23.323-32.898h-31.096l5.18-18.419h34.988l5.184-17.108H758.32011l6.48-19.736h97.184l-10.366 19.736z m20.732-61.841l-1.294 1.318-12.958 22.37c-3.887 7.892-11.664 13.156-23.324 13.156h-19.437l6.48-19.736h3.886c2.593 0 3.887 0 5.18-1.318 1.3 0 1.3-1.314 2.593-2.632l6.48-11.84c10.368-15.79 12.956-22.368 23.327-39.471-1.299-19.737-2.593-26.316-3.89-38.16-1.295-7.893-2.589-15.79-2.589-23.683-1.298-15.79-1.298-13.156-3.892-23.686v-1.314l1.3-1.314c15.55-1.318 15.55-2.632 32.395-5.265l1.294 1.314 2.592 43.423v2.632c9.07-19.74 9.07-14.475 19.436-39.476v-1.314l1.3-1.314c14.251-1.318 16.843-2.632 33.69-5.265l1.293 1.314c-1.294 0-64.79 111.843-73.862 130.261z" fill="#107C84" p-id="8658"></path><path d="M608.00411 579.653l3.887-11.842h-44.06l-3.886 18.422c6.48-3.948 12.96-6.58 19.437-6.58h24.622z m90.706-139.471c9.072-3.947 15.55-13.158 16.844-23.682 2.593-11.844-1.294-19.737-9.067-23.688l-22.029-1.314h-3.886v3.946l-10.37 46.051v2.633h5.184c7.774 0 16.846 0 23.324-3.946z m-24.618 232.892h24.618l6.48-23.687h-24.618l-6.48 23.687zM705.19011 567.81l-7.773 26.314s9.07-3.946 14.252-5.26c5.185-1.319 12.958-1.319 12.958-1.319l5.185-19.735H705.19011z m-20.73 67.105s9.071-5.265 14.251-6.578c5.185-1.315 12.958-2.634 12.958-2.634l6.48-19.736H693.53011l-9.072 28.948z" fill="#107C84" p-id="8659"></path></svg>
\ No newline at end of file
src/assets/weChat.svg 0 → 100644
View file @ d7cbe26c
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1670374896755" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2723" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M395.846 603.585c-3.921 1.98-7.936 2.925-12.81 2.925-10.9 0-19.791-5.85-24.764-14.625l-2.006-3.864-78.106-167.913c-0.956-1.98-0.956-3.865-0.956-5.845 0-7.83 5.928-13.68 13.863-13.68 2.965 0 5.928 0.944 8.893 2.924l91.965 64.43c6.884 3.864 14.82 6.79 23.708 6.79 4.972 0 9.85-0.945 14.822-2.926L861.71 282.479c-77.149-89.804-204.684-148.384-349.135-148.384-235.371 0-427.242 157.158-427.242 351.294 0 105.368 57.361 201.017 147.323 265.447 6.88 4.905 11.852 13.68 11.852 22.45 0 2.925-0.957 5.85-2.006 8.775-6.881 26.318-18.831 69.334-18.831 71.223-0.958 2.92-2.013 6.79-2.013 10.75 0 7.83 5.929 13.68 13.865 13.68 2.963 0 5.928-0.944 7.935-2.925l92.922-53.674c6.885-3.87 14.82-6.794 22.756-6.794 3.916 0 8.889 0.944 12.81 1.98 43.496 12.644 91.012 19.53 139.48 19.53 235.372 0 427.24-157.158 427.24-351.294 0-58.58-17.78-114.143-48.467-163.003l-491.39 280.07-2.963 1.98z" fill="#52c41a" p-id="2724"></path></svg>
\ No newline at end of file
src/components/RepayPlan.vue
View file @ d7cbe26c
<template>
<div class="container">
<NavBar :title="navTitle" left-arrow @click-left="goBack" />
<NavBar :title="navTitle" left-arrow @click-left="goBack" :right-text="navText"/>
<div class="content">
<header>
<div class="header-top">
......@@ -47,6 +47,10 @@ defineProps({
type: String,
default: ''
},
navText: {
type: String,
default: ''
},
currencyObj: {
type: Object,
default: {
......@@ -57,6 +61,7 @@ defineProps({
}
}
})
</script>
<style lang="less" scoped>
......@@ -87,6 +92,10 @@ defineProps({
border-color: transparent;
}
:deep(.van-nav-bar__text) {
color: #fff !important;
}
.content {
height: calc(100% - var(--van-nav-bar-height));
overflow-y: auto;
......@@ -173,4 +182,4 @@ table {
.secend_value {
font-weight: 600;
}
</style>
\ No newline at end of file
</style>
src/modules/makeRepayment/api/index.js 0 → 100644
View file @ d7cbe26c
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/makeRepayment/components/Pay.vue 0 → 100644
View file @ d7cbe26c
<template>
<Popup
:show="visible"
round
position="bottom"
class="payModalStyle"
:style="{ height: '70%' }"
>
<div class="van-nav-bar-pay van-hairline--bottom" data-v-8b47ba6a="">
<div class="van-nav-bar__content">
<div class="van-nav-bar__left van-haptics-feedback" @click="cancel">
<i class="van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow"></i>
</div>
<div class="van-nav-bar__paytitle van-ellipsis">确认支付</div>
</div>
</div>
<div class="pay-money-content">
<Field v-model="orderAmount" type="number" label="¥" readonly />
<div class="pay-money-update" style="float: right" @click="updatAmount">修改</div>
</div>
<div class="pay-money-mode">
<div class="van-cell-mode van-cell--clickable" role="button" tabindex="0" data-v-8b47ba6a="">
<div class="van-cell__title"><span>订单金额</span><!----></div>
<div class="van-cell__value_mode"><span>{{orderAmount}}元</span></div>
</div>
<div class="van-cell-mode van-cell--clickable" role="button" tabindex="0" data-v-8b47ba6a="">
<div class="van-cell__title"><span>支付方式</span><!----></div>
<div class="van-cell__value_mode"><span>{{checked}}</span></div>
<i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon"></i>
</div>
<div class="pay-money-choose" v-show="showModeFlag">
<RadioGroup v-model="checked">
<CellGroup inset>
<Cell clickable @click="checked = '云闪付(银行卡)'">
<template #title>
<div class="alipayTitle">
<span class="custom-title mr10">
<img src="../../../assets/bankCard.svg" class="alipaytj">
云闪付(银行卡)
</span>
</div>
</template>
<template #right-icon>
<Radio name="云闪付(银行卡)" />
</template>
</Cell>
<Cell clickable @click="checked = '微信支付'">
<template #title>
<div class="alipayTitle">
<span class="custom-title mr10">
<img src="../../../assets/weChat.svg" class="alipaytj">
微信支付
</span>
</div>
</template>
<template #right-icon>
<Radio name="微信支付" />
</template>
</Cell>
<Cell clickable @click="checked = '支付宝'">
<template #title>
<div class="alipayTitle">
<span class="custom-title mr10">
<img src="../../../assets/alipay.svg" class="alipaytj">
支付宝
</span>
</div>
</template>
<template #right-icon>
<Radio name="支付宝" />
</template>
</Cell>
</CellGroup>
</RadioGroup>
</div>
<div class="pay-money-button">
<Button type="primary" block @click="payMoney">支付</Button>
</div>
<NumberKeyboard
v-model="orderAmount"
:show="show"
theme="custom"
extra-key="."
close-button-text="完成"
@blur="show = false"
@delete="onDelete"
/>
<!-- <Cell title="支付方式" is-link value="内容" />-->
</div>
</Popup>
<!-- <van-dialog v-model:show="state.showDialog" z-index="2022">-->
<!-- <div class="van-nav-bar-pay van-hairline&#45;&#45;bottom" data-v-8b47ba6a="">-->
<!-- <div class="van-nav-bar__content">-->
<!-- <div class="van-nav-bar__left van-haptics-feedback" @click="cancel">-->
<!-- <span>X</span>-->
<!-- </div>-->
<!-- &lt;!&ndash; <div class="van-nav-bar__paytitle van-ellipsis">确认支付</div>&ndash;&gt;-->
<!-- </div>-->
<!-- </div>-->
<!-- <div>jhahha</div>-->
<!-- &lt;!&ndash; <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />&ndash;&gt;-->
<!-- </van-dialog>-->
</template>
<script setup>
import { Popup, NavBar, Field, Cell,RadioGroup, Radio,CellGroup, Button, NumberKeyboard, Dialog } from 'vant';
import {ref, reactive} from "vue";
const props = defineProps({
visible: { type: Boolean }, // 是否打开弹框
})
const emit = defineEmits(['payMoneyClick', 'closePage'])
// const state = reactive({
// showDialog: true, //弹窗
// });
// const showDialog = ref(false);
const show = ref(false);
const checked = ref(null);
const orderAmount = ref(null);
const showModeFlag = ref(true);
// const emit = defineEmits(['update:visible']);
const cancel = () => {
console.log('canecel')
// emit('update:visible',false)
emit('closePage', false);
}
const updatAmount = () => {
show.value = true;
}
const onDelete = () => {
orderAmount.value = null;
}
const payMoney = () => {
// state.showDialog = true;
Dialog.alert({
// title: '标题',
message: '代码是写出来给人看的，附带能在机器上运行。',
}).then(() => {
// on close
});
// emit('closePage', false);
const info = {
orderAmount: orderAmount.value,
checked: checked.value,
}
emit('payMoneyClick', info);
}
</script>
<style lang="less" scoped>
.payModalStyle{
.van-nav-bar-pay .van-icon{
color: #333;
}
.van-nav-bar__paytitle {
max-width: 60%;
margin: 0 auto;
color: var(--van-nav-bar-title-text-color);
font-weight: var(--van-font-weight-bold);
font-size: var(--van-nav-bar-title-font-size);
}
.van-cell {
width: 75%;
margin-left: 50px;
}
.pay-money-update{
float: left;
margin-top: -40px;
margin-right: 15px;
color: #1989fa;
}
.van-cell-mode {
position: relative;
display: flex;
box-sizing: border-box;
width: 100%;
padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
overflow: hidden;
color: var(--van-cell-text-color);
font-size: var(--van-cell-font-size);
line-height: var(--van-cell-line-height);
background: var(--van-cell-background-color);
}
.van-cell__value_mode {
position: relative;
overflow: hidden;
color: var(--van-cell-value-color);
text-align: right;
vertical-align: middle;
word-wrap: break-word;
}
.alipaytj{
width: 20px;
height: 20px;
margin-top: 5px;
vertical-align: bottom;
}
.pay-money-button{
margin: auto 20px;
margin-top: 30px;
}
}
:deep(.van-cell__title.van-field__label) {
margin-top: 10px;
width: 10% ;
}
:deep(.van-field__label label) {
font-size: 20px;
}
:deep(.van-cell__value) {
border: 1px solid antiquewhite;
background: antiquewhite;
height: 40px;
}
</style>
src/modules/makeRepayment/store/index.js 0 → 100644
View file @ d7cbe26c
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})
src/modules/makeRepayment/views/index.vue 0 → 100644
View file @ d7cbe26c
<template>
<div class="container">
<NavBar title="还款计划" left-arrow @click-left="goBack" />
<section class="list">
<Search v-model="searchVal" placeholder="请输入项目编号/融资金额" />
<Notice detail="只可对已关联的项目还款" />
<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" />
</List>
</PullRefresh>
</section>
</div>
</template>
<script setup>
import { goBack } from "@/utils/globalFun"
import { NavBar, List, PullRefresh, Search } from "vant";
import Notice from '@/components/Notice.vue'
import ListItem from '@/components/ListItem.vue'
import api from "../api";
import { useRouter } from "vue-router";
const searchVal = $ref('');
const listValue = $ref([
{
title: '202204-DB001-001',
other_title: "2022-07-18",
values: [["剩余应还金额", "状态", "融资金额"], ["￥ 20,000.00", "正常", "￥ 20,000.00"]]
},
{
title: '202204-DB001-001',
other_title: "2022-07-18",
values: [["剩余应还金额", "状态", "融资金额"], ["￥ 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: 'makeRepayment-views-plan' })
}
</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-bottom: 10px;
}
.scroll {
box-sizing: border-box;
height: calc(100vh - 30vw);
overflow-y: auto;
}
</style>
<route>
{
meta: {
title: '还款计划'
}
}
</route>
src/modules/makeRepayment/views/plan.vue 0 → 100644
View file @ d7cbe26c
<template>
<RepayPlan navTitle="还款计划" :currencyObj="currencyObj" navText="违约金明细">
<template #list>
<div class="repay_list">
<div class="left">
<div class="times-box" v-for="i in 30">
<div class="times">{{ i }}期</div>
</div>
</div>
<div class="right">
<div class="item" v-for="i in 30">
<div class="left-item">
<span>租金</span>
<span>2022-06-20</span>
</div>
<div class="center-item">
<p>
<span>应付金额</span>
<span>￥9,000.00</span>
</p>
<p>
<span>待付金额</span>
<span>￥0.00</span>
</p>
</div>
<div class="right-item">
<span></span>
<span class="flag-button payment" @click="handleClick">
支付
</span>
</div>
</div>
</div>
</div>
<Pay :visible="showModal" @payMoneyClick="pay" @closePage="handleColse"/>
<!-- <Dialog v-model:show="showDialog" title="标题" show-cancel-button z-index="2022">-->
<!-- <div>jhahha</div>-->
<!-- &lt;!&ndash; <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />&ndash;&gt;-->
<!-- </Dialog>-->
</template>
<template #footer>
</template>
</RepayPlan>
</template>
<script setup>
import RepayPlan from '@/components/RepayPlan.vue'
import Pay from '../components/Pay.vue'
import { Icon, Dialog } from 'vant'
import {ref} from "vue";
const showDialog = ref(false);
const currencyObj = $ref({
financingCurrency: '200,000.00',
headerCurrency: '5,000.00',
fristCurrency: '10,000.00',
times: '12'
})
const payInfo = ref({});
let showModal = ref(false);
const handleClick = () => {
console.log('hahhha')
showModal.value = true
console.log('jaj', showModal.value);
}
const handleColse = (param) => {
showModal.value = param;
}
const pay = (value) => {
console.log(value, value.showDialog);
// payInfo.value = value;
showDialog.value = true;
console.log(showDialog.value)
// console.log(payInfo.value)
}
</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;
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 5px 3px 10px;
font-size: 13px;
&>div {
display: flex;
flex-direction: column;
justify-content: space-around;
}
}
.left-item {
flex: 1 0 30%;
span:nth-child(1) {
font-weight: 600;
}
span:nth-child(2) {
color: gray;
}
}
.center-item {
flex: 1 0 45%;
p {
color: gray;
display: flex;
justify-content: space-between;
span:nth-child(2) {
font-weight: 600;
}
}
&>p:nth-child(1) span:nth-child(2) {
color: #019ae5;
}
}
.right-item {
flex: 1 0 25%;
text-align: center;
span:nth-child(1) {
color: #019ae5;
}
span:nth-child(2) {
color: gray;
}
}
.flag-button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
margin: 0 auto;
height: 40%;
border-radius: 10px;
font-size: 12px;
}
.overtime {
background-color: #eeeeee;
color: orange !important;
border: 1px solid #e2e3e4;
}
.nopay {
background-color: #bec2c5;
color: white !important;
border: 1px solid #bec2c5;
}
.pay {
background-color: #f0f0f0;
color: gray !important;
border: 1px solid #eaeaea;
}
.payment{
background-color: #019ae5;
color: #fff !important;
border: 1px solid #019ae5;
}
</style>
src/modules/repayPlan/views/index.vue
View file @ d7cbe26c
......@@ -19,7 +19,7 @@
<script setup>
import { goBack } from "@/utils/globalFun"
import { NavBar, List, PullRefresh, Search } from "vant";
import { NavBar, List, PullRefresh, Search} from "vant";
import Notice from '@/components/Notice.vue'
import ListItem from '@/components/ListItem.vue'
import api from "../api";
......
src/modules/repayPlan/views/plan.vue
View file @ d7cbe26c
......@@ -48,7 +48,7 @@ const currencyObj = $ref({
headerCurrency: '5,000.00',
fristCurrency: '10,000.00',
times: '12'
})
})
</script>
<style lang="less" scoped>
......@@ -214,4 +214,4 @@ const currencyObj = $ref({
color: gray !important;
border: 1px solid #eaeaea;
}
</style>
\ No newline at end of file
</style>
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