bottomSuspensionFrame.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <template>
  2. <swiper class="box" :current-item-id="current" circular vertical disable-touch>
  3. <swiper-item class="swiper-item" item-id="index">
  4. <view class="item" v-for="item in index" :key="item.name"
  5. @click="item.name == showPageName ? update() : onClick('index', item.name)">
  6. <u-loading-icon v-if="item.loading" mode="circle" />
  7. <text v-else :style="{ fontWeight: item.name == showPageName ? 'bold' : 'normal' }">
  8. {{ item.name }}
  9. </text>
  10. </view>
  11. <image class="image" src="/static/c+selected.svg" mode="widthFix"
  12. @click="onClick('cloud', cloudLastPage || '资料库')" />
  13. </swiper-item>
  14. <swiper-item class="swiper-item" item-id="cloud">
  15. <image class="image" src="/static/c+unselected.svg" mode="widthFix"
  16. @click="onClick('index', indexLastPage || '首页')" />
  17. <view class="item" v-for="item in cloud" :key="item.name"
  18. @click="item.name == showPageName ? update() : onClick('cloud', item.name)">
  19. <u-loading-icon v-if="item.loading" mode="circle" />
  20. <text v-else :style="{ fontWeight: item.name == showPageName ? 'bold' : 'normal' }">
  21. {{ item.name }}
  22. </text>
  23. </view>
  24. </swiper-item>
  25. </swiper>
  26. </template>
  27. <script>
  28. export default {
  29. data() {
  30. return {
  31. current: "index",
  32. showPageName: "",
  33. indexLastPage: '',
  34. cloudLastPage: '',
  35. index: [{
  36. name: "首页"
  37. }, {
  38. name: "活动"
  39. }, {
  40. name: "案例"
  41. }, {
  42. name: "视频"
  43. }],
  44. cloud: [{
  45. name: "资料库"
  46. }, {
  47. name: "商学院"
  48. }, {
  49. name: "单品"
  50. }, {
  51. name: "首页"
  52. }],
  53. countDown: null,
  54. }
  55. },
  56. props: {
  57. onChange: {
  58. type: Function
  59. }
  60. },
  61. mounted() {
  62. // #ifdef !MP-WEIXIN
  63. this.onClick(this.$parent.$parent.swiperItemID, this.$parent.$parent.page)
  64. // #endif
  65. },
  66. methods: {
  67. onClick(current, name, update = false) {
  68. const item = this[current].find(v => v.name == name),
  69. that = this;
  70. if (typeof item.loading != 'boolean' || update) {
  71. item.loading = true;
  72. update = true;
  73. }
  74. this[current + 'LastPage'] = name;
  75. this.current = current;
  76. this.showPageName = name;
  77. this.$emit("onChange", {
  78. current, name, update, callBack
  79. })
  80. function callBack(loading = false) {
  81. item.loading = loading;
  82. that[current] = JSON.parse(JSON.stringify(that[current]));
  83. }
  84. },
  85. update() {
  86. if (this.countDown) {
  87. this.onClick(this.current, this.showPageName, true)
  88. } else {
  89. this.countDown = setTimeout(() => {
  90. clearTimeout(this.countDown)
  91. this.countDown = null;
  92. }, 300)
  93. }
  94. },
  95. },
  96. }
  97. </script>
  98. <style lang="scss">
  99. .box {
  100. position: fixed;
  101. width: 355px;
  102. height: 50px;
  103. background: rgba(255, 255, 255, 0.95);
  104. box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
  105. border-radius: 50px;
  106. left: 10px;
  107. bottom: 20px;
  108. .swiper-item {
  109. display: flex;
  110. align-items: center;
  111. justify-content: space-between;
  112. width: 355px;
  113. height: 50px;
  114. padding: 0 30px;
  115. box-sizing: border-box;
  116. .item {
  117. font-family: Source Han Sans SC, Source Han Sans SC;
  118. font-size: 16px;
  119. color: #666666;
  120. padding: 10px;
  121. }
  122. .image {
  123. width: 40px;
  124. padding: 4px;
  125. }
  126. }
  127. }
  128. </style>