如何实现Wix Velo API的cancelOrder()功能？

1. 后端模块（处理订单查询与取消逻辑） #

在Wix编辑器中创建一个后端模块（命名为cancelUserSubscriptions.jsw），代码如下：

import { orders } from 'wix-pricing-plans-backend';
import { currentUser } from 'wix-users-backend';

export async function cancelUserActiveSubscriptions() {
  try {
    const userId = currentUser.id;
    // 获取当前用户所有活跃的订阅订单
    const userOrders = await orders.listOrders({
      filter: {
        userId: userId,
        subscriptionStatus: "ACTIVE"
      }
    });

    // 批量取消定期订阅订单
    const cancelTasks = userOrders.items.map(order => {
      if (order.paymentSchedule === "RECURRING") {
        return orders.cancelOrder(order._id, {
          cancellationReason: "USER_REQUESTED"
        });
      }
      return Promise.resolve();
    });

    await Promise.all(cancelTasks);
    return { success: true, message: "所有活跃定期订阅已取消" };
  } catch (err) {
    return { success: false, message: err.message };
  }
}

2. 前端按钮交互逻辑 #

在放置取消按钮的页面，打开页面代码面板，添加以下代码：

import { cancelUserActiveSubscriptions } from 'backend/cancelUserSubscriptions';
import wixUsers from 'wix-users';

$w.onReady(() => {
  // 仅登录用户可见取消按钮（可选优化）
  wixUsers.currentUser.loggedIn()
    .then(isLoggedIn => {
      $w("#cancelSubscriptionButton").visible = isLoggedIn;
    });
});

export function cancelSubscriptionButton_click(event) {
  $w("#cancelSubscriptionButton").disable(); // 防止重复提交
  
  cancelUserActiveSubscriptions()
    .then(res => {
      if (res.success) {
        $w("#statusMessage").text = "订阅已成功取消";
        // 可添加页面跳转或刷新逻辑
      } else {
        $w("#statusMessage").text = `取消失败：${res.message}`;
      }
    })
    .catch(err => {
      $w("#statusMessage").text = `出错：${err.message}`;
    })
    .finally(() => {
      $w("#cancelSubscriptionButton").enable();
    });
}

注意事项 #

• 替换代码中的#cancelSubscriptionButton和#statusMessage为你页面上实际的元素ID
• cancellationReason可根据需求修改，支持的取值参考Wix Pricing Plans API规范
• 若需取消特定计划的订阅，可在listOrders的filter中添加planId条件

内容的提问来源于stack exchange，提问作者JohnOle