新增预约页面

src/boot/axios.js

@@ -8,7 +8,9 @@ import { VTable, VPagination } from 'vue-easytable'
 import commonUtils from '../pages/financial/utils/commonUtils'
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
-import AuthCode from '../pages/financial/utils/AuthCode'   //权限编码JS
+import AuthCode from '../pages/financial/utils/AuthCode'
+import Plugin from '@quasar/quasar-ui-qcalendar'
+import '@quasar/quasar-ui-qcalendar/dist/index.css'  //权限编码JS
 Vue.http = Vue.prototype.$http = axios
 Vue.commonUtils = Vue.prototype.$commonUtils = commonUtils
 Vue.AuthCode = Vue.prototype.$AuthCode = AuthCode
@@ -37,5 +39,6 @@ Vue.use(Erpindex)
 Vue.use(Viewer);
 Vue.component(VTable.name, VTable)
 Vue.component(VPagination.name, VPagination)
+Vue.use(Plugin)
 
 Vue.prototype.$axios = axios

src/pages/studyAbroad/subscribe.vue

+<template>
+  <div class="full-height">
+    <div class="title-bar row items-center overflow-hidden">
+      <q-btn
+        flat
+        color="white"
+        icon="iconfont icon-line-arrow-left"
+        class="direction-button"
+        style="height: 100%"
+        @click="onPrev"
+      />
+      <transition :name="transition" appear>
+        <div
+          :key="parsedStart.date"
+          class="row justify-between items-center text-white overflow-hidden"
+          style="width: calc(100% - 112px)"
+        >
+          <div
+            v-for="day in days"
+            :key="day.date"
+            class="col-auto"
+            :style="dayStyle"
+          >
+            <q-btn
+              flat
+              :class="dayClass(day)"
+              style="line-height: unset;"
+              class="column"
+              @click="
+                selectedDate = day.date;
+                transition = '';
+              "
+            >
+              <div class="column">
+                <div class="text-center" style="width: 100%;">
+                  {{ monthFormatter(day, true) }}
+                </div>
+                <div
+                  class="text-center text-bold"
+                  style="width: 100%;  font-size: 16px;"
+                >
+                  {{ dayFormatter(day, false) }}
+                </div>
+                <div class="text-center" style="width: 100%; font-size: 10px;">
+                  {{ weekdayFormatter(day, true) }}
+                </div>
+              </div>
+            </q-btn>
+          </div>
+        </div>
+      </transition>
+      <q-btn
+        flat
+        color="white"
+        icon="iconfont icon-arrow-right"
+        class="direction-button"
+        style="height: 100%"
+        @click="onNext"
+      />
+    </div>
+    <div style="height: calc(100% - 70px);border-top: none;overflow:hidden">
+      <q-calendar
+        v-model="selectedDate"
+        view="day"
+        hide-header
+        bordered
+        hour24-format
+        :interval-start="8"
+        :interval-count="15"
+        :interval-height="60"
+        animated
+        style="height: 100%; border-top: none;"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import QCalendar from "@quasar/quasar-ui-qcalendar"; // ui is aliased from '@quasar/quasar-ui-qcalendar'
+import "@quasar/quasar-ui-qcalendar/dist/index.css";
+const CURRENT_DAY = new Date();
+
+function getCurrentDay(day) {
+  const newDay = new Date(CURRENT_DAY);
+  newDay.setDate(day);
+  const tm = QCalendar.parseDate(newDay);
+
+  return tm.date;
+}
+
+export default {
+  data() {
+    return {
+      selectedDate: getCurrentDay(CURRENT_DAY.getDate()),
+      weekdays: [1, 2, 3, 4, 5, 6, 0],
+      locale: "en-us",
+      monthFormatter: this.monthFormatterFunc(),
+      dayFormatter: this.dayFormatterFunc(),
+      weekdayFormatter: this.weekdayFormatterFunc(),
+      transitionPrev: "slide-right",
+      transitionNext: "slide-left",
+      transition: ""
+    };
+  },
+
+  beforeMounted() {},
+
+  computed: {
+    weekdaySkips() {
+      return QCalendar.getWeekdaySkips(this.weekdays);
+    },
+
+    parsedStart() {
+      if (this.selectedDate) {
+        return QCalendar.getStartOfWeek(
+          QCalendar.parseTimestamp(this.selectedDate),
+          this.weekdays,
+          this.today
+        );
+      }
+      return undefined;
+    },
+
+    parsedEnd() {
+      if (this.selectedDate) {
+        return QCalendar.getEndOfWeek(
+          QCalendar.parseTimestamp(this.selectedDate),
+          this.weekdays,
+          this.today
+        );
+      }
+      return undefined;
+    },
+
+    today() {
+      const newDay = new Date(CURRENT_DAY);
+      const tm = QCalendar.parseDate(newDay);
+      return tm;
+    },
+
+    days() {
+      if (this.parsedStart && this.parsedEnd) {
+        return QCalendar.createDayList(
+          this.parsedStart,
+          this.parsedEnd,
+          this.today,
+          this.weekdaySkips
+        );
+      }
+      return [];
+    },
+
+    dayStyle() {
+      return {
+        width: 100 / this.weekdays.length + "%"
+      };
+    }
+  },
+
+  methods: {
+    onPrev() {
+      const ts = QCalendar.addToDate(this.parsedStart, { day: -7 });
+      this.selectedDate = ts.date;
+      this.transition = "q-transition--" + this.transitionPrev;
+    },
+
+    onNext() {
+      const ts = QCalendar.addToDate(this.parsedStart, { day: 7 });
+      this.selectedDate = ts.date;
+      this.transition = "q-transition--" + this.transitionNext;
+    },
+
+    dayClass(day) {
+      return {
+        //row: true,
+        "justify-center": true,
+        "selected-date": this.selectedDate === day.date
+      };
+    },
+
+    monthFormatterFunc() {
+      const longOptions = { timeZone: "UTC", month: "long" };
+      const shortOptions = { timeZone: "UTC", month: "short" };
+
+      return QCalendar.createNativeLocaleFormatter(this.locale, (_tms, short) =>
+        short ? shortOptions : longOptions
+      );
+    },
+
+    weekdayFormatterFunc() {
+      const longOptions = { timeZone: "UTC", weekday: "long" };
+      const shortOptions = { timeZone: "UTC", weekday: "short" };
+
+      return QCalendar.createNativeLocaleFormatter(this.locale, (_tms, short) =>
+        short ? shortOptions : longOptions
+      );
+    },
+
+    dayFormatterFunc() {
+      const longOptions = { timeZone: "UTC", day: "2-digit" };
+      const shortOptions = { timeZone: "UTC", day: "numeric" };
+
+      return QCalendar.createNativeLocaleFormatter(this.locale, (_tms, short) =>
+        short ? shortOptions : longOptions
+      );
+    }
+  }
+};
+</script>
+
+<style lang="sass">
+.title-bar
+  width: 100%
+  height: 70px
+  background: #9c27b0
+  display: flex
+  flex-direction: row
+  flex: 1
+
+.direction-button
+  background: #9c27b0
+  color: white
+  z-index: 20
+
+.selected-date
+  color: #9c27b0
+  background: white
+</style>

src/router/routes.js

@@ -1597,6 +1597,11 @@ const routes = [{
       component: () =>
         import("pages/enterprise/OfficialAccounts/OfficialAccountsDetail")
     },
+    {
+      path: "/stu/subscribe", //预约课程
+      component: () =>
+        import("pages/studyAbroad/subscribe")
+    }
   ],
 
 },