初始化项目

2026-09-01 22:15:50 +08:00
commit b5a26a8848
11217 changed files with 1710987 additions and 0 deletions
@@ -0,0 +1,102 @@
+<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>