需求描述:
购票系统中,经常会根据票价金额区间来进行梯度费率设置,例如1-500元,收取1%的费用,501-1000元收取2%的费用。
而这个梯度价格区间,是管理人员手动输入的。
那么在输入的时候,就会面临一个判断,新输入的价格区间,可能和旧的价格区间有冲突。
所以此时需要前端进行校验,并找出冲突区间并给与提示。
实现原理:
判断2个区间是否重复,A区间,B区间。
方案1 . 满足max(A.start,B.start)<=min(A.end,B.end),即重复
方案2 . 满足A.end< B.start || A.start > B.end,即不重复
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-for="(item, i) of oldPriceArea">
<div class="line">
价格区间{{i+1}}:{{item.startPrice}}——{{item.endPrice}}
<button @click="deleteLine(i)">X</button>
</div>
</div>
<div class="line">
<span>请输入起始价格:</span>
<input type="text" v-model.number="startPrice">
</div>
<div class="line">
<span>请输入终止价格:</span>
<input type="text" v-model.number="endPrice">
</div>
<div class="line">
<button @click="add">添加价格区间</button>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
startPrice: '',
endPrice: '',
oldPriceArea: [
{ startPrice: 300, endPrice: 500 },
{ startPrice: 700, endPrice: 800 }
]
},
methods: {
checkValidate() {
// 判断2个区间是否重复,A区间,B区间。
// 方案1 . 满足max(A.start,B.start)<=min(A.end,B.end),即重复
// 方案2 . 满足A.end< B.start || A.start > B.end,即不重复
// 这里需要找到冲突的区间,故采用方案1.
const conflictItem = this.oldPriceArea.find(item => {
return Math.max(item.startPrice, this.startPrice) <= Math.min(item.endPrice, this.endPrice)
})
if (conflictItem) {
alert(`当前票价范围与已存在的票价范围冲突,请重新设置该梯度的票价范围!冲突的票价范围为【${ conflictItem.startPrice }——${ conflictItem.endPrice }】`)
return false
} else return true
},
deleteLine(i) {
console.log(i)
this.oldPriceArea.splice(i, 1)
},
add() {
const res = this.checkValidate()
if (res) {
this.oldPriceArea.push({
startPrice: this.startPrice,
endPrice: this.endPrice
})
}
}
}
})
</script>
</html>