更新记录

1.0.2（2026-09-23）

修改优化

1.0.1（2026-09-23）

优化问题

1.0.0（2026-09-23）

发布版本

平台兼容性

uni-app(5.14)

jwt-tcg 使用说明

适用于 uni-app 的 App-vue 和 H5。

接入示例

将 uni_modules/jwt-tcg 放入项目的 uni_modules 目录，在 Vue2 页面中使用：

<template>
  <view>
    <button v-if="!showDraw" @click="showDraw = true">开始抽卡</button>
    <jwt-tcg
      v-if="showDraw"
      :packs="packs"
      :cards="cards"
      @card-reveal="onCardReveal"
      @complete="closeDraw"
      @error="onError"
    />
  </view>
</template>

<script>
import JwtTcg from '@/uni_modules/jwt-tcg/components/jwt-tcg/jwt-tcg.vue';

export default {
  components: { JwtTcg },
  data() {
    return {
      showDraw: false,
      packs: [{
        id: 'demo',
        image: './static/my-cards/pack-front.png',
        backImage: './static/my-cards/pack-back.png'
      }],
      cards: [
        { id: 'common', image: './static/my-cards/common.webp', rarityRank: 1 },
        {
          id: 'rare',
          image: './static/my-cards/rare.webp',
          backImage: './static/my-cards/card-back.png',
          rarityRank: 6,
          flipOnReveal: true,
          isNew: true
        }
      ]
    };
  },
  methods: {
    onCardReveal({ index, card }) {
      console.log(index, card.id);
    },
    closeDraw() {
      this.showDraw = false;
    },
    onError({ message }) {
      console.error(message);
    }
  }
};
</script>

把示例中的图片地址换成自己的图片。showDraw = true 显示抽卡；最后一张卡牌滑走后，组件自动关闭并触发 complete，示例通过 closeDraw 返回首页。需要再次抽卡时，重新显示组件即可。组件默认铺满屏幕，需要其他高度时可直接设置 style="height: 600px"。

组件参数

packs 每个卡包

cards 每张卡牌

flipOnReveal 和 isNew 互不影响：可以只翻牌、只显示 NEW，也可以同时开启。图片地址由调用方传入，插件原样使用；请确保在目标平台可以访问。若根据收藏记录计算 isNew，请使用本次抽卡开始前的记录。

事件