解决 用vue+vant 写顶部tab栏 做排班表的bug
2024-05-08 09:58:01
主要的更改是解决了 日期能到 31/32 的问题，实现了到月底自动切换到下一月的1号
这里博主自己封了一个新的函数 主要用到了 setDate（）这个 时间函数
//获取几天后日期dateCount(arg, date) {var date1 = arg;var date2 = new Date(date1);date2.setDate(date2.getDate() + parseInt(date));var times = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();var Year = 0;var Month = 0;var Day = 0;var CurrentDate = "";Year = date2.getFullYear();Month = date2.getMonth() + 1;Day = date2.getDate();CurrentDate += Year + "-";if (Month >= 10) {CurrentDate += Month + "-";} else {CurrentDate += "0" + Month + "-";}if (Day >= 10) {CurrentDate += Day;} else {CurrentDate += "0" + Day;}return CurrentDate;},
这是整个项目页面的代码：
<template><div class="main"><div class="gaoStyle"><van-tabs:swipe-threshold="7"color="#72BEFF"title-active-color="#72BEFF"title-inactive-color="#353535"@click="dianjiqiehuanyisheng"><van-tab :title=" Week[zhou_1]+ riqi "><!-- 排班安排 --><div v-for="(item,index) in list" :key="index"><div class="box"><a href="javascript:;"><img src alt /></a><div class="zhong"><h2>{{ item.doctorName }}<span class="redColor">￥{{ item.regsitFee }}</span></h2><p>职称:{{ item.doctorTitle }}</p><p>科室: {{ item.clinicLabel }}</p><p>就诊时段: {{ item.timeType}}</p></div><div class="you" @click="guaHao(item)"><span class="blueColor">选择挂号时段</span><van-icon name="arrow" /></div></div><!-- 底部那根细线 --><div class="line"></div></div></van-tab><van-tab :title=" Week[zhou_2]+ riqi_1"></van-tab><van-tab :title=" Week[zhou_3]+ riqi_2"></van-tab><van-tab :title=" Week[zhou_4]+ riqi_3"></van-tab><van-tab :title=" Week[zhou_5]+ riqi_4"></van-tab><van-tab :title=" Week[zhou_6]+ riqi_5"></van-tab><van-tab :title=" Week[zhou_7]+ riqi_6"></van-tab></van-tabs></div></div>
</template><script>
import { CellGroup, Cell, Button, Toast, Icon, Tab, Tabs } from "vant";
import * as log from "loglevel";
import axios from "axios";
import properties from "../../properties.js";
import qs from "qs";
import store from 'store'export default {components: {"van-cell-group": CellGroup,"van-cell": Cell,"van-button": Button,Toast: Toast,"van-icon": Icon,"van-tabs": Tabs,"van-tab": Tab},data() {return {deptCode: "",list: [],riqi: new Date().getDate(),riqi_1: '',riqi_2: '',riqi_3: '',riqi_4: '',riqi_5: '',riqi_6: '',Week: ["日", "一", "二", "三", "四", "五", "六"],zhou_1: 0,zhou_2: 0,zhou_3: 0,zhou_4: 0,zhou_5: 0,zhou_6: 0,zhou_7: 0};},created() {let a = new Date();let b_1 = this.dateCount(a,1)let b_2 = this.dateCount(a,2)let b_3 = this.dateCount(a,3)let b_4 = this.dateCount(a,4)let b_5 = this.dateCount(a,5)let b_6 = this.dateCount(a,6)this.riqi_1= new Date(b_1).getDate() ;this.riqi_2= new Date(b_2).getDate() ;this.riqi_3= new Date(b_3).getDate() ;this.riqi_4= new Date(b_4).getDate() ;this.riqi_5= new Date(b_5).getDate();this.riqi_6= new Date(b_6).getDate();this.getWeek();this.deptCode = this.$route.query.deptCode;// console.log(this.deptCode);const dt = new Date(); var date = this.getTime(dt)this.getYiShengLieBiao(this.deptCode, date);},methods: {// 格式化 周getWeek() {this.zhou_1 = (new Date().getDay() + 0) % 7;this.zhou_2 = (new Date().getDay() + 1) % 7;this.zhou_3 = (new Date().getDay() + 2) % 7;this.zhou_4 = (new Date().getDay() + 3) % 7;this.zhou_5 = (new Date().getDay() + 4) % 7;this.zhou_6 = (new Date().getDay() + 5) % 7;this.zhou_7 = (new Date().getDay() + 6) % 7;},// 格式化日期getTime (originVal,day) {const dt = new Date(originVal);const y = dt.getFullYear();const m = (dt.getMonth() + 1 + "").padStart(2, "0");const d = (dt.getDate() +"").padStart(2, "0");// const hh = (dt.getHours() + "").padStart(2, "0");// const mm = (dt.getMinutes() + "").padStart(2, "0");// const ss = (dt.getSeconds() + "").padStart(2, "0");// return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;return `${y}-${m}-${d} `;},//获取几天后日期dateCount(arg, date) {var date1 = arg;var date2 = new Date(date1);date2.setDate(date2.getDate() + parseInt(date));var times = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();var Year = 0;var Month = 0;var Day = 0;var CurrentDate = "";Year = date2.getFullYear();Month = date2.getMonth() + 1;Day = date2.getDate();CurrentDate += Year + "-";if (Month >= 10) {CurrentDate += Month + "-";} else {CurrentDate += "0" + Month + "-";}if (Day >= 10) {CurrentDate += Day;} else {CurrentDate += "0" + Day;}return CurrentDate;},// 点击tab 切换 医生dianjiqiehuanyisheng (name,title) {let dt = new Date(); if(name === 0){var date = this.dateCount(dt,0)this.getYiShengLieBiao(this.deptCode, date);// this.$toast(this.deptCode)this.$toast(date)} else if (name === 1){var date = this.dateCount(dt,1)this.getYiShengLieBiao(this.deptCode, date)this.$toast(date)} else if (name === 2){var date = this.dateCount(dt,2)this.getYiShengLieBiao(this.deptCode, date)this.$toast(date)} else if (name === 3){var date = this.dateCount(dt,3)this.getYiShengLieBiao(this.deptCode, date)this.$toast(date)} else if (name === 4){var date = this.dateCount(dt,4)this.getYiShengLieBiao(this.deptCode, date)this.$toast(date)} else if (name === 5){var date = this.dateCount(dt,5)this.getYiShengLieBiao(this.deptCode, date)this.$toast(date)} else if (name === 6){var date = this.dateCount(dt,6)this.getYiShengLieBiao(this.deptCode, date)this.$toast(date)} },// 点击挂号，跳转到号源详情页面guaHao(item) {console.log(item);// this.$router.push({ path:'/guahao_yishengxiangqing',query: { clinicDate: ,regsitFee:, clinicFee:,deptAddr:,residualSource:}});this.$router.push({ path:'/guahao_yishengxiangqing',query: {item:item}})},// 获取医生列表getYiShengLieBiao(val, date) {// console.log(val + 'lalaal');const hospitalId = store.get('__hospitalId__')const areaId = store.get('__areaId__')const patientId = store.get('__patientId__')console.log(patientId);axios.post(properties.api_url + "/his/proxy", {tranCode: "2003",hospitalId: hospitalId,areaId: areaId,patientId: patientId,date: date,clinicClass: "全部",deptCode: val,operatorNo: "2012"}).then(resp => {// console.log(resp.data);this.list = resp.data.list;console.log(this.list);});}}
};
</script><style scoped>
* {margin: 0;padding: 0;
}.main,
body {background-color: #eee !important;font-size: 16px;
}
h3 {height: 87px;margin: 0;margin-left: 16px;font-size: 12px;line-height: 30px;color: #aaa;font-weight: normal;
}
.box {position: relative;width: 100%;height: 110px;background-color: #fff;overflow: hidden;
}
.line {height: 1px;width: 100%;background: #e5e5e5;
}
.box a {float: left;
}
.box a {display: block;width: 64px;height: 64px;border: 1px solid #b4b4b4;border-radius: 9px;border-radius: 9px;margin: 20px 13px 12px 15px;background-color: pink;
}
.box a img {width: 100%;height: 100%;
}
.zhong {width: 56.5%;height: 100%;margin: 12px 13px 0px 77px;
}
.zhong h2 {font-family: PingFangSC-Regular;font-size: 18px;color: #000000;letter-spacing: 0;
}
.zhong h2 .redColor {font-family: PingFangSC-Regular;font-size: 14px;color: #ff7977;letter-spacing: 0;text-align: right;
}
.zhong p {font-family: PingFangSC-Regular;font-size: 14px;color: #9b9b9b;
}
.you {position: absolute;top: 25%;right: 5px;width: 27%;height: 40px;line-height: 41px;
}
.you .blueColor {font-family: PingFangSC-Regular;font-size: 14px;color: #72beff;letter-spacing: 0;text-align: right;
}
.you .van-icon {position: absolute;top: 12px;right: -8px;
}
/* 排班表下面样式 */
.gaoStyle .van-ellipsis {overflow: initial;white-space: normal;text-overflow: inherit;
}
/* 排班表下面样式 */
.gaoStyle .van-tabs--line .van-tabs__wrap {height: 90px;
}
</style>
<style >
.gaoStyle .van-tab {padding: 0 5%;
}
.gaoStyle .van-ellipsis {overflow: initial;white-space: normal;text-overflow: inherit;
}
.gaoStyle .van-tabs--line .van-tabs__wrap {height: 90px;
}
.van-button--default {background-color: #fff;
}
</style>
解决 用vue+vant 写顶部tab栏 做排班表的bug相关推荐
- 用 顶部tab栏 做排班表
用 顶部tab栏 做排班表 入职快两个月了,老大要求 做一个固定格式的医院预约挂号排班表,要求用 vue + vant 做.在网上搜了一下子,都很乱,不适合,一狠心 就自己试着写了一个,因为技术很菜 ...
- IDEA 隐藏编辑器顶部 Tab 栏
版权声明:本文首发 http://asing1elife.com ,转载请注明出处. https://blog.csdn.net/asing1elife/article/details/8271139 ...
- 基于Vue的日程排班表 - common-schedule
common-schedule 基于Vue的日程排班表,根据不同的时间显示粒度设置granularity的值,支持年/月/日/小时 安装 npm install common-schedule 实用场 ...
- Vue自定义网页顶部导航栏
Vue自定义web网页顶部导航栏 说明:此组件是为论坛类项目定制的一个实用的顶部导航栏,当然也可以用于其他的Web项目,只需要稍作修改便可以达到想要的效果.其中导航栏包含了搜索栏,用户头像,以及基本的 ...
- vue+vant仿微信聊天画面做了个点击按钮出现土味情话的界面
最近在学习框架vue,不得不说vue确实上手快,但用的vant组件库里找了老半天都没找到聊天框样式的组件,啧,实在想用,就自己搭了个,其实就这个气泡框的角花了点时间,用到了伪元素类. 效果图如下: 直 ...
- vba写的《志愿者排班表》
现在,很多地方比如学校.社区等在做志愿者排班时,由于志愿者的可提供服务的日期不定,每月的排班是一个难题. 本人简单写了一个小的VBA小文件,完成这个功能. 下载地址:https://download. ...
- 用Vue前端路由实现tab栏切换
新建一个app.vue文件,写入下方代码 <template><div class="container"><div class="tab& ...
- vue2+element-ui创建顶部导航栏及下拉菜单
vue2+element-ui创建顶部导航栏及下拉菜单 引入顶部导航栏 使用下拉菜单 获取Vuex store数据 配置Vuex store 定义logout方法 引入顶部导航栏 创建client/s ...
- uniapp去掉顶部导航栏后计算手机安全区距离，css背景模糊效果
问题: 1.uniapp去掉顶部导航栏后计算手机安全区距离 2.模糊背景的局部清晰 3.去除overflow: auto:带来的滚动条(没有滚动条也可以滚动) 4.监测页面滑动使用的方法 5.data ...
最新文章
- python批量下载验证码，用来做验证码处理
- stm32定时器中断_stm32F4之定时器的基本使用
- 第三章-分布式文件系统HDFS
- html5在线音乐列表播放器,HTML5列表音乐播放器SMusic
- 北妈每日一题：到底谁养了我的鱼！
- 【c语言】用指针变量输出一维数组中的数据
- Deepin添加PPA显示没有公钥签名
- R 语言学习（二）—— 向量
- Win7 + VS2015 + CMake3.6.1-GUI + Makefile 编译开源库
- 最近在职场的一些感悟
- 如何在 Mac 上关闭 Caps Lock 键延迟功能？
- 使用putty上传文件到linux
- qt 文件分批上传_旧手机改造计划——搭建aira2，以及极其便捷的网页管理文件方法...
- 最全的PS快捷键大全！
- 经济预测与决策matlab试题,经济预测与决策技术及MATLAB实现第5章 投入产出预测法.ppt...
- 中国ROHS 2.0 ---sj/t 11364-2014
- 华为交换机常用命令(以s5700-SI为例)
- 后台管理系统，前端框架
- 编辑视角下，论文摘要、引言、结论怎么写？
- LinkedList(链表)模仿先进先出或者先进后出