bank-search.vue 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <template>
  2. <view class="bank_search">
  3. <view class="title">如何查询开户银行支行?</view>
  4. <view class="second_title">方法一:登录手机银行APP查询</view>
  5. <view class="second_title">方法二:拨打银行客服电话查询</view>
  6. <view class="bank_con">
  7. <view v-for="item in bankList" :key="item.id">
  8. <text>{{ item.id }}.</text>
  9. <text>{{ item.name }},客服电话是</text>
  10. <text @click="callPhone(item.phone)">{{ item.phone }}</text>
  11. </view>
  12. </view>
  13. </view>
  14. </template>
  15. <script>
  16. export default {
  17. data() {
  18. return {
  19. bankList: [
  20. { id: 1, name: '工商银行', phone: '95588' },
  21. { id: 2, name: '建设银行', phone: '95533' },
  22. { id: 3, name: '农业银行', phone: '95599' },
  23. { id: 4, name: '邮政储蓄银行', phone: '95580' },
  24. { id: 5, name: '中国银行', phone: '95566' },
  25. { id: 6, name: '交通银行', phone: '95559' },
  26. { id: 7, name: '民生银行', phone: '95568' },
  27. { id: 8, name: '光大银行', phone: '95595' },
  28. { id: 9, name: '中信银行', phone: '95558' },
  29. { id: 10, name: '兴业银行', phone: '95561' },
  30. { id: 11, name: '华夏银行', phone: '95577' },
  31. { id: 12, name: '平安银行', phone: '95511' },
  32. { id: 13, name: '招商银行', phone: '95555' },
  33. { id: 14, name: '浦发银行', phone: '95528' },
  34. { id: 15, name: '北京银行', phone: '95526' },
  35. { id: 16, name: '宁波银行', phone: '95574' },
  36. { id: 17, name: '广发银行', phone: '4008-308-003' }
  37. ]
  38. };
  39. },
  40. methods: {
  41. callPhone(phone) {
  42. uni.makePhoneCall({
  43. phoneNumber: phone,
  44. success: res => {
  45. console.log(res, '调用成功!');
  46. },
  47. // 失败回调
  48. fail: res => {
  49. console.log(res, '调用失败!');
  50. this.callPhone(); //重复调用一次
  51. }
  52. });
  53. }
  54. }
  55. };
  56. </script>
  57. <style lang="scss" scoped>
  58. .bank_search {
  59. width: 100%;
  60. min-height: 100%;
  61. background: #fff;
  62. padding: 20rpx 30rpx 40rpx;
  63. .title {
  64. font-size: 32rpx;
  65. font-weight: bold;
  66. padding: 30rpx 0;
  67. }
  68. .second_title {
  69. font-size: 30rpx;
  70. font-weight: bold;
  71. padding: 20rpx 0;
  72. }
  73. .bank_con {
  74. margin-top: 30rpx;
  75. > view {
  76. margin-bottom: 40rpx;
  77. text {
  78. font-size: 32rpx;
  79. }
  80. text:last-child {
  81. font-size: 40rpx;
  82. font-weight: bold;
  83. color: #4185f5;
  84. margin-left: 10rpx;
  85. }
  86. }
  87. }
  88. }
  89. </style>