【免费】HTML5+vue-js手机端30天内选择预约时间系统代码.rar资源-CSDN文库

共10个文件

png：5个

js：2个

css：1个

vue.js

javascript

需积分: 0 115 浏览量 2024-06-23 13:43:15 上传评论收藏 123KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML5+vue-js手机端30天内选择预约时间系统代码.rar （10个子文件）

HTML5+vue-js手机端30天内选择预约时间系统代码

jquery.min.js 91KB

vue.min.js 75KB

css

style.css 6KB

images

baoqian_weici2_icon.png 4KB

rili_weici2_icon@2x.png 563B

fanhui_weici2_icon.png 357B

dagou_weici2_icon.png 539B

delete_weici2_icon.png 177B

index.html 10KB

动画000001.gif 71KB

<!DOCTYPE HTML> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>vue.js手机端30天内选择预约时间系统代码</title> <link rel="stylesheet" href="css/style.css" /> </head> <body><script src="/demos/googlegg.js"></script> <div v-cloak id="popup" @click="popupHide"> <div class="overlay"></div> <div class="content"> <section class="srv-time-selector" v-show="switchShow"> <div class="bar bar-1"> <h1>选择服务时间</h1> <img width="14" src="css/images/delete_weici2_icon.png" /> </div> <div class="bd"> <div class="header"> <div class="data-picker"> <div class="wrapper"> <button v-for="(date, index) in dates.nowMonth" :id="'scroll-' + index" :class="[{current: date.current}, {'appointment': !date.appointment}]" @click="selectedNow(index, $event)"> {{date.week}} {{date.month}}/{{date.day}} <span>{{date.appointment ? '可预约' : '暂不可约'}}</span> </button> <button v-for="(date, index) in dates.nextMonth" :id="'scroll-next-' + index" :class="[{current: date.current}, {'appointment': !date.appointment}]" @click="selectedNext(index, $event)"> {{date.week}} {{date.month}}/{{date.day}} <span>{{date.appointment ? '可预约' : '暂不可约'}}</span> </button> </div> </div> <button class="cal" @click="tableShow"> <img width="16" src="css/images/rili_weici2_icon@2x.png" alt="" /> <span>30天</span> </button> </div> <div :class="['no-sel', {'not-chose-time': isChoseTime}]" @click="notChoseTime" v-show="isChoseTimeShow"> <p>暂不选择服务时间</p> <p>之后可以在我的订单页面选择</p> </div> <div class="hours"> <div class="wrapper" v-for="date in dates.nowMonth" v-if="date.current && date.appointment"> <div :class="{'chose-time': !isChoseTime}" v-if="isFirstDay === 0"> <button :class="['hour-this', {'not-can-use': (key + 20)/2 <= currentHours + 0.5}]" v-for="(hour, key) in date.hours" @click="timeChose(key, $event)">{{hour.hour}}</button> </div> <div :class="{'chose-time': !isChoseTime}" v-else> <button class="hour-this" v-for="(hour, key) in date.hours" @click="timeChose(key, $event)">{{hour.hour}}</button> </div> </div> <div class="wrapper" v-else-if="date.current && !date.appointment"> <div class="tips"> <img class="null-tips" src="css/images/baoqian_weici2_icon.png" alt="" /> <p>抱歉，今天的服务暂时不能预约哦~</p> </div> </div> <div class="wrapper" v-for="date in dates.nextMonth" v-if="date.current && date.appointment"> <div :class="{'chose-time': !isChoseTime}"> <button class="hour-this" v-for="hour in date.hours" @click="timeChose(key, $event)">{{hour.hour}}</button> </div> </div> <div class="wrapper" v-else-if="date.current && !date.appointment"> <div class="tips"> <img class="null-tips" src="css/images/baoqian_weici2_icon.png" alt="" /> <p>抱歉，今天的服务暂时不能预约哦~</p> </div> </div> </div> <div class="out"> <button class="submit" @click="submitFunc">确定</button> </div> </div> </section> <section class="srv-time-selector" v-show="!switchShow"> <div class="bar"> <img width="8" src="css/images/fanhui_weici2_icon.png" @click="tableHide"> <h1>选择服务时间</h1> </div> <div class="bd"> <section class="days-component"> <div class="weekdays"> <div class="weekday">日</div> <div class="weekday">一</div> <div class="weekday">二</div> <div class="weekday">三</div> <div class="weekday">四</div> <div class="weekday">五</div> <div class="weekday">六</div> </div> <div class="days-body"> <div> <div class="month">{{currentYears}}年{{currentMonth}}月</div> <div class="days"> <div class="day" v-for="day in nullDay">{{day}}</div> <div class="day" v-for="(date, index) in dates.nowMonth" :id="'scroll-' + index" :class="[{current: date.current}, {'appointment': !date.appointment}]" @click="selectedNow(index, $event)"> <font v-show="index == 0">今天</font> <span>{{date.appointment ? '' : '暂不可约'}}</span> <a :href="'#scroll-' + index">{{date.day}}</a> </div> </div> <div class="month">{{currentYears}}年{{currentMonth + 1}}月</div> <div class="days"> <div class="day" v-for="day in nextNullDay">{{day}}</div> <div class="day" v-for="(date, index) in dates.nextMonth" :id="'scroll-next-' + index" :class="[{current: date.current}, {'appointment': !date.appointment}]" @click="selectedNext(index, $event)"> <span>{{date.appointment ? '' : '暂不可约'}}</span> <a :href="'#scroll-next-' + index">{{date.day}}</a> </div> </div> </div> </div> </section> </div> </section> </div> </div> <script src="js/jquery.min.js"></script> <script src="js/vue.min.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#popup', data: { switchShow: true, currentMonth: null, currentHours: null, isFirstDay: 0, popupShow: false, isChoseTime: true, isChoseTimeShow: true, nextProtoWeek: null, nullDay: [], nextNullDay: [], dates: { nowMonth: [], nextMonth: [] } }, methods: { selectedNow: function(index, event) { for (date in this.dates.nowMonth){ this.dates.nowMonth[date].current = false; } for (date in this.dates.nextMonth){ this.dates.nextMonth[date].current = false; }; if (!this.dates.nowMonth[index].appointment) { this.isChoseTimeShow = false; } else { this.isChoseTimeShow = true; this.isChoseTime = true; } this.isFirstDay = index; console.log(this.isFirstDay); this.tableHide(); this.dates.nowMonth[index].current = true; }, selectedNext: function(index, event) { for (date in this.dates.nextMonth){ this.dates.nextMonth[date].current = false; } for (date in this.dates.nowMonth){ this.dates.nowMonth[date].current = false; }; if (!this.dates.nextMonth[index].appointment) { this.isChoseTimeShow = false; } else { this.isChoseTimeShow = true; this.isChoseTime = true; } this.isChoseTime = true; this.tableHide(); this.dates.nextMonth[index].current = true; }, tableShow: function() { this.switchShow = false; }, tableHide: function() { this.switchShow = true; }, timeChose: function(key, event) { this.isChoseTime = false; $(event.target).siblings().removeClass('chosed'); $(event.target).addClass('chosed'); }, notChoseTime: function() { this.isChoseTime = true; }, popupHide: function() { popupShow = false; }, // submit submitFunc: function() { var time, choseH, subInfo; for (ts in this.dates.nowMonth) { if (this.dates.nowMonth[ts].current == true) { time = this.dates.nowMonth[ts]; } } for (tc in this.dates.nextMonth) { if (this.dates.nextMonth[tc].current == true) { time = this.dates.nextMonth[tc]; } } var choseHours = $('.hour-this'); var noSel = $('.no-sel'); if(noSel.hasClass('not-chose-time')) { choseH = null; } else {

评论收藏

内容反馈