542 lines
13 KiB

<template>
<view>
<!-- 开具发票 -->
<view class="from-box">
<u--form labelPosition="left" ref="formRole" :rules="rules" :model="model1">
<view class="line type-check">
<u-form-item :required="true" label="抬头类型">
</u-form-item>
<view class="action">
<radio-group @change="onChange">
<label class="label-box" v-for="(item, index) in list" :key="index">
<radio color="#4C91FF" class="blue radio" :value="item.name"
:checked="index == isChecked">
</radio>
<text class="label-name">{{item.label}}</text>
</label>
</radio-group>
</view>
</view>
<view class="line line-icon ">
<u-form-item :required="true" label="发票抬头" prop="userInfo.invoiceHeader" borderBottom ref="item1">
<u--input v-model="model1.userInfo.invoiceHeader" border="none" inputAlign='right'
placeholder="请填写发票抬头"></u--input>
<template #right>
<view class="goinvoiceTitle" @click="goinvoiceTitle">
<u-icon name="arrow-right"></u-icon>
</view>
</template>
</u-form-item>
</view>
<view v-if="checked==1">
<view class="line">
<u-form-item :required="true" label="税号" prop="userInfo.taxId" borderBottom ref="item1">
<u--input v-model="model1.userInfo.taxId" border="none" inputAlign='right'
placeholder="请填写纳税人识别号"></u--input>
</u-form-item>
</view>
<view class="line">
<u-form-item label="注册地址" prop="userInfo.address" borderBottom ref="item1">
<u--input v-model="model1.userInfo.address" border="none" inputAlign='right'
placeholder="请填写公司注册地址"></u--input>
</u-form-item>
</view>
<view class="line">
<u-form-item label="公司开户行" prop="userInfo.bank" borderBottom ref="item1">
<u--input v-model="model1.userInfo.bank" border="none" inputAlign='right'
placeholder="请填写银行名称"> </u--input>
</u-form-item>
</view>
<view class="line">
<u-form-item label="开户行账户" prop="userInfo.cardNo" borderBottom ref="item1">
<u--input v-model="model1.userInfo.cardNo" border="none" inputAlign='right'
placeholder="请填写银行账号"></u--input>
</u-form-item>
</view>
</view>
</u--form>
</view>
<view class="from-box amount">
<view class="">总金额</view>
<view class="price">{{money}}</view>
</view>
<!-- 邮寄信息 -->
<view class="content-title">
<view class="content-name">
<view class="orders-line"></view>
<view>邮寄信息</view>
</view>
</view>
<view class="from-box">
<u--form labelPosition="left" ref="formAddress" :rules="rules2" :model="model2">
<view class="line">
<u-form-item :required="true" label="邮寄地址" prop="userInfo2.address" borderBottom ref="item1">
<u--input v-model="model2.userInfo2.address" border="none" inputAlign='right'
placeholder="请填写您的发票邮寄地址"></u--input>
</u-form-item>
</view>
<view class="line">
<u-form-item :required="true" label="邮寄联系人" prop="userInfo2.contacts" borderBottom ref="item1">
<u--input v-model="model2.userInfo2.contacts" border="none" inputAlign='right'
placeholder="请填写您的联系人姓名"></u--input>
</u-form-item>
</view>
<view class="">
<u-form-item :required="true" label="联系人电话" prop="userInfo2.phone" borderBottom ref="item1">
<u--input v-model="model2.userInfo2.phone" border="none" inputAlign='right'
placeholder="请填写您的联系人电话"></u--input>
</u-form-item>
</view>
</u--form>
</view>
<view class="from-box amount">
<view class="">电子邮箱</view>
<view class="">
<u--input v-model="email" border="none" inputAlign='right' placeholder="请填写您的邮箱账号"></u--input>
</view>
</view>
<!-- position bottom -->
<view class="footer-box">
<view>
<u-button color="#4C91FF" shape='circle' @click="submit"></u-button>
</view>
</view>
</view>
</template>
<script setup>
import config from '@/common/config/config.js';
import {
reactive,
ref,
watch
} from "vue";
import {
onLoad,
onShow,
onReachBottom
} from "@dcloudio/uni-app";
const model1 = reactive({
userInfo: {
invoiceHeader: '',
taxId: '',
address: '',
bank: '',
cardNo: '',
}
})
const model2 = reactive({
userInfo2: {
address: '',
phone: '',
contacts: '',
}
})
const email = ref()
const money = ref(0)
const list = reactive([{
name: 1,
label: '企业单位',
},
{
name: 2,
label: '个人/非企业',
}
])
const checked = ref('1')
const isChecked = ref(0)
const saveInf = ref()
const formRole = ref(null);
const formAddress = ref(null);
// 校验
const rules = ref({
'userInfo.invoiceHeader': {
required: true,
message: '请填写发票抬头',
trigger: ['blur', 'change']
},
'userInfo.taxId': {
required: true,
pattern: /^[0-9a-zA-Z]*$/g,
transform(value) {
return String(value);
},
message: '只能包含字母或数字',
trigger: ['blur', 'change']
}
})
const rules2 = {
'userInfo2.address': {
required: true,
message: '请填写发票邮寄地址',
trigger: ['blur', 'change']
},
'userInfo2.contacts': {
required: true,
message: '请填写联系人姓名',
trigger: ['blur', 'change']
},
'userInfo2.phone': {
validator: (rule, value, callback) => {
// 上面有说返回true表示校验通过返回false表示不通过
// uni.$u.test.mobile()就是返回true或者false的
return uni.$u.test.mobile(value);
},
required: true,
message: '联系电话格式不正确',
trigger: ['blur', 'change']
}
}
const upList = ref()
const orderTypeVal = ref(0)
const saveTaxid=ref('')
//
onLoad((option) => {
money.value = option.price
upList.value = JSON.parse(option.list)
if (option.orderType == 1) {
orderTypeVal.value = option.orderType
}
console.log(option.price, option.list, '--------', orderTypeVal.value);
uni.$request({
url: config.wxUrl_pay + "pay/invoice/selectDefault",
}).then(res => {
// uni.$u.toast(res.data.msg)
if (res.data.data) {
model1.userInfo.invoiceHeader = res.data.data.invoiceHeader
model1.userInfo.taxId = res.data.data.taxId
model1.userInfo.address = res.data.data.address
model1.userInfo.bank = res.data.data.bank
model1.userInfo.cardNo = res.data.data.cardNo
model2.userInfo2.address = res.data.data.shippingAddress
model2.userInfo2.phone = res.data.data.contactPhone
model2.userInfo2.contacts = res.data.data.recipient
email.value = res.data.data.email
if (res.data.data.type == 1) {
isChecked.value = 0
checked.value = 1
} else {
isChecked.value = 1
checked.value = 2
}
}
console.log(res, '默认地址');
})
})
onShow((e) => {
console.log('onshow');
if (e) {
saveInf.value = e
console.log(e, 'asdzxc', saveInf.value);
model1.userInfo.invoiceHeader = saveInf.value.invoiceHeader
model1.userInfo.taxId = saveInf.value.taxId
model1.userInfo.address = saveInf.value.address
model1.userInfo.bank = saveInf.value.bank
model1.userInfo.cardNo = saveInf.value.cardNo
model2.userInfo2.address = saveInf.value.shippingAddress
model2.userInfo2.phone = saveInf.value.contactPhone
model2.userInfo2.contacts = saveInf.value.recipient
email.value = saveInf.value.email
if (saveInf.value.type == 1) {
isChecked.value = 0
checked.value = 1
} else {
isChecked.value = 1
checked.value = 2
console.log('go',isChecked.value,checked.value);
}
console.log('go2',isChecked.value,checked.value);
}
})
// 监听
watch(checked, (newVal, oldVal) => {
if (newVal == 1) {
rules.value = {
'userInfo.invoiceHeader': {
required: true,
message: '请填写发票抬头',
trigger: ['blur', 'change']
},
'userInfo.taxId': {
required: true,
pattern: /^[0-9a-zA-Z]*$/g,
// 正则检验前先将值转为字符串
transform(value) {
return String(value);
},
message: '只能包含字母或数字',
trigger: ['blur', 'change']
}
}
console.log(rules.value,'11111');
} else {
model1.userInfo.taxId = ''
rules.value = {
'userInfo.invoiceHeader': {
required: true,
message: '请填写发票抬头',
trigger: ['blur', 'change']
}
}
console.log(rules.value,'2222');
}
})
//
const submit = () => {
let p1 = new Promise((resolve, reject) => {
formRole.value.validate().then(res => {
resolve()
}).catch(err => {
console.log(err, '校验失败1');
})
})
let p2 = new Promise((resolve, reject) => {
formAddress.value.validate().then(res => {
resolve()
}).catch(err => {
console.log(err, '校验失败2');
})
})
Promise.all([p1, p2]).then((result) => {
console.log('xxxxxxxxx', model1.userInfo.invoiceHeader);
if(checked.value==2){
model1.userInfo.taxId=''
model1.userInfo.address=''
model1.userInfo.bank=''
model1.userInfo.cardNo=''
}
let data = {
type: checked.value,
email: email.value,
invoiceMethod: 1, //开票方式1电子2邮寄
invoiceAmount: money.value,
orderType: orderTypeVal.value,
orderNoList: upList.value,
// 1
invoiceHeader: model1.userInfo.invoiceHeader,
taxId: model1.userInfo.taxId,
address: model1.userInfo.address,
bank: model1.userInfo.bank,
cardNo: model1.userInfo.cardNo,
// 2
shippingAddress: model2.userInfo2.address,
contactPhone: model2.userInfo2.phone,
recipient: model2.userInfo2.contacts,
}
// uni.$u.toast('校验通过')
uni.$request({
url: config.wxUrl_pay + "pay/invoice/add",
method: 'POST',
data: data,
}).then(res => {
uni.$u.toast(res.data.msg)
setTimeout(function() {
uni.navigateBack({
delta: 1,
});
}, 500)
console.log(res.data.msg, '=======?');
})
}).catch((error) => {
console.log(error)
})
}
const onChange = (e) => {
console.log(e, 'onChange',isChecked.value);
if(model1.userInfo.taxId){
saveTaxid.value=model1.userInfo.taxId
}
// checked.value = e.detail.value
if (e.detail.value == 1) {
isChecked.value = 0
checked.value = 1
} else {
isChecked.value = 1
checked.value = 2
}
if(checked.value==1){
model1.userInfo.taxId=saveTaxid.value
}
}
const goinvoiceTitle = () => {
uni.navigateTo({
url: '../invoiceTitle/invoiceTitle'
})
}
</script>
<style lang="less" scoped>
.from-box {
background: #fff;
margin-top: 16rpx;
padding: 0 32rpx;
}
.price {
color: #4C91FF;
font-size: 28rpx;
font-weight: 400;
text-align: right;
}
.line {
border-bottom: 1px solid #eee;
}
/deep/.u-form-item__body {
padding: 24rpx 0 !important;
}
/deep/.u-form-item__body__left {
width: 250rpx !important;
}
/deep/.u-form-item__body__left__content__label {
color: #585858 !important;
font-size: 28rpx !important;
font-weight: 400 !important;
text-align: left !important;
}
/deep/.u-form-item__body__right {
// width: 50% !important;
}
/deep/.u-line:last-child {
border: 0 !important;
}
.type-check {
display: flex;
justify-content: space-between;
/deep/.u-radio-group {
justify-content: flex-end !important;
align-content: center !important;
}
/deep/.u-radio {
margin-left: 32rpx;
}
}
.amount {
display: flex;
padding: 24rpx 32rpx;
justify-content: space-between;
align-items: center;
color: #585858;
font-size: 28rpx;
font-weight: 400;
text-align: left;
}
/deep/.u-input__content__field-wrapper__field {
height: 40rpx !important;
line-height: 40rpx !important;
}
.content-title {
display: flex;
justify-content: space-between;
margin: 24rpx 32rpx 16rpx 32rpx;
}
.content-name {
font-size: 32rpx;
font-weight: 400;
text-align: left;
color: #171717;
display: flex;
align-items: center;
}
.orders-line {
width: 4rpx;
height: 28rpx;
margin-right: 8rpx;
border-left: 4rpx solid #4C91FF;
border-radius: 4rpx;
}
.footer-box {
width: 100%;
position: fixed;
bottom: 0;
padding: 16rpx 32rpx;
background-color: #fff;
border-top: 1px solid #eee;
/deep/.u-button {
height: 72rpx !important;
}
}
/deep/.u-input--square {
background-color: #fff !important;
}
.line-icon {
/deep/.u-icon__icon {
color: #808080 !important;
margin-left: 8rpx;
}
}
.line:last-child {
border: 0;
}
/deep/radio.radio[checked]::after,
/deep/ radio.radio .uni-radio-input-checked::after {
width: 12px !important;
height: 12px !important;
border-top-left-radius: 110px;
border-top-right-radius: 110px;
border-bottom-right-radius: 110px;
border-bottom-left-radius: 110px;
border-top-width: 5px !important;
border-right-width: 5px !important;
border-bottom-width: 5px !important;
border-left-width: 5px !important;
background-color: #4C91FF;
}
.action {
display: flex;
align-items: center;
}
.label-box {
margin-left: 32rpx;
}
.label-name {
margin-left: 8rpx;
font-size: 28rpx;
}
.type-check {
/deep/.u-form-item__body__left {
width: 150rpx !important;
}
}
/deep/.u-form-item__body__right__message {
text-align: right !important;
}
.goinvoiceTitle{
// background: #4C91FF;
}
</style>
<style lang="less">
page {
background-color: #F2F6F7;
padding-bottom: 120rpx;
}
</style>