commit

2025-03-25 11:23:50 +08:00
parent 5f71d519dd
commit 7084976d72
7 changed files with 149 additions and 227 deletions
@@ -11,7 +11,6 @@ layout("/mobile/platform.html"){
        align-items: center;
        color: white;
    }
-
    .day {
        background-color: #14497e;
        display: inline-block;
@@ -22,12 +21,10 @@ layout("/mobile/platform.html"){
        margin-right: 6px;
        font-size: 14px;
    }
-
    .time {
        width: 72%;
        text-align: center;
    }
-
    .state {
        width: 80px;
        height: 36px;
@@ -36,31 +33,25 @@ layout("/mobile/platform.html"){
        border-radius: 2px;
        color: #929292;
    }
-
    .container {
-        padding: 10px 0px;
+        padding: 10px 0;
        background-color: white;
        width: 95%;
        margin: 0 auto;
        border-radius: 6px;
        margin-top: 10px;
    }
-
    tr {
        line-height: 36px;
    }
-
    .van-action-sheet__content {
        padding: 10px;
        font-size: 15px;
    }
-
    .title {
-        margin: 10px 0px;
+        margin: 10px 0;
        color: grey;
    }
-
-
    .top-calendar {
        height: 70px;
        max-height: 70px;
@@ -73,14 +64,12 @@ layout("/mobile/platform.html"){
        align-items: center;
        background-color: #0e78c5;
    }
-
    .calendar-left {
        width: calc(100% - 20px);
        overflow-x: auto;
        display: flex;
        height: 90%;
    }
-
    .calendar-left-day {
        min-width: 65px;
        height: 100%;
@@ -90,20 +79,17 @@ layout("/mobile/platform.html"){
        justify-content: center;
        align-items: center;
        color: #FFF;
+        border-radius: 10px;
    }
-
    .left-day-active {
        background-color: #0000cc;
    }
-
-    .day-info-month {
-
+    .left-day-disabled {
+        background-color: lightgrey;
    }
-
    .day-info-week {
        margin-bottom: 5px;
    }
-
    .calendar-right {
        width: 30px;
        max-width: 30px;
@@ -115,19 +101,21 @@ layout("/mobile/platform.html"){
        justify-content: center;
        margin-left: 5px;
    }
-
    .top_pop .van-popup {
        top: 46px;
    }
-
    .van-action-sheet {
        max-height: 90%;
    }
+    .van-empty {
+        position: revert;
+        transform: none;
+        top: 0;
+        left: 0;
+    }
 </style>

 <div id="app" v-cloak>
-
-    <!--top栏-->
    <van-nav-bar
            :title="site.name"
            left-arrow
@@ -139,39 +127,39 @@ layout("/mobile/platform.html"){

    <div class="top-calendar">
        <div class="calendar-left">
-            <div class="calendar-left-day" :class="moment(item).unix() == selectDate.unix() ? 'left-day-active':''"
+            <div
+                 :class="getDayClass(item)"
                 @click="dayClick(item)"
                 v-for="item in weekList">
                <div class="day-info-week">
-                    {{getWeekTextByDate(item)}}
+                    {{getWeekTextByDate(item.day)}}
                </div>
                <div class="day-info-month">
-                    {{moment(item).format('MM-DD')}}
+                    {{moment(item.day).format('MM-DD')}}
                </div>
            </div>
        </div>
        <div class="calendar-right">
            <van-icon size="16" color="white" name="arrow-down" @click="calendarVisible=true"></van-icon>
            <van-calendar class="top_pop" v-model="calendarVisible" color="#246fb4" position="top" @confirm="onConfirm"
-                          :default-date="selectDate.toDate()"
+                          :default-date="selectDate?.toDate()"
                          :formatter="calendarFormatter"
                          title="选择开始日期"></van-calendar>
        </div>
    </div>

    <div class="container">
-        <table>
+        <table v-if="weekList.find(o => o.day === selectDate)?.disabled === false">
            <tr v-for="item in timeData">
                <td class="time">{{item.start_time + '-' + item.end_time}}</td>
-
                <td>
                    <div v-if="isCanRe(item)===3" class="state" style="background-color: #0e78c5;color: #fff3f3">
                        已预约
                    </div>
-                    <div v-if="isCanRe(item) === 2" class="state" style="background-color: #fff4f2; color: #cc5a45">约满
+                    <div v-if="isCanRe(item) === 2" class="state" style="background-color: #fff4f2; color: #cc5a45">
+                        约满
                    </div>
-                    <div @click="chooseTime(item)" v-if="isCanRe(item) === 1" class="state"
-                         style="background-color: #e8ffef; color: #52986a">
+                    <div @click="chooseTime(item)" v-if="isCanRe(item) === 1" class="state" style="background-color: #e8ffef; color: #52986a">
                        <span v-if="!times.map(o => o.fullDay).includes(selectDate.format('YYYY-MM-DD') + ' ' + item.start_time + '-' + item.end_time)">可预约</span>
                        <span v-else>
                            <van-icon name="passed" size="26" style="line-height: 36px;position: unset"></van-icon>
@@ -179,9 +167,9 @@ layout("/mobile/platform.html"){
                    </div>
                    <div v-if="isCanRe(item) === 0" class="state">已过期</div>
                </td>
-
            </tr>
        </table>
+        <van-empty v-else image="error" :description="moment(selectDate).format('YYYY-MM-DD') + '不能预约'"></van-empty>
    </div>

    <div style="position: fixed; bottom: 0; width: 100%">
@@ -203,17 +191,6 @@ layout("/mobile/platform.html"){
            </div>
        </van-cell>
        <van-cell title="预约地点">{{site.name}}</van-cell>
-
-        <!--<van-field
-                v-model="joinUser"
-                rows="2"
-                autosize
-                label="参加人员"
-                type="textarea"
-                maxlength="50"
-                placeholder="请输入参加人员"
-                show-word-limit
-        ></van-field>-->
        <van-field
                v-model="message"
                rows="4"
@@ -236,16 +213,12 @@ layout("/mobile/platform.html"){

 <script>
    moment.locale('zh_cn');
-
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURI(r[2]);
        return null;
    }
-
-    <!--# include("/platform/activity/includeJs/activityUtil.js"){} #-->
-    const siteTypeUtil = new typeUtil()
    const vue = new Vue({
        el: '#app',
        mixins: [mobileMixins],
@@ -304,6 +277,15 @@ layout("/mobile/platform.html"){
            }
        },
        methods: {
+            getDayClass(row) {
+                let classStr = 'calendar-left-day'
+                if(row.disabled) {
+                    classStr += ' left-day-disabled'
+                } else {
+                    classStr += moment(row.day).unix() === this.selectDate.unix() ? ' left-day-active' : ''
+                }
+                return classStr
+            },
            close(f) {
                if (this.times.length === 1) {
                    vant.Toast('必须保留一个时间段')
@@ -317,35 +299,27 @@ layout("/mobile/platform.html"){
                this.setWeekList(this.selectDate)
                this.calendarVisible = false
            },
-            //这里要排除掉休息日
            setWeekList(startDate) {
                const wk = []
-                let d = null
-                do {
-                    d = moment(startDate).day()
-                    if(!this.site.openWeekTime.includes(d)) {
-                        startDate = moment(startDate).add(1, 'd')
-                    }
-                } while (!this.site.openWeekTime.includes(d))
-                wk.push(moment(startDate))
-                let count = 1
+                let count = 0
                while (wk.length < 7) {
                    const addDate = moment(startDate).add(count, 'd')
-                    const nextDay = addDate.day()
-                    //这里不是休息日才能加到数组里
-                    /*if (addDate.day() !== 0 && addDate.day() !== 6 && !this.holidays.includes(moment(addDate).format('YYYY-MM-DD'))) {
-                        wk.push(addDate)
-                    }*/
-                    if(this.site.openWeekTime.includes(nextDay)) {
-                        wk.push(addDate)
-                    }
+                    const addDateFormat = moment(addDate).format('YYYY-MM-DD')
+                    wk.push({
+                        day: addDate,
+                        disabled: !this.site.openWeekTime.includes(addDate.day()) || this.site.notApplyTimeList.includes(addDateFormat)
+                    })
                    count++
                }
                this.weekList = wk
            },
-            dayClick(date) {
-                this.selectDate = date
-                this.getReserve()
+            dayClick(item) {
+                this.selectDate = item.day
+                if(item.disabled) {
+                    this.$toast(moment(item.day).format('YYYY-MM-DD') + '不可预约')
+                } else {
+                    this.getReserve()
+                }
            },
            reserve() {
                if (this.times.length === 0) {
@@ -390,13 +364,10 @@ layout("/mobile/platform.html"){
            isCanRe(item) {
                const now = new Date()
                const end = moment().format('YYYY-MM-DD') + ' ' + item.end_time + ':00'
-
                const itemFullTime = this.selectDate.format('YYYY-MM-DD') + " " + item.start_time + "-" + item.end_time
-
                if (this.alreadyReserveRecord.includes(itemFullTime)) {
                    return 3
                }
-
                if (now.getTime() >= new Date(end).getTime() && this.selectDate.format('YYYY-MM-DD') === moment().format('YYYY-MM-DD')) {
                    return 0
                } else {
@@ -407,7 +378,6 @@ layout("/mobile/platform.html"){
                    }
                }
            },
-
            async onLoad() {
                this.loading = true
                const resp = await $.post('/mobile/activity/site/info/getDetail', {id: this.site_id})
@@ -436,28 +406,18 @@ layout("/mobile/platform.html"){
                    this.alreadyReserveRecord = resp.data.map(v => v.reserve_day + " " + v.start_time + "-" + v.end_time)
                }
            },
-            //获取最新的一个工作日设为当前时间
            getLatestWorkDay() {
-                /*const weekNum = moment().day()
-                let selectDate = null
-                if (weekNum === 0) {
-                    //周日
-                    selectDate = moment().add(1, 'd')
-                } else if (weekNum === 6) {
-                    //周六
-                    selectDate = moment().add(2, 'd')
-                } else {
-                    selectDate = moment()
-                }*/
-                let today = moment().format('YYYY-MM-DD')
-                let d
-                do {
-                    d = moment(today).day()
-                    if(!this.site.openWeekTime.includes(d)) {
-                        today = moment(today).add(1, 'd')
+                let selectDate = moment()
+                if(this.site.workday === true) {
+                    if (selectDate.day() === 0) {
+                        //周日
+                        selectDate = moment().add(1, 'd')
+                    } else if (selectDate.day() === 6) {
+                        //周六
+                        selectDate = moment().add(2, 'd')
                    }
-                } while (!this.site.openWeekTime.includes(d))
-                return today
+                }
+                return selectDate
            }
        },
        async created() {