template3/components/page/service/index.vue

<template>
  <!-- 在线客服 -->
  <view v-if="!(params.type === 'chat' && !isMpWeiXin)" class="diy-service" :style="{ '--right': `${right}px`, '--bottom': `${bottom}px` }">
    <!-- 拨打电话 -->
    <block v-if="params.type === 'phone'">
      <view class="service-icon" @click="onMakePhoneCall">
        <image class="image" :src="params.image"></image>
      </view>
    </block>
    <!-- 在线聊天 -->
    <block v-else-if="params.type == 'chat'">
      <button open-type="contact" class="btn-normal">
        <view class="service-icon">
          <image class="image" :src="params.image"></image>
        </view>
      </button>
    </block>
  </view>
</template>

<script>
  import { rpx2px } from '@/utils/util'

  export default {

    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
      itemStyle: Object,
      params: Object
    },

    /**
     * 私有数据,组件的初始数据
     * 可用于模版渲染
     */
    data() {
      return {
        isMpWeiXin: false,
        isShow: true
      }
    },
    computed: {
      right() {
        return rpx2px(2 * this.itemStyle.right)
      },
      bottom() {
        return rpx2px(2 * this.itemStyle.bottom)
      }
    },

    created() {
      // #ifdef MP-WEIXIN
      this.isMpWeiXin = true
      // #endif
    },

    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {

      /**
       * 点击拨打电话
       */
      onMakePhoneCall(e) {
        uni.makePhoneCall({
          phoneNumber: this.params.tel
        })
      }

    }

  }
</script>

<style lang="scss" scoped>
  .diy-service {
    position: fixed;
    z-index: 999;
    right: calc(var(--window-right) + var(--right));
    // 设置ios刘海屏底部横线安全区域
    bottom: calc(constant(safe-area-inset-bottom) + var(--window-bottom) + var(--bottom));
    bottom: calc(env(safe-area-inset-bottom) + var(--window-bottom) + var(--bottom));

    .service-icon {
      padding: 10rpx;

      .image {
        display: block;
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
      }
    }

  }
</style>