QSY-lvjuxcx/pkgService/ticket_center/ticket_center.vue

<template>
  <view class="ticket-center-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">{{ $tr('工单中心') }}</view>
    </tn-nav-bar>

    <view class="page-content tn-padding" :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
      <view class="hero-card tn-margin-bottom-lg">
        <view class="hero-badge">
          <text class="badge-dot"></text>
          <text>{{ $tr('SERVICE') }}</text>
        </view>
        <view class="hero-title tn-margin-top">{{ $tr('住中工单服务') }}</view>
        <view class="hero-desc tn-margin-top-sm">{{ $tr('报修、续住、退宿、调宿、送水、清洁和意见建议都统一从这里进入，提交后可继续查看流转记录。') }}</view>
      </view>

      <view class="service-grid">
        <view
          v-for="item in ticketServices"
          :key="item.serviceType"
          class="service-card"
          @click="openTicketWorkbench(item)"
        >
          <view class="service-card__icon"><text :class="item.icon"></text></view>
          <view class="service-card__title tn-margin-top">{{ getItemText(item, 'title', 'titleEn') }}</view>
          <view class="service-card__desc tn-margin-top-xs">{{ getItemText(item, 'desc', 'descEn') }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TicketCenterPage',
  data() {
    return {
      ticketServices: [
        {
          serviceType: 'TicketRepairApply',
          icon: 'tn-icon-set-fill',
          title: '报修申请',
          titleEn: 'Repair Request',
          desc: '设备故障、设施损坏等问题报修',
          descEn: 'Report device or facility issues'
        },
        {
          serviceType: 'TicketRenewalApply',
          icon: 'tn-icon-calendar-fill',
          title: '续住申请',
          titleEn: 'Renewal',
          desc: '提交续住时间与诉求',
          descEn: 'Submit renewal details'
        },
        {
          serviceType: 'TicketCheckOutApply',
          icon: 'tn-icon-home-in-fill',
          title: '退宿申请',
          titleEn: 'Checkout',
          desc: '提交退宿时间与原因',
          descEn: 'Submit checkout request'
        },
        {
          serviceType: 'TicketChangeApply',
          icon: 'tn-icon-home-smile-fill',
          title: '调宿申请',
          titleEn: 'Room Change',
          desc: '选择意向房型并提交调宿需求',
          descEn: 'Submit room change request'
        },
        {
          serviceType: 'TicketWaterDeliveryApply',
          icon: 'tn-icon-shop-fill',
          title: '送水申请',
          titleEn: 'Water Delivery',
          desc: '填写送水桶数和送达说明',
          descEn: 'Request water delivery'
        },
        {
          serviceType: 'TicketCleaningApply',
          icon: 'tn-icon-clean',
          title: '清洁服务',
          titleEn: 'Cleaning Service',
          desc: '提交清洁需求或预约时间',
          descEn: 'Submit cleaning request'
        },
        {
          serviceType: 'TicketSuggestionApply',
          icon: 'tn-icon-message-fill',
          title: '意见建议',
          titleEn: 'Suggestion',
          desc: '反馈建议、投诉或其他诉求',
          descEn: 'Feedback, suggestions, or complaints'
        }
      ]
    }
  },
  methods: {
    getItemText(item, fieldZh, fieldEn) {
      return this.$getLanguage && this.$getLanguage() === 'en'
        ? (item[fieldEn] || item[fieldZh] || '')
        : (item[fieldZh] || item[fieldEn] || '')
    },
    openTicketWorkbench(item) {
      uni.navigateTo({
        url: `/pkgService/ticket_workbench/ticket_workbench?serviceType=${encodeURIComponent(item.serviceType)}`
      })
    }
  }
}
</script>

<style scoped lang="scss">
.ticket-center-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #F0F6FF 0%, #F8FAFF 100%);
}

.hero-card {
  padding: 32rpx;
  background: #FFFFFF;
  border-radius: 30rpx;
  box-shadow: 0 16rpx 40rpx rgba(43, 142, 255, 0.08);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 10rpx 18rpx;
  border-radius: 999rpx;
  background: rgba($brand-primary, 0.08);
  color: $brand-primary;
  font-size: 22rpx;
  font-weight: 700;
}

.badge-dot {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background: $brand-primary;
  margin-right: 10rpx;
}

.hero-title {
  font-size: 44rpx;
  color: #1A2233;
  font-weight: 800;
}

.hero-desc {
  font-size: 26rpx;
  color: #6A7A99;
  line-height: 1.7;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20rpx;
  padding-bottom: 40rpx;
}

.service-card {
  padding: 28rpx;
  background: #FFFFFF;
  border-radius: 28rpx;
  box-shadow: 0 12rpx 32rpx rgba(43, 142, 255, 0.06);
}

.service-card__icon {
  width: 88rpx;
  height: 88rpx;
  border-radius: 24rpx;
  background: linear-gradient(135deg, rgba($brand-primary, 0.14) 0%, rgba($brand-primary, 0.05) 100%);
  color: $brand-primary;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
}

.service-card__title {
  font-size: 30rpx;
  color: #1A2233;
  font-weight: 700;
}

.service-card__desc {
  font-size: 22rpx;
  color: #7C8AA5;
  line-height: 1.6;
}
</style>