fix:合并支付开发

package.json

@@ -36,6 +36,7 @@
     "@hips/plugin-vue-jssdk": "^1.1.2",
     "@vant/area-data": "^1.3.2",
     "axios": "^0.27.2",
+    "big.js": "^6.2.1",
     "crypto-js": "^4.1.1",
     "moment": "^2.29.4",
     "pinia": "^2.0.23",

src/App.vue

@@ -42,8 +42,8 @@ export default {
   methods: {
     async getBusinessToken(jumpRouter) {
       if (import.meta.env.VITE_LOCAL == 'true') {
-        window.localStorage.setItem('userId', 17)  //5
-        window.localStorage.setItem('phone', "17864386578")  //17864386578
+        window.localStorage.setItem('userId', 5)  //5
+        window.localStorage.setItem('phone', "18762670654")  //17864386578 ; 18762670654
       }
       const baseURL = import.meta.env.VITE_LOCAL== 'true' ? '/api' : import.meta.env.VITE_HTTP_BASE_URL
       let res = await post(`${baseURL}/app/api/app/user/token/get`, {

src/modules/makeRepayment/components/Pay.vue

@@ -15,7 +15,7 @@
     </div>
     <div class="pay-money-content">
       <Field v-model="orderAmount" type="number" label="¥" readonly />
-      <div class="pay-money-update" style="float: right" @click="updatAmount" v-if="isModify">修改</div>
+      <div class="pay-money-update" style="float: right" @click="updateAmount" v-if="isModify">修改</div>
     </div>
     <div class="pay-money-mode">
       <div class="van-cell-mode van-cell--clickable" role="button" tabindex="0" data-v-8b47ba6a="">
@@ -107,9 +107,11 @@ const props = defineProps({
     default: {
       cashflowId: '',
       payAmount: '',
-      cfItem: '',
-      cfItemN:'',
-      times: ''
+      payCashflowList: [],
+      isCombinePay: '',
+      // cfItem: '',
+      // cfItemN:'',
+      // times: ''
     }
   },
 })
@@ -132,16 +134,24 @@ const miniprogramId = import.meta.env.VITE_MiniprogramId;
 const miniprogramType = +import.meta.env.VITE_MiniprogramType;
 
 watchEffect(() => {
+    debugger
   payAmount.value = props.payInfoObj.payAmount
   orderAmount.value = props.payInfoObj.payAmount
-  isModify = (props.payInfoObj.cfItem == 1 || props.payInfoObj.cfItem == 9)?true:false
+    // 合并支付不支持 部分支付
+    if(props.payInfoObj.isCombinePay === 'Y') {
+        isModify = false
+    } else {
+        let item = props.payInfoObj.payCashflowList?props.payInfoObj.payCashflowList[0]:[]
+        isModify = (item.cfItem == 1 || item.cfItem == 9)?true:false
+    }
+
 })
 
 const cancel = () => {
   emit('closePage', false);
 }
 
-const updatAmount = () => {
+const updateAmount = () => {
   show.value = true;
 }
 
@@ -160,8 +170,9 @@ const payMoney = () => {
       payAmount: orderAmount.value,
       payType: checked.value,
       cashflowId: props.payInfoObj.cashflowId,
-      cfItemN:props.payInfoObj.cfItemN,
-      times: props.payInfoObj.times
+      isCombinePay: props.payInfoObj.isCombinePay,
+      // cfItemN:props.payInfoObj.cfItemN,
+      // times: props.payInfoObj.times
     }
     if(checked.value == 'WECHAT_PAY'){
       // let payStartTime = moment().format("YYYY-MM-DD HH:mm:ss.SSS")

src/modules/makeRepayment/views/plan.vue

 <template>
-  <RepayPlan navTitle="在线还款" :currencyObj="currencyObj" :showFooter="false" @onLeftClick="goBack" navText="罚息明细" @onClickRight="goDamagesDetail">
+  <RepayPlan navTitle="在线还款" :currencyObj="currencyObj" :showFooter="showFooter" @onLeftClick="goBack" navText="罚息明细" @onClickRight="goDamagesDetail">
     <template #list>
       <div class="repay_list">
           <div class="repay_content" v-for="(item, index) in cashflow">
               <div class="left">
+<!--                  <div class="times-box">-->
+<!--                      <div class="times">{{ item.times }}期</div>-->
+<!--                  </div>-->
                   <div class="times-box">
-                      <div class="times">{{ item.times }}期</div>
+                      <div class="box">
+                          <div class="box-title">还款</div>
+                          <Checkbox v-model="item.checked" :disabled="checkDisable(item,index)" icon-size="30px" @click="clickCheckbox(item,index)"></Checkbox>
+                      </div>
                   </div>
               </div>
               <div class="right">
                   <div class="item">
                       <div class="left-item">
-                          <span>{{ item.cfItemN }}</span>
+                          <span>{{ item.times }}期{{ item.cfItemN }}</span>
                           <span>{{ item.dueDate}}</span>
                       </div>
                       <div class="center-item">
@@ -29,9 +35,9 @@
                           <span class="flag-button paid" v-if="item.writeOffFlag == 'FULL'">
                             <Icon name="passed" style="margin-right: 1px;padding-top: 2px;" />{{item.writeOffFlagN}}
                           </span>
-                          <span v-else-if="checkCashflow(item,index)" class="flag-button payment" @click="handleClick(item)">
-                             支付
-                          </span>
+<!--                          <span v-else-if="checkCashflow(item,index)" class="flag-button payment" @click="handleClick(item)">-->
+<!--                             支付-->
+<!--                          </span>-->
                           <span v-else-if="item.overdueStatus == 'Y'" class="flag-button overtime">
                               <Icon name="clock-o" style="margin-right: 1px;padding-top: 2px;" />{{item.overdueStatusN}}
                           </span>
@@ -46,6 +52,14 @@
       <Pay :visible="showModal" :payInfoObj="payInfo"  @paySuccess="paySuccessFunction" @payFail="payFailFunction" @closePage="handleColse" @wechatPayCallBack="wechatPayFunction"/>
     </template>
     <template #footer>
+        <Notice detail="单选支持金额修改，多选不支持金额修改" />
+        <div class="pay-button-content">
+            <Checkbox v-model="allCheckFlag" icon-size="30px" @click="checkAll()">全选</Checkbox>
+            <div class="pay-button-item">
+                <div class="pay-button-text">合计: <span>{{currency(payAmountSum)}}</span></div>
+                <Button size="small" type="primary" @click="goPay()">确认支付</Button>
+            </div>
+        </div>
     </template>
   </RepayPlan>
 </template>
@@ -53,23 +67,28 @@
 <script setup>
 import RepayPlan from '@/components/RepayPlan.vue'
 import Pay from '../components/Pay.vue'
-import { Icon, Dialog, Toast} from 'vant'
+import { Icon, Dialog, Toast, Button, Checkbox} from 'vant'
 import {goBack} from '../../../utils/globalFun';
-import {ref} from "vue";
+import {ref,watch} from "vue";
 import { useRoute, useRouter } from "vue-router";
 import api from "../api";
 import { useMakeRepayment } from '../store/index';
 import { currency } from "@/utils/textFormat";
-import moment from 'moment'
+import moment from 'moment';
+import Big from "big.js";
+import Notice from "@/components/Notice.vue"
 
 const makeRepaymentStore = useMakeRepayment()
 const showDialog = ref(false);
 let currencyObj = $ref()
-let cashflow = []
+let cashflow = ref([])
 let payInfo = $ref({});
 let showModal = ref(false);
 const route = useRoute()
 const router = useRouter();
+let showFooter = ref(true)
+let allCheckFlag = ref(false)
+let payAmountSum = ref(0)
 
 const handleClick = (item) => {
   // Toast.fail('当前暂不支持进行APP支付!')
@@ -158,8 +177,15 @@ const getRepayPlanInfo = async () => {
       key1: "剩余未还租金(合计)",
       key2: "已支付租金(合计)"
     }
-    rows.cashflow = rows.cashflow.map(item => { item.dueDate = item.dueDate?.split(" ")[0]; return item })
-    cashflow = rows.cashflow
+    // 只展示小于等于当前月的未完全核销的现金流数据 已完全核销 和 大于当前月的现金流数据不展示
+    let cashflowList = rows.cashflow.filter((item,index) => {
+       return !filterCashList(item,index)
+    })
+    cashflow.value = cashflowList.map((item,index) => {
+        item.dueDate = item.dueDate?.split(" ")[0];
+        item.checked = false;
+        return item
+    })
   }
 }
 getRepayPlanInfo();
@@ -167,7 +193,7 @@ getRepayPlanInfo();
 const checkCashflow = (listItem, curIndex) => {
     // 判断当期之前是否已全部还清
     for(var i = 0; i< curIndex; i++) {
-        if(cashflow[i].writeOffFlag != 'FULL'){
+        if(cashflow.value[i].writeOffFlag != 'FULL'){
             return false
         }
     }
@@ -180,6 +206,99 @@ const checkCashflow = (listItem, curIndex) => {
     return true
 }
 
+// 过滤不可还款数据 小于等于当前月的未完全核销的罚息、租金、提前结清租金、提前结清手续费现金流数据，已完全核销和大于当前月的现金流数据不展示
+const filterCashList = (listItem, curIndex) => {
+    // 已支付完成 不可选
+    if(listItem.writeOffFlag === 'FULL') {
+        return true
+    }
+    let monthLastDate = moment().endOf('month').format('YYYY-MM-DD') // 获取当前日期本月最后一天
+    // 当期还款日期在本月最后一天之后 不可选
+    if(moment(listItem.dueDate).isAfter(monthLastDate)){
+        console.log(moment(listItem.dueDate).isAfter(monthLastDate))
+        return true
+    }
+    return false
+}
+
+// 判断当前期数是否禁用选择
+const checkDisable = (listItem, curIndex) => {
+    // 已支付完成 不可选
+    if(listItem.writeOffFlag === 'FULL') {
+        return true
+    }
+    let monthLastDate = moment().endOf('month').format('YYYY-MM-DD') // 获取当前日期本月最后一天
+    // 当期还款日期在本月最后一天之后 不可选
+    if(moment(listItem.dueDate).isAfter(monthLastDate)){
+        console.log(moment(listItem.dueDate).isAfter(monthLastDate))
+        return true
+    }
+    // 当期之前存在 未勾选数据不可选
+    for (let i = 0; i < curIndex; i++) {
+        if (cashflow.value[i].checked === false) {
+            return true
+        }
+    }
+    return false
+}
+
+const clickCheckbox = (listItem, curIndex) => {
+    // 取消勾选后 重置后面的现金流为 未勾选
+    cashflow.value = cashflow.value.map((item,index)=>{
+        if(cashflow.value[curIndex].checked === false && index > curIndex) {
+            item.checked = false
+        }
+        return item
+    })
+    // 判断全选 勾选情况
+    let checkedList = cashflow.value.filter(item => item.checked === true)
+    allCheckFlag.value = checkedList.length === cashflow.value.length
+};
+
+const checkAll = () => {
+    cashflow.value.forEach(item=>{
+        item.checked = allCheckFlag.value
+    })
+};
+
+// 监听现金流勾选情况，计算还款金额
+watch(
+    () => cashflow.value.map((item) => item.checked),
+    (newVal, oldVal) => {
+        let checkedList = cashflow.value.filter(item => item.checked === true)
+        payAmountSum.value = checkedList.reduce((total, currentItem) => parseFloat(new Big(total).plus(currentItem.obligation)) , 0);
+    }
+);
+
+const goPay = () => {
+    let checkedList = cashflow.value.filter(item => item.checked === true)
+    let checkListSeq = cashflow.value.filter((item,index) => {
+        return index>0 & item.checked === true &&  cashflow.value[index-1].checked === false
+    })
+    if(checkedList.length === 0) {
+        Toast('请先勾选需还款现金流!')
+    } else if (checkListSeq.length > 0) {
+        Toast('请核对已选数据!')
+    } else {
+        let cashFlowIdStr = checkedList.map(item=>{
+            return item.cashflowId
+        }).join(',')
+        payInfo = {
+            payCashflowList: checkedList,
+            cashflowId:cashFlowIdStr,
+            payAmount:payAmountSum.value,
+            isCombinePay: checkedList.length>1?'Y':'N', // 是否合并支付
+            // cfItem:item.cfItem,
+            // cfItemN:item.cfItemN,
+            // times: item.times
+        }
+        console.log('payInfo',payInfo)
+        showModal.value = true
+    }
+};
+
+
+
 </script>
 
 <style lang="less" scoped>
@@ -215,7 +334,7 @@ const checkCashflow = (listItem, curIndex) => {
   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%);
+  //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配置右边框位置的虚线 */
@@ -237,6 +356,25 @@ const checkCashflow = (listItem, curIndex) => {
   justify-content: flex-end;
 }
 
+
+.box {
+  //height: @leftW;
+  width: @leftW;
+  display: flex;
+  justify-content: center;
+  //line-height: @leftW;
+  //color: #fff;
+  //background-color: #019ae5;
+  border-radius: 5px;
+  flex-direction: column;
+  align-items: center;
+}
+
+.box-title {
+  font-size: 12px;
+  margin-bottom: 5px;
+}
+
 .times {
   height: @leftW;
   width: @leftW;
@@ -250,7 +388,7 @@ const checkCashflow = (listItem, curIndex) => {
 
 .right {
   flex: 1 0 auto;
-  padding-left: 20px;
+  //padding-left: 20px;
 }
 
 .item {
@@ -357,4 +495,41 @@ const checkCashflow = (listItem, curIndex) => {
   border: 1px solid #019ae5;
 }
 
+:deep(.plan-footer){
+  display: block !important;
+}
+.pay-button-content {
+  display: flex;
+  height: 30px;
+  padding-bottom: 10px;
+}
+.pay-button-item {
+  display: flex;
+  height: 30px;
+  width: 80%;
+  justify-content: flex-end;
+  justify-items: center;
+}
+.pay-button-text {
+  font-size: 14px;
+  text-align: center;
+  line-height: 30px;
+  padding-right: 10px;
+}
+.pay-button-text span {
+  color: red;
+}
+.pay-button-item button {
+  height: 30px;
+  width: 80px;
+  border-radius: 10px;
+}
+
+:deep(.plan-list){
+  height: calc(100% - 130px);
+}
+:deep(.hint) {
+  width: 100%;
+}
+
 </style>

yarn.lock

@@ -276,6 +276,11 @@ axios@^0.27.2:
     follow-redirects "^1.14.9"
     form-data "^4.0.0"
 
+big.js@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.npmmirror.com/big.js/-/big.js-6.2.1.tgz#7205ce763efb17c2e41f26f121c420c6a7c2744f"
+  integrity sha512-bCtHMwL9LeDIozFn+oNhhFoq+yQ3BNdnsLSASUxLciOb1vgvpHsIO1dsENiGMgbb4SkP5TrzWzRiLddn8ahVOQ==
+
 braces@^3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz"