index.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <template>
  2. <!-- 在线客服 -->
  3. <view v-if="!(params.type === 'chat' && !isMpWeiXin)" class="diy-service" :style="{ right: `${itemStyle.right}%`, bottom: `${itemStyle.bottom}%` }">
  4. <!-- 拨打电话 -->
  5. <block v-if="params.type === 'phone'">
  6. <view class="service-icon" @click="onMakePhoneCall">
  7. <image class="image" :src="params.image"></image>
  8. </view>
  9. </block>
  10. <!-- 在线聊天 -->
  11. <block v-else-if="params.type == 'chat'">
  12. <button open-type="contact" class="btn-normal">
  13. <view class="service-icon">
  14. <image class="image" :src="params.image"></image>
  15. </view>
  16. </button>
  17. </block>
  18. </view>
  19. </template>
  20. <script>
  21. export default {
  22. /**
  23. * 组件的属性列表
  24. * 用于组件自定义设置
  25. */
  26. props: {
  27. itemStyle: Object,
  28. params: Object
  29. },
  30. /**
  31. * 私有数据,组件的初始数据
  32. * 可用于模版渲染
  33. */
  34. data() {
  35. return {
  36. isMpWeiXin: false,
  37. isShow: true
  38. }
  39. },
  40. created() {
  41. // #ifdef MP-WEIXIN
  42. this.isMpWeiXin = true
  43. // #endif
  44. },
  45. /**
  46. * 组件的方法列表
  47. * 更新属性和数据的方法与更新页面数据的方法类似
  48. */
  49. methods: {
  50. /**
  51. * 点击拨打电话
  52. */
  53. onMakePhoneCall(e) {
  54. uni.makePhoneCall({
  55. phoneNumber: this.params.tel
  56. })
  57. }
  58. }
  59. }
  60. </script>
  61. <style lang="scss" scoped>
  62. .diy-service {
  63. position: fixed;
  64. z-index: 999;
  65. .service-icon {
  66. padding: 10rpx;
  67. .image {
  68. display: block;
  69. width: 90rpx;
  70. height: 90rpx;
  71. }
  72. }
  73. }
  74. </style>