QinUi

# ActionSheetService 客服操作菜单

本组件用于统一的客服组件的封装。源自 saas 代码中的 service-panel 组件。

# 基础用法

<template>
  <view>
    <qinui-action-sheet-service ref="servicePanelBox" :getData="getData1" />
    <button @click="onOpen">打开 ActionSheet</button>
  </view>
</template>
<script>
  export default {
    setup() {
      const servicePanelBox = ref(null);
      return {
        servicePanelBox,
      };
    },
    methods: {
      onOpen() {
        this.$refs.servicePanelBox.open();
      },
      getData1() {
        // 接口方法，返回数据
        return new Promise((resolve) => {
          resolve({});
        });
      },
    }
  }
</script>

# 抖音卡片客服

需要在 抖音小程序 查看效果

<template>
  <view>
    <qinui-action-sheet-service ref="servicePanelBox" :getData="getData1" />
    <button @click="onOpen">打开 ActionSheet</button>
  </view>
</template>
<script>
  export default {
    setup() {
      const servicePanelBox = ref(null);
      return {
        servicePanelBox,
      };
    },
    methods: {
      onOpen() {
        // 在这里新增参数即可
        const theKefuParams = { imType: '' };
        theKefuParams.imType = 'order';
        theKefuParams.imOrderId = 'ots73070904087885765219586';
        this.$refs.servicePanelBox.open(theKefuParams);
      },
      getData1() {
        // 接口方法，返回数据
        return new Promise((resolve) => {
          resolve({});
        });
      },
    }
  }
</script>

# API

# Props

参数 说明 类型 默认值 可选值
isAll 是否全量获取数据 Boolean false true | false
webviewPageName webview 的路由名字 String Webview -
extData 传给接口的扩展参数 Object {} -
getData 获取数据的接口方法 ( Promise ) Function - -
zIndex 弹框层级 Number|String - -

# Methods

方法名 说明
open 弹出操作菜单组件
close 关闭操作菜单组件

# Events

事件名 说明 回调参数
@close 点击取消按钮时触发。点击遮罩触发该事件需要设置:closeOnClickOverlay="true" -

← ButtonLogin 按钮 →