效果图
image.png
支持，随意修改天数，代码赋值接可以用
<template>
<div id="app">
<div>
<div v-for="(item,index) in dateList" :key="index">
<div class="bg1">
时间范围： {{item.tiem1}}-{{item.tiem2}}
</div>
<div v-for="(it,idx) in item.listTime" style="display: flex;justify-content:space-between;">
<div >
<input
type="number"
v-model="it.value"
style="border: 1px solid #eee;margin-bottom:10px;"
placeholder="输入参数1">
</div>
<div>
{{it.startDate}}-{{it.endDate}}
</div>
</div>
</div>
</div>
<button @click="btnszie()">更新</button>
<button @click="navigator()">跳转</button>
</div>
</template>
<script>
export default {
data() {
return {
dateTimeList:[
'2024-05-10',
'2024-05-11',
'2024-05-12',
'2024-05-13',
'2024-05-14',
'2024-05-15',
'2024-05-16',
'2024-05-17',
'2024-05-18',
'2024-05-19',
'2024-05-20',
'2024-05-21',
'2024-05-22',
'2024-05-23',
'2024-05-24',
'2024-05-25',
'2024-05-26',
'2024-05-27',
'2024-05-28',
'2024-05-29',
'2024-05-30',
],
dateList:[
{
tiem1:'2024-05-10',
tiem2:'2024-05-20',
listTime:[
{value:1,startDate:'null',endDate:'null'},
{value:2,startDate:'null',endDate:'null'},
{value:3,startDate:'null',endDate:'null'}
]
},
{
tiem1:'2024-05-21',
tiem2:'2024-05-30',
listTime:[
{value:1,startDate:'null',endDate:'null'},
{value:2,startDate:'null',endDate:'null'},
{value:3,startDate:'null',endDate:'null'}
]
}
]
}
},
watch:{
'dateList':{
handler(val){
console.log('val--',val)
},
deep:true
}
},
onLoad() {
},
created() {
this.activeList()
},
components: {
},
methods: {
btnszie(){
this.activeList()
},
activeList(){
this.dateList.forEach((item,index)=>{
// if(index==0){// 第一个里程碑计算 取开始时间进行计算
item.listTime.forEach((it,idx)=>{
let sliceDate=[];
if(idx==0){ //第一个阶段，取开始时间
console.log('idx--1--',item.tiem1)
const ofidx=this.dateTimeList.indexOf(item.tiem1)
sliceDate=this.dateTimeList.slice(ofidx,ofidx+Number(it.value));
}else{
console.log('时间--2--',item.listTime[idx-1].endDate)
const timeIdx=item.listTime[idx-1].endDate
const ofidx=this.dateTimeList.indexOf(timeIdx)+1
console.log('位置--2--',ofidx,Number(it.value)+Number(ofidx) )
sliceDate=this.dateTimeList.slice(ofidx,Number(it.value)+Number(ofidx));
//如果填写的 天数超过限制日期 就直接等于 最后的日期
if(sliceDate[sliceDate.length-1]>item.tiem2){
sliceDate[sliceDate.length-1]=item.tiem2
}
}
it.startDate=sliceDate[0];
it.endDate=sliceDate[sliceDate.length-1];
})
// }
// else{//第一个以后 大节点 取开始时间进行计算
// item.listTime.forEach((it,idx)=>{
// let sliceDate=[];
// if(idx==0){ //第二个阶段，取开始结束时间
// const ofidx=this.dateTimeList.indexOf(item.tiem1)
// console.log('else-idx--11--',ofidx+it.value)
// sliceDate=this.dateTimeList.slice(ofidx,ofidx+Number(it.value));
// }else{
// console.log('else-idx--222--')
// const timeIdx=item.listTime[idx-1].endDate
// const ofidx=this.dateTimeList.indexOf(timeIdx)+1
// // sliceDate=this.dateTimeList.slice(ofidx,it.value+ofidx);
// sliceDate=this.dateTimeList.slice(ofidx,Number(it.value)+Number(ofidx));
// }
// it.startDate=sliceDate[0];
// it.endDate=sliceDate[sliceDate.length-1];
// console.log('sliceDate--',sliceDate)
// })
// }
})
},
navigator(){
uni.navigateTo({
url:'/pages/index/datetime'
})
}
}
}
</script>
<style>
.bg1{
background: #ccc;
color: #fff;
font-size:15px;
font-weight: bold;
margin-bottom:5px;
padding:10px;
}
</style>
