refactor(coach): 重构教练端课程详情页面

- 重新设计了课程详情页面的布局和样式,使其更加简洁明了- 添加了课程名称、班级、上课时间、上课地址等详细信息
- 增加了教练信息和扣除课时的展示- 优化了页面结构,提高了用户体验
- 调整了导航栏样式,与整体页面风格保持一致

pages.json

@@ -90,8 +90,8 @@
       "style": {
         "navigationBarTitleText": "课时详情",
         "navigationStyle": "default",
-        "navigationBarBackgroundColor": "#fff",
+        "navigationBarBackgroundColor": "#292929",
-        "navigationBarTextStyle": "black"
+        "navigationBarTextStyle": "white"
       }
     }
 

pages/coach/course/info.vue

@@ -1,169 +1,57 @@
 <!--课程-详情-->
 <template>
+  <view class="main_box">
     <view class="main_section">
       <view class="section_1">
-     <view class="top">
+        <view class="title_box">青少儿篮球课</view>
-       <view class="user">
+        <view class="ul">
-         <view class="pic">
+          <view class="li">
-           <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
+            <view class="title">课程名称</view>
-         </view>
+            <view class="content">青少年篮球课</view>
-         <view class="name">包子皮</view>
-       </view>
-       <view class="right">
-         <view>
-           <text class="title">到课率统计</text>
-           <text>28%</text>
-         </view>
-         <view>
-           <text class="title">发布作业</text>
-           <text>28%</text>
-         </view>
-       </view>
-     </view>
-     <view class="bottom"></view>
-      <view class="text_box">
-        <text>月授课数</text>
-        <text>12</text>
-        <text>节，月负责学员</text>
-        <text>188</text>
-        <text>名</text>
-      </view>
           </view>
 
-    <view class="section_2">
+          <view class="li">
-      <view class="left_box">
+            <view class="title">班级</view>
-        <view>
+            <view class="content">班级名称</view>
-          <text>课程</text>
-          <text>预告</text>
-        </view>
-        <view>
-          <text>5/28周五 15:30~17:30</text>
-          <text>301室篮球少儿课程</text>
-        </view>
-      </view>
-      <view class="rigth_box">
-        <view>详情</view>
-      </view>
           </view>
 
-    <view class="section_3">
-      <view class="title_box">
-        <view class="top_box">
-          <text>最近课程</text>
-          <view></view>
-        </view>
-        <view class="line"></view>
-      </view>
-      <view class="ul">
           <view class="li">
-          <view class="left_box">
+            <view class="title">上课时间</view>
-            <view class="date_box">
+            <view class="content">2020.03.25 15:30-17:00</view>
-              <text>12</text>
-              <text>/</text>
-              <text>24</text>
-            </view>
-            <view class="ratio">
-              到课率：80%
-            </view>
-          </view>
-          <view class="center_box">
-            <view>班级：少年班</view>
-            <view>时间：2020-05-25 15:30 - 17:30</view>
-            <view>课室：302室
-            </view>
-            <view>课程：篮球少儿课
-            </view>
-          </view>
-          <view class="right_box">
-            <view class="tag" style="background:#fad24e;">上课中</view>
-<!--            <view class="tag" style="background:#1cd188;">待上课</view>-->
-          </view>
           </view>
+
           <view class="li">
-          <view class="left_box">
+            <view class="title">上课地址</view>
-            <view class="date_box">
+            <view class="content">xxxx体育馆302室</view>
-              <text>12</text>
-              <text>/</text>
-              <text>24</text>
-            </view>
-            <view class="ratio">
-              到课率：80%
-            </view>
-          </view>
-          <view class="center_box">
-            <view>班级：少年班</view>
-            <view>时间：2020-05-25 15:30 - 17:30</view>
-            <view>课室：302室
-            </view>
-            <view>课程：篮球少儿课
-            </view>
-          </view>
-          <view class="right_box">
-            <!--            <view class="tag" style="background:#fad24e;">上课中</view>-->
-            <view class="tag" style="background:#1cd188;">待上课</view>
-          </view>
-        </view>
-      </view>
           </view>
 
-    <view class="section_3">
-      <view class="title_box">
-        <view class="top_box">
-          <text>作业批改</text>
-          <view @click="openObjListView()">全部</view>
-        </view>
-        <view class="line"></view>
-      </view>
-      <view class="ul">
           <view class="li">
-          <view class="left_box">
+            <view class="title">课程名称</view>
-            <view class="date_box">
+            <view class="content">青少年篮球课</view>
-              <text>12</text>
-              <text>/</text>
-              <text>24</text>
-            </view>
-            <view class="ratio">
-              完成率：80%
-            </view>
-          </view>
-          <view class="center_box">
-            <view>班级：少年班</view>
-            <view>时间：2020-05-25 15:30 - 17:30</view>
-            <view>课程：篮球少儿课
-            </view>
-          </view>
-          <view class="right_box">
-<!--            <view class="tag" style="background:#fad24e;">上课中</view>-->
-                        <view class="tag" style="background:#1cd188;">待批改</view>
-          </view>
           </view>
+
           <view class="li">
-          <view class="left_box">
+            <view class="title">教练</view>
-            <view class="date_box">
+            <view class="content">包子皮</view>
-              <text>12</text>
-              <text>/</text>
-              <text>24</text>
-            </view>
-            <view class="ratio">
-              完成率：80%
           </view>
+
+          <view class="li">
+            <view class="title">教练号码</view>
+            <view class="content">18888888888</view>
           </view>
-          <view class="center_box">
+
-            <view>班级：少年班</view>
+          <view class="li">
-            <view>时间：2020-05-25 15:30 - 17:30</view>
+            <view class="title">扣除课时</view>
-            <view>课程：篮球少儿课
+            <view class="content">2个课时</view>
           </view>
+
+          <view class="state_box">
+            <view>已上</view>
           </view>
-          <view class="right_box">
-            <!--            <view class="tag" style="background:#fad24e;">上课中</view>-->
-            <view class="tag" style="background:#1cd188;">待批改</view>
           </view>
         </view>
       </view>
     </view>
-
-<!--    底部导航-->
-    <AQTabber/>
   </view>
 </template>
 
@@ -178,296 +66,162 @@ export default {
   },
   data() {
     return {
-      list: [],
+      formData:{},
-      likes: 0,
+
-      type: 1,
+      //课程下拉菜单相关
-      type1: 1,
+      show_course:false,//是否显示下拉菜单
-      activity_id: 0,
+      //课程下拉菜单
-      um_id: 0,
+      course_name:'课程',//选中的下拉菜单名称
-      urls: 'http://medication.zeyan.wang/'
+      options_course: [
+        {
+          text: '请选择课程',
+          value: '',
+          checked: true
+        }, {
+          text: '羽毛球课程1',
+          value: '1'
+        }, {
+          text: '篮球课程2',
+          value: '2'
+        }
+      ],
+
+      //课室下拉菜单相关
+      show_classroom:false,//是否显示下拉菜单
+      //课程下拉菜单
+      classroom_name:'课室',//选中的下拉菜单名称
+      options_classroom: [
+        {
+          text: '请选择课室',
+          value: '',
+          checked: true
+        }, {
+          text: '羽毛球201',
+          value: '1'
+        }, {
+          text: '篮球室101',
+          value: '2'
+        }
+      ],
     }
   },
   onLoad() {
-    const um_id = uni.getStorageSync('um_id');
-    this.um_id = um_id
-    if (um_id == '') {
-      uni.navigateTo({
-        url: '/pages/login/login'
-      })
-    }
-    this.fetchData(this.um_id)
   },
   methods: {
-
+    //选中课程下拉菜单点击事件
-    //打开-发布作业页
+    clickCourse(e){
-    openObjListView(){
+      console.log(e)
-      uni.navigateTo({
+      this.course_name = e.text
-        url: '/pages/coach/job/add'
+      this.show_course = true
-      })
     },
-
+    //显示下拉菜单
-    //打开作业列表页
+    filterTapCourse() {
-    openObjListView(){
+      //显示下拉框
-      uni.navigateTo({
+      this.$refs.ref_course.show()
-        url: '/pages/coach/job/list'
+      this.show_course = true;
-      })
     },
 
-    fetchData(um_id) {
+
-      user.activity_index({
+
-        um_id: um_id
+    //选中课室
-      }).then(res => {
+    clickClassroom(e){
-        console.log(res)
+      console.log(e)
-        if (res.status == 200) {
+      this.classroom_name = e.text
-          if (res.data == null) {
+      this.show_classroom = true
-            this.list = []
-          } else {
-            this.list = res.data
-          }
-        } else {
-          uni.showToast({
-            title: res.msg,
-            icon: 'none'
-          })
-        }
-      });
-    },
-    onPullDownRefresh() {
-      this.fetchData(this.um_id)
     },
-    publishing() {
+    //显示课室下拉菜单
-      uni.navigateTo({
+    filterTapClassroom() {
-        url: '/pages/index/publishing'
+      //显示下拉框
-      })
+      this.$refs.ref_classroom.show()
+      this.show_classroom = true;
     },
-    like(id, um_id) {
+
-      user.activity_like({um_id: um_id, activity_id: id, type: 1}).then(res => {
+    //打开课时详情页
-        if (res.status == 200) {
+    openViewCourseInfo(item){
-          user.activity_index({
-            um_id: um_id
-          }).then(res => {
-            console.log(res)
-            if (res.status == 200) {
-              this.list = res.data
-            }
-          });
-          this.type = res.data.type
-          this.activity_id = res.data.activity_id
-        } else {
-          uni.showToast({
-            title: res.msg,
-            icon: 'none'
-          })
-        }
-      });
-    },
-    collection(id, um_id) {
-      user.activity_like({um_id: um_id, activity_id: id, type: 2}).then(res => {
-        if (res.status == 200) {
-          console.log(res)
-          this.fetchData(this.um_id)
-          this.type1 = res.data.type
-          this.activity_id = res.data.activity_id
-        } else {
-          uni.showToast({
-            title: res.msg,
-            icon: 'none'
-          })
-        }
-      });
-    },
-    coninfo(item) {
-      // user.coninfo({id:id}).then(res => {
-      // 	if(res.status == 200){
-      uni.setStorageSync('coninfo', item);
       uni.navigateTo({
-        url: '/pages/index/coninfo'
+        url: '/pages/coach/course/info'
       })
-      // }else{
-      // 	uni.showToast({
-      // 		title: res.msg,
-      // 		icon: 'none'
-      // 	})
-      // }
-      // });
     },
-    Comment(id) {
-      uni.setStorageSync('actid', id);
-      uni.navigateTo({
-        url: '/pages/index/Comment'
-      })
-    }
   }
 }
 </script>
 
 <style lang="less" scoped>
 
-.main_section{
+.main_box{
-  min-height: 100vh;
+  background: #292929 ;
-  background: #292929 100%;
+}
-  padding: 0 24rpx;
+
-  padding-top: 40rpx;
+//自定义导航栏
-  padding-bottom: 150rpx;
+.navbar_section{
-  font-size: 28rpx;
-  .section_1{
-    background: #FFFFFF 100%;
-    height: 264rpx;
-    border-radius: 14rpx;
-    margin: 28rpx auto;
-    padding: 28rpx;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    font-size: 28rpx;
-    .top{
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      .user{
   display: flex;
+  justify-content: center;
   align-items: center;
-        gap: 20rpx;
+  background: #292929;
-        .pic{
-          width: 144rpx;
-          height: 144rpx;
-          border-radius: 50%;
-          image{
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-      .right{
-        display: flex;
-        flex-direction: column;
-        gap: 20rpx;
-        view{
-          display: flex;
-          gap: 10rpx;
   .title{
-            width: 148rpx;
+    padding: 20rpx 0;
-            text-align: right;
+    font-size: 30rpx;
-          }
-        }
-      }
-    }
-    .bottom{
-      padding: 0 44rpx;
-    }
-  }
-
-  .section_2{
-    border-radius: 60rpx;
-    padding: 28rpx 36rpx;
-    background: #29D3B4 100%;
     color: #fff;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .left_box{
-      display: flex;
-      view{
-        display: flex;
-        flex-direction: column;
-        text{}
-      }
-      view:nth-child(1){
-        padding-right: 10rpx;
-        border-right: 2px solid #fff;
-      }
-      view:nth-child(2){
-        padding-left: 10rpx;
-      }
-    }
-    .rigth_box{
-      view{
-        width: 106rpx;
-        height: 50rpx;
-        line-height: 50rpx;
-        text-align: center;
-        border-radius: 25rpx;
-        background: #32baa1;
-        font-size: 24rpx;
-      }
-    }
   }
+}
 
-  .section_3{
+.main_section{
-    margin-top: 36rpx;
+  min-height: 100vh;
-    color: #fff;
+  background: #292929 100%;
+  padding: 30rpx 24rpx;
+  padding-top: 40rpx;
+  padding-bottom: 150rpx;
   font-size: 24rpx;
+  color: #FFFFFF;
+
+  .section_1{
+    border-radius: 22rpx;
+    padding: 20rpx 40rpx;
+    background: #333333 100%;
+    width: 100%;
     .title_box{
-      display: flex;
+      padding: 10rpx;
-      flex-direction: column;
+      padding-left: 30rpx;
-      .top_box{
+      font-size: 32rpx;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        text{
-          font-size: 30rpx;
-        }
-      }
-      .line{
-        width: 90rpx;
-        height: 2px;
-        background: #29D3B4;
-      }
     }
     .ul{
-      margin-top: 30rpx;
+      padding: 40rpx 10rpx;
+      padding-bottom: 350rpx;
+      margin-top: 10rpx;
+      border-top: 1px solid #555555;
       display: flex;
       flex-direction: column;
-      gap: 20rpx;
+      gap: 40rpx;
-      .li{
+
       position: relative;
-        border-radius: 22rpx;
+
-        background: #434544 100%;
+      .li{
-        padding: 14rpx 0;
-        display: flex;
-        align-items: center;
-        .left_box{
-          margin-left: 28rpx;
-          width: 146rpx;
-          display: flex;
-          flex-direction: column;
-          gap: 10rpx;
-          .date_box{
         display: flex;
-            font-size: 48rpx;
+        gap: 72rpx;
-            text:nth-child(1){
+        .title{
-              color: #29D3B4;
+          width: 120rpx;
-            }
+          text-align: right;
-          }
-          .ratio{
-            color: #AAAAAA;
         }
+        .content{}
       }
-        .center_box{
+      .state_box{
-          margin-left: 52rpx;
+        position: absolute;
-          display: flex;
+        bottom: 50rpx;
-          flex-direction: column;
+        right: 10rpx;
-          gap: 10rpx;
+        view{
-        }
+          width: 154rpx;
-        .right_box{
+          height: 154rpx;
-          .tag{
+          border-radius: 50%;
-            position:absolute;
+          background-color: rgba(41,211,180,0.17);
-            top: 0rpx;
+          color: rgba(41,211,180,1);
-            right: 0rpx;
+          font-size: 26rpx;
-            padding: 10rpx;
-            width: 102rpx;
           text-align: center;
-            font-size: 24rpx;
+          line-height: 150rpx;
-            border-bottom-left-radius: 20rpx;
+          transform: rotate(-35deg); /* 旋转 */
-            border-top-right-radius: 20rpx;
         }
-
       }
     }
-
   }
-  }
-
 }
 
 

pages/coach/course/list.vue

@@ -73,7 +73,7 @@
 
       <view class="section_3">
         <view class="ul">
-          <view class="li">
+          <view class="li" @click="openViewCourseInfo({id:1})">
             <view class="top_box">
               <view class="center_box">
                 <view>班级：少年班</view>
@@ -113,7 +113,7 @@
               </view>
             </view>
           </view>
-          <view class="li">
+          <view class="li" @click="openViewCourseInfo({id:2})">
             <view class="top_box">
               <view class="center_box">
                 <view>班级：少年班</view>
@@ -243,17 +243,10 @@ export default {
       this.show_classroom = true;
     },
 
-    //打开-发布作业页
+    //打开课时详情页
-    openObjAddView(){
+    openViewCourseInfo(item){
-      uni.navigateTo({
-        url: '/pages/coach/job/add'
-      })
-    },
-
-    //打开作业列表页
-    openObjListView(){
       uni.navigateTo({
-        url: '/pages/coach/job/list'
+        url: '/pages/coach/course/info'
       })
     },
   }