<template>
|
<view class="invoice-request-page">
|
<view class="top-card">
|
<view class="top-line">订单编号：{{ orderNo }}</view>
|
<view class="top-line">
|
<text>开票金额：</text>
|
<text class="amount-text">¥{{ amount }}</text>
|
</view>
|
</view>
|
|
<view class="form-card">
|
<view class="form-row arrow-row" @tap="openInvoiceTypePopup">
|
<text class="row-label">发票类型</text>
|
<view class="row-value with-arrow">
|
<text>{{ invoiceTypeLabel }}</text>
|
<u-icon name="arrow-right" size="14" color="#3a3f46"></u-icon>
|
</view>
|
</view>
|
|
<view class="divider"></view>
|
|
<view class="form-row title-type-row">
|
<text class="row-label">抬头类型</text>
|
<view class="title-options">
|
<view class="radio-item" @tap="changeTitleType('personal')">
|
<view class="radio-dot" :class="{ active: titleType === 'personal' }"></view>
|
<text class="radio-text">个人/事业单位</text>
|
</view>
|
<view class="radio-item" @tap="changeTitleType('company')">
|
<view class="radio-dot" :class="{ active: titleType === 'company' }"></view>
|
<text class="radio-text">企业</text>
|
</view>
|
</view>
|
</view>
|
|
<view class="divider"></view>
|
|
<view class="form-row arrow-row" @tap="chooseInvoiceTitle">
|
<text class="row-label">发票抬头</text>
|
<view class="row-value with-arrow placeholder-text">
|
<text :class="{ 'selected-text': selectedTitle }">{{ selectedTitle || '选择发票抬头' }}</text>
|
<u-icon name="arrow-right" size="14" color="#3a3f46"></u-icon>
|
</view>
|
</view>
|
|
<view class="divider"></view>
|
|
<view class="form-row input-row">
|
<text class="row-label">税号</text>
|
<input
|
v-model="form.taxNo"
|
class="row-input"
|
type="text"
|
placeholder="输入纳税人识别号或社会统一征信代码"
|
placeholder-class="input-placeholder"
|
/>
|
</view>
|
|
<template v-if="titleType === 'company'">
|
<view class="divider"></view>
|
<view class="form-row input-row">
|
<text class="row-label">开户银行</text>
|
<input
|
v-model="form.bankName"
|
class="row-input"
|
type="text"
|
placeholder="开具专票时必填"
|
placeholder-class="input-placeholder"
|
/>
|
</view>
|
|
<view class="divider"></view>
|
<view class="form-row input-row">
|
<text class="row-label">银行账号</text>
|
<input
|
v-model="form.bankAccount"
|
class="row-input"
|
type="text"
|
placeholder="开具专票时必填"
|
placeholder-class="input-placeholder"
|
/>
|
</view>
|
|
<view class="divider"></view>
|
<view class="form-row input-row">
|
<text class="row-label">企业地址</text>
|
<input
|
v-model="form.companyAddress"
|
class="row-input"
|
type="text"
|
placeholder="开具专票时必填"
|
placeholder-class="input-placeholder"
|
/>
|
</view>
|
|
<view class="divider"></view>
|
<view class="form-row input-row">
|
<text class="row-label">企业电话</text>
|
<input
|
v-model="form.companyPhone"
|
class="row-input"
|
type="text"
|
placeholder="开具专票时必填"
|
placeholder-class="input-placeholder"
|
/>
|
</view>
|
</template>
|
</view>
|
|
<view class="detail-card">
|
<view class="form-row detail-row" @tap="detailChecked = !detailChecked">
|
<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>
|
</view>
|
<text class="radio-text">明细</text>
|
</view>
|
</view>
|
</view>
|
|
<view class="submit-wrap">
|
<view class="submit-btn" @tap="goConfirmInvoiceIssuance">提交申请</view>
|
</view>
|
|
<u-popup :show="showInvoiceTypePopup" mode="bottom" round="24" @close="closeInvoiceTypePopup">
|
<view class="invoice-type-popup">
|
<view class="popup-head">
|
<text class="popup-title">选择发票类型</text>
|
<view class="popup-close" @tap="closeInvoiceTypePopup">
|
<u-icon name="close" size="24" color="#a8a8a8"></u-icon>
|
</view>
|
</view>
|
|
<view
|
v-for="item in invoiceTypeOptions"
|
:key="item.value"
|
class="type-option"
|
:class="{ active: tempInvoiceType === item.value }"
|
@tap="tempInvoiceType = item.value"
|
>
|
<view class="option-copy">
|
<view class="option-title">{{ item.label }}</view>
|
<view class="option-desc">{{ item.desc }}</view>
|
</view>
|
<view class="option-check" :class="{ active: tempInvoiceType === item.value }">
|
<u-icon v-if="tempInvoiceType === item.value" name="checkmark" size="14" color="#ffffff"></u-icon>
|
</view>
|
</view>
|
|
<view class="popup-confirm" @tap="confirmInvoiceType">确定选择</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
orderNo: '202607131742520001',
|
amount: '125.00',
|
invoiceType: 'normal',
|
tempInvoiceType: 'normal',
|
showInvoiceTypePopup: false,
|
titleType: 'personal',
|
selectedTitle: '',
|
detailChecked: false,
|
invoiceTypeOptions: [
|
{
|
label: '电子普通发票',
|
value: 'normal',
|
desc: '主要用于日常消费凭证，不能抵扣进项税，仅作为交易凭证与记账依据。'
|
},
|
{
|
label: '电子专用发票',
|
value: 'special',
|
desc: '企业对公业务专属，需完整企业开票资料，可认证抵扣进项税，供一般纳税人企业税务抵税使用。'
|
}
|
],
|
form: {
|
taxNo: '',
|
bankName: '',
|
bankAccount: '',
|
companyAddress: '',
|
companyPhone: ''
|
}
|
};
|
},
|
computed: {
|
invoiceTypeLabel() {
|
const current = this.invoiceTypeOptions.find((item) => item.value === this.invoiceType);
|
return current ? current.label : '电子普通发票';
|
}
|
},
|
methods: {
|
openInvoiceTypePopup() {
|
this.tempInvoiceType = this.invoiceType;
|
this.showInvoiceTypePopup = true;
|
},
|
closeInvoiceTypePopup() {
|
this.showInvoiceTypePopup = false;
|
},
|
confirmInvoiceType() {
|
this.invoiceType = this.tempInvoiceType;
|
this.showInvoiceTypePopup = false;
|
},
|
goConfirmInvoiceIssuance() {
|
uni.navigateTo({
|
url: '/shop/pages/confirm-invoice-issuance/confirm-invoice-issuance'
|
});
|
},
|
changeTitleType(type) {
|
this.titleType = type;
|
this.detailChecked = type === 'company';
|
},
|
chooseInvoiceTitle() {
|
// #ifdef MP-WEIXIN
|
uni.chooseInvoiceTitle({
|
success: (res) => {
|
this.selectedTitle = res.title || '';
|
this.form.taxNo = res.taxNumber || '';
|
this.form.bankName = res.bankName || '';
|
this.form.bankAccount = res.bankAccount || '';
|
this.form.companyAddress = res.companyAddress || '';
|
this.form.companyPhone = res.telephone || '';
|
|
if (res.type === 1) {
|
this.changeTitleType('company');
|
} else {
|
this.changeTitleType('personal');
|
}
|
}
|
});
|
// #endif
|
|
// #ifndef MP-WEIXIN
|
uni.showToast({
|
title: '当前平台暂不支持选择发票抬头',
|
icon: 'none'
|
});
|
// #endif
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.invoice-request-page {
|
padding: 30rpx;
|
box-sizing: border-box;
|
padding-bottom: 180rpx;
|
background: #f7f8fa;
|
}
|
|
.top-card,
|
.form-card,
|
.detail-card {
|
background: #ffffff;
|
border-radius: 18rpx;
|
box-shadow: 0 8rpx 24rpx rgba(25, 55, 102, 0.03);
|
}
|
|
.top-card {
|
padding: 26rpx 28rpx;
|
}
|
|
.top-line {
|
font-size: 34rpx;
|
line-height: 48rpx;
|
color: #4a4a4a;
|
}
|
|
.top-line + .top-line {
|
margin-top: 18rpx;
|
}
|
|
.amount-text {
|
font-weight: 700;
|
color: #ff4537;
|
}
|
|
.form-card {
|
margin-top: 24rpx;
|
padding: 0 28rpx;
|
}
|
|
.form-row {
|
display: flex;
|
align-items: center;
|
min-height: 94rpx;
|
}
|
|
.row-label {
|
flex-shrink: 0;
|
width: 150rpx;
|
font-size: 34rpx;
|
line-height: 48rpx;
|
color: #4a4a4a;
|
}
|
|
.row-value {
|
flex: 1;
|
font-size: 34rpx;
|
line-height: 48rpx;
|
color: #3a3f46;
|
}
|
|
.with-arrow {
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
gap: 10rpx;
|
}
|
|
.placeholder-text {
|
color: #c9c9c9;
|
}
|
|
.selected-text {
|
color: #3a3f46;
|
}
|
|
.divider {
|
height: 1rpx;
|
background: #efefef;
|
}
|
|
.title-type-row {
|
align-items: flex-start;
|
padding: 24rpx 0;
|
min-height: auto;
|
}
|
|
.title-options {
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
flex: 1;
|
gap: 34rpx;
|
padding-top: 2rpx;
|
}
|
|
.radio-item,
|
.detail-check {
|
display: flex;
|
align-items: center;
|
}
|
|
.radio-dot,
|
.check-circle {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 34rpx;
|
height: 34rpx;
|
border: 2rpx solid #d9d9d9;
|
border-radius: 50%;
|
background: #ffffff;
|
}
|
|
.radio-dot.active {
|
border-color: #20b4ff;
|
box-shadow: inset 0 0 0 8rpx #20b4ff;
|
}
|
|
.check-circle.active {
|
border-color: #20b4ff;
|
background: #20b4ff;
|
}
|
|
.radio-text {
|
margin-left: 14rpx;
|
font-size: 34rpx;
|
line-height: 48rpx;
|
color: #4a4a4a;
|
}
|
|
.input-row {
|
justify-content: space-between;
|
}
|
|
.row-input {
|
flex: 1;
|
height: 94rpx;
|
font-size: 32rpx;
|
text-align: right;
|
color: #3a3f46;
|
}
|
|
.input-placeholder {
|
color: #c9c9c9;
|
}
|
|
.detail-card {
|
margin-top: 24rpx;
|
padding: 0 28rpx;
|
}
|
|
.detail-row {
|
justify-content: space-between;
|
}
|
|
.invoice-type-popup {
|
padding: 24rpx 24rpx calc(env(safe-area-inset-bottom) + 24rpx);
|
background: #ffffff;
|
}
|
|
.popup-head {
|
position: relative;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 88rpx;
|
}
|
|
.popup-title {
|
font-size: 42rpx;
|
font-weight: 700;
|
line-height: 58rpx;
|
color: #222222;
|
}
|
|
.popup-close {
|
position: absolute;
|
right: 8rpx;
|
top: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 56rpx;
|
height: 56rpx;
|
transform: translateY(-50%);
|
}
|
|
.type-option {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
gap: 20rpx;
|
padding: 34rpx 28rpx;
|
margin-top: 22rpx;
|
border: 2rpx solid transparent;
|
border-radius: 20rpx;
|
background: #f7f8fa;
|
}
|
|
.type-option.active {
|
border-color: #25b8ff;
|
background: rgba(37, 184, 255, 0.12);
|
}
|
|
.option-copy {
|
flex: 1;
|
min-width: 0;
|
}
|
|
.option-title {
|
font-size: 34rpx;
|
font-weight: 700;
|
line-height: 48rpx;
|
color: #2b2f36;
|
}
|
|
.option-desc {
|
margin-top: 18rpx;
|
font-size: 24rpx;
|
line-height: 38rpx;
|
color: #8d949f;
|
}
|
|
.option-check {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-shrink: 0;
|
width: 40rpx;
|
height: 40rpx;
|
border-radius: 50%;
|
background: #d7e0e8;
|
}
|
|
.option-check.active {
|
background: #25b8ff;
|
}
|
|
.popup-confirm {
|
height: 88rpx;
|
margin-top: 36rpx;
|
line-height: 88rpx;
|
text-align: center;
|
border-radius: 999rpx;
|
background: linear-gradient(135deg, #29c2ff 0%, #1ea6ff 100%);
|
font-size: 36rpx;
|
font-weight: 600;
|
color: #ffffff;
|
}
|
|
.submit-wrap {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
padding: 20rpx 28rpx calc(env(safe-area-inset-bottom) + 20rpx);
|
background: linear-gradient(180deg, rgba(247, 248, 250, 0) 0%, rgba(247, 248, 250, 0.96) 24%, #f7f8fa 100%);
|
}
|
|
.submit-btn {
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
border-radius: 999rpx;
|
background: linear-gradient(135deg, #29c2ff 0%, #1ea6ff 100%);
|
font-size: 36rpx;
|
font-weight: 500;
|
color: #ffffff;
|
box-shadow: 0 14rpx 28rpx rgba(30, 166, 255, 0.22);
|
}
|
</style>
|
