xukou-ticket-wx/pages/index/invoice_detail.vue

<template>
  <view class="reservation-page">
    <view class="fixed-nav">
      <NavBar title="发票详情" />
    </view>
    <view class="content-area">
      <view class="invoice-section">
        <view class="invoice-title">预约信息</view>
        <view class="invoice-row"><text class="invoice-label">预约日期</text><text class="invoice-value">{{ formatChinaDate(item.passage_date || item.created_at) }}</text></view>
        <view class="invoice-row"><text class="invoice-label">预约批次</text><text class="invoice-value">{{ item.batch && item.batch.name ? item.batch.name : '-' }}</text></view>
        <view class="invoice-row"><text class="invoice-label">航行方向</text><text class="invoice-value">{{ item.direction_name || '-' }}</text></view>
        <view class="invoice-row"><text class="invoice-label">订单编号</text><text class="invoice-value">{{ item.id || '-' }}</text></view>
      </view>

      <view class="invoice-section">
        <view class="invoice-title">船舶信息</view>
        <view class="invoice-row"><text class="invoice-label">船名</text><text class="invoice-value">{{ item.ship && item.ship.ship_number ? item.ship.ship_number : '-' }}</text></view>
        <view class="invoice-row"><text class="invoice-label">载重吨位</text><text class="invoice-value">{{ item.ship && item.ship.total_tonnage ? item.ship.total_tonnage + '吨' : '-' }}</text></view>
        <view class="invoice-row"><text class="invoice-label">类型</text><text class="invoice-value">{{ shipTypeName }}</text></view>
      </view>

      <view class="invoice-section">
        <view class="invoice-title">票据信息</view>
        <view class="invoice-row"><text class="invoice-label">支付金额</text><text class="invoice-value">￥{{ formatPrice(item.price) }}</text></view>
        <view class="invoice-row"><text class="invoice-label">开票状态</text><text class="invoice-value">{{ billStatusText }}</text></view>
        <view v-if="billReason" class="invoice-row"><text class="invoice-label">失败原因</text><text class="invoice-value">{{ billReason }}</text></view>
      </view>

      <view v-if="billLink" class="invoice-bottom-bar">
        <button class="invoice-issue-btn" @click="openExternalLink(billLink)">查看发票</button>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
import { base } from '@/common/util.js'
import { API } from '@/config/index.js'

export default {
  name: 'InvoiceDetailPage',
  components: { NavBar },
  data() {
    return {
      reservationId: '',
      item: {
        ship: {},
        batch: {},
      },
      shipTypeEnum: [],
    }
  },
  computed: {
    billStatusText() {
      const map = {
        1: '不可开票',
        2: '开票中',
        3: '已开票',
        4: '开票失败',
        5: '已拒绝',
      }
      return map[this.item.bill_status] || '-'
    },
    billLink() {
      const bill = this.item.bill || {}
      const billInfoList = Array.isArray(bill.billInfoList) ? bill.billInfoList : []
      const firstInfo = billInfoList[0] || bill
      return firstInfo.pictureUrl || firstInfo.url || ''
    },
    billReason() {
      const bill = this.item.bill || {}
      const billInfoList = Array.isArray(bill.billInfoList) ? bill.billInfoList : []
      const firstInfo = billInfoList[0] || bill
      return firstInfo.reason || firstInfo.message || firstInfo.msg || firstInfo.remark || ''
    },
    shipTypeName() {
      const type = this.item.ship && this.item.ship.ship_type
      const found = this.shipTypeEnum.find(entry => entry.value === type || entry.value == type)
      return found ? found.label : (type || '-')
    }
  },
  onLoad(options) {
    this.reservationId = options.id || ''
  },
  async onShow() {
    await this.fetchShipTypeEnum()
    await this.fetchReservationDetail()
  },
  methods: {
    formatChinaDate: base.formatChinaDate,
    formatPrice(price) {
      const numericPrice = Number(price)
      return Number.isNaN(numericPrice) ? '0.00' : numericPrice.toFixed(2)
    },
    async fetchReservationDetail() {
      const token = uni.getStorageSync('token')
      if (!token || !this.reservationId) return

      uni.showLoading({ title: '加载中...' })
      try {
        const res = await new Promise((resolve, reject) => {
          uni.request({
            url: `${API.RESERVATION_DETAIL}/${this.reservationId}?token=${token}`,
            method: 'GET',
            success: resolve,
            fail: reject
          })
        })
        if (res.data && res.data.errcode === 0 && res.data.data) {
          this.item = res.data.data
        } else {
          uni.showToast({ title: (res.data && res.data.errmsg) || '获取发票详情失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '网络错误', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    },
    async fetchShipTypeEnum() {
      const token = uni.getStorageSync('token')
      if (!token) return
      try {
        const res = await new Promise((resolve, reject) => {
          uni.request({
            url: `${API.SHIP_PROPERTY_ENUM}?token=${token}`,
            method: 'GET',
            success: resolve,
            fail: reject
          })
        })
        if (res.data && res.data.errcode === 0) {
          const shipTypeRaw = res.data.data.ship_type || {}
          this.shipTypeEnum = Object.keys(shipTypeRaw).map(label => ({
            label,
            value: shipTypeRaw[label]
          }))
        }
      } catch (e) {}
    },
    openExternalLink(url) {
      if (!url) return
      window.open(url, '_blank')
    }
  }
}
</script>

<style scoped>
.reservation-page {
  background: linear-gradient(180deg, #eaf3ff 0%, #f6faff 100%);
  min-height: 100vh;
  padding-bottom: 40rpx;
}
.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(180deg, #cbe6ff 0%, #f6faff 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.content-area {
  padding: 220rpx 24rpx 120rpx 24rpx;
}
.invoice-section {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  padding: 32rpx 28rpx 8rpx 28rpx;
  margin-bottom: 32rpx;
}
.invoice-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 24rpx;
}
.invoice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  color: #222;
  padding: 18rpx 0;
  border-bottom: 1rpx solid #f2f4f8;
}
.invoice-row:last-child {
  border-bottom: none;
}
.invoice-label {
  color: #3b4a6b;
  min-width: 180rpx;
  font-size: 28rpx;
}
.invoice-value {
  flex: 1;
  text-align: right;
  color: #222;
  font-size: 28rpx;
}
.invoice-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  box-shadow: 0 -2rpx 16rpx rgba(59,124,255,0.08);
  padding: 24rpx 24rpx 32rpx 24rpx;
  z-index: 999;
  display: flex;
  justify-content: center;
}
.invoice-issue-btn {
  min-width: 320rpx;
  height: 72rpx;
  border-radius: 36rpx;
  background: #217aff;
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
  border: none;
  outline: none;
}
</style>