'增加课程发布'

pages/coursePublish/coursePublish.js

@@ -5,9 +5,17 @@ Page({
      * 页面的初始数据
      */
     data: {
+        list: [{
+            id: 0,
+            title: '课程类别'
+        }], //初始选项
         courseOption: '', //课程类别
         showCourseOptions: false, //课程类别选项是否展示
-        courseOptionIndex:'',   //选中课程的索引
+        courseOptionIndex: '', //选中课程的索引
+        courseDetailChosed: '', //课程详情
+        courseDetailChosedList: [], //已选择课程详情的数组格式
+        courseDetailChosedText: '', //已选择课程详情的字符串格式
+        shouwCourseDetails: false, //课程详情是否展示
         teachPosition: '', //辅导方式
         chosedTeachPosition: false, //辅导方式选项是否展示
         teachTimeAM: [], //上午授课时间
@@ -16,6 +24,10 @@ Page({
         teachTime: [], //合并后的授课时间
         successExperience: '', //成功经验
         selfIntroduction: '', //自我介绍
+        lessonList: [{
+            id:0,
+            title: '课程类别'
+        }],
         // 课程类别
         courseOptions: [{
                 name: "小学",
@@ -70,6 +82,586 @@ Page({
                 choesd: false
             }
         ],
+        // 详细课程
+        courseLists: [
+            [{
+                    courseName: '小学1-5数学',
+                    choesd: false
+                },
+                {
+                    courseName: '小学1-5英语',
+                    choesd: false
+                },
+                {
+                    courseName: '小学1-5语文',
+                    choesd: false
+                },
+                {
+                    courseName: '小学6数学',
+                    choesd: false
+                },
+                {
+                    courseName: '小学6英语',
+                    choesd: false
+                },
+                {
+                    courseName: '小学6语文',
+                    choesd: false
+                },
+                {
+                    courseName: '小学奥数',
+                    choesd: false
+                }
+            ],
+            [{
+                    courseName: '初一初二语文',
+                    choesd: false
+                },
+                {
+                    courseName: '初一初二数学',
+                    choesd: false
+                },
+                {
+                    courseName: '初一初二英语',
+                    choesd: false
+                },
+                {
+                    courseName: '初一初二物理',
+                    choesd: false
+                },
+                {
+                    courseName: '初一初二化学',
+                    choesd: false
+                },
+                {
+                    courseName: '初三语文',
+                    choesd: false
+                },
+                {
+                    courseName: '初三数学',
+                    choesd: false
+                },
+                {
+                    courseName: '初三英语',
+                    choesd: false
+                },
+                {
+                    courseName: '初三物理',
+                    choesd: false
+                },
+                {
+                    courseName: '初三化学',
+                    choesd: false
+                },
+                {
+                    courseName: '初中历史',
+                    choesd: false
+                },
+                {
+                    courseName: '初中地理',
+                    choesd: false
+                },
+                {
+                    courseName: '初中奥数',
+                    choesd: false
+                },
+                {
+                    courseName: '初中生物',
+                    choesd: false
+                },
+                {
+                    courseName: '初中预备班',
+                    choesd: false
+                },
+                {
+                    courseName: '初中科学',
+                    choesd: false
+                },
+                {
+                    courseName: '初中政治',
+                    choesd: false
+                }
+            ],
+            [{
+                    courseName: '高一高二语文',
+                    choesd: false
+                },
+                {
+                    courseName: '高一高二数学',
+                    choesd: false
+                },
+                {
+                    courseName: '高一高二英语',
+                    choesd: false
+                },
+                {
+                    courseName: '高一高二物理',
+                    choesd: false
+                },
+                {
+                    courseName: '高一高二化学',
+                    choesd: false
+                },
+                {
+                    courseName: '高三语文',
+                    choesd: false
+                },
+                {
+                    courseName: '高三数学',
+                    choesd: false
+                },
+                {
+                    courseName: '高三英语',
+                    choesd: false
+                },
+                {
+                    courseName: '高三物理',
+                    choesd: false
+                },
+                {
+                    courseName: '高三化学',
+                    choesd: false
+                },
+                {
+                    courseName: '高中历史',
+                    choesd: false
+                },
+                {
+                    courseName: '高中地理',
+                    choesd: false
+                },
+                {
+                    courseName: '高中政治',
+                    choesd: false
+                },
+                {
+                    courseName: '高中生物',
+                    choesd: false
+                },
+                {
+                    courseName: '信息科技',
+                    choesd: false
+                },
+                {
+                    courseName: 'SAT',
+                    choesd: false
+                }
+            ],
+            [{
+                    courseName: '托福',
+                    choesd: false
+                },
+                {
+                    courseName: '雅思',
+                    choesd: false
+                },
+                {
+                    courseName: '高等数学',
+                    choesd: false
+                },
+                {
+                    courseName: '微观经济学',
+                    choesd: false
+                },
+                {
+                    courseName: 'MBA',
+                    choesd: false
+                },
+                {
+                    courseName: '成人高考',
+                    choesd: false
+                },
+                {
+                    courseName: '国学',
+                    choesd: false
+                },
+                {
+                    courseName: '自学考试',
+                    choesd: false
+                },
+                {
+                    courseName: '专升本',
+                    choesd: false
+                },
+                {
+                    courseName: '考博面试辅导',
+                    choesd: false
+                },
+                {
+                    courseName: '考博专业课',
+                    choesd: false
+                },
+                {
+                    courseName: '考博英语',
+                    choesd: false
+                },
+                {
+                    courseName: '英语四级',
+                    choesd: false
+                },
+                {
+                    courseName: '英语六级',
+                    choesd: false
+                },
+                {
+                    courseName: '论文指导',
+                    choesd: false
+                },
+                {
+                    courseName: '考研专业课',
+                    choesd: false
+                },
+                {
+                    courseName: '考研政治',
+                    choesd: false
+                },
+                {
+                    courseName: '考研数学',
+                    choesd: false
+                },
+                {
+                    courseName: '考研英语',
+                    choesd: false
+                },
+                {
+                    courseName: '英语专业四级',
+                    choesd: false
+                },
+                {
+                    courseName: '英语专业八级',
+                    choesd: false
+                },
+                {
+                    courseName: '课程辅导',
+                    choesd: false
+                }
+            ],
+            [{
+                    courseName: '小提琴',
+                    choesd: false
+                },
+                {
+                    courseName: '钢琴',
+                    choesd: false
+                },
+                {
+                    courseName: '电子琴',
+                    choesd: false
+                },
+                {
+                    courseName: '长笛',
+                    choesd: false
+                },
+                {
+                    courseName: '琵琶',
+                    choesd: false
+                },
+                {
+                    courseName: '手风琴',
+                    choesd: false
+                },
+                {
+                    courseName: '古筝',
+                    choesd: false
+                },
+                {
+                    courseName: '练耳歌唱',
+                    choesd: false
+                },
+                {
+                    courseName: '大号',
+                    choesd: false
+                },
+                {
+                    courseName: '声乐',
+                    choesd: false
+                },
+                {
+                    courseName: '萨克斯',
+                    choesd: false
+                },
+                {
+                    courseName: '单簧管',
+                    choesd: false
+                },
+                {
+                    courseName: '吉他',
+                    choesd: false
+                },
+                {
+                    courseName: '小号',
+                    choesd: false
+                },
+                {
+                    courseName: '古琴',
+                    choesd: false
+                },
+                {
+                    courseName: '二胡',
+                    choesd: false
+                },
+                {
+                    courseName: '大提琴',
+                    choesd: false
+                },
+                {
+                    courseName: '打击乐',
+                    choesd: false
+                },
+                {
+                    courseName: '圆号',
+                    choesd: false
+                },
+                {
+                    courseName: '中提琴',
+                    choesd: false
+                },
+                {
+                    courseName: '竹笛',
+                    choesd: false
+                },
+                {
+                    courseName: '架子鼓',
+                    choesd: false
+                },
+                {
+                    courseName: '扬琴',
+                    choesd: false
+                },
+                {
+                    courseName: '巴松',
+                    choesd: false
+                }
+            ],
+            [{
+                    courseName: '民族舞',
+                    choesd: false
+                },
+                {
+                    courseName: '爵士舞',
+                    choesd: false
+                },
+                {
+                    courseName: '拉丁舞',
+                    choesd: false
+                },
+                {
+                    courseName: '芭蕾舞',
+                    choesd: false
+                },
+                {
+                    courseName: '街舞',
+                    choesd: false
+                },
+                {
+                    courseName: '现代舞',
+                    choesd: false
+                },
+                {
+                    courseName: '踢踏舞',
+                    choesd: false
+                }
+            ],
+            [{
+                    courseName: '本地方言',
+                    choesd: false
+                },
+                {
+                    courseName: '日语',
+                    choesd: false
+                },
+                {
+                    courseName: '英语口语',
+                    choesd: false
+                },
+                {
+                    courseName: '新概念英语',
+                    choesd: false
+                },
+                {
+                    courseName: '牛津英语',
+                    choesd: false
+                },
+                {
+                    courseName: '西班牙语',
+                    choesd: false
+                },
+                {
+                    courseName: '德语',
+                    choesd: false
+                },
+                {
+                    courseName: '商务英语',
+                    choesd: false
+                },
+                {
+                    courseName: '法语',
+                    choesd: false
+                },
+                {
+                    courseName: '韩语',
+                    choesd: false
+                },
+                {
+                    courseName: '意大利语',
+                    choesd: false
+                },
+                {
+                    courseName: '汉语',
+                    choesd: false
+                },
+                {
+                    courseName: '阿拉伯语',
+                    choesd: false
+                },
+                {
+                    courseName: 'SBS英语',
+                    choesd: false
+                },
+                {
+                    courseName: '俄语',
+                    choesd: false
+                },
+                {
+                    courseName: '葡萄牙语',
+                    choesd: false
+                },
+                {
+                    courseName: '初中政治',
+                    choesd: false
+                }
+            ],
+            [{
+                    courseName: '羽毛球',
+                    choesd: false
+                },
+                {
+                    courseName: '跆拳道',
+                    choesd: false
+                },
+                {
+                    courseName: '游泳',
+                    choesd: false
+                },
+                {
+                    courseName: '乒乓球',
+                    choesd: false
+                },
+                {
+                    courseName: '网球',
+                    choesd: false
+                },
+                {
+                    courseName: '中国象棋',
+                    choesd: false
+                },
+                {
+                    courseName: '国际象棋',
+                    choesd: false
+                },
+                {
+                    courseName: '围棋',
+                    choesd: false
+                },
+                {
+                    courseName: '篮球',
+                    choesd: false
+                },
+                {
+                    courseName: '空手道',
+                    choesd: false
+                }
+            ],
+            [{
+                    courseName: '卡通画',
+                    choesd: false
+                },
+                {
+                    courseName: '中国画',
+                    choesd: false
+                },
+                {
+                    courseName: '素描',
+                    choesd: false
+                },
+                {
+                    courseName: '油画',
+                    choesd: false
+                },
+                {
+                    courseName: '水彩',
+                    choesd: false
+                },
+                {
+                    courseName: '漫画',
+                    choesd: false
+                }
+            ],
+            [{
+                    courseName: '硬笔',
+                    choesd: false
+                },
+                {
+                    courseName: '毛笔',
+                    choesd: false
+                },
+                {
+                    courseName: '篆刻',
+                    choesd: false
+                }
+            ],
+            [{
+                    courseName: 'Scratch',
+                    choesd: false
+                },
+                {
+                    courseName: 'Python',
+                    choesd: false
+                },
+                {
+                    courseName: 'C++',
+                    choesd: false
+                },
+                {
+                    courseName: 'microbit',
+                    choesd: false
+                }
+            ],
+            [{
+                    courseName: '应用能力初级',
+                    choesd: false
+                },
+                {
+                    courseName: '应用能力中级',
+                    choesd: false
+                },
+                {
+                    courseName: '基本操作',
+                    choesd: false
+                }
+            ],
+            [{
+                    courseName: '学习习惯',
+                    choesd: false
+                },
+                {
+                    courseName: '口才',
+                    choesd: false
+                },
+                {
+                    courseName: '心理辅导',
+                    choesd: false
+                },
+                {
+                    courseName: '记忆力',
+                    choesd: false
+                },
+                {
+                    courseName: '注意力',
+                    choesd: false
+                }
+            ]
+        ],
         // 辅导方式
         teachPositions: [{
                 opType: '老师上门',
@@ -191,21 +783,25 @@ Page({
 
     },
     // 选择课程类别
-    // 打开课程类别（大类）选项区
-    toChooseCourseOptions() {
+    // 打开课程类别选项区
+    toChooseCourseType(e) {
+        console.log(e)
         this.setData({
-            showCourseOptions: true
+            showCourseOptions: true,
+            courseDetailChosed: '',
+            // chosedIndex: e.currentTarget.dataset.idx
         })
+        // console.log('当前点击的是：',this.data.chosedIndex)
     },
-
     // 定义退出下拉选区的方法
-    hiddenCourseOptions() {
+    hiddenChooseCourseType() {
         this.setData({
             showCourseOptions: false
         })
     },
     // 从下拉区选择课程类别内容
-    onChooseCourseOptions(e) {
+    onChooseCourseType(e) {
+        console.log(e)
         let index = e.currentTarget.dataset.index
         let courseOptions = this.data.courseOptions
         for (let i = 0; i < courseOptions.length; i++) {
@@ -221,7 +817,7 @@ Page({
 
     },
     // 课程类别（大类）确定按钮的点击事件
-    confirmCourseOptions() {
+    confirmChooseCourseType() {
         let courseOptions = this.data.courseOptions
         let index
         for (let i = 0; i < courseOptions.length; i++) {
@@ -229,15 +825,100 @@ Page({
                 index = i
             }
         }
-        let courseOption = courseOptions[index]?.name || ''
+        let courseOptionChosed = courseOptions[index]?.name || ''
         let courseOptionIndex = index
         this.setData({
-            courseOption,
+            courseOptionChosed,
             courseOptionIndex
         })
+        this.hiddenChooseCourseType()
+    },
+
+    // 课程细分（小类）选择
+    // 打开课程细分选项区
+    toChooseCourseDetail() {
+        if (!this.data.courseOptionChosed) {
+            wx.showToast({
+                title: '请先选课程类别',
+                icon: 'none'
+            })
+            return
+        }
+        this.setData({
+            shouwCourseDetails: true
+        })
+    },
+    // 定义退出课程细分选区的方法
+    hiddenChooseCourseDetail() {
+        this.setData({
+            shouwCourseDetails: false
+        })
+    },
+    // 从下拉区选择课程细分内容
+    chechboxChangeCourseDetail(e) {
+        // console.log(e)
+        let courseDetailChosedList = this.data.courseDetailChosedList
+        courseDetailChosedList = e.detail.value
+        this.setData({
+            courseDetailChosedList
+        })
+    },
+    // 课程细分（小类）确定按钮的点击事件
+    confirmCourseDetail() {
+        let courseDetailChosedText = this.data.courseDetailChosedText
+        let courseDetailChosedList = this.data.courseDetailChosedList
+        courseDetailChosedText = courseDetailChosedList.join() //数组转换为字符串
+        // console.log(courseDetailChosedText)
+        this.setData({
+            courseDetailChosedText
+        })
+        this.hiddenChooseCourseDetail()
+    },
+
+    // 添加行
+    addCourseDetail() {
+        let list = this.data.list
+        let len = list.length
+        let lessonList = this.data.lessonList
+        if (len >= 4) {
+            wx.showToast({
+                title: '选项已超过最大范围',
+                icon: 'none'
+            })
+            return
+        }
+        // let newList = list.concat(list[0])
+        lessonList[0].id = len
+        // console.log('lessonList:', lessonList);
+        let newList = list.concat(lessonList)
+        // console.log(newList[i]);
+        // newList[newList.length-1].id = (newList.length-1)
+        // console.log('newList',newList)
+        this.setData({
+            list: newList
+        })
+        // console.log(this.data.list.length)
+        // console.log('添加后：', this.data.list)
 
-        this.hiddenCourseOptions()
     },
+    // 删除行
+    reMoveCourseDetail() {
+        let list = this.data.list
+        if (list.length == 1) {
+            wx.showToast({
+                title: '只剩一行了，不能再删了',
+                icon: 'none'
+            })
+            return
+        }
+        // console.log('删除前：', list)
+        list.pop()
+        this.setData({
+            list
+        })
+        // console.log('删除后：', this.data.list)
+    },
+
     // 辅导方式
     // 打开辅导方式选项区
     toChosedTeachPosition() {
@@ -352,6 +1033,9 @@ Page({
             successExperience: this.data.successExperience,
             selfIntroduction: this.data.selfIntroduction
         })
+        wx.showToast({
+            title: '本地保存成功',
+        })
     },
 
     /**

pages/coursePublish/coursePublish.wxml

@@ -1,36 +1,32 @@
 <!--pages/coursePublish/coursePublish.wxml-->
 <view class="course-container">
-  <view>
+    <view>
         <text class="course-title">授课科目*</text>
-        <view class="course-list">
-            <text class="course">课程类别：</text>
-            <view class="course-cho">
-                <text>请选择</text>
-                <image class="iconImg" src="../../images/down.png"></image>
-            </view>
-            <view class="course-cho">
-                <text>请选择</text>
+        <view wx:for="{{list}}" wx:key="index" class="course-list">
+            <view class="course-type" bindtap="toChooseCourseType">
+                <view>{{courseOptionChosed || item.title}}</view>
                 <image class="iconImg" src="../../images/down.png"></image>
             </view>
-            <view class="course-cho">
-                <text>请选择</text>
+            <view class="course-detail" bindtap="toChooseCourseDetail">
+                <view>{{courseDetailChosedText || '课程详情'}}</view>
                 <image class="iconImg" src="../../images/down.png"></image>
             </view>
+            <!-- <view wx:if="{{list.length > 1}}" class="addCourse" bindtap="reMoveCourseDetail">
+                <image class="addIconImg" src="../../images/delete.png"></image>
+                <view></view>
+            </view> -->
         </view>
-        <view class="course-list">
-            <text class="course">详细课程：</text>
-            <view class="course-cho">
-                <text>请选择</text>
-                <image class="iconImg" src="../../images/down.png"></image>
-            </view>
-            <view class="course-cho">
-                <text>请选择</text>
-                <image class="iconImg" src="../../images/down.png"></image>
-            </view>
-            <view class="course-cho">
-                <text>请选择</text>
-                <image class="iconImg" src="../../images/down.png"></image>
-            </view>
+
+    </view>
+    <!-- 添加行 -->
+    <view class="addAndDelete">
+        <view class="addCourse" bindtap="reMoveCourseDetail">
+            <image class="addIconImg" src="../../images/delete.png"></image>
+            <view>删除一行</view>
+        </view>
+        <view class="addCourse" bindtap="addCourseDetail">
+            <image class="addIconImg" src="../../images/add.png"></image>
+            <view>添加一行</view>
         </view>
     </view>
     <!-- 辅导方式 -->
@@ -101,7 +97,49 @@
 
 <!-- 以下是弹窗选区部分 -->
 <!-- 课程类别 -->
+<view wx:if="{{showCourseOptions}}">
+    <!-- 空白区（背景） -->
+    <view class="mask" bindtap="hiddenChooseCourseType"></view>
+    <!-- 内容区 -->
+    <view class="courseTitle-wrapper">
+        <view class="chooseContent-title">
+            <view bindtap="hiddenChooseCourseType">取消</view>
+            <view bindtap="confirmChooseCourseType">确定</view>
+        </view>
+        <scroll-view scroll-y="true" class="CourseTitleScroll">
+            <view class="chooseContent" wx:for="{{courseOptions}}" wx:key="key" bindtap="onChooseCourseType" data-index="{{index}}">
+                <view style="position: absolute;left: 40rpx;">{{item.name}}</view>
+                <image style="position: absolute;right: 40rpx;" src="{{item.chosed?'/images/selected.png':'/images/selectNull.png'}}"></image>
+            </view>
+        </scroll-view>
+    </view>
+</view>
 
+<!-- 课程详情 -->
+<view wx:if="{{shouwCourseDetails}}">
+    <!-- 空白区（背景） -->
+    <view class="mask" bindtap="hiddenChooseCourseDetail"></view>
+    <!-- 内容区 -->
+    <view class="courseDetail-wrapper">
+        <view class="chooseContent-title">
+            <view bindtap="hiddenChooseCourseDetail">取消</view>
+            <view bindtap="confirmCourseDetail">确定</view>
+        </view>
+        <!-- <scroll-view scroll-y="true" class="courseDetailScroll">
+            <view class="chooseContent" wx:for="{{courseLists[courseOptionIndex]}}" wx:key="key" bindtap="onChooseCourseDetail" data-index="{{index}}">
+                <view style="position: absolute;left: 40rpx;">{{item.courseName}}</view>
+                <image style="position: absolute;right: 40rpx;" src="{{item.chosed?'/images/selected.png':'/images/selectNull.png'}}"></image>
+            </view>
+        </scroll-view> -->
+        <scroll-view scroll-y="true" class="courseDetailScroll">
+            <checkbox-group bindchange="chechboxChangeCourseDetail">
+                <label wx:for="{{courseLists[courseOptionIndex]}}" wx:key="index">
+                    <checkbox class="checkboxList" value="{{item.courseName}}">{{item.courseName}}</checkbox>
+                </label>
+            </checkbox-group>
+        </scroll-view>
+    </view>
+</view>
 
 <!-- 授课方式选项 -->
 <view wx:if="{{chosedTeachPosition}}">

pages/coursePublish/coursePublish.wxss

@@ -8,15 +8,27 @@
 .course-title{
   margin-top: 20rpx;
 }
-.course-list{
-  display: flex;
-  margin-top: 20rpx;
+.course-list {
+    display: flex;
+    margin-top: 20rpx;
+    margin-left: -20rpx;
+    padding-left: 20rpx;
+    padding-bottom: 20rpx;
+    border-bottom: 1rpx solid #D1D1D1;
 }
 .course{
   width: 25%;
 }
-.course-cho{
-  width: 25%;
+.course-type,
+.course-detail {
+    display: flex;
+}
+.course-type{
+    width: 28%;
+    
+}
+.course-detail{
+    width: 68%;
 }
 .iconImg{
   width: 30rpx;
@@ -163,4 +175,54 @@
     justify-content: space-between;
     padding-right: 40rpx;
     padding-left: 40rpx;
+}
+/* 课程类别、课程细分内容区 */
+.courseTitle-wrapper,
+.courseDetail-wrapper{
+    z-index: 3;
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    position: fixed;
+    bottom: 0;
+}
+/* 滚动区域 */
+.CourseTitleScroll,
+.courseDetailScroll{
+    margin-top: 10rpx;
+    height: 84vh;
+}
+/* 课程详情选项区 */
+.checkboxList{
+    display: flex;
+    flex-direction: column;
+    padding-left: 40rpx;
+    width: 100%;
+    height: 80rpx;
+    display: flex;
+    /* align-items: center; */
+    justify-content: space-around;
+    border-bottom: 1rpx solid gray;
+}
+/* 添加和删除按钮 */
+.addAndDelete{
+    display: flex;
+    /* flex-direction: column; */
+    flex-direction: row-reverse;
+    position: relative;
+}
+/* 添加和删除的图标 */
+.addIconImg {
+    width: 40rpx;
+    height: 40rpx;
+    margin-top: 10rpx;
+}
+/* 添加和删除的样式 */
+.addCourse {
+    display: flex;
+    height: 60rpx;
+    line-height: 60rpx;
+    justify-content: flex-end;
+    padding-right: 20rpx;
+    right: 20rpx;
 }