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.
567 lines
16 KiB
567 lines
16 KiB
<template>
|
|
<view style="padding: 30rpx 0px 0rpx 0px;">
|
|
<view class="steps_box">
|
|
<block class="block-step" v-for="(item, index) in stepsDatas" :key="index">
|
|
<view class="view_item">
|
|
<!-- 打钩 -->
|
|
<icon v-if="stepsIndex >= index ? true : false" type="success" size="48rpx" color="#007aff" />
|
|
<!-- 圆圈数字 -->
|
|
<view v-else> {{ index + 1 }} </view>
|
|
<!-- 标题 -->
|
|
<text :style="{ color: stepsIndex >= index ? '#228ded' : '#909090' }" style="font-weight: bold;">{{ item.text }}</text>
|
|
</view>
|
|
<!-- 横线 -->
|
|
<view v-if="index == stepsDatas.length - 1 ? false : true" :class="['view_line', stepsIndex <= index ? 'line_bgcolor1' : 'line_bgcolor']"></view>
|
|
</block>
|
|
</view>
|
|
|
|
<view class="write" :isFull="true">
|
|
<view class="flex flex-direction-column">
|
|
<view class="header">
|
|
<!-- 开票信息 -->
|
|
<view v-if="stepsIndex === 0">
|
|
<view class="form-title">开票信息：</view>
|
|
<view class="form-box">
|
|
<uni-forms :modelValue="list1" ref="form">
|
|
<uni-forms-item label="开票项目:" required name="name" :label-width="80">
|
|
<uni-data-select v-model="list1.project_id" :localdata="range" placeholder="请选择开票项目"></uni-data-select>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="合并开票:" required name="name" :label-width="80">
|
|
<uni-data-checkbox v-model="list1.merge" :localdata="mergelist"></uni-data-checkbox>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="用户编号:" required name="name" :label-width="80">
|
|
<uni-combox v-model="list1.pucode_id" :border="false" :candidates="candidates" placeholder="请选择或输入用户编号"></uni-combox>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="到期:" required name="name" placeholder="请选择账期" :label-width="80">
|
|
<picker mode="date" fields="month" v-model="list1.expire_time" @change="bindDateChange" style="height: 36px;line-height: 36px;">
|
|
<view class="picker_box">
|
|
<view class="uni-input">{{list1.expire_time}}</view>
|
|
<view><uni-icons type="down" size="30rpx"></uni-icons></view>
|
|
</view>
|
|
</picker>
|
|
</uni-forms-item>
|
|
<view class="form-title">接收方式：</view>
|
|
<uni-forms-item label="手机号:" required name="name" :label-width="80">
|
|
<uni-easyinput type="text" v-model="list1.phone" :styles="styles" :inputBorder="false" @blur="onInput" placeholder="请输入可用手机号码"></uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="邮箱:" required name="name" :label-width="80">
|
|
<uni-easyinput type="text" v-model="list1.email" :inputBorder="false" placeholder="请输入邮箱" @blur="validateEmail"></uni-easyinput>
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
</view>
|
|
</view>
|
|
<!-- 抬头信息 -->
|
|
<view v-if="stepsIndex === 1">
|
|
<view class="lookup">
|
|
<view class="lookup-title">抬头信息：</view>
|
|
<view class="lookup-title1" @click="Obtain"><uni-icons type="redo-filled" size="30rpx" color="#007aff"></uni-icons>导入发票抬头</view>
|
|
</view>
|
|
<uni-forms :modelValue="list2" ref="form1">
|
|
<uni-forms-item label="抬头类型" required name="name" :label-width="80">
|
|
<uni-data-checkbox v-model="list2.type" :localdata="headerType"></uni-data-checkbox>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="名称" required name="name" :label-width="80">
|
|
<uni-easyinput type="text" v-model="list2.title" :inputBorder="false" placeholder="请输入抬头名称"></uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="税号" required name="name" :label-width="80">
|
|
<uni-easyinput type="text" v-model="list2.tax_number" @blur="taxiD" :inputBorder="false" placeholder="请输入纳税人识别号"></uni-easyinput>
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
</view>
|
|
<!-- 提交申请 -->
|
|
<view v-if="stepsIndex === 2">
|
|
<view class="form-title">开票信息</view>
|
|
<uni-forms>
|
|
<uni-forms-item label="开票项目" name="name" :label-width="80">
|
|
<!-- <uni-easyinput disabled type="text" v-model="" :inputBorder="false" placeholder="请输入纳税人识别号"></uni-easyinput> -->
|
|
<view class="list3_box">{{project_id1(list1.project_id)}}</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="开票金额" name="name" :label-width="80">
|
|
<view class="list3_box">{{amount}}</view>
|
|
</uni-forms-item>
|
|
<view class="form-title">抬头信息</view>
|
|
<uni-forms-item label="抬头类型" name="name" :label-width="80">
|
|
<uni-data-checkbox v-model="list2.type" :localdata="headerType1"></uni-data-checkbox>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="名称" name="name" :label-width="80">
|
|
<view class="list3_box">{{list2.title}}</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="税号" name="name" :label-width="80">
|
|
<view class="list3_box">{{list2.tax_number}}</view>
|
|
</uni-forms-item>
|
|
<view class="form-title">接收方式</view>
|
|
<uni-forms-item label="邮箱" name="name" :label-width="80">
|
|
<view class="list3_box">{{list1.email}}</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item label="手机号" name="name" :label-width="80">
|
|
<view class="list3_box">{{list1.phone}}</view>
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex justify-end">
|
|
<view class="bottom">
|
|
<button class="btn1" v-if="stepsIndex !== 0" @click="changeSteps" data-type="prev">上一步</button>
|
|
</view>
|
|
<view class="bottom bottom-next">
|
|
<button class="btn" v-if="stepsIndex !== 2" @click="changeSteps" data-type="next">下一步</button>
|
|
</view>
|
|
<view class="bottom bottom-next" style="padding-bottom: 30rpx;">
|
|
<button v-if="stepsIndex !== 0 && stepsIndex !== 1" class="btn" @click="submitForm">提交</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import API from '@/common/js/api.js'
|
|
import wxApi from "@/common/js/wxApi.js"
|
|
export default {
|
|
data() {
|
|
const currentDate = this.getDate({format: true})
|
|
return {
|
|
date: currentDate,
|
|
// 表单数据
|
|
list1:{
|
|
project_id: '',//开票项目
|
|
pucode_id: '',//用户编号id
|
|
merge: '',//合并开票
|
|
expire_time: '',//到期时间
|
|
email: '',//邮箱
|
|
phone: ''//手机号
|
|
},
|
|
// 抬头信息
|
|
list2:{
|
|
type: '',//抬头类型
|
|
title: '',//抬头名称
|
|
tax_number:'',//税号
|
|
address: '',//地址
|
|
telephone: '',//电话
|
|
bank_name:'',//开户行
|
|
bank_account:''//账户
|
|
},
|
|
amount: 9,//开票总金额
|
|
// 开票信息手机号输入颜色
|
|
styles: {
|
|
color:"#d5213c"
|
|
},
|
|
// 步骤条数据
|
|
stepsIndex: 0,
|
|
// 步骤条的名称
|
|
stepsDatas: [
|
|
{ text: '开票信息' },
|
|
{ text: '抬头信息' },
|
|
{ text: '提交申请' },
|
|
],
|
|
// 开票下拉框数据列表
|
|
range: [],
|
|
// 提交申请的抬头类型
|
|
headerType1: [{text: '单位',value: '0',disable: true},{text: '个人',value: '1',disable: true}],
|
|
// 抬头信息的抬头类型
|
|
headerType: [{text: '单位',value: '0'},{text: '个人',value: '1'}],
|
|
// 用户编号数据列表
|
|
candidates: [],
|
|
//合并开票
|
|
mergelist: [{text: '不合并',value: '0'},{text: '合并',value: '1'}],
|
|
form1:{},
|
|
form2:{},
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.dropdown()
|
|
},
|
|
methods: {
|
|
// 获取开票信息的下拉数据
|
|
dropdown(){
|
|
API.getApplyData({}, res => {
|
|
this.range = res.data.project_arr;
|
|
this.candidates.push(res.data.pucode)
|
|
})
|
|
},
|
|
// 把开票项目的 value 换成 名称显示
|
|
project_id1(num){
|
|
let name = ""
|
|
this.range.forEach((item)=>{
|
|
if(item.value == num){
|
|
name = item.text
|
|
}
|
|
})
|
|
return name
|
|
},
|
|
// 上一步，下一步
|
|
changeSteps(evt) {
|
|
let { type } = evt.currentTarget.dataset;
|
|
if (type == "prev") {
|
|
if (this.stepsIndex > 0) {
|
|
this.stepsIndex = this.stepsIndex - 1;
|
|
} else {
|
|
this.$tip.toast("已经是初始位置", "none");
|
|
}
|
|
} else {
|
|
if (this.stepsIndex < this.stepsDatas.length - 1) {
|
|
this.stepsIndex = this.stepsIndex + 1;
|
|
this.nextstep()
|
|
} else {
|
|
this.$tip.toast("已经是最后一个", "none");
|
|
}
|
|
}
|
|
},
|
|
// 进行判断每一步的验证
|
|
nextstep(){
|
|
if(this.stepsIndex == 1){
|
|
if(!this.list1.project_id){
|
|
uni.showToast({title: '请选择开票项目',icon: 'none'});
|
|
this.stepsIndex = 0
|
|
return
|
|
}
|
|
if(!this.list1.merge){
|
|
uni.showToast({title: '请选择是否合并开票',icon: 'none'});
|
|
this.stepsIndex = 0
|
|
return
|
|
}
|
|
if(!this.list1.pucode_id){
|
|
uni.showToast({title: '请选择或输入用户编号',icon: 'none'});
|
|
this.stepsIndex = 0
|
|
return
|
|
}
|
|
if(!this.list1.expire_time){
|
|
uni.showToast({title: '请选择到期时间',icon: 'none'});
|
|
this.stepsIndex = 0
|
|
return
|
|
}
|
|
if(!this.list1.phone){
|
|
uni.showToast({title: '请输入手机号',icon: 'none'});
|
|
this.stepsIndex = 0
|
|
return
|
|
}
|
|
if(!this.list1.email){
|
|
uni.showToast({title: '请输入邮箱号',icon: 'none'});
|
|
this.stepsIndex = 0
|
|
return
|
|
}
|
|
this.form1 = this.$refs.form.modelValue;
|
|
}
|
|
|
|
if(this.stepsIndex == 2){
|
|
if(!this.list2.type){
|
|
uni.showToast({title: '请选择抬头类型',icon: 'none'});
|
|
this.stepsIndex = 1
|
|
return
|
|
}
|
|
if(!this.list2.title){
|
|
uni.showToast({title: '请输入抬头名称',icon: 'none'});
|
|
this.stepsIndex = 1
|
|
return
|
|
}
|
|
if(!this.list2.tax_number){
|
|
uni.showToast({title: '请输入税号',icon: 'none'});
|
|
this.stepsIndex = 1
|
|
return
|
|
}
|
|
this.form2 = this.$refs.form1.modelValue;
|
|
|
|
}
|
|
},
|
|
// 获取日期值
|
|
bindDateChange(e) {
|
|
// let value = e.detail.value;
|
|
// this.list1.expire_time = value.replace(/-/g, '');
|
|
this.list1.expire_time = e.detail.value;
|
|
},
|
|
// 限制手机号
|
|
onInput(event) {
|
|
// 使用正则表达式过滤非数字字符
|
|
const phonePattern = /^1[3-9]\d{9}$/;
|
|
if (!phonePattern.test(event.detail.value) && event.detail.value) {
|
|
uni.showToast({
|
|
title: '您输入的手机号格式有误',
|
|
icon: 'none'
|
|
});
|
|
this.list1.phone = ''; // 清空输入框
|
|
}else{
|
|
this.list1.phone = event.detail.value
|
|
}
|
|
},
|
|
// 限制邮箱
|
|
validateEmail(event) {
|
|
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
|
|
if (!emailPattern.test(event.detail.value) && event.detail.value) {
|
|
uni.showToast({
|
|
title: '请输入有效的邮箱地址',
|
|
icon: 'none'
|
|
});
|
|
this.list1.email = ''; // 清空输入框
|
|
}else{
|
|
this.list1.email = event.detail.value
|
|
}
|
|
},
|
|
// 限制税号
|
|
taxiD(event){
|
|
const taxiD1 = /^([A-Z0-9]{18})$/
|
|
if (!taxiD1.test(event.detail.value) && event.detail.value) {
|
|
uni.showToast({
|
|
title: '请输入有效的税号',
|
|
icon: 'none'
|
|
});
|
|
this.list2.tax_number = ''; // 清空输入框
|
|
}else{
|
|
this.list2.tax_number = event.detail.value
|
|
}
|
|
},
|
|
// 显示日期
|
|
getDate(type) {
|
|
const date = new Date();
|
|
let year = date.getFullYear();
|
|
let month = date.getMonth() + 1;
|
|
let day = date.getDate();
|
|
|
|
if (type === 'start') {
|
|
year = year - 60;
|
|
} else if (type === 'end') {
|
|
year = year + 2;
|
|
}
|
|
month = month > 9 ? month : '0' + month;
|
|
day = day > 9 ? day : '0' + day;
|
|
return `${year}${month}${day}`;
|
|
},
|
|
//获取抬头
|
|
Obtain(){
|
|
let _this = this
|
|
// #ifdef MP-WEIXIN||APP-PLUS
|
|
// wx.chooseInvoiceTitle({
|
|
// success: (res) => {
|
|
// this.list2.type = res.type;
|
|
// this.list2.title = res.title;
|
|
// this.list2.address = res.companyAddress;
|
|
// this.list2.telephone = res.telephone;
|
|
// this.list2.bank_name = res.bankName;
|
|
// this.list2.bank_account = res.bankAccount;
|
|
// console.log('发票抬头信息：', res);
|
|
// },
|
|
// fail: (err) => {
|
|
// console.error('获取发票抬头失败：', err);
|
|
// }
|
|
// });
|
|
// #endif
|
|
// #ifdef H5
|
|
wxApi.wxRegister(() => {
|
|
wx.invoke('chooseInvoiceTitle', {"scene": "1"}, function (res) {
|
|
let info = JSON.parse(res.choose_invoice_title_info);
|
|
_this.list2.type = info.type;
|
|
_this.list2.title = info.title;
|
|
_this.list2.address = info.companyAddress;
|
|
_this.list2.telephone = info.telephone;
|
|
_this.list2.bank_name = info.bankName;
|
|
_this.list2.bank_account = info.bankAccount;
|
|
_this.list2.tax_number = info.taxNumber;
|
|
})
|
|
})
|
|
// #endif
|
|
},
|
|
// 数据提交
|
|
submitForm() {
|
|
let list1 = this.form1;
|
|
let list2 = this.form2;
|
|
const url = '/api/invoiceIssuance/add'
|
|
if(this.list2.type=='1'){
|
|
this.list2.address = "";
|
|
this.list2.telephone = "";
|
|
this.list2.bank_name = "";
|
|
this.list2.bank_account = "";
|
|
}
|
|
let data = {
|
|
project_id: list1.project_id,
|
|
pucode_id: list1.pucode_id,
|
|
expire_time: list1.expire_time,
|
|
mobile: +list1.phone,// + 是为了把字符串转换为数字类型，因为组件不好设置数字类型
|
|
email: list1.email,
|
|
merge: +list1.merge,
|
|
type: +list2.type,
|
|
title: list2.title,
|
|
tax_number: list2.tax_number,
|
|
address: list2.address,
|
|
telephone: list2.telephone,
|
|
bank_name: list2.bank_name,
|
|
bank_account: list2.bank_account,
|
|
amount: this.amount
|
|
}
|
|
API.request(url,data, res => {
|
|
if(res.code==1){
|
|
uni.showToast({title: '开票申请完成',icon: 'none'});
|
|
setTimeout(()=>{
|
|
uni.redirectTo({
|
|
url:`/pages/Invoiced/Invoiced?bool=${true}`
|
|
})
|
|
},2000)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.write {
|
|
// height: 69%;
|
|
}
|
|
|
|
.header {
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
margin: 40rpx 30rpx;
|
|
|
|
.form-box {
|
|
// padding: 0rpx 25rpx 25rpx 25rpx;
|
|
.picker_box{
|
|
padding: 0px 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
.form-title{
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
padding: 25rpx;
|
|
border-bottom: 2rpx solid #e8e8e8;
|
|
}
|
|
}
|
|
|
|
.lookup{
|
|
padding: 25rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 2rpx solid #e8e8e8;
|
|
|
|
.lookup-title{
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
.lookup-title1{
|
|
color: #007aff;
|
|
}
|
|
}
|
|
|
|
.list3_box{
|
|
height: 72rpx;
|
|
line-height: 72rpx;
|
|
}
|
|
|
|
.steps_box {
|
|
// width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0px 30rpx;
|
|
padding: 40rpx;
|
|
border-radius: 20rpx;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.block-step {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.view_item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.view_item text {
|
|
font-size: 30rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.view_item view {
|
|
width: 45rpx;
|
|
height: 45rpx;
|
|
border: 3rpx solid #909090;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #909090;
|
|
font-size: 30rpx;
|
|
content: "\e732";
|
|
}
|
|
|
|
.view_line {
|
|
width: 15%;
|
|
height: 5rpx;
|
|
margin: 0rpx 2% 40rpx 2%;
|
|
}
|
|
|
|
.line_bgcolor1 {
|
|
background-color: #e0e0e0;
|
|
}
|
|
|
|
.line_bgcolor {
|
|
background: linear-gradient(to right, #5fe7ff, #00a336);
|
|
}
|
|
|
|
.flex-direction-column {
|
|
height: 100%;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.bottom {
|
|
width: 100%;
|
|
|
|
.btn {
|
|
// width: 90%;
|
|
/* margin-top: 30rpx; */
|
|
margin: 0px 30rpx;
|
|
height: 80rpx;
|
|
border-radius: 10rpx;
|
|
background-image: linear-gradient(to right, #2974cf, #448eee);
|
|
color: white;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
}
|
|
.btn1{
|
|
// width: 90%;
|
|
margin: 0px 30rpx;
|
|
height: 80rpx;
|
|
border-radius: 10rpx;
|
|
line-height: 80rpx;
|
|
color: #808080;
|
|
border: 2rpx solid #d1d1d1;
|
|
background-color: #efefef;
|
|
}
|
|
}
|
|
|
|
.justify-end {
|
|
position: relative;
|
|
|
|
.bottom-next {
|
|
position: absolute;
|
|
top: 100rpx;
|
|
}
|
|
}
|
|
|
|
.padding{
|
|
padding: 25rpx;
|
|
}
|
|
|
|
/deep/.uni-select{
|
|
border: 0px;
|
|
}
|
|
/deep/.uni-forms-item{
|
|
padding: 5rpx 0px;
|
|
margin: 0rpx 25rpx;
|
|
border-bottom: 2rpx solid #f4f4f4;
|
|
}
|
|
/deep/.uni-data-checklist .checklist-group{
|
|
height: 72rpx;
|
|
}
|
|
.uni-forms-item__label{
|
|
width: 160rpx !important;
|
|
}
|
|
</style>
|
|
|