[feature]还款计划界面

src/assets/alipay.svg

+<?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

+<?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

+<?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

 <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>
+</style>
\ No newline at end of file

src/modules/makeRepayment/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/makeRepayment/components/Pay.vue

+<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

+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

+<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

+<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

@@ -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

@@ -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>
+</style>
\ No newline at end of file