addBankCard.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. <template>
  2. <view class="container-add">
  3. <navbar :config="config" backColor="#666"></navbar>
  4. <view class="tabs">
  5. <view class="tab" :class="{'activeTab': currentTab == index}" v-for="(item, index) in tabList" :key="item.value"
  6. @click="changeTab(index)">
  7. {{item.label}}
  8. </view>
  9. </view>
  10. <u-form :model="form" ref="formRef" :rules="rulesForm" label-position="top">
  11. <u-form-item label="银行卡号" prop="card_id" class="card-box">
  12. <view class="bank_name">
  13. <image class="bank-logo" v-if="bank_logo" :src="bank_logo" mode="widthFix"></image>
  14. <text class="txt">{{bankForm.local_bank_name}}</text>
  15. </view>
  16. <u-input v-model="form.card_id" type="number" :clearable="false" placeholder="请输入银行卡号" @blur="blurCard"
  17. @input="changeCard" />
  18. </u-form-item>
  19. <u-form-item label="银行预留手机号" prop="tel_no">
  20. <u-input v-model="form.tel_no" type="number" min="11" maxlength="11" :clearable="false"
  21. placeholder="请输入银行预留手机号" />
  22. </u-form-item>
  23. <!-- <u-form-item label="姓名">
  24. <u-input v-model="form.name" />
  25. </u-form-item>
  26. <u-form-item label="身份证号">
  27. <u-input v-model="form.intro" />
  28. </u-form-item> -->
  29. <!-- <template v-if="currentTab == 0">
  30. <u-form-item label="协议号" prop="protocol_no">
  31. <u-input v-model="form.protocol_no" :clearable="false" placeholder="请输入协议号,招行卡必填,其他卡非必填" />
  32. </u-form-item>
  33. </template> -->
  34. <template v-if="currentTab == 1">
  35. <u-form-item label="验证码(信用卡背面签名条末三位)" prop="vip_code">
  36. <u-input v-model="form.vip_code" :clearable="false" placeholder="请输入验证码" />
  37. </u-form-item>
  38. <u-form-item label="有效期" prop="expiration">
  39. <u-input v-model="form.expiration" :clearable="false" placeholder="请输入有效期" />
  40. <!-- <uni-datetime-picker type="date" :clear-icon="false" v-model="form.expiration" @maskClick="maskClick" /> -->
  41. </u-form-item>
  42. </template>
  43. </u-form>
  44. <view class="footer">
  45. <view class="btn" @click="$u.throttle(next, 500)">下一步</view>
  46. </view>
  47. </view>
  48. </template>
  49. <script>
  50. export default {
  51. data() {
  52. return {
  53. config: {
  54. back: true,
  55. title: '新增银行卡',
  56. color: '#1a1a1a',
  57. backgroundColor: [1, "#fff"],
  58. statusBarFontColor: '#1A1A1A',
  59. },
  60. tabList: [{
  61. label: '借记卡',
  62. value: 0
  63. },
  64. {
  65. label: '信用卡',
  66. value: 1
  67. }
  68. ],
  69. currentTab: 0,
  70. form: {},
  71. bank_logo: '',
  72. bankForm: {},
  73. rulesForm: {
  74. card_id: [{
  75. required: true,
  76. message: '请输入银行卡号',
  77. // 可以单个或者同时写两个触发验证方式
  78. trigger: ['blur'],
  79. }],
  80. tel_no: [{
  81. required: true,
  82. validator: (rule, value, callback) => {
  83. return this.$u.test.mobile(value);
  84. },
  85. message: '手机号码不正确',
  86. // 触发器可以同时用blur和change
  87. trigger: ['blur'],
  88. }, {
  89. required: true,
  90. min: 11,
  91. max: 11,
  92. message: '手机号必须是11位',
  93. // 可以单个或者同时写两个触发验证方式
  94. trigger: ['blur'],
  95. }],
  96. // protocol_no: [{
  97. // required: true,
  98. // message: '请输入protocol_no',
  99. // // 可以单个或者同时写两个触发验证方式
  100. // trigger: ['change', 'blur'],
  101. // }],
  102. vip_code: [{
  103. required: true,
  104. message: '请输入验证码',
  105. // 可以单个或者同时写两个触发验证方式
  106. trigger: ['blur'],
  107. }],
  108. expiration: [{
  109. required: true,
  110. max: 4,
  111. message: '请输入有效期',
  112. // 可以单个或者同时写两个触发验证方式
  113. trigger: ['blur'],
  114. }]
  115. },
  116. }
  117. },
  118. onReady() {
  119. this.$refs.formRef.setRules(this.rulesForm);
  120. },
  121. methods: {
  122. changeTab(i) {
  123. if (this.currentTab == i) {
  124. return false;
  125. }
  126. this.currentTab = i
  127. this.form = {}
  128. this.bankForm = {}
  129. this.bank_logo = ''
  130. },
  131. maskClick() {},
  132. blurCard(e) {
  133. if (e) {
  134. this.$http.post('/usercard/check', {
  135. card_id: e
  136. }).then(res => {
  137. if (res.code == 200 && res.data) {
  138. this.bankForm.local_bank_name = res.data.bank_name
  139. this.bankForm.local_bank_mark = res.data.bank_mark
  140. this.bankForm.local_bank_card_type = res.data.bank_card_type
  141. this.bankForm.local_bank_card_type_name = res.data.bank_card_type_name
  142. this.bank_logo = this.$mConfig.bankLink + res.data.bank_mark
  143. if (this.currentTab == 0) {
  144. if (res.data.bank_card_type != 'DC') {
  145. this.$mUtil.toast("此卡号不是借记卡号,请输入对应借记卡卡号")
  146. }
  147. // if (res.data.bank_mark == 'CMB') {
  148. // this.rulesForm.protocol_no = {
  149. // required: true,
  150. // message: '请输入协议号',
  151. // trigger: 'blur',
  152. // }
  153. // }
  154. } else if (this.currentTab == 1) {
  155. if (res.data.bank_card_type != 'CC') {
  156. this.$mUtil.toast("此卡号不是信用卡号,请输入对应信用卡卡号")
  157. }
  158. }
  159. }
  160. })
  161. } else {
  162. this.bankForm = {}
  163. this.bank_logo = ''
  164. }
  165. },
  166. changeCard(e) {
  167. if (!e) {
  168. this.bankForm = {}
  169. this.bank_logo = ''
  170. }
  171. },
  172. next() {
  173. this.$refs.formRef.validate(valid => {
  174. if (valid) {
  175. console.log('验证通过');
  176. if (this.currentTab == 0) {
  177. this.form.credit = false
  178. this.form.protocol_no = '34463343'
  179. } else {
  180. this.form.credit = true
  181. }
  182. this.$http.post('/usercard/save', {
  183. ...this.form,
  184. ...this.bankForm
  185. }).then(res => {
  186. if (res.code == 200) {
  187. setTimeout(() => {
  188. uni.redirectTo({
  189. url: `/pages/order/banks/mobileCode?type=add&id=${res.data.id}`
  190. })
  191. }, 500)
  192. }
  193. })
  194. } else {
  195. console.log('验证失败');
  196. }
  197. });
  198. }
  199. }
  200. }
  201. </script>
  202. <style lang="scss" scoped>
  203. .container-add {
  204. padding-bottom: 200rpx;
  205. }
  206. .tabs {
  207. display: flex;
  208. justify-content: space-between;
  209. align-items: center;
  210. margin: 40rpx 100rpx;
  211. border: 1rpx solid #1684FC;
  212. color: #1684FC;
  213. border-radius: 10rpx;
  214. .tab {
  215. display: flex;
  216. justify-content: center;
  217. align-items: center;
  218. width: 50%;
  219. height: 60rpx;
  220. }
  221. .activeTab {
  222. color: #fff;
  223. background-color: #1684fc;
  224. }
  225. }
  226. .u-form {
  227. padding: 0 30rpx;
  228. .card-box {
  229. /deep/ .u-form-item--right__content__slot {
  230. display: flex;
  231. flex-direction: column;
  232. align-items: flex-start;
  233. .u-input {
  234. width: 100%;
  235. }
  236. }
  237. }
  238. .bank_name {
  239. display: flex;
  240. align-items: center;
  241. .txt {
  242. font-size: 30rpx;
  243. font-weight: bold;
  244. }
  245. }
  246. .bank-logo {
  247. width: 250rpx;
  248. }
  249. }
  250. .footer {
  251. width: 100%;
  252. padding: 30rpx 60rpx;
  253. position: fixed;
  254. bottom: 0;
  255. display: flex;
  256. align-items: center;
  257. justify-content: space-between;
  258. background-color: #fff;
  259. z-index: 9;
  260. .btn {
  261. width: 100%;
  262. color: #fff;
  263. text-align: center;
  264. line-height: 85rpx;
  265. border: 1rpx solid #3775F6;
  266. border-radius: 44rpx;
  267. background-color: #FA6138;
  268. font-size: 28rpx;
  269. font-family: PingFang SC, PingFang SC-Regular;
  270. font-weight: 400;
  271. text-align: center;
  272. }
  273. }
  274. </style>