308 lines
11 KiB
Vue
308 lines
11 KiB
Vue
<template>
|
|
<view class="service-stub-page tn-safe-area-inset-bottom">
|
|
<tn-nav-bar :isBack="true" :bottomShadow="false" backgroundColor="transparent">
|
|
<view class="tn-text-bold tn-text-xl tn-color-black">{{ resolvedPageTitle }}</view>
|
|
</tn-nav-bar>
|
|
|
|
<view class="page-content tn-padding" :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
|
|
|
|
<!-- 门锁授权 Mockup -->
|
|
<view v-if="pageKey === 'lock'">
|
|
<view class="hero-card tn-flex tn-flex-direction-column tn-flex-col-center">
|
|
<view class="tn-bg-gray--light tn-padding-xl tn-border-radius-circle tn-margin-bottom">
|
|
<text class="tn-icon-lock tn-color-gray" style="font-size: 80rpx;"></text>
|
|
</view>
|
|
<view class="hero-title tn-text-bold">{{ $tr('暂无门锁权限') }}</view>
|
|
<view class="hero-desc tn-margin-top-sm tn-text-center">{{ $tr('您当前暂未分配智能门锁，或门锁暂未联网。\n入住后即可使用门锁密码、指纹录入与临时密码下发功能。') }}</view>
|
|
<view class="tn-flex tn-margin-top-xl tn-width-full tn-flex-row-between">
|
|
<view class="btn-light tn-flex-1 tn-margin-right-sm tn-flex tn-flex-col-center tn-flex-row-center tn-padding-sm" style="border-radius: 12rpx; opacity: 0.6;">
|
|
<text class="tn-icon-key tn-margin-right-xs"></text> {{ $tr('临时密码') }}
|
|
</view>
|
|
<view class="btn-primary tn-flex-1 tn-margin-left-sm tn-flex tn-flex-col-center tn-flex-row-center tn-padding-sm" style="border-radius: 12rpx; opacity: 0.6;">
|
|
<text class="tn-icon-fingerprint tn-margin-right-xs"></text> {{ $tr('录入指纹') }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="record-card tn-margin-top-lg">
|
|
<view class="block-title">{{ $tr('授权记录') }}</view>
|
|
<view class="tn-margin-top tn-flex tn-flex-row-center tn-padding-xl">
|
|
<tn-empty icon="tn-icon-empty-data" :text="$tr('暂无门锁操作记录')"></tn-empty>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 积分管理 Mockup -->
|
|
<view v-else-if="pageKey === 'points'">
|
|
<view class="hero-card" style="background: linear-gradient(135deg, #FFB703 0%, #FF8A00 100%); color: #fff; border: none;">
|
|
<view class="tn-flex tn-flex-row-between tn-flex-col-center">
|
|
<view class="tn-text-md">{{ $tr('当前可用积分') }}</view>
|
|
<view class="tn-text-sm" style="background: rgba(255,255,255,0.2); padding: 4rpx 16rpx; border-radius: 100rpx;">{{ $tr('兑换规则') }}</view>
|
|
</view>
|
|
<view class="tn-margin-top-lg tn-text-bold" style="font-size: 80rpx;">--</view>
|
|
<view class="tn-margin-top tn-flex tn-flex-row-between">
|
|
<view class="tn-flex tn-flex-col-center">
|
|
<text class="tn-icon-calendar tn-margin-right-xs"></text> {{ $tr('每日签到领积分') }}
|
|
</view>
|
|
<view class="tn-flex tn-flex-col-center" style="opacity: 0.8;">
|
|
{{ $tr('去签到') }} <text class="tn-icon-right tn-margin-left-xs"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="tn-flex tn-flex-row-between tn-margin-top-lg">
|
|
<view class="btn-light tn-flex-1 tn-margin-right-sm tn-flex tn-flex-direction-column tn-flex-col-center tn-padding-lg" style="border-radius: 20rpx;">
|
|
<text class="tn-icon-shop tn-color-orange tn-margin-bottom-sm" style="font-size: 60rpx;"></text>
|
|
<text class="tn-text-bold tn-color-black">{{ $tr('积分商城') }}</text>
|
|
<text class="tn-text-xs tn-color-gray tn-margin-top-xs">{{ $tr('超值好物兑换') }}</text>
|
|
</view>
|
|
<view class="btn-light tn-flex-1 tn-margin-left-sm tn-flex tn-flex-direction-column tn-flex-col-center tn-padding-lg" style="border-radius: 20rpx;">
|
|
<text class="tn-icon-coupon tn-color-purplered tn-margin-bottom-sm" style="font-size: 60rpx;"></text>
|
|
<text class="tn-text-bold tn-color-black">{{ $tr('优惠券') }}</text>
|
|
<text class="tn-text-xs tn-color-gray tn-margin-top-xs">{{ $tr('租金水电抵扣') }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="record-card tn-margin-top-lg">
|
|
<view class="block-title">{{ $tr('积分明细') }}</view>
|
|
<view class="tn-margin-top tn-flex tn-flex-row-center tn-padding-xl">
|
|
<tn-empty icon="tn-icon-empty-data" :text="$tr('暂无积分明细')"></tn-empty>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 一码通管理 Mockup -->
|
|
<view v-else-if="pageKey === 'code'">
|
|
<view class="hero-card tn-flex tn-flex-direction-column tn-flex-col-center">
|
|
<view class="tn-text-md tn-color-black tn-text-bold">{{ $tr('我的通行二维码') }}</view>
|
|
<view class="tn-text-xs tn-color-gray tn-margin-top-xs">{{ $tr('可用于社区大门、单元门及电梯通行') }}</view>
|
|
|
|
<view class="qr-code-box tn-margin-top-xl tn-margin-bottom-lg tn-flex tn-flex-col-center tn-flex-row-center">
|
|
<view class="qr-placeholder tn-flex tn-flex-col-center tn-flex-row-center">
|
|
<text class="tn-icon-qr-code tn-color-gray" style="font-size: 200rpx; opacity: 0.2;"></text>
|
|
</view>
|
|
<view class="qr-mask tn-flex tn-flex-col-center tn-flex-row-center">
|
|
<text class="tn-color-white tn-text-bold tn-text-lg">{{ $tr('未获取通行权限') }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="tn-text-xs tn-color-gray tn-text-center tn-margin-bottom">{{ $tr('请在完成入住签约并录入人脸/实名信息后\n系统将自动为您分配通行权限') }}</view>
|
|
</view>
|
|
|
|
<view class="record-card tn-margin-top-lg">
|
|
<view class="tn-flex tn-flex-row-between tn-flex-col-center">
|
|
<view class="block-title">{{ $tr('访客通行') }}</view>
|
|
<view class="tn-color-gray tn-text-sm">{{ $tr('临时访客授权') }} <text class="tn-icon-right"></text></view>
|
|
</view>
|
|
<view class="tn-margin-top tn-flex tn-flex-row-center tn-padding-xl">
|
|
<tn-empty icon="tn-icon-empty-data" :text="$tr('暂无访客通行记录')"></tn-empty>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 默认通用占位 -->
|
|
<view v-else>
|
|
<view class="hero-card">
|
|
<view class="hero-badge">{{ $tr('即将开放') }}</view>
|
|
<view class="hero-title tn-margin-top">{{ resolvedPageTitle || $tr('功能建设中') }}</view>
|
|
<view class="hero-desc tn-margin-top-sm">{{ resolvedPageDesc || resolvedDefaultDesc }}</view>
|
|
</view>
|
|
|
|
<view class="record-card tn-margin-top-xl">
|
|
<view class="block-title">{{ $tr('当前状态') }}</view>
|
|
<view class="empty-text tn-margin-top">
|
|
{{ $tr('该功能当前仍在建设中，暂未开放正式办理入口。你可以先返回上一页，或回到首页继续查看已开放功能。') }}
|
|
</view>
|
|
<view class="tip-card tn-margin-top-lg">
|
|
<view class="tip-title">{{ $tr('说明') }}</view>
|
|
<view class="tip-desc tn-margin-top-xs">{{ $tr('后续接入真实能力后，这里会展示正式的业务入口、状态数据和办理记录。') }}</view>
|
|
</view>
|
|
<view class="submit-btn btn-primary tn-margin-top-xl" @click="goBack">
|
|
<text class="tn-text-bold">{{ $tr('返回上一页') }}</text>
|
|
</view>
|
|
<view class="submit-btn btn-light tn-margin-top" @click="goHome">
|
|
<text class="tn-text-bold">{{ $tr('返回首页') }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
function safeDecodeText(value, fallback = '') {
|
|
if (value === undefined || value === null || value === '') {
|
|
return fallback
|
|
}
|
|
try {
|
|
return decodeURIComponent(String(value))
|
|
} catch (error) {
|
|
return String(value)
|
|
}
|
|
}
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
pageTitleZh: '',
|
|
pageTitleEn: '',
|
|
pageDescZh: '',
|
|
pageDescEn: '',
|
|
pageKey: '',
|
|
rawPageTitle: '',
|
|
rawPageDesc: ''
|
|
}
|
|
},
|
|
computed: {
|
|
resolvedPageTitle() {
|
|
if (this.$getLanguage() === 'en') {
|
|
return this.pageTitleEn || this.pageTitleZh || this.rawPageTitle || this.$tr('业务办理')
|
|
}
|
|
return this.pageTitleZh || this.pageTitleEn || this.rawPageTitle || this.$tr('业务办理')
|
|
},
|
|
resolvedPageDesc() {
|
|
if (this.$getLanguage() === 'en') {
|
|
return this.pageDescEn || this.pageDescZh || this.rawPageDesc || ''
|
|
}
|
|
return this.pageDescZh || this.pageDescEn || this.rawPageDesc || ''
|
|
},
|
|
resolvedDefaultDesc() {
|
|
return this.$tr('该能力正在完善中，开放后会同步到个人中心的对应入口。')
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.pageTitleZh = safeDecodeText(options && (options.titleZh || options.title), '')
|
|
this.pageTitleEn = safeDecodeText(options && options.titleEn, '')
|
|
this.pageDescZh = safeDecodeText(options && (options.descZh || options.desc), '')
|
|
this.pageDescEn = safeDecodeText(options && options.descEn, '')
|
|
this.rawPageTitle = safeDecodeText(options && options.title, '')
|
|
this.rawPageDesc = safeDecodeText(options && options.desc, '')
|
|
this.pageKey = safeDecodeText(options && options.key, '')
|
|
},
|
|
methods: {
|
|
goBack() {
|
|
uni.navigateBack()
|
|
},
|
|
goHome() {
|
|
uni.reLaunch({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.service-stub-page {
|
|
min-height: 100vh;
|
|
background: linear-gradient(180deg, #F0F6FF 0%, #F8FAFF 100%);
|
|
}
|
|
|
|
.hero-card,
|
|
.record-card {
|
|
background: #ffffff;
|
|
border-radius: 24rpx;
|
|
padding: 32rpx;
|
|
box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
|
|
border: 1rpx solid rgba($brand-primary, 0.05);
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 10rpx 18rpx;
|
|
border-radius: 999rpx;
|
|
background: rgba($brand-primary, 0.1);
|
|
color: $brand-primary;
|
|
font-size: 22rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hero-title,
|
|
.block-title,
|
|
.record-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #1A2233;
|
|
}
|
|
|
|
.hero-desc,
|
|
.empty-text {
|
|
color: #6A7A99;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.tip-card {
|
|
padding: 24rpx;
|
|
border-radius: 20rpx;
|
|
background: rgba($brand-primary, 0.02);
|
|
border: 1rpx solid rgba($brand-primary, 0.1);
|
|
}
|
|
|
|
.tip-title {
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
color: #1A2233;
|
|
}
|
|
|
|
.tip-desc {
|
|
font-size: 24rpx;
|
|
color: #6A7A99;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.submit-btn {
|
|
width: 100%;
|
|
height: 96rpx;
|
|
border-radius: 999rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.submit-btn:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
|
|
color: #ffffff;
|
|
box-shadow: 0 12rpx 32rpx rgba($brand-primary, 0.25);
|
|
}
|
|
|
|
.btn-light {
|
|
background: #ffffff;
|
|
color: $brand-primary;
|
|
border: 1rpx solid rgba($brand-primary, 0.3);
|
|
box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
|
|
}
|
|
|
|
.qr-code-box {
|
|
position: relative;
|
|
width: 400rpx;
|
|
height: 400rpx;
|
|
border-radius: 32rpx;
|
|
background-color: #F8FAFF;
|
|
border: 1rpx dashed rgba($brand-primary, 0.2);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.qr-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.qr-mask {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
</style>
|