Skip to content

杨炀 / ztx_wx_gzt

Go to a project
Toggle navigation
Toggle navigation pinning
11fa3904 by 张猛
Options

开票

1 parent ef5fda73
Inline Side-by-side
Showing 2 changed files with 59 additions and 56 deletions
pages/invoice/apply.vue
......@@ -6,9 +6,9 @@
<text class="label">发票类型</text>
<view class="type-select">
<view
:class="{ active: form.invoiceType === '2' }"
class="type-option"
:class="{ active: form.invoiceType === '1' }"
@click="form.invoiceType = '1'"
@click="form.invoiceType = '2'"
>
<view class="type-icon">个</view>
<view class="type-info">
......@@ -17,9 +17,10 @@
</view>
</view>
<view
v-if="type==0"
:class="{ active: form.invoiceType === '1' }"
class="type-option"
:class="{ active: form.invoiceType === '2' }"
@click="form.invoiceType = '2'"
@click="form.invoiceType = '1'"
>
<view class="type-icon enterprise">企</view>
<view class="type-info">
......@@ -29,30 +30,30 @@
</view>
</view>
</view>
<!-- 发票抬头 -->
<view class="form-item column">
<text class="label">发票抬头</text>
<input
class="input"
v-model="form.name"
class="input"
placeholder="请输入公司全称或个人姓名"
/>
<text class="hint">请确保发票抬头与公司营业执照或个人身份证上的名称一致。</text>
</view>
<!-- 纳税人识别号（企业才显示） -->
<view class="form-item column" v-if="form.invoiceType === '2'">
<view v-if="form.invoiceType === '1'" class="form-item column">
<text class="label">纳税人识别号</text>
<input
class="input"
v-model="form.taxno"
placeholder="请输入纳税人识别号"
class="input"
maxlength="20"
placeholder="请输入纳税人识别号"
/>
<text class="hint">企业税务登记证上的号码，一般为 15、18 或 20 位</text>
</view>
<!-- 接收方式 -->
<view class="form-item">
<text class="label">接收方式</text>
......@@ -67,29 +68,29 @@
</view>
</view>
</view>
<!-- 开票金额 -->
<!-- <view class="form-item">
<text class="label">开票金额</text>
<text class="amount">¥ {{ (Number(form.amount)).toFixed(2) }}</text>
</view> -->
<!-- 接收邮箱 -->
<view class="form-item column">
<text class="label">接收邮箱号码</text>
<input
class="input"
v-model="form.phone"
class="input"
placeholder="请输入接收发票的邮箱号码"
type="text"
/>
<text class="hint">电子发票将在 3-5 个工作日内发送至该邮箱</text>
</view>
</view>
<!-- 提交按钮 -->
<view class="btn-wrap">
<view class="submit-btn" :class="{ loading: submitting }" @click="handleSubmit">
<view :class="{ loading: submitting }" class="submit-btn" @click="handleSubmit">
{{ submitting ? '提交中...' : '提交申请' }}
</view>
</view>
......@@ -97,15 +98,15 @@
</template>
<script setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { outputInvoiceNo } from '@/common/api.js';
import {ref, reactive} from 'vue';
import {onLoad} from '@dcloudio/uni-app';
import {outputInvoiceNo} from '@/common/api.js';
const submitting = ref(false);
const type = ref(0) //1个人订单只开普票
// 表单数据（与PC端字段完全对齐）
const form = reactive({
invoiceType: '1', // 1=个人 2=企业
invoiceType: '2', // 1=企业 2=个人
deliveryMethod: '1', // 接收方式：1=电子发票
name: '', // 发票抬头
taxno: '', // 纳税人识别号
......@@ -123,46 +124,48 @@ onLoad((options) => {
if (options.invoiceType) {
form.invoiceType = options.invoiceType;
}
type.value = options.type ?? 0
console.log(options)
});
// 表单验证
const validateForm = () => {
// 发票抬头校验
if (!form.name) {
uni.showToast({ title: '请输入发票抬头', icon: 'none' });
uni.showToast({title: '请输入发票抬头', icon: 'none'});
return false;
}
if (form.name.length < 2 || form.name.length > 100) {
uni.showToast({ title: '发票抬头长度在2-100个字符之间', icon: 'none' });
uni.showToast({title: '发票抬头长度在2-100个字符之间', icon: 'none'});
return false;
}
// 企业必须填纳税人识别号
if (form.invoiceType === '2' && !form.taxno) {
uni.showToast({ title: '请输入纳税人识别号', icon: 'none' });
if (form.invoiceType === '1' && !form.taxno) {
uni.showToast({title: '请输入纳税人识别号', icon: 'none'});
return false;
}
// 纳税人识别号格式校验（同PC）
if (form.invoiceType === '2') {
if (form.invoiceType === '1') {
const taxReg = /^[A-Z0-9]{15}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/;
if (!taxReg.test(form.taxno)) {
uni.showToast({ title: '纳税人识别号格式不正确', icon: 'none' });
uni.showToast({title: '纳税人识别号格式不正确', icon: 'none'});
return false;
}
}
// 邮箱校验
if (!form.phone) {
uni.showToast({ title: '请输入接收邮箱', icon: 'none' });
uni.showToast({title: '请输入接收邮箱', icon: 'none'});
return false;
}
const phoneReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!phoneReg.test(form.phone)) {
uni.showToast({ title: '请输入正确的邮箱地址', icon: 'none' });
uni.showToast({title: '请输入正确的邮箱地址', icon: 'none'});
return false;
}
return true;
};
......@@ -170,7 +173,7 @@ const validateForm = () => {
const handleSubmit = async () => {
if (submitting.value) return;
if (!validateForm()) return;
submitting.value = true;
console.log('提交表单数据:', form);
try {
......@@ -206,19 +209,19 @@ const handleSubmit = async () => {
padding: 24rpx;
margin-bottom: 20rpx;
border-radius: 16rpx;
&.column {
display: flex;
flex-direction: column;
}
.label {
font-size: 28rpx;
color: #333;
font-weight: 500;
margin-bottom: 16rpx;
}
.input {
width: 100%;
font-size: 28rpx;
......@@ -239,18 +242,18 @@ const handleSubmit = async () => {
line-height: 80rpx;
}
}
.form-item.column .input {
width: 100%;
display: block;
}
.hint {
font-size: 24rpx;
color: #909399;
margin-top: 8rpx;
}
.amount {
font-size: 32rpx;
color: #AD181F;
......@@ -273,12 +276,12 @@ const handleSubmit = async () => {
border: 2rpx solid #e4e7ed;
border-radius: 12rpx;
background: #fafafa;
&.active {
border-color: #AD181F;
background: #FFF5F5;
}
.type-icon {
width: 60rpx;
height: 60rpx;
......@@ -291,28 +294,28 @@ const handleSubmit = async () => {
color: #409eff;
font-weight: 600;
margin-right: 16rpx;
&.enterprise {
background: #f0f6ff;
color: #1561CB;
}
}
&.active .type-icon {
background: #AD181F;
color: #fff;
}
.type-info {
display: flex;
flex-direction: column;
.type-name {
font-size: 28rpx;
font-weight: 600;
color: #303133;
}
.type-desc {
font-size: 22rpx;
color: #909399;
......@@ -333,12 +336,12 @@ const handleSubmit = async () => {
border: 2rpx solid #e4e7ed;
border-radius: 12rpx;
background: #fafafa;
&.active {
border-color: #AD181F;
background: #FFF5F5;
}
.method-icon {
width: 60rpx;
height: 60rpx;
......@@ -352,30 +355,30 @@ const handleSubmit = async () => {
font-weight: 600;
margin-right: 16rpx;
}
&.active .method-icon {
background: #AD181F;
color: #fff;
}
.method-info {
flex: 1;
display: flex;
flex-direction: column;
.method-name {
font-size: 28rpx;
font-weight: 600;
color: #303133;
}
.method-desc {
font-size: 22rpx;
color: #909399;
margin-top: 4rpx;
}
}
.method-tag {
font-size: 20rpx;
color: #67C23A;
......@@ -407,7 +410,7 @@ const handleSubmit = async () => {
font-size: 32rpx;
text-align: center;
font-weight: 500;
&.loading {
background: #c0c4cc;
}
......
personal/order.vue
......@@ -269,7 +269,7 @@ const handlePay = async (item) => {
// 申请开票
const makeInvoiceFN = (item) => {
uni.navigateTo({url: `/pages/invoice/apply?orderId=${item.id}amount=${item.price}`});
uni.navigateTo({url: `/pages/invoice/apply?orderId=${item.id}&amount=${item.price}&type=1`});
};
// 取消订单
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!