472 lines
12 KiB
Vue
472 lines
12 KiB
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 { set } from "@/utils/cache";
|
|
import { hideLoading, loading, toast } from "@/utils/widget";
|
|
import { normalizeCorpId } from "@/utils/api-base-config";
|
|
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 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 bindingTeam = ref(null);
|
|
|
|
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}`;
|
|
}
|
|
|
|
function buildTeamLoginUrl() {
|
|
const query = [
|
|
"source=teamInvite",
|
|
`redirectUrl=${encodeURIComponent(buildClaimUrl())}`,
|
|
].join("&");
|
|
return `/pages/login/login?${query}`;
|
|
}
|
|
|
|
async function getBindingTeam() {
|
|
if (!corpId.value || !bindingTeamId.value) return null;
|
|
if (bindingTeam.value) return bindingTeam.value;
|
|
try {
|
|
const res = await api(
|
|
"getTeamData",
|
|
{ corpId: corpId.value, teamId: bindingTeamId.value, withCorpName: true },
|
|
false
|
|
);
|
|
const data = res?.data || null;
|
|
bindingTeam.value = data;
|
|
bindCorpName.value = data?.corpName || data?.corp_name || bindCorpName.value;
|
|
return data;
|
|
} catch (e) {
|
|
console.warn("getTeamData failed", e);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function openTeamLogin() {
|
|
const customer = await getIssueCustomer();
|
|
if (!customer || !bindingTeamId.value) {
|
|
tip.value = "体验券发放档案缺少所属团队，暂无法领取";
|
|
return false;
|
|
}
|
|
const team = await getBindingTeam();
|
|
set("invite-team-info", {
|
|
corpId: corpId.value,
|
|
teamId: bindingTeamId.value,
|
|
corpName: bindCorpName.value || issue.value?.corpName || "",
|
|
teamName: team?.name || team?.teamName || "",
|
|
avatars: Array.isArray(team?.memberList)
|
|
? team.memberList.map((member) => member?.avatar || "").filter(Boolean)
|
|
: [],
|
|
});
|
|
uni.navigateTo({ url: buildTeamLoginUrl() });
|
|
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;
|
|
}
|
|
|
|
const teams = await getTeams();
|
|
const linked = (teams || []).some(
|
|
(team) =>
|
|
normalizeCorpId(team.corpId) === corpId.value &&
|
|
String(team.teamId) === String(bindingTeamId.value)
|
|
);
|
|
if (linked) return true;
|
|
|
|
loading("添加团队中...");
|
|
try {
|
|
const res = await api(
|
|
"bindWxappWithTeam",
|
|
{
|
|
appid,
|
|
corpId: corpId.value,
|
|
teamId: bindingTeamId.value,
|
|
openid: account.value?.openid || "",
|
|
},
|
|
false
|
|
);
|
|
if (!res?.success) {
|
|
tip.value = res?.message || "添加团队失败";
|
|
toast(tip.value);
|
|
return false;
|
|
}
|
|
await getTeams();
|
|
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>
|