143 lines
3.8 KiB
Vue
143 lines
3.8 KiB
Vue
<!-- 页面编号：F-10；用途：家族视频待开放状态。 -->
|
||
<template>
|
||
<view class="video-status-page" :class="{ 'video-status-state--invalid': !hasValidContext }">
|
||
<ModulePageBackground module="family" />
|
||
<view class="video-status-header"><PageHeader title="家族视频" /></view>
|
||
|
||
<view class="video-status-content">
|
||
<view class="video-status-lead">
|
||
<image
|
||
src="/static/assets/modules/genealogy/transparent/section-divider.png"
|
||
mode="scaleToFill"
|
||
/>
|
||
<text>记录会动的家族记忆</text>
|
||
</view>
|
||
|
||
<view class="video-status-card">
|
||
<view class="video-status-card__body">
|
||
<text class="video-status-card__eyebrow">{{ hasValidContext ? '视频 · 服务说明' : '页面入口' }}</text>
|
||
<text class="video-status-card__title">{{ hasValidContext ? '视频服务暂未开放' : '家谱身份无效' }}</text>
|
||
<text class="video-status-card__copy">{{ hasValidContext ? '开放后可在这里浏览当前家谱的影像与纪念视频。' : '请从一个可访问的成员家谱重新进入，页面不会展示其他家谱内容。' }}</text>
|
||
<view class="video-return-action" @click="returnToFamily">
|
||
<AppButton block :label="hasValidContext ? '返回家族首页' : '返回上一页'" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, ref } from "vue";
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import AppButton from "@/components/AppButton.vue";
|
||
import ModulePageBackground from "@/components/ModulePageBackground.vue";
|
||
import PageHeader from "@/components/PageHeader.vue";
|
||
import { getGenealogyFixtureAccess } from "@/data/mock.js";
|
||
import { goBack, returnTo } from "@/utils/navigation.js";
|
||
|
||
const genealogyId = ref("");
|
||
const hasValidContext = computed(() =>
|
||
Boolean(
|
||
genealogyId.value &&
|
||
["owner", "member"].includes(
|
||
getGenealogyFixtureAccess(genealogyId.value).accessRole,
|
||
),
|
||
),
|
||
);
|
||
|
||
onLoad((query) => {
|
||
genealogyId.value = String(query.genealogyId || "");
|
||
});
|
||
|
||
const returnToFamily = () =>
|
||
hasValidContext.value
|
||
? returnTo("F01", { genealogyId: genealogyId.value })
|
||
: goBack();
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
|
||
|
||
.video-status-page {
|
||
min-height: 100vh;
|
||
background: $paper;
|
||
}
|
||
.video-status-content {
|
||
padding: 16rpx 26rpx 56rpx;
|
||
}
|
||
.video-status-lead {
|
||
display: grid;
|
||
min-height: 56rpx;
|
||
margin: 0 12rpx 18rpx;
|
||
color: $ink-muted;
|
||
font-size: 23rpx;
|
||
text-align: center;
|
||
}
|
||
.video-status-lead image {
|
||
grid-area: 1 / 1;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.video-status-lead text {
|
||
z-index: 1;
|
||
display: flex;
|
||
grid-area: 1 / 1;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
}
|
||
.video-status-card {
|
||
@include adaptive.adaptive-family-panel;
|
||
width: 100%;
|
||
min-height: 330rpx;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
}
|
||
.video-status-card__body {
|
||
padding: 70rpx 60rpx 48rpx;
|
||
}
|
||
.video-status-card__eyebrow,
|
||
.video-status-card__title,
|
||
.video-status-card__copy {
|
||
display: block;
|
||
}
|
||
.video-status-card__eyebrow {
|
||
color: $brand-red;
|
||
font-size: 23rpx;
|
||
letter-spacing: 3rpx;
|
||
}
|
||
.video-status-card__title {
|
||
margin-top: 14rpx;
|
||
color: $ink;
|
||
font-family: STKaiti, KaiTi, serif;
|
||
font-size: 35rpx;
|
||
font-weight: 700;
|
||
}
|
||
.video-status-card__copy {
|
||
margin-top: 17rpx;
|
||
color: $ink-muted;
|
||
font-size: 24rpx;
|
||
line-height: 1.6;
|
||
}
|
||
.video-return-action {
|
||
margin: 28rpx auto 0;
|
||
}
|
||
@media (min-width: 400px) {
|
||
.video-status-content {
|
||
padding-right: 34rpx;
|
||
padding-left: 34rpx;
|
||
}
|
||
}
|
||
@media (max-width: 340px) {
|
||
.video-status-content {
|
||
padding-right: 20rpx;
|
||
padding-left: 20rpx;
|
||
}
|
||
.video-status-card__body {
|
||
padding-right: 44rpx;
|
||
padding-left: 44rpx;
|
||
}
|
||
}
|
||
</style>
|