123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209 |
- <template>
- <view class="invoice-form-wrapper">
- <image class="invoice-pic" :src="invoiceUrl" mode="widthFix"></image>
- <view class="invoice-form">
- <view class="form-item">
- <view class="form-title"><text class="asterisk">*</text>单位名称:</view>
- <input class="form-input" maxlength="30" v-model="invoiceData.companyName" name="input" placeholder="请输入单位名称..." placeholder-class="placeholder"/>
- </view>
- <view class="form-item">
- <view class="form-title"><text class="asterisk">*</text>纳税人识别号:</view>
- <input class="form-input" v-model="invoiceData.taxId" name="input" placeholder="请输入纳税人识别号..." placeholder-class="placeholder"/>
- </view>
- <view class="form-item">
- <view class="form-title"><text class="asterisk">*</text>开户银行:</view>
- <input class="form-input" v-model="invoiceData.bankName" name="input" placeholder="请输入开户银行..." placeholder-class="placeholder"/>
- </view>
- <view class="form-item">
- <view class="form-title"><text class="asterisk">*</text>银行账号:</view>
- <input class="form-input" maxlength="23" v-model="invoiceData.bankNum" @input="inputBankNum(invoiceData.bankNum)" name="input" placeholder="请输入银行账号..." placeholder-class="placeholder"/>
- </view>
- <view class="form-item">
- <view class="form-title"><text class="asterisk">*</text>注册电话:</view>
- <input class="form-input" maxlength="11" v-model="invoiceData.phoneNum" name="input" placeholder="请输入注册电话..." placeholder-class="placeholder"/>
- </view>
- <view class="form-item">
- <view class="form-title"><text class="asterisk">*</text>注册地址:</view>
- <textarea :class="{iostextarea: isIos}" cols="20" rows="4" class="form-input form-textarea" v-model="invoiceData.address" name="input" placeholder="请输入注册地址..." placeholder-class="placeholder"/>
- </view>
- </view>
- <view class="submit-btn" @click="submitNow">确认</view>
- </view>
- </template>
- <script>
- import { querySaveInvoice, queryInvoice } from "@/api/other.js"
- export default {
- data() {
- return {
- userId: '',
- invoiceUrl: 'https://img.caimei365.com/group1/M00/03/81/Cmis214BwaCAPYJ3AAYlpcwPaVo973.png',
- invoiceData:{
- companyName:'',
- taxId:'',
- bankName: '',
- bankNum:'',
- address:'',
- phoneNum: ''
- },
- isIos: false
- }
- },
- onLoad() {
- this.$api.getStorage().then((resolve) =>{
- this.userId = resolve.userID
- this.getInvoiceInfo()
- let phone = wx.getSystemInfoSync() //调用方法获取机型
- if (phone.platform == 'ios') {
- this.isIos = true
- } else if (phone.platform == 'android') {
- this.isIos = false
- }
- })
- },
- methods: {
- inputBankNum(val) {
- if (/\S{5}/.test(val)) {
- this.invoiceData.bankNum = val.replace(/\s/g, '').replace(/(.{4})/g, "$1 ");
- }
- },
- showMsg(text) {
- this.$util.msg(text,1000);
- },
- checkTaxId(taxId) {
- var regArr = [/^[\da-z]{10,15}$/i, /^\d{6}[\da-z]{10,12}$/i, /^[a-z]\d{6}[\da-z]{9,11}$/i, /^[a-z]{2}\d{6}[\da-z]{8,10}$/i, /^\d{14}[\dx][\da-z]{4,5}$/i, /^\d{17}[\dx][\da-z]{1,2}$/i, /^[a-z]\d{14}[\dx][\da-z]{3,4}$/i, /^[a-z]\d{17}[\dx][\da-z]{0,1}$/i, /^[\d]{6}[\da-z]{13,14}$/i],
- i, j = regArr.length;
- for (let i = 0; i < j; i++) {
- if (regArr[i].test(taxId)) {
- return true;
- }
- }
- //纳税人识别号格式错误
- return false;
- },
- submitNow() {
- let {companyName,taxId,
- bankName,bankNum,phoneNum,address} = this.invoiceData,
- commonRegex = this.$api.regexSets();
- if(companyName.trim() == '') {
- this.showMsg('请填写单位名称');
- return false;
- }
- if(!commonRegex.companyName.test(companyName.trim())) {
- this.showMsg('单位名称格式不正确');
- return false;
- }
- if(taxId.trim() == '') {
- this.showMsg('请填写纳税人识别号');
- return false;
- }
- if(!this.checkTaxId(taxId)) {
- this.showMsg('纳税人识别号格式不正确');
- return false;
- }
- if(bankName.trim() == '') {
- this.showMsg('请填写开户银行');
- return false;
- }
- if(!commonRegex.invalidChar.test(bankName)) {
- this.showMsg('开户银行格式不正确');
- return false;
- }
- if(bankNum.trim() == '') {
- this.showMsg('请填写银行账号');
- return false;
- }
- if(!commonRegex.bankNum.test(bankNum.replace(/\s*/g,""))) {
- this.showMsg('银行账号格式不正确');
- return false;
- }
- if(phoneNum.trim() == '') {
- this.showMsg('请填写注册电话');
- return false;
- }
- if(!commonRegex.phoneAndTelephone.test(phoneNum)) {
- this.showMsg('注册电话格式不正确');
- return false;
- }
- if(address.trim() == '') {
- this.showMsg('请填写注册地址');
- return false;
- }
- this.saveInvoiceInfo();
- },
- getInvoiceInfo(){
- this.$api.getStorage().then((resolve) =>{
- queryInvoice({userId:resolve.userID}).then(response =>{
- let resData = response.data
- this.invoiceData.companyName = resData.invoiceTitle;
- this.invoiceData.taxId = resData.corporationTaxNum;
- this.invoiceData.bankName = resData.openBank;
- this.invoiceData.phoneNum = resData.registeredPhone;
- this.invoiceData.address = resData.registeredAddress;
- this.inputBankNum(resData.bankAccountNo);
- }).catch(response =>{
- this.$util.msg(response.msg,2000);
- })
- })
- },
- saveInvoiceInfo() {
- let invoiceData = this.invoiceData
- const {companyName:invoiceTitle, taxId:corporationTaxNum, bankName: openBank,
- bankNum: bankAccountNo, phoneNum:registeredPhone, address:registeredAddress} = invoiceData;
- let params = {userId: this.userId, invoiceTitle, corporationTaxNum, openBank,
- bankAccountNo: bankAccountNo.replace(/\s*/g,""), registeredPhone, registeredAddress};
- querySaveInvoice(params).then(response =>{
- this.$util.msg('保存成功',2000);
- setTimeout(()=>{
- uni.navigateBack({
- delta: 1
- })
- },1100)
- }).catch(response =>{
- this.$util.msg(response.msg,2000);
- })
- }
- }
- }
- </script>
- <style lang="scss">
- page {
- .invoice-form-wrapper {
- display: flex;
- flex-direction: column;
- }
- .invoice-pic {
- width: 100%;
- }
- .form-item {
- align-items: flex-start;
- }
- .form-item:first-child {
- margin-top: 0rpx;
- }
- .invoice-form {
- background: #fff;
- padding: 50rpx 48rpx 38rpx 50rpx;
- }
- .form-input {
- height: 45rpx;
- line-height: 45rpx;
- flex-grow: 1;
- }
- .form-title {
- height: 45rpx;
- line-height: 45rpx;
- white-space: nowrap;
- }
- .form-textarea {
- width: 100%;
- height: 130rpx;
- }
- .place-holder {
- color: #999;
- }
- .iostextarea {
- margin-top: -10rpx;
- }
- }
- </style>
|