CRM纷享销客在某个页面中增加自定义按钮，点击后弹出对话框形态的自定义界面【PWC组件】

expressComponent.vue代码如下：

<template>
  <div>
    <!-- 显示加载状态 -->
    <p v-if="loading">正在加载数据...</p>
    <!-- 显示错误信息 -->
    <p v-if="error">{{ error }}</p>
    <!-- 显示物流轨迹列表 -->
    <ul v-if="logisticsData.length > 0">
      <li v-for="(item, index) in logisticsData" :key="index">
        <span>{{ item.ftime }}</span> - <span>{{ item.context }}</span>
      </li>
    </ul>
    <!-- 数据为空时显示无 -->
    <p v-if="!loading &&!error && logisticsData.length === 0">无</p>
  </div>
</template>
<script>
export default {
  props: ['data'],
  data() {
    return {
      // 存储物流轨迹数据
      logisticsData: [],
      // 加载状态标识
      loading: false,
      // 错误信息
      error: null
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        // 设置加载状态为 true
        this.loading = true;
        // 清空之前的错误信息
        this.error = null;
        console.log(this.data);
        const data = await FxUI.objectApi.fetch_data(this.data.objectAPIName, this.data.objectId);
        console.log(data);
        if (!data) {
          throw new Error('未获取到有效数据');
        }
        // 快递公司编码
        let com = data['express_org'];
        // 物流单号
        let num = data['express_order_id'];
        // 收货人电话
        let phone = data['consignee_phone_number'];

        let params = [
          {
            name: 'com',
            type: 'String',
            value: com
          },
          {
            name: 'num',
            type: 'String',
            value: num
          },
          {
            name: 'phone',
            type: 'String',
            value: phone
          }
        ];
        console.log(params);
        if (com !== "") {
          const res = await FxUI.userDefine.call_controller('CstmCtrl_EMzQW__c', {params});
          console.log(res.Value);
          if (res.Value.success) {
            console.log(res.Value.functionResult);
            this.logisticsData = res.Value.functionResult;
          }
        }
      } catch (err) {
        // 捕获异常并更新错误信息
        this.error = err.message;
      } finally {
        // 无论成功还是失败，都将加载状态设置为 false
        this.loading = false;
      }
    }
  }
}
</script>
<style scoped>
/* 设置列表样式 */
ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}
</style>

/**
 * @author QiaoChu
 * @codeName 查看物流信息
 * @description 快递100查看物流信息
 * @函数需求编号
 */
UIAction openDialogAction = OpenDialogAction.build{
  title = "查看物流信息"              //标题
  width = 600                         //宽度
  component {                         //自定义组件
    apiName = "component_pcnDa__c"    //自定义组件的apiName
  }
}
return openDialogAction

 
参考：
使用场景 | 纷享销客开发者手册