ykt-team-wxapp/pages/experience-coupon/claim.vue

<template>
  <view>
    <full-page>
      <view class="claim-page">
        <view v-if="tip" class="tip">{{ tip }}</view>
        <view v-else class="tip">加载中...</view>
      </view>
    </full-page>

    <!-- Keep the fixed overlay outside full-page's scroll-view for iOS compatibility. -->
    <view v-if="posterVisible" class="poster-mask">
      <view class="poster-dialog">
        <image
          v-if="issue?.posterUrl"
          class="poster-image"
          :src="issue.posterUrl"
          mode="aspectFit"
        />
        <view v-else class="poster-image poster-image--placeholder">体验券</view>
        <view class="poster-content">{{ buildClaimContent() }}</view>
        <view class="poster-btn" :class="{ disabled: claiming }" @click="acceptCoupon">
          {{ claiming ? "领取中..." : "接受" }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref } from "vue";
import { storeToRefs } from "pinia";
import { onLoad, onShow } from "@dcloudio/uni-app";
import useAccount from "@/store/account";
import api from "@/utils/api";
import { hideLoading, loading, toast } from "@/utils/widget";
import { normalizeCorpId } from "@/utils/api-base-config";
import { useTeamAccess } from "@/hooks/use-team-access";
import FullPage from "@/components/full-page.vue";

const env = __VITE_ENV__;
const appid = env.MP_WX_APP_ID;
const { account } = storeToRefs(useAccount());
const { getTeams, login } = useAccount();
const { openTeamLogin: openTeamInviteLogin, ensureTeamAdded: ensureJoinedTeam } = useTeamAccess();

const corpId = ref("");
const issueId = ref("");
const memberId = ref("");
const issue = ref(null);
const issueCustomer = ref(null);
const tip = ref("");
const claiming = ref(false);
const autoPrompted = ref(false);
const posterVisible = ref(false);
const archiveBindPending = ref(false);
const bindingTeamId = ref("");
const bindCorpName = ref("");

const projectNameText = computed(() => {
  const projects = Array.isArray(issue.value?.projectSnapshot) ? issue.value.projectSnapshot : [];
  if (!projects.length) return "未配置项目";
  return projects.map((p) => p.projectName || "项目").join("、");
});

function buildClaimContent() {
  const name = issue.value?.activityName || "体验券";
  return `您收到一张【${name}】体验券，包含${projectNameText.value}，是否存入您的权益卡包？`;
}

async function ensureLogin() {
  if (!account.value) await login();
  if (!account.value) {
    tip.value = "请先登录后再领取体验券";
    await openTeamLogin();
    return false;
  }
  return true;
}

async function loadIssueDetail() {
  const res = await api(
    "getExperienceCouponIssueDetail",
    { corpId: corpId.value, issueId: issueId.value },
    false
  );
  if (!res?.success || !res.data) {
    tip.value = res?.message || "体验券不存在或已失效";
    return false;
  }
  issue.value = res.data;
  if (!memberId.value && res.data.customerId) {
    memberId.value = res.data.customerId;
  }
  return true;
}

async function getIssueCustomer({ force = false } = {}) {
  if (!corpId.value || !memberId.value) return null;
  if (issueCustomer.value && !force) return issueCustomer.value;

  try {
    const detail = await api(
      "getCustomerByCustomerId",
      { corpId: corpId.value, customerId: memberId.value },
      false
    );
    const customer = detail?.data || null;
    issueCustomer.value = customer;
    bindCorpName.value = detail?.corpName || issue.value?.corpName || "";
    const teamIds = Array.isArray(customer?.teamId) ? customer.teamId : [customer?.teamId];
    bindingTeamId.value = issue.value?.teamId || teamIds.find(Boolean) || "";
    return customer;
  } catch (e) {
    console.warn("getCustomerByCustomerId failed", e);
    return null;
  }
}

async function hasBoundArchive() {
  const openid = account.value?.openid || "";
  if (!openid) return false;

  const customer = await getIssueCustomer({ force: true });
  return Boolean(customer && String(customer.miniAppId || "") === String(openid));
}

function buildClaimUrl() {
  const params = [
    `corpId=${encodeURIComponent(corpId.value || "")}`,
    `issueId=${encodeURIComponent(issueId.value || "")}`,
    memberId.value ? `memberId=${encodeURIComponent(memberId.value)}` : "",
  ].filter(Boolean).join("&");
  return `/pages/experience-coupon/claim?${params}`;
}

async function openTeamLogin() {
  const customer = await getIssueCustomer();
  if (!customer || !bindingTeamId.value) {
    tip.value = "体验券发放档案缺少所属团队，暂无法领取";
    return false;
  }
  const result = await openTeamInviteLogin({
    corpId: corpId.value,
    teamId: bindingTeamId.value,
    redirectUrl: buildClaimUrl(),
    fallbackCorpName: bindCorpName.value || issue.value?.corpName || "",
  });
  if (!result.success) {
    tip.value = result.message;
    return false;
  }
  return false;
}

async function ensurePhoneAuthorized() {
  if (account.value?.mobile) return true;

  tip.value = "请先授权手机号后再领取体验券";
  return openTeamLogin();
}

async function ensureTeamAdded() {
  const customer = await getIssueCustomer();
  if (!customer || !bindingTeamId.value) {
    tip.value = "体验券发放档案缺少所属团队，暂无法领取";
    return false;
  }

  loading("添加团队中...");
  try {
    const res = await ensureJoinedTeam({
      appid,
      account: account.value,
      getTeams,
      corpId: corpId.value,
      teamId: bindingTeamId.value,
    });
    if (!res.success) {
      tip.value = res.message;
      toast(tip.value);
      return false;
    }
    return true;
  } finally {
    hideLoading();
  }
}

function buildArchiveBindUrl() {
  const params = [
    `corpId=${encodeURIComponent(corpId.value || "")}`,
    `teamId=${encodeURIComponent(bindingTeamId.value || "")}`,
    `bindCustomerId=${encodeURIComponent(memberId.value || "")}`,
    `source=experienceCoupon`,
  ].join("&");
  return `/pages/archive/edit-archive?${params}`;
}

function openArchiveBindPage() {
  if (!issueCustomer.value || !bindingTeamId.value) {
    toast("体验券发放档案不存在");
    return;
  }
  archiveBindPending.value = true;
  uni.navigateTo({ url: buildArchiveBindUrl() });
}

function toTimestamp(value) {
  if (!value) return 0;
  const numeric = Number(value);
  if (Number.isFinite(numeric)) return numeric;
  const parsed = new Date(value).getTime();
  return Number.isNaN(parsed) ? 0 : parsed;
}

function getIssueExpireAt() {
  return toTimestamp(issue.value?.activityEndTime || issue.value?.displayExpireTime);
}

function isExpiredIssue() {
  const expireAt = getIssueExpireAt();
  return Boolean(expireAt && Date.now() > expireAt);
}

async function acceptCoupon() {
  if (claiming.value || !issue.value) return;

  claiming.value = true;
  loading("领取中...");
  try {
    const res = await api("claimExperienceCoupon", {
      corpId: corpId.value,
      issueId: issueId.value,
      claimUserId: account.value?.openid || "",
    });
    hideLoading();
    if (!res?.success) {
      tip.value = res?.message || "领取失败";
      toast(tip.value);
      if (tip.value.includes("绑定本体验券发放的档案")) {
        posterVisible.value = false;
        openArchiveBindPage();
      }
      return;
    }
    toast("领取成功");
    posterVisible.value = false;
    uni.redirectTo({
      url: `/pages/experience-coupon/my-rights?corpId=${encodeURIComponent(corpId.value)}&customerId=${encodeURIComponent(memberId.value || "")}&name=${encodeURIComponent(issue.value.customerName || "")}`,
    });
  } catch (e) {
    hideLoading();
    tip.value = e?.message || "领取失败";
    toast(tip.value);
  } finally {
    claiming.value = false;
  }
}

async function promptClaim() {
  if (autoPrompted.value) return;
  autoPrompted.value = true;

  if (!issue.value) return;
  if (issue.value.status === "claimed") {
    tip.value = "该体验券已领取";
    uni.redirectTo({
      url: `/pages/experience-coupon/my-rights?corpId=${encodeURIComponent(corpId.value)}&customerId=${encodeURIComponent(memberId.value || "")}`,
    });
    return;
  }
  if (issue.value.status === "void") {
    tip.value = "该体验券已作废";
    return;
  }
  if (issue.value.status && issue.value.status !== "issued") {
    tip.value = "当前状态不可领取";
    return;
  }
  if (isExpiredIssue()) {
    tip.value = "体验券已过期，无法领取";
    return;
  }

  const bound = await hasBoundArchive();
  if (!bound) {
    openArchiveBindPage();
    return;
  }

  tip.value = "";
  posterVisible.value = true;
}

async function bootstrap() {
  loading("加载中...");
  try {
    const okDetail = await loadIssueDetail();
    if (!okDetail) return;
    const okLogin = await ensureLogin();
    if (!okLogin) return;
    const phoneAuthorized = await ensurePhoneAuthorized();
    if (!phoneAuthorized) return;
    const teamAdded = await ensureTeamAdded();
    if (!teamAdded) return;
    await promptClaim();
  } finally {
    hideLoading();
  }
}

function parseOptions(options = {}) {
  const href = typeof options.q === "string" ? decodeURIComponent(options.q) : "";
  const [, url = ""] = href.split("?");
  return url.split("&").reduce((acc, cur) => {
    if (!cur) return acc;
    const [key, val = ''] = cur.split("=");
    if (!key) return acc;
    acc[key] = val
    return acc;
  }, {});
}

onLoad((opts = {}) => {
  let options = {};
  if (opts.q) {
    options = { ...parseOptions(opts) }
  } else {
    options = { ...opts }
  }
  corpId.value = normalizeCorpId(options.corpId || "");
  issueId.value = options.issueId || options.id || "";
  memberId.value = options.memberId || options.customerId || "";
  if (!corpId.value || !issueId.value) {
    tip.value = "领取参数不完整";
    toast(tip.value);
    return;
  }
  bootstrap();
});

onShow(() => {
  if (archiveBindPending.value && issue.value && issue.value.status === "issued") {
    archiveBindPending.value = false;
    autoPrompted.value = false;
    tip.value = "";
    posterVisible.value = true;
  }
});
</script>

<style scoped>
.claim-page {
  min-height: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  background: #f6fafa;
}

.tip {
  margin-top: 120rpx;
  text-align: center;
  font-size: 28rpx;
  color: #999;
}

.poster-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.65);
}

.poster-dialog {
  width: 100%;
  max-width: 620rpx;
  max-height: calc(100vh - 80rpx);
  overflow: hidden;
  border-radius: 20rpx;
  background: #fff;
}

.poster-image {
  display: block;
  width: 100%;
  height: 58vh;
  max-height: 700rpx;
  background: #f5f7fa;
}

.poster-image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9aa5b1;
  font-size: 32rpx;
}

.poster-content {
  padding: 28rpx 30rpx 8rpx;
  color: #333;
  font-size: 28rpx;
  line-height: 1.6;
  max-height: 160rpx;
  overflow: hidden;
}

.poster-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  margin: 24rpx 30rpx 30rpx;
  border-radius: 40rpx;
  background: #065bd6;
  color: #fff;
  font-size: 30rpx;
}

.poster-btn.disabled {
  opacity: 0.6;
}
</style>