本文实例讲述了微信小程序实现的日期午别医生排班表功能。分享给大家供大家参考,具体如下:
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
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
3.wxml
{{item.weekName}} {{item.date_text}} {{item.NoonName}} {{trade.count+"/"+trade.total}}
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; }
效果:
希望本文所述对大家微信小程序开发有所帮助。