qiming/qiming-mobile/subpackages/pages/my-subscriptions/my-subscriptions.uvue

<template>
  <view class="subscriptions-container">
    <!-- 顶部导航栏 -->
    <custom-nav-bar :title="t('Mobile.MySubscriptions.title')">
      <template v-slot:left>
        <view class="header-icon-box" @tap="jumpNavigateBack">
          <text class="iconfont icon-a-Chevronleft"></text>
        </view>
      </template>
    </custom-nav-bar>

    <!-- 加载中 -->
    <view v-if="pageLoading" class="loading-state">
      <text class="loading-text">...</text>
    </view>

    <!-- 页面内容 -->
    <scroll-view v-else scroll-y class="page-content">
      <view class="page-scroll-content">
        <!-- 积分概览 -->
        <CreditsBreakdown
          :summary="creditsSummary"
          @add-purchase="handleOpenPurchase"
        />

        <!-- 订阅套餐 -->
        <PlanCards
          :plans="plans"
          :current-plan-id="currentPlanId"
          :current-end-time="currentEndTime"
          :current-plan-price="currentPlanPrice"
        />

        <!-- 已订阅内容 -->
        <SubscribedContent />
      </view>

      <!-- 积分购买弹窗 -->
      <PurchaseModal ref="purchaseModalRef" />
    </scroll-view>
  </view>
</template>

<script setup lang="uts">
  import type {
    CreditSummaryInfo,
    SystemSubscriptionPlan,
  } from "@/subpackages/types/interfaces/subscription";
  import { SUCCESS_CODE } from "@/constants/codes.constants.uts";
  import {
    apiGetCreditSummary,
    apiGetMySubscription,
    apiListSystemSubscriptionPlans,
  } from "@/subpackages/servers/subscription";
  import { jumpNavigateBack } from "@/utils/common";
  import { setCurrentPageNavigationBarTitle } from "@/utils/system.uts";
  import { useI18n } from "@/utils/i18n";
  import { TENANT_CONFIG_INFO } from "@/constants/home.constants";
  import type { TenantConfigInfo } from "@/types/interfaces/login";
  import { apiTenantConfig } from "@/servers/account";

  import CreditsBreakdown from "./components/credits-breakdown/credits-breakdown.uvue";
  import PlanCards from "./components/plan-cards/plan-cards.uvue";
  import SubscribedContent from "./components/subscribed-content/subscribed-content.uvue";
  import PurchaseModal from "./components/purchase-modal/purchase-modal.uvue";

  const { t } = useI18n();

  const pageLoading = ref(true);
  const creditsSummary = ref<CreditSummaryInfo | null>(null);
  const plans = ref<SystemSubscriptionPlan[]>([]);
  const currentPlanId = ref<number | null>(null);
  const currentEndTime = ref<string | null>(null);
  const currentPlanPrice = ref<number | null>(null);
  const purchaseModalRef = ref<any>(null);

  const fetchPageData = async () => {
    pageLoading.value = true;
    try {
      const [summaryRes, subRes, plansRes] = await Promise.all([
        apiGetCreditSummary(),
        apiGetMySubscription({ bizType: "SYSTEM" }),
        apiListSystemSubscriptionPlans(),
      ]);

      if (summaryRes.code === SUCCESS_CODE && summaryRes.data) {
        creditsSummary.value = summaryRes.data;
      }

      if (subRes.code === SUCCESS_CODE && subRes.data) {
        const current = subRes.data.currentSubscription;
        if (current) {
          currentPlanId.value = current.planId;
          currentEndTime.value = current.endTime;
          currentPlanPrice.value = current.plan.price;
        }
      }

      if (plansRes.code === SUCCESS_CODE && plansRes.data) {
        plans.value = Array.isArray(plansRes.data) ? plansRes.data : [];
      }
    } catch (e) {
      // ignore
    } finally {
      pageLoading.value = false;
    }
  };

  const handleOpenPurchase = () => {
    purchaseModalRef.value?.open();
  };

  onLoad(() => {
    const checkAndFetchConfig = async () => {
      // 1. 优先校验本地缓存
      const tenantConfigInfoString = uni.getStorageSync(TENANT_CONFIG_INFO);
      if (tenantConfigInfoString) {
        try {
          const tenantConfig = JSON.parse(
            tenantConfigInfoString,
          ) as TenantConfigInfo;
          if (tenantConfig.enableSubscription !== 1) {
            uni.showToast({
              title:
                t("Mobile.MySubscriptions.notEnabled") || "订阅功能暂未开启",
              icon: "none",
            });
            setTimeout(() => {
              jumpNavigateBack();
            }, 1500);
            return;
          }
        } catch (error) {
          console.error("解析租户配置失败:", error);
        }
      }

      // 2. 实时拉取最新配置进行二次校验和本地同步
      try {
        const res = await apiTenantConfig();
        if (res.code === SUCCESS_CODE && res.data != null) {
          const latestConfig = res.data!;
          uni.setStorageSync(TENANT_CONFIG_INFO, JSON.stringify(latestConfig));
          if (latestConfig.enableSubscription !== 1) {
            uni.showToast({
              title:
                t("Mobile.MySubscriptions.notEnabled") || "订阅功能暂未开启",
              icon: "none",
            });
            setTimeout(() => {
              jumpNavigateBack();
            }, 1500);
            return;
          }
        }
      } catch (e) {
        console.error("同步最新租户配置失败:", e);
      }

      // 3. 校验通过，加载页面
      setCurrentPageNavigationBarTitle();
      fetchPageData();
    };

    checkAndFetchConfig();
  });

  onShow(() => {
    // 若页面已经初始化完毕（非初次加载），当页面重新显示时自动刷新最新数据
    if (!pageLoading.value) {
      fetchPageData();
    }
  });
</script>

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