'更新课程发布'

app.json

@@ -1,10 +1,10 @@
 
 {
     "pages": [
+        "pages/coursePublish/coursePublish",
         "pages/stuNeed/stuNeed",
         "pages/teachAuthentication/teachAuthentication",
         "pages/stuDetail/stuDetail",
-        "pages/coursePublish/coursePublish",
         "pages/stuList/stuList",
         "pages/myInfo/myInfo",
         "pages/teacherList/teacherList",

pages/coursePublish/coursePublish.js

@@ -5,7 +5,182 @@ Page({
      * 页面的初始数据
      */
     data: {
-        
+        courseOption: '', //课程类别
+        showCourseOptions: false, //课程类别选项是否展示
+        courseOptionIndex:'',   //选中课程的索引
+        teachPosition: '', //辅导方式
+        chosedTeachPosition: false, //辅导方式选项是否展示
+        teachTimeAM: [], //上午授课时间
+        teachTimePM: [], //下午授课时间
+        teachTimeEvening: [], //晚上授课时间
+        teachTime: [], //合并后的授课时间
+        successExperience: '', //成功经验
+        selfIntroduction: '', //自我介绍
+        // 课程类别
+        courseOptions: [{
+                name: "小学",
+                choesd: false
+            },
+            {
+                name: "初中",
+                choesd: false
+            },
+            {
+                name: "高中",
+                choesd: false
+            },
+            {
+                name: "大学",
+                choesd: false
+            },
+            {
+                name: "音乐",
+                choesd: false
+            },
+            {
+                name: "舞蹈",
+                choesd: false
+            },
+            {
+                name: "语言",
+                choesd: false
+            },
+            {
+                name: "体育",
+                choesd: false
+            },
+            {
+                name: "美术",
+                choesd: false
+            },
+            {
+                name: "书法",
+                choesd: false
+            },
+            {
+                name: "少儿编程",
+                choesd: false
+            },
+            {
+                name: "计算机",
+                choesd: false
+            },
+            {
+                name: "其他",
+                choesd: false
+            }
+        ],
+        // 辅导方式
+        teachPositions: [{
+                opType: '老师上门',
+                choesd: false
+            },
+            {
+                opType: '学员上门',
+                choesd: false
+            }, {
+                opType: '线上辅导',
+                choesd: false
+            }, {
+                opType: '老师住家',
+                choesd: false
+            },
+            {
+                opType: '学员住家',
+                choesd: false
+            }
+        ],
+        // 授课时间
+        // 上午
+        timeAM: [{
+                name: '1',
+                value: 'A1'
+            },
+            {
+                name: '2',
+                value: 'A2'
+            },
+            {
+                name: '3',
+                value: 'A3'
+            },
+            {
+                name: '4',
+                value: 'A4'
+            },
+            {
+                name: '5',
+                value: 'A5'
+            },
+            {
+                name: '6',
+                value: 'A6'
+            },
+            {
+                name: '7',
+                value: 'A7'
+            }
+        ],
+        // 下午
+        timePM: [{
+                name: '1',
+                value: 'P1'
+            },
+            {
+                name: '2',
+                value: 'P2'
+            },
+            {
+                name: '3',
+                value: 'P3'
+            },
+            {
+                name: '4',
+                value: 'P4'
+            },
+            {
+                name: '5',
+                value: 'P5'
+            },
+            {
+                name: '6',
+                value: 'P6'
+            },
+            {
+                name: '7',
+                value: 'P7'
+            }
+        ],
+        // 晚上
+        timeEvening: [{
+                name: '1',
+                value: 'E1'
+            },
+            {
+                name: '2',
+                value: 'E2'
+            },
+            {
+                name: '3',
+                value: 'E3'
+            },
+            {
+                name: '4',
+                value: 'E4'
+            },
+            {
+                name: '5',
+                value: 'E5'
+            },
+            {
+                name: '6',
+                value: 'E6'
+            },
+            {
+                name: '7',
+                value: 'E7'
+            }
+        ]
     },
 
 
@@ -15,6 +190,169 @@ Page({
     onLoad(options) {
 
     },
+    // 选择课程类别
+    // 打开课程类别（大类）选项区
+    toChooseCourseOptions() {
+        this.setData({
+            showCourseOptions: true
+        })
+    },
+
+    // 定义退出下拉选区的方法
+    hiddenCourseOptions() {
+        this.setData({
+            showCourseOptions: false
+        })
+    },
+    // 从下拉区选择课程类别内容
+    onChooseCourseOptions(e) {
+        let index = e.currentTarget.dataset.index
+        let courseOptions = this.data.courseOptions
+        for (let i = 0; i < courseOptions.length; i++) {
+            if (i == index) {
+                courseOptions[i].chosed = !courseOptions[i].chosed
+            } else {
+                courseOptions[i].chosed = false
+            }
+        }
+        this.setData({
+            courseOptions
+        })
+
+    },
+    // 课程类别（大类）确定按钮的点击事件
+    confirmCourseOptions() {
+        let courseOptions = this.data.courseOptions
+        let index
+        for (let i = 0; i < courseOptions.length; i++) {
+            if (courseOptions[i].chosed) {
+                index = i
+            }
+        }
+        let courseOption = courseOptions[index]?.name || ''
+        let courseOptionIndex = index
+        this.setData({
+            courseOption,
+            courseOptionIndex
+        })
+
+        this.hiddenCourseOptions()
+    },
+    // 辅导方式
+    // 打开辅导方式选项区
+    toChosedTeachPosition() {
+        this.setData({
+            chosedTeachPosition: true
+        })
+    },
+    // 关闭辅导方式选项区的方法
+    hiddenTeachPosition() {
+        this.setData({
+            chosedTeachPosition: false
+        })
+    },
+    // 从下拉选区选择辅导方式内容
+    onTeachPosition(e) {
+        let index = e.currentTarget.dataset.index
+        let teachPositions = this.data.teachPositions
+        for (let i = 0; i < teachPositions.length; i++) {
+            if (i == index) {
+                teachPositions[i].chosed = !teachPositions[i].chosed
+            } else {
+                teachPositions[i].chosed = false
+            }
+        }
+        this.setData({
+            teachPositions
+        })
+    },
+    // 辅导方式确定按钮点击事件
+    confirmTeachPosition() {
+        let teachPositions = this.data.teachPositions
+        let index
+        for (let i = 0; i < teachPositions.length; i++) {
+            if (teachPositions[i].chosed) {
+                index = i
+            }
+        }
+        let teachPosition = teachPositions[index]?.opType || ''
+        this.setData({
+            teachPosition
+        })
+        this.hiddenTeachPosition()
+    },
+
+    // 选择授课时间
+    // 上午
+    chechboxChangeAM(e) {
+        // console.log(e)
+        let teachTimeAM = this.data.teachTimeAM
+        teachTimeAM = e.detail.value
+        this.setData({
+            teachTimeAM
+        })
+        // console.log(teachTimeAM)
+    },
+
+    // 下午
+    chechboxChangePM(e) {
+        // console.log(e)
+        let teachTimePM = this.data.teachTimePM
+        teachTimePM = e.detail.value
+        this.setData({
+            teachTimePM
+        })
+        // console.log(teachTimePM)
+    },
+
+    // 晚上
+    chechboxChangeEvening(e) {
+        // console.log(e)
+        let teachTimeEvening = this.data.teachTimeEvening
+        teachTimeEvening = e.detail.value
+        this.setData({
+            teachTimeEvening
+        })
+        // console.log(teachTimeEvening)
+    },
+
+    // 合并授课时间的函数
+    joinTime() {
+        let teachTimeAM = this.data.teachTimeAM
+        let teachTimePM = this.data.teachTimePM
+        let teachTimeEvening = this.data.teachTimeEvening
+        let teachTime = this.data.teachTime
+        teachTime = teachTimeAM.concat(teachTimePM, teachTimeEvening)
+        this.setData({
+            teachTime
+        })
+        // console.log("授课时间为：" + teachTime)
+    },
+
+    // 获取成功经验
+    getSuccess(e) {
+        console.log(e.detail.value)
+        this.setData({
+            successExperience: e.detail.value
+        })
+    },
+    // 获取自我介绍
+    getSelfIntroduction(e) {
+        this.setData({
+            selfIntroduction: e.detail.value
+        })
+    },
+
+    // 发布课程按钮的点击事件
+    toPublisCourse() {
+        this.joinTime()
+        wx.setStorageSync('course', {
+            teachPosition: this.data.teachPosition,
+            teachTime: this.data.teachTime,
+            successExperience: this.data.successExperience,
+            selfIntroduction: this.data.selfIntroduction
+        })
+    },
 
     /**
      * 生命周期函数--监听页面初次渲染完成

pages/coursePublish/coursePublish.wxml

@@ -1,9 +1,9 @@
 <!--pages/coursePublish/coursePublish.wxml-->
-<view>
-    <view class="course-container">
+<view class="course-container">
+  <view>
         <text class="course-title">授课科目*</text>
         <view class="course-list">
-            <text class="course">主教</text>
+            <text class="course">课程类别：</text>
             <view class="course-cho">
                 <text>请选择</text>
                 <image class="iconImg" src="../../images/down.png"></image>
@@ -18,7 +18,7 @@
             </view>
         </view>
         <view class="course-list">
-            <text class="course">辅教</text>
+            <text class="course">详细课程：</text>
             <view class="course-cho">
                 <text>请选择</text>
                 <image class="iconImg" src="../../images/down.png"></image>
@@ -33,8 +33,17 @@
             </view>
         </view>
     </view>
+    <!-- 辅导方式 -->
+    <view class="techporsiton" bindtap="toChosedTeachPosition">
+        <view>授课方式*：</view>
+        <view class="teachporsition-option">
+            <view>{{teachPosition || '请选择'}}</view>
+            <view class="iconfont icon-xiangxia"></view>
+        </view>
+    </view>
+    <!-- 授课时间 -->
     <view>
-        <text class="tr-title">授课时间*</text>
+        <view class="tr-title">授课时间*：</view>
         <view class="tr-container">
             <view class="tr_1">
                 <text class="th_0" decode="true">&ensp;&ensp;&ensp;&ensp;</text>
@@ -47,52 +56,66 @@
                 <text class="th_2">周日</text>
             </view>
             <view class="tr_2">
-                <checkbox-group>
+                <checkbox-group bindchange="chechboxChangeAM">
                     <view class="th2_0">上午</view>
-                    <checkbox class="th2_1"></checkbox>
-                    <checkbox class="th2_1"></checkbox>
-                    <checkbox class="th2_1"></checkbox>
-                    <checkbox class="th2_1"></checkbox>
-                    <checkbox class="th2_1"></checkbox>
-                    <checkbox class="th2_1"></checkbox>
-                    <checkbox class="th2_2"></checkbox>
+                    <label wx:for="{{timeAM}}" wx:key="index">
+                        <checkbox class="th2_1" value="{{item.value}}"></checkbox>
+                    </label>
                 </checkbox-group>
             </view>
             <view class="tr_2">
-                <checkbox-group>
+                <checkbox-group bindchange="chechboxChangePM">
                     <view class="th2_0">下午</view>
-                    <checkbox class="th2_1"></checkbox>
-                    <checkbox class="th2_1"></checkbox>
-                    <checkbox class="th2_1"></checkbox>
-                    <checkbox class="th2_1"></checkbox>
-                    <checkbox class="th2_1"></checkbox>
-                    <checkbox class="th2_1"></checkbox>
-                    <checkbox class="th2_2"></checkbox>
+                    <label wx:for="{{timePM}}" wx:key="index">
+                        <checkbox class="th2_1" value="{{item.value}}"></checkbox>
+                    </label>
                 </checkbox-group>
             </view>
             <view class="tr_2">
-                <checkbox-group>
+                <checkbox-group bindchange="chechboxChangeEvening">
                     <view class="th2_0">晚上</view>
-                    <checkbox class="th2_1"></checkbox>
-                    <checkbox class="th2_1"></checkbox>
-                    <checkbox class="th2_1"></checkbox>
-                    <checkbox class="th2_1"></checkbox>
-                    <checkbox class="th2_1"></checkbox>
-                    <checkbox class="th2_1"></checkbox>
-                    <checkbox class="th2_2"></checkbox>
+                    <label wx:for="{{timeEvening}}" wx:key="index">
+                        <checkbox class="th2_1" value="{{item.value}}"></checkbox>
+                    </label>
                 </checkbox-group>
             </view>
         </view>
     </view>
-
+    <!-- 成功经验 -->
     <view class="suc-exap">
-        <text>成功经验*</text>
-        <textarea class="case" name="成功案例" id="" cols="30" rows="10" maxlength="120"></textarea>
+        <text>成功经验*：</text>
+        <textarea class="case" name="成功案例" id="" cols="30" rows="10" maxlength="120" bindinput="getSuccess"></textarea>
     </view>
+    <!-- 自我介绍 -->
     <view class="suc-exap">
-        <text>自我介绍*</text>
-        <textarea class="case" name="成功案例" id="" cols="30" rows="10" maxlength="120"></textarea>
+        <text>自我介绍*：</text>
+        <textarea class="case" name="成功案例" id="" cols="30" rows="10" maxlength="120" bindinput="getSelfIntroduction"></textarea>
     </view>
 
 </view>
-<button class="subBtn" type="primary">发布课程</button>
+<!-- 课程发布提交按钮 -->
+<button class="subBtn" type="primary" bindtap="toPublisCourse">发布课程</button>
+<!-- 底部空白区域，为了增加间隔效果，避免提交按钮完全贴着底边 -->
+<view class="blank"></view>
+
+
+<!-- 以下是弹窗选区部分 -->
+<!-- 课程类别 -->
+
+
+<!-- 授课方式选项 -->
+<view wx:if="{{chosedTeachPosition}}">
+    <!-- 空白区（背景） -->
+    <view class="mask" bindtap="hiddenTeachPosition"></view>
+    <!-- 内容区 -->
+    <view class="options-wrapper">
+        <view class="chooseContent-title">
+            <view bindtap="hiddenTeachPosition">取消</view>
+            <view bindtap="confirmTeachPosition">确定</view>
+        </view>
+        <view class="chooseContent" wx:for="{{teachPositions}}" wx:key="key" bindtap="onTeachPosition" data-index="{{index}}">
+            <view style="position: absolute;left: 40rpx;">{{item.opType}}</view>
+            <image style="position: absolute;right: 40rpx;" src="{{item.chosed?'/images/selected.png':'/images/selectNull.png'}}"></image>
+        </view>
+    </view>
+</view>

pages/coursePublish/coursePublish.wxss

@@ -1,41 +1,52 @@
 /* pages/coursePublish/coursePublish.wxss */
 
-/* 授课科目 */
+/* 外层容器样式 */
 .course-container{
     margin-left: 20rpx;
 }
+/* 授课科目 */
 .course-title{
-    margin-top: 20rpx;
+  margin-top: 20rpx;
 }
 .course-list{
-    display: flex;
-    margin-top: 20rpx;
+  display: flex;
+  margin-top: 20rpx;
 }
 .course{
-    width: 20%;
+  width: 25%;
 }
 .course-cho{
-    width: 25%;
+  width: 25%;
 }
 .iconImg{
-    width: 30rpx;
-    height: 30rpx;
+  width: 30rpx;
+  height: 30rpx;
+}
+
+/* 授课方式 */
+.techporsiton{
+    display: flex;
+    margin-top: 20rpx;
+}
+.teachporsition-option{
+    display: flex;
+    height: 40rpx;
+    line-height: 40rpx;
 }
 
 /* 授课时间 */
 .tr-title{
     display: block;
-    margin-left: 20rpx;
     margin-top: 20rpx;
 }
 .tr-container{
     display: flex;
     position: relative;
-    width: 96%;
+    width: 98%;
     flex-direction: column;
     font-size: 26rpx;
     /* border: 1rpx solid gray; */
-    margin: 20rpx;
+    margin: 20rpx 20rpx 20rpx 0;
 }
 
 .tr_1 {
@@ -59,20 +70,20 @@
     width: 12%;
     height: 80rpx;
     line-height: 80rpx;
-    border-right: 1rpx solid gray;
-    border-bottom: 1rpx solid gray;
+    border-right: 1rpx solid #D1D1D1;
+    border-bottom: 1rpx solid #D1D1D1;
     text-align: center;
 }
 
 .th_0,
 .th_1,
 .th_2{
-    border-top: 1rpx solid gray;
+    border-top: 1rpx solid #D1D1D1;
 }
 
 .th_0,
 .th2_0{
-    border-left: 1rpx solid gray;
+    border-left: 1rpx solid #D1D1D1;
 }
 
 .th2_0{
@@ -90,18 +101,66 @@
     height: 22rpx !important;
 }
 
-/* 案例 */
-.suc-exap{
-    margin-left: 20rpx;
+/* 成功经验和自我介绍 */
+.suc-exap,
+.case{
+    margin-top: 20rpx;
 }
 .case{
     width: 94%;
-    border: 1rpx solid gray;
-    padding-left: 10rpx;
-    margin-top: 20rpx;
+    border: 1rpx solid #D1D1D1;
+    padding: 10rpx;
 }
 
 /* 提交按钮 */
 .subBtn {
     margin-top: 40rpx;
+}
+
+/* 底部空白区域 */
+.blank{
+    height: 50rpx;
+}
+
+/* 授课方式下拉空白区（背景） */
+.mask{
+    z-index: 2;
+    background-color: rgba(0,0,0,.3);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+/* 授课方式内容区 */
+.options-wrapper{
+    z-index: 3;
+    width: 100%;
+    background-color: #fff;
+    position: fixed;
+    bottom: 0;
+}
+/* 下拉选项内容区 */
+.chooseContent{
+    width: 100%;
+    height: 80rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    border-bottom: 1rpx solid gray;
+}
+.chooseContent image{
+    width: 50rpx;
+    height: 50rpx;
+}
+/*授课方式下拉选项内容区标题部分  */
+.chooseContent-title{
+    background-color: rgb(230,230, 230);
+    display: flex;
+    height: 80rpx;
+    line-height: 80rpx;
+    align-content: center;
+    justify-content: space-between;
+    padding-right: 40rpx;
+    padding-left: 40rpx;
 }