|
|
<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="抬头类型" borderBottom ref="item1">
|
|
|
</u-form-item>
|
|
|
<view class="action">
|
|
|
<radio-group @change="onChange">
|
|
|
<label class="label-box" v-for="(item, index) in list" :key="index">
|
|
|
<radio 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.invoiceTitle" borderBottom ref="item1">
|
|
|
<u--input v-model="model1.userInfo.invoiceTitle" border="none" inputAlign='right'
|
|
|
placeholder="请填写发票抬头"></u--input>
|
|
|
</u-form-item>
|
|
|
</view>
|
|
|
<view v-if="checked==1">
|
|
|
<view class="line">
|
|
|
<u-form-item :required="true" label="税号" prop="userInfo.dutyNumber" borderBottom ref="item1">
|
|
|
<u--input v-model="model1.userInfo.dutyNumber" border="none" inputAlign='right'
|
|
|
placeholder="请填写纳税人识别号"></u--input>
|
|
|
</u-form-item>
|
|
|
</view>
|
|
|
<view class="line">
|
|
|
<u-form-item label="注册地址" prop="userInfo.registeredAddress" borderBottom ref="item1">
|
|
|
<u--input v-model="model1.userInfo.registeredAddress" border="none" inputAlign='right'
|
|
|
placeholder="请填写公司注册地址"></u--input>
|
|
|
</u-form-item>
|
|
|
</view>
|
|
|
<view class="line">
|
|
|
<u-form-item label="公司开户行" prop="userInfo.bankOfDeposit" borderBottom ref="item1">
|
|
|
<u--input v-model="model1.userInfo.bankOfDeposit" border="none" inputAlign='right'
|
|
|
placeholder="请填写银行名称"> </u--input>
|
|
|
</u-form-item>
|
|
|
</view>
|
|
|
<view class="line">
|
|
|
<u-form-item label="开户行账户" prop="userInfo.openBankAccount" borderBottom ref="item1">
|
|
|
<u--input v-model="model1.userInfo.openBankAccount" border="none" inputAlign='right'
|
|
|
placeholder="请填写银行账号"></u--input>
|
|
|
</u-form-item>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u--form>
|
|
|
</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>
|
|
|
<view class="from-box amount">
|
|
|
<view class="">设置为默认抬头</view>
|
|
|
<view class="">
|
|
|
<u-switch v-model="switchValue" @change="switchVhange"></u-switch>
|
|
|
</view>
|
|
|
</view> -->
|
|
|
<!-- position bottom -->
|
|
|
<view class="footer-box">
|
|
|
<view>
|
|
|
<u-button color="#4C91FF" shape='circle' @click="saveEvent">保存</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 switchValue = ref(false)
|
|
|
const list = reactive([{
|
|
|
name: 1,
|
|
|
label: '企业单位',
|
|
|
},
|
|
|
{
|
|
|
name: 2,
|
|
|
label: '个人/非企业',
|
|
|
}
|
|
|
])
|
|
|
const checked = ref('1')
|
|
|
const isChecked = ref(0)
|
|
|
const formRole = ref(null);
|
|
|
const formAddress = ref(null);
|
|
|
const model1 = reactive({
|
|
|
userInfo: {
|
|
|
invoiceTitle: '',
|
|
|
dutyNumber: '',
|
|
|
registeredAddress: '',
|
|
|
bankOfDeposit: '',
|
|
|
openBankAccount: '',
|
|
|
}
|
|
|
})
|
|
|
const model2 = reactive({
|
|
|
userInfo2: {
|
|
|
address: '',
|
|
|
phone: '',
|
|
|
contacts: '',
|
|
|
}
|
|
|
})
|
|
|
const email = ref()
|
|
|
const isDefault = ref(0)
|
|
|
const updataId = ref()
|
|
|
const saveTaxid = ref('')
|
|
|
// 校验
|
|
|
const rules = ref({
|
|
|
'userInfo.invoiceTitle': {
|
|
|
required: true,
|
|
|
message: '请填写发票抬头',
|
|
|
trigger: ['blur', 'change']
|
|
|
},
|
|
|
'userInfo.dutyNumber': {
|
|
|
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']
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//
|
|
|
onLoad((option) => {
|
|
|
// console.log(option, 'option');
|
|
|
// if (option.detail) {
|
|
|
// let detail = JSON.parse(option.detail)
|
|
|
// model1.userInfo.invoiceHeader = detail.invoiceHeader
|
|
|
// model1.userInfo.taxId = detail.taxId
|
|
|
// model1.userInfo.address = detail.address
|
|
|
// model1.userInfo.bank = detail.bank
|
|
|
// model1.userInfo.cardNo = detail.cardNo
|
|
|
// model2.userInfo2.address = detail.shippingAddress
|
|
|
// model2.userInfo2.phone = detail.contactPhone
|
|
|
// model2.userInfo2.contacts = detail.recipient
|
|
|
// email.value = detail.email
|
|
|
// if (detail.type === 1) {
|
|
|
// isChecked.value = 0
|
|
|
// checked.value = 1
|
|
|
// } else {
|
|
|
// isChecked.value = 1
|
|
|
// checked.value = 2
|
|
|
// }
|
|
|
// if (detail.isDefault === 1) {
|
|
|
// switchValue.value = true
|
|
|
// } else {
|
|
|
// switchValue.value = false
|
|
|
// }
|
|
|
// updataId.value = detail.id
|
|
|
// console.log('JSON.parse(option.detail)', JSON.parse(option.detail));
|
|
|
// }
|
|
|
handle_start_access_token()
|
|
|
})
|
|
|
// 监听
|
|
|
watch(checked, (newVal, oldVal) => {
|
|
|
console.log(newVal, 'new');
|
|
|
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']
|
|
|
}
|
|
|
}
|
|
|
} else {
|
|
|
model1.userInfo.taxId = ''
|
|
|
rules.value = {
|
|
|
'userInfo.invoiceHeader': {
|
|
|
required: true,
|
|
|
message: '请填写发票抬头',
|
|
|
trigger: ['blur', 'change']
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
|
|
|
const handle_start_access_token = async () => {
|
|
|
uni.$request({
|
|
|
url: "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx7b910c0c240c2676&secret=APPSECRET",
|
|
|
method: 'GET'
|
|
|
}).then(res => {
|
|
|
console.log(res, '===发票步骤1====?');
|
|
|
})
|
|
|
}
|
|
|
|
|
|
|
|
|
// 方法
|
|
|
const onChange = (e) => {
|
|
|
console.log(e, 'onChange');
|
|
|
if (model1.userInfo.taxId) {
|
|
|
saveTaxid.value = model1.userInfo.taxId
|
|
|
}
|
|
|
checked.value = e.detail.value
|
|
|
if (checked.value == 1) {
|
|
|
model1.userInfo.taxId = saveTaxid.value
|
|
|
}
|
|
|
}
|
|
|
const switchVhange = (e) => {
|
|
|
if (e) {
|
|
|
isDefault.value = 1
|
|
|
} else {
|
|
|
isDefault.value = 0
|
|
|
}
|
|
|
console.log('==isDefault===', isDefault.value);
|
|
|
}
|
|
|
const saveEvent = () => {
|
|
|
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) => {
|
|
|
Promise.all([p1]).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 = {
|
|
|
orderNo: 12,
|
|
|
invoiceStatus: 0,
|
|
|
type: checked.value,
|
|
|
orderType: 1,
|
|
|
// 1
|
|
|
invoiceTitle: model1.userInfo.invoiceTitle,
|
|
|
dutyNumber: model1.userInfo.dutyNumber,
|
|
|
registeredAddress: model1.userInfo.registeredAddress,
|
|
|
bankOfDeposit: model1.userInfo.bankOfDeposit,
|
|
|
openBankAccount: model1.userInfo.openBankAccount,
|
|
|
|
|
|
}
|
|
|
// uni.$u.toast('校验通过')
|
|
|
uni.$request({
|
|
|
url: config.baseUrl + "app-api/cloud/invoice/create",
|
|
|
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)
|
|
|
})
|
|
|
}
|
|
|
</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/.u-switch,
|
|
|
/deep/.u-switch__bg {
|
|
|
width: 100rpx !important;
|
|
|
height: 52rpx !important;
|
|
|
}
|
|
|
|
|
|
/deep/.u-switch__node {
|
|
|
width: 44rpx !important;
|
|
|
height: 44rpx !important;
|
|
|
}
|
|
|
|
|
|
/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;
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="less">
|
|
|
page {
|
|
|
background-color: #F2F6F7;
|
|
|
padding-bottom: 120rpx;
|
|
|
}
|
|
|
</style> |
