banklist.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. <template>
  2. <block>
  3. <view :class="'mItem ' + ((index + 1) % 2 == 0 ? 'bg1' : (index + 1) % 2 == 0 ? 'bg2' : 'bg3')" v-for="(item, index) in list" :key="index">
  4. <!-- <image
  5. src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIibNthPtcRZKfZCjg4u4IbfezjPAZ9PQWLmRLcTsaFerR8sxOBs7fVibx7NJmEFZy9qXVaoWG82CjA/132">
  6. </image> -->
  7. <view class="mInfo">
  8. <view class="info1">
  9. <view>
  10. {{ item.bank }}
  11. <text class="fz24">({{ item.name }})</text>
  12. </view>
  13. </view>
  14. <view class="info2">
  15. <view>{{ parse.filterNum(item.card) }}</view>
  16. </view>
  17. <!-- <view class="info3" v-if="item.is_default">默认账户</view> -->
  18. </view>
  19. </view>
  20. <view v-if="!list.length" style='color:#999;text-align:center;margin:150rpx 0;font-size:30rpx'>暂无数据</view>
  21. <view class="fb">
  22. <view class="addAddress" :data-type="type" @tap="toPage" data-url="/pages/Withdrawal/addbank">
  23. <image src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/a21445e2e3a4427ed6307bf3bb91cd75.png" mode="widthFix"></image>
  24. <view>添加银行卡</view>
  25. </view>
  26. </view>
  27. </block>
  28. </template>
  29. <script module="parse" lang="wxs">
  30. module.exports = {
  31. filterNum: function(value) {
  32. var value = value+''
  33. console.log(value)
  34. var card = value.replace(getRegExp('(/^(\d{4})\d+(\d{4})$/)','g'),'$1 **** **** $2')
  35. return card
  36. }
  37. }
  38. </script>
  39. <script>
  40. // pages/tabbar/index/index.js
  41. var app = getApp();
  42. export default {
  43. data() {
  44. return {
  45. navIndex: 0,
  46. list: [
  47. // {
  48. // account: "hhD",
  49. // bank_name: "农业银行",
  50. // card_no: "6228481561378773113",
  51. // card_no_end: "3113",
  52. // create_time: "1659088920",
  53. // id: "7",
  54. // is_default: "0",
  55. // status: "1",
  56. // uniacid: "3",
  57. // update_time: "1659088920",
  58. // user_id: "1"
  59. // }
  60. ],
  61. loaded: false,
  62. page: 1,
  63. type: '',
  64. pageSize:10
  65. };
  66. },
  67. onLoad: function (options) {
  68. },
  69. onShow() {
  70. this.init()
  71. this.getlist();
  72. },
  73. onPullDownRefresh: function () {},
  74. onReachBottom: function () {
  75. this.loaded || this.getlist();
  76. },
  77. onShareAppMessage: function () {},
  78. methods: {
  79. toPage(e) {
  80. app.globalData.toPage(e);
  81. },
  82. init() {
  83. this.page=1
  84. this.loaded= false
  85. this.list= []
  86. },
  87. async getlist() {
  88. var that = this;
  89. let res = await this.$api.request('/bank/index', 'GET', {
  90. page: this.page,
  91. pagesize: this.pageSize
  92. });
  93. console.log(res)
  94. if (res) {
  95. if (res.length > 0) {
  96. this.list = this.list.concat(res);
  97. this.page++;
  98. } else {
  99. this.loaded = true
  100. this.$api.msg('没有更多数据');
  101. }
  102. }
  103. }
  104. }
  105. };
  106. </script>
  107. <style>
  108. page {
  109. }
  110. .mItem {
  111. margin: 30rpx 30rpx 0;
  112. padding: 50rpx 48rpx;
  113. display: flex;
  114. align-items: center;
  115. border-radius: 10rpx;
  116. position: relative;
  117. }
  118. .info3 {
  119. position: absolute;
  120. font-size: 26rpx;
  121. color: #fff;
  122. right: 32rpx;
  123. top: 25rpx;
  124. }
  125. .mItem > image {
  126. width: 100rpx;
  127. height: 100rpx;
  128. border-radius: 50%;
  129. margin-right: 25rpx;
  130. }
  131. .mInfo {
  132. flex: 1;
  133. height: 110rpx;
  134. display: flex;
  135. flex-direction: column;
  136. justify-content: center;
  137. }
  138. .info1 {
  139. display: flex;
  140. align-items: center;
  141. justify-content: space-between;
  142. padding-right: 36rpx;
  143. }
  144. .info1 > view:nth-child(1) {
  145. font-size: 30rpx;
  146. font-weight: 700;
  147. color: #fff;
  148. }
  149. .fz24 {
  150. font-size: 24rpx;
  151. margin-left: 30rpx;
  152. }
  153. .info1 > view:nth-child(2) {
  154. color: #1479ff;
  155. font-size: 34rpx;
  156. }
  157. .info2 {
  158. display: flex;
  159. align-items: center;
  160. justify-content: space-between;
  161. margin-top: 26rpx;
  162. }
  163. .info2 > view:nth-child(1) {
  164. color: #fff;
  165. font-size: 36rpx;
  166. font-weight: 700;
  167. }
  168. .fb {
  169. height: 80rpx;
  170. width: 100%;
  171. position: fixed;
  172. bottom: 48rpx;
  173. display: flex;
  174. justify-content: center;
  175. align-items: center;
  176. }
  177. .addAddress {
  178. width: 670rpx;
  179. height: 80rpx;
  180. display: flex;
  181. justify-content: center;
  182. align-items: center;
  183. background: linear-gradient(to right,#F8A52B,#F8C657);
  184. border-radius: 50rpx;
  185. }
  186. .addAddress > view {
  187. color: #fff;
  188. font-size: 30rpx;
  189. }
  190. .addAddress > image {
  191. width: 30rpx;
  192. margin-right: 14rpx;
  193. }
  194. .bg1 {
  195. background: #dd3b42;
  196. }
  197. .bg2 {
  198. background: #018468;
  199. }
  200. .bg3 {
  201. background: #0c3f9d;
  202. }
  203. </style>