floatButton.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <template>
  2. <view class="btn-group">
  3. <view class="btn" @tap="toShare()" v-if="isShare">
  4. <text class="iconfont icon-fenxiang"></text>
  5. <text class="text">分享</text>
  6. </view>
  7. <view class="btn" @tap="toCart()" v-if="isCart">
  8. <text class="iconfont icon-gouwuche"></text>
  9. <text class="text">购物车</text>
  10. </view>
  11. <button class="btn" open-type="contact" v-if="isService">
  12. <text class="iconfont icon-kefu"></text>
  13. <text class="text">在线客服</text>
  14. </button>
  15. </view>
  16. </template>
  17. <script>
  18. export default {
  19. props: {
  20. isDock: {
  21. type: Boolean,
  22. default: false,
  23. },
  24. customBar: {
  25. type: Boolean,
  26. default: false,
  27. },
  28. },
  29. data() {
  30. return {};
  31. },
  32. computed: {
  33. curRoute() {
  34. let routes = getCurrentPages();
  35. return routes[routes.length - 1].route;
  36. },
  37. isCart() {
  38. return ![
  39. 'pages/login/index',
  40. 'pages/cart/index',
  41. 'pages/mine/index',
  42. 'packageGoods/pages/detail',
  43. 'packageGoods/pages/order',
  44. 'pages/mine/order/detail',
  45. 'packageGoods/pages/coupon',
  46. 'pages/mine/coupon/list',
  47. ].includes(this.curRoute);
  48. },
  49. isService() {
  50. return ![
  51. 'pages/login/index',
  52. 'pages/cart/index',
  53. 'pages/mine/index',
  54. 'packageGoods/pages/order',
  55. 'pages/mine/order/detail',
  56. 'packageGoods/pages/coupon',
  57. 'pages/mine/coupon/list',
  58. ].includes(this.curRoute);
  59. },
  60. isShare() {
  61. return [
  62. 'pages/mine/groupbuy/list',
  63. // 'packageGoods/pages/activity',
  64. ].includes(this.curRoute);
  65. },
  66. },
  67. mounted() {},
  68. methods: {
  69. toCart() {
  70. uni.switchTab({
  71. url: '/pages/cart/index',
  72. });
  73. },
  74. toShare() {
  75. uni.$emit('hanbleShare');
  76. },
  77. },
  78. };
  79. </script>
  80. <style lang="scss" scoped>
  81. .btn-group {
  82. position: fixed;
  83. bottom: 20vh;
  84. right: 20rpx;
  85. z-index: 999998;
  86. .btn {
  87. width: 92rpx;
  88. height: 92rpx;
  89. background: #ffffff;
  90. box-shadow: 0 2rpx 8rpx 2rpx rgba(0, 0, 0, 0.3);
  91. transition: all 0.5s;
  92. text-align: center;
  93. border-radius: 50%;
  94. color: #333333;
  95. margin-top: 15rpx;
  96. display: flex;
  97. flex-direction: column;
  98. align-items: center;
  99. justify-content: center;
  100. padding: 0;
  101. padding-bottom: 8rpx;
  102. line-height: 1;
  103. box-sizing: border-box;
  104. &::after {
  105. border: none;
  106. }
  107. .iconfont {
  108. font-size: 44rpx;
  109. }
  110. .text {
  111. font-size: 18rpx;
  112. margin-top: 6rpx;
  113. }
  114. }
  115. }
  116. </style>