gypsy-crm-frontend-vu/components/card-websdkLink.vue

<template>
  <!-- <u-modal v-model:show="dialogVisible" :show-cancel-button="false" :show-confirm-button="false"
    class="dialog_header_w" :close-on-click-overlay="false" @close="handleClose">
    <view class="dia-content">
      <view class="icon">
        <image class="imgs" src="/static/images/success.png" alt="" />
      </view>
      <view v-if="responseCode === 200 && qrCodeUrl" v-t="'card.New2.v1'" class="des1"></view>
      <view v-if="responseCode === 200 && !qrCodeUrl" v-t="'card.Info.s43'" class="des1"></view>
      <view v-if="responseCode === 201" v-t="'card.Info.s7'" class="des1"></view>
      <view v-if="responseCode === 201" v-t="'card.Info.s5'" class="des2"></view>
      <view v-if="loading" class="loading-text">{{ t("common.loading") }}</view>
      <QrCode v-if="showQrCode && qrCodeUrl" :text="qrCodeUrl"></QrCode>
      <view v-if="responseCode === 200 && qrCodeUrl" v-t="'card.New2.v2'" class="des2"></view>
      
      <view class="dialog-footer">
        <u-button v-t="'card.Btn.Confirm'" block :loading="loading" @click="handleClose"></u-button>
      </view>
    </view>
  </u-modal> -->
  <web-view class="aaa" v-if="qrCodeUrl" :src="qrCodeUrl" style="height: 100vh;"></web-view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import useRouter from "@/hooks/useRouter";
import { ucardApi } from "@/api/ucard";
import QrCode from "@/components/QrCode.vue";

const { t } = useI18n();
const router = useRouter();

// 弹窗显示状态
const dialogVisible = ref(false);
// 二维码链接
const qrCodeUrl = ref("");
// API 响应码
const responseCode = ref(200);
// 是否显示二维码
const showQrCode = ref(false);
// 加载状态
const loading = ref(false);
// 设备元信息
const metaInfo = ref<Record<string, any> | null>(null);

/**
 * 获取设备元信息
 */
function getMetaInfo() {
  try {
    // 安全获取 metaInfo，兼容不同环境
    if (typeof window !== "undefined" && (window as any).getMetaInfo) {
      metaInfo.value = (window as any).getMetaInfo();
      metaInfo.value = { ...metaInfo.value, deviceType: "h5" };
    } else {
      // 默认值
      metaInfo.value = { deviceType: "h5" };
    }
  } catch (error) {
    //  console.warn("获取设备信息失败:", error);
    metaInfo.value = { deviceType: "h5" };
  }
}

/**
 * 重置组件状态
 */
function resetState() {
  qrCodeUrl.value = "";
  responseCode.value = 200;
  showQrCode.value = false;
  loading.value = false;
}

/**
 * 关闭弹窗
 */
function handleClose() {
  dialogVisible.value = false;
  resetState();
  // 跳转到我的页面
  router.replace("/pages/mine/index");
}

/**
 * 获取 WebSDK 链接
 * @param cardId 卡片ID
 */
async function getWebsdkLink(cardId?: string | number) {
  if (!cardId) {
    //  console.warn("cardId 为空，无法获取 WebSDK 链接");
    responseCode.value = 201;
    dialogVisible.value = true;
    return;
  }

  dialogVisible.value = true;
  loading.value = true;
  resetState();

  try {
    // 获取设备信息
    getMetaInfo();

    // 调用 API
    const res = await ucardApi.getWebsdkLink({
      cardId: String(cardId),
      metaInfo: metaInfo.value,
    });

    responseCode.value = res.code || 201;

    if (res.code === 200 && res.data) {
      try {
        // 安全解析 JSON
        const data = typeof res.data === "string" ? JSON.parse(res.data) : res.data;
        qrCodeUrl.value = data.url || data.link || "";
        showQrCode.value = !!qrCodeUrl.value;
      } catch (parseError) {
        //  console.error("解析响应数据失败:", parseError);
        responseCode.value = 201;
        showQrCode.value = false;
      }
    } else {
      showQrCode.value = false;
      qrCodeUrl.value = "";
    }
  } catch (error: any) {
    //  console.error("获取 WebSDK 链接失败:", error);
    responseCode.value = 201;
    showQrCode.value = false;
    qrCodeUrl.value = "";

    // 可选：显示错误提示
    // uni.showToast({
    //   title: error.message || t("common.error"),
    //   icon: "none",
    // });
  } finally {
    loading.value = false;
  }
}

// 暴露方法给父组件使用
defineExpose({
  getWebsdkLink,
});
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.dialog_header_w {

  :deep(.u-popup__content) {
    width: 90% !important;
  }

  :deep(.u-modal) {
    width: 100% !important;
  }

  .dia-content {
    padding: px2rpx(20) px2rpx(10);
    text-align: center;

    .icon .imgs {
      width: px2rpx(80);
      height: px2rpx(80);
    }

    .des1 {
      font-weight: bold;
      font-size: px2rpx(14);
      color: #000;
      margin: px2rpx(30) 0 px2rpx(20);
    }

    .des2 {
      font-size: px2rpx(12);
      color: #000;
      margin: px2rpx(20) 0;
      line-height: px2rpx(20);
    }

    .dialog-footer {
      margin-top: px2rpx(20);
    }

    .loading-text {
      font-size: px2rpx(14);
      color: var(--bs-heading-color);
      margin: px2rpx(20) 0;
    }
  }
}

.aaa {
  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
  padding-top: env(safe-area-inset-top);
}
</style>