invoice.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. <template>
  2. <view class="invoice-form-wrapper">
  3. <image class="invoice-pic" :src="invoiceUrl" mode="widthFix"></image>
  4. <view class="invoice-form">
  5. <view class="form-item">
  6. <view class="form-title"><text class="asterisk">*</text>单位名称:</view>
  7. <input class="form-input" maxlength="30" v-model="invoiceData.companyName" name="input" placeholder="请输入单位名称..." placeholder-class="placeholder"/>
  8. </view>
  9. <view class="form-item">
  10. <view class="form-title"><text class="asterisk">*</text>纳税人识别号:</view>
  11. <input class="form-input" v-model="invoiceData.taxId" name="input" placeholder="请输入纳税人识别号..." placeholder-class="placeholder"/>
  12. </view>
  13. <view class="form-item">
  14. <view class="form-title"><text class="asterisk">*</text>开户银行:</view>
  15. <input class="form-input" v-model="invoiceData.bankName" name="input" placeholder="请输入开户银行..." placeholder-class="placeholder"/>
  16. </view>
  17. <view class="form-item">
  18. <view class="form-title"><text class="asterisk">*</text>银行账号:</view>
  19. <input class="form-input" maxlength="23" v-model="invoiceData.bankNum" @input="inputBankNum(invoiceData.bankNum)" name="input" placeholder="请输入银行账号..." placeholder-class="placeholder"/>
  20. </view>
  21. <view class="form-item">
  22. <view class="form-title"><text class="asterisk">*</text>注册电话:</view>
  23. <input class="form-input" maxlength="11" v-model="invoiceData.phoneNum" name="input" placeholder="请输入注册电话..." placeholder-class="placeholder"/>
  24. </view>
  25. <view class="form-item">
  26. <view class="form-title"><text class="asterisk">*</text>注册地址:</view>
  27. <textarea :class="{iostextarea: isIos}" cols="20" rows="4" class="form-input form-textarea" v-model="invoiceData.address" name="input" placeholder="请输入注册地址..." placeholder-class="placeholder"/>
  28. </view>
  29. </view>
  30. <view class="submit-btn" @click="submitNow">确认</view>
  31. </view>
  32. </template>
  33. <script>
  34. import { querySaveInvoice, queryInvoice } from "@/api/other.js"
  35. export default {
  36. data() {
  37. return {
  38. userId: '',
  39. invoiceUrl: 'https://img.caimei365.com/group1/M00/03/81/Cmis214BwaCAPYJ3AAYlpcwPaVo973.png',
  40. invoiceData:{
  41. companyName:'',
  42. taxId:'',
  43. bankName: '',
  44. bankNum:'',
  45. address:'',
  46. phoneNum: ''
  47. },
  48. isIos: false
  49. }
  50. },
  51. onLoad() {
  52. this.$api.getStorage().then((resolve) =>{
  53. this.userId = resolve.userID
  54. this.getInvoiceInfo()
  55. let phone = wx.getSystemInfoSync()  //调用方法获取机型
  56.     if (phone.platform == 'ios') {
  57.         this.isIos = true
  58.     } else if (phone.platform == 'android') {
  59. this.isIos = false
  60.     }
  61. })
  62. },
  63. methods: {
  64. inputBankNum(val) {
  65. if (/\S{5}/.test(val)) {
  66. this.invoiceData.bankNum = val.replace(/\s/g, '').replace(/(.{4})/g, "$1 ");
  67. }
  68. },
  69. showMsg(text) {
  70. this.$util.msg(text,1000);
  71. },
  72. checkTaxId(taxId) {
  73. 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],
  74. i, j = regArr.length;
  75. for (let i = 0; i < j; i++) {
  76. if (regArr[i].test(taxId)) {
  77. return true;
  78. }
  79. }
  80. //纳税人识别号格式错误
  81. return false;
  82. },
  83. submitNow() {
  84. let {companyName,taxId,
  85. bankName,bankNum,phoneNum,address} = this.invoiceData,
  86. commonRegex = this.$api.regexSets();
  87. if(companyName.trim() == '') {
  88. this.showMsg('请填写单位名称');
  89. return false;
  90. }
  91. if(!commonRegex.companyName.test(companyName.trim())) {
  92. this.showMsg('单位名称格式不正确');
  93. return false;
  94. }
  95. if(taxId.trim() == '') {
  96. this.showMsg('请填写纳税人识别号');
  97. return false;
  98. }
  99. if(!this.checkTaxId(taxId)) {
  100. this.showMsg('纳税人识别号格式不正确');
  101. return false;
  102. }
  103. if(bankName.trim() == '') {
  104. this.showMsg('请填写开户银行');
  105. return false;
  106. }
  107. if(!commonRegex.invalidChar.test(bankName)) {
  108. this.showMsg('开户银行格式不正确');
  109. return false;
  110. }
  111. if(bankNum.trim() == '') {
  112. this.showMsg('请填写银行账号');
  113. return false;
  114. }
  115. if(!commonRegex.bankNum.test(bankNum.replace(/\s*/g,""))) {
  116. this.showMsg('银行账号格式不正确');
  117. return false;
  118. }
  119. if(phoneNum.trim() == '') {
  120. this.showMsg('请填写注册电话');
  121. return false;
  122. }
  123. if(!commonRegex.phoneAndTelephone.test(phoneNum)) {
  124. this.showMsg('注册电话格式不正确');
  125. return false;
  126. }
  127. if(address.trim() == '') {
  128. this.showMsg('请填写注册地址');
  129. return false;
  130. }
  131. this.saveInvoiceInfo();
  132. },
  133. getInvoiceInfo(){
  134. this.$api.getStorage().then((resolve) =>{
  135. queryInvoice({userId:resolve.userID}).then(response =>{
  136. let resData = response.data
  137. this.invoiceData.companyName = resData.invoiceTitle;
  138. this.invoiceData.taxId = resData.corporationTaxNum;
  139. this.invoiceData.bankName = resData.openBank;
  140. this.invoiceData.phoneNum = resData.registeredPhone;
  141. this.invoiceData.address = resData.registeredAddress;
  142. this.inputBankNum(resData.bankAccountNo);
  143. }).catch(response =>{
  144. this.$util.msg(response.msg,2000);
  145. })
  146. })
  147. },
  148. saveInvoiceInfo() {
  149. let invoiceData = this.invoiceData
  150. const {companyName:invoiceTitle, taxId:corporationTaxNum, bankName: openBank,
  151. bankNum: bankAccountNo, phoneNum:registeredPhone, address:registeredAddress} = invoiceData;
  152. let params = {userId: this.userId, invoiceTitle, corporationTaxNum, openBank,
  153. bankAccountNo: bankAccountNo.replace(/\s*/g,""), registeredPhone, registeredAddress};
  154. querySaveInvoice(params).then(response =>{
  155. this.$util.msg('保存成功',2000);
  156. setTimeout(()=>{
  157. uni.navigateBack({
  158. delta: 1
  159. })
  160. },1100)
  161. }).catch(response =>{
  162. this.$util.msg(response.msg,2000);
  163. })
  164. }
  165. }
  166. }
  167. </script>
  168. <style lang="scss">
  169. page {
  170. .invoice-form-wrapper {
  171. display: flex;
  172. flex-direction: column;
  173. }
  174. .invoice-pic {
  175. width: 100%;
  176. }
  177. .form-item {
  178. align-items: flex-start;
  179. }
  180. .form-item:first-child {
  181. margin-top: 0rpx;
  182. }
  183. .invoice-form {
  184. background: #fff;
  185. padding: 50rpx 48rpx 38rpx 50rpx;
  186. }
  187. .form-input {
  188. height: 45rpx;
  189. line-height: 45rpx;
  190. flex-grow: 1;
  191. }
  192. .form-title {
  193. height: 45rpx;
  194. line-height: 45rpx;
  195. white-space: nowrap;
  196. }
  197. .form-textarea {
  198. width: 100%;
  199. height: 130rpx;
  200. }
  201. .place-holder {
  202. color: #999;
  203. }
  204. .iostextarea {
  205. margin-top: -10rpx;
  206. }
  207. }
  208. </style>