日历优化

dist/css/HelpCenter~PeriodExchange.9e67b300.css → dist/css/HelpCenter.3ecd55c1.css

@@ -1 +1 @@
-.mheader[data-v-61d0e2e4]{height:.44rem;overflow:hidden}.m-nav-header[data-v-61d0e2e4]{position:absolute;left:0;top:0;width:100%;height:.44rem;line-height:.44rem;background-color:#14928a;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#fff}.m-nav-header.fixed[data-v-61d0e2e4]{position:fixed;z-index:99}.m-nav-header .m-nav-bar__title[data-v-61d0e2e4]{max-width:60%;margin:0 auto;color:#fff;font-weight:500;font-size:.16rem}.m-nav-header .m-nav-bar__left[data-v-61d0e2e4],.m-nav-header .m-nav-bar__right[data-v-61d0e2e4]{position:absolute;bottom:0}.m-nav-header .m-nav-bar__left[data-v-61d0e2e4]{left:.12rem}.m-nav-header .m-nav-bar__left .arrow-left[data-v-61d0e2e4]{font-size:.21rem;vertical-align:middle}.m-nav-header .m-nav-bar__right[data-v-61d0e2e4]{right:.12rem}.icon[data-v-67669af7]{width:2rem;height:2rem;margin:.5rem auto .05rem}.icon_nodata[data-v-67669af7]{background:url(../img/icon_nodata.81c87d57.png) no-repeat 50%;background-size:contain}.msg[data-v-67669af7]{color:#aaa;font-size:.16rem;text-align:center;line-height:.22rem}
+.mheader[data-v-61d0e2e4]{height:.44rem;overflow:hidden}.m-nav-header[data-v-61d0e2e4]{position:absolute;left:0;top:0;width:100%;height:.44rem;line-height:.44rem;background-color:#14928a;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#fff}.m-nav-header.fixed[data-v-61d0e2e4]{position:fixed;z-index:99}.m-nav-header .m-nav-bar__title[data-v-61d0e2e4]{max-width:60%;margin:0 auto;color:#fff;font-weight:500;font-size:.16rem}.m-nav-header .m-nav-bar__left[data-v-61d0e2e4],.m-nav-header .m-nav-bar__right[data-v-61d0e2e4]{position:absolute;bottom:0}.m-nav-header .m-nav-bar__left[data-v-61d0e2e4]{left:.12rem}.m-nav-header .m-nav-bar__left .arrow-left[data-v-61d0e2e4]{font-size:.21rem;vertical-align:middle}.m-nav-header .m-nav-bar__right[data-v-61d0e2e4]{right:.12rem}.icon[data-v-67669af7]{width:2rem;height:2rem;margin:.5rem auto .05rem}.icon_nodata[data-v-67669af7]{background:url(../img/icon_nodata.81c87d57.png) no-repeat 50%;background-size:contain}.msg[data-v-67669af7]{color:#aaa;font-size:.16rem;text-align:center;line-height:.22rem}.help[data-v-444735df]{min-height:100vh}[data-v-444735df] .van-collapse{margin:.15rem 0}[data-v-444735df] .van-collapse /deep/ .van-cell{color:#1a1a1a;font-size:.17rem;padding:.15rem .16rem}[data-v-444735df] .van-collapse /deep/ .van-collapse-item__content{font-size:.14rem;color:grey}

dist/css/HelpCenter.c87cfe00.css

@@ -1 +0,0 @@
-.help[data-v-444735df]{min-height:100vh}[data-v-444735df] .van-collapse{margin:.15rem 0}[data-v-444735df] .van-collapse /deep/ .van-cell{color:#1a1a1a;font-size:.17rem;padding:.15rem .16rem}[data-v-444735df] .van-collapse /deep/ .van-collapse-item__content{font-size:.14rem;color:grey}

dist/css/PeriodAdjust.3e7753b3.css

@@ -1 +0,0 @@
-.periodadjust[data-v-703dd228]{height:100vh;position:relative;background-color:#f3f4f8}.periodadjust .container[data-v-703dd228]{min-height:calc(100vh - .5rem);overflow-y:auto;overflow-x:hidden;position:relative}.periodadjust .button-group[data-v-703dd228]{width:100%}.periodadjust .button-group .van-button[data-v-703dd228]{font-size:.16rem;width:50%;height:.5rem;line-height:.48rem}.periodadjust .button-group .van-button--primary[data-v-703dd228]{background:#14928a;border-color:#14928a}[data-v-703dd228] .van-icon-underway-o{font-size:.18rem}[data-v-703dd228] .van-cell{line-height:inherit}[data-v-703dd228] .van-cell__title{font-size:.16rem;color:#444}[data-v-703dd228] .van-cell-group{margin-top:.05rem}.title-content[data-v-703dd228]{-webkit-box-flex:1;-ms-flex:1 auto;flex:1 auto;font-weight:700}.title-content .van-cell__label[data-v-703dd228]{font-weight:400;margin-top:.06rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.title-content .van-icon-location[data-v-703dd228]{margin-right:.05rem}[data-v-703dd228] .van-cell__label,[data-v-703dd228] .van-cell__value{color:#444;font-size:.14rem}[data-v-703dd228] .van-cell__label span,[data-v-703dd228] .van-cell__value span{padding-right:.1rem}.input-cell[data-v-703dd228]{padding:.12rem .16rem .2rem}.input-cell .van-radio[data-v-703dd228]{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}[data-v-703dd228] .van-radio__icon--disabled .van-icon{border-color:transparent;background:#fff}[data-v-703dd228] .van-radio__icon--checked .van-icon{background:#f97215;border-color:#f97215}[data-v-703dd228] .icon{margin-top:.3rem}

dist/css/PeriodAdjust.4b1e312e.css

@@ -0,0 +1 @@
+.periodadjust[data-v-b1192890]{height:100vh;position:relative;background-color:#f3f4f8}.periodadjust .container[data-v-b1192890]{min-height:calc(100vh - .5rem);overflow-y:auto;overflow-x:hidden;position:relative}.periodadjust .button-group[data-v-b1192890]{width:100%}.periodadjust .button-group .van-button[data-v-b1192890]{font-size:.16rem;width:50%;height:.5rem;line-height:.48rem}.periodadjust .button-group .van-button--primary[data-v-b1192890]{background:#14928a;border-color:#14928a}[data-v-b1192890] .van-icon-underway-o{font-size:.18rem}[data-v-b1192890] .van-cell{line-height:inherit}[data-v-b1192890] .van-cell__title{font-size:.16rem;color:#444}[data-v-b1192890] .van-cell-group{margin-top:.05rem}.title-content[data-v-b1192890]{-webkit-box-flex:1;-ms-flex:1 auto;flex:1 auto;font-weight:700}.title-content .van-cell__label[data-v-b1192890]{font-weight:400;margin-top:.06rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.title-content .van-icon-location[data-v-b1192890]{margin-right:.05rem}.value-content[data-v-b1192890]{width:50px}[data-v-b1192890] .van-cell__label,[data-v-b1192890] .van-cell__value{color:#444;font-size:.14rem;-webkit-box-flex:1;-ms-flex:1 auto;flex:1 auto}[data-v-b1192890] .van-cell__label span,[data-v-b1192890] .van-cell__value span{padding-right:.1rem}.input-cell[data-v-b1192890]{padding:.12rem .16rem .2rem}.input-cell .van-radio[data-v-b1192890]{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}[data-v-b1192890] .van-radio__icon--disabled .van-icon{border-color:transparent;background:#fff}[data-v-b1192890] .van-radio__icon--checked .van-icon{background:#f97215;border-color:#f97215}[data-v-b1192890] .icon{margin-top:.3rem}

package-lock.json

@@ -3667,6 +3667,11 @@
       "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=",
       "dev": true
     },
+    "dayjs": {
+      "version": "1.8.31",
+      "resolved": "https://registry.npm.taobao.org/dayjs/download/dayjs-1.8.31.tgz",
+      "integrity": "sha1-DNERTCU53VrZQovgw4321LtAudM="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/de-indent/download/de-indent-1.0.2.tgz",

package.json

@@ -13,6 +13,7 @@
     "caniuse": "^0.1.3",
     "caniuse-lite": "^1.0.30001035",
     "core-js": "^2.6.5",
+    "dayjs": "^1.8.31",
     "es6-promise": "^4.2.8",
     "install": "^0.13.0",
     "qs": "^6.8.0",

src/components/MCalendar.vue

@@ -17,9 +17,7 @@
             <span>日</span>
         </div>
 
-        <swiper :options="swiperOption" ref="mySwiper" 
-                @slideChangeTransitionEnd="slideChangeTransitionEnd"
-                style="height: auto">
+        <swiper :options="swiperOption" ref="mySwiper" @slideChangeTransitionEnd="slideChangeTransitionEnd" style="height: auto">
             <swiper-slide v-for="(day, current) in daySet" :key="current">
                 <div class="tr">
                     <template v-for="(i, index) in day">
@@ -39,6 +37,7 @@
 <script>
 import 'swiper/dist/css/swiper.css'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import dayjs from 'dayjs'
 export default {
     name: 'calendar',
     components: { swiper, swiperSlide },
@@ -49,6 +48,12 @@ export default {
                 return []
             }
         },
+        dayList: { // 当月哪天有数据
+            type: Array,
+            default() {
+                return []
+            }
+        },
         type: {
             type: String,
             default: 'default' // small 一排日历
@@ -57,25 +62,26 @@ export default {
     data() {
         return {
             calendarType: this.type, // 日历类型
+            dayDateList: [],
             swiperOption: {
                 autoHeight: true,
                 initialSlide: 13,
-                // loop:false,  
-                // mode: 'horizontal',  
-                // freeMode:false,  
-                // touchRatio:0.5,  
-                // longSwipesRatio:0.1,  
-                // threshold:50,  
-                // followFinger:false,  
+                // loop:false,
+                // mode: 'horizontal',
+                // freeMode:false,
+                // touchRatio:0.5,
+                // longSwipesRatio:0.1,
+                // threshold:50,
+                // followFinger:false,
                 centeredSlides: true,
-                observer: true,//修改swiper自己或子元素时，自动初始化swiper  
-                observeParents: true,//修改swiper的父元素时，自动初始化swiper  
+                observer: true,//修改swiper自己或子元素时，自动初始化swiper
+                observeParents: true,//修改swiper的父元素时，自动初始化swiper
                 // effect : 'coverflow',
             },
             OS: Object.prototype.toString,
             // 一周的第一天
             // 0表示周日，依次类推
-            startWeek: 1, 
+            startWeek: 1,
             daySet: [], // 月数据
             curDays: {
                 year: new Date().getFullYear(),
@@ -133,7 +139,7 @@ export default {
             return this.getSiblingsMonth(y, m, n || 1)
         },
         getListMonth() { // 获取14个月的数据
-            this.daySet = [] // 
+            this.daySet = [] //
             // 生成前12个月的数据
             for(let i = 12; i >= -2; i--) {
                 this.daySet.push(this.getDaysSet(new Date(this.curDays.year, this.curDays.month - (i + 2))))
@@ -156,7 +162,7 @@ export default {
                     tDisabled = 1
                 }
             }
-            let noCheck = false // 是否可以选中
+            let noCheck = true // 是否可以选中
             // if(this.dataList.length > 0) {
             //     this.dataList.forEach(item => {
             //         if(item == d) {
@@ -198,7 +204,6 @@ export default {
             // 上月最后几天
             for(let p = prevDaysNum - prevDiff + 1; p <= prevDaysNum; p++, count++) {
                 days.push(this.getDayItem(prevM.y, prevM.m, p, PREV_FLAG))
-                
             }
             // 本月天数
             for(let c = 1; c <= daysNum; c++, count++) {
@@ -267,6 +272,8 @@ export default {
             if(swiper.isEnd) {
                 this.daySet.push(this.getDaysSet(new Date(this.curDays.year, this.curDays.month)))
             }
+
+            this.$emit('onChangeMonth', checkDate)
         },
         slidePrev() { // 上一页
             this.swiper.slidePrev()
@@ -389,7 +396,19 @@ export default {
         }
     },
     watch: {
-        
+        dayList(value) {
+            this.dayDateList = value
+            const selectDate = this.daySet[this.swiper.activeIndex]
+            selectDate.forEach(item => {
+                if(item.disabled == 0 && item.monthType == 2) {
+                    if(value.includes(dayjs(item.nowDate).format('DD'))) {
+                        item.noCheck = false
+                    } else {
+                        item.noCheck = true
+                    }
+                }
+            })
+        }
     },
     mounted() {
         // 选择不同的日历类型

src/utils/loading.js

@@ -0,0 +1,14 @@
+import { Toast } from 'vant'
+
+// 加载
+export default function setLoading(status) {
+    if(status) {
+        Toast.loading({
+            duration: 0, // 持续展示 toast
+            forbidClick: true,
+            message: '加载中...',
+        })
+    } else {
+        Toast.clear()
+    }
+}

src/views/teacher/PeriodAdjust.vue

@@ -2,7 +2,7 @@
     <div class="periodadjust">
         <div :class="[dataShow ? 'container' : '']">
             <!-- <m-header /> -->
-            <m-calendar @onSelectDay="onSelectDay" />
+            <m-calendar @onSelectDay="onSelectDay" :dayList="getMonthDay" @onChangeMonth="onChangeMonth" />
             <van-radio-group v-if="dataShow" key="data" v-model="radioSelect">
                 <van-cell-group v-for="(item, index) in dataList" :key="index">
                     <van-cell icon="underway-o" :center="true" @click="onCheckRadio(item)">
@@ -10,7 +10,7 @@
                         <template slot="default">{{ item.signInStatus ? '已签到' : '未签到' }}</template>
                         <template slot="title">{{item.startClassTime | formatDate}}-{{item.endClassTime | formatDate}}</template>
                     </van-cell>
-                    <van-cell class="input-cell" title-class="title-content" :center="true" @click="onCheckRadio(item)">
+                    <van-cell class="input-cell" title-class="title-content" value-class="value-content" :center="true" @click="onCheckRadio(item)">
                         <template slot="default">
                             <van-radio ref="radioes" :disabled="radioDisabled" :name="item.id"></van-radio>
                         </template>
@@ -37,10 +37,12 @@
 // import MHeader from '@/components/MHeader' courseSwap
 import MCalendar from '@/components/MCalendar'
 import MEmpty from '@/components/MEmpty'
+import dayjs from 'dayjs'
 import { browser }  from '@/common/common'
-import { getCourseSchedulesWithDate, 
+import { getCourseSchedulesWithDate,
     getCourseScheduleDateByMonth,
     classStartDateAdjust } from '@/api/teacher'
+import setLoading from '@/utils/loading'
 export default {
     name: 'periodadjust',
     components: { MCalendar, MEmpty },
@@ -57,10 +59,10 @@ export default {
             dataList: [],
             dataShow: true, // 是否有数据
             radioDisabled: true, // 今天或今天之前的数据禁用
+            getMonthDay: [], // 当月有月份列表
         }
     },
     created() {
-        
     },
     mounted() {
         let params = this.$route.query
@@ -68,10 +70,10 @@ export default {
             localStorage.setItem('Authorization', decodeURI(params.Authorization))
             localStorage.setItem('userInfo', decodeURI(params.Authorization))
         }
-        // this.getCourseMonth(toDay)
         document.title = '课程调整'
         let toDay = this.getFormartDate(new Date())
         this.getCourseDate(toDay)
+        this.getCourseMonth(toDay)
     },
     methods: {
         onSelectDay(value) {
@@ -82,31 +84,46 @@ export default {
             }
             this.getCourseDate(this.getFormartDate(value))
         },
+        onChangeMonth(value) {
+            this.getCourseMonth(dayjs(value).format('YYYY-MM-DD'))
+        },
         onCheckRadio(item) { // 单选按钮选中
             if(this.radioDisabled) return
             this.radioSelect = item.id
             this.radioSelectList = item
         },
-        getCourseMonth(month) {
-            getCourseScheduleDateByMonth({ month: month, type: 'VIP' }).then(res => {
-                let result = res.data
-                if(result.code == 200) {
-                    result.data.forEach(item => {
-                        let tempDate = new Date(item)
-                        this.getMonthDay.push(tempDate.getDate())
-                    })
-                    this.isCalendar = true
-                }
-            })
+        async getCourseMonth(month) {
+            setLoading(true)
+            try {
+                await getCourseScheduleDateByMonth({ month: month, type: 'VIP' }).then(res => {
+                    let result = res.data
+                    if(result.code == 200) {
+                        this.getMonthDay = []
+                        result.data.forEach(item => {
+                            this.getMonthDay.push(dayjs(item).format('DD'))
+                        })
+                        this.isCalendar = true
+                    }
+                })
+                setLoading(false)
+            } catch(err) {
+                setLoading(false)
+            }
         },
-        getCourseDate(date) {
-            getCourseSchedulesWithDate({ date: date, type: 'VIP' }).then(res => {
-                let result = res.data
-                if(result.code == 200 && result.data) {
-                    this.dataList = result.data.rows
-                    this.dataShow = result.data.rows.length > 0 ? true : false
-                }
-            })
+        async getCourseDate(date) {
+            setLoading(true)
+            try {
+                await getCourseSchedulesWithDate({ date: date, type: 'VIP' }).then(res => {
+                    let result = res.data
+                    if(result.code == 200 && result.data) {
+                        this.dataList = result.data.rows
+                        this.dataShow = result.data.rows.length > 0 ? true : false
+                    }
+                })
+                setLoading(false)
+            } catch(err) {
+                setLoading(false)
+            }
         },
         onSubmit() {
             if(!this.radioSelect) {
@@ -274,9 +291,13 @@ export default {
         margin-right: .05rem;
     }
 }
+.value-content {
+    width: 50px;
+}
 /deep/.van-cell__value, /deep/.van-cell__label {
     color: #444;
     font-size: .14rem;
+    flex: 1 auto;
     span {
         padding-right: .1rem;
     }