invoice.vue 6.7 KB

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