|
|
@@ -0,0 +1,137 @@
|
|
|
+<template>
|
|
|
+ <!-- <div class="canlender">
|
|
|
+ <div class="title">
|
|
|
+
|
|
|
+ <div class="left btn" @click="editMonth('sub')"></div>
|
|
|
+ <div class="date-title">{{ dateFormat }}</div>
|
|
|
+
|
|
|
+ <div class="right btn" @click="editMonth('add')"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="week-day">
|
|
|
+ <div v-for="i in weekDay">{{ i }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="date-container">
|
|
|
+ <div v-for="item in canlender">
|
|
|
+ {{ item.dateNum }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <div class="mui-content-padded vongi-cytx-time">
|
|
|
+ <ul class="mui-table-view mui-grid-view mui-grid-9">
|
|
|
+ <li v-for="i in weekDay" class="mui-table-view-cell mui-media">
|
|
|
+ <span class="color999">{{ i }}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="vongi-cytx-date vongi-center">2020年10月</div>
|
|
|
+ <ul class="mui-table-view mui-grid-view mui-grid-9">
|
|
|
+ <li v-for="item in canlender" class="mui-table-view-cell mui-media">
|
|
|
+ <a href="#" class="">
|
|
|
+ <span>{{ item.dateNum }}</span>
|
|
|
+ <div class="mui-media-body"></div>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <!-- <a href="#" class="mui-active"> -->
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ currentTimeStamp,
|
|
|
+ parseUnixTime
|
|
|
+ } from '$project/utils'
|
|
|
+ export default {
|
|
|
+ name: 'DrugCalendar',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ msg: [],
|
|
|
+ weekDay: ["日", "一", "二", "三", "四", "五", "六"],
|
|
|
+ canlenderObj: null,
|
|
|
+ canlender: [],
|
|
|
+ currentDate: new Date(),
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ //切换月
|
|
|
+ editMonth(type) {
|
|
|
+ const num = type === "sub" ? -1 : 1;
|
|
|
+ this.currentDate.setMonth(this.currentDate.getMonth() + num);
|
|
|
+ // 清空canlender日期容器
|
|
|
+ this.canlenderObj.clear();
|
|
|
+ // 重新生成canlender日期容器
|
|
|
+ this.canlenderObj.init(this.currentDate);
|
|
|
+ this.canlender = this.canlenderObj.canlender;
|
|
|
+ },
|
|
|
+ //切换日
|
|
|
+ editDate(date, type = "add", number = 1) {
|
|
|
+ const types = type === 'add' ? 1 : -1
|
|
|
+ const dates = date.getDate()
|
|
|
+ const newDate = new Date(date)
|
|
|
+ newDate.setDate(dates + number * types)
|
|
|
+ return newDate
|
|
|
+ },
|
|
|
+ //获取日
|
|
|
+ formatDate(date) {
|
|
|
+ return parseUnixTime(date, '{y}-{m}-{d}');
|
|
|
+ },
|
|
|
+ //初始化
|
|
|
+ init(date = new Date()) {
|
|
|
+ // 把当前日期定位到一号
|
|
|
+ const currentDate = new Date(date)
|
|
|
+ currentDate.setDate(1)
|
|
|
+
|
|
|
+ // 获取当前年月
|
|
|
+ this.year = currentDate.getFullYear()
|
|
|
+ this.month = currentDate.getMonth()
|
|
|
+
|
|
|
+ // 获取星期
|
|
|
+ const currentWeek = currentDate.getDay()
|
|
|
+
|
|
|
+ // 第一排放入一号的日期
|
|
|
+ this.canlender.push({
|
|
|
+ date: this.formatDate(currentDate),
|
|
|
+ dateNum: currentDate.getDate()
|
|
|
+ })
|
|
|
+
|
|
|
+ // 根据一号的日期向前补齐
|
|
|
+ for (let i = 0; i < currentWeek; i++) {
|
|
|
+ const date = this.editDate(currentDate, 'sub', i + 1)
|
|
|
+ this.canlender.unshift({
|
|
|
+ date: this.formatDate(date),
|
|
|
+ dateNum: date.getDate()
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 根据一号日期向后补齐，总共放六周日期
|
|
|
+ for (let i = 1; i < 42 - currentWeek; i++) {
|
|
|
+ const date = this.editDate(currentDate, 'add', i)
|
|
|
+ this.canlender.push({
|
|
|
+ date: this.formatDate(date),
|
|
|
+ dateNum: date.getDate()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ console.log(this.canlender)
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped src="$project/assets/css/pension.css"></style>
|
|
|
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
|
|
|
+<style scoped>
|
|
|
+ .week-day div,
|
|
|
+ .date-container div {
|
|
|
+ display: inline;
|
|
|
+ }
|
|
|
+</style>
|
