index.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. <template>
  2. <view>
  3. <view class="head" catchtouchmove="true" @touchmove.stop.prevent="() => { }">
  4. <My_search :value="content.where.condition" @onSearch="onSearch">
  5. <view class="filtrate" v-if="filtrateList.length" hover-class="navigator-hover" @click="openFiltrate">
  6. 筛选
  7. <text class="iconfont icon-shaixuan" />
  8. </view>
  9. </My_search>
  10. <view class="crumbs">
  11. <view class="crumb" v-for="item in crumbs" :key="item.classname">{{ item.classname }}</view>
  12. </view>
  13. </view>
  14. <view style="height: 1px;" />
  15. <filtrate ref="Filtrate" :filtrateList="filtrateList" @onFiltration="onFiltration" />
  16. <view style="height: 9px;" />
  17. <My_listbox ref="List" @getlist="getList" boxBackground="#fff">
  18. <view class="list-box">
  19. <navigator class="item" v-for="item in list" :key="item.sat_coursewareid"
  20. :url="'/packageA/course/list?id=' + item.sat_coursewareid">
  21. <image class="image" :src="item.cover" mode="aspectFill" lazy-load="true" />
  22. <view class="text">
  23. <view class="title u-line-1">{{ item.title || '--' }}</view>
  24. <view class="teacher u-line-1">讲师:{{ item.teacher || '--' }}</view>
  25. <view class="count u-line-1">共{{ item.courseware_count || 0 }}个课件 | {{ item.study_count || 0 }}人已学习
  26. </view>
  27. </view>
  28. </navigator>
  29. </view>
  30. </My_listbox>
  31. </view>
  32. </template>
  33. <script>
  34. export default {
  35. data() {
  36. return {
  37. crumbs: [],
  38. list: [],
  39. "content": {
  40. "where": {
  41. "condition": "",
  42. "sat_courseware_classids": [[]]
  43. }
  44. },
  45. filtrateList: []
  46. }
  47. },
  48. computed: {
  49. },
  50. onLoad(options) {
  51. this.crumbs = [{
  52. classname: "商学院"
  53. }, {
  54. classname: options.classname,
  55. parentid: options.id
  56. }, {
  57. classname: "全部",
  58. parentid: ''
  59. }]
  60. this.getType()
  61. this.getList(true)
  62. },
  63. methods: {
  64. getType() {
  65. this.$Http.basic({
  66. "id": "20221102143302",
  67. content: {
  68. pageSize: 9999,
  69. parentid: this.crumbs[1].parentid,
  70. "where": {
  71. "isenable": 1
  72. }
  73. }
  74. }).then(res => {
  75. console.log("获取二级列表", res)
  76. if (this.cutoff(res.msg)) return;
  77. this.filtrateList = [{
  78. title: "分类",
  79. key: 'sat_courseware_classids',//提交时返回的Key
  80. showKey: "classname",//显示的key
  81. selected: "sat_courseware_classid",//选择时选择的字段
  82. value: "",//提交时选中的value
  83. defaultVal: "",//返回的默认值
  84. isAll: true,
  85. rang: [{ classname: "全部", sat_courseware_classid: "" }].concat(res.data),//选择的范围
  86. }]
  87. })
  88. },
  89. getList(init = false) {
  90. if (this.paging(this.content, init)) return;
  91. this.content.where.sat_courseware_classids = [
  92. [
  93. this.crumbs[1].parentid,
  94. this.crumbs[2].parentid,
  95. ].filter(v => v)
  96. ]
  97. this.$Http.basic({
  98. "id": 20240318101802,
  99. content: this.content
  100. }).then(res => {
  101. this.$refs.List.RefreshToComplete()
  102. console.log("获取课程列表", res)
  103. if (this.cutoff(res.msg)) return;
  104. this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
  105. this.content = this.$refs.List.paging(this.content, res)
  106. })
  107. },
  108. openFiltrate() {
  109. this.$refs.Filtrate.changeShow();
  110. },
  111. onSearch(condition) {
  112. this.content.where.condition = condition;
  113. this.getList(true)
  114. },
  115. onFiltration(e) {
  116. this.$set(this.crumbs, 2, {
  117. classname: e.sat_courseware_classids.classname,
  118. parentid: e.sat_courseware_classids.sat_courseware_classid,
  119. })
  120. this.getList(true)
  121. }
  122. }
  123. }
  124. </script>
  125. <style lang="scss">
  126. .head {
  127. padding: 10px;
  128. width: 100%;
  129. background: #fff;
  130. box-sizing: border-box;
  131. .filtrate {
  132. line-height: 30px;
  133. padding: 0 10px;
  134. font-family: PingFang SC, PingFang SC;
  135. font-size: 14px;
  136. color: #333333;
  137. border-radius: 3px;
  138. margin-left: 10px;
  139. .iconfont {
  140. margin-left: 3px;
  141. color: #BBBBBB;
  142. }
  143. }
  144. }
  145. .crumbs {
  146. display: flex;
  147. line-height: 17px;
  148. font-family: PingFang SC, PingFang SC;
  149. font-size: 12px;
  150. flex-wrap: wrap;
  151. width: 100%;
  152. margin-top: 10px;
  153. .crumb {
  154. flex-shrink: 0;
  155. }
  156. .crumb::after {
  157. content: ">";
  158. padding: 0 2px;
  159. }
  160. .crumb:last-child {
  161. font-weight: bold;
  162. }
  163. .crumb:last-child::after {
  164. content: "";
  165. }
  166. }
  167. .list-box {
  168. padding: 10px;
  169. width: 100vw;
  170. box-sizing: border-box;
  171. .item {
  172. display: flex;
  173. width: 100%;
  174. border-radius: 5px;
  175. overflow: hidden;
  176. margin-top: 10px;
  177. .image {
  178. width: 120px;
  179. height: 74px;
  180. margin-right: 10px;
  181. border-radius: 5px;
  182. flex-shrink: 0;
  183. }
  184. .text {
  185. flex: 1;
  186. font-family: Source Han Sans SC, Source Han Sans SC;
  187. .title {
  188. font-weight: bold;
  189. font-size: 16px;
  190. color: #000000;
  191. line-height: 24px;
  192. }
  193. .teacher {
  194. font-size: 14px;
  195. color: #999999;
  196. line-height: 20px;
  197. margin-top: 4px;
  198. }
  199. .count {
  200. font-size: 12px;
  201. color: #666666;
  202. line-height: 17px;
  203. margin-top: 8px;
  204. }
  205. }
  206. }
  207. }
  208. </style>