需求说明:如下图所示,点击循环周期选择不同类型循环周期,时间区间根据循环周期进行动态变化,若是选择周和月,时间区间可以通过点击加号动态增加多个
功能要点:用户需要能根据自己需要动态创建多个时间选择器
后端的需要的数据格式为
malltRightsLoopInfoList: [{
loopType: '', //循环周期
loopCfg: '', //星期或月份
obtainBeginDatePart: '', //开始时间
obtainEndDatePart: '' //结束时间
}]
这里先初始化malltRightsLoopInfoList
,再根据循环周期的点击来重新初始化,并根据的malltRightsLoopInfoList
值将laydate时间选择器初始化,若是选择的周或月,用户点击添加时间区间时重新给malltRightsLoopInfoList
push一个对象,并重新初始化laydate
HTML
<div class="col-6">
<div class="c-form-item mgb-xl">
<p class="c-form-names">
<span class="c-form-nonull">*</span>循环周期
</p>
<div class="c-form-info">
<label class="c-radio {{malltRightsLoopInfoList[0].loopType == '0' ? 'choice' : ''}} mgr-l" on-click="selectCircle('0')">
<i></i>
<span>不循环</span>
</label>
<label class="c-radio {{malltRightsLoopInfoList[0].loopType == '1' ? 'choice' : ''}} mgr-l" on-click="selectCircle('1')">
<i></i>
<span>日</span>
</label>
<label class="c-radio {{malltRightsLoopInfoList[0].loopType == '2' ? 'choice' : ''}} mgr-l" on-click="selectCircle('2')">
<i></i>
<span>周</span>
</label>
<label class="c-radio {{malltRightsLoopInfoList[0].loopType == '3' ? 'choice' : ''}} mgr-l" on-click="selectCircle('3')">
<i></i>
<span>月</span>
</label>
</div>
</div>
</div>
<div
class="col-6"
s-show="malltRightsLoopInfoList[0].loopType == '0'"
style="height: 60px"
></div>
<div class="col-6" s-if="malltRightsLoopInfoList[0].loopType == '1'">
<div class="c-form-item mgb-xl">
<p class="c-form-names" title="">
<span class="c-form-nonull">*</span>时间区间
</p>
<div class="c-form-info" s-for="mrl, index in malltRightsLoopInfoList" style="margin-bottom: 10px;">
<span class="data-spn" style="width: 25%;font-size: 12px;padding: 0 10px;text-align: center;">每天</span>
<input
autocomplete="off"
placeholder="开始时间"
id="{{'date' + index}}"
class="ipt-date layer_time"
style="width: 28%"
value="{= mrl.obtainBeginDatePart =}"
/>
—
<input
autocomplete="off"
placeholder="结束时间"
id="{{'dateend' + index}}"
class="ipt-date layer_endtime"
style="width: 28%"
value="{= mrl.obtainEndDatePart =}"
/>
</div>
</div>
</div>
<div class="col-6" s-if="malltRightsLoopInfoList[0].loopType == '2'">
<div class="c-form-item mgb-xl">
<p class="c-form-names" title="">
<span class="c-form-nonull">*</span>时间区间
</p>
<div class="c-form-info" s-for="mrl, index in malltRightsLoopInfoList" style="margin-bottom: 10px;">
<select
value="{= mrl.loopCfg =}"
name=""
class="pdr-0 c-select"
style="width: 25%"
>
<option value="">请选择</option>
<option value="1">星期一</option>
<option value="2">星期二</option>
<option value="3">星期三</option>
<option value="4">星期四</option>
<option value="5">星期五</option>
<option value="6">星期六</option>
<option value="7">星期日</option>
</select>
<input
autocomplete="off"
placeholder="开始时间"
id="{{'week' + index}}"
class="ipt-date layer_time"
style="width: 28%"
value="{= mrl.obtainBeginDatePart =}"
/>
—
<input
autocomplete="off"
placeholder="结束时间"
id="{{'weekend' + index}}"
class="ipt-date layer_endtime"
style="width: 28%"
value="{= mrl.obtainEndDatePart =}"
/>
<i class="c-iconfont color-blue font-xxl vm" on-click="addTime"></i>
</div>
</div>
</div>
<div class="col-6" s-if="malltRightsLoopInfoList[0].loopType == '3'">
<div class="c-form-item mgb-xl">
<p class="c-form-names" title="">
<span class="c-form-nonull">*</span>时间区间
</p>
<div class="c-form-info" s-for="mrl, index in malltRightsLoopInfoList" style="margin-bottom: 10px;">
<select
value="{= mrl.loopCfg =}"
name=""
class="pdr-0 c-select"
style="width: 25%"
>
<option value=''>请选择</option>
<option s-for="mt,index in month" value="{{index + 1}}">
{{mt}}
</option>
</select>
<input
autocomplete="off"
placeholder="开始时间"
id="{{'mont' + index}}"
class="ipt-date layer_time"
style="width: 28%"
value="{= mrl.obtainBeginDatePart =}"
/>
—
<input
autocomplete="off"
placeholder="结束时间"
id="{{'montend' + index}}"
class="ipt-date layer_endtime"
style="width: 28%"
value="{= mrl.obtainEndDatePart =}"
/>
<i class="c-iconfont color-blue font-xxl vm" on-click="addTime"></i>
</div>
</div>
</div>
JS
// 初始化数据
initData: function () {
return {
//循环周期
malltRightsLoopInfoList: [{
loopType: "0",
loopCfg: '',
obtainBeginDatePart: '',
obtainEndDatePart: ''
}],
}
}
//选择循环周期
selectCircle: function(loopType) {
let self = this;
this.data.set('malltRightsLoopInfoList',[{
loopType: '',
loopCfg: '',
obtainBeginDatePart: '',
obtainEndDatePart: ''
}]);
this.data.set('malltRightsLoopInfoList[0].loopType',loopType);
setTimeout(function(){
self.laydateInit();
},100);
},
//添加时间区间
addTime: function() {
let self = this;
this.data.push('malltRightsLoopInfoList', {
loopType: this.data.get('malltRightsLoopInfoList')[0].loopType, //循环周期的值都是一样的
loopCfg: '',
obtainBeginDatePart: '',
obtainEndDatePart: ''
});
setTimeout(function(){
self.laydateInit();
},100);
},
//时间控件初始化函数封装(重要代码)
laydateInit: function () {
let self = this;
$(".layer_time").each(function (index) {
let id = $(this).prop("id");
laydate.render({
elem: "#" + id,
position: 'fixed',
type: 'time',
trigger: 'click', //防止laydate组件超过页面最低部出现无法点出情况
done: (value) => {
//回调函数是将用户选择的时间对数据进行赋值
index = Number(id.substring(4));
var malltRightsLoopInfoList = self.data.get('malltRightsLoopInfoList');
//对数据进行赋值
malltRightsLoopInfoList[index].obtainBeginDatePart = value.toString();
self.data.set("malltRightsLoopInfoList", malltRightsLoopInfoList);
},
});
});
$(".layer_endtime").each(function (index) {
let id = $(this).prop("id");
laydate.render({
elem: "#" + id,
position: 'fixed',
type: 'time',
trigger: 'click',
done: (value) => {
index = Number(id.substring(7));
var malltRightsLoopInfoList = self.data.get('malltRightsLoopInfoList');
malltRightsLoopInfoList[index].obtainEndDatePart = value.toString();
self.data.set("malltRightsLoopInfoList", malltRightsLoopInfoList);
},
});
});
},
后端的需要的数据格式为
malltRightsLoopInfoList: [{
loopType: '', //循环周期
loopCfg: '', //星期或月份
obtainBeginDatePart: '', //开始时间
obtainEndDatePart: '' //结束时间
}]
这里先初始化malltRightsLoopInfoList
,再根据循环周期的点击来重新初始化,并根据的malltRightsLoopInfoList
值将laydate时间选择器初始化,若是选择的周或月,用户点击添加时间区间时重新给malltRightsLoopInfoList
push一个对象,并重新初始化laydate
HTML
<div class="col-6">
<div class="c-form-item mgb-xl">
<p class="c-form-names">
<span class="c-form-nonull">*</span>循环周期
</p>
<div class="c-form-info">
<label class="c-radio {{malltRightsLoopInfoList[0].loopType == '0' ? 'choice' : ''}} mgr-l" on-click="selectCircle('0')">
<i></i>
<span>不循环</span>
</label>
<label class="c-radio {{malltRightsLoopInfoList[0].loopType == '1' ? 'choice' : ''}} mgr-l" on-click="selectCircle('1')">
<i></i>
<span>日</span>
</label>
<label class="c-radio {{malltRightsLoopInfoList[0].loopType == '2' ? 'choice' : ''}} mgr-l" on-click="selectCircle('2')">
<i></i>
<span>周</span>
</label>
<label class="c-radio {{malltRightsLoopInfoList[0].loopType == '3' ? 'choice' : ''}} mgr-l" on-click="selectCircle('3')">
<i></i>
<span>月</span>
</label>
</div>
</div>
</div>
<div
class="col-6"
s-show="malltRightsLoopInfoList[0].loopType == '0'"
style="height: 60px"
></div>
<div class="col-6" s-if="malltRightsLoopInfoList[0].loopType == '1'">
<div class="c-form-item mgb-xl">
<p class="c-form-names" title="">
<span class="c-form-nonull">*</span>时间区间
</p>
<div class="c-form-info" s-for="mrl, index in malltRightsLoopInfoList" style="margin-bottom: 10px;">
<span class="data-spn" style="width: 25%;font-size: 12px;padding: 0 10px;text-align: center;">每天</span>
<input
autocomplete="off"
placeholder="开始时间"
id="{{'date' + index}}"
class="ipt-date layer_time"
style="width: 28%"
value="{= mrl.obtainBeginDatePart =}"
/>
—
<input
autocomplete="off"
placeholder="结束时间"
id="{{'dateend' + index}}"
class="ipt-date layer_endtime"
style="width: 28%"
value="{= mrl.obtainEndDatePart =}"
/>
</div>
</div>
</div>
<div class="col-6" s-if="malltRightsLoopInfoList[0].loopType == '2'">
<div class="c-form-item mgb-xl">
<p class="c-form-names" title="">
<span class="c-form-nonull">*</span>时间区间
</p>
<div class="c-form-info" s-for="mrl, index in malltRightsLoopInfoList" style="margin-bottom: 10px;">
<select
value="{= mrl.loopCfg =}"
name=""
class="pdr-0 c-select"
style="width: 25%"
>
<option value="">请选择</option>
<option value="1">星期一</option>
<option value="2">星期二</option>
<option value="3">星期三</option>
<option value="4">星期四</option>
<option value="5">星期五</option>
<option value="6">星期六</option>
<option value="7">星期日</option>
</select>
<input
autocomplete="off"
placeholder="开始时间"
id="{{'week' + index}}"
class="ipt-date layer_time"
style="width: 28%"
value="{= mrl.obtainBeginDatePart =}"
/>
—
<input
autocomplete="off"
placeholder="结束时间"
id="{{'weekend' + index}}"
class="ipt-date layer_endtime"
style="width: 28%"
value="{= mrl.obtainEndDatePart =}"
/>
<i class="c-iconfont color-blue font-xxl vm" on-click="addTime"></i>
</div>
</div>
</div>
<div class="col-6" s-if="malltRightsLoopInfoList[0].loopType == '3'">
<div class="c-form-item mgb-xl">
<p class="c-form-names" title="">
<span class="c-form-nonull">*</span>时间区间
</p>
<div class="c-form-info" s-for="mrl, index in malltRightsLoopInfoList" style="margin-bottom: 10px;">
<select
value="{= mrl.loopCfg =}"
name=""
class="pdr-0 c-select"
style="width: 25%"
>
<option value=''>请选择</option>
<option s-for="mt,index in month" value="{{index + 1}}">
{{mt}}
</option>
</select>
<input
autocomplete="off"
placeholder="开始时间"
id="{{'mont' + index}}"
class="ipt-date layer_time"
style="width: 28%"
value="{= mrl.obtainBeginDatePart =}"
/>
—
<input
autocomplete="off"
placeholder="结束时间"
id="{{'montend' + index}}"
class="ipt-date layer_endtime"
style="width: 28%"
value="{= mrl.obtainEndDatePart =}"
/>
<i class="c-iconfont color-blue font-xxl vm" on-click="addTime"></i>
</div>
</div>
</div>
JS
// 初始化数据
initData: function () {
return {
//循环周期
malltRightsLoopInfoList: [{
loopType: "0",
loopCfg: '',
obtainBeginDatePart: '',
obtainEndDatePart: ''
}],
}
}
//选择循环周期
selectCircle: function(loopType) {
let self = this;
this.data.set('malltRightsLoopInfoList',[{
loopType: '',
loopCfg: '',
obtainBeginDatePart: '',
obtainEndDatePart: ''
}]);
this.data.set('malltRightsLoopInfoList[0].loopType',loopType);
setTimeout(function(){
self.laydateInit();
},100);
},
//添加时间区间
addTime: function() {
let self = this;
this.data.push('malltRightsLoopInfoList', {
loopType: this.data.get('malltRightsLoopInfoList')[0].loopType, //循环周期的值都是一样的
loopCfg: '',
obtainBeginDatePart: '',
obtainEndDatePart: ''
});
setTimeout(function(){
self.laydateInit();
},100);
},
//时间控件初始化函数封装(重要代码)
laydateInit: function () {
let self = this;
$(".layer_time").each(function (index) {
let id = $(this).prop("id");
laydate.render({
elem: "#" + id,
position: 'fixed',
type: 'time',
trigger: 'click', //防止laydate组件超过页面最低部出现无法点出情况
done: (value) => {
//回调函数是将用户选择的时间对数据进行赋值
index = Number(id.substring(4));
var malltRightsLoopInfoList = self.data.get('malltRightsLoopInfoList');
//对数据进行赋值
malltRightsLoopInfoList[index].obtainBeginDatePart = value.toString();
self.data.set("malltRightsLoopInfoList", malltRightsLoopInfoList);
},
});
});
$(".layer_endtime").each(function (index) {
let id = $(this).prop("id");
laydate.render({
elem: "#" + id,
position: 'fixed',
type: 'time',
trigger: 'click',
done: (value) => {
index = Number(id.substring(7));
var malltRightsLoopInfoList = self.data.get('malltRightsLoopInfoList');
malltRightsLoopInfoList[index].obtainEndDatePart = value.toString();
self.data.set("malltRightsLoopInfoList", malltRightsLoopInfoList);
},
});
});
},
我的博客主页 :https://qingmuzhang.gitee.io/