解决 用vue+vant 写顶部tab栏 做排班表的bug
主要的更改是解决了日期能到 31/32 的问题,实现了到月底自动切换到下一月的1号这里博主自己封了一个新的函数主要用到了setDate()这个 时间函数//获取几天后日期dateCount(arg, date) {var date1 = arg;var date2 = new Date(date1);...
·
主要的更改是解决了 日期能到 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>
更多推荐
已为社区贡献11条内容
所有评论(0)