add api

src/js/api.js

@@ -30,6 +30,7 @@ export const API = {
   // 我的时间
   getCoachTimeList: `${ORIGIN}/stadium/coach/getCoachTimeList`,  // 场地列表
   saveCoachTimeStatus: `${ORIGIN}/stadium/coach/saveCoachTimeStatus`,  // 小程序-教练时间状态修改-我的时间
+  setCoachTimes: `${ORIGIN}/stadium/coach/setCoachTimes`,  // 小程序-我的时间-批量设置
 
 }
 

src/pages/time/_config/_config.vue

@@ -4,36 +4,36 @@
         <view class="c-item">
             <view class="i-tit">选择日期范围</view>
             <view class="i-select">
-                <picker class="s-picker">
+                <picker class="s-picker" mode="date" @change="startDateChange">
                     <view class="p-view">
-                        <input value="2020年5月16日" />
-                        <image></image>
+                        <input v-model="date.start" disabled />
+                        <image mode="aspectFit" src="/static/images/triangle_c33.png"></image>
                     </view>
                 </picker>
                 <view>-</view>
-                <picker class="s-picker">
+                <picker class="s-picker" mode="date" @change="endDateChange">
                     <view class="p-view">
-                        <input value="2020年5月16日" />
-                        <image></image>
+                        <input v-model="date.end" disabled />
+                        <image mode="aspectFit" src="/static/images/triangle_c33.png"></image>
                     </view>
                 </picker>
             </view>
         </view>
 
         <view class="c-item">
-            <view class="i-tit">选择日期范围</view>
+            <view class="i-tit">选择时间范围</view>
             <view class="i-select">
-                <picker class="s-picker">
+                <picker class="s-picker" mode="time" @change="startTimeChange">
                     <view class="p-view">
-                        <input value="2020年5月16日" />
-                        <image></image>
+                        <input v-model="time.start" disabled />
+                        <image mode="aspectFit" src="/static/images/triangle_c33.png"></image>
                     </view>
                 </picker>
                 <view>-</view>
-                <picker class="s-picker">
+                <picker class="s-picker" mode="time" @change="endTimeChange">
                     <view class="p-view">
-                        <input value="2020年5月16日" />
-                        <image></image>
+                        <input v-model="time.end" disabled />
+                        <image mode="aspectFit" src="/static/images/triangle_c33.png"></image>
                     </view>
                 </picker>
             </view>
@@ -42,10 +42,10 @@
         <view class="c-item">
             <view class="i-tit">状态</view>
             <view class="i-select">
-                <picker class="s-picker">
+                <picker class="s-picker" mode="selector" :range="statusList" range-key="name" @change="statusPickerChange">
                     <view class="p-view">
-                        <input value="空闲" />
-                        <image></image>
+                        <input :value="statusList[changeStatusIDX].name" disabled />
+                        <image mode="aspectFit" src="/static/images/triangle_c33.png"></image>
                     </view>
                 </picker>
             </view>
@@ -53,16 +53,97 @@
 
         <view class="c-remarks">
             <view class="r-tit">备注</view>
-            <view class="r-frame"><textarea></textarea></view>
+            <view class="r-frame"><textarea v-model="remarkText"></textarea></view>
         </view>
 
-        <view class="fixed-bot-btn"><view hover-class="hover-active">保存</view></view>
+        <view class="fixed-bot-btn"><view hover-class="hover-active" @click="saveBtn">保存</view></view>
     </view>
 </template>
 
 <script>
+import { API } from '../../../js/api';
+import { servers } from '../../../js/server';
+import util from '../../../utils/util';
+let statusList = [
+    {
+        id: 1,
+        name: '空闲',
+        status: 0
+    },
+    {
+        id: 2,
+        name: '不可选',
+        status: 1
+    },
+    {
+        id: 3,
+        name: '课程',
+        status: 2
+    },
+]
 export default {
-
+    data(){
+        return {
+            statusList,  // 切换状态选择列表
+            changeStatusIDX: 0,
+            remarkText: '',
+            date: {
+                start: '',
+                end: ''
+            },
+            time: {
+                start: '',
+                end: ''
+            }
+        }
+    },
+    methods:{
+        startDateChange(e){
+            this.date.start = e.detail.value;
+        },
+        endDateChange(e){
+            this.date.end = e.detail.value;
+        },
+        startTimeChange(e){
+            this.time.start = e.detail.value;
+        },
+        endTimeChange(e){
+            this.time.end = e.detail.value;
+        },
+        statusPickerChange(e){
+            this.changeStatusIDX = e.detail.value;
+        },
+        saveBtn: util.debounce(function(){
+            let { changeStatusIDX, date, time, remarkText } = this;
+            // console.warn('changeStatusIDX', changeStatusIDX)
+            // console.warn('date', date)
+            // console.warn('time', time)
+            // console.warn('remarkText', remarkText)
+            util.showNone();
+            servers.post({
+                url: API.setCoachTimes,
+                data: {
+                    start_date: date.start,
+                    end_date: date.end,
+                    start_hour: time.start,
+                    end_hour: time.end,
+                    status: statusList[changeStatusIDX].status,
+                    remark: remarkText,
+                },
+                isDefaultGet: false
+            })
+            .then(res=>{
+                util.hideLoad();
+                if(res.data.code == 0){
+                    util.showNone(res.data.message || '操作成功！');
+                    setTimeout(util.routeTo, 1200);
+                }else{
+                    util.showNone(res.data.message || '操作失败！');
+                }
+            })
+            .catch(util.hideLoad)
+        }, 300, 300),
+    }
 }
 </script>
 
@@ -108,7 +189,6 @@ export default {
                         flex-shrink: 0;
                         width: 16upx;
                         height: 16upx;
-                        background-color: skyblue;
                     }
                 }
             }

src/pages/time/select/select.vue

@@ -21,13 +21,14 @@
                     <view>日期</view>
                     <view>时间</view>
                 </view>
-                <scroll-view scroll-x @scroll="dateScroll" :scroll-left="timeAreaScrollX">
+                <scroll-view scroll-x @scroll="dateScroll" :scroll-left="dateAreaScrollX">
                     <view class="d-item" v-for="(e, i) in timeList" :key="i">
-                        <view>周四</view>
+                        <view>{{get_zh_day(e.day) || '-'}}</view>
                         <view>{{e.day || '-'}}</view>
                     </view>
                 </scroll-view>
             </view>
+
             <view class="ta-time">
                 <view>
                     <view v-for="(e, i) in timeList[0].items" :key="i">{{ e.duration || '-'}}</view>
@@ -45,7 +46,7 @@
                             ]"
                             @click="timeSelect({i, j, k})"
                         >
-                            {{k.remark || ''}}
+                            <view>{{k.remark || ''}}</view>
                         </view>
                     </view>
                 </scroll-view>
@@ -58,7 +59,7 @@
                 <view>
                     <picker mode="selector" :range="statusList" range-key="name" @change="statusPickerChange">
                         <view>
-                            <input :value="statusList[changeStatusIDX].name" />
+                            <input :value="statusList[changeStatusIDX].name" disabled />
                             <image mode="aspectFit" src="/static/images/triangle_c33.png"></image>
                         </view>
                     </picker>
@@ -102,7 +103,8 @@
 import { API } from '../../../js/api';
 import { servers } from '../../../js/server';
 import util from '../../../utils/util';
-const statusList = [
+let scrollTimer = null;
+let statusList = [
     {
         id: 1,
         name: '空闲',
@@ -119,10 +121,13 @@ const statusList = [
         status: 2
     },
 ]
+
 export default {
     data(){
         return {
             timeAreaScrollX: 0, // 日期时间表滚动位置
+            dateAreaScrollX: 0, // 日期时间表滚动位置
+            scrollStatus: 0,    // 滚动区 1-> 日期 , 2-> 时间
             timeSlot: { // 顶部日期
                 start: '',
                 end: '',
@@ -162,6 +167,7 @@ export default {
 
     },
     methods: {
+        get_zh_day: util.get_zh_day,
         confiemChangeStatus: util.debounce(function(){
             let { timeList, changeRemark, changeStatusIDX } = this;
             let _selectedArr = [];
@@ -210,7 +216,10 @@ export default {
             this.changeStatusIDX = e.detail.value;
         },
         timeSelect({i, j, k}){
-            if(k.status ==1 || k.status ==2)return;
+            if(k.status ==1 || k.status ==2)return util.showModal({
+                title: '备注',
+                content: k.remark
+            });
             let _list = [...this.timeList];
             _list[i].items[j]._selectStatus = !_list[i].items[j]._selectStatus;
             this.timeList = [..._list];
@@ -222,6 +231,7 @@ export default {
             start_date,
             end_date,
         }){
+            util.showLoad();
             servers.get({
                 url: API.getCoachTimeList,
                 data: {
@@ -231,23 +241,55 @@ export default {
                 failMsg: '加载失败！'
             })
             .then(res=>{
+                util.hideLoad();
                 this.timeList = res.list || [];
                 console.warn(res)
             })
         },
         startTimeChange(e){
             this.timeSlot.start = e.detail.value;
+            this.getTimeList({
+                start_date: e.detail.value,
+                end_date: this.timeSlot.end,
+            })
+            
         },
         endTimeChange(e){
             this.timeSlot.end = e.detail.value;
+            this.getTimeList({
+                start_date: this.timeSlot.start,
+                end_date: e.detail.value,
+            })
         },
         dateScroll(e){
-            console.warn('dateScroll', e)
+            // console.warn('dateScroll', e)
+
+            
+            if(this.scrollStatus == 2)return;
             this.timeAreaScrollX = e.detail.scrollLeft;
+            this.scrollStatus = 1;
+            if(scrollTimer){
+                clearTimeout(scrollTimer);
+                scrollTimer = null;
+            }
+            scrollTimer = setTimeout(_=>{
+                this.scrollStatus = 0;
+            }, 200)
+
         },
         timeScroll(e){
-            console.warn('timeScroll', e)
-            this.timeAreaScrollX = e.detail.scrollLeft;
+            if(this.scrollStatus == 1)return;
+            // console.warn('timeScroll', e)
+            this.dateAreaScrollX = e.detail.scrollLeft;
+            this.scrollStatus = 2;
+            if(scrollTimer){
+                clearTimeout(scrollTimer);
+                scrollTimer = null;
+            }
+            scrollTimer = setTimeout(_=>{
+                this.scrollStatus = 0;
+            }, 200)
+
         },
 
     }
@@ -257,11 +299,17 @@ export default {
 <style lang="scss">
     @import "~style/public.scss";
     .time-select{
+        padding-top: 194upx;
         padding-bottom: 394upx;
         padding-bottom: calc( 394upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
         padding-bottom: calc( 394upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
     }
     .s-time-bar{
+        position: fixed;
+        left: 0;
+        top: 0upx;
+        z-index: 100;
+        width: 100%;
         height: 94upx;
         background-color: #fff;
         border-bottom: 2upx solid #D8D8D8;
@@ -297,7 +345,13 @@ export default {
     }
 
     .s-time-area{
+        
         .ta-date{
+            position: fixed;
+            left: 0;
+            top: 94upx;
+            width: 100%;
+            z-index: 100;
             display: flex;
             justify-content: space-between;
             border-bottom: 2upx solid #D8D8D8;
@@ -384,9 +438,12 @@ export default {
                         padding: 0 18upx;
                         @include centerFlex(center);
                         >view{
+                            width: 150upx;
                             font-size: 24upx;
                             line-height: 34upx;
-                            @include textHide(2);
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
                         }
                         &.selected{
                             background-color: #c1dfdc;