|
|
<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> |
