47 lines
3.8 KiB
Vue
47 lines
3.8 KiB
Vue
<!-- 页面编号：M-08；用途：邀请家人共建家谱。 -->
|
||
<template>
|
||
<view class="promotion-page share-state--unavailable">
|
||
<ModulePageBackground module="profile" />
|
||
<view class="page-layer"><PageHeader title="邀请家人" custom-back @back="requestBack" /></view>
|
||
<view class="page-content page-layer">
|
||
<view class="invite-hero">
|
||
<image src="/static/assets/foundation/transparent/brand-seal.png" mode="aspectFit" />
|
||
<text>邀请亲友共建家族记忆</text>
|
||
<text>邀请码校验成功后直接加入，不会生成入谱审核记录。</text>
|
||
</view>
|
||
<view v-if="inviteState === 'unavailable'" class="unavailable-card">
|
||
<text>当前没有可用邀请码</text>
|
||
<text>当前尚未接入邀请码校验与签发接口，页面不会生成、复制或展示虚假邀请码。</text>
|
||
</view>
|
||
<view class="steps-card"><text>开放条件</text><text>1. 后端提供邀请码签发接口</text><text>2. 明确有效期、使用次数和失效规则</text><text>3. 校验家谱权限与直接加入结果</text></view>
|
||
<AppButton block type="secondary" label="查看邀请说明" @click="openInviteExplanation" />
|
||
</view>
|
||
<AppDialog :visible="explanationVisible" :close-on-mask="false" eyebrow="邀请说明" title="功能尚未接入" message="当前后端接口文档没有邀请码签发与校验合同。完成接口接入前，本页保持不可用，避免家人拿到无法验证的邀请码。" confirm-text="我知道了" @confirm="explanationVisible = false" @close="explanationVisible = false" />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from "vue";
|
||
import { onBackPress } from "@dcloudio/uni-app";
|
||
import AppButton from "@/components/AppButton.vue";
|
||
import AppDialog from "@/components/AppDialog.vue";
|
||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||
import PageHeader from "@/components/PageHeader.vue";
|
||
import { handleBackPress, runBackGuard } from "@/utils/navigation.js";
|
||
|
||
const inviteState = ref("unavailable");
|
||
const explanationVisible = ref(false);
|
||
const openInviteExplanation = () => { explanationVisible.value = true; };
|
||
const requestBack = () =>
|
||
runBackGuard({
|
||
transientOpen: explanationVisible.value,
|
||
"close-transient": () => { explanationVisible.value = false; },
|
||
});
|
||
onBackPress((event) => handleBackPress(event, requestBack));
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||
.promotion-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-layer{z-index:1}.page-content{flex:1;padding:28rpx 30rpx 72rpx}.invite-hero,.unavailable-card,.steps-card{@include adaptive.adaptive-profile-content}.invite-hero{display:flex;min-height:300rpx;flex-direction:column;align-items:center;justify-content:center;padding:38rpx 48rpx;text-align:center}.invite-hero image{width:90rpx;height:auto;max-height:102rpx;aspect-ratio:90/102}.invite-hero text{display:block}.invite-hero text:nth-child(2){margin-top:12rpx;color:$ink;font-family:STKaiti,KaiTi,serif;font-size:34rpx;font-weight:700}.invite-hero text:last-child{margin-top:12rpx;color:$ink-muted;font-size:22rpx;line-height:1.55}.unavailable-card{min-height:190rpx;margin-top:20rpx;padding:40rpx 44rpx;text-align:center}.unavailable-card text{display:block}.unavailable-card text:first-child{color:$brand-red;font-size:28rpx;font-weight:700}.unavailable-card text:last-child{margin-top:12rpx;color:$ink-muted;font-size:21rpx;line-height:1.55}.steps-card{display:flex;min-height:220rpx;flex-direction:column;gap:10rpx;margin-top:20rpx;padding:34rpx 44rpx;color:$ink-muted;font-size:22rpx}.steps-card text:first-child{margin-bottom:4rpx;color:$ink;font-size:27rpx;font-weight:700}.page-content>.app-button{margin-top:26rpx}@media(max-width:340px){.page-content{padding-right:22rpx;padding-left:22rpx}}
|
||
</style>
|