You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
718 lines
17 KiB
718 lines
17 KiB
<template>
|
|
<!-- 添加新发票 -->
|
|
<view :style="colorStyle" class="invoice-form">
|
|
<form @submit="formSubmit">
|
|
<view class="panel">
|
|
<view class="acea-row row-middle">
|
|
<view class="label">发票类型</view>
|
|
<view class="button-group">
|
|
<view v-for="item in invoiceTypeList" :key="item.value" :class="{ active: type == item.value }" class="button" @click="changeType(item)">{{ item.name }}</view>
|
|
</view>
|
|
<!-- <input name="type" :value="type === '2' && header_type === '2' ? '增值税电子专用发票' : '增值税电子普通发票'" disabled @click="callType" />
|
|
<text class="iconfont icon-xiangyou"></text> -->
|
|
</view>
|
|
<view v-if="type == 1" class="acea-row row-middle">
|
|
<view class="label">抬头类型</view>
|
|
<view class="button-group">
|
|
<view v-for="item in headerTypeList" :key="item.value" :class="{ active: header_type == item.value }" class="button" @click="changeHeaderType(item.value)">{{ item.name }}
|
|
</view>
|
|
</view>
|
|
<!-- <radio-group name="header_type" @change="changeHeaderType">
|
|
<label>
|
|
<radio class="disabled" value="1" :checked="header_type === '1'" /><text>个人</text>
|
|
</label>
|
|
<label>
|
|
<radio value="2" :checked="header_type === '2'" /><text>企业</text>
|
|
</label>
|
|
</radio-group> -->
|
|
</view>
|
|
<view class="acea-row row-middle">
|
|
<view class="label">发票抬头</view>
|
|
<!-- <input name="name" :value="name" :placeholder="header_type === '1' ? '需要开具发票的姓名' : '需要开具发票的企业名称'" /> -->
|
|
<input name="name" :value="name" placeholder="请输入发票抬头" />
|
|
</view>
|
|
<view v-show="header_type == 2" class="acea-row row-middle">
|
|
<view class="label">单位税号</view>
|
|
<input name="duty_number" :value="duty_number" placeholder="请输入单位税号" />
|
|
</view>
|
|
<view class="acea-row row-middle">
|
|
<view class="label">{{header_type==2?'企业':'联系'}}电话</view>
|
|
<input name="drawer_phone" :value="drawer_phone" :placeholder="`请输入${header_type==2?'企业':'联系'}电话`" />
|
|
</view>
|
|
<view class="acea-row row-middle">
|
|
<view class="label">电子邮箱</view>
|
|
<input name="email" :value="email" placeholder="请输入电子邮箱" />
|
|
</view>
|
|
<template v-if="type == 2">
|
|
<view class="acea-row row-middle">
|
|
<view class="label">开户银行</view>
|
|
<input name="bank" :value="bank" placeholder="请输入开户银行" />
|
|
</view>
|
|
<view class="acea-row row-middle">
|
|
<view class="label">银行账号</view>
|
|
<input name="card_number" :value="card_number" placeholder="请输入银行账号" />
|
|
</view>
|
|
<view class="acea-row row-middle">
|
|
<view class="label">企业地址</view>
|
|
<input name="address" :value="address" placeholder="请输入企业地址" />
|
|
</view>
|
|
<view class="acea-row row-middle">
|
|
<view class="label">企业电话</view>
|
|
<input name="tell" :value="tell" placeholder="请输入企业电话" />
|
|
</view>
|
|
</template>
|
|
</view>
|
|
<view class="default acea-row row-between-wrapper">
|
|
<view>设置为默认抬头</view>
|
|
<view :class="{ checked: is_default }" class="switch" @click="changeDefault"></view>
|
|
</view>
|
|
<view class="button-section">
|
|
<button class="button" form-type="submit">保存</button>
|
|
</view>
|
|
</form>
|
|
<!-- <home v-if="navigation"></home> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import home from '@/components/home';
|
|
import {
|
|
invoiceSave,
|
|
invoiceDetail
|
|
} from '@/api/user.js';
|
|
import colors from '@/mixins/color.js';
|
|
export default {
|
|
components: {
|
|
home
|
|
},
|
|
mixins: [colors],
|
|
data() {
|
|
return {
|
|
invoiceTypeList: [{
|
|
name: '普通发票',
|
|
value: 1,
|
|
info: '纸质发票开出后将以邮寄形式交付'
|
|
},
|
|
{
|
|
name: '专用发票',
|
|
value: 2,
|
|
info: '纸质发票开出后将以邮寄形式交付'
|
|
}
|
|
],
|
|
headerTypeList: [{
|
|
name: '个人',
|
|
value: 1,
|
|
},
|
|
{
|
|
name: '企业',
|
|
value: 2,
|
|
}
|
|
],
|
|
id: '', // 修改时为必须参数
|
|
header_type: 1, // 抬头类型1: 个人2： 企业
|
|
type: 1, // 发票类型1：普通2：专用
|
|
drawer_phone: '', // 开票人手机号
|
|
name: '', // 名称（发票抬头）
|
|
duty_number: '', // 税号（个人为非必需，企业是必需参数）
|
|
tell: '', // 公司注册电话
|
|
address: '', // 注册地址
|
|
bank: '', // 开户行
|
|
card_number: '', // 银行卡号
|
|
is_default: 0, // 是否默认
|
|
email: '', // 邮箱
|
|
popupType: false,
|
|
typeName: '',
|
|
urlQuery: '',
|
|
from: '',
|
|
specialInvoice: true,
|
|
order_id: ''
|
|
};
|
|
},
|
|
computed: {
|
|
backUrl() {
|
|
switch (this.from) {
|
|
case 'order_confirm':
|
|
return `/pages/goods/order_confirm/index${this.urlQuery}`;
|
|
break;
|
|
default:
|
|
return '/pages/users/user_invoice_list/index?from=invoice_form';
|
|
break;
|
|
|
|
}
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
for (let key in options) {
|
|
switch (key) {
|
|
case 'couponTitle':
|
|
case 'new':
|
|
case 'cartId':
|
|
case 'pinkId':
|
|
case 'couponId':
|
|
case 'addressId':
|
|
this.urlQuery += `${this.urlQuery ? '&' : '?'}${key}=${options[key]}`;
|
|
break;
|
|
case 'from':
|
|
this.from = options[key];
|
|
break;
|
|
case 'header_type':
|
|
this.header_type = options[key];
|
|
break;
|
|
case 'id':
|
|
this.id = options[key];
|
|
this.getInvoiceDetail();
|
|
break;
|
|
case 'specialInvoice':
|
|
if (options[key] === 'false') {
|
|
this.specialInvoice = false;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
if (options.order_id)
|
|
this.order_id = options.order_id
|
|
const invoiceItem = this.invoiceTypeList.find(item => item.value === this.type);
|
|
this.typeName = invoiceItem.name;
|
|
},
|
|
onShow() {
|
|
uni.removeStorageSync('form_type_cart');
|
|
},
|
|
methods: {
|
|
// 获取发票数据
|
|
getInvoiceDetail() {
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
});
|
|
invoiceDetail(this.id).then(res => {
|
|
uni.hideLoading();
|
|
this.header_type = res.data.header_type;
|
|
this.type = res.data.type;
|
|
const invoiceItem = this.invoiceTypeList.find(item => item.value === this.type);
|
|
this.typeName = invoiceItem.name;
|
|
this.name = res.data.name;
|
|
this.drawer_phone = res.data.drawer_phone;
|
|
this.email = res.data.email;
|
|
this.duty_number = res.data.duty_number;
|
|
this.bank = res.data.bank;
|
|
this.card_number = res.data.card_number;
|
|
this.address = res.data.address;
|
|
this.tell = res.data.tell;
|
|
this.is_default = res.data.is_default;
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err,
|
|
icon: 'none'
|
|
});
|
|
});
|
|
},
|
|
// 保存
|
|
formSubmit(e) {
|
|
const formData = e.detail.value;
|
|
formData.type = this.type;
|
|
formData.header_type = this.header_type;
|
|
if (formData.header_type == 1) {
|
|
if (!formData.name) {
|
|
return uni.showToast({
|
|
title: '请输入需要开具发票的姓名',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
if (!formData.drawer_phone) {
|
|
return uni.showToast({
|
|
title: '请输入您的手机号',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(formData.drawer_phone)) {
|
|
return uni.showToast({
|
|
title: '请正确输入您的手机号',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
if (!formData.email) {
|
|
return uni.showToast({
|
|
title: '请输入您的联系邮箱',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(formData.email)) {
|
|
return uni.showToast({
|
|
title: '请正确输入您的联系邮箱',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
}
|
|
if (formData.header_type == 2) {
|
|
if (formData.type == 1) {
|
|
if (!formData.name) {
|
|
return uni.showToast({
|
|
title: '请输入需要开具发票的企业名称',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
if (!formData.duty_number) {
|
|
return uni.showToast({
|
|
title: '请输入纳税人识别号',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
if (!/[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}/.test(formData.duty_number)) {
|
|
return uni.showToast({
|
|
title: '请正确输入纳税人识别号',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
if (!formData.drawer_phone) {
|
|
return uni.showToast({
|
|
title: '请输入您的手机号',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(formData.drawer_phone)) {
|
|
return uni.showToast({
|
|
title: '请正确输入您的手机号',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
if (!formData.email) {
|
|
return uni.showToast({
|
|
title: '请输入您的联系邮箱',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(formData.email)) {
|
|
return uni.showToast({
|
|
title: '请正确输入您的联系邮箱',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
}
|
|
if (formData.type == 2) {
|
|
if (!formData.name) {
|
|
return uni.showToast({
|
|
title: '请输入需要开具发票的企业名称',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
if (!formData.duty_number) {
|
|
return uni.showToast({
|
|
title: '请输入纳税人识别号',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
if (!/[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}/.test(formData.duty_number)) {
|
|
return uni.showToast({
|
|
title: '请正确输入纳税人识别号',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
if (!formData.drawer_phone) {
|
|
return uni.showToast({
|
|
title: '请输入您的手机号',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(formData.drawer_phone)) {
|
|
return uni.showToast({
|
|
title: '请正确输入您的手机号',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
if (!formData.email) {
|
|
return uni.showToast({
|
|
title: '请输入您的联系邮箱',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(formData.email)) {
|
|
return uni.showToast({
|
|
title: '请正确输入您的联系邮箱',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
if (!formData.bank) {
|
|
return uni.showToast({
|
|
title: '请输入您的开户银行',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
if (!formData.card_number) {
|
|
return uni.showToast({
|
|
title: '请输入您的银行账号',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
// if (!/^\d{16}|\d{19}$/.test(formData.card_number)) {
|
|
// return uni.showToast({
|
|
// title: '请正确输入您的银行账号',
|
|
// icon: 'none'
|
|
// });
|
|
// }
|
|
if (!formData.address) {
|
|
return uni.showToast({
|
|
title: '请输入您所在的企业地址',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
if (!formData.tell) {
|
|
return uni.showToast({
|
|
title: '请输入您的企业电话',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
formData.is_default = this.is_default;
|
|
formData.id = this.id;
|
|
uni.showLoading({
|
|
title: '保存中'
|
|
});
|
|
invoiceSave(formData).then(res => {
|
|
let that = this;
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: 'success',
|
|
success() {
|
|
switch (that.from) {
|
|
case 'order_confirm':
|
|
let name = '';
|
|
name += formData.header_type == 1 ? '个人' : '企业';
|
|
name += formData.type == 1 ? '普通' : '专用';
|
|
name += '发票';
|
|
if (that.id) {
|
|
uni.navigateTo({
|
|
url: `/pages/goods/order_confirm/index${that.urlQuery}&invoice_id=${that.id}&invoice_name=${name}`
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: `/pages/goods/order_confirm/index${that.urlQuery}&invoice_id=${res.data.id}&invoice_name=${name}`
|
|
})
|
|
}
|
|
break;
|
|
case 'order_details':
|
|
if (that.id) {
|
|
uni.navigateTo({
|
|
url: `/pages/goods/order_details/index?order_id=${that.order_id}&invoice_id=${that.id}`
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: `/pages/goods/order_details/index?order_id=${that.order_id}&invoice_id=${res.data.id}`
|
|
})
|
|
}
|
|
break;
|
|
default:
|
|
uni.navigateTo({
|
|
url: '/pages/users/user_invoice_list/index?from=invoice_form'
|
|
});
|
|
break;
|
|
}
|
|
|
|
}
|
|
});
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err,
|
|
icon: 'none'
|
|
});
|
|
});
|
|
},
|
|
// 调起发票类型弹窗
|
|
callType() {
|
|
this.popupType = true;
|
|
},
|
|
// 选择发票类型
|
|
changeType(item) {
|
|
if (item.value == 2 && this.header_type == 1) {
|
|
this.header_type = 2;
|
|
}
|
|
this.typeName = item.name;
|
|
this.type = item.value;
|
|
},
|
|
// 关闭发票弹窗
|
|
closeType() {
|
|
this.popupType = false;
|
|
},
|
|
// 选择抬头类型
|
|
changeHeaderType(value) {
|
|
this.header_type = value;
|
|
this.type = 1;
|
|
},
|
|
// 设置为默认抬头
|
|
changeDefault() {
|
|
this.is_default = 1 - this.is_default;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.invoice-form {
|
|
padding: 24rpx 20rpx;
|
|
|
|
.label {
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
/deep/.disabled .uni-radio-input {
|
|
background-color: #F8F8F8;
|
|
}
|
|
|
|
form {
|
|
font-size: 28rpx;
|
|
color: #282828;
|
|
}
|
|
|
|
form input,
|
|
form radio-group {
|
|
flex: 1;
|
|
margin-left: 24rpx;
|
|
}
|
|
|
|
form input {
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
form label {
|
|
margin-right: 50rpx;
|
|
}
|
|
|
|
form radio {
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
form checkbox-group {
|
|
height: 90rpx;
|
|
}
|
|
|
|
form checkbox {
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.panel {
|
|
padding: 8rpx 0;
|
|
border-radius: 24rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.panel .acea-row {
|
|
padding: 32rpx 24rpx;
|
|
}
|
|
|
|
.panel .button-group {
|
|
margin-left: 24rpx;
|
|
|
|
.button {
|
|
display: inline-block;
|
|
height: 56rpx;
|
|
padding: 0 32rpx;
|
|
border: 1rpx solid #F5F5F5;
|
|
border-radius: 28rpx;
|
|
background: #F5F5F5;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
line-height: 54rpx;
|
|
color: #333333;
|
|
|
|
+.button {
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
&.active {
|
|
border-color: var(--view-theme);
|
|
background-color: var(--view-minorColorT);
|
|
color: var(--view-theme);
|
|
}
|
|
}
|
|
}
|
|
|
|
.default {
|
|
height: 128rpx;
|
|
padding: 0 24rpx;
|
|
border-radius: 24rpx;
|
|
margin-top: 20rpx;
|
|
background-color: #FFFFFF;
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
color: #333333;
|
|
|
|
.switch {
|
|
position: relative;
|
|
width: 79rpx;
|
|
height: 48rpx;
|
|
padding: 4rpx;
|
|
border-radius: 24rpx;
|
|
background-color: #DDDDDD;
|
|
transition: background-color 0.3s;
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 4rpx;
|
|
left: 4rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 20rpx;
|
|
background-color: #FFFFFF;
|
|
box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 0, 0, 0.08);
|
|
transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.25, 1.35);
|
|
}
|
|
|
|
&.checked {
|
|
background-color: var(--view-theme);
|
|
|
|
&::after {
|
|
transform: translateX(30rpx);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.input-placeholder {
|
|
font-size: 26rpx;
|
|
color: #BBBBBB;
|
|
}
|
|
|
|
.icon-xiangyou {
|
|
margin-left: 25rpx;
|
|
font-size: 26rpx;
|
|
color: #BFBFBF;
|
|
margin-top: 2rpx;
|
|
}
|
|
|
|
.popup {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 99;
|
|
width: 100%;
|
|
padding-bottom: 100rpx;
|
|
border-top-left-radius: 16rpx;
|
|
border-top-right-radius: 16rpx;
|
|
background-color: #F5F5F5;
|
|
overflow: hidden;
|
|
transform: translateY(100%);
|
|
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.popup.on {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.popup .title {
|
|
position: relative;
|
|
height: 137rpx;
|
|
font-size: 32rpx;
|
|
line-height: 137rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.popup scroll-view {
|
|
height: 466rpx;
|
|
padding-right: 30rpx;
|
|
padding-left: 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.popup label {
|
|
padding: 35rpx 30rpx;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 20rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.popup .text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-size: 28rpx;
|
|
color: #282828;
|
|
}
|
|
|
|
.popup .info {
|
|
margin-top: 10rpx;
|
|
font-size: 22rpx;
|
|
color: #909090;
|
|
}
|
|
|
|
.popup .icon-guanbi {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 30rpx;
|
|
z-index: 2;
|
|
transform: translateY(-50%);
|
|
font-size: 30rpx;
|
|
color: #707070;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.popup .text .acea-row {
|
|
display: inline-flex;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.popup .name {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.popup .label {
|
|
width: 56rpx;
|
|
height: 28rpx;
|
|
border: 1rpx solid #E93323;
|
|
margin-left: 18rpx;
|
|
font-size: 20rpx;
|
|
line-height: 26rpx;
|
|
text-align: center;
|
|
color: #E93323;
|
|
}
|
|
|
|
.popup .type {
|
|
width: 124rpx;
|
|
height: 42rpx;
|
|
margin-top: 14rpx;
|
|
background-color: #FCF0E0;
|
|
font-size: 24rpx;
|
|
line-height: 42rpx;
|
|
text-align: center;
|
|
color: #D67300;
|
|
}
|
|
|
|
.popup .type.special {
|
|
background-color: #FDE9E7;
|
|
color: #E93323;
|
|
}
|
|
|
|
.button-section {
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 20rpx 20rpx calc(20rpx + env(safe-area-inset-bottom));
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.button-section .button {
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
background-color: var(--view-theme);
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
line-height: 80rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.button-section .navigator {
|
|
height: 86rpx;
|
|
border: 1rpx solid var(--view-theme);
|
|
border-radius: 43rpx;
|
|
margin-top: 26rpx;
|
|
font-size: 30rpx;
|
|
line-height: 86rpx;
|
|
text-align: center;
|
|
color: var(--view-theme);
|
|
}
|
|
</style> |