61 lines
2.1 KiB
Vue
61 lines
2.1 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-form :model="form" label-width="120px">
|
||
<el-form-item label="网络预定开关">
|
||
<el-switch v-model="form.yd" :active-value="1" :inactive-value="0"></el-switch>
|
||
</el-form-item>
|
||
<el-form-item label="预定时间" v-if="form.timeList.length">
|
||
<div class="time_row" v-for="(item, index) in form.timeList" :key="index">
|
||
<el-time-picker is-range v-model="item.time" range-separator="至" start-placeholder="开始时间"
|
||
end-placeholder="结束时间" placeholder="选择时间范围">
|
||
</el-time-picker>
|
||
<i class="icon el-icon-delete" @click="form.timeList.splice(index, 1)"></i>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button plain icon="el-icon-plus" @click="form.timeList.push({ time: [] })">添加时间段</el-button>
|
||
<div class="tips">注：结束时间不能小于开始时间</div>
|
||
</el-form-item>
|
||
<el-form-item label="允许预约天数">
|
||
<el-input-number v-model="form.dayMax" controls-position="right" :min="0"></el-input-number>
|
||
<div class="tips">注：最多预约几天后的日期</div>
|
||
</el-form-item>
|
||
<el-form-item label="允许预约天数">
|
||
<el-input type="textarea" v-model="form.info" placeholder="充值说明" style="width: 500px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary">保存</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
form: {
|
||
yd: 0,
|
||
timeList: [],
|
||
dayMax: 3,
|
||
info: ''
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.time_row {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
&:not(:first-child) {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.icon {
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
</style> |