more-app.vue 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390
  1. <template>
  2. <view :class="[key === $keys.ZW_MOER_APPS ? 'zw-page' : 'sh-page']">
  3. <!-- keys.ZW_MOER_APPS / keys.SH_MOER_APPS -->
  4. <navbar :config="config" backColor="#999999"></navbar>
  5. <view class="page-search" :style="{'height':searchHeight+ 'px'}">
  6. <view class="search-box" @click="onSearch()">
  7. <view class="search-input">
  8. <text class="search-icon iconfont_yige">&#xe653;</text>
  9. <text>搜索应用</text>
  10. </view>
  11. <text class="search-text">搜索</text>
  12. </view>
  13. </view>
  14. <!-- :class="{'skeleton-box':skeletonLoading}" -->
  15. <view class="page-content" :class="{'skeleton-box':skeletonLoading}"
  16. :style="{'padding-top': cutHeight + 'rpx'}">
  17. <scroll-view class="page-left skeleton-fillet" :style="{'height':pageHeight+ 'px'}" scroll-y="true">
  18. <block v-for="(item,index) in ChannelDict">
  19. <view :class="['page-left-item zw-one-row' , activeIndex == index ? 'active-left-item' : '' ]"
  20. @click.stop="openTyle(index)">
  21. <text class="label-name skeleton-fillet">{{item.name}}</text>
  22. </view>
  23. </block>
  24. </scroll-view>
  25. <scroll-view :scroll-into-view="scrollIntoView" class="page-right" :class="{'skeleton-box':skeletonLoading}"
  26. :style="{'height':pageHeight+ 'px'}" scroll-y="true" @scroll="scrollService">
  27. <block v-for="(item,index) in ChannelDict">
  28. <view class="service" :id="`service_${index}`">
  29. <template v-if="item.thirdApplications && item.thirdApplications.length > 0">
  30. <view class="page-left-item">
  31. <zw-service-list :serviceObj='item' />
  32. </view>
  33. </template>
  34. <template v-if="item.childrenList && item.childrenList.length > 0">
  35. <block v-for="(citem,index) in item.childrenList">
  36. <template v-if="citem.thirdApplications && citem.thirdApplications.length > 0">
  37. <view class="page-left-item">
  38. <zw-service-list :serviceObj='citem' />
  39. </view>
  40. </template>
  41. </block>
  42. </template>
  43. </view>
  44. </block>
  45. </scroll-view>
  46. </view>
  47. </view>
  48. </template>
  49. <script>
  50. import {
  51. http
  52. } from '@/common/request';
  53. let app = getApp();
  54. let oldScrollNum = 0;
  55. import {
  56. getChannelDictCode
  57. } from "@/api/government.js"
  58. import {
  59. openSearch
  60. } from "./conmon.js"
  61. const setSkeleton = () => {
  62. let obj = {
  63. name: '',
  64. thirdApplications: []
  65. };
  66. for (let i = 1; i <= 12; i++) {
  67. obj.thirdApplications.push({
  68. thirdName: '',
  69. icon: ''
  70. })
  71. };
  72. return obj;
  73. }
  74. export default {
  75. data() {
  76. return {
  77. skeletonLoading: true,
  78. key: '',
  79. cutHeight: 10,
  80. defaultScrollTop: 0,
  81. scrollIntoView: '',
  82. activeIndex: 0,
  83. pageHeight: 0,
  84. searchHeight: 0,
  85. config: {
  86. back: true,
  87. title: '',
  88. color: 'black',
  89. backgroundColor: [1, '#fff'],
  90. statusBarFontColor: 'black'
  91. },
  92. ChannelDict: [],
  93. scrollStatus: true,
  94. RightTopArr: [],
  95. oldScrollNum: 0,
  96. }
  97. },
  98. onLoad(opt) {
  99. this.key = opt.key;
  100. this.config.title = opt.title || '更多应用'
  101. const {
  102. statusBarHeight,
  103. screenHeight,
  104. viewHeight,
  105. navHeight
  106. } = app.globalData;
  107. this.searchHeight = uni.upx2px(120);
  108. this.defaultScrollTop = statusBarHeight + navHeight + this.searchHeight;
  109. // 屏幕高度 - 状态栏高度 - 标题高度 - 搜索栏高度
  110. this.pageHeight = screenHeight - this.defaultScrollTop - uni.upx2px(this.cutHeight);
  111. // 初始化.添加骨架屏
  112. if (this.skeletonLoading) {
  113. for (let i = 1; i <= 1; i++) {
  114. this.ChannelDict.push(setSkeleton())
  115. };
  116. }
  117. this.getList(this.key)
  118. },
  119. created() {
  120. },
  121. methods: {
  122. onSearch() {
  123. openSearch()
  124. },
  125. getList(key) {
  126. try {
  127. getChannelDictCode(key).then(res => {
  128. setTimeout(() => {
  129. this.ChannelDict = res.data
  130. this.$nextTick(() => {
  131. this.getNodesInfo();
  132. })
  133. this.$forceUpdate()
  134. }, this.skeletonLoading ? this.$skeletonTime : 0);
  135. }).catch(err => {}).finally(() => {
  136. setTimeout(() => {
  137. this.skeletonLoading = false;
  138. }, this.skeletonLoading ? this.$skeletonTime : 0);
  139. })
  140. } catch (e) {}
  141. },
  142. openTyle(index) {
  143. this.scrollStatus = false;
  144. this.activeIndex = index
  145. this.scrollIntoView = `service_${index}`
  146. setTimeout(() => {
  147. this.scrollStatus = true;
  148. }, 200)
  149. },
  150. getNodesInfo() {
  151. new Promise(resolve => {
  152. let selectorQuery = uni.createSelectorQuery();
  153. // 获取节点的位置信息
  154. selectorQuery.selectAll('.service').boundingClientRect((rects) => {
  155. // 如果节点尚未生成,rects值为[](因为用selectAll,所以返回的是数组),循环调用执行
  156. if (!rects.length) {
  157. setTimeout(() => {
  158. this.getNodesInfo();
  159. }, 10);
  160. return;
  161. }
  162. // 生成之后开始添加进去数组
  163. rects.forEach((rect) => {
  164. let tops = rect.top - rects[0]
  165. .top; // 这里减去rects[0].top,是因为第一项顶部不是贴到导航栏=>每一个商品距离顶部的高度,如果此页面顶部没有其他的view那就不用减去rects[0].top,自己视情况而定。
  166. this.RightTopArr.push({
  167. height: tops,
  168. id: rect.id
  169. });
  170. resolve();
  171. })
  172. }).exec()
  173. });
  174. },
  175. scrollService(event) {
  176. // ,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
  177. if (!this.scrollStatus) return
  178. const {
  179. scrollTop
  180. } = event.detail;
  181. let scrollNums = scrollTop;
  182. if (this.oldScrollNum > scrollTop) {
  183. scrollNums = scrollTop + 80;
  184. };
  185. try {
  186. this.RightTopArr.forEach((el, index) => {
  187. let data = this.RightTopArr[index];
  188. if (scrollNums >= data.height && index == this.RightTopArr.length - 1 ? true :
  189. scrollNums <
  190. this
  191. .RightTopArr[parseInt(index) + 1].height) {
  192. this.activeIndex = index
  193. // console.log('index', this.activeIndex)
  194. throw new Error()
  195. }
  196. })
  197. } catch (e) {
  198. //TODO handle the exception
  199. }
  200. this.oldScrollNum = scrollTop;
  201. }
  202. },
  203. watch: {
  204. }
  205. }
  206. </script>
  207. <style>
  208. page {
  209. background-color: #F5F5F5;
  210. }
  211. </style>
  212. <style lang="scss" scoped>
  213. .page-content {
  214. width: 100%;
  215. display: flex;
  216. justify-content: space-between;
  217. align-items: stretch;
  218. .page-left {
  219. flex-shrink: 0;
  220. padding: 0 10rpx 10rpx 0;
  221. box-sizing: border-box;
  222. width: 183rpx;
  223. border-right: 1rpx solid #f1f1f1;
  224. .page-left-item {
  225. width: 100%;
  226. text-align: center;
  227. height: 90rpx;
  228. line-height: 1.4;
  229. border-radius: 0px 20rpx 20rpx 0px;
  230. font-size: 24rpx;
  231. font-family: PingFang SC, PingFang SC-Regular;
  232. font-weight: 400;
  233. color: #808080;
  234. margin-bottom: 15rpx;
  235. display: flex;
  236. align-items: center;
  237. .label-name {
  238. display: inline-flex;
  239. align-items: center;
  240. justify-content: center;
  241. width: 100%;
  242. min-height: 50rpx;
  243. }
  244. }
  245. .active-left-item {
  246. background-color: #fff;
  247. position: relative;
  248. font-size: 24rpx;
  249. font-family: PingFang SC, PingFang SC-Bold;
  250. font-weight: 700;
  251. text-align: center;
  252. &::before {
  253. content: '';
  254. position: absolute;
  255. left: 0;
  256. top: 50%;
  257. transform: translateY(-50%);
  258. width: 8rpx;
  259. height: 40rpx;
  260. border-radius: 0 8rpx 8rpx 0;
  261. }
  262. }
  263. }
  264. .page-right {
  265. flex: 1;
  266. background-color: #fff;
  267. border-radius: 30rpx 0px 0px 0px;
  268. // .page-left-item {
  269. // padding: 0 30rpx;
  270. // }
  271. }
  272. }
  273. .page-search {
  274. width: 100%;
  275. background-color: #fff;
  276. display: inline-flex;
  277. justify-content: center;
  278. align-items: center;
  279. .search-box {
  280. width: 690rpx;
  281. height: 80rpx;
  282. background-color: #F3F2F2;
  283. border-radius: 40rpx;
  284. display: flex;
  285. justify-content: space-between;
  286. align-items: center;
  287. color: #787878;
  288. .search-input {
  289. width: calc(100% - 134rpx);
  290. padding: 0 30rpx;
  291. display: flex;
  292. align-items: center;
  293. .search-icon {
  294. font-size: 34rpx;
  295. color: #333333;
  296. }
  297. text+text {
  298. font-size: 28rpx;
  299. font-family: PingFang SC, PingFang SC-Regular;
  300. font-weight: 400;
  301. color: #b3b3b3;
  302. letter-spacing: -0.56px;
  303. padding-left: 12rpx;
  304. }
  305. }
  306. .search-text {
  307. flex-shrink: 0;
  308. width: 134rpx;
  309. height: 100%;
  310. text-align: center;
  311. line-height: 80rpx;
  312. border-radius: 40px;
  313. font-size: 28rpx;
  314. font-family: PingFang SC, PingFang SC-Regular;
  315. font-weight: 400;
  316. color: #ffffff;
  317. }
  318. }
  319. }
  320. .zw-page {
  321. .page-search {
  322. .search-text {
  323. background: linear-gradient(90deg, #46c8d5, #3cb7d2);
  324. }
  325. }
  326. .page-content {
  327. .page-left {
  328. .active-left-item {
  329. color: #3db8d2;
  330. &::before {
  331. background: linear-gradient(180deg, #45c7d5, #3db9d3);
  332. }
  333. }
  334. }
  335. }
  336. }
  337. .sh-page {
  338. .page-search {
  339. .search-text {
  340. background: linear-gradient(90deg, #feba74, #fa6037);
  341. }
  342. }
  343. .page-content {
  344. .page-left {
  345. .active-left-item {
  346. color: #FA6037;
  347. &::before {
  348. background: linear-gradient(180deg, #fdb872, #fa6037);
  349. }
  350. }
  351. }
  352. }
  353. }
  354. </style>