| | |
| | | <view class="form-row input-row"> |
| | | <text class="row-label">税号</text> |
| | | <input |
| | | v-model="form.taxNo" |
| | | v-model="form.taxId" |
| | | class="row-input" |
| | | type="text" |
| | | placeholder="输入纳税人识别号或社会统一征信代码" |
| | |
| | | <template v-if="titleType === 'company'"> |
| | | <view class="divider"></view> |
| | | <view class="form-row input-row"> |
| | | <text class="row-label">开户银行</text> |
| | | <text class="row-label"> |
| | | <text v-if="isSpecialInvoice" class="required-star">*</text>开户银行 |
| | | </text> |
| | | <input |
| | | v-model="form.bankName" |
| | | class="row-input" |
| | |
| | | |
| | | <view class="divider"></view> |
| | | <view class="form-row input-row"> |
| | | <text class="row-label">银行账号</text> |
| | | <text class="row-label"> |
| | | <text v-if="isSpecialInvoice" class="required-star">*</text>银行账号 |
| | | </text> |
| | | <input |
| | | v-model="form.bankAccount" |
| | | class="row-input" |
| | |
| | | |
| | | <view class="divider"></view> |
| | | <view class="form-row input-row"> |
| | | <text class="row-label">企业地址</text> |
| | | <text class="row-label"> |
| | | <text v-if="isSpecialInvoice" class="required-star">*</text>企业地址 |
| | | </text> |
| | | <input |
| | | v-model="form.companyAddress" |
| | | v-model="form.companyAddr" |
| | | class="row-input" |
| | | type="text" |
| | | placeholder="开具专票时必填" |
| | |
| | | |
| | | <view class="divider"></view> |
| | | <view class="form-row input-row"> |
| | | <text class="row-label">企业电话</text> |
| | | <text class="row-label"> |
| | | <text v-if="isSpecialInvoice" class="required-star">*</text>企业电话 |
| | | </text> |
| | | <input |
| | | v-model="form.companyPhone" |
| | | class="row-input" |
| | |
| | | </view> |
| | | |
| | | <view class="detail-card"> |
| | | <view class="form-row detail-row" @tap="detailChecked = !detailChecked"> |
| | | <text class="row-label">抬头类型</text> |
| | | <view class="form-row detail-row" :class="{ disabled: isSpecialInvoice }" @tap="handleDetailCheck"> |
| | | <text class="row-label">发票明细</text> |
| | | <view class="detail-check"> |
| | | <view class="check-circle" :class="{ active: detailChecked }"> |
| | | <u-icon v-if="detailChecked" name="checkbox-mark" size="12" color="#ffffff"></u-icon> |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | orderNo: '202607131742520001', |
| | | amount: '125.00', |
| | | orderId: '', |
| | | orderNo: '', |
| | | amount: '', |
| | | invoiceType: 'normal', |
| | | tempInvoiceType: 'normal', |
| | | showInvoiceTypePopup: false, |
| | | titleType: 'personal', |
| | | selectedTitle: '', |
| | | detailChecked: false, |
| | | detailChecked: true, |
| | | invoiceTypeOptions: [ |
| | | { |
| | | label: '电子普通发票', |
| | |
| | | } |
| | | ], |
| | | form: { |
| | | taxNo: '', |
| | | taxId: '', |
| | | bankName: '', |
| | | bankAccount: '', |
| | | companyAddress: '', |
| | | companyAddr: '', |
| | | companyPhone: '' |
| | | } |
| | | }; |
| | |
| | | invoiceTypeLabel() { |
| | | const current = this.invoiceTypeOptions.find((item) => item.value === this.invoiceType); |
| | | return current ? current.label : '电子普通发票'; |
| | | }, |
| | | isSpecialInvoice() { |
| | | return this.invoiceType === 'special'; |
| | | } |
| | | }, |
| | | onLoad(options) { |
| | | this.orderId = options.id || ''; |
| | | this.orderNo = options.orderNo || ''; |
| | | this.amount = options.invoiceAmount || ''; |
| | | }, |
| | | methods: { |
| | | openInvoiceTypePopup() { |
| | |
| | | this.showInvoiceTypePopup = false; |
| | | }, |
| | | goConfirmInvoiceIssuance() { |
| | | if (this.isSpecialInvoice) { |
| | | if (!this.form.bankName) { |
| | | uni.showToast({ title: '请填写开户银行', icon: 'none' }); |
| | | return; |
| | | } |
| | | if (!this.form.bankAccount) { |
| | | uni.showToast({ title: '请填写银行账号', icon: 'none' }); |
| | | return; |
| | | } |
| | | if (!this.form.companyAddr) { |
| | | uni.showToast({ title: '请填写企业地址', icon: 'none' }); |
| | | return; |
| | | } |
| | | if (!this.form.companyPhone) { |
| | | uni.showToast({ title: '请填写企业电话', icon: 'none' }); |
| | | return; |
| | | } |
| | | } |
| | | const invoiceData = { |
| | | invoiceType: this.invoiceTypeLabel, |
| | | titleType: this.titleType, |
| | | titleTypeText: this.titleType === 'company' ? '企业' : '个人/事业单位', |
| | | title: this.selectedTitle, |
| | | content: '明细', |
| | | amount: this.amount ? `¥${this.amount}` : '', |
| | | taxNo: this.form.taxId, |
| | | bankName: this.form.bankName, |
| | | bankAccount: this.form.bankAccount, |
| | | companyAddress: this.form.companyAddr, |
| | | companyPhone: this.form.companyPhone, |
| | | orderId: this.orderId, |
| | | orderNo: this.orderNo |
| | | } |
| | | uni.setStorageSync('invoiceFormData', invoiceData) |
| | | uni.navigateTo({ |
| | | url: '/shop/pages/confirm-invoice-issuance/confirm-invoice-issuance' |
| | | }); |
| | |
| | | this.titleType = type; |
| | | this.detailChecked = type === 'company'; |
| | | }, |
| | | handleDetailCheck() { |
| | | if (this.isSpecialInvoice) return; |
| | | this.detailChecked = !this.detailChecked; |
| | | }, |
| | | chooseInvoiceTitle() { |
| | | // #ifdef MP-WEIXIN |
| | | uni.chooseInvoiceTitle({ |
| | | type: this.titleType === 'company' ? 0 : 1, |
| | | success: (res) => { |
| | | console.log(res); |
| | | this.selectedTitle = res.title || ''; |
| | | this.form.taxNo = res.taxNumber || ''; |
| | | this.form.taxId = res.taxNumber || ''; |
| | | this.form.bankName = res.bankName || ''; |
| | | this.form.bankAccount = res.bankAccount || ''; |
| | | this.form.companyAddress = res.companyAddress || ''; |
| | | this.form.companyAddr = res.companyAddress || ''; |
| | | this.form.companyPhone = res.telephone || ''; |
| | | |
| | | if (res.type === 1) { |
| | |
| | | |
| | | .row-label { |
| | | flex-shrink: 0; |
| | | width: 150rpx; |
| | | width: 195rpx; |
| | | font-size: 34rpx; |
| | | line-height: 48rpx; |
| | | color: #4a4a4a; |
| | | } |
| | | |
| | | .required-star { |
| | | color: #ff4d4f; |
| | | margin-right: 4rpx; |
| | | } |
| | | |
| | | .row-value { |
| | |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .detail-row.disabled { |
| | | opacity: 0.6; |
| | | } |
| | | |
| | | .invoice-type-popup { |
| | | padding: 24rpx 24rpx calc(env(safe-area-inset-bottom) + 24rpx); |
| | | background: #ffffff; |