<template> <h-view id="np-invoice"> <h-header :proportion="[5,1,1]" class="bar-custom"> <div slot="left" class="h-header-btn" @click="$routeGo()"> <img src="@/assets/userBind/arrow.png" > <span>开票信息</span> </div> </h-header> <h-content> <list-item :item-height="44"> <item :showArrow="true"> <div slot="name">纳税人类型</div> <input slot="content" v-model="invoiceInfo.taxpayer_type_n" type="text" readonly placeholder="请选择" onfocus="this.blur()" @click="selectTaxpayer" > </item> <item :showArrow="true"> <div slot="name">发票类型</div> <input slot="content" v-model="invoiceInfo.invoice_kind_n" type="text" readonly placeholder="请选择" onfocus="this.blur()" @click="selectInvoiceType" > </item> <item> <div slot="name">发票抬头</div> <input slot="content" v-model="invoiceInfo.invoice_title" type="text" placeholder="请输入发票抬头" > </item> <item> <div slot="name">发票地址</div> <textarea slot="content" ref="myTestarea" v-model="invoiceInfo.invoice_adds" cols="22" rows="1" type="text" placeholder="请输入发票地址" @input="addRows(invoiceInfo.invoice_adds)" /> </item> <item> <div slot="name">开户电话</div> <input slot="content" v-model="invoiceInfo.invoice_tel" type="text" placeholder="请输入开户电话" > </item> <item> <div slot="name">发票开户行</div> <textarea slot="content" ref="myTestareaLive" v-model="invoiceInfo.open_bank" cols="22" rows="1" type="text" placeholder="请输入发票开户行及账号" @input="addRowsLive(invoiceInfo.open_bank)" /> </item> <item> <div slot="name">开户行账号</div> <input slot="content" v-model="invoiceInfo.open_account" type="number" pattern="\d*" placeholder="请输入开户行账号" > </item> </list-item> </h-content> <bottom-tab class="footer-button"> <tab-button class="save" @click.native="save">下一步</tab-button> </bottom-tab> </h-view> </template> <script> export default { data () { return { value: '', invoicList: [], taxpayerList: [], invoiceInfo: { bp_id: null, bp_class: null, taxpayer_type_n: '', invoice_kind_n: '', taxpayer_type: '', invoice_kind: '', invoice_title: '', invoice_adds: '', invoice_tel: '', open_bank: '', open_account: '', }, } }, beforeRouteEnter (to, from, next) { next(vm => { if (from.name === 'NPBaseInfo') { vm.invoiceInfo = { bp_id: null, bp_class: null, taxpayer_type_n: '', invoice_kind_n: '', taxpayer_type: '', invoice_kind: '', invoice_title: '', invoice_adds: '', invoice_tel: '', open_bank: '', open_account: '', } vm.getInvoice() } }) }, created () { this.getInvoiceType() this.getTaxpayer() }, methods: { getInvoice () { let vm = this let url = process.env.basePath + 'bp_invoice_query' let param = { bp_id: window.localStorage.getItem('bp_id'), } vm.hlsPopup.showLoading('请稍候') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.invoiceInfo = res.info if (res.info.invoice_title == '' || res.info.invoice_title == null || res.info.invoice_title == undefined) { vm.invoiceInfo.invoice_title = window.localStorage.bp_name } vm.addRows(vm.invoiceInfo.invoice_adds) vm.addRowsLive(vm.invoiceInfo.open_bank) } else { hlsPopup.showLongCenter(res.message) } }) }, save () { let vm = this let url = process.env.basePath + 'bp_invoice_save' let name = ((window.localStorage.bp_type === 'TENANT' || window.localStorage.bp_type === 'GUTA') && !window.localStorage.getItem('multipleRole')) || ((window.localStorage.multipleRole === 'TENANT' || window.localStorage.multipleRole === 'GUTA') && window.localStorage.getItem('multipleRole')) ? 'AccessoryInfo' : 'NPBankInfo' vm.invoiceInfo.bp_id = window.localStorage.getItem('bp_id') vm.invoiceInfo.bp_class = 'NP' let param = { master: vm.invoiceInfo, } vm.hlsPopup.showLoading('请稍候') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.$router.push({ name: name, }) } else { hlsPopup.showLongCenter(res.message) } }) }, addRows (e) { if (e) { // let addNum = Math.ceil(e.length / 16) // if (addNum === 0) { // this.$refs.myTestarea.rows = 1 // } else if (addNum >= addNum - 1 && addNum < addNum + 1) { // this.$refs.myTestarea.rows = addNum + 1 // } let len = 0 for (let i = 0; i < e.length; i++) { var c = e.charCodeAt(i) // 统计字符串的字符长度 if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) { len += 1 } else { len += 2 } } let addNum = Math.ceil(len / 21) this.$refs.myTestarea.rows = addNum } }, addRowsLive (e) { if (e) { // let addNum = Math.ceil(e.length / 16) // if (addNum === 0) { // this.$refs.myTestareaLive.rows = 1 // } else if (addNum >= addNum - 1 && addNum < addNum + 1) { // this.$refs.myTestareaLive.rows = addNum + 1 // } let len = 0 for (let i = 0; i < e.length; i++) { var c = e.charCodeAt(i) // 统计字符串的字符长度 if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) { len += 1 } else { len += 2 } } let addNum = Math.ceil(len / 21) this.$refs.myTestareaLive.rows = addNum } }, getInvoiceType () { let vm = this let url = process.env.basePath + 'bp_invoice_kind_query' let param = {} vm.hlsPopup.showLoading('请稍候') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.invoicList = res.lists.map(item => { return { code: item.invoice_kind, code_name: item.invoice_kind_n, } }) } }) }, getTaxpayer () { let vm = this let url = process.env.basePath + 'bp_taxpayer_type_query' let param = {} vm.hlsPopup.showLoading('请稍候') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.taxpayerList = res.lists.map(item => { return { code: item.taxpayer_type, code_name: item.taxpayer_type_n, } }) } }) }, selectInvoiceType (e) { let vm = this vm.hlsPopup.selectList({ list: vm.invoicList, code: 'bp_type', object: {}, returnItem: function (index, obj) { vm.$set(vm.invoiceInfo, 'invoice_kind', obj.bp_type) vm.$set(vm.invoiceInfo, 'invoice_kind_n', obj.bp_type_n) /* vm.invoiceInfo.invoice_kind = obj.bp_type vm.invoiceInfo.invoice_kind_n = obj.bp_type_n */ }, }) }, selectTaxpayer (e) { let vm = this vm.hlsPopup.selectList({ list: vm.taxpayerList, code: 'bp_type', object: {}, returnItem: function (index, obj) { vm.$set(vm.invoiceInfo, 'taxpayer_type', obj.bp_type) vm.$set(vm.invoiceInfo, 'taxpayer_type_n', obj.bp_type_n) /* vm.invoiceInfo.taxpayer_type = obj.bp_type vm.invoiceInfo.taxpayer_type_n = obj.bp_type_n */ }, }) }, }, } </script> <style lang="less" scoped> input::placeholder{ color: #B4B4B5; } textarea::placeholder { color: #b4b4b5; } textarea { text-align: right; color:#666; resize: none; } .save { color: #fff; border-radius: 4px; background-color: @headerColor; } </style>