index.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414
  1. <template>
  2. <view class="content">
  3. <!-- 导航 -->
  4. <view class="nav">
  5. <view class="leftView"></view>
  6. <view class="navTitle">门店学院</view>
  7. <view class="rightView">
  8. <image src="../../static/mobile/icona_fenlei@2x.png" mode="" class="rightImg" @click="goSift"></image>
  9. <image src="../../static/mobile/icon_search@2x.png" mode="" class="rightImg"
  10. style="margin-left: 40rpx;" @click="goSearch"></image>
  11. </view>
  12. </view>
  13. <!-- 推荐 -->
  14. <view class="commend" v-if="bannerArr.length != 0">
  15. <view class="top">
  16. <image src="../../static/mobile/icon_tuijian@2x.png" mode="" style="width: 28rpx; height: 28rpx;">
  17. <text class="tuijian">推荐文章</text>
  18. </image>
  19. </view>
  20. <!-- item -->
  21. <view class="scrollBg">
  22. <scroll-view scroll-x="true" @scroll="scroll">
  23. <view class="itemBg">
  24. <view v-for="(item,index) in bannerArr" :key="index" class="item" @click="goDetail(item)">
  25. <image :src="item.logoImg" mode="" class="swpImg"></image>
  26. <view class="title">{{item.title}}</view>
  27. <view class="title2" @click.stop="goTuijianTab(item)">{{item.categoryName}}</view>
  28. </view>
  29. </view>
  30. </scroll-view>
  31. </view>
  32. </view>
  33. <!-- 分类 -->
  34. <view v-for="(item,index) in itemArr" :key="index">
  35. <view class="fenleiBg">
  36. <!-- 头 -->
  37. <view class="fenTop">
  38. <view class="leftTop">
  39. <view class="tuijian">{{item.name}}</view>
  40. <view class="sum">共{{item.count}}篇文章</view>
  41. </view>
  42. <view class="rightTop">
  43. <view class="" @click="goTopTab(item)">查看全部
  44. <image src="../../static/mobile/icon_arrow@2x.png" mode=""
  45. style="width: 11rpx; height: 18rpx; margin-left: 10rpx;"></image>
  46. </view>
  47. </view>
  48. </view>
  49. <!-- item -->
  50. <view class="itemBg">
  51. <view v-for="(item2,index2) in item.children" :key="index2" v-if="index2<2" class="twoItem" @click="goList(item2)">
  52. <image :src="item2.logoImg" mode="" class="img2"></image>
  53. <view class="title">{{item2.title}}</view>
  54. </view>
  55. </view>
  56. </view>
  57. </view>
  58. <!-- 下拉菜单 -->
  59. <view class="sift" v-show="showSift" @click="goHide()">
  60. <view class="siftItemBg">
  61. <view v-for="(item,index) in siftData" :key="index" class="siftItem">
  62. <view @click="goTopTab(item)">{{item.name}}</view>
  63. </view>
  64. </view>
  65. </view>
  66. </view>
  67. </template>
  68. <script>
  69. export default {
  70. data() {
  71. return {
  72. bannerArr: [],
  73. scrollTop: 0,
  74. old: {
  75. scrollTop: 0
  76. },
  77. itemArr: [],
  78. showSift:false,
  79. siftData:[],
  80. }
  81. },
  82. onLoad() {
  83. this.getDetailData()
  84. this.getSiftData()
  85. },
  86. methods: {
  87. goHide(){
  88. this.showSift = false
  89. },
  90. goDetail(item){
  91. uni.navigateTo({
  92. url:'detail?id=' + item.id
  93. })
  94. },
  95. goTuijianTab(item){
  96. uni.navigateTo({
  97. url:'topTab?topCode=' + item.categoryCode + '&comment=' + item.comment + '&topName=' + item.categoryName
  98. })
  99. },
  100. goList(item){
  101. // 1分类2文章
  102. if (item.type == 1) {
  103. uni.navigateTo({
  104. url:'list?topCode=' + item.code + '&comment=' + item.comment + '&topName=' + item.name
  105. })
  106. }
  107. if (item.type == 2) {
  108. uni.navigateTo({
  109. url:'detail?id=' + item.id
  110. })
  111. }
  112. },
  113. goTopTab(item){
  114. this.showSift = false
  115. uni.navigateTo({
  116. url:'topTab?topCode=' + item.code + '&comment=' + item.comment + '&topName=' + item.name
  117. })
  118. },
  119. goSift(){
  120. this.showSift = !this.showSift
  121. },
  122. goSearch(){
  123. uni.navigateTo({
  124. url:'search'
  125. })
  126. },
  127. scroll: function(e) {
  128. console.log(e)
  129. this.old.scrollTop = e.detail.scrollTop
  130. },
  131. goNav(urlStr){
  132. uni.navigateTo({
  133. url:urlStr
  134. })
  135. },
  136. getDetailData() {
  137. uni.showLoading({
  138. title: '加载中'
  139. })
  140. let url = '/trainingOpenApi/indexData',
  141. params = {
  142. }
  143. this.$http(url, params, 'GET').then(res => {
  144. uni.hideLoading();
  145. var data = res.data
  146. // 处理 undefined和null转为空白字符串
  147. for (const key in data) {
  148. data[key] = this.$praseStrEmpty(data[key])
  149. }
  150. this.detailData = data
  151. this.bannerArr = this.detailData.recommendList
  152. this.itemArr = this.detailData.categoryList
  153. })
  154. },
  155. getSiftData() {
  156. uni.showLoading({
  157. title: '加载中'
  158. })
  159. let url = '/trainingOpenApi/allCategory',
  160. params = {
  161. }
  162. this.$http(url, params, 'GET').then(res => {
  163. uni.hideLoading();
  164. var data = res.data
  165. // 处理 undefined和null转为空白字符串
  166. for (const key in data) {
  167. data[key] = this.$praseStrEmpty(data[key])
  168. }
  169. this.siftData = data
  170. })
  171. },
  172. // 下拉刷新 上拉加载更多
  173. onPullDownRefresh() {
  174. // this.page = 1;
  175. // this.getItemData()
  176. this.getDetailData()
  177. setTimeout(function() {
  178. uni.stopPullDownRefresh();
  179. }, 1000);
  180. },
  181. // onReachBottom() {
  182. // this.page++;
  183. // this.getItemData()
  184. // },
  185. }
  186. }
  187. </script>
  188. <style scoped>
  189. .content {
  190. min-height: 100vh;
  191. background-color: #f4f5f7;
  192. padding-top: 88rpx;
  193. padding-bottom: 20rpx;
  194. }
  195. .nav {
  196. position: fixed;
  197. left: 0;
  198. top: 0;
  199. width: 100vw;
  200. height: 88rpx;
  201. background-color: #FFFFFF;
  202. display: flex;
  203. justify-content: space-between;
  204. align-items: center;
  205. z-index: 999;
  206. }
  207. .navTitle {
  208. font-size: 36rpx;
  209. font-weight: bold;
  210. color: #3c3c3c;
  211. }
  212. .leftView {
  213. width: 30%;
  214. }
  215. .rightView {
  216. width: 30%;
  217. display: flex;
  218. justify-content: flex-end;
  219. padding-right: 24rpx;
  220. }
  221. .rightImg {
  222. width: 40rpx;
  223. height: 40rpx;
  224. }
  225. .commend {
  226. background-color: #FFFFFF;
  227. margin: 20rpx 0;
  228. padding: 30rpx 25rpx;
  229. }
  230. .top {
  231. padding-bottom: 24rpx;
  232. }
  233. .tuijian {
  234. font-size: 32rpx;
  235. font-weight: bold;
  236. color: #3c3c3c;
  237. margin-left: 10rpx;
  238. }
  239. .scrollBg {
  240. background-color: #FFFFFF;
  241. }
  242. .scroll-view {
  243. white-space: nowrap;
  244. }
  245. .itemBg {
  246. display: flex;
  247. }
  248. .item {
  249. width: calc((100vw - 75rpx) / 2);
  250. margin-right: 25rpx;
  251. }
  252. .swpImg {
  253. border-radius: 10rpx;
  254. width: calc((100vw - 75rpx) / 2);
  255. height: 226rpx;
  256. }
  257. .title {
  258. font-size: 28rpx;
  259. font-weight: bold;
  260. color: #3c3c3c;
  261. /* 隐藏文字显示 ...不换行 */
  262. overflow: hidden;
  263. text-overflow: ellipsis;
  264. white-space: nowrap;
  265. margin: 14rpx 0;
  266. }
  267. .title2 {
  268. background: rgba(63, 144, 247, 0.1);
  269. font-size: 22rpx;
  270. color: #3F90F7;
  271. height: 36rpx;
  272. line-height: 36rpx;
  273. border-radius: 18rpx;
  274. padding: 3rpx 14rpx;
  275. width: 138rpx;
  276. margin-bottom: 10rpx;
  277. text-align: center;
  278. /* 隐藏文字显示 ...不换行 */
  279. overflow: hidden;
  280. text-overflow: ellipsis;
  281. white-space: nowrap;
  282. }
  283. .fenleiBg {
  284. background-color: #FFFFFF;
  285. margin: 20rpx 0;
  286. padding: 30rpx 25rpx;
  287. }
  288. .fenTop {
  289. padding-bottom: 24rpx;
  290. display: flex;
  291. justify-content: space-between;
  292. align-items: center;
  293. }
  294. .leftTop {
  295. display: flex;
  296. align-items: center;
  297. }
  298. .sum {
  299. font-size: 24rpx;
  300. color: #999999;
  301. margin-left: 16rpx;
  302. }
  303. .twoItem {
  304. width: calc((100vw - 75rpx) / 2);
  305. margin-right: 25rpx;
  306. }
  307. .img2 {
  308. width: calc((100vw - 75rpx) / 2);
  309. height: 226rpx;
  310. border-radius: 10rpx;
  311. }
  312. .sift{
  313. position: fixed;
  314. left: 0;
  315. top: 88rpx;
  316. width: 100vw;
  317. min-height: 100vh;
  318. background-color: rgba(0, 0, 0, 0.4);
  319. }
  320. .siftItemBg{
  321. background-color: #FFFFFF;
  322. width: 100%;
  323. height: 500rpx;
  324. overflow-y: scroll;
  325. }
  326. .siftItem{
  327. background-color: #FFFFFF;
  328. color: #333333;
  329. font-size: 30rpx;
  330. text-align: center;
  331. padding: 30rpx 0;
  332. }
  333. </style>