[feature]还款计划界面

src/components/RepayPlan.vue

 <template>
   <div class="container">
-    <NavBar :title="navTitle" left-arrow @click-left="goBack" :right-text="navText"/>
+    <NavBar :title="navTitle" left-arrow @click-left="goBack" :right-text="navText"  @click-right="onClickRight"/>
     <div class="content">
       <header>
         <div class="header-top">
@@ -42,6 +42,7 @@
 import { goBack } from "@/utils/globalFun"
 import { NavBar } from "vant";
 
+const emit = defineEmits(['onClickRight'])
 defineProps({
   navTitle: {
     type: String,
@@ -62,6 +63,10 @@ defineProps({
   }
 })
 
+const onClickRight = () => {
+  emit('onClickRight');
+}
+
 </script>
 
 <style lang="less" scoped>

src/modules/makeRepayment/components/Pay.vue

@@ -88,22 +88,30 @@
 <!--      <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>-->
+  <Popup v-model:show="showDialog" position="bottom" :style="{ height: '60%', padding: '20px' }">
+    <i class="van-badge__wrapper van-icon van-icon-cross van-popup__close-icon van-popup__close-icon--top-right van-haptics-feedback" role="button" tabindex="0"><!----><!----><!----></i>
+   <div>
+     <div :style="{fontWeight: '600', marginLeft: '130px'}">请输入密码</div>
+     <div :style="{marginLeft: '135px',marginTop:'10px', marginBottom: '20px'}">
+       <span :style="{fontSize: '13px'}">金额：{{orderAmount}}</span>
+     </div>
+     <PasswordInput
+         :value="password"
+         :gutter="10"
+         :focused="showKeyboard"
+         @focus="showKeyboard = true"
+     />
+     <div class="finish-pay" @click="handleFinishAmount">完成</div>
+     <NumberKeyboard
+         v-model="password"
+         :show="showKeyboard"
+     />
+   </div>
+  </Popup>
 </template>
 
 <script setup>
-import { Popup, NavBar, Field, Cell,RadioGroup, Radio,CellGroup, Button, NumberKeyboard, Dialog } from 'vant';
+import { Popup, NavBar, Field, Cell,RadioGroup, Radio,CellGroup, Button, NumberKeyboard, Dialog, PasswordInput } from 'vant';
 import {ref, reactive} from "vue";
 
 const props = defineProps({
@@ -114,17 +122,17 @@ const emit = defineEmits(['payMoneyClick', 'closePage'])
 // const state = reactive({
 //   showDialog: true, //弹窗
 // });
-// const showDialog = ref(false);
+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 password = ref([]);
+const showKeyboard = ref(true);
 
 
 const cancel = () => {
   console.log('canecel')
-  // emit('update:visible',false)
   emit('closePage', false);
 }
 
@@ -137,14 +145,16 @@ const onDelete = () => {
 }
 
 const payMoney = () => {
-  // state.showDialog = true;
-  Dialog.alert({
-    // title: '标题',
-    message: '代码是写出来给人看的，附带能在机器上运行。',
-  }).then(() => {
-    // on close
-  });
-  // emit('closePage', false);
+  showDialog.value = true;
+  // Dialog.alert({
+  //   // title: '标题',
+  //   showConfirmButton: false,
+  //   allowHtml: true,
+  //   message: `<div>哈哈哈哈1111</div>`,
+  // }).then(() => {
+  //   // on close
+  // });
+  emit('closePage', false);
   const info = {
     orderAmount: orderAmount.value,
     checked: checked.value,
@@ -152,6 +162,10 @@ const payMoney = () => {
   emit('payMoneyClick', info);
 }
 
+const handleFinishAmount = () => {
+  showDialog.value = false;
+}
+
 
 </script>
 
@@ -208,6 +222,18 @@ const payMoney = () => {
     margin-top: 30px;
   }
 }
+.van-popup__close-icon--top-right{
+  top: 10px;
+  left: 5px;
+  right: 0px;
+}
+.finish-pay{
+  margin-top: 26px;
+  /* float: right; */
+  position: absolute;
+  right: 50px;
+  color: #1989fa;
+}
 :deep(.van-cell__title.van-field__label) {
   margin-top: 10px;
   width: 10% ;
@@ -220,4 +246,10 @@ const payMoney = () => {
   background: antiquewhite;
   height: 40px;
 }
+:deep(.van-password-input__security){
+  width: 90%;
+}
+:deep(.van-password-input__security li){
+  border: 1px solid #c4c4c4;
+}
 </style>

src/modules/makeRepayment/views/liquidatedDamagesDetails.vue

+<template>
+  <NavBar title="违约金明细" left-arrow @click-left="goBack" />
+  <Collapse v-model="activeNames" v-for="(item, index) of damageDetailInfo">
+    <CollapseItem :title="item.periods" :name="index+1" :value="item.amount">
+      <CellGroup v-for="(k) of item.detail">
+<!--        <Cell title="单元格" value="内容" />-->
+        <Cell :title="k.name" :value="k.debait" :label="k.date" />
+      </CellGroup>
+    </CollapseItem>
+<!--    <CollapseItem title="标题2" name="2">-->
+<!--      技术无非就是那些开发它的人的共同灵魂。-->
+<!--    </CollapseItem>-->
+<!--    <CollapseItem title="标题3" name="3">-->
+<!--      在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。-->
+<!--    </CollapseItem>-->
+  </Collapse>
+</template>
+
+<script setup>
+import { Collapse, CollapseItem, Cell, CellGroup, NavBar } from 'vant';
+import {ref, reactive} from "vue";
+
+
+const damageDetailInfo = ref([
+  {
+    periods: '第一期',
+    amount: '4300.88',
+    detail: [
+      {
+         name: '违约金1',
+         debait: '2300',
+         date: '2022-12-08',
+      },
+      {
+        name: '违约金2',
+        debait: '2300.88',
+        date: '2022-12-08',
+      }
+    ]
+  },
+  {
+    periods: '第二期',
+    amount: '4300.88',
+    detail: [
+      {
+        name: '违约金1',
+        debait: '2300',
+        date: '2022-12-08',
+      },
+      {
+        name: '违约金2',
+        debait: '2300.88',
+        date: '2022-12-08',
+      }
+    ]
+  }
+])
+const activeNames = ref([]);
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/modules/makeRepayment/views/plan.vue

 <template>
-  <RepayPlan navTitle="还款计划" :currencyObj="currencyObj" navText="违约金明细">
+  <RepayPlan navTitle="还款计划" :currencyObj="currencyObj" navText="违约金明细" @onClickRight="goDamagesDetail">
     <template #list>
       <div class="repay_list">
         <div class="left">
@@ -49,6 +49,7 @@ import RepayPlan from '@/components/RepayPlan.vue'
 import Pay from '../components/Pay.vue'
 import { Icon, Dialog } from 'vant'
 import {ref} from "vue";
+import {useRouter} from "vue-router";
 
 const showDialog = ref(false);
 const currencyObj = $ref({
@@ -77,6 +78,11 @@ const pay = (value) => {
   console.log(showDialog.value)
   // console.log(payInfo.value)
 }
+const router = useRouter();
+
+const goDamagesDetail = () => {
+  router.push({ name: 'makeRepayment-views-liquidatedDamagesDetails' })
+}
 </script>
 
 <style lang="less" scoped>