第一次提交

components/page/diyComponents/service/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <!-- 在线客服 -->
+  <view v-if="isShow" 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'">
+      <customer-btn>
+        <view class="service-icon">
+          <image class="image" :src="params.image"></image>
+        </view>
+      </customer-btn>
+    </block>
+  </view>
+</template>
+
+<script>
+  import CustomerBtn from '@/components/customer-btn'
+  import { rpx2px } from '@/utils/util'
+  import SettingModel from '@/common/model/Setting'
+
+  export default {
+    components: {
+      CustomerBtn
+    },
+    props: {
+      itemStyle: Object,
+      params: Object
+    },
+    data() {
+      return {
+        isShow: false
+      }
+    },
+    computed: {
+      right() {
+        return rpx2px(2 * this.itemStyle.right)
+      },
+      bottom() {
+        return rpx2px(2 * this.itemStyle.bottom)
+      }
+    },
+    async created() {
+      if (this.params.type === 'chat') {
+        this.isShow = await SettingModel.isShowCustomerBtn()
+      }
+    },
+    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>