chore: initial import
This commit is contained in:
liangjian
382
pkgService/service_stub/service_stub.vue
Normal file
382
pkgService/service_stub/service_stub.vue
Normal file
@@ -0,0 +1,382 @@
|
||||
<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">{{ t('lockNoAccessTitle') }}</view>
|
||||
<view class="hero-desc tn-margin-top-sm tn-text-center">{{ t('lockNoAccessDesc') }}</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> {{ t('tempPassword') }}
|
||||
</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-unlock tn-margin-right-xs"></text> {{ t('oneTapUnlock') }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="record-card tn-margin-top-lg">
|
||||
<view class="block-title">{{ t('authRecordTitle') }}</view>
|
||||
<view class="tn-margin-top tn-flex tn-flex-row-center tn-padding-xl">
|
||||
<tn-empty icon="tn-icon-empty-data" :text="t('lockEmptyRecord')"></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">{{ t('pointsAvailable') }}</view>
|
||||
<view class="tn-text-sm" style="background: rgba(255,255,255,0.2); padding: 4rpx 16rpx; border-radius: 100rpx;">{{ t('redeemRules') }}</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> {{ t('dailyPoints') }}
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-col-center" style="opacity: 0.8;">
|
||||
{{ t('goCheckIn') }} <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">{{ t('pointsMall') }}</text>
|
||||
<text class="tn-text-xs tn-color-gray tn-margin-top-xs">{{ t('pointsMallDesc') }}</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">{{ t('coupon') }}</text>
|
||||
<text class="tn-text-xs tn-color-gray tn-margin-top-xs">{{ t('couponDesc') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="record-card tn-margin-top-lg">
|
||||
<view class="block-title">{{ t('pointsRecordTitle') }}</view>
|
||||
<view class="tn-margin-top tn-flex tn-flex-row-center tn-padding-xl">
|
||||
<tn-empty icon="tn-icon-empty-data" :text="t('pointsEmpty')"></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">{{ t('accessCodeTitle') }}</view>
|
||||
<view class="tn-text-xs tn-color-gray tn-margin-top-xs">{{ t('accessCodeDesc') }}</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">{{ t('noAccessPermission') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-text-xs tn-color-gray tn-text-center tn-margin-bottom">{{ t('accessAssignDesc') }}</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">{{ t('visitorAccessTitle') }}</view>
|
||||
<view class="tn-color-gray tn-text-sm">{{ t('visitorAccessAction') }} <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="t('visitorEmpty')"></tn-empty>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 默认通用占位 -->
|
||||
<view v-else>
|
||||
<view class="hero-card">
|
||||
<view class="hero-badge">{{ t('heroBadge') }}</view>
|
||||
<view class="hero-title tn-margin-top">{{ resolvedPageTitle || t('comingSoonTitle') }}</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">{{ t('currentStatusTitle') }}</view>
|
||||
<view class="empty-text tn-margin-top">
|
||||
{{ t('currentStatusDesc') }}
|
||||
</view>
|
||||
<view class="tip-card tn-margin-top-lg">
|
||||
<view class="tip-title">{{ t('noteTitle') }}</view>
|
||||
<view class="tip-desc tn-margin-top-xs">{{ t('noteDesc') }}</view>
|
||||
</view>
|
||||
<view class="submit-btn btn-primary tn-margin-top-xl" @click="goBack">
|
||||
<text class="tn-text-bold">{{ t('backPrev') }}</text>
|
||||
</view>
|
||||
<view class="submit-btn btn-light tn-margin-top" @click="goHome">
|
||||
<text class="tn-text-bold">{{ t('backHome') }}</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 {
|
||||
i18n: {
|
||||
zh: {
|
||||
defaultPageTitle: '业务办理',
|
||||
defaultPageDesc: '该能力正在完善中，开放后会同步到个人中心的对应入口。',
|
||||
lockNoAccessTitle: '暂无门锁权限',
|
||||
lockNoAccessDesc: '您当前暂未分配智能门锁，或门锁暂未联网。\n入住后即可使用一键开门与临时密码下发功能。',
|
||||
tempPassword: '临时密码',
|
||||
oneTapUnlock: '一键开锁',
|
||||
authRecordTitle: '授权记录',
|
||||
lockEmptyRecord: '暂无门锁操作记录',
|
||||
pointsAvailable: '当前可用积分',
|
||||
redeemRules: '兑换规则',
|
||||
dailyPoints: '每日签到领积分',
|
||||
goCheckIn: '去签到',
|
||||
pointsMall: '积分商城',
|
||||
pointsMallDesc: '超值好物兑换',
|
||||
coupon: '优惠券',
|
||||
couponDesc: '租金水电抵扣',
|
||||
pointsRecordTitle: '积分明细',
|
||||
pointsEmpty: '暂无积分明细',
|
||||
accessCodeTitle: '我的通行二维码',
|
||||
accessCodeDesc: '可用于社区大门、单元门及电梯通行',
|
||||
noAccessPermission: '未获取通行权限',
|
||||
accessAssignDesc: '请在完成入住签约并录入人脸/实名信息后\n系统将自动为您分配通行权限',
|
||||
visitorAccessTitle: '访客通行',
|
||||
visitorAccessAction: '临时访客授权',
|
||||
visitorEmpty: '暂无访客通行记录',
|
||||
heroBadge: '即将开放',
|
||||
comingSoonTitle: '功能建设中',
|
||||
currentStatusTitle: '当前状态',
|
||||
currentStatusDesc: '该功能当前仍在建设中，暂未开放正式办理入口。你可以先返回上一页，或回到首页继续查看已开放功能。',
|
||||
noteTitle: '说明',
|
||||
noteDesc: '后续接入真实能力后，这里会展示正式的业务入口、状态数据和办理记录。',
|
||||
backPrev: '返回上一页',
|
||||
backHome: '返回首页'
|
||||
},
|
||||
en: {
|
||||
defaultPageTitle: 'Service Center',
|
||||
defaultPageDesc: 'This capability is being improved and will appear in the related personal center entry when available.',
|
||||
lockNoAccessTitle: 'No door lock access',
|
||||
lockNoAccessDesc: 'No smart lock is assigned yet, or the lock is currently offline.\nAfter check-in, one-tap unlock and temporary password features will be available.',
|
||||
tempPassword: 'Temporary Code',
|
||||
oneTapUnlock: 'Unlock Now',
|
||||
authRecordTitle: 'Access Records',
|
||||
lockEmptyRecord: 'No door lock records',
|
||||
pointsAvailable: 'Available Points',
|
||||
redeemRules: 'Redeem Rules',
|
||||
dailyPoints: 'Daily check-in rewards',
|
||||
goCheckIn: 'Check In',
|
||||
pointsMall: 'Points Mall',
|
||||
pointsMallDesc: 'Redeem for selected items',
|
||||
coupon: 'Coupons',
|
||||
couponDesc: 'Offset rent and utilities',
|
||||
pointsRecordTitle: 'Points History',
|
||||
pointsEmpty: 'No points record',
|
||||
accessCodeTitle: 'My Access QR Code',
|
||||
accessCodeDesc: 'Use it for community gates, unit doors, and elevators',
|
||||
noAccessPermission: 'No access permission',
|
||||
accessAssignDesc: 'After completing check-in signing and face / identity enrollment,\nthe system will automatically assign your access permission.',
|
||||
visitorAccessTitle: 'Visitor Access',
|
||||
visitorAccessAction: 'Temporary visitor authorization',
|
||||
visitorEmpty: 'No visitor access records',
|
||||
heroBadge: 'Coming Soon',
|
||||
comingSoonTitle: 'Coming Soon',
|
||||
currentStatusTitle: 'Current Status',
|
||||
currentStatusDesc: 'This capability is still under development and is not yet officially available. You can go back or return to the home page to browse available features.',
|
||||
noteTitle: 'Notes',
|
||||
noteDesc: 'After the real capability is connected, this page will display the formal service entry, status data, and processing records.',
|
||||
backPrev: 'Go Back',
|
||||
backHome: 'Back Home'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageTitleZh: '',
|
||||
pageTitleEn: '',
|
||||
pageDescZh: '',
|
||||
pageDescEn: '',
|
||||
pageKey: '',
|
||||
rawPageTitle: '',
|
||||
rawPageDesc: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
resolvedPageTitle() {
|
||||
if (this.$getLanguage() === 'en') {
|
||||
return this.pageTitleEn || this.pageTitleZh || this.rawPageTitle || this.t('defaultPageTitle')
|
||||
}
|
||||
return this.pageTitleZh || this.pageTitleEn || this.rawPageTitle || this.t('defaultPageTitle')
|
||||
},
|
||||
resolvedPageDesc() {
|
||||
if (this.$getLanguage() === 'en') {
|
||||
return this.pageDescEn || this.pageDescZh || this.rawPageDesc || ''
|
||||
}
|
||||
return this.pageDescZh || this.pageDescEn || this.rawPageDesc || ''
|
||||
},
|
||||
resolvedDefaultDesc() {
|
||||
return this.t('defaultPageDesc')
|
||||
}
|
||||
},
|
||||
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: {
|
||||
t(key, params) {
|
||||
return this.$tm('pkgService.service_stub.service_stub', key, params)
|
||||
},
|
||||
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>
|
||||
Reference in New Issue
Block a user