Course.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <template>
  2. <view class="page-course" v-if="courseInfo">
  3. <uni-nav-bar height="200rpx" :fixed="true" title="课程详情" color="#FFF" left-icon="left" backgroundColor="rgb(0,0,0,0)" :border="false" @clickLeft="onBack"/>
  4. <view class="section0">
  5. <view class="image">
  6. <image :src="courseInfo.imgUrl" class="img"/>
  7. </view>
  8. </view>
  9. <view class="section1">
  10. <view class="title">
  11. <view class="text">
  12. <view class="name">{{courseInfo.name}}</view>
  13. <view class="tags" style="font-size: 12px;">{{courseInfo.tips}}</view>
  14. </view>
  15. </view>
  16. </view>
  17. <view class="section2">
  18. <block v-for="(it,index) in teacherList">
  19. <TeacherSection :info="it" @onViewTeacher="onViewTeacher" @onViewReserve="onViewReserve"></TeacherSection>
  20. </block>
  21. </view>
  22. <view class="section3">
  23. <CourseAddress :course="courseInfo"></CourseAddress>
  24. </view>
  25. <view class="section4">
  26. <CourseSkill :course="courseInfo" ></CourseSkill>
  27. </view>
  28. <view class="section5">
  29. <view class="cate">
  30. <view class="name">课程介绍</view>
  31. <view class="name">约课介绍</view>
  32. <view class="name">注意事项</view>
  33. </view>
  34. <view class="intro">
  35. <view class="title">课程介绍</view>
  36. <view class="text" >
  37. <rich-text :nodes="courseInfo.intro"></rich-text>
  38. </view>
  39. </view>
  40. <view class="intro">
  41. <view class="title">约课介绍</view>
  42. <view class="text" >
  43. <rich-text :nodes="courseInfo.guid"></rich-text>
  44. </view>
  45. </view>
  46. <view class="intro">
  47. <view class="title">注意事项</view>
  48. <view class="text" >
  49. <rich-text :nodes="courseInfo.attach"></rich-text>
  50. </view>
  51. </view>
  52. </view>
  53. <view class="footer">
  54. <view class="left">
  55. <view class="price">
  56. <view class="sign">¥</view>
  57. <view class="text">{{courseInfo.singlePrice}}</view>
  58. </view>
  59. </view>
  60. <view class="right"> <button open-type="share" class="share">分享</button>
  61. <view class="yy" @click="onOpenYYForm">立即预约</view>
  62. </view>
  63. </view>
  64. <uni-popup ref="yyForm">
  65. <view class="yy-form">
  66. <view class="yy-title"><text class="txt">选择教练</text></view>
  67. <view class="yy-list">
  68. <block v-for="(it,index) in teacherList">
  69. <TeacherSection :info="it" @onViewTeacher="onViewTeacher" @onViewReserve="onViewReserve"></TeacherSection>
  70. </block>
  71. </view>
  72. </view>
  73. </uni-popup>
  74. </view>
  75. </template>
  76. <script>
  77. import {
  78. mapState,
  79. mapGetters,
  80. mapMutations
  81. } from 'vuex'
  82. const app = getApp();
  83. let hideLoading = true;
  84. import TeacherSection from '@/components/TeacherSection/TeacherSection.vue'
  85. import CourseAddress from '@/components/CourseAddress/CourseAddress.vue'
  86. import CourseSkill from '@/components/CourseSkill/CourseSkill.vue'
  87. export default {
  88. components:{
  89. TeacherSection,
  90. CourseAddress,
  91. CourseSkill
  92. },
  93. data() {
  94. return {
  95. courseInfo:null,
  96. courseId:0,
  97. teacherList:[],
  98. planList:[],
  99. };
  100. },
  101. computed: {
  102. ...mapState(['store_id','systemInfo'])
  103. },
  104. onLoad(option){
  105. this.courseId=option.id||0;
  106. if(this.courseId>0){
  107. this.initCourseInfo();
  108. }
  109. },
  110. methods:{
  111. onBack(e){
  112. uni.navigateBack(-1);
  113. },
  114. onOpenYYForm(e){
  115. let _this=this;
  116. _this.$refs.yyForm.open("bottom")
  117. },
  118. onViewReserve(e){
  119. uni.navigateTo({
  120. url:'/pages/fitness/Reserve/Reserve?teacherId='+e+"&courseId="+this.courseId,
  121. })
  122. },
  123. onViewTeacher(e){
  124. uni.navigateTo({
  125. url:'/pages/fitness/teacher/teacher?id='+e,
  126. })
  127. },
  128. initCourseInfo(){
  129. let _this=this;
  130. this.$http.request('course/getCourseInfo', {
  131. id:_this.courseId
  132. }, "", "", hideLoading).then(res => {
  133. _this.courseInfo=res.data.info;
  134. _this.teacherList=res.data.teacherList;
  135. }).catch(err => {})
  136. },
  137. }
  138. }
  139. </script>
  140. <style lang="scss">
  141. @import './Course.scss'
  142. </style>