sqxp/sqxp-wx/pages/client/invoice/invoice.vue

<template>
  <view class="page client-theme client-subpage">
    <view class="client-subpage-hero invoice-hero">
      <text class="client-subpage-hero__title">发票管理</text>
      <text class="client-subpage-hero__sub">申请开票与查看开票记录</text>
      <button class="apply-btn" @click="openApply">申请开票</button>
    </view>

    <scroll-view scroll-y class="client-subpage-scroll invoice-scroll" :show-scrollbar="true">
      <view class="client-subpage-body invoice-body">
        <view v-if="loading && list.length === 0" class="hint">加载中...</view>
        <view v-else-if="list.length === 0" class="empty">暂无发票记录</view>

        <view v-for="row in list" :key="row.id" class="card" hover-class="card--pressed" :hover-stay-time="100">
      <view class="row">
        <text class="no">{{ row.invoiceNo }}</text>
        <text class="st">{{ statusText[row.status] || row.status }}</text>
      </view>
      <text class="sub">订单金额(元) ¥{{ formatYuan(row.invoiceAmount) }}</text>
      <text class="sub">抬头 {{ row.title }}</text>
      <text class="time">{{ row.createAt }}</text>
        </view>
      </view>
    </scroll-view>

    <view v-if="showApply" class="mask" @click.self="showApply = false">
      <view class="dialog" @click.stop>
        <text class="dlg-title">申请开票</text>
        <picker
          v-if="availOrders.length"
          mode="selector"
          :range="availOrders"
          range-key="orderNo"
          :value="pickerIndex"
          @change="onPickerChange"
        >
          <view class="picker">
            <view class="picker-row">
              <text class="picker-text">订单：{{ availOrders[pickerIndex]?.orderNo || '选择订单' }}</text>
              <SqCopyBtn
                v-if="availOrders[pickerIndex]?.orderNo"
                class="picker-copy"
                :text="availOrders[pickerIndex]?.orderNo"
                label="订单号"
                icon-only
              />
            </view>
          </view>
        </picker>
        <text v-else class="hint">暂无可开票订单（需已完成且无发票）</text>
        <input v-model="applyTitle" class="input" placeholder="发票抬头，默认「个人」" />
        <view class="dlg-actions">
          <button class="btn plain" @click="showApply = false">取消</button>
          <button class="btn primary" @click="submitApply">提交</button>
        </view>
      </view>
    </view>
  </view>
</template>



<script setup>
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'
import { request, parseResponseJson } from '@/utils/request'
import { API_URL } from '@/config/api'
import { formatYuan } from '@/utils/format'
import SqCopyBtn from '@/components/sq-copy-btn.vue'

const userStore = useUserStore()

const list = ref([])
const loading = ref(false)
const page = ref(1)
const totalPages = ref(1)

const showApply = ref(false)
const availOrders = ref([])
const applyOrderId = ref('')
const applyTitle = ref('')
const pickerIndex = ref(0)

const statusText = {
  pending: '待开票',
  issued: '已开票',
  rejected: '已驳回',
  cancelled: '已取消'
}

async function fetchList(reset = false) {
  if (reset) page.value = 1
  loading.value = true
  try {
    const res = await request({
      url: API_URL.CLIENT_INVOICES,
      method: 'GET',
      data: { page: page.value, pageSize: 20 }
    })
    const body = parseResponseJson(res)
    if (body.code === 200 && body.data && body.data.list) {
      list.value = body.data.list
      totalPages.value = body.data.totalPages || 1
    }
  } finally {
    loading.value = false
  }
}

function onPickerChange(e) {
  const i = Number(e.detail.value)
  pickerIndex.value = i
  applyOrderId.value = (availOrders.value[i] && availOrders.value[i].orderId) || ''
}

async function openApply() {
  showApply.value = true
  applyOrderId.value = ''
  applyTitle.value = ''
  pickerIndex.value = 0
  try {
    const res = await request({
      url: API_URL.INVOICE_AVAILABLE_ORDERS,
      method: 'GET'
    })
    const body = parseResponseJson(res)
    if (body.code === 200) {
      availOrders.value = (body.data && body.data.list) || []
      if (availOrders.value.length) {
        applyOrderId.value = availOrders.value[0].orderId
      }
    }
  } catch {
    uni.showToast({ title: '加载可开票订单失败', icon: 'none' })
  }
}

async function submitApply() {
  if (!applyOrderId.value) {
    uni.showToast({ title: '请选择订单', icon: 'none' })
    return
  }
  try {
    const res = await request({
      url: API_URL.CLIENT_INVOICES,
      method: 'POST',
      data: {
        orderId: applyOrderId.value,
        title: applyTitle.value || '个人',
        invoiceType: 'normal'
      }
    })
    const body = parseResponseJson(res)
    if (body.code === 200) {
      uni.showToast({ title: '已提交申请', icon: 'success' })
      showApply.value = false
      fetchList(true)
    } else {
      uni.showToast({ title: body.message || '提交失败', icon: 'none' })
    }
  } catch {
    uni.showToast({ title: '提交失败', icon: 'none' })
  }
}

onMounted(() => {
  userStore.checkLoginStatus()
  if (!userStore.isLoggedIn) {
    uni.reLaunch({ url: '/pages/login/login' })
    return
  }
  if (!userStore.isClient) {
    uni.showToast({ title: '仅客户可访问', icon: 'none' })
    setTimeout(() => userStore.navigateToHome(), 1200)
    return
  }
  fetchList(true)
})

onShow(() => {
  userStore.checkLoginStatus()
  if (!userStore.isLoggedIn || !userStore.isClient) return
  void fetchList(true)
})
</script>



<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: var(--c-bg);
  box-sizing: border-box;
}

.invoice-hero {
  position: relative;
}

.apply-btn {
  margin-top: 24rpx;
  width: 100%;
  max-width: 420rpx;
  background: rgba(255, 255, 255, 0.95);
  color: var(--c-brand-green);
  font-size: 28rpx;
  border-radius: 44rpx;
  border: none;
  font-weight: 600;
  height: 80rpx;
  line-height: 80rpx;
}

.invoice-scroll {
  flex: 1;
  min-height: 0;
  height: 0;
}

.invoice-body {
  min-height: 100%;
}

.card--pressed {
  opacity: 0.94;
}
.hint,
.empty {
  text-align: center;
  color: var(--c-muted);
  padding: 60rpx 0;
  font-size: 28rpx;
}
.card {
  background: var(--c-card);
  border: 1rpx solid var(--c-border);
  border-radius: var(--c-radius-card);
  padding: 24rpx;
  margin-bottom: 20rpx;
}
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.no {
  font-size: 30rpx;
  font-weight: 600;
  color: var(--c-text);
}
.st {
  font-size: 24rpx;
  color: var(--c-brand-green);
}
.sub {
  display: block;
  font-size: 26rpx;
  color: var(--c-muted);
  margin-top: 12rpx;
}
.time {
  display: block;
  font-size: 22rpx;
  color: #c0c4cc;
  margin-top: 12rpx;
}
.mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.dialog {
  width: 600rpx;
  background: var(--c-card);
  border: 1rpx solid var(--c-border);
  border-radius: var(--c-radius-card);
  padding: 32rpx;
}
.dlg-title {
  font-size: 32rpx;
  font-weight: 500;
  display: block;
  margin-bottom: 24rpx;
}
.picker {
  padding: 20rpx;
  background: #f8fcfa;
  border-radius: 16rpx;
  font-size: 26rpx;
  margin-bottom: 20rpx;
  border: 1rpx solid rgba(220, 235, 228, 0.65);
}
.picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12rpx;
}
.picker-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picker-copy {
  flex: 0 0 auto;
}
.input {
  border: 1rpx solid var(--c-border);
  border-radius: 16rpx;
  padding: 16rpx;
  font-size: 26rpx;
  margin-bottom: 24rpx;
}
.dlg-actions {
  display: flex;
  gap: 20rpx;
  justify-content: flex-end;
}
.btn {
  font-size: 28rpx;
  padding: 0 32rpx;
  height: 72rpx;
  line-height: 72rpx;
}
.plain {
  background: #f8fcfa;
  color: var(--c-muted);
}
.primary {
  background: linear-gradient(145deg, var(--c-barley-yellow), #e4b458);
  color: #fff;
  font-weight: 600;
}
</style>