猹件开发组

Appearance

On this page

猹引擎 ​

GUI - 商店与购买联动 ​

这页解决什么问题 ​

让商店页实现“查商品、看余额、下单购买、回显结果”。

商店页功能 ​

功能页面行为
分类切换点击分类刷新列表
商品详情展示价格、描述、库存
购买提交提交购买动作
余额刷新返回最新余额和库存

不写代码版做法 ​

  1. 页面按钮统一走 shop_query 和 shop_buy。
  2. 服务端统一回传 ui.state。
  3. 页面每次收到回执都刷新余额和商品状态。

商店动作模板 ​

js
async function queryShop(category) {
  await ChaEngine.sendToServer('ui.action', {
    action: 'shop_query',
    body: { category }
  });
}

async function buyItem(itemId, count) {
  await ChaEngine.sendToServer('ui.action', {
    action: 'shop_buy',
    body: { itemId, count }
  });
}

状态回推模板 ​

js
ChaEngine.onServerData((packet) => {
  if (packet.channel !== 'ui.state') {
    return;
  }

  const data = JSON.parse(packet.data || '{}');

  if (data.action === 'shop_query') {
    renderShopList(data.items || []);
    renderPlayerBalance(data.balance || 0);
  }

  if (data.action === 'shop_buy') {
    showToast(data.message || '');
    renderPlayerBalance(data.balance || 0);
    updateStock(data.itemId, data.stock);
  }
});

客户常见错误 ​

  1. 页面查的是 A 分类，购买却把分类参数丢了。
  2. 购买成功后不刷新余额，玩家误判未到账。
  3. 库存为 0 仍可点击购买。