footer.wpy 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <style lang='less' scoped>
  2. .footer {
  3. position: absolute;
  4. bottom: 68rpx;
  5. left: 50%;
  6. transform: translate(-50%);
  7. .footer-content {
  8. display: flex;
  9. justify-content: center;
  10. align-items: center;
  11. .text {
  12. font-family: PingFang SC;
  13. font-size: 28rpx;
  14. font-weight: 400;
  15. line-height: 44rpx;
  16. color: #8b949e;
  17. padding: 0 16rpx;
  18. }
  19. .footer-line {
  20. width: 40rpx;
  21. border: 2rpx;
  22. border: 2rpx solid #c4c9cf;
  23. }
  24. }
  25. .btn-box {
  26. display: flex;
  27. align-items: center;
  28. justify-content: center;
  29. width: 272rpx;
  30. height: 88rpx;
  31. border-radius: 40px;
  32. background: #ffffff;
  33. .text {
  34. margin-left: 16rpx;
  35. font-family: PingFang SC;
  36. font-size: 28rpx;
  37. font-weight: 400;
  38. line-height: 44rpx;
  39. color: #626c78;
  40. }
  41. .imgSt {
  42. width: 48rpx;
  43. height: 48rpx;
  44. }
  45. }
  46. }
  47. </style>
  48. <!-- 个人中心 -->
  49. <template>
  50. <div class="footer">
  51. <div
  52. class="btn-box"
  53. v-if="IsShowPhone && !justText"
  54. @click="callPhone"
  55. >
  56. <image
  57. class="imgSt"
  58. src="{{ h5StaticPath }}/icon-phone.svg"
  59. />
  60. <span class="text">客服电话</span>
  61. </div>
  62. <div
  63. class="footer-content"
  64. v-else
  65. >
  66. <div class="footer-line"></div>
  67. <div class="text">小飒智控</div>
  68. <div class="footer-line"></div>
  69. </div>
  70. </div>
  71. </template>
  72. <script>
  73. import wepy from '@wepy/core'
  74. import config from '@/config'
  75. import { customerservice } from '../../api/common.js'
  76. wepy.component({
  77. name: 'Footer',
  78. props: {
  79. justText: {
  80. type: Boolean,
  81. default: false
  82. }
  83. },
  84. data: {
  85. h5StaticPath: config.h5StaticPath + '/page-personalCenter',
  86. IsShowPhone: true,
  87. phone: null
  88. },
  89. computed: {},
  90. ready() {
  91. this.getPhone()
  92. },
  93. methods: {
  94. callPhone() {
  95. this.$emit('callPhone', this.phone)
  96. },
  97. getPhone() {
  98. if (!this.justText) return
  99. customerservice().then(res => {
  100. let phone = null
  101. if (res.count) {
  102. phone = res.content[0].phone
  103. this.IsShowPhone = true
  104. } else {
  105. this.IsShowPhone = false
  106. }
  107. this.phone = phone
  108. this.$emit('custome-phone-show', phone)
  109. })
  110. }
  111. }
  112. })
  113. </script>