Skip to content

K
komatsu-lease-app
Commit 931921fd authored by 14699's avatar 14699
Browse files
Options

fix:合并支付开发

parent 92f7c49e
Show whitespace changes
Inline Side-by-side
Showing with 218 additions and 26 deletions
src/App.vue
View file @ 931921fd
......@@ -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
View file @ 931921fd
......@@ -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
View file @ 931921fd
<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
View file @ 931921fd
......@@ -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"
......
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