Merge branch 'main' of http://gogs.langye.net:3000/wangyifang/xukou-ticket-wx
commit
6826cc18b0
@ -1,158 +1,226 @@
|
||||
<template>
|
||||
<view class="reservation-page">
|
||||
<view class="fixed-nav">
|
||||
<NavBar title="发票管理">
|
||||
</NavBar>
|
||||
</view>
|
||||
<view class="content-area">
|
||||
<!-- 基本信息分组 -->
|
||||
<view class="invoice-section">
|
||||
<view class="invoice-title">基本信息</view>
|
||||
<view class="invoice-row">
|
||||
<text class="invoice-label">抬头类型</text>
|
||||
<picker :range="titleTypeOptions" v-model="form.titleTypeIndex">
|
||||
<view class="invoice-value">{{ titleTypeOptions[form.titleTypeIndex] }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="invoice-row">
|
||||
<text class="invoice-label">发票抬头</text>
|
||||
<input class="invoice-value" v-model="form.title" placeholder="请输入发票抬头" />
|
||||
</view>
|
||||
<view class="invoice-row">
|
||||
<text class="invoice-label">税号</text>
|
||||
<input class="invoice-value" v-model="form.taxNo" placeholder="请输入税号" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 预约信息分组 -->
|
||||
<view class="invoice-section">
|
||||
<view class="invoice-title">预约信息</view>
|
||||
<view class="invoice-row"><text class="invoice-label">预约日期</text><text class="invoice-value">2024-01-14</text></view>
|
||||
<view class="invoice-row"><text class="invoice-label">预约批次</text><text class="invoice-value">下午批次</text></view>
|
||||
<view class="invoice-row"><text class="invoice-label">航行方向</text><text class="invoice-value">南向北</text></view>
|
||||
<view class="invoice-row">
|
||||
<text class="invoice-label">预约状态</text>
|
||||
<text class="pay-status">已确认</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">苏航666</text></view>
|
||||
<view class="invoice-row"><text class="invoice-label">编号</text><text class="invoice-value">ZJ12345</text></view>
|
||||
<view class="invoice-row"><text class="invoice-label">载重吨位</text><text class="invoice-value">500吨</text></view>
|
||||
<view class="invoice-row"><text class="invoice-label">类型</text><text class="invoice-value">货船</text></view>
|
||||
<view class="invoice-row"><text class="invoice-label">总长度</text><text class="invoice-value">45米</text></view>
|
||||
<view class="invoice-row"><text class="invoice-label">型宽</text><text class="invoice-value">8米</text></view>
|
||||
<view class="invoice-row"><text class="invoice-label">型深</text><text class="invoice-value">3.5米</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">￥300.00</text></view>
|
||||
<view class="invoice-row"><text class="invoice-label">按吨位计费</text><text class="invoice-value">500吨</text></view>
|
||||
<view class="invoice-row pay-total">
|
||||
<text class="invoice-label">总计</text>
|
||||
<text class="invoice-value pay-total-num">￥300.00</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavBar from '@/components/NavBar.vue'
|
||||
export default {
|
||||
name: 'InvoiceManagePage',
|
||||
components: { NavBar },
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
titleTypeIndex: 0,
|
||||
title: '',
|
||||
taxNo: ''
|
||||
},
|
||||
titleTypeOptions: ['企业单位', '个人/非企业单位']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 相关方法可根据需要补充
|
||||
}
|
||||
}
|
||||
</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 20rpx 24rpx;
|
||||
}
|
||||
.invoice-card, .invoice-header, .status-tag, .invoice-date, .invoice-amount, .invoice-batch, .invoice-actions, .invoice-detail-btn, .invoice-detail-btn.issue, .invoice-btn {
|
||||
display: none !important;
|
||||
}
|
||||
.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;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.pay-status {
|
||||
background: #217aff;
|
||||
color: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 4rpx 24rpx;
|
||||
font-size: 24rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
.pay-total-num {
|
||||
color: #217aff;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.pay-total {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
<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>
|
||||
|
||||
@ -1,186 +1,206 @@
|
||||
<template>
|
||||
<view class="reservation-page">
|
||||
<view class="fixed-nav">
|
||||
<NavBar title="发票管理">
|
||||
</NavBar>
|
||||
</view>
|
||||
<view class="content-area">
|
||||
<!-- 基本信息分组 -->
|
||||
<view class="invoice-section">
|
||||
<view class="invoice-title">基本信息</view>
|
||||
<view class="invoice-row">
|
||||
<text class="invoice-label">抬头类型</text>
|
||||
<picker :range="titleTypeOptions" v-model="form.titleTypeIndex">
|
||||
<view class="invoice-value">{{ titleTypeOptions[form.titleTypeIndex] }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="invoice-row">
|
||||
<text class="invoice-label">发票抬头</text>
|
||||
<input class="invoice-value" v-model="form.title" placeholder="请输入发票抬头" />
|
||||
</view>
|
||||
<view class="invoice-row">
|
||||
<text class="invoice-label">税号</text>
|
||||
<input class="invoice-value" v-model="form.taxNo" placeholder="请输入税号" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 预约信息分组 -->
|
||||
<view class="invoice-section">
|
||||
<view class="invoice-title">预约信息</view>
|
||||
<view class="invoice-row"><text class="invoice-label">预约日期</text><text class="invoice-value">2024-01-14</text></view>
|
||||
<view class="invoice-row"><text class="invoice-label">预约批次</text><text class="invoice-value">下午批次</text></view>
|
||||
<view class="invoice-row"><text class="invoice-label">航行方向</text><text class="invoice-value">南向北</text></view>
|
||||
<view class="invoice-row">
|
||||
<text class="invoice-label">预约状态</text>
|
||||
<text class="pay-status">已确认</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">苏航666</text></view>
|
||||
<view class="invoice-row"><text class="invoice-label">编号</text><text class="invoice-value">ZJ12345</text></view>
|
||||
<view class="invoice-row"><text class="invoice-label">载重吨位</text><text class="invoice-value">500吨</text></view>
|
||||
<view class="invoice-row"><text class="invoice-label">类型</text><text class="invoice-value">货船</text></view>
|
||||
<view class="invoice-row"><text class="invoice-label">总长度</text><text class="invoice-value">45米</text></view>
|
||||
<view class="invoice-row"><text class="invoice-label">型宽</text><text class="invoice-value">8米</text></view>
|
||||
<view class="invoice-row"><text class="invoice-label">型深</text><text class="invoice-value">3.5米</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">￥300.00</text></view>
|
||||
<view class="invoice-row"><text class="invoice-label">按吨位计费</text><text class="invoice-value">500吨</text></view>
|
||||
<view class="invoice-row pay-total">
|
||||
<text class="invoice-label">总计</text>
|
||||
<text class="invoice-value pay-total-num">￥300.00</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部开发票按钮 -->
|
||||
<view class="invoice-bottom-bar">
|
||||
<button class="invoice-issue-btn">开发票</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavBar from '@/components/NavBar.vue'
|
||||
export default {
|
||||
name: 'InvoiceManagePage',
|
||||
components: { NavBar },
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
titleTypeIndex: 0,
|
||||
title: '',
|
||||
taxNo: ''
|
||||
},
|
||||
titleTypeOptions: ['企业单位', '个人/非企业单位']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 相关方法可根据需要补充
|
||||
}
|
||||
}
|
||||
</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-card, .invoice-header, .status-tag, .invoice-date, .invoice-amount, .invoice-batch, .invoice-actions, .invoice-detail-btn, .invoice-detail-btn.issue, .invoice-btn {
|
||||
display: none !important;
|
||||
}
|
||||
.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;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.pay-status {
|
||||
background: #217aff;
|
||||
color: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 4rpx 24rpx;
|
||||
font-size: 24rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
.pay-total-num {
|
||||
color: #217aff;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.pay-total {
|
||||
font-weight: bold;
|
||||
}
|
||||
.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;
|
||||
box-shadow: 0 4rpx 16rpx rgba(33,122,255,0.08);
|
||||
}
|
||||
</style>
|
||||
<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>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,2 @@
|
||||
<!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>胥口闸站购票</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
|
||||
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/h5/static/index.cc298949.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/h5/static/js/chunk-vendors.84c26d58.js></script><script src=/h5/static/js/index.b1d5013e.js></script></body></html>
|
||||
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 8.3 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 948 B |
|
After Width: | Height: | Size: 9.5 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["pages-order-pay_order"],{"37f1":function(e,t,n){"use strict";n.r(t);var r=n("98ef"),i=n("8004");for(var a in i)["default"].indexOf(a)<0&&function(e){n.d(t,e,(function(){return i[e]}))}(a);n("53d9");var o=n("828b"),c=Object(o["a"])(i["default"],r["b"],r["c"],!1,null,"43143494",null,!1,r["a"],void 0);t["default"]=c.exports},"53d9":function(e,t,n){"use strict";var r=n("6166"),i=n.n(r);i.a},6166:function(e,t,n){var r=n("94af");r.__esModule&&(r=r.default),"string"===typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);var i=n("967d").default;i("01e81bc3",r,!0,{sourceMap:!1,shadowMode:!1})},"6a91":function(e,t,n){"use strict";n("6a54"),Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r={name:"PayOrderRedirectPage",onLoad:function(e){var t=e.id||"";if(!t&&e.item)try{var n=JSON.parse(decodeURIComponent(e.item));t=n&&n.id?String(n.id):""}catch(r){t=""}if(!t)return uni.showToast({title:"订单信息缺失",icon:"none"}),void setTimeout((function(){uni.navigateBack()}),800);uni.redirectTo({url:"/pages/order/pay_order_detail?id=".concat(t)})}};t.default=r},8004:function(e,t,n){"use strict";n.r(t);var r=n("6a91"),i=n.n(r);for(var a in r)["default"].indexOf(a)<0&&function(e){n.d(t,e,(function(){return r[e]}))}(a);t["default"]=i.a},"94af":function(e,t,n){var r=n("c86c");t=r(!1),t.push([e.i,".pay-order-redirect[data-v-43143494]{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#cbe6ff,#f6faff)}.redirect-text[data-v-43143494]{color:#3b4a6b;font-size:%?28?%}",""]),e.exports=t},"98ef":function(e,t,n){"use strict";n.d(t,"b",(function(){return r})),n.d(t,"c",(function(){return i})),n.d(t,"a",(function(){}));var r=function(){var e=this.$createElement,t=this._self._c||e;return t("v-uni-view",{staticClass:"pay-order-redirect"},[t("v-uni-text",{staticClass:"redirect-text"},[this._v("正在跳转订单详情...")])],1)},i=[]}}]);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 910 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 764 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
Loading…
Reference in new issue