xukou-ticket-wx/pages/index/invoice_issue.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">{{ item.id || '-' }}</text></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.direction_name || '-' }}</text></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>

      <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>
    </view>

    <view class="invoice-bottom-bar">
      <button class="invoice-issue-btn" @click="submitInvoice">提交开票</button>
    </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: 'InvoiceIssuePage',
  components: { NavBar },
  data() {
    return {
      reservationId: '',
      item: {
        ship: {},
        batch: {},
      },
    }
  },
  computed: {
    billStatusText() {
      const map = {
        1: '不可开票',
        2: '开票中',
        3: '已开票',
        4: '开票失败',
        5: '已拒绝',
      }
      return map[this.item.bill_status] || '-'
    },
  },
  onLoad(options) {
    this.reservationId = options.id || ''
  },
  async onShow() {
    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()
      }
    },
    submitInvoice() {
      const token = uni.getStorageSync('token')
      if (!token || !this.item.id) {
        uni.showToast({ title: '订单信息缺失', icon: 'none' })
        return
      }

      uni.showLoading({ title: '提交中...' })
      uni.request({
        url: `${API.GET_INVOICE}`,
        method: 'GET',
        data: {
          reservation_id: this.item.id,
          token
        },
        success: (res) => {
          uni.hideLoading()
          if (res.data && res.data.errcode === 0) {
            uni.showToast({ title: '开票申请已提交', icon: 'success' })
            setTimeout(() => {
              uni.redirectTo({ url: `/pages/index/invoice_detail?id=${this.item.id}` })
            }, 800)
          } else {
            uni.showToast({ title: (res.data && res.data.errmsg) || '提交失败', icon: 'none' })
          }
        },
        fail: () => {
          uni.hideLoading()
          uni.showToast({ title: '提交失败', icon: 'none' })
        }
      })
    }
  }
}
</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>