我有一个获取用户列表的后端。每个用户每月支付订阅费用，有时可能会因其他因素而有所不同。 在前端，我可以通过在具有“起始日期”和“截止日期”的输入字段中输入日期来查看每个用户支付的总金额。
因此，如果我有 3 个用户，从 1 月 1 日到 4 月 1 日，每个月支付 100， devtools 中的输出看起来像这样：
users: [
{
0: [{
userName: 'user 1',
amountPaid: 300
}],
1: [{
userName: 'user 2',
amountPaid: 300
}],
2: [{
userName: 'user 3',
amountPaid: 300
}]
}
]
问题是我需要创建一个在计算用户支付的总金额时考虑几天的功能。
所以如果我有一个 fromDate 是 2024-01-01 和一个 toDate 是 2024-03-15 那么我需要的计算是：
100（一月）+ 100（二月）+ 48.39（15 ÷ 31 x 100） 因此，对于 3 月，它不应输出 100，而应输出 3 月的第一天和选定的结束日期（15 日）之间的天数，除以该月的金额。
我已完成以下设置：
splitTotalPaidIntoMonths(){
this.diffBetweenDatesMonthFormat = moment(this.toDate).diff(this.fromDate, 'month')
this.toDateMonthStartDate = moment(this.toDate).startOf('month')
this.compareToDateWithToDateMonthStart = moment(this.toDate).diff(this.toDateMonthStartDate, 'days')
if(this.users){
this.totalPaymentDividedByMonths = this.users[0].amountPaid / this.diffBetweenDatesMonthFormat;
}
},
showUsers() {
this.users = null;
this.init = true;
axiosDatabaseService.getUsers(
moment(this.fromDate).format('YYYY-MM-DD'),
moment(this.toDate).format('YYYY-MM-DD'))
.then(result => {
this.users = result.data;
})
},
我的想法是：
1：计算出 fromDate 和 toDate 之间的月份数。
2：计算出 toDate 所在月份的第一天与在 toDate 中输入的选定日期之间相隔的天数。
3：从数据库中获取用户后，查看每个用户的总金额，然后将该金额除以所选的月数。因此，如果三个用户的总金额为 300，并且选择了 3 个月，那么我想为每个用户填充新数组，其中总金额分为 3 个，即每个用户 100、100、100。
像这样：
totalPaymentDividedByMonths: [
{
0: [{
amountPaid: [ { 100, 100, 100 } ]
}],
1: [{
amountPaid: [ { 100, 100, 100 } ]
}],
2: [{
amountPaid: [ { 100, 100, 100 } ]
}]
}
]
如果为 toDate 选择的日期是月中（例如 3 月 15 日），则选择每个用户数组中的金额之一，然后运行计算：15 ÷ 31 x 100，所以现在每个数组将有 100, 100, 48.39。
0: [{
amountPaid: [ { 100, 100, 48.39 } ]
}],
1: [{
amountPaid: [ { 100, 100, 48.39 } ]
}],
2: [{
amountPaid: [ { 100, 100, 48.39 } ]
}]
再次合并金额，得到新结果。所以：100 + 100 + 48.39
将 users.amountPaid 中的金额替换为新金额，因此它应该显示 248.39，而不是 300。
0: [{
userName: 'user 1',
amountPaid: 248.39
}],
1: [{
userName: 'user 2',
amountPaid: 248.39
}],
2: [{
userName: 'user 3',
amountPaid: 248.39
}]
如你所见，我的想法相当复杂，但我不知道还能怎么做。我尝试摆弄后端，但我主要是前端开发人员，所以我想找到一个前端解决方案。
我现在的问题是我不知道如何继续前进，而且我已经到了我自己的代码让我感到困惑的地步。我的totalPaymentDividedByMonths 数组未填充用户和分摊金额。 我尝试执行以下操作：
this.totalPaymentDividedByMonths = (num = this.users[0].totalAmount, n = this.diffBetweenDatesMonthFormat) => new Array(n).fill(num / n);
有没有更简单的方法在前端执行此方法？
我创建了一个 JSFiddle，其中包含您想要实现的目标的工作示例。
Vue.component('vue2-examples', Vue2Examples.default);
new Vue({
el: '#app',
data: {
subscriptionAmount: 100,
fromDate: new Date('2024-01-01'),
toDate: new Date('2024-03-15'),
users: [
{
0: [{
userName: 'user 1',
amountPaid: 100
}],
1: [{
userName: 'user 2',
amountPaid: 200
}],
2: [{
userName: 'user 3',
amountPaid: 300
}]
}
]
},
mounted() {
const daysAccountedFor = this.toDate.getUTCDate()
// takes toDates month and adds it by 1, also first day -> 2024-04-01
const nextMonth = new Date(this.toDate.getFullYear(), this.toDate.getMonth() + 1, 1);
// Subtract one day -> 2024-03-31
const lastDayOfMonth = new Date(nextMonth.getTime() - 86400000);
const numberOfDays = lastDayOfMonth.getUTCDate();
console.log("Number of days in the month:", numberOfDays); // Output: 31
let temp = []
this.users.forEach(user => {
for (const key in user) {
user[key].forEach(u => {
console.log(u)
let exactAmount = u.amountPaid - (this.subscriptionAmount - (daysAccountedFor/numberOfDays * this.subscriptionAmount))
temp.push(+exactAmount.toFixed(2))
});
};
});
this.users = temp
}
});