From e645c2163e06dd119abaf4fdae7cf9bbb504caa0 Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Wed, 3 Mar 2021 18:06:16 +0800
Subject: [PATCH] add api

---
 src/js/api.js                    |   1 +
 src/pages/course/task/task.vue   |  34 ++++---
 src/pages/time/select/select.vue | 195 +++++++++++++++++++++++++++++++--------
 3 files changed, 179 insertions(+), 51 deletions(-)

diff --git a/src/js/api.js b/src/js/api.js
index 1f623c7..d962e9c 100644
--- a/src/js/api.js
+++ b/src/js/api.js
@@ -29,6 +29,7 @@ export const API = {
 
   // 我的时间
   getCoachTimeList: `${ORIGIN}/stadium/coach/getCoachTimeList`,  // 场地列表
+  saveCoachTimeStatus: `${ORIGIN}/stadium/coach/saveCoachTimeStatus`,  // 小程序-教练时间状态修改-我的时间
 
 }
 
diff --git a/src/pages/course/task/task.vue b/src/pages/course/task/task.vue
index f67dd26..f090918 100644
--- a/src/pages/course/task/task.vue
+++ b/src/pages/course/task/task.vue
@@ -9,12 +9,12 @@
                     <view>{{e.date || '-'}}</view>
                     <view>完成情况: {{e.complete_member || '0'}}/{{e.total_member || '0'}}</view>
                 </view>
-                <view class="ci-content">
+                <view class="ci-content" :class="[e._isUnfold?'':'textHide']">
                     <text>{{e.description || '-'}}</text>
                 </view>
                 <view class="cc-unfold">
-                    <text>展开</text>
-                    <image mode="aspectFit" src="/static/images/arrow_c874.png"></image>
+                    <text @click="unFoldChange(i)">{{e._isUnfold?'收起':'展开'}}</text>
+                    <image :style="e._isUnfold?'transform: rotateZ(180deg);':''" @click="unFoldChange(i)" mode="aspectFit" src="/static/images/arrow_c874.png"></image>
                 </view>
                 <view class="cc-btn" hover-class="hover-active" @click="toFinish(e)">完成列表</view>
             </view>
@@ -45,15 +45,20 @@ export default {
         })
 
     },
+    onLoad(options){
+        let _query = util.jsonPar(options.query);
+        this.optionsQuery = _query;
+        this.getHomeworkList({
+            course_id: _query.course_id,
+            user_id: _query.user_id,
+            class_id: _query.class_id,
+        })
+    },
     methods: {
-        onLoad(options){
-            let _query = util.jsonPar(options.query);
-            this.optionsQuery = _query;
-            this.getHomeworkList({
-                course_id: _query.course_id,
-                user_id: _query.user_id,
-                class_id: _query.class_id,
-            })
+        unFoldChange(i){
+            let _taskList = [...this.taskList];
+            _taskList[i]._isUnfold = !_taskList[i]._isUnfold;
+            this.taskList = _taskList;
         },
         toPublish(){
             let { optionsQuery } = this;
@@ -115,7 +120,7 @@ export default {
 <style lang="scss">
     @import '~style/public.scss';
     .course-task{
-
+        
     }
     .ct-list{
         padding: 24upx;
@@ -143,8 +148,11 @@ export default {
                 font-size: 28upx;
                 line-height: 40upx;
                 color: #9a9a9d;
-                @include textHide(3);
+                &.textHide{
+                    @include textHide(3);
+                }
             }
+
             .cc-unfold{
                 margin-bottom: 34upx;
                 font-size: 28upx;
diff --git a/src/pages/time/select/select.vue b/src/pages/time/select/select.vue
index 4669c5a..f18801c 100644
--- a/src/pages/time/select/select.vue
+++ b/src/pages/time/select/select.vue
@@ -22,25 +22,61 @@
                     <view>时间</view>
                 </view>
                 <scroll-view scroll-x @scroll="dateScroll" :scroll-left="timeAreaScrollX">
-                    <view class="d-item" v-for="i in 7" :key="i">
+                    <view class="d-item" v-for="(e, i) in timeList" :key="i">
                         <view>周四</view>
-                        <view>6月11日</view>
+                        <view>{{e.day || '-'}}</view>
                     </view>
                 </scroll-view>
             </view>
             <view class="ta-time">
                 <view>
-                    <view v-for="j in 20" :key="j">10:00</view>
+                    <view v-for="(e, i) in timeList[0].items" :key="i">{{ e.duration || '-'}}</view>
                 </view>
                 <scroll-view scroll-x @scroll="timeScroll" :scroll-left="timeAreaScrollX">
-                    <view class="t-list" v-for="i in 7" :key="i">
-                        <view class="l-item" v-for="j in 20" :key="j"></view>
+                    <view class="t-list" v-for="(e, i) in timeList" :key="i">
+                        <view 
+                            class="l-item" 
+                            v-for="(k, j) in e.items" 
+                            :key="j"
+                            :class="[
+                                k.status == 1 ? 'not' : '',
+                                k.status == 2 ? 'course-order' : '',
+                                k._selectStatus? 'selected' : ''
+                            ]"
+                            @click="timeSelect({i, j, k})"
+                        >
+                            {{k.remark || ''}}
+                        </view>
                     </view>
                 </scroll-view>
             </view>
         </view>
         
-        <view class="s-tip-fixed" v-if="false">
+        <view class="s-select-fixed" v-if="isSelected">
+            <view class="ssf-item">
+                <view>改变状态:</view>
+                <view>
+                    <picker mode="selector" :range="statusList" range-key="name" @change="statusPickerChange">
+                        <view>
+                            <input :value="statusList[changeStatusIDX].name" />
+                            <image mode="aspectFit" src="/static/images/triangle_c33.png"></image>
+                        </view>
+                    </picker>
+                </view>
+            </view>
+            <view class="ssf-item">
+                <view>备注:</view>
+                <view>
+                    <input v-model="changeRemark" />
+                </view>
+            </view>
+            <view class="ssf-btns">
+                <view class="b-btn" @click="cancelSelect">取消</view>
+                <view class="b-btn" @click="confiemChangeStatus">确定</view>
+            </view>
+        </view>
+
+        <view class="s-tip-fixed" v-else>
             <view class="tf-tip">可直接点击上方白色/灰色区域切换状态。</view>
             <view class="tf-status">
                 <view>
@@ -58,29 +94,7 @@
             </view>
             <view class="tf-btn" hover-class="hover-active" @click="toConfig">快速预约时间</view>
         </view>
-        <view class="s-select-fixed" v-if="false">
-            <view class="ssf-item">
-                <view>课程次数:</view>
-                <view>
-                    <picker>
-                        <view>
-                            <input />
-                            <image mode="aspectFit" src="/static/images/triangle_c33.png"></image>
-                        </view>
-                    </picker>
-                </view>
-            </view>
-            <view class="ssf-item">
-                <view>课程次数:</view>
-                <view>
-                    <input />
-                </view>
-            </view>
-            <view class="ssf-btns">
-                <view class="b-btn">取消</view>
-                <view class="b-btn">确定</view>
-            </view>
-        </view>
+        
     </view>
 </template>
 
@@ -88,14 +102,48 @@
 import { API } from '../../../js/api';
 import { servers } from '../../../js/server';
 import util from '../../../utils/util';
+const statusList = [
+    {
+        id: 1,
+        name: '空闲',
+        status: 0
+    },
+    {
+        id: 2,
+        name: '不可选',
+        status: 1
+    },
+    {
+        id: 3,
+        name: '课程',
+        status: 2
+    },
+]
 export default {
     data(){
         return {
-            timeAreaScrollX: 0,
-            timeSlot: {
+            timeAreaScrollX: 0, // 日期时间表滚动位置
+            timeSlot: { // 顶部日期
                 start: '',
                 end: '',
+            },
+            timeList: [], // 时间列表
+            statusList,  // 切换状态选择列表
+            changeStatusIDX: 0, // 选中时间需要切换状态下标
+            changeRemark: '',
+        }
+    },
+    computed: {
+        // 检索是否有选中
+        isSelected(){
+            let _list = [...this.timeList];
+            if(_list.length<=0)return false;
+            for(let i=0;i<_list.length;i++){
+                for(let j=0;j<_list[i].items.length;j++){
+                    if(_list[i].items[j]._selectStatus)return true
+                }
             }
+            return false;
         }
     },
     onLoad(){
@@ -106,7 +154,6 @@ export default {
         this.timeSlot.start = _startDate
         this.timeSlot.end = _endDate
 
-        console.warn(_startDate, '-' ,_endDate)
 
         this.getTimeList({
             start_date: _startDate,
@@ -115,6 +162,59 @@ export default {
 
     },
     methods: {
+        confiemChangeStatus: util.debounce(function(){
+            let { timeList, changeRemark, changeStatusIDX } = this;
+            let _selectedArr = [];
+            timeList.forEach(ele=>{
+                ele.items.forEach(el=>{
+                    if(el._selectStatus){
+                        _selectedArr.push({
+                            date: ele.day,
+                            start_duration: el.start_duration,
+                            end_duration: el.end_duration,
+                        })
+                    }
+                })
+            })
+            servers.post({
+                url: API.saveCoachTimeStatus,
+                data: {
+                    TimeList: _selectedArr,
+                    remark: changeRemark,
+                    status: statusList[changeStatusIDX].status
+                },
+                isDefaultGet: false
+            })
+            .then(res=>{
+                if(res.data.code == 0){
+                    util.showNone(res.data.message || '操作成功！');
+                    setTimeout(util.routeTo, 1200);
+                }else{
+                    util.showNone(res.data.message || '操作失败！');
+                }
+            })
+            console.warn(_selectedArr)
+        }, 300, 300),
+        cancelSelect(){
+            let _list = [...this.timeList];
+            this.timeList = _list.map(res=>{
+                let _iList = [...res.items];
+                res.items = _iList.map(el=>{
+                    el._selectStatus = false
+                    return el;
+                })
+                return res;
+            })
+        },
+        statusPickerChange(e){
+            this.changeStatusIDX = e.detail.value;
+        },
+        timeSelect({i, j, k}){
+            if(k.status ==1 || k.status ==2)return;
+            let _list = [...this.timeList];
+            _list[i].items[j]._selectStatus = !_list[i].items[j]._selectStatus;
+            this.timeList = [..._list];
+        },
         toConfig(){
             util.routeTo(`/pages/time/_config/_config`, 'nT')
         },
@@ -231,7 +331,6 @@ export default {
                 flex-grow: 1;
                 max-width: calc(750upx - 110upx);
                 height: 100upx;
-                background-color: greenyellow;
                 font-size: 0;
                 white-space: nowrap;
                 .d-item{
@@ -239,7 +338,6 @@ export default {
                     padding-top: 12upx;
                     width: 200upx;
                     height: 100%;
-                    background-color: skyblue;
                     >view{
                         padding: 0 10upx;
                         text-align: center;
@@ -258,7 +356,6 @@ export default {
             >view{
                 flex-grow: 0;
                 flex-shrink: 0;
-                height: 500upx;
                 width: 110upx;
                 border-right: 2upx solid #d8d8d8;
                 background-color: #fff;
@@ -268,7 +365,6 @@ export default {
                     line-height: 84upx;
                     font-size: 24upx;
                     color: #333;
-                    background-color: skyblue;
                     border: 2upx solid #fff;
                 }
             }
@@ -277,14 +373,37 @@ export default {
                 max-width: calc(750upx - 110upx);
                 font-size: 0;
                 white-space: nowrap;
-                background-color: #788;
                 .t-list{
+                    vertical-align: top;
                     display: inline-block;
                     width: 200upx;
                     .l-item{
                         height: 88upx;
-                        background-color: #F2F2F7;
+                        background-color: #f4f1f4;
                         border: 2upx solid #fff;
+                        padding: 0 18upx;
+                        @include centerFlex(center);
+                        >view{
+                            font-size: 24upx;
+                            line-height: 34upx;
+                            @include textHide(2);
+                        }
+                        &.selected{
+                            background-color: #c1dfdc;
+                            
+                        }
+                        &.not{
+                            background-color: #d8d8d8;
+                            >view{
+                                color: #9A9A9D;
+                            }
+                        }
+                        &.course-order{
+                            background-color: $themeColor;
+                            >view{
+                                color: #fff;
+                            }
+                        }
                     }
                 }
             }