微信小程序实现的日期午别医生排班表功能示例

本文实例讲述了微信小程序实现的日期午别医生排班表功能。分享给大家供大家参考,具体如下:

1.util.js

//获取几天后日期
function 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;
}
Date.prototype.format = function() {
 var s = '';
 s += this.getFullYear() + '-'; // 获取年份。
 if ((this.getMonth() + 1) >= 10) { // 获取月份。
 s += (this.getMonth() + 1) + "-";
 } else {
 s += "0" + (this.getMonth() + 1) + "-";
 }
 if (this.getDate() >= 10) { // 获取日。
 s += this.getDate();
 } else {
 s += "0" + this.getDate();
 }
 return (s); // 返回日期。
};
//两个日期之间的所有日期
function getAll(begin, end) {
 var ab = begin.split("-");
 var ae = end.split("-");
 var db = new Date();
 db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
 var de = new Date();
 de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
 var unixDb = db.getTime();
 var unixDe = de.getTime();
 var str = "";
 for (var k = unixDb + 24 * 60 * 60 * 1000; k < unixDe;) {
 str += (new Date(parseInt(k))).format() + ",";
 k = k + 24 * 60 * 60 * 1000;
 }
 return str;
}
//两个时间相差天数
function datedifference(sDate1, sDate2) { //sDate1和sDate2是2006-12-18格式
 var aDate, oDate1, oDate2, iDays;
 aDate = sDate1.split("-");
 oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]); //转换为9-25-2017格式
 aDate = sDate2.split("-");
 oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);
 iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24);
 return iDays;
};
module.exports = {
 DateCount: dateCount,
 GetAll: getAll,
 Datedifference: datedifference
}

2.js

var HB = require('../../utils/util.js');
Page({
 /**
 * 页面的初始数据
 */
 data: {
 sourceList: [{
  "ClinicLabelName": "医生A",
  "ClinicLabelId": "8a2256334b021c33014b06124fd60181",
  "Count": 5,
  "Date": "2018-12-12",
  "IsVisit": false,
  "NoonName": "上午",
  "Noon": 1,
  "Total": 50,
  "dayOfWeek": "3",
  "keyue": true
  },
  {
  "ClinicLabelName": "医生D",
  "ClinicLabelId": "8a2256334b021c33014b06124fd60181",
  "Count": 5,
  "Date": "2018-12-18",
  "IsVisit": false,
  "NoonName": "凌晨",
  "Noon": 4,
  "Total": 50,
  "dayOfWeek": "5",
  "keyue": true
  },
  {
  "ClinicLabelName": "医生B",
  "ClinicLabelId": "8a2256334b021c33014b06124fd60181",
  "Count": 5,
  "Date": "2018-12-21",
  "IsVisit": false,
  "NoonName": "下午",
  "Noon": 2,
  "Total": 50,
  "dayOfWeek": "3",
  "keyue": true
  },
  {
  "ClinicLabelName": "医生c",
  "ClinicLabelId": "8a2256334b021c33014b06124fd60181",
  "Count": 5,
  "Date": "2018-12-16",
  "IsVisit": false,
  "NoonName": "全天",
  "Noon": 4,
  "Total": 50,
  "dayOfWeek": "4",
  "keyue": true
  },
  {
  "ClinicLabelName": "医生D",
  "ClinicLabelId": "8a2256334b021c33014b06124fd60181",
  "Count": 5,
  "Date": "2018-12-16",
  "IsVisit": false,
  "NoonName": "夜间",
  "Noon": 3,
  "Total": 50,
  "dayOfWeek": "5",
  "keyue": true
  }
 ],
 dateArray: [],
 noonList: [],
 StartClinicDate: "2018-12-12",
 EndClinicDate: "2018-12-19"
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function(options) {
 this.removal();
 },
 removal: function() {
 var that =this;
 var objectArray = this.data.sourceList;
 var newObject = [];
 for (var i = 0; i < objectArray.length; i++) //从第二项开始遍历
 {
  newObject.push(objectArray[i].NoonName);
 }
 var finalArray = [newObject[0]]; //结果数组
 for (var j = 1; j < newObject.length; j++) //从第二项开始遍历
 {
  //如果当前数组的第i项在当前数组中第一次出现的位置不是i,
  //那么表示第i项是重复的,忽略掉。否则存入结果数组
  if (newObject.indexOf(newObject[j]) == j) {
  finalArray.push(newObject[j]);
  }
 }
 var noonList = [];
 for (var k = 0; k < finalArray.length; k++) //从第二项开始遍历
 {
  noonList.push({
  NoonName: finalArray[k],
  noon: that.getNoonNum(finalArray[k]),
  Value: false,
  list: []
  })
 }
 that.setData({
  noonList: noonList.sort(that.compare("noon"))
 })
 that.getSevenDays();
 },
 getNoonNum: function(ele) {
 var num;
 switch (ele) {
  case '上午':
  num = 1;
  break;
  case '下午':
  num = 2;
  break;
  case '夜间':
  num = 3;
  break;
  case '凌晨':
  num = 4;
  break;
  case '全天':
  num = 5;
  break;
 }
 return num;
 },
 compare: function compare(property){
 return function (a, b) {
  var value1 = a[property];
  var value2 = b[property];
  return value1 - value2;
 }
 },
 getSevenDays: function() {
 var daysArray = [];
 var dayDict = {};
 var weekStr = '';
 var weekNum = '';
 var date = new Date(); //当前日期
 var newDate = new Date();
 //开始日期与结束日期之间相差天数
 var dateNum = HB.Datedifference(this.data.StartClinicDate, this.data.EndClinicDate);
 //显示几周的表格
 var weekNum = Math.ceil((dateNum + 1) / 7);
 var dateArr = HB.GetAll(this.data.StartClinicDate, HB.DateCount(this.data.StartClinicDate, weekNum * 7 - 1));
 dateArr = (this.data.StartClinicDate + "," + dateArr + HB.DateCount(this.data.StartClinicDate, weekNum * 7 - 1)).split(","); //获取两个日期之间日期
 for (var i = 0; i < dateArr.length; i++) {
  weekNum = this.getWeekNum(this.getWeekByDay(dateArr[i]));
  dayDict = {
  "date": dateArr[i],
  "date_text": dateArr[i].substring(5, 10),
  "weekName": this.getWeekByDay(dateArr[i]),
  "weekNum": weekNum
  };
  daysArray.push(dayDict);
 }
 this.setData({
  dateArray: daysArray
 });
 this.dealData();
 },
 getWeekNum: function(ele) {
 var num;
 switch (ele) {
  case '周一':
  num = 0;
  break;
  case '周二':
  num = 1;
  break;
  case '周三':
  num = 2;
  break;
  case '周四':
  num = 3;
  break;
  case '周五':
  num = 4;
  break;
  case '周六':
  num = 5;
  break;
  case '周日':
  num = 6;
  break;
 }
 return num;
 },
 getWeekByDay: function(value) {
 var day = new Date(Date.parse(value.replace(/-/g, '/'))); //将日期值格式化
 var today = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六"); //创建星期数组
 return today[day.getDay()];
 },
 dealData: function() {
 var that = this;
 var tag = 0;
 var ar = [1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7];
 var objectArray = that.data.noonList;
 let loopNum = that.data.dateArray.length;
 for (var k = 0; k < objectArray.length; k++) {
  for (var m = 0; m < loopNum; m++) {
  objectArray[k].list.push({
   keyue: false,
   date: HB.DateCount(that.data.StartClinicDate, m)
  })
  }
 }
 for (var i = 0; i < that.data.sourceList.length; i++) {
  var assignmentArray;
  for (var j = 0; j < objectArray.length; j++) {
  if (objectArray[j].NoonName == that.data.sourceList[i].NoonName){
   assignmentArray = objectArray[j];
  }
  }
  assignmentArray.Value = true;
  for (var n = 0; n < assignmentArray.list.length; n++) {
  if (assignmentArray.list[n].date == that.data.sourceList[i].Date) {
   assignmentArray.list[n].noon = that.data.sourceList[i].Noon,
   assignmentArray.list[n].clinicLabelId = that.data.sourceList[i].ClinicLabelId,
   assignmentArray.list[n].clinicLabelName = that.data.sourceList[i].ClinicLabelName,
   assignmentArray.list[n].count = that.data.sourceList[i].Count,
   assignmentArray.list[n].isVisit = that.data.sourceList[i].IsVisit,
   assignmentArray.list[n].noonName = that.data.sourceList[i].NoonName,
   assignmentArray.list[n].total = that.data.sourceList[i].Total,
   assignmentArray.list[n].dayOfWeek = that.data.sourceList[i].dayOfWeek,
   assignmentArray.list[n].keyue = true
  }
  }
 }
 that.setData({
  noonList: objectArray
 })
 },
 clickDoctor: function(e) {
 let index = e.currentTarget.dataset.item;
 let indexChild = e.currentTarget.dataset.itemchild;
 let arrObiect = this.data.noonList;
 var objectList = arrObiect[index].list[indexChild];
 debugger
 }
})

3.wxml

<!-- 医生排班表 -->
<scroll-view scroll-x="true" class='scrollClass'>
 <view class='cell-table'>
 <view class='cell-table_header'>
  <view class="th">
  <view class='cell_label'></view>
  </view>
  <block wx:for="{{dateArray}}" wx:key="">
  <view class='th'>
   <view class="cell_label centerclass">{{item.weekName}}</view>
   <view class="cell_date_label centerclass">{{item.date_text}}</view>
  </view>
  </block>
 </view>
 <block wx:for="{{noonList}}" wx:key="" wx:for-index="parentIndex" wx:if='{{item.Value}}'>
  <view class='cell-table_main'>
  <!--上午下午晚上全天-->
  <view class='td' style='background-color:white;'>
   <view class="cell_label centerclass">{{item.NoonName}}</view>
  </view>
  <block wx:key="" wx:for="{{item.list}}" wx:for-item="trade" wx:for-index="ind">
   <view class='td' wx:if='{{trade.keyue}}'>
   <view class='cell-table_choose"' bindtap='clickDoctor' data-item='{{parentIndex}}' data-itemchild='{{ind}}'>{{trade.count+"/"+trade.total}}</view>
   </view>
   <view class='td' wx:else>
   <view class='cell-table_empty"'></view>
   </view>
  </block>
  </view>
 </block>
 </view>
</scroll-view>

4.wxss

/*医生排班表 */
.cell-table {
 display: inline-flex;
 flex-direction: column;
 border: 1rpx solid #e5e5e5;
 border-bottom: 0;
}
.scrollClass {
 display: flex;
 width: 100%;
 white-space: nowrap;
 margin-top: 23px;
 height: 100%;
 background-color: white;
}
.cell-table_header {
 display: inline-flex;
}
.th {
 display: flex;
 flex-direction: column;
 width: 100px;
 height: 45px;
 background: #f8f8f8;
 border-right: 1rpx solid #e5e5e5;
 border-bottom: 1rpx solid #e5e5e5;
 justify-content: center;
 align-items: center;
 overflow-x: auto;
}
.th:first-child {
 width: 60px;
}
.cell_label {
 font-size: 13px;
 color: #999;
}
.cell_date_label {
 font-size: 12px;
 color: #999;
}
.cell-table_main {
 display: inline-flex;
 flex-direction: row;
}
.right-item {
 display: flex;
 flex-direction: row;
}
.td {
 display: flex;
 flex-direction: column;
 width: 100px;
 height: 45px;
 background: white;
 justify-content: center;
 align-items: center;
 border: 1rpx solid #e5e5e5;
 border-top: 0;
 border-left: 0;
}
.td:first-child {
 width: 60px;
}
.cell-table_empty {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 45px;
 font-size: 15px;
 color: rgba(55, 134, 244, 1);
 width: 100%;
 word-break: normal;
}
.cell-table_choose {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 45px;
 font-size: 15px;
 background: linear-gradient(to bottom, #5acafe, #45a1fc);
 color: white;
 width: 100%;
 word-break: normal;
}

效果:

希望本文所述对大家微信小程序开发有所帮助。

(0)

相关推荐

  • 微信小程序使用picker实现时间和日期选择框功能【附源码下载】

    本文实例讲述了微信小程序使用picker实现时间和日期选择框功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <picker value="{{picker1Value}}" range="{{picker1Range}}" bindchange="normalPickerBindchange"> 当前城市选择:{{picker1Range[picker1Value]}} </pick

  • 微信小程序的日期选择器的实例详解

    微信小程序的日期选择器的实例详解 前言: 关于微信小程序中的日期选择器大家用过都会发现有个很大的问题,就是在2月的时候会有31天,没有进行对闰年的判断等各种情况.看了官方文档提供的源码后进行了一些修改,测试修复了上面所说的bug! 下面源码: <!---js---> const date = new Date();//获取系统日期 const years = [] const months = [] const days = [] const bigMonth = [1,3,5,7,8,10,

  • 微信小程序日期选择器实例代码

    /* JS代码部分 */ 3 const date = new Date() const years = [] const months = [] const days = [] const hours = [] const minutes = [] var thisMon = date.getMonth(); var thisDay = date.getDate(); for (let i = 2017; i <= date.getFullYear() + 1; i++) { years.pu

  • 微信小程序时间戳转日期的详解

    正文: // util.js //时间戳转换成日期时间 function js_date_time(unixtime) { var dateTime = new Date(parseInt(unixtime) * 1000) var year = dateTime.getFullYear(); var month = dateTime.getMonth() + 1; var day = dateTime.getDate(); var hour = dateTime.getHours(); var

  • 微信小程序日历/日期选择插件使用方法详解

    微信小程序日历选择器插件点击日历日期可以获取到年月日,具体内容如下 wxml <view class="canlendarBgView"> <view class="canlendarView"> <view class="canlendarTopView"> <view class="leftBgView" bindtap="handleCalendar" dat

  • 微信小程序之picker日期和时间选择器

    下面来介绍小picker,分三种样式: 默认的自己可以定义数据的 mode="time"是时间选择器 mode="date"是日期选择器 跟其他的一样先来看下picker.wxml <view class="page"> <view class="page__hd"> <text class="page__title">picker</text> <te

  • 微信小程序 滚动选择器(时间日期)详解及实例代码

    微信小程序  滚动选择器(时间日期)详解 微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <

  • 微信小程序中时间戳和日期的相互转换问题

    在微信开发小程序时,后台传入的诗句可能是 时间戳 而不是日期或者需要把日期转换成时间戳来做出相应的处理时我们将用到时间戳和日期的相互转换微信小程序里,时间戳转化为日期格式,支持自定义.拷贝至项目utils/utils.js中,并注意在js中声明下: module.exports = { formatTime: formatTime, // 日期转时间戳 formatTimeTwo: formatTimeTwo // 时间戳转日期 } utils/utils.js 里面写函数 function f

  • 微信小程序日期时间选择器使用方法

    本文实例为大家分享了精确到秒的微信小程序日期时间选择器,供大家参考,具体内容如下 效果图 实现原理 利用微信小程序的picker组件的多列选择器实现! WXML <view class="tui-picker-content"> <view class="tui-picker-name">时间选择器(选择时分)</view> <picker mode="time" value="{{time}}

  • 微信小程序 选择器(时间,日期,地区)实例详解

    微信小程序 选择器(时间,日期,地区) 微信小程序 开发由于本人最近学习微信小程序的开发,根据自己的实践结果整理了下结果,对日期选择器,时间选择器,地区选择器做的实例,有不对的地方,希望大家指正. 用微信封装好的控件感觉很好,为我们开发人员省去了很多麻烦.弊端就是不能做大量的自定义.今天试用了选择器. 上gif: 上代码: 1.index.js //index.js //获取应用实例 var app = getApp() Page({ data: { date: '2016-11-08', ti

随机推荐