<template>
|
<view class="page">
|
<image class="hero-image" src="/static/stay-assets/hotel-vienna.jpg" mode="aspectFill"></image>
|
<view class="hero-shade"></view>
|
<view class="custom-nav"><view class="safe-space" :style="'height:' + navTop + 'px'"></view><view class="nav-row" :style="'height:' + navHeight + 'px;padding-right:' + navRight + 'px'"><view class="back-button" @tap="goBack"><image src="/static/food-assets/arrow-left-white.svg" mode="aspectFit"></image></view><view class="capsule-space" :style="'width:' + navWidth + 'px'"></view></view></view>
|
|
<view class="content-sheet">
|
<view v-if="loading" class="state-box"><text>正在加载权益信息</text></view>
|
<view v-else-if="loadError" class="state-box"><text>权益信息加载失败</text><text class="retry" @tap="loadBenefit">重新加载</text></view>
|
<view v-else>
|
<view class="service-row"><text class="service-name">{{title}}</text><text class="free-label">{{freeLabel}}</text></view>
|
<view class="section-title"><text>权益详情</text><view></view></view>
|
<view class="detail-card"><text>{{rulesText}}</text><text class="contact-text" @tap="callConsultation">咨询电话：{{consultationPhone}}</text></view>
|
<view v-if="!available" class="unavailable"><text>{{unavailableReason}}</text></view>
|
</view>
|
</view>
|
<view class="action-bar"><view :class="available && !loading && !loadError ? 'fill-button' : 'fill-button disabled-button'" hover-class="fill-button-active" @tap="fillInformation"><text>{{available ? '填写信息' : '暂不可申请'}}</text></view></view>
|
</view>
|
</template>
|
|
<script setup lang="uts">
|
import { getSpouseEmploymentBenefit } from '../../services/portal.uts'
|
import { safeBack } from '../../utils/navigation.uts'
|
|
const navTop = ref(28); const navHeight = ref(32); const navWidth = ref(88); const navRight = ref(10)
|
const serviceId = ref(''); const loading = ref(true); const loadError = ref(false); const available = ref(false)
|
const title = ref('配偶推荐就业'); const freeLabel = ref('免费'); const rulesText = ref(''); const consultationPhone = ref(''); const unavailableReason = ref('该权益暂未开放')
|
onLoad((options: any) => {
|
// #ifdef MP-WEIXIN
|
const capsule = uni.getMenuButtonBoundingClientRect(); const info = uni.getSystemInfoSync(); navTop.value = capsule.top; navHeight.value = capsule.height; navWidth.value = capsule.width; navRight.value = info.windowWidth - capsule.right
|
// #endif
|
serviceId.value = options != null && options['serviceId'] != null ? options['serviceId'] as string : ''
|
loadBenefit()
|
})
|
const loadBenefit = () => {
|
if (serviceId.value == '') { loading.value = false; loadError.value = true; return }
|
loading.value = true; loadError.value = false
|
getSpouseEmploymentBenefit(serviceId.value, (data: any) => {
|
title.value = data.title || title.value; freeLabel.value = data.freeLabel || freeLabel.value; rulesText.value = data.rulesText || ''; consultationPhone.value = data.consultationPhone || ''; available.value = data.available === true; unavailableReason.value = data.unavailableReason || unavailableReason.value; loading.value = false
|
}, () => { loading.value = false; loadError.value = true })
|
}
|
const goBack = () => safeBack('/pages/premium-benefits/premium-benefits')
|
const callConsultation = () => { if (consultationPhone.value != '') uni.makePhoneCall({ phoneNumber: consultationPhone.value }) }
|
const fillInformation = () => { if (!loading.value && !loadError.value && available.value) uni.navigateTo({ url: '/pages/spouse-employment-form/spouse-employment-form?serviceId=' + encodeURIComponent(serviceId.value) }) }
|
</script>
|
|
<style>
|
.page { width:100%; height:100vh; position:relative; overflow:hidden; background-color:#F5F5F5; }
|
.hero-image { position:absolute; left:0; right:0; top:0; width:100%; height:425rpx; background-color:#D4DAE1; } .hero-shade { position:absolute; z-index:1; left:0; right:0; top:0; height:210rpx; background-image:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0)); }
|
.custom-nav { position:absolute; z-index:10; left:0; right:0; top:0; } .safe-space { height:28px; } .nav-row { display:flex; box-sizing:border-box; padding-left:24rpx; flex-direction:row; align-items:center; justify-content:space-between; } .back-button { display:flex; width:54rpx; height:54rpx; border-radius:50%; background-color:rgba(45,45,45,.38); justify-content:center; align-items:center; } .back-button image { width:38rpx; height:38rpx; } .capsule-space { height:100%; flex-shrink:0; }
|
.content-sheet { position:absolute; z-index:3; left:0; right:0; top:405rpx; bottom:128rpx; bottom:calc(128rpx + env(safe-area-inset-bottom)); box-sizing:border-box; padding:28rpx 25rpx 20rpx; border-radius:30rpx 30rpx 0 0; background-color:#F5F5F5; } .service-row { display:flex; height:64rpx; padding:0 10rpx; flex-direction:row; justify-content:space-between; align-items:center; } .service-name { color:#252525; font-size:35rpx; line-height:48rpx; font-weight:700; } .free-label { color:#FF7A27; font-size:24rpx; } .section-title { display:flex; height:84rpx; margin-top:15rpx; padding-left:20rpx; flex-direction:column; align-items:flex-start; } .section-title text { color:#756B67; font-size:31rpx; line-height:42rpx; font-weight:600; } .section-title view { width:61rpx; height:7rpx; margin:10rpx 0 0 28rpx; border-radius:4rpx; background-image:linear-gradient(90deg,#FF4C56,#FFD43A); } .detail-card { box-sizing:border-box; padding:43rpx 47rpx; border-radius:15rpx; background-color:#FFFFFF; } .detail-card text { display:block; color:#727983; font-size:25rpx; line-height:52rpx; } .detail-card .contact-text { margin-top:20rpx; color:#FF7A27; } .unavailable { margin-top:20rpx; text-align:center; color:#9A725A; font-size:24rpx; }
|
.state-box { display:flex; height:230rpx; color:#8D96A5; font-size:27rpx; flex-direction:column; align-items:center; justify-content:center; } .retry { margin-top:24rpx; color:#FF7A27; } .action-bar { display:flex; position:absolute; z-index:8; left:0; right:0; bottom:0; height:128rpx; height:calc(128rpx + env(safe-area-inset-bottom)); box-sizing:border-box; padding:17rpx 31rpx 13rpx; padding-bottom:calc(13rpx + env(safe-area-inset-bottom)); background-color:#FFFFFF; } .fill-button { display:flex; width:100%; height:82rpx; border-radius:43rpx; background-image:linear-gradient(90deg,#FF4B32,#FF8A1E); justify-content:center; align-items:center; } .fill-button text { color:#FFFFFF; font-size:29rpx; font-weight:600; } .disabled-button { background-image:none; background-color:#C7CDD5; } .fill-button-active { opacity:.8; transform:scale(.99); }
|
</style>
|
