更新....

shinnosuke

5 天以前 e52934f6527027bd6008c2ade61c3083159efd4a

 rencaika/pages/spouse-employment/spouse-employment.uvue

@@ -1,6 +1,6 @@
<template>
   <view class="page">
      <image class="hero-image" src="/static/stay-assets/hotel-vienna.jpg" mode="aspectFill"></image>
      <image class="hero-image" :src="heroImage" mode="aspectFill" @error="replaceHeroImage"></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>

@@ -8,9 +8,10 @@
         <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="service-row"><text class="service-name">{{title}}</text></view>
            <view v-if="applicableCards != ''" class="talent-tag"><text>{{applicableCards}}</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 class="detail-card"><text>{{rulesText}}</text></view>
            <view v-if="!available" class="unavailable"><text>{{unavailableReason}}</text></view>
         </view>
      </view>
@@ -20,27 +21,29 @@

<script setup lang="uts">
   import { getSpouseEmploymentBenefit } from '../../services/portal.uts'
   import { resolveApiUrl } from '../../services/http.uts'
   import { resolveTalentId } from '../../utils/talent-id.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('该权益暂未开放')
   const serviceId = ref(''); const talentId = ref(''); const loading = ref(true); const loadError = ref(false); const available = ref(false)
   const fallbackHeroImage = '/static/common/image-placeholder.png'; const heroImage = ref(fallbackHeroImage); const title = ref('配偶推荐就业'); const applicableCards = ref(''); const rulesText = 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 : ''
      serviceId.value = options != null && options['serviceId'] != null ? options['serviceId'] as string : ''; talentId.value = resolveTalentId()
      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
      getSpouseEmploymentBenefit(serviceId.value, talentId.value, (data: any) => {
         title.value = data.title || title.value; heroImage.value = data.heroImage != null && data.heroImage != '' ? resolveApiUrl(data.heroImage as string) : fallbackHeroImage; applicableCards.value = data.applicableCards != null ? String(data.applicableCards) : ''; rulesText.value = data.rulesText || ''; available.value = data.available === true; unavailableReason.value = data.unavailableReason || unavailableReason.value; loading.value = false
      }, () => { loading.value = false; loadError.value = true })
   }
   const replaceHeroImage = () => { heroImage.value = fallbackHeroImage }
   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>

@@ -48,6 +51,6 @@
   .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; }
   .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; } .talent-tag { display:flex; align-self:flex-start; min-height:42rpx; max-width:100%; margin:8rpx 10rpx 0; box-sizing:border-box; padding:0 14rpx; border:1rpx solid #FFB98E; border-radius:5rpx; justify-content:center; align-items:center; } .talent-tag text { max-width:640rpx; color:#D87842; font-size:23rpx; line-height:30rpx; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .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; } .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>