123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185 |
- <template>
- <view class="container-banks">
- <navbar :config="config" backColor="#666"></navbar>
- <view class="banks" v-if="list.length">
- <view class="item" :class="{'gray': !item.valid}" v-for="(item, index) in list" :key="item.id">
- <!-- <view class="iconfont3 bank-icon"></view> -->
- <view class="box">
- <image :src="item.logo" mode="widthFix"></image>
- <text class="bank_name">{{item.local_bank_name || item.bank_name}}</text>
- <text>{{item.local_bank_card_type_name}}</text>
- </view>
- <view class="box">
- <view class="name">({{$mUtil.bankAccount(item.card_id)}})</view>
- <view class="unbind" v-if="item.valid" @click="unbindBankCard(item.id)">解绑</view>
- <view class="unbind" v-if="!item.valid" @click="unbindBankCard(item.id)">删除</view>
- </view>
- </view>
- </view>
- <noData v-if="list.length<=0"></noData>
- <view class="footer">
- <view class="btn" @click="addBankCard()">+ 新增银行卡</view>
- <!-- <view class="btn unbind">- 解绑银行卡</view> -->
- </view>
- </view>
- </template>
- <script>
- import noData from "@/components/noData/nodata.vue"
- export default {
- components: {
- noData
- },
- data() {
- return {
- config: {
- back: true,
- title: '管理银行卡',
- color: '#1a1a1a',
- backgroundColor: [1, "#fff"],
- statusBarFontColor: '#1A1A1A',
- },
- list: []
- }
- },
- onShow() {
- this.getlist()
- },
- methods: {
- getlist() {
- this.$http.get('/usercard/list').then(res => {
- if (res.code == 200) {
- this.list = res.list
- this.list.map(item => {
- item.logo = this.$mConfig.bankLink + item.local_bank_mark
- })
- }
- })
- },
- addBankCard() {
- uni.navigateTo({
- url: '/pages/order/banks/addBankCard'
- })
- },
- unbindBankCard(id) {
- uni.showModal({
- title: '提示',
- content: '请确认是否解除此银行卡的绑定!',
- success: (res) => {
- if (res.confirm) {
- this.deleteBank(id)
- console.log('用户点击确定');
- } else if (res.cancel) {
- console.log('用户点击取消');
- }
- }
- });
- },
- deleteBank(id) {
- this.$http.delete('/usercard/remove', {
- id: id
- }).then(res => {
- if (res.code == 200) {
- this.getlist()
- this.$mUtil.toast("解绑成功")
- }
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .banks {
- padding: 30rpx;
- .item {
- // height: 100rpx;
- // display: flex;
- // align-items: center;
- padding: 20rpx 0;
- border-bottom: 1rpx solid #E6E5E5;
-
- .box {
- display: flex;
- justify-content: space-between;
- align-items: center;
-
- &:first-child {
- margin-bottom: 20rpx;
- }
-
- .bank_name {
- font-size: 30rpx;
- font-weight: bold;
- }
- }
- image {
- width: 250rpx;
- height: auto;
- }
- .bank-icon {
- margin-right: 10rpx;
- color: #2f77f1;
- font-size: 50rpx;
- flex-shrink: 0;
- }
- .name {
- margin-right: 20rpx;
- font-size: 26rpx;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .unbind {
- margin-left: auto;
- color: red;
- flex-shrink: 0;
- }
- }
- .gray {
- color: gray;
- .bank-icon {
- color: gray;
- }
- }
- }
- .footer {
- width: 100%;
- padding: 30rpx 60rpx;
- position: fixed;
- bottom: 0;
- display: flex;
- align-items: center;
- justify-content: space-between;
- background-color: #fff;
- .btn {
- width: 100%;
- color: #fff;
- text-align: center;
- line-height: 85rpx;
- border: 1rpx solid #3775F6;
- border-radius: 44rpx;
- background-color: #FA6138;
- font-size: 28rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- text-align: center;
- }
- .unbind {
- color: #fff;
- border: 1rpx solid #f56c6c;
- background-color: #f56c6c;
- }
- }
- </style>
|