ASCF元服务如何接入IAP Kit

<template>
  <view class="container">
    <view v-if="querying" class="status-page">
      <text>加载中...</text>
    </view>
    <view v-else-if="queryingFailed" class="status-page" @click="onCase">
      <text class="failed-text">{{ queryFailedText }}</text>
      <text class="retry-tips">点击屏幕重试</text>
    </view>
    <view v-else class="main-page">
      <text class="page-title">消耗型商品 (Consumables)</text>
      <view class="list-container">
        <view class="list-item" v-for="(item, index) in productInfoArray" :key="index">
          <view class="item-info">
            <view class="icon-placeholder"></view>
            <text class="item-name">{{ item.name || item.productName }}</text>
          </view>
          <button class="buy-btn" @click="buy(item)">
            {{ item.localPrice || item.price || 'Buy' }}
          </button>
        </view>
        <view v-if="productInfoArray.length === 0" style="padding: 20px; text-align: center; color: #999;">
          暂无商品数据
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  ref
} from 'vue'
import {
  onLoad
} from '@dcloudio/uni-app'
// --- 状态变量 (对应 ArkTS @State) ---
const querying = ref(true)
const queryingFailed = ref(false)
const productInfoArray = ref([])
const queryFailedText = ref('Query failed')
// --- 常量 ---
const TAG = 'ConsumablesPage'
const PRODUCT_TYPE_CONSUMABLE = 0 // ASCF中消耗型对应数字 0
const TARGET_PRODUCT_ID = '123456' // 替换为你的真实商品ID
/**
 * 页面加载时触发
 */
onLoad(() => {
  onCase()
})
/**
 * 主流程入口
 */
const onCase = async () => {
  showLoadingPage()
  if (typeof has === 'undefined') {
    showFailedPage('当前环境非ascf元服务，无法调用 has API')
    return
  }
  const isEnvOk = await queryEnv()
  if (!isEnvOk) {
    showFailedPage('This app does not support iap or Account not logged in.')
    return
  }
  // 环境正常后，先查补单，再查商品信息展示
  await queryPurchases()
  queryProducts()
}
/**
 * 查环境 (对应 ArkTS: queryEnv)
 */
const queryEnv = () => {
  return new Promise((resolve) => {
    has.queryIapEnvStatus({
      success: (res) => {
        console.log(`[${TAG}] Succeeded in querying environment status.`)
        resolve(true)
      },
      fail: (err) => {
        console.error(`[${TAG}] Failed to query environment status.`, err)
        resolve(false)
      }
    })
  })
}
/**
 * 查询已购未消耗的订单/补单 (对应 ArkTS: queryPurchases)
 */
const queryPurchases = () => {
  return new Promise((resolve) => {
    has.queryIap({
      productType: PRODUCT_TYPE_CONSUMABLE,
      success: (res) => {
        console.log(`[${TAG}] Succeeded in querying purchases.`)
        const purchaseDataList = res.purchaseDataList
        if (purchaseDataList.length === 0) {
          console.log(`[${TAG}] queryPurchases, purchaseDataList empty`)
          resolve()
          return
        }
        // 遍历处理所有未消耗订单
        purchaseDataList.forEach(dataStr => {
          dealPurchaseData(dataStr)
        })
        resolve()
      },
      fail: (err) => {
        console.error(`[${TAG}] Failed to query purchases.`, err)
        resolve()
      }
    })
  })
}
/**
 * 查商品详情并展示 (对应 ArkTS: queryProducts)
 */
const queryProducts = () => {
  has.queryIapProducts({
    productType: PRODUCT_TYPE_CONSUMABLE,
    productIds: [TARGET_PRODUCT_ID],
    success: (result) => {
      console.log(`[${TAG}] Succeeded in querying products.`)
      productInfoArray.value = Array.isArray(result) ? result : (result.productList || result.products || []);
      showNormalPage()
    },
    fail: (err) => {
      console.error(`[${TAG}] Failed to query products.`, err)
      showFailedPage('Query products failed')
    }
  })
}
/**
 * 点击购买 (对应 ArkTS: buy)
 */
const buy = (item) => {
  const id = item.id || item.productId;
  has.createIap({
    productId: id,
    productType: PRODUCT_TYPE_CONSUMABLE,
    success: (result) => {
      const msg = 'Succeeded in creating purchase.'
      console.log(`[${TAG}] ${msg}`)
      uni.showToast({
        title: '支付成功',
        icon: 'success'
      })
      // result.purchaseData 是个 JSON 字符串
      dealPurchaseData(result.purchaseData)
    },
    fail: (err) => {
      const msg = `Failed to create purchase. Code: ${err.code}`
      console.error(`[${TAG}] ${msg}`, err)
      uni.showToast({
        title: '支付未完成',
        icon: 'none'
      })
      // 如果报错已拥有商品或系统错误，则触发补单
      if (err.code === 60051 || err.code === 60054) {
        queryPurchases()
      }
    }
  })
}
/**
 * 处理购买数据 (对应 ArkTS: dealPurchaseData)
 */
const dealPurchaseData = (purchaseDataStr) => {
  try {
    const purchaseData = JSON.parse(purchaseDataStr) // PurchaseData：包含jws格式的订单信息、订阅状态信息。
    const jwsPurchaseOrder = purchaseData.jwsPurchaseOrder // jwsPurchaseOrder 是 PurchaseOrderPayload 订单信息模型
    if (!jwsPurchaseOrder) {
      console.error(`[${TAG}] dealPurchaseData, jwsPurchaseOrder invalid`)
      return
    }
    // 解析 JWS 拿到 Payload
    const purchaseOrderPayload = decodeJwsObj(jwsPurchaseOrder)
    if (!purchaseOrderPayload) {
      return
    }
    // TODO: 【核心业务区】在这里执行您的发货逻辑，如解锁 MBTI 报告
    console.log(`[${TAG}] 准备发放权益, 订单号: ${purchaseOrderPayload.purchaseOrderId}`)
    // 状态 2(UNFINISHED) 或未带状态时，调用消耗接口
    // ArkTS示例中 FinishStatus.FINISHED = '1', UNFINISHED = '2'
    if (purchaseOrderPayload.finishStatus !== '1') {
      finishPurchase(purchaseOrderPayload)
    }
  } catch (e) {
    console.error(`[${TAG}] dealPurchaseData json error`, e)
  }
}
/**
 * 确认消耗订单 (对应 ArkTS: finishPurchase)
 */
const finishPurchase = (purchaseOrder) => {
  if (!purchaseOrder.purchaseToken) {
    console.error(`[${TAG}] finishPurchase but purchaseToken is empty`)
    return
  }
  has.finishIap({
    productType: PRODUCT_TYPE_CONSUMABLE,
    purchaseOrderId: purchaseOrder.purchaseOrderId,
    purchaseToken: purchaseOrder.purchaseToken,
    success: () => {
      console.log(`[${TAG}] Succeeded in finishing purchase.`)
      // 如果是补单进来的，消耗完可以给用户个提示
    },
    fail: (err) => {
      console.error(`[${TAG}] Failed to finish purchase.`, err)
    }
  })
}
/**
 * --- 工具类与视图控制逻辑 ---
 */
// 对应 ArkTS: JWSUtil.decodeJwsObj
const decodeJwsObj = (jwsString) => {
  try {
    const parts = jwsString.split('.');
    if (parts.length < 2) return null;
    const payloadBase64Url = parts[1];
    // 1. Base64Url 转换为标准 Base64
    const base64 = payloadBase64Url.replace(/-/g, '+').replace(/_/g, '/');
    // 2. 纯 JS 实现的 Base64 转字节数组 (不使用 atob)
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
    const bytes = [];
    let buffer = 0;
    let bitsCollected = 0;
    for (let i = 0; i < base64.length; i++) {
      const char = base64.charAt(i);
      const value = chars.indexOf(char);
      if (value === -1) continue;
      buffer = (buffer << 6) | value;
      bitsCollected += 6;
      if (bitsCollected >= 8) {
        bitsCollected -= 8;
        bytes.push((buffer >> bitsCollected) & 0xFF);
      }
    }
    // 3. 字节数组转 UTF-8 字符串 (替代 decodeURIComponent(escape(...)))
    // 这种方式兼容性最强，能处理中文字符且不会抛出 URI malformed
    let utf8Str = '';
    let i = 0;
    while (i < bytes.length) {
      const c = bytes[i];
      if (c < 128) {
        utf8Str += String.fromCharCode(c);
        i++;
      } else if (c > 191 && c < 224) {
        utf8Str += String.fromCharCode(((c & 31) << 6) | (bytes[i + 1] & 63));
        i += 2;
      } else if (c > 223 && c < 240) {
        utf8Str += String.fromCharCode(((c & 15) << 12) | ((bytes[i + 1] & 63) << 6) | (bytes[i + 2] & 63));
        i += 3;
      } else {
        i++; // 忽略更高位的 UTF-8 字符或错误字节
      }
    }
    return JSON.parse(utf8Str);
  } catch (e) {
    console.error(`[${TAG}] JWS decode failed:`, e);
    return null;
  }
}
const showLoadingPage = () => {
  queryingFailed.value = false
  querying.value = true
}
const showFailedPage = (text) => {
  if (text) {
    queryFailedText.value = text
  }
  queryingFailed.value = true
  querying.value = false
}
const showNormalPage = () => {
  queryingFailed.value = false
  querying.value = false
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  background-color: #F1F3F5;
  display: flex;
  flex-direction: column;
}
.status-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.failed-text {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}
.retry-tips {
  font-size: 14px;
  color: #666;
}
.main-page {
  padding: 16px;
}
.page-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  display: block;
}
.list-container {
  background-color: #FFF;
  border-radius: 16px;
  overflow: hidden;
}
.list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}
.list-item:last-child {
  border-bottom: none;
}
.item-info {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.icon-placeholder {
  width: 40px;
  height: 40px;
  background-color: #f0f0f0;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  margin-right: 12px;
}
.item-name {
  font-size: 16px;
  color: #333;
}
.buy-btn {
  width: auto;
  min-width: 80px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  background-color: #007DFF;
  color: #FFF;
  border-radius: 16px;
  margin: 0;
}
</style>