graceSchedule.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. <template>
  2. <view class="grace-schedule-wrap">
  3. <view class="grace-schedule-header grace-space-between grace-flex-vcenter">
  4. <picker class="grace-flex-center grace-flex-vcenter"
  5. mode="date" :value="currentDayIn" :start="startDate" :end="endDate" @change="selectDate">
  6. <text class="grace-schedule-header-date grace-icons">{{cYear}} 年 {{cMonthStr}} 月 &#xe603;</text>
  7. </picker>
  8. <view class="grace-schedule-today" @tap="gotoToday">返回今天</view>
  9. </view>
  10. <view class="grace-date-week">
  11. <text class="grace-date-weeks" v-for="(item, index) in weeks" :key="index">{{item}}</text>
  12. </view>
  13. <view class="grace-date-days">
  14. <block v-for="(item, index) in days" :key="index">
  15. <view class="grace-date-ditems" v-if="item != ''"
  16. :style="{background:currentDayIn == cYear+'-'+cMonthStr+'-'+ item.date ? activeBgColor : bgColor}"
  17. @click="chooseDate(cYear+'-'+cMonthStr+'-'+item.date, item.date)">
  18. <text class="grace-date-day"
  19. :class="[currentDayIn == (cYear+'-'+cMonthStr+'-'+item.date) ? 'grace-d-current-txt' : '']">{{item.date}}</text>
  20. <text class="grace-date-nl" v-if="isLunar"
  21. :class="[currentDayIn == (cYear+'-'+cMonthStr+'-'+item.date) ? 'grace-d-current-txt' : '']">{{item.nl}}</text>
  22. <view class="grace-schedule-point" v-if="item.haveSe" :style="{backgroundColor:pointColor}"></view>
  23. </view>
  24. <view class="grace-date-ditems" v-else style="background-color:none;"></view>
  25. </block>
  26. </view>
  27. <view class="grace-schedule-line"></view>
  28. <view class="grace-schedule-time-list-wrap">
  29. <view class="grace-schedule-time-list" v-for="(item, index) in hours" :key="index">
  30. <text class="grace-schedule-timer">{{item}}:00</text>
  31. <view class="grace-schedule-body">
  32. <view class="grace-schedules" v-for="(schedule, idx) in schedulesIn[index]" :key="idx"
  33. @tap="scheduleTap" :data-id="schedule.id"
  34. :style="{background:schedule.bgColor, color:schedule.color}">{{schedule.content}}</view>
  35. </view>
  36. </view>
  37. </view>
  38. </view>
  39. </template>
  40. <script>
  41. export default{
  42. data() {
  43. return {
  44. cYear : 2020,
  45. cMonth : 1,
  46. cDay : 10,
  47. cMonthStr : '01',
  48. weeks : ['一', '二', '三', '四', '五', '六', '日'],
  49. days : [],
  50. currentDayIn : '',
  51. hours : ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
  52. schedulesIn: []
  53. }
  54. },
  55. props:{
  56. // 当前默认日期
  57. currentDate : {type:String, default:""},
  58. bgColor : {type:String, default:"#F8F8F8"},
  59. activeBgColor : {type:String, default:"#3688FF"},
  60. isLunar : {type:Boolean, default:true },
  61. startDate : {type:String, default:'1950-01-01'},
  62. endDate : {type:String, default:'2050-01-01'},
  63. schedules : {type:Array, default:function () {return []}},
  64. pointColor : {type:String, default:"#FF0036"}
  65. },
  66. created:function(){
  67. this.currentDayIn = this.currentDate;
  68. this.initTime();
  69. this.getSchedulesIn();
  70. },
  71. methods:{
  72. initTime : function(){
  73. if(this.currentDayIn == ''){
  74. var dateObj = new Date();
  75. this.cYear = Number(dateObj.getFullYear());
  76. this.cMonth = Number(dateObj.getMonth() + 1);
  77. this.cMonthStr = this.cMonth < 10 ? '0' + this.cMonth : this.cMonth;
  78. this.cDay = dateObj.getDate();
  79. this.cDay = this.cDay < 10 ? '0' + this.cDay : this.cDay;
  80. this.currentDayIn = this.cYear + '-' + this.cMonthStr + '-' + this.cDay;
  81. this.changeMonth();
  82. }else{
  83. var dates = this.currentDayIn.split(' ');
  84. if (!dates[1]) { dates[1] = '';}
  85. var dayArr = dates[0].split('-');
  86. this.cYear = Number(dayArr[0]);
  87. this.cMonth = dayArr[1];
  88. this.cDay = dayArr[2];
  89. var reg = new RegExp('^0[0-9]+$');
  90. if(reg.test(this.cMonth)){this.cMonth = this.cMonth.substr(1,1);}
  91. this.cMonth = Number(this.cMonth);
  92. this.cMonthStr = this.cMonth < 10 ? '0'+this.cMonth : this.cMonth;
  93. this.currentDayIn = dates[0];
  94. this.currentTimeIn = dates[1];
  95. this.changeMonth();
  96. }
  97. },
  98. changeMonth:function(){
  99. var daysList = [];
  100. var days = this.getDaysInOneMonth();
  101. var startWeek = this.getDay();
  102. var forSteps = 0;
  103. for (var i = (0 - startWeek); i < days; i++){
  104. if(i >= 0){
  105. daysList[forSteps] = {date : i >= 9 ? i + 1 : '0' + (i+1), nl : ''};
  106. daysList[forSteps].nl = GetLunarDay(this.cYear, this.cMonth, i + 1);
  107. daysList[forSteps].haveSe = this.haveSchedule(daysList[forSteps].date);
  108. }else{
  109. daysList[forSteps] = '';
  110. }
  111. forSteps++;
  112. }
  113. this.days = daysList;
  114. },
  115. haveSchedule : function (day) {
  116. var cDay = this.cYear+'-'+this.cMonthStr+'-'+day;
  117. for(let i = 0; i < this.schedules.length; i++){
  118. if(this.schedules[i].datetime.indexOf(cDay) != -1){
  119. return true;
  120. }
  121. }
  122. return false;
  123. },
  124. getDaysInOneMonth : function (){
  125. var d = new Date(this.cYear, this.cMonth, 0);
  126. return d.getDate();
  127. },
  128. getDay : function (){
  129. var d = new Date(this.cYear, this.cMonth - 1, 0);
  130. return d.getDay();
  131. },
  132. selectDate : function(e){
  133. this.currentDayIn = e.detail.value;
  134. this.initTime();
  135. this.getSchedulesIn();
  136. this.$emit('selectDate', e.detail.value);
  137. },
  138. chooseDate: function (sedDate) {
  139. this.currentDayIn = sedDate;
  140. this.getSchedulesIn();
  141. this.$emit('chooseDate', sedDate);
  142. },
  143. getSchedulesIn : function (){
  144. var res = [];
  145. for(let i = 0; i < this.hours.length; i++){
  146. var ctime = this.currentDayIn + ' ' + this.hours[i] + ':00';
  147. res.push([]);
  148. for(let ii = 0; ii < this.schedules.length; ii++){
  149. if(this.schedules[ii].datetime == ctime){
  150. res[i].push(this.schedules[ii]);
  151. }
  152. }
  153. }
  154. this.schedulesIn = res;
  155. },
  156. scheduleTap : function (e) {
  157. var id = e.currentTarget.dataset.id;
  158. this.$emit('scheduleTap', id);
  159. },
  160. gotoToday : function(){
  161. var dateObj = new Date();
  162. this.cYear = Number(dateObj.getFullYear());
  163. this.cMonth = Number(dateObj.getMonth() + 1);
  164. this.cMonthStr = this.cMonth < 10 ? '0' + this.cMonth : this.cMonth;
  165. this.cDay = dateObj.getDate();
  166. this.cDay = this.cDay < 10 ? '0' + this.cDay : this.cDay;
  167. this.currentDayIn = this.cYear + '-' + this.cMonthStr + '-' + this.cDay;
  168. this.changeMonth();
  169. this.getSchedulesIn();
  170. this.$emit('gotoToday', this.currentDayIn);
  171. }
  172. }
  173. }
  174. var CalendarData = new Array(100);
  175. var madd = new Array(12);
  176. var tgString = "甲乙丙丁戊己庚辛壬癸";
  177. var dzString = "子丑寅卯辰巳午未申酉戌亥";
  178. var numString = "一二三四五六七八九十";
  179. var monString = "正二三四五六七八九十冬腊";
  180. var weekString = "日一二三四五六";
  181. var sx = "鼠牛虎兔龙蛇马羊猴鸡狗猪";
  182. var cYear, cMonth, cDay, TheDate;
  183. CalendarData = new Array(0xA4B, 0x5164B, 0x6A5, 0x6D4, 0x415B5, 0x2B6, 0x957, 0x2092F, 0x497, 0x60C96, 0xD4A, 0xEA5, 0x50DA9, 0x5AD, 0x2B6, 0x3126E, 0x92E, 0x7192D, 0xC95, 0xD4A, 0x61B4A, 0xB55, 0x56A, 0x4155B, 0x25D, 0x92D, 0x2192B, 0xA95, 0x71695, 0x6CA, 0xB55, 0x50AB5, 0x4DA, 0xA5B, 0x30A57, 0x52B, 0x8152A, 0xE95, 0x6AA, 0x615AA, 0xAB5, 0x4B6, 0x414AE, 0xA57, 0x526, 0x31D26, 0xD95, 0x70B55, 0x56A, 0x96D, 0x5095D, 0x4AD, 0xA4D, 0x41A4D, 0xD25, 0x81AA5, 0xB54, 0xB6A, 0x612DA, 0x95B, 0x49B, 0x41497, 0xA4B, 0xA164B, 0x6A5, 0x6D4, 0x615B4, 0xAB6, 0x957, 0x5092F, 0x497, 0x64B, 0x30D4A, 0xEA5, 0x80D65, 0x5AC, 0xAB6, 0x5126D, 0x92E, 0xC96, 0x41A95, 0xD4A, 0xDA5, 0x20B55, 0x56A, 0x7155B, 0x25D, 0x92D, 0x5192B, 0xA95, 0xB4A, 0x416AA, 0xAD5, 0x90AB5, 0x4BA, 0xA5B, 0x60A57, 0x52B, 0xA93, 0x40E95);
  184. madd[0] = 0;
  185. madd[1] = 31;
  186. madd[2] = 59;
  187. madd[3] = 90;
  188. madd[4] = 120;
  189. madd[5] = 151;
  190. madd[6] = 181;
  191. madd[7] = 212;
  192. madd[8] = 243;
  193. madd[9] = 273;
  194. madd[10] = 304;
  195. madd[11] = 334;
  196. function GetBit(m, n){return (m >> n) & 1;}
  197. //农历转换
  198. function e2c() {
  199. TheDate = (arguments.length != 3) ? new Date() : new Date(arguments[0], arguments[1], arguments[2]);
  200. var total, m, n, k;
  201. var isEnd = false;
  202. var tmp = TheDate.getYear();
  203. if (tmp < 1900) {tmp += 1900;}
  204. total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + madd[TheDate.getMonth()] + TheDate.getDate() - 38;
  205. if (TheDate.getYear() % 4 == 0 && TheDate.getMonth() > 1) {total++;}
  206. for (m = 0; ; m++) {
  207. k = (CalendarData[m] < 0xfff) ? 11 : 12;
  208. for (n = k; n >= 0; n--) {
  209. if (total <= 29 + GetBit(CalendarData[m], n)) {isEnd = true; break;}
  210. total = total - 29 - GetBit(CalendarData[m], n);
  211. }
  212. if (isEnd) break;
  213. }
  214. cYear = 1921 + m;
  215. cMonth = k - n + 1;
  216. cDay = total;
  217. if (k == 12) {
  218. if (cMonth == Math.floor(CalendarData[m] / 0x10000) + 1) {cMonth = 1 - cMonth;}
  219. if (cMonth > Math.floor(CalendarData[m] / 0x10000) + 1) {cMonth--;}
  220. }
  221. }
  222. function GetcDateString() {
  223. var tmp = "";
  224. tmp += (cDay < 11) ? "初" : ((cDay < 20) ? "十" : ((cDay < 30) ? "廿" : "三十"));
  225. if (cDay % 10 != 0 || cDay == 10) {tmp += numString.charAt((cDay - 1) % 10);}
  226. return tmp;
  227. }
  228. function GetLunarDay(solarYear, solarMonth, solarDay) {
  229. if (solarYear < 1921) {return "";}
  230. solarMonth = (parseInt(solarMonth) > 0) ? (solarMonth - 1) : 11;
  231. e2c(solarYear, solarMonth, solarDay);
  232. return GetcDateString();
  233. }
  234. </script>
  235. <style>
  236. .grace-schedule-wrap{width:702rpx; margin:0 auto;}
  237. .grace-schedule-header-date{display:block; height:100rpx; line-height:100rpx; color:#323232; font-size:32rpx; margin:0 20rpx;}
  238. .grace-date-week{width:702rpx; display:flex; flex-wrap:nowrap; flex-direction:row; justify-content:center;}
  239. .grace-date-weeks{display:block; width:100rpx; height:60rpx; font-size:26rpx; line-height:60rpx; color:#666666; text-align:center;}
  240. .grace-date-days{width:702rpx; display:flex; flex-direction:row; flex-wrap:wrap;}
  241. .grace-date-ditems{width:80rpx; height:80rpx; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:3px 10rpx; border-radius:80rpx; position:relative;}
  242. .grace-d-current-txt{color:#FFFFFF !important;}
  243. .grace-date-day{display:block; width:100%; height:38rpx; line-height:38rpx; text-align:center; font-size:28rpx;}
  244. .grace-date-nl{display:block; width:100%; height:26rpx; line-height:26rpx; color:#888888; font-size:20rpx; text-align:center;}
  245. .grace-schedule-line{height:20rpx; border-bottom:1px solid #F8F8F8;}
  246. .grace-schedule-time-list{margin-top:28rpx; display:flex; flex-direction:row; flex-wrap:nowrap;}
  247. .grace-schedule-timer{display:block; width:100rpx; font-size:22rpx; color:#999999; line-height:36rpx; flex-shrink:0;}
  248. .grace-schedule-body{width:700rpx; border-top:1px solid #F8F8F8; padding:5rpx 0; margin-top:15rpx;}
  249. .grace-schedules{padding:10rpx; line-height:30rpx; font-size:22rpx; margin-top:15rpx; border-radius:8rpx; width:auto;}
  250. .grace-schedule-time-list-wrap{padding:20rpx;}
  251. .grace-schedule-today{line-height:30rpx; height:30rpx; font-size:22rpx; color:#828282; padding:10rpx 20rpx; margin-left:30rpx; border-radius:8rpx; border:1px solid #F1F2F3;}
  252. .grace-schedule-point{width:18rpx; height:18rpx; border-radius:10rpx; background-color:#FF0036; position:absolute; right:5rpx; top:5rpx; z-index:1;}
  253. </style>