vue移动端日历显示查看每日详情列表

效果图

#

使用cmd命令
npm install v-calendar

package.json和package-lock.json配置信息如下

在页面中引入并注册组件

import { setupCalendar, DatePicker } from "v-calendar";
import { mapGetters, mapActions } from "vuex";setupCalendar(Vue, {locale: "zh-CN"
});

components: {// "v-calendar": VCalendar"v-date-picker": DatePicker},

现在就可以使用该组件了，页面代码如下

正常情况下，如果只是普通的日历展示，没有要查询某个日期的某些内容的需求，以下代码就可以满足

<v-date-pickerclass="calendar"v-model="selectedDate":disabled-dates="{ start: new Date().getTime() + 8*24*60*60*1000, end: null }":attributes="attrs"is-expandedis-inlineis-required@update:fromPage="updatePage"></v-date-picker>

不可以满足的，这里是查询某个日期详情的并在该日期下有标识代码

<template><app-container class="appointment-calendar"><v-date-pickerclass="calendar"v-model="selectedDate":disabled-dates="{ start: new Date().getTime() + 8*24*60*60*1000, end: null }":attributes="attrs"is-expandedis-inlineis-required@update:fromPage="updatePage"><template v-slot:day-content="{day, dayEvents, attributes, attributesMap}"><div@click="chooseDay(day, dayEvents, attributes, attributesMap)"class="customer-day vc-day-content vc-rounded-full":class="[{'is-today': day.isToday}, {'select-day': day.dateTime == selectedDate}]"><span class="label">{{day.label}}</span><spanclass="count"v-if="attributesMap && attributesMap['count'].customData[day.dateTime]">{{attributesMap['count'].customData[day.dateTime]}}</span><span class="dot" v-if="attributesMap && attributesMap['count']"></span></div></template></v-date-picker><div class="main"><div class="main-time"><div><p>上午</p><button @click="addScheduling(1)" v-show="isScheduling">添加排班</button></div><div style="height:auto;" v-if="workAmList.length!==0"><pclass="workTime fl"v-for="item in workAmList":key="item.workHeaderId"@click="schedulingInfo(item.workHeaderId)">{{item.workStartTime}}~{{item.workEndTime}}<img@click.stop="deleteworkHeader(item.workHeaderId)"src="../../assets/images/common/delete.png"alt/></p></div><div><p>下午</p><button @click="addScheduling(2)" v-show="isScheduling">添加排班</button></div><div style="height:auto;" v-if="workPmList.length!==0"><pclass="workTime fl"v-for="item in workPmList":key="item.workHeaderId"@click="schedulingInfo(item.workHeaderId)">{{item.workStartTime}}~{{item.workEndTime}}<img@click.stop="deleteworkHeader(item.workHeaderId)"src="../../assets/images/common/delete.png"alt/></p></div></div></div></app-container>
</template>

样式文件：这里我们用的是cass ,使用了两个样式文件

<style lang="scss" rel="stylesheet/scss">
.appointment-calendar {.calendar {border: none !important;background-color: #ffffff !important;border: none;border: 0.05rem solid rgba(45, 141, 247, 0.07);.vc-day-content {font-weight: normal;}.vc-weekday {font-weight: normal;}.vc-title {font-size: 0.8rem;font-weight: normal;}}
}
.main-time {margin: 1rem 0;height: 5rem;border: 0.05rem solid rgba(45, 141, 247, 0.07);border-bottom: none;div {height: 2.5rem;line-height: 2.5rem;position: relative;border-bottom: 0.05rem solid rgba(45, 141, 247, 0.07);overflow: hidden;p {float: left;margin-left: 1rem;}.workTime {height: 1.5rem;border-radius: 1rem;line-height: 1.5rem;background: #eee;margin: 0.5rem;opacity: 0.6;padding: 0 0.3rem;position: relative;img {position: absolute;width: 1rem;height: 1rem;top: -0.2rem;}}button {height: 1.5rem;float: right;position: absolute;top: 50%;margin-top: -0.75rem;right: 1rem;background: linear-gradient(145deg,rgba(17, 218, 199, 1) 0%,rgba(45, 141, 247, 1) 100%);border-radius: 0.5rem;border: none;color: #fff;}}
}
</style>

<style scoped lang="scss" rel="stylesheet/scss">
.customer-day {position: relative;.label {/*padding-top: 0.15rem;*/}.count {position: absolute;top: -3px;right: -5px;width: 14px;height: 14px;font-size: 10px;line-height: 1.65;border-radius: 100%;background: #ff7d00;color: #ffffff;text-align: center;}.dot {position: absolute;width: 4px;height: 2px;background: #ff7d00;bottom: 0;}
}
.is-today {background-color: #eeee !important;
}
.select-day {background-color: $themeColor !important;color: #ffffff !important;
}
</style>

  data() {return {selectedDate: "",attrs: [],currentSchedule: {date: "",count: 0,items: []},scheduleMonthMap: {},scheduleDayMap: {},doctorDetailId: this.$route.query.id,  //上一页面传过来的医生idworkAmPm: 0,  workAmList: [], //上午返回的排班列表workPmList: [], //下午返回的排班列表isScheduling: false  //不可选日期排班按钮是否显示};},watch: {selectedDate(newVal) {newVal && this.loadScheduleByDay(newVal);}},

这里是methods事件
进入日历或切换月份的触发事件

//  月份更新获取排班情况和预约数量updatePage(e) {this.$indicator.open();this.$api.workHeaderList({doctorDetailId: this.doctorDetailId,monthYear: this.getTimeSlot(e.year, e.month)}).then(data => {this.$indicator.close();console.log(data);this.loadAttrs(data.data || []);// //  selectedDate为空说明是初始化，则把其置为今天, 触发watch加载当天排班情况if (!this.selectedDate) {this.selectedDate = new Date().setHours(0, 0, 0, 0);}},err => {this.$indicator.close();err.msg && this.$messagebox.alert(err.msg);});},getTimeSlot(year, month) {if (month.length == 1) {month = "0" + moth;}return year + "-" + month;},
//  更新日历数据loadAttrs(data) {let dates = [];let customData = {};data.forEach(item => {dates.push(new Date(item).getTime());customData[item.date + ""] = item.count;});this.attrs = [{key: "count",dates: dates,customData: customData}];},chooseDay(day) {this.selectedDate = day.dateTime;},//  加载某一天的排班loadScheduleByDay(timeStamp) {this.workAmList = [];this.workPmList = [];let dateStr = this.$utils.getDateObj(timeStamp).dateStr.slice(0, 10);this.$indicator.open();this.$api.workHeaderDateList({doctorDetailId: this.doctorDetailId,selDate: dateStr}).then(data => {this.$indicator.close();data.data.forEach(item => {let dataEntity = {};dataEntity.workStartTime = this.$utils.getDateObj(item.workStartTime).dateStr.slice(10, 16); //处理后台数据返回时间格式问题dataEntity.workEndTime = this.$utils.getDateObj(item.workEndTime).dateStr.slice(10, 16);//处理后台数据返回时间格式问题dataEntity.workHeaderId = item.workHeaderId;if (item.workAmPm == 1) {this.workAmList.push(dataEntity);} else {this.workPmList.push(dataEntity);}});console.log(data);this.scheduleDayMap[dateStr] = data.data || [];},err => {this.$indicator.close();err.msg && this.$messagebox.alert(err.msg);});},

因为频繁进入到页面，页面会自动缓存，这里是一个bug所以要在路由守卫中，使用KeepAlive，暂时就到这里了

vue移动端日历显示查看每日详情列表相关推荐

vue移动端日历组件 mintUi dateTime picker 设定开始和结束日期
vue移动端日历组件 mintUi dateTime picker 设定开始和结束日期
Vue移动端系列 =＞ [07] 文章详情
七.文章详情创建组件并配置路由 1.创建 views/article/index.vue 组件 <template><div class="article-contain ...
vue之实现日历----显示农历，滚动日历监听年月改变
第一次手写日历,遇到很多坑,好在都解决,感谢度娘娘(微笑) gitHub源码(https://github.com/xqtian/calendar)让你满意记得给小星星哦功能包括显示星期公历,农历, ...
vue移动端日历插件
https://www.npmjs.com/package/vue-mobile-calendar npm安装 npm install vue-mobile-calendar import Calen ...
vue移动端日历组件
<template><div id="calendar" :class="{'change':isChange}" ><!-- 年 ...
VUE—移动端手机号正则验证，不正确显示‘请输入正确手机号’，若正确跳转到发送验证码（图文详情）
VUE-移动端手机号正则验证,不正确显示'请输入正确手机号',若正确跳转到发送验证码先看效果图第一步:写布局 <input type="text" placeholder ...
vue移动端项目日历组件，月周切换，点击进入上/下一个月
项目场景: Vue移动端项目的日历组件,移动端如果没有别的特别要求,一般用vant中的日历组件就OK,这里用的另一个.组件是网上找的,原网址:vue-hash-calendar,需要的请自行去看. 我 ...
推荐一款移动端日历App吉日历
推荐一款移动端日历App吉日历一应用描述万年历.日历.农历.黄历.假期安排.天气预报.记事提醒便捷查看,一目了然! 二功能介绍: 1.万年历:精美的日期展示,完整的节日日历随意查看,节假日.休 ...
vue移动端h5中a标签下载/预览文件
需求:项目分PC端和移动端,PC端(react)以实现列表页附件下载,现需同步移动端(vue)h5页面在原有的列表页中增加一行查看(下载)附件. 只写结构,暂不考虑其他,增加附件行的代码如下: < ...
Vue移动端项目（二）
五.首页-频道编辑处理页面弹出层 Vant 中内置了 Popup 弹出层组件. 1.在 data中添加一个数据用来控制弹层的显示和隐藏 data () {return {...isChannelE ...

vue移动端日历显示查看每日详情列表

vue移动端日历显示查看每日详情列表

vue移动端日历显示查看每日详情列表相关推荐

最新文章

热门文章