top.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. <!-- 完成了商学院页面 -->
  2. <template>
  3. <view class="business ">
  4. <view class="two-item" :style="{ marginTop: top + 'px' }">
  5. <view class="plat-form" @click="goToplatform()">
  6. <image :src="imgUrl+'/platform.png'" mode=""></image>
  7. <div class="word">平台公告</div>
  8. </view>
  9. <view class="propaganda" @click="goTomaterial()">
  10. <image :src="imgUrl+'/propaganda.png'" mode=""></image>
  11. </view>
  12. </view>
  13. <!-- <view class="" @click="getList">
  14. 123123123
  15. </view> -->
  16. <view class="choice-course">
  17. <view class="item" v-for="(item,index) in curriculum" :class="{itemActive:colorIndex==index}" @click="getMsg(item,index)" :key="index">
  18. {{item.course_name}}
  19. </view>
  20. <view class="item"></view>
  21. </view>
  22. <view class="curriculum-list">
  23. <view class="curriculum-list-item">
  24. <view v-if="bottomList&&bottomList.length>0">
  25. <view class="item" v-for="(item) in bottomList" :key="item.id" @click="gotoarticle(item)">
  26. <view class="image" style="position: relative;">
  27. <image :src="item.cover" mode="aspectFill" ></image>
  28. <text v-if="item.article_type==0" style="position: absolute; left: 10rpx; top: 10rpx; width: 30rpx; height: 30rpx; color: #053520;" class="iconfont">&#xe683;</text>
  29. <text v-if="item.article_type==1" style="position: absolute; left: 10rpx; top: 10rpx; width: 30rpx; height: 30rpx; color: #053520;" class="iconfont">&#xe631;</text>
  30. </view>
  31. <view class="right-title">
  32. <view class="title">
  33. {{item.title}}
  34. </view>
  35. <view class="video-num">
  36. 观看 {{item.browse_sum}}
  37. </view>
  38. </view>
  39. </view>
  40. <loadMore v-if="bottomList.length>0" :status="status" ></loadMore>
  41. </view>
  42. <nodata v-else style="height: 100%;" :config="{top:1,content:'暂无课程'}"></nodata>
  43. </view>
  44. </view>
  45. </view>
  46. </template>
  47. <script>
  48. let app = getApp()
  49. import {classifyList,articleList,recommendList,hotList} from "@/api/notice.js"
  50. export default{
  51. data(){
  52. return{
  53. curriculum:[
  54. {
  55. id:-1,
  56. course_name:"推荐课程",
  57. },
  58. {
  59. id:-2,
  60. course_name:"热门课程",
  61. },
  62. ],
  63. params:{
  64. page:1,
  65. limit:10
  66. },
  67. bottomList:[],//底部list数据
  68. colorIndex:0,
  69. status:"more",
  70. page:1,
  71. limit:10,
  72. imgUrl: this.$mConfig.staticUrl,
  73. top: 0
  74. }
  75. },
  76. created(){
  77. this.getList()
  78. this.top = app.globalData.barHeight + 44
  79. },
  80. methods:{
  81. getMsg(item,index){
  82. this.colorIndex=index
  83. delete this.params.recommend
  84. delete this.params.hot
  85. delete this.params.course_id
  86. this.params.page=1
  87. this.bottomList=[]
  88. if(index==0){
  89. this.params.recommend=1
  90. }
  91. if(index==1){
  92. this.params.hot=1
  93. }
  94. if(index>1){
  95. this.params.course_id=item.id
  96. }
  97. this.initialization()
  98. },
  99. //上拉加载
  100. loaderMore(){
  101. if(this.status=="more"){
  102. this.params.page++
  103. this.initialization()
  104. }
  105. },
  106. isload(){
  107. this.params.page = 1;
  108. this.bottomList=[],
  109. this.initialization()
  110. },
  111. initialization(){
  112. this.$http.get('/bbs/article/list',this.params).then(res=>{
  113. if(res&&res.code==200){
  114. this.bottomList =this.bottomList.concat(res.page.list)
  115. this.$emit("bottomList",this.bottomList)
  116. if (res.page.totalPage <= res.page.currPage) {
  117. this.status = "noMore";
  118. } else {
  119. this.status = "more";
  120. }
  121. }
  122. })
  123. },
  124. //获取头部list内容
  125. getList(){
  126. this.$http.get(classifyList).then(res=>{
  127. if(res&&res.code==200){
  128. console.log(res)
  129. this.curriculum = this.curriculum.concat(res.list)
  130. this.params.recommend=1
  131. this.initialization()
  132. }
  133. })
  134. },
  135. //跳转平台公告页面
  136. goToplatform(){
  137. uni.navigateTo({
  138. url:"../research/business/platform"
  139. })
  140. },
  141. //跳转宣传素材页面
  142. goTomaterial(){
  143. uni.navigateTo({
  144. url:"../research/business/material"
  145. })
  146. },
  147. gotoarticle(item){
  148. uni.navigateTo({
  149. url:"../research/business/article?id="+item.id
  150. })
  151. }
  152. }
  153. }
  154. </script>
  155. <style>
  156. page{
  157. background-color: #F5F5F5;
  158. }
  159. </style>
  160. <style lang="scss" scoped>
  161. /deep/.uni-load-more__text{
  162. font-size: 24rpx;
  163. }
  164. .business{
  165. overflow: hidden;
  166. .two-item{
  167. background-color: #0B844A;
  168. // margin-top: 148rpx;
  169. // margin-top: 88px;
  170. display: flex;
  171. padding: 32rpx 30rpx 41rpx 30rpx;
  172. .plat-form{
  173. position: relative;
  174. image{
  175. width: 328rpx;
  176. height: 172rpx;
  177. margin-right: 34rpx;
  178. }
  179. .word {
  180. position: absolute;
  181. font-size: 44rpx;
  182. font-family: PingFang SC, PingFang SC-Regular;
  183. font-weight: 400;
  184. color: #6cb600;
  185. text-align: center;
  186. top: 35rpx;
  187. left: 50%;
  188. transform: translateX(-55%);
  189. }
  190. }
  191. .propaganda{
  192. image{
  193. width: 328rpx;
  194. height: 172rpx;
  195. }
  196. }
  197. }
  198. .curriculum-list{
  199. background-color: #0B844A;
  200. .curriculum-list-item{
  201. padding: 40rpx 30rpx 40rpx 30rpx;
  202. border-radius: 40rpx 40rpx 0 0;
  203. background-color: #f5f5f5;
  204. .item{
  205. background-color: #ffffff;
  206. padding: 20rpx;
  207. display: flex;
  208. margin-bottom: 25rpx;
  209. border-radius: 18rpx;
  210. .image{
  211. margin-right: 40rpx;
  212. image{
  213. border-radius: 18rpx;
  214. width: 238rpx;
  215. height: 151rpx;
  216. }
  217. }
  218. }
  219. .right-title{
  220. display: flex;
  221. flex-direction: column;
  222. justify-content: space-between;
  223. .title{
  224. word-break:break-all;
  225. line-height: 36rpx;
  226. margin-top: 4rpx;
  227. color: #181818;
  228. font-size: 28rpx;
  229. font-weight: 400;
  230. }
  231. .video-num{
  232. margin-bottom: 4rpx;
  233. color: #999999;
  234. font-weight: 400;
  235. font-size: 24rpx;
  236. }
  237. }
  238. }
  239. }
  240. .choice-course{
  241. background-color: #0B844A;
  242. display: flex;
  243. align-items: center;
  244. white-space: nowrap;
  245. overflow-x: auto;
  246. -webkit-overflow-scrolling: touch;
  247. color: #ffffff;
  248. padding: 38rpx 33rpx 19rpx 30rpx;
  249. padding-right: 20rpx;
  250. .item:last-child{
  251. margin-right: 33rpx;
  252. }
  253. .item{
  254. margin-right: 33rpx;
  255. padding-bottom: 19rpx;
  256. margin-bottom: 10rpx;
  257. font-size: 28rpx;
  258. font-weight: Medium;
  259. color: rgba(255,255,255,1);
  260. position: relative;
  261. }
  262. .itemActive:before{
  263. content: "";
  264. position: absolute;
  265. left: 25%;
  266. bottom: 0;
  267. width: 50%;
  268. height: 2rpx;
  269. background-color: #FFFFFF;
  270. }
  271. .itemActive{
  272. font-size: 32rpx;
  273. font-weight: 700;
  274. }
  275. }
  276. }
  277. </style>