scrollTop.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <template name="scrollTop">
  2. <!-- 商品详情价格判断 -->
  3. <view>
  4. <view class="scrollTop" :style="{ bottom: bottom + 'rpx' }">
  5. <view class="icon msg" v-if="isShowKefu">
  6. <!-- #ifdef MP-WEIXIN -->
  7. <button class="contact-btn" open-type="contact" @bindcontact="handleContact">
  8. <text class="iconfont icon-zixunrexian"></text>
  9. </button>
  10. <!-- #endif -->
  11. </view>
  12. <view class="icon top" @click="onPageScrollTop" :class="isScrollTop ? 'show' : 'none'">
  13. <text class="iconfont icon-zhiding"></text>
  14. </view>
  15. </view>
  16. </view>
  17. </template>
  18. <script>
  19. export default {
  20. name: 'scrollTop',
  21. props: {
  22. bottom: {
  23. type: Number,
  24. default: 100
  25. },
  26. isScrollTop: {
  27. type: Boolean,
  28. default: false
  29. },
  30. isShowKefu:{
  31. type: Boolean,
  32. default: true
  33. },
  34. isShowSupplier: {
  35. // 是否展示供应商服务图标
  36. type: Boolean,
  37. default: false
  38. }
  39. },
  40. data() {
  41. return {
  42. isPhone: false,
  43. telPhone: '0755-22907771',
  44. mobilePhone: '15338851365',
  45. isShowIcon: true
  46. }
  47. },
  48. created() {},
  49. methods: {
  50. onPageScrollTop() {
  51. uni.pageScrollTo({
  52. scrollTop: 0,
  53. duration: 600
  54. })
  55. },
  56. handleContact(e) {
  57. console.log(e.detail.path)
  58. console.log(e.detail.query)
  59. }
  60. }
  61. }
  62. </script>
  63. <style lang="scss">
  64. .scrollTop {
  65. width: 80rpx;
  66. height: 120rpx;
  67. position: fixed;
  68. right: 20rpx;
  69. z-index: 99;
  70. .icon {
  71. width: 80rpx;
  72. height: 80rpx;
  73. border-radius: 50%;
  74. float: left;
  75. margin: 10rpx 0;
  76. line-height: 80rpx;
  77. text-align: center;
  78. .contact-btn {
  79. width: 80rpx;
  80. height: 80rpx;
  81. background-color: rgba(0, 0, 0, 0);
  82. line-height: 80rpx;
  83. .iconfont {
  84. font-size: $font-size-44;
  85. color: #ffffff;
  86. }
  87. }
  88. &.msg {
  89. background-image: linear-gradient(0deg, #f28e31 0%, #ff5b00 100%);
  90. }
  91. &.top {
  92. background-color: rgba(0, 0, 0, 0.4);
  93. &.show {
  94. opacity: 1;
  95. }
  96. &.none {
  97. opacity: 0;
  98. }
  99. }
  100. .iconfont {
  101. font-size: $font-size-44;
  102. color: #ffffff;
  103. }
  104. }
  105. }
  106. </style>