网站建设用户需求表,亚马逊网站推广怎么做,做旅游景区网站,关于排版的网站一、一天的时间段预约 会议预约有以下操作#xff1a; 1.点击预约按钮#xff0c;弹窗最近一周的预约时间点#xff08;半小时一个点#xff09;#xff0c;预约时间为5:00到24:00; 2.超过当前时间的时间点不允许再预约#xff0c;已经预约的时间不允许再预约#xff0c…一、一天的时间段预约 会议预约有以下操作 1.点击预约按钮弹窗最近一周的预约时间点半小时一个点预约时间为5:00到24:00; 2.超过当前时间的时间点不允许再预约已经预约的时间不允许再预约预约的时间段内有已经预约的时间点不允许预约 3.预约时间为时间段所以最少包含两个时间点选中两个时间点时两个时间点被选中若两个时间点内有其他时间点其他时间点也要被选中 4.已经选中的时间点再次点击时取消选中
html部分
el-dialog title预约 :visible.syncisAppoint width40% :before-closecloseAppointel-form label-width120px :modelappointFormdiv stylemargin:20px;div styledisplay:flex;justify-content:space-between;span v-for(item,index) in week :keyindex :class{top_style:item.is_active0,top_active:item.is_active1} clickchangWeek(item,index)div styleheight:25px;line-height:20px;{{item.month}}-{{item.date}}/divdiv styleheight:25px;line-height:20px;{{item.day}}/div/span/divdiv styledisplay:flex;margin:20px 50px;font-size:18px;justify-content:space-between;div styledisplay:flex;div stylebackground-color:#C8C9CC;width:40px;height:20px;margin-right:10px;/divdiv不可预约/div/divdiv styledisplay:flex;div stylebackground-color:#ffa4a4;width:40px;height:20px;margin-right:10px;/divdiv已有预约/div/divdiv styledisplay:flex;div stylebackground-color:#3EA7F1;width:40px;height:20px;margin-right:10px;/divdiv当前预约/div/div/divdiv stylemargin:20px 50px;height:250px classbutton_wrapel-button v-for(item,index) in timeArr :keyindex clickchangTime(item,index) :typeitem.status0?:item.status1?danger:item.status2?info:primary :disableditem.status1||item.status2 classbutton_style{{item.time}}/el-button/div/divel-row :gutter20el-col :span18el-form-item label备注el-input placeholder请输入 v-modelremark clearable/el-input/el-form-item/el-col/el-row/el-formdiv slotfooter classdialog-footer el-button clickcloseAppoint取消/el-buttonel-button typeprimary clicksaveAppoint stylemargin-left:20px;确定/el-button/div/el-dialogcss部分
.top_style,.top_active{border:1px solid #AAA;padding:3px 20px;text-align:center;
}
.top_active{border-color:#02A7F0;color: #02A7F0;
}
.button_style{text-align:center;float:left;width: 80px;
}js部分
1.点击预约时记录下会议id及name位置id及name并把会议id当前时间0点~24点传过去后台需要根据时间返回时间点数组 //预约addAppoint(val){this.isAppointtrue;this.appointAreaIdval.appointAreaId;this.appointAreaNameval.appointAreaName;this.positionIdval.positionId;this.positionNameval.positionName;this.getAppoint();let formData{appointAreaId:val.appointAreaId,startTime:this.getYMD(new Date()) 00:00:00,endTime:this.getYMD(new Date()) 23:59:59}this.getAppointed(formData);},//每次打开预约弹窗时默认选中当天getAppoint(){let arr []for (let i 0; i 7; i) {arr.push(this.dealTime(i))}arr[0].is_active1;this.weekarr;this.dateNowthis.week[0].full;},2.获取时间数组
//获取时间数组getAppointed(formData){appointTime(formData).then(res{this.timeArrres.data.data;if(res.data.code200){this.timeArrres.data.data;}})},时间数组格式为时间点状态未选中状态为0已经预约过的状态为1不可预约(过期时间)的状态为2当前预约(即点击时选中)的状态为3这个状态为点击时判断不要接口返回 3.处理未来七天的函数
// 处理未来七天的函数dealTime(num){let time new Date() // 获取当前时间日期let date new Date(time.setDate(time.getDate() num)).getDate() //这里先获取日期在按需求设置日期最后获取需要的let newDate(date.toString()).padStart(2,0);let month time.getMonth() 1 // 获取月份let newMonth(month.toString()).padStart(2,0);let day time.getDay() // 获取星期let yeartime.getFullYear();let fullyear-month-date;switch (day) { // 格式化case 0:day 星期日breakcase 1:day 星期一breakcase 2:day 星期二breakcase 3:day 星期三breakcase 4:day 星期四breakcase 5:day 星期五breakcase 6:day 星期六break}let obj {date: newDate,day: day,is_active: 0,month: newMonth,year:year,full:full,}return obj // 返回对象},4.点击切换星期状态
//点击切换星期状态changWeek(val,index){for(let i0;ithis.week.length;i){this.week[i].is_active0;}//星期切换时其他星期状态重置为0即未选中当前星期状态为1即选中this.week[index].is_active1;let formData{appointAreaId:this.appointAreaId,startTime:val.full 00:00:00,endTime:val.full 23:59:59};this.dateNowval.full;//dateNow为当前选中时的日期年月日this.getAppointed(formData)},5.选中时间点时判断状态及改变状态
//选中时间点时判断状态及改变状态
//appointTimeArr 保存点击的按钮的数组即当前选中数组changTime(val,index){//当前选中数组的长度小于2时即点击了1次、2次if(this.appointTimeArr.length2){this.timeArr[index].status3;点击按钮的状态设为3即当前选中this.appointTimeArr.push(index);//当前选中数组的长度为2即点击了2次if(this.appointTimeArr.length2){//选中数组的俩个下标一样时即同一个时间点点击了两次即取消选中则把状态都重置为0并且清空选中数组if(this.appointTimeArr[0]this.appointTimeArr[1]){this.timeArr[this.appointTimeArr[0]].status0;this.appointTimeArr[];}else{//选中数组的两个下下标不一样时对数组进行排序顺序排序如若是[3,2]则改为[2,3]开始时间点和结束时间点this.appointTimeArrthis.appointTimeArr.sort(function(a,b){return a-b});//求出开始时间和结束时间之间选中的时间点个数let lenthis.appointTimeArr[1]-this.appointTimeArr[0];//根据个数把选中时间段内的时间的状态都改为3即当前选中for(let i0;ilen;i){//将下选中数组内容的下标与时间数组的下标状态进行比对若是有状态等于1的即已有预约则做出提示并且把开始时间点和结束时间点重置为空循环终止if(this.timeArr[this.appointTimeArr[0]i].status1){this.$message.warning(已预约过的时间不允许预约)this.timeStart;this.timeEnd;break}else{将最终获取到的选中数组下标与时间数组进行比对获取开始时间点和结束时间点并且状态改为3即当前选中this.timeArr[this.appointTimeArr[0]i].status3;this.timeStartthis.timeArr[this.appointTimeArr[0]].time;this.timeEndthis.timeArr[this.appointTimeArr[1]].time;}}}}}else if(this.appointTimeArr.length3){//当前选中数组的长度等于3时即点击了3次则把前两个状态改为0即未选中把第三次点击时的状态设为3即当前选中for(let i0;ithis.timeArr.length;i){if(this.timeArr[i].status3){this.timeArr[i].status0;}}this.appointTimeArr[];this.appointTimeArr.push(index);this.timeArr[index].status3;}},6.保存
saveAppoint(){//保存时开始时间点和结束时间点必须存在即选中数组的长度为2否则做出提示并且将选中的下标对赢得时间点状态重置为0即未选中if(this.timeStart!this.timeEnd!){this.appointForm.appointAreaIdthis.appointAreaId;this.appointForm.appointAreaNamethis.appointAreaName;this.appointForm.positionIdthis.positionId;this.appointForm.positionNamethis.positionName;this.appointForm.remarkthis.remark;//对开始时间和结束时间进行拼接即当前选中星期对应的日期当前选中时间点this.appointForm.startTimethis.dateNow this.timeStart;this.appointForm.endTimethis.dateNow this.timeEnd;appoint(this.appointForm).then(res{if(res.data.code200){this.$message.success(res.data.message)this.remark;this.isAppointfalse;this.isMeetingfalsethis.getList();}else{this.$message.error(res.data.message)}})}else{this.$message.error(请选择预约时间)for(let i0;ithis.timeArr.length;i){if(this.timeArr[i].status2){this.timeArr[i].status0}}}},7.弹窗关闭
closeAppoint(){this.isAppointfalse//弹窗关闭时星期重置默认选中星期数组的第一个即当前日期对应的星期重置备注重置当前星期对应的时间数组中的状态为3的时间点状态为0即未未选中for(let i0;ithis.week.length;i){this.week[i].is_active0;}this.week[0].is_active1;this.remark;for(let i0;ithis.timeArr.length;i){if(this.timeArr[i].status3){this.timeArr[i].status0;}}},二、一月的天数预约最少一天 1.时间数组同样由后端返回把每月的第一天和最后一天传给后端后端接口返回日期数组 格式也是timestatus0代表未选中1代表已有预约2代表不可预约3代表当前选中 2.与时间点预约不同的是天数预约可以选择一个时间点即某个月的某一天其他的逻辑基本都差不多了剩下的就是一些代码的不同了 3.天数预约比较有意思的就是会用到日历没错就是日历一开始是想着使用一些什么日历插件的但是考虑到日历插件能满足我目前需求的可能性不大所以只好想着给他画出来哈哈去百度了亿篇博客然后自己再汇总修改so手绘的日历出来了切换月份啊显示数据啊都么得问题的嘿嘿针不戳针不戳~
html
el-dialog title预约 :visible.syncisAppoint width40% :before-closecloseAppointel-form label-width120px :modelappointFormdiv classcalenderdiv classcalender_titlediv classarrow arrow-left clickprev()lt;/divdiv classdata{{ currentYear }}-{{ currentMonthChinese }}/divdiv classarrow arrow-right clicknext()/div/divdiv classcalender_contentdiv classrow titlespan classtitle_span v-foritem in title :keyitem{{item}}/span/divdiv classrow contentspan stylemargin-bottom:5px;width:60px;margin-left:10px; classbutton_no v-for(item,index) in prevDays :keyindexa/spanel-button classcontent_button v-for(item,index) in timeArr :keyindex clickchangTime(item,index) :typeitem.status0?:item.status1?danger:item.status2?info:primary :disableditem.status1||item.status2{{index1 }}/el-button/div/div/divdiv classbutton_wrapdiv styledisplay:flex;div stylebackground-color:#C8C9CC;width:40px;height:20px;margin-right:10px;/divdiv不可预约/div/divdiv styledisplay:flex;div stylebackground-color:#ffa4a4;width:40px;height:20px;margin-right:10px;/divdiv已有预约/div/divdiv styledisplay:flex;div stylebackground-color:#3EA7F1;width:40px;height:20px;margin-right:10px;/divdiv当前预约/div/div/divel-row stylewidth:500px;margin:0 auto;el-colel-form-item label备注 label-width60pxel-input placeholder请输入 v-modelremark clearable/el-input/el-form-item/el-col/el-row/el-formdiv slotfooter classdialog-footer el-button clickcloseAppoint取消/el-buttonel-button typeprimary clicksaveAppoint stylemargin-left:20px;确定/el-button/div/el-dialogjs
data(){reurn{appointForm:{},//预约isAppoint:false,//appointAreaId:,//预约的路演厅idappointAreaName:,//预约的路演厅nameremark:,//备注appointTimeArr:[],//预约选中时间数组title: [日, 一, 二, 三, 四, 五, 六],timeArr:[],dateNow:,//预约年月timeStart:,//预约开始日期timeEnd:,//预约结束日期currentDay: new Date().getDate(),currentMonth: new Date().getMonth(),currentYear: new Date().getFullYear(),}
}computed: {// 获取中文的月份 显示8月currentMonthChinese() {return new Date(this.currentYear, this.currentMonth).toLocaleString(default,{ month: short });},currentDays() {// Date中的月份是从0开始的return new Date(this.currentYear, this.currentMonth 1, 0).getDate();},prevDays() {// 获取上个月的最后一行的日期let data new Date(this.currentYear, this.currentMonth, 0).getDate();let num new Date(this.currentYear, this.currentMonth, 1).getDay();var days [];while (num 0) {days.push(data--);num--;}return days.sort();},},methods:{/* 以下日历相关*///日历点击事件changTime(val,index){if(this.appointTimeArr.length2){this.timeArr[index].status3;this.appointTimeArr.push(index);if(this.appointTimeArr.length1){this.timeStartthis.appointTimeArr[0];this.timeEndthis.appointTimeArr[0];}else if(this.appointTimeArr.length2){if(this.appointTimeArr[0]this.appointTimeArr[1]){this.timeArr[this.appointTimeArr[0]].status0;this.appointTimeArr[];}else{this.appointTimeArrthis.appointTimeArr.sort(function(a,b){return a-b});let lenthis.appointTimeArr[1]-this.appointTimeArr[0];for(let i0;ilen;i){if(this.timeArr[this.appointTimeArr[0]i].status1){this.$message.warning(已预约过的时间不允许预约)this.timeStart;this.timeEnd;break}else{this.timeArr[this.appointTimeArr[0]i].status3;this.timeStartthis.timeArr[this.appointTimeArr[0]].time;this.timeEndthis.timeArr[this.appointTimeArr[1]].time;}}}}}else if(this.appointTimeArr.length3){for(let i0;ithis.timeArr.length;i){if(this.timeArr[i].status3){this.timeArr[i].status0;}}this.appointTimeArr[];this.appointTimeArr.push(index);this.timeArr[index].status3;}},//点击左侧箭头prev() {// 点击上个月若是0月则年份-1// 0是1月 11是12月if (this.currentMonth 0) {this.currentYear - 1;this.currentMonth 11;} else {this.currentMonth--;}let datethis.currentYear-(this.currentMonth1);let formData{appointAreaId:this.appointAreaId,startTime:this.getFirst(date) 00:00:00,endTime:this.getLast(date) 23:59:59}this.dateNowdate;this.getAppointed(formData)},//点击右侧箭头next() {if (this.currentMonth 11) {this.currentYear;this.currentMonth 0;} else {this.currentMonth;}let datethis.currentYear-(this.currentMonth1);let formData{appointAreaId:this.appointAreaId,startTime:this.getFirst(date) 00:00:00,endTime:this.getLast(date) 23:59:59}this.dateNowdate;this.getAppointed(formData)},/* 以上日历相关*/getYM(time){let date new Date(time)let Strdate.getFullYear() - (date.getMonth() 1)return Str},getFirst(time){let date new Date(time)let Strdate.getFullYear() - (date.getMonth() 1) - date.getDate()return Str},getLast(time){var y new Date(time).getFullYear(); //获取年份var m new Date(time).getMonth() 1; //获取月份var d new Date(y, m, 0).getDate(); //获取当月最后一日let Stry - m - dreturn Str},//获取时间数组getAppointed(formData){appointTime(formData).then(res{this.timeArrres.data.data;if(res.data.code200){this.timeArrres.data.data;}})},//预约addAppoint(val){this.isAppointtrue;this.appointAreaIdval.appointAreaId;this.appointAreaNameval.appointAreaName;this.positionIdval.positionId;this.positionNameval.positionName;let formData{appointAreaId:val.appointAreaId,startTime:this.getFirst(this.getYM(new Date())) 00:00:00,endTime:this.getLast(this.getYM(new Date())) 23:59:59}this.dateNowthis.getYM(new Date());this.getAppointed(formData);},saveAppoint(){if(this.timeStart!this.timeEnd!){this.appointForm.appointAreaIdthis.appointAreaId;this.appointForm.appointAreaNamethis.appointAreaName;this.appointForm.positionIdthis.positionId;this.appointForm.positionNamethis.positionName;this.appointForm.remarkthis.remark;this.appointForm.startTimethis.timeStart 00:00:00;this.appointForm.endTimethis.timeEnd 23:59:59;appoint(this.appointForm).then(res{if(res.data.code200){this.$message.success(res.data.message)this.remark;this.currentDaynew Date().getDate();this.currentMonthnew Date().getMonth();this.currentYearnew Date().getFullYear();this.isAppointfalse;this.isMeetingfalsethis.getList();}else{this.$message.error(res.data.message)}})}else{this.$message.error(请选择预约时间)for(let i0;ithis.timeArr.length;i){if(this.timeArr[i].status3){this.timeArr[i].status0}}}},closeAppoint(){this.isAppointfalsethis.remark;for(let i0;ithis.timeArr.length;i){if(this.timeArr[i].status3){this.timeArr[i].status0;}}this.currentDaynew Date().getDate();this.currentMonthnew Date().getMonth();this.currentYearnew Date().getFullYear();},
}css
.button_wrap{margin: 0 auto;width: 480px;display: flex;font-size: 18px;justify-content: space-between;margin-bottom: 20px;
}
.button_no{display: inline-block;line-height: 1;white-space: nowrap;background: #FFFFFF;color: #606266;-webkit-appearance: none;text-align: center;-webkit-box-sizing: border-box;box-sizing: border-box;outline: none;margin: 0;-webkit-transition: 0.1s;transition: 0.1s;font-weight: 400;padding: 12px 20px;font-size: 14px;border-radius: 4px;
}
.calender {width: 500px;height: 300px;margin: 0 auto;// margin-left:50px;
}
.calender_title {display: flex;width: 100%;height: 40px;line-height: 40px;text-align: center;
}
.arrow {width: 50px;height: 100%;
}
.data {font-size: 20px;
}
.title_span {width: calc(100% / 7);text-align: center;height: 40px;line-height: 40px;
}
.row {width: 100%;display: flex;justify-content: space-between;
}.prevDay {color: #fff;background-color: #eee;
}.content_span {width: calc(100% / 7);height: 30px;line-height: 30px;text-align: center;
}
.content_button{margin-bottom:5px;width:60px;margin-left:10px;
}.calender_content {width: 100%;height: 250px;
}
.content {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;-ms-flex-wrap: wrap;flex-wrap: wrap;
}
