387 lines
9.4 KiB
Vue
387 lines
9.4 KiB
Vue
|
<template>
|
|||
|
|
<s-layout title="发票申请" class="set-userinfo-wrap">
|
|||
|
|
<!-- <view class="invoiceTitle">发票列表</view> -->
|
|||
|
|
<view class="invoiceHeader">
|
|||
|
|
<uni-forms ref="baseForm" label-width="200" :modelValue="state.baseFormData" :rules="rules">
|
|||
|
|
<!-- <uni-forms-item label="发票类型" required name="type">
|
|||
|
|
<uni-data-checkbox selectedColor="#7D9337" @change="headChange" v-model="state.baseFormData.type"
|
|||
|
|
:localdata="state.sexs" />
|
|||
|
|
</uni-forms-item> -->
|
|||
|
|
<uni-forms-item label="发票金额" required name="orderMoney">
|
|||
|
|
<uni-easyinput :clearable="false" readonly class="right-input"
|
|||
|
|
v-model="state.baseFormData.orderMoney" inputBorder="false" placeholder="请输入发票金额" />
|
|||
|
|
</uni-forms-item>
|
|||
|
|
<!-- <uni-forms-item label="开票方式" required name="way">
|
|||
|
|
<uni-data-checkbox selectedColor="#7D9337" @change="headChange" v-model="state.baseFormData.way"
|
|||
|
|
:localdata="state.ways" />
|
|||
|
|
</uni-forms-item> -->
|
|||
|
|
<uni-forms-item label="发票抬头" required name="headId">
|
|||
|
|
<!-- <uni-easyinput :clearable="false" class="right-input" v-model="state.baseFormData.taxNumber"
|
|||
|
|
placeholder="请输入发票抬头(必填)" /> -->
|
|||
|
|
|
|||
|
|
<!-- Picker 组件 -->
|
|||
|
|
<picker
|
|||
|
|
mode="selector"
|
|||
|
|
:range="state.options"
|
|||
|
|
:value="selectedIndex"
|
|||
|
|
@change="handlePickerChange"
|
|||
|
|
class="picker"
|
|||
|
|
>
|
|||
|
|
<view class="picker-text">
|
|||
|
|
{{ state.options[selectedIndex] }}
|
|||
|
|
</view>
|
|||
|
|
</picker>
|
|||
|
|
<!-- 单级选择器 -->
|
|||
|
|
</uni-forms-item>
|
|||
|
|
<!-- <uni-forms-item label="手机号" name="companyTel">
|
|||
|
|
<uni-easyinput :clearable="false" class="right-input" v-model="state.baseFormData.companyTel"
|
|||
|
|
placeholder="请输入手机号" />
|
|||
|
|
</uni-forms-item> -->
|
|||
|
|
<!-- <uni-forms-item label="详细地址" name="companyAddress">
|
|||
|
|
<uni-easyinput :clearable="false" class="right-input" v-model="state.baseFormData.companyAddress"
|
|||
|
|
placeholder="请输入详细地址" />
|
|||
|
|
</uni-forms-item> -->
|
|||
|
|
|
|||
|
|
<!-- <uni-forms-item label="邮箱(非必填)" name="email">
|
|||
|
|
<uni-easyinput :clearable="false" class="right-input" v-model="state.baseFormData.email"
|
|||
|
|
placeholder="请输入邮箱" />
|
|||
|
|
</uni-forms-item> -->
|
|||
|
|
<!-- <uni-forms-item label="公司开户行">
|
|||
|
|
<uni-easyinput v-model="state.baseFormData.name" placeholder="请输入公司开户行" />
|
|||
|
|
</uni-forms-item>
|
|||
|
|
<uni-forms-item label="开户行账号">
|
|||
|
|
<uni-easyinput v-model="state.baseFormData.name" placeholder="请输入开户行账号" />
|
|||
|
|
</uni-forms-item>
|
|||
|
|
<uni-forms-item label="开户行账号">
|
|||
|
|
<uni-easyinput v-model="state.baseFormData.name" placeholder="请输入开户行账号" />
|
|||
|
|
</uni-forms-item> -->
|
|||
|
|
|
|||
|
|
<!-- <view class="agreement-box ss-flex ss-row-left">
|
|||
|
|
<label class="radio ss-flex ss-col-center" @tap="onChange">
|
|||
|
|
<radio :checked="state.baseFormData.isDefault" color="var(--ui-BG-Main)"
|
|||
|
|
style="transform: scale(0.8)" @tap.stop="onChange" />
|
|||
|
|
<view class="agreement-text ss-flex ss-col-center ss-m-l-8">
|
|||
|
|
设置为默认抬头
|
|||
|
|
</view>
|
|||
|
|
</label>
|
|||
|
|
</view> -->
|
|||
|
|
|
|||
|
|
</uni-forms>
|
|||
|
|
</view>
|
|||
|
|
<view class="prompt_box">
|
|||
|
|
<view>温馨提示：</view>
|
|||
|
|
<view>1、应国家税务总局要求，您若开具增值税普通发票，须同时提供企业抬头及纳税人识别号，否则发票将无法用于企业报销;</view>
|
|||
|
|
<view>2，发票将由订单所属城市的公司为您开具;</view>
|
|||
|
|
<view>3、配合国家税务总局推进全面数字化的电子发票，部分城市已转为全电发票，发票处理时长为1-3个工作日，请耐心等待。</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="addInvoiceBtn" @tap.stop="addInvoice">提交申请</view>
|
|||
|
|
<!-- <view class="cancelInvoiceBtn" @tap.stop="onClickBack">取消</view> -->
|
|||
|
|
</s-layout>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import InvoiceApi from '@/sheep/api/trade/invoices';
|
|||
|
|
import {
|
|||
|
|
onMounted,
|
|||
|
|
reactive,
|
|||
|
|
ref,
|
|||
|
|
unref,
|
|||
|
|
computed
|
|||
|
|
} from 'vue';
|
|||
|
|
import {
|
|||
|
|
fen2yuan,
|
|||
|
|
formatGoodsSwiper,
|
|||
|
|
useDurationTime
|
|||
|
|
} from '@/sheep/hooks/useGoods';
|
|||
|
|
import {
|
|||
|
|
onLoad
|
|||
|
|
} from '@dcloudio/uni-app';
|
|||
|
|
import sheep from '@/sheep';
|
|||
|
|
const state = reactive({
|
|||
|
|
invoList: [],
|
|||
|
|
sexs: [{
|
|||
|
|
text: '电子发票',
|
|||
|
|
value: false
|
|||
|
|
}, {
|
|||
|
|
text: '实体发票',
|
|||
|
|
value: true
|
|||
|
|
}],
|
|||
|
|
ways: [{
|
|||
|
|
text: "商品类别",
|
|||
|
|
value: 0
|
|||
|
|
}, {
|
|||
|
|
text: "商品明细",
|
|||
|
|
value: 1
|
|||
|
|
}],
|
|||
|
|
options:[],
|
|||
|
|
headList:[],
|
|||
|
|
baseFormData: {
|
|||
|
|
orderMoney: '',
|
|||
|
|
headId: '',
|
|||
|
|
companyTel: '',
|
|||
|
|
companyAddress: '',
|
|||
|
|
email: '',
|
|||
|
|
bizId: '',
|
|||
|
|
status: 0,
|
|||
|
|
userId: ''
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 当前选中的索引
|
|||
|
|
let selectedIndex = ref(0);
|
|||
|
|
|
|||
|
|
// 根据索引获取当前选中的值
|
|||
|
|
let selectedValue = ref(state.options[selectedIndex.value]);
|
|||
|
|
|
|||
|
|
// 处理选择改变事件
|
|||
|
|
const handlePickerChange = (e) => {
|
|||
|
|
const index = e.detail.value; // 获取用户选择的索引
|
|||
|
|
selectedIndex.value = index;
|
|||
|
|
selectedValue.value = state.options[index]; // 更新显示的值
|
|||
|
|
console.log(index)
|
|||
|
|
state.baseFormData.headId = state.headList[index].id
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getInvoiceheadlist =async ()=>{
|
|||
|
|
const {data} = await InvoiceApi.getInvoicesHeadList()
|
|||
|
|
if(!data || data.length === 0){
|
|||
|
|
sheep.$helper.toast("请先增加发票抬头");
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
state.headList = data
|
|||
|
|
state.baseFormData.headId = data[0].id
|
|||
|
|
|
|||
|
|
console.log(data)
|
|||
|
|
const names = data.map(item => item.name);
|
|||
|
|
state.options = names
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const rules = {
|
|||
|
|
|
|||
|
|
orderMoney: {
|
|||
|
|
rules: [{
|
|||
|
|
required: true,
|
|||
|
|
errorMessage: '请输入发票金额',
|
|||
|
|
}, ],
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
const baseForm = ref(null);
|
|||
|
|
const userInfo = computed(() => sheep.$store('user').userInfo);
|
|||
|
|
onLoad((options) => {
|
|||
|
|
getInvoiceheadlist()
|
|||
|
|
console.log("路由参数：", options)
|
|||
|
|
state.baseFormData.orderMoney = fen2yuan(options.count)
|
|||
|
|
state.baseFormData.bizId = options.orderId
|
|||
|
|
|
|||
|
|
state.baseFormData.userId = userInfo.value.id
|
|||
|
|
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const hasHistory = sheep.$router.hasHistory();
|
|||
|
|
|
|||
|
|
function onClickBack() {
|
|||
|
|
if (hasHistory) {
|
|||
|
|
sheep.$router.back();
|
|||
|
|
} else {
|
|||
|
|
sheep.$router.go('/pages/index/index');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const headChange = (e) => {
|
|||
|
|
console.log("e", e)
|
|||
|
|
}
|
|||
|
|
const onChange = () => {
|
|||
|
|
|
|||
|
|
state.baseFormData.isDefault = !state.baseFormData.isDefault;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
const getInvoiceheaddetail = async (headid) => {
|
|||
|
|
const res = await InvoiceApi.getInvoicesheadDetail(headid)
|
|||
|
|
console.log("返回的数据", res);
|
|||
|
|
state.baseFormData = res.data
|
|||
|
|
}
|
|||
|
|
const addInvoice = async () => {
|
|||
|
|
// console.log("表单数据",state.baseFormData)
|
|||
|
|
// const validate = await unref(baseForm)
|
|||
|
|
// .validate()
|
|||
|
|
// .catch((error) => {
|
|||
|
|
// console.log('error: ', error);
|
|||
|
|
// });
|
|||
|
|
// console.log("validate", validate)
|
|||
|
|
// if (!validate) {
|
|||
|
|
// return;
|
|||
|
|
// }
|
|||
|
|
// if (validate) {
|
|||
|
|
addInvoicehead(state.baseFormData)
|
|||
|
|
|
|||
|
|
|
|||
|
|
// } else {
|
|||
|
|
// console.log('验证失败');
|
|||
|
|
// uni.showToast({
|
|||
|
|
// title: '请检查输入内容',
|
|||
|
|
// icon: 'none',
|
|||
|
|
// });
|
|||
|
|
// }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const addInvoicehead = async (data) => {
|
|||
|
|
const res = await InvoiceApi.createInvoicenew(data)
|
|||
|
|
console.log("返回数据", res)
|
|||
|
|
if (res.code === 0) {
|
|||
|
|
uni.hideToast();
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '提交成功',
|
|||
|
|
icon: 'success',
|
|||
|
|
});
|
|||
|
|
setTimeout(() => {
|
|||
|
|
onClickBack()
|
|||
|
|
}, 1000)
|
|||
|
|
} else {
|
|||
|
|
sheep.$helper.toast(res.msg);
|
|||
|
|
// uni.showToast({
|
|||
|
|
// title: res.msg,
|
|||
|
|
// icon: 'error',
|
|||
|
|
// });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
::v-deep .invoiceHeader {
|
|||
|
|
|
|||
|
|
|
|||
|
|
// margin: 20rpx 16rpx;
|
|||
|
|
background-color: white;
|
|||
|
|
.uni-forms-item__content{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
.picker-text{
|
|||
|
|
width: 300rpx;
|
|||
|
|
height:60rpx ;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
text-align: right;
|
|||
|
|
padding-right: 10px;
|
|||
|
|
}
|
|||
|
|
.uni-easyinput__content-input {
|
|||
|
|
direction: rtl;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.is-input-border {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-data-checklist .checklist-group {
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-forms-item {
|
|||
|
|
position: relative;
|
|||
|
|
margin-bottom: 6rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-forms-item::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 1rpx;
|
|||
|
|
/* 调整为你需要的边框厚度 */
|
|||
|
|
background-color: #ededed;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-forms-item__inner {
|
|||
|
|
padding-bottom: 10rpx !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agreement-text {
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tcp-text {
|
|||
|
|
color: #7D9337;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agreement-box {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-forms-item__label .label-text {
|
|||
|
|
font-size: 29rpx !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-input {
|
|||
|
|
direction: rtl;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.prompt_box{
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
.addInvoiceBtn {
|
|||
|
|
width: 90%;
|
|||
|
|
height: 80rpx;
|
|||
|
|
line-height: 80rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
border-radius: 100rpx;
|
|||
|
|
position: fixed;
|
|||
|
|
color: white;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
background-color: #7D9337;
|
|||
|
|
bottom: 65rpx;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cancelInvoiceBtn {
|
|||
|
|
width: 90%;
|
|||
|
|
height: 90rpx;
|
|||
|
|
line-height: 90rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
border-radius: 100rpx;
|
|||
|
|
position: fixed;
|
|||
|
|
color: white;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
background-color: #7D9337;
|
|||
|
|
bottom: 50rpx;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invoiceHeader {
|
|||
|
|
// padding: 10rpx 20rpx 0 10rpx;
|
|||
|
|
padding: 20rpx 20rpx 20rpx 30rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.invoList {
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: #F5F5F5;
|
|||
|
|
|
|||
|
|
.invoice_item {
|
|||
|
|
width: 95%;
|
|||
|
|
margin: 0 auto 20rpx;
|
|||
|
|
padding: 30rpx 20rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
background-color: white;
|
|||
|
|
|
|||
|
|
.invoice_no {
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|