<template>
|
<view class="invoice-apply-container bg-white">
|
<form>
|
<!-- 关联任务（只读展示，不可更改） -->
|
<view class="selected-task" v-if="form.serviceOrderId">
|
<view class="label">关联任务</view>
|
<view class="task-card">
|
<view class="card-header">
|
<text class="service-code">{{ taskDisplay }}</text>
|
</view>
|
<view class="task-info-detail" v-if="invoiceInfo.legacyServiceOrderId">
|
<view class="info-row">
|
<text class="info-label">服务单号:</text>
|
<text class="info-value">{{ invoiceInfo.legacyServiceOrderId }}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="cu-form-group">
|
<view class="title">开票类型</view>
|
<radio-group class="flex" @change="handleTypeChange">
|
<view class="margin-right-sm">
|
<radio value="1" :checked="form.invoiceType == 1"></radio><text class="margin-left-xs">个人</text>
|
</view>
|
<view>
|
<radio value="2" :checked="form.invoiceType == 2"></radio><text class="margin-left-xs">企业</text>
|
</view>
|
</radio-group>
|
</view>
|
|
<view class="cu-form-group">
|
<view class="title required">发票抬头</view>
|
<input placeholder="请输入发票抬头" v-model="form.invoiceName" />
|
</view>
|
|
<view class="cu-form-group">
|
<view class="title required">发票金额</view>
|
<input
|
type="digit"
|
placeholder="请输入金额"
|
v-model="form.invoiceMoney"
|
@blur="validateMoney"
|
/>
|
</view>
|
|
<view class="cu-form-group align-start">
|
<view class="title">发票备注</view>
|
<textarea maxlength="-1" v-model="form.invoiceRemarks" placeholder="请输入备注信息"></textarea>
|
</view>
|
|
<block v-if="form.invoiceType == 2">
|
<view class="cu-form-group">
|
<view class="title">注册地址</view>
|
<input placeholder="请输入企业注册地址" v-model="form.companyAddress" />
|
</view>
|
<view class="cu-form-group">
|
<view class="title">开户银行</view>
|
<input placeholder="请输入企业开户银行" v-model="form.companyBank" />
|
</view>
|
<view class="cu-form-group">
|
<view class="title">银行帐号</view>
|
<input placeholder="请输入企业银行帐号" v-model="form.companyBankNo" />
|
</view>
|
</block>
|
|
<view class="cu-form-group margin-top-sm">
|
<view class="title">邮编</view>
|
<input placeholder="请输入邮编" v-model="form.zipCode" />
|
</view>
|
|
<view class="cu-form-group">
|
<view class="title">邮寄地址</view>
|
<input placeholder="请输入邮寄地址" v-model="form.mailAddress" />
|
</view>
|
|
<view class="cu-form-group">
|
<view class="title">联系人</view>
|
<input placeholder="请输入联系人" v-model="form.contactName" />
|
</view>
|
|
<view class="cu-form-group">
|
<view class="title">联系电话</view>
|
<input placeholder="请输入联系电话" v-model="form.contactPhone" />
|
</view>
|
|
<view class="padding flex flex-direction">
|
<button class="cu-btn bg-blue lg" @click="submit">保存修改</button>
|
</view>
|
</form>
|
</view>
|
</template>
|
|
<script>
|
import { myEditInvoice, myInvoiceDetail } from "@/api/invoice"
|
|
export default {
|
data() {
|
return {
|
invoiceInfo: {}, // 原始发票信息（只读部分）
|
form: {
|
invoiceId: null,
|
serviceOrderId: null,
|
legacyServiceOrderId: null,
|
invoiceType: 1,
|
invoiceName: '',
|
invoiceMoney: '',
|
invoiceRemarks: '',
|
companyAddress: '',
|
companyBank: '',
|
companyBankNo: '',
|
zipCode: '',
|
mailAddress: '',
|
contactName: '',
|
contactPhone: ''
|
}
|
}
|
},
|
computed: {
|
taskDisplay() {
|
return this.invoiceInfo.serviceCode || this.invoiceInfo.legacyServiceOrderId || '—'
|
}
|
},
|
onLoad(options) {
|
if (options && options.invoiceInfo) {
|
try {
|
const info = JSON.parse(decodeURIComponent(options.invoiceInfo))
|
this.invoiceInfo = info
|
this.fillForm(info)
|
} catch (e) {
|
console.error('解析发票信息失败:', e)
|
this.$modal.msgError('参数解析失败，请返回重试')
|
}
|
}
|
},
|
methods: {
|
fillForm(info) {
|
this.form.invoiceId = info.invoiceId
|
this.form.serviceOrderId = info.serviceOrderId
|
this.form.legacyServiceOrderId = info.legacyServiceOrderId
|
this.form.invoiceType = info.invoiceType || 1
|
this.form.invoiceName = info.invoiceName || ''
|
this.form.invoiceMoney = info.invoiceMoney != null ? String(info.invoiceMoney) : ''
|
this.form.invoiceRemarks = info.invoiceRemarks || ''
|
this.form.companyAddress = info.companyAddress || ''
|
this.form.companyBank = info.companyBank || ''
|
this.form.companyBankNo = info.companyBankNo || ''
|
this.form.zipCode = info.zipCode || ''
|
this.form.mailAddress = info.mailAddress || ''
|
this.form.contactName = info.contactName || ''
|
this.form.contactPhone = info.contactPhone || ''
|
},
|
handleTypeChange(e) {
|
this.form.invoiceType = e.detail.value
|
},
|
validateMoney() {
|
if (!this.form.invoiceMoney) return
|
const money = parseFloat(this.form.invoiceMoney)
|
if (isNaN(money) || money <= 0) {
|
this.$modal.msgError('请输入有效的金额')
|
this.form.invoiceMoney = ''
|
}
|
},
|
submit() {
|
if (!this.form.invoiceName) {
|
this.$modal.msgError('请输入发票抬头')
|
return
|
}
|
if (!this.form.invoiceMoney) {
|
this.$modal.msgError('请输入发票金额')
|
return
|
}
|
const money = parseFloat(this.form.invoiceMoney)
|
if (isNaN(money) || money <= 0) {
|
this.$modal.msgError('请输入有效的金额')
|
return
|
}
|
|
myEditInvoice(this.form).then(() => {
|
this.$modal.msgSuccess('修改成功')
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 1200)
|
}).catch(err => {
|
console.error('更新发票失败:', err)
|
this.$modal.msgError('保存失败，请重试')
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.invoice-apply-container {
|
min-height: 100vh;
|
padding-bottom: 50rpx;
|
|
.cu-form-group .title {
|
min-width: calc(4em + 15px);
|
|
&.required::before {
|
content: '*';
|
color: #f56c6c;
|
margin-right: 4rpx;
|
font-weight: bold;
|
}
|
}
|
|
.selected-task {
|
margin: 20rpx 30rpx;
|
|
.label {
|
font-size: 28rpx;
|
color: #666;
|
margin-bottom: 10rpx;
|
}
|
|
.task-card {
|
padding: 20rpx;
|
background: #e8f5e9;
|
border-radius: 8rpx;
|
border: 2rpx solid #4caf50;
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.service-code {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #2e7d32;
|
}
|
|
.task-info-detail {
|
margin-top: 16rpx;
|
|
.info-row {
|
display: flex;
|
margin-bottom: 12rpx;
|
line-height: 1.6;
|
|
.info-label {
|
font-size: 26rpx;
|
color: #666;
|
min-width: 140rpx;
|
flex-shrink: 0;
|
}
|
|
.info-value {
|
font-size: 26rpx;
|
color: #333;
|
flex: 1;
|
word-break: break-all;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
