club-portrait.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373
  1. <template>
  2. <view class="container clearfix">
  3. <view class="charts-navbar" id="topBar">
  4. <view
  5. class="nav-item tui-skeleton-fillet"
  6. v-for="(nav, index) in navBarList"
  7. :key="index"
  8. :class="{ current: tabCurrentIndex === nav.index }"
  9. @click="tabChange(nav.index)"
  10. >
  11. <text>{{ nav.name }}</text> <text class="line"></text>
  12. </view>
  13. </view>
  14. <view class="charts-content">
  15. <!-- 重点资料 -->
  16. <view class="charts-box charts-box0" id="charts-box0"> <echartInfo ref="echart-info" /> </view>
  17. <!-- 订单 -->
  18. <view class="charts-box charts-box1" id="charts-box1"> <echartOrder ref="echart-order" /> </view>
  19. <!-- 关键词 -->
  20. <view class="charts-box charts-box2" id="charts-box2"> <echartKeyword ref="echart-keyword" /> </view>
  21. <!-- 咨询记录 -->
  22. <view class="charts-box charts-box3" id="charts-box3"> <echartContact ref="echart-contact" /> </view>
  23. <!-- 访问记录 -->
  24. <view class="charts-box charts-box4" id="charts-box4"> <echartService ref="echart-service" /> </view>
  25. </view>
  26. </view>
  27. </template>
  28. <script>
  29. import { mapState, mapMutations } from 'vuex'
  30. import { debounce } from '@/common/config/common.js'
  31. import echartInfo from './components/echart-info'
  32. import echartOrder from './components/echart-order'
  33. import echartKeyword from './components/echart-keyword'
  34. import echartContact from './components/echart-contact'
  35. import echartService from './components/echart-service'
  36. const observers = {}
  37. export default {
  38. components: {
  39. echartInfo,
  40. echartOrder,
  41. echartKeyword,
  42. echartContact,
  43. echartService
  44. },
  45. data() {
  46. return {
  47. navBarList: [
  48. { name: '重点资料', index: 0 },
  49. { name: '订单数据', index: 1 },
  50. { name: '搜索关键词', index: 2 },
  51. { name: '咨询记录', index: 3 },
  52. { name: '访问记录', index: 4 }
  53. ],
  54. tabCurrentIndex: 0,
  55. anchorList: [], // 锚点元素节点信息
  56. anchorStatus: [0, 0, 0, 0, 0] // 分别代表5个锚点区域的开关 0:关 1:开
  57. }
  58. },
  59. onLoad(option) {},
  60. onReady() {
  61. console.log('onReady')
  62. // if (!this.isRequest) {
  63. // this.getAnchorSection()
  64. // }
  65. setTimeout(() => {
  66. this.getAnchorSection()
  67. }, 2000)
  68. },
  69. filters: {},
  70. computed: {},
  71. methods: {
  72. tabChange(index) {
  73. this.tabCurrentIndex = index
  74. this.scrollToAnchor()
  75. },
  76. // 获取锚点元素信息
  77. getAnchorSection() {
  78. const query = uni.createSelectorQuery().in(this)
  79. query.selectAll('.charts-box').boundingClientRect(data => {
  80. if (data.length > 0) {
  81. this.anchorList = data
  82. this.anchorList.forEach((dom, index) => {
  83. uni.createSelectorQuery().select('.charts-content').boundingClientRect(data => {
  84. //目标节点、也可以是最外层的父级节点
  85. uni.createSelectorQuery().select(`#${dom.id}`).boundingClientRect(res => {
  86. //dom
  87. dom.top = res.top - data.top + 5
  88. }).exec()
  89. }).exec()
  90. })
  91. console.log(this.anchorList)
  92. console.log('tabs is ready')
  93. // clearInterval(this.selectorTimer)
  94. this.observerAnchor(data)
  95. }
  96. }).exec()
  97. },
  98. // 滚动到锚点
  99. scrollToAnchor() {
  100. // const selector = '#anchor' + (this.currentTab + 1)
  101. let scrollTop = 0
  102. const query = uni.createSelectorQuery().in(this)
  103. if (this.tabCurrentIndex > 0) {
  104. scrollTop = this.anchorList[this.tabCurrentIndex].top
  105. }
  106. uni.pageScrollTo({
  107. scrollTop: scrollTop
  108. })
  109. },
  110. // 为需要观测的区域创建观测者
  111. observerAnchor(selectorList = []) {
  112. const height = uni.getSystemInfoSync().windowHeight - 70
  113. selectorList.forEach((selector, index) => {
  114. observers[selector.id] = uni.createIntersectionObserver(this)
  115. observers[selector.id].relativeToViewport({ bottom: -height }).observe(`#${selector.id}`, res => {
  116. if (res.intersectionRatio > 0) {
  117. this.anchorStatus[index] = 1
  118. // console.log(index, `当前区域为${selector.id}标签选择器的区域...`)
  119. } else {
  120. this.anchorStatus[index] = 0
  121. // console.log(index, `离开区域为${selector.id}标签选择器的区域...`)
  122. }
  123. })
  124. })
  125. },
  126. // 设置currentTab
  127. setCurrentTab: debounce(function() {
  128. const index = this.anchorStatus.lastIndexOf(1)
  129. if (this.tabCurrentIndex !== index) this.tabCurrentIndex = index
  130. }, 200)
  131. },
  132. onPageScroll(e) {
  133. this.scrollTop = e.scrollTop
  134. },
  135. onShow() {}
  136. }
  137. </script>
  138. <style lang="scss">
  139. page {
  140. background-color: #f5f5f5 !important;
  141. }
  142. .container {
  143. width: 100%;
  144. height: auto;
  145. box-sizing: border-box;
  146. padding: 0 24rpx;
  147. padding-top: 122rpx;
  148. }
  149. .charts-navbar {
  150. width: 100%;
  151. height: 90rpx;
  152. background-color: #ffffff;
  153. box-sizing: border-box;
  154. padding: 20rpx 0;
  155. display: flex;
  156. position: fixed;
  157. top: 0;
  158. left: 0;
  159. z-index: 99;
  160. .nav-item {
  161. display: flex;
  162. flex: 1;
  163. justify-content: center;
  164. align-items: center;
  165. height: 50rpx;
  166. font-size: $font-size-28;
  167. color: $text-color;
  168. position: relative;
  169. float: left;
  170. position: relative;
  171. .line {
  172. width: 60rpx;
  173. height: 2px;
  174. border-radius: 1px;
  175. background: #ffffff;
  176. position: absolute;
  177. bottom: 0;
  178. left: 50%;
  179. margin-left: -30rpx;
  180. }
  181. &.current {
  182. color: $color-system;
  183. .line {
  184. background: $color-system;
  185. }
  186. }
  187. }
  188. }
  189. .charts-content{
  190. width: 100%;
  191. height: auto;
  192. }
  193. .charts-box {
  194. width: 100%;
  195. min-height: 500rpx;
  196. box-sizing: border-box;
  197. padding: 34rpx 24rpx;
  198. background-color: #fff;
  199. margin-bottom: 32rpx;
  200. border-radius: 16rpx;
  201. float: left;
  202. .echart-content {
  203. width: 100%;
  204. .echart-title {
  205. width: 100%;
  206. height: 96rpx;
  207. float: left;
  208. box-sizing: border-box;
  209. padding: 16rpx 0 24rpx 0;
  210. .e-icon {
  211. width: 56rpx;
  212. height: 56rpx;
  213. float: left;
  214. text-align: center;
  215. line-height: 56rpx;
  216. border-radius: 50%;
  217. &.e1 {
  218. background-color: #1890f9;
  219. }
  220. &.e2 {
  221. background-color: #e15616;
  222. }
  223. &.e3 {
  224. background-color: #f2637b;
  225. }
  226. &.e4 {
  227. background-color: #f99e0a;
  228. }
  229. &.e5 {
  230. background-color: #36cbcb;
  231. }
  232. .iconfont {
  233. font-size: 30rpx;
  234. color: #fff;
  235. }
  236. }
  237. .e-name {
  238. float: left;
  239. line-height: 56rpx;
  240. font-size: 30rpx;
  241. margin-left: 24rpx;
  242. color: #333;
  243. }
  244. .e-start {
  245. float: right;
  246. line-height: 56rpx;
  247. font-size: 28rpx;
  248. color: #34cc8c;
  249. }
  250. }
  251. .echart-main {
  252. width: 100%;
  253. height: 404rpx;
  254. box-sizing: border-box;
  255. padding: 32rpx 40rpx;
  256. position: relative;
  257. float: left;
  258. background-color: #f7f7f7;
  259. .echart-text {
  260. width: 100%;
  261. line-height: 40rpx;
  262. margin-bottom: 20rpx;
  263. font-size: 28rpx;
  264. color: #333;
  265. float: left;
  266. .label {
  267. color: #999;
  268. text-align-last: justify;
  269. }
  270. }
  271. .echart-next {
  272. width: 100rpx;
  273. height: 100%;
  274. position: absolute;
  275. right: 10rpx;
  276. top: 0;
  277. line-height: 404rpx;
  278. font-size: 28rpx;
  279. color: #1890f9;
  280. }
  281. }
  282. .echart-search {
  283. width: 100%;
  284. height: auto;
  285. float: left;
  286. margin-bottom: 58rpx;
  287. .echart-search-text {
  288. width: 100%;
  289. height: 34rpx;
  290. margin-bottom: 20rpx;
  291. .search-text {
  292. float: left;
  293. line-height: 34rpx;
  294. font-size: 24rpx;
  295. color: #333;
  296. margin-right: 20rpx;
  297. text {
  298. color: #e15616;
  299. }
  300. }
  301. }
  302. .echart-search-date {
  303. width: 100%;
  304. height: 56rpx;
  305. box-sizing: border-box;
  306. .line {
  307. color: #999999;
  308. float: left;
  309. line-height: 56rpx;
  310. margin: 0 20rpx;
  311. }
  312. .echart-search-date-input {
  313. width: 228rpx;
  314. height: 56rpx;
  315. border: 1px solid #e2e2e2;
  316. border-radius: 8rpx;
  317. box-sizing: border-box;
  318. padding: 0 20rpx;
  319. line-height: 56rpx;
  320. float: left;
  321. position: relative;
  322. .input-text {
  323. display: block;
  324. height: 56rpx;
  325. font-size: 26rpx;
  326. color: #666666;
  327. }
  328. .icon-riqi {
  329. color: #999;
  330. display: block;
  331. width: 40rpx;
  332. height: 56rpx;
  333. position: absolute;
  334. right: 10rpx;
  335. top: 0;
  336. line-height: 56rpx;
  337. }
  338. }
  339. }
  340. .echart-search-time {
  341. width: 100%;
  342. height: 40rpx;
  343. margin-top: 24rpx;
  344. .time-tab {
  345. width: 80rpx;
  346. height: 40rpx;
  347. float: left;
  348. border-radius: 20rpx;
  349. margin-right: 24rpx;
  350. box-sizing: border-box;
  351. border: 1px solid #b2b2b2;
  352. line-height: 38rpx;
  353. font-size: 24rpx;
  354. text-align: center;
  355. color: #999;
  356. &.current {
  357. background-color: #fef6f3;
  358. border-color: #e15616;
  359. color: #e15616;
  360. }
  361. }
  362. }
  363. }
  364. .echart-mains {
  365. width: 100%;
  366. min-height: 400rpx;
  367. float: left;
  368. }
  369. }
  370. }
  371. </style>