list.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <template>
  2. <view class="container-banks">
  3. <navbar :config="config" backColor="#666"></navbar>
  4. <view class="banks" v-if="list.length">
  5. <view class="item" :class="{'gray': !item.valid}" v-for="(item, index) in list" :key="item.id">
  6. <!-- <view class="iconfont3 bank-icon">&#xe607;</view> -->
  7. <view class="box">
  8. <image :src="item.logo" mode="widthFix"></image>
  9. <text class="bank_name">{{item.local_bank_name || item.bank_name}}</text>
  10. <text>{{item.local_bank_card_type_name}}</text>
  11. </view>
  12. <view class="box">
  13. <view class="name">({{$mUtil.bankAccount(item.card_id)}})</view>
  14. <view class="unbind" v-if="item.valid" @click="unbindBankCard(item.id)">解绑</view>
  15. <view class="unbind" v-if="!item.valid" @click="unbindBankCard(item.id)">删除</view>
  16. </view>
  17. </view>
  18. </view>
  19. <noData v-if="list.length<=0"></noData>
  20. <view class="footer">
  21. <view class="btn" @click="addBankCard()">+ 新增银行卡</view>
  22. <!-- <view class="btn unbind">- 解绑银行卡</view> -->
  23. </view>
  24. </view>
  25. </template>
  26. <script>
  27. import noData from "@/components/noData/nodata.vue"
  28. export default {
  29. components: {
  30. noData
  31. },
  32. data() {
  33. return {
  34. config: {
  35. back: true,
  36. title: '管理银行卡',
  37. color: '#1a1a1a',
  38. backgroundColor: [1, "#fff"],
  39. statusBarFontColor: '#1A1A1A',
  40. },
  41. list: []
  42. }
  43. },
  44. onShow() {
  45. this.getlist()
  46. },
  47. methods: {
  48. getlist() {
  49. this.$http.get('/usercard/list').then(res => {
  50. if (res.code == 200) {
  51. this.list = res.list
  52. this.list.map(item => {
  53. item.logo = this.$mConfig.bankLink + item.local_bank_mark
  54. })
  55. }
  56. })
  57. },
  58. addBankCard() {
  59. uni.navigateTo({
  60. url: '/pages/order/banks/addBankCard'
  61. })
  62. },
  63. unbindBankCard(id) {
  64. uni.showModal({
  65. title: '提示',
  66. content: '请确认是否解除此银行卡的绑定!',
  67. success: (res) => {
  68. if (res.confirm) {
  69. this.deleteBank(id)
  70. console.log('用户点击确定');
  71. } else if (res.cancel) {
  72. console.log('用户点击取消');
  73. }
  74. }
  75. });
  76. },
  77. deleteBank(id) {
  78. this.$http.delete('/usercard/remove', {
  79. id: id
  80. }).then(res => {
  81. if (res.code == 200) {
  82. this.getlist()
  83. this.$mUtil.toast("解绑成功")
  84. }
  85. })
  86. }
  87. }
  88. }
  89. </script>
  90. <style lang="scss" scoped>
  91. .banks {
  92. padding: 30rpx;
  93. .item {
  94. // height: 100rpx;
  95. // display: flex;
  96. // align-items: center;
  97. padding: 20rpx 0;
  98. border-bottom: 1rpx solid #E6E5E5;
  99. .box {
  100. display: flex;
  101. justify-content: space-between;
  102. align-items: center;
  103. &:first-child {
  104. margin-bottom: 20rpx;
  105. }
  106. .bank_name {
  107. font-size: 30rpx;
  108. font-weight: bold;
  109. }
  110. }
  111. image {
  112. width: 250rpx;
  113. height: auto;
  114. }
  115. .bank-icon {
  116. margin-right: 10rpx;
  117. color: #2f77f1;
  118. font-size: 50rpx;
  119. flex-shrink: 0;
  120. }
  121. .name {
  122. margin-right: 20rpx;
  123. font-size: 26rpx;
  124. overflow: hidden;
  125. text-overflow: ellipsis;
  126. white-space: nowrap;
  127. }
  128. .unbind {
  129. margin-left: auto;
  130. color: red;
  131. flex-shrink: 0;
  132. }
  133. }
  134. .gray {
  135. color: gray;
  136. .bank-icon {
  137. color: gray;
  138. }
  139. }
  140. }
  141. .footer {
  142. width: 100%;
  143. padding: 30rpx 60rpx;
  144. position: fixed;
  145. bottom: 0;
  146. display: flex;
  147. align-items: center;
  148. justify-content: space-between;
  149. background-color: #fff;
  150. .btn {
  151. width: 100%;
  152. color: #fff;
  153. text-align: center;
  154. line-height: 85rpx;
  155. border: 1rpx solid #3775F6;
  156. border-radius: 44rpx;
  157. background-color: #FA6138;
  158. font-size: 28rpx;
  159. font-family: PingFang SC, PingFang SC-Regular;
  160. font-weight: 400;
  161. text-align: center;
  162. }
  163. .unbind {
  164. color: #fff;
  165. border: 1rpx solid #f56c6c;
  166. background-color: #f56c6c;
  167. }
  168. }
  169. </style>