jd_logistics/jd_logistics-app/pages/order/components/OrderAddedService.vue

<template>
  <view class="info-card">
    <view class="card-body">
      <!-- 包装服务（仅京东） -->
      <view class="info-row" v-if="orderType === 1">
        <text class="info-label">包装服务：</text>
        <text class="info-value" :class="{ 'status-off': !addedService.isPack }">
          {{ addedService.isPack ? '已开启' : '未开启' }}
        </text>
      </view>

      <!-- 保价（两者共有） -->
      <view class="info-row">
        <text class="info-label">保价：</text>
        <text class="info-value" :class="{ 'status-off': !addedService.guaranteeMoney }">
          <template v-if="addedService.guaranteeMoney">
            ￥{{ addedService.guaranteeMoney }}
          </template>
          <template v-else>未保价</template>
        </text>
      </view>

      <!-- 签单返还（两者共有，但顺丰需显示具体类型） -->
      <view class="info-row">
        <text class="info-label">签单返还：</text>
        <text class="info-value" :class="{ 'status-off': !addedService.isReceiptCollect }">
          {{ signReturnDisplay }}
        </text>
      </view>

      <!-- 超长超重（两者共有？） -->
<!--      <view class="info-row">
        <text class="info-label">超长超重：</text>
        <text class="info-value" :class="{ 'status-off': !addedService.isOverLongWeight }">
          {{ addedService.isOverLongWeight ? '已开启' : '未开启' }}
        </text>
      </view> -->

      <!-- 打木架（仅顺丰） -->
      <view class="info-row" v-if="orderType === 2">
        <text class="info-label">打木架：</text>
        <text class="info-value" :class="{ 'status-off': !addedService.isWoodenCrate }">
          {{ addedService.isWoodenCrate ? '已开启' : '未开启' }}
        </text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  orderDetail: {
    type: Object,
    default: () => ({})
  }
})

// 解析 addedService 字段（可能为字符串或对象）
const addedService = computed(() => {
  if (!props.orderDetail.addedService) return {}
  if (typeof props.orderDetail.addedService === 'string') {
    try {
      return JSON.parse(props.orderDetail.addedService) || {}
    } catch (e) {
      console.error('解析增值服务失败', e)
      return {}
    }
  }
  return props.orderDetail.addedService
})

const orderType = computed(() => props.orderDetail.orderType) // 1:京东, 2:顺丰

// 签单返还显示文本
const signReturnDisplay = computed(() => {
  const value = addedService.value.isReceiptCollect
  if (!value) return '未开启'

  if (orderType.value === 2) {
    // 顺丰凭证类型映射
    const map = { 1: '运单原件', 2: '复印件', 3: '照片' }
    return map[value] || '已开启'
  }
  return '已开启'
})
</script>

<style scoped lang="scss">
.info-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  padding: 20rpx;
  margin-bottom: 20rpx;

  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;

    image {
      width: 35rpx;
      height: 35rpx;
    }

    .card-title {
      height: 48rpx;
      line-height: 48rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #333;
      margin-left: 10rpx;
    }
  }

  .card-body {
    .info-row {
      min-height: 44rpx;
      line-height: 44rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 16rpx;

      &:first-child {
        margin-top: 0;
      }

      .info-label {
        font-size: 28rpx;
        color: #666666;
      }

      .info-value {
        font-size: 28rpx;
        color: #333;

        &.price {
          color: #FD5F3C;
          font-weight: bold;
        }

        &.status-off {
          color: #999; // 未开启状态颜色变淡
        }
      }
    }
  }
}
</style>