Commit 931921fd authored by 14699's avatar 14699

fix:合并支付开发

parent 92f7c49e
...@@ -42,8 +42,8 @@ export default { ...@@ -42,8 +42,8 @@ export default {
methods: { methods: {
async getBusinessToken(jumpRouter) { async getBusinessToken(jumpRouter) {
if (import.meta.env.VITE_LOCAL == 'true') { if (import.meta.env.VITE_LOCAL == 'true') {
window.localStorage.setItem('userId', 17) //5 window.localStorage.setItem('userId', 5) //5
window.localStorage.setItem('phone', "17864386578") //17864386578 window.localStorage.setItem('phone', "18762670654") //17864386578 ; 18762670654
} }
const baseURL = import.meta.env.VITE_LOCAL== 'true' ? '/api' : import.meta.env.VITE_HTTP_BASE_URL 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`, { let res = await post(`${baseURL}/app/api/app/user/token/get`, {
......
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
</div> </div>
<div class="pay-money-content"> <div class="pay-money-content">
<Field v-model="orderAmount" type="number" label="¥" readonly /> <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>
<div class="pay-money-mode"> <div class="pay-money-mode">
<div class="van-cell-mode van-cell--clickable" role="button" tabindex="0" data-v-8b47ba6a=""> <div class="van-cell-mode van-cell--clickable" role="button" tabindex="0" data-v-8b47ba6a="">
...@@ -107,9 +107,11 @@ const props = defineProps({ ...@@ -107,9 +107,11 @@ const props = defineProps({
default: { default: {
cashflowId: '', cashflowId: '',
payAmount: '', payAmount: '',
cfItem: '', payCashflowList: [],
cfItemN:'', isCombinePay: '',
times: '' // cfItem: '',
// cfItemN:'',
// times: ''
} }
}, },
}) })
...@@ -132,16 +134,24 @@ const miniprogramId = import.meta.env.VITE_MiniprogramId; ...@@ -132,16 +134,24 @@ const miniprogramId = import.meta.env.VITE_MiniprogramId;
const miniprogramType = +import.meta.env.VITE_MiniprogramType; const miniprogramType = +import.meta.env.VITE_MiniprogramType;
watchEffect(() => { watchEffect(() => {
debugger
payAmount.value = props.payInfoObj.payAmount payAmount.value = props.payInfoObj.payAmount
orderAmount.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 = () => { const cancel = () => {
emit('closePage', false); emit('closePage', false);
} }
const updatAmount = () => { const updateAmount = () => {
show.value = true; show.value = true;
} }
...@@ -160,8 +170,9 @@ const payMoney = () => { ...@@ -160,8 +170,9 @@ const payMoney = () => {
payAmount: orderAmount.value, payAmount: orderAmount.value,
payType: checked.value, payType: checked.value,
cashflowId: props.payInfoObj.cashflowId, cashflowId: props.payInfoObj.cashflowId,
cfItemN:props.payInfoObj.cfItemN, isCombinePay: props.payInfoObj.isCombinePay,
times: props.payInfoObj.times // cfItemN:props.payInfoObj.cfItemN,
// times: props.payInfoObj.times
} }
if(checked.value == 'WECHAT_PAY'){ if(checked.value == 'WECHAT_PAY'){
// let payStartTime = moment().format("YYYY-MM-DD HH:mm:ss.SSS") // let payStartTime = moment().format("YYYY-MM-DD HH:mm:ss.SSS")
......
<template> <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> <template #list>
<div class="repay_list"> <div class="repay_list">
<div class="repay_content" v-for="(item, index) in cashflow"> <div class="repay_content" v-for="(item, index) in cashflow">
<div class="left"> <div class="left">
<!-- <div class="times-box">-->
<!-- <div class="times">{{ item.times }}</div>-->
<!-- </div>-->
<div class="times-box"> <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> </div>
<div class="right"> <div class="right">
<div class="item"> <div class="item">
<div class="left-item"> <div class="left-item">
<span>{{ item.cfItemN }}</span> <span>{{ item.times }}{{ item.cfItemN }}</span>
<span>{{ item.dueDate}}</span> <span>{{ item.dueDate}}</span>
</div> </div>
<div class="center-item"> <div class="center-item">
...@@ -29,9 +35,9 @@ ...@@ -29,9 +35,9 @@
<span class="flag-button paid" v-if="item.writeOffFlag == 'FULL'"> <span class="flag-button paid" v-if="item.writeOffFlag == 'FULL'">
<Icon name="passed" style="margin-right: 1px;padding-top: 2px;" />{{item.writeOffFlagN}} <Icon name="passed" style="margin-right: 1px;padding-top: 2px;" />{{item.writeOffFlagN}}
</span> </span>
<span v-else-if="checkCashflow(item,index)" class="flag-button payment" @click="handleClick(item)"> <!-- <span v-else-if="checkCashflow(item,index)" class="flag-button payment" @click="handleClick(item)">-->
支付 <!-- 支付-->
</span> <!-- </span>-->
<span v-else-if="item.overdueStatus == 'Y'" class="flag-button overtime"> <span v-else-if="item.overdueStatus == 'Y'" class="flag-button overtime">
<Icon name="clock-o" style="margin-right: 1px;padding-top: 2px;" />{{item.overdueStatusN}} <Icon name="clock-o" style="margin-right: 1px;padding-top: 2px;" />{{item.overdueStatusN}}
</span> </span>
...@@ -46,6 +52,14 @@ ...@@ -46,6 +52,14 @@
<Pay :visible="showModal" :payInfoObj="payInfo" @paySuccess="paySuccessFunction" @payFail="payFailFunction" @closePage="handleColse" @wechatPayCallBack="wechatPayFunction"/> <Pay :visible="showModal" :payInfoObj="payInfo" @paySuccess="paySuccessFunction" @payFail="payFailFunction" @closePage="handleColse" @wechatPayCallBack="wechatPayFunction"/>
</template> </template>
<template #footer> <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> </template>
</RepayPlan> </RepayPlan>
</template> </template>
...@@ -53,23 +67,28 @@ ...@@ -53,23 +67,28 @@
<script setup> <script setup>
import RepayPlan from '@/components/RepayPlan.vue' import RepayPlan from '@/components/RepayPlan.vue'
import Pay from '../components/Pay.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 {goBack} from '../../../utils/globalFun';
import {ref} from "vue"; import {ref,watch} from "vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import api from "../api"; import api from "../api";
import { useMakeRepayment } from '../store/index'; import { useMakeRepayment } from '../store/index';
import { currency } from "@/utils/textFormat"; 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 makeRepaymentStore = useMakeRepayment()
const showDialog = ref(false); const showDialog = ref(false);
let currencyObj = $ref() let currencyObj = $ref()
let cashflow = [] let cashflow = ref([])
let payInfo = $ref({}); let payInfo = $ref({});
let showModal = ref(false); let showModal = ref(false);
const route = useRoute() const route = useRoute()
const router = useRouter(); const router = useRouter();
let showFooter = ref(true)
let allCheckFlag = ref(false)
let payAmountSum = ref(0)
const handleClick = (item) => { const handleClick = (item) => {
// Toast.fail('当前暂不支持进行APP支付!') // Toast.fail('当前暂不支持进行APP支付!')
...@@ -158,8 +177,15 @@ const getRepayPlanInfo = async () => { ...@@ -158,8 +177,15 @@ const getRepayPlanInfo = async () => {
key1: "剩余未还租金(合计)", key1: "剩余未还租金(合计)",
key2: "已支付租金(合计)" 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(); getRepayPlanInfo();
...@@ -167,7 +193,7 @@ getRepayPlanInfo(); ...@@ -167,7 +193,7 @@ getRepayPlanInfo();
const checkCashflow = (listItem, curIndex) => { const checkCashflow = (listItem, curIndex) => {
// 判断当期之前是否已全部还清 // 判断当期之前是否已全部还清
for(var i = 0; i< curIndex; i++) { for(var i = 0; i< curIndex; i++) {
if(cashflow[i].writeOffFlag != 'FULL'){ if(cashflow.value[i].writeOffFlag != 'FULL'){
return false return false
} }
} }
...@@ -180,6 +206,99 @@ const checkCashflow = (listItem, curIndex) => { ...@@ -180,6 +206,99 @@ const checkCashflow = (listItem, curIndex) => {
return true 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
...@@ -215,7 +334,7 @@ const checkCashflow = (listItem, curIndex) => { ...@@ -215,7 +334,7 @@ const checkCashflow = (listItem, curIndex) => {
height: 100px; height: 100px;
flex-direction: column; flex-direction: column;
justify-content: center; 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轴上的长度 */ /* 35%设置虚线点y轴上的长度 */
background-position: 50% 50%; background-position: 50% 50%;
/* right配置右边框位置的虚线 */ /* right配置右边框位置的虚线 */
...@@ -237,6 +356,25 @@ const checkCashflow = (listItem, curIndex) => { ...@@ -237,6 +356,25 @@ const checkCashflow = (listItem, curIndex) => {
justify-content: flex-end; 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 { .times {
height: @leftW; height: @leftW;
width: @leftW; width: @leftW;
...@@ -250,7 +388,7 @@ const checkCashflow = (listItem, curIndex) => { ...@@ -250,7 +388,7 @@ const checkCashflow = (listItem, curIndex) => {
.right { .right {
flex: 1 0 auto; flex: 1 0 auto;
padding-left: 20px; //padding-left: 20px;
} }
.item { .item {
...@@ -357,4 +495,41 @@ const checkCashflow = (listItem, curIndex) => { ...@@ -357,4 +495,41 @@ const checkCashflow = (listItem, curIndex) => {
border: 1px solid #019ae5; 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> </style>
...@@ -276,6 +276,11 @@ axios@^0.27.2: ...@@ -276,6 +276,11 @@ axios@^0.27.2:
follow-redirects "^1.14.9" follow-redirects "^1.14.9"
form-data "^4.0.0" 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: braces@^3.0.2:
version "3.0.2" version "3.0.2"
resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz" 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