xdd-uniapp-new/pkg_user/views/bankCardList.vue

<template>
  <view class="container">
    <mescroll-body ref="mescrollRef" top="0" bottom="0" class='cotent-scroll' :up="upOption" :down="downOption"
                   @up="upCallback" @down="downCallback" @init="mescrollInit" @emptyclick="emptyClick">

      <view id="dataList" class="data-list acea-row row-column">
        <view class="item acea-row row-column" :style="{'background':card.bgColor}" :key="index"
              v-for="(card, index) in list" @click="cardClick(card)">
          <view class="acea-row row-column">
            <view class="acea-row row-between">
              <view class="txt-bankname">{{ card.bankName }}</view>
              <view class="unbind-btn" @click="unbindCard(index)">解除绑定</view>
            </view>
            <view class="acea-row row-middle" style="margin-top: 58rpx;flex-wrap: nowrap;">
              <view class="acea-row row-left" style="flex: 1;margin-right: 18rpx;">
                <view class="dot"></view>
                <view class="dot"></view>
                <view class="dot"></view>
                <view class="dot"></view>
              </view>
              <view class="acea-row row-left" style="flex: 1;margin-right: 18rpx;">
                <view class="dot"></view>
                <view class="dot"></view>
                <view class="dot"></view>
                <view class="dot"></view>
              </view>
              <view class="acea-row row-left" style="flex: 1;margin-right: 18rpx;">
                <view class="dot"></view>
                <view class="dot"></view>
                <view class="dot"></view>
                <view class="dot"></view>
              </view>
              <view class="" style="flex-shrink: 0;">
                <text class="txt-cardno">{{ last4CardNo(card.cardNo) }}</text>
              </view>
            </view>
            <view class="txt-name" style="margin-top: 38rpx;">{{ card.name }}</view>
          </view>
        </view>
      </view>

      <view class="bottom-buttons-wrap acea-row row-middle row-between" @click="addBtnClick">
        <view class="" style="color: #999999;font-size: 28rpx;">添加银行卡</view>
        <view class="acea-row row-middle">
          <image style="width: 82rpx;height: 82rpx;" :src="webUrl+'/20220922225634717078.png'" mode=""></image>
        </view>
      </view>

      <view id="loading-more"></view>
    </mescroll-body>

  </view>
</template>

<script>
import MescrollMixins from "@/mixins/mescroll-mixins.js";
import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
import {getBank, postCashInfo, bankCardList, deleteBankCard} from "@/api/user";
import { pageListenMixins } from '@/mixins/pageListenMixins'

export default {
  mixins: [pageListenMixins],
  data() {
    return {
      list: [],
      upOption: {
        noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        auto: true,
        empty: {
          tip: '', // 提示
          icon:this.$VUE_APP_RESOURCES_URL+'/20240102232713117485.png',
          width:458,
          height:356
          // btnText:'点击刷新'
        }
      },
      downOption: {
        auto: false
      },
      isSelectMode: false,
      webUrl: this.$VUE_APP_RESOURCES_URL,
      bgColor: ["#FD574B", "#0DC5C5", "#3F57DA", "#FF4F48"],
      pageKeyId: Object.freeze('userBankCardIndex')
    }
  },
  components: {
    MescrollBody
  },
  mixins: [
    MescrollMixins({
      getPageData(mescroll) {
        var _this = this;
        // 此时mescroll会携带page的参数:
        let pageNum = mescroll.num; // 页码, 默认从1开始
        let pageSize = mescroll.size; // 页长, 默认每页10条
        var params = {
          limit: pageNum,
          page: pageSize
        }
        bankCardList(params)
            .then(res => {
              if (mescroll.num == 1) {
                _this.list = []; //如果是第一页需手动制空列表
              }
              _this.list = _this.list.concat(res.data);//追加新数据
              _this.handleColor();
              //mescroll.endByPage(res.data, res.data.total);
              mescroll.endSuccess(res.data.length);
            })
            .catch(err => {
              mescroll.endErr();
              uni.showToast({
                title: err + '',
                icon: 'none',
                mask: false,
                duration: 1500
              });
            })
      }
    })
  ],
  onLoad: function (e) {
    //从query里取模式
    this.isSelectMode = this.$yroute.query.isSelected;
  },
  onShow: function () {
    //静默刷新
    this.mescroll && this.mescroll.resetUpScroll(false);
  },
  methods: {
    last4CardNo: function (cardNo) {
      var str = cardNo;
      var reg = /^\d+(\d{4})$/;
      str = str.replace(reg, "$1");
      return str;
    },
    formartCard: function (cardNo) {
      var str = cardNo;
      var reg = /^(\d{4})\d+(\d{4})$/;
      str = str.replace(reg, "$1 **** **** $2");
      return str;
      //return cardNo.replace(/(\d{4})(?=\d)/g, '$1 ');
    },
    cardClick: function (card) {
      //判断是否选择模式
      if (this.isSelectMode) {
        //把数据放入本地存储里，返回上一页时再取出来
        //localStorage.setItem("selectedBankCard", JSON.stringify(card));
        // uni.setStorage({
        // 	"selectedBankCard":JSON.stringify(card)
        // });
        uni.setStorageSync("selectedBankCard", JSON.stringify(card));
        this.$yrouter.back();
      } else {

      }
    },
    addBtnClick: function () {
      uni.navigateTo({
        url:"addBankCard"
      })
    },
    unbindCard: function (index) {
      let that = this;
      let card = that.list[index];
      let id = card.id;

      uni.showModal({
        title: '是否解绑此银行卡？',
        content: '',
        showCancel: true,
        cancelText: '否',
        confirmText: '是',
        success: res1 => {
          if (res1.confirm) {

            deleteBankCard({
              id: id
            }).then(res => {

              uni.showToast({
                title: res.msg,
                icon: "success",
                duration: 2000
              });
              //刷新界面数据
              that.mescroll && that.mescroll.resetUpScroll(false);
            });

          } else {

          }
        },
        fail: () => {
        },
        complete: () => {
        }
      });
    },

    handleColor() {
      if (this.list.length > 0) {
        this.list.forEach((item, index) => {
          item.bgColor = this.bgColor[index % 4];
        })
      }
    }

  }
}
</script>

<style>
.data-list {
  padding: 40rpx 32rpx 0;
}

.item {
  flex-wrap: nowrap;
  margin-bottom: 40rpx;
  padding: 32rpx 40rpx;
  /*background: linear-gradient(*/
  /*    221deg,*/
  /*    rgba(255, 187, 140, 1) 0%,*/
  /*    rgba(250, 134, 135, 1) 100%*/
  /*);*/
  opacity: 1;
  border-radius: 20rpx;
}

.txt-bankname {
  font-size: 30rpx;
  color: #fff;
  font-weight: bold;
}

.txt-cardno {
  font-size: 40rpx;
  color: #fff;
  font-weight: bold;
}

.txt-name {
  font-size: 26rpx;
  color: #fff;
  font-weight: bold;
}

.unbind-btn {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.6);
}

.bottom-buttons-wrap {
  height: 106rpx;
  margin: 0 32rpx;
  padding: 0 26rpx 0 48rpx;
  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.16);
  background-color: #fff;
}

.add-btn {

  font-size: 36rpx;
  background: linear-gradient(90deg, rgba(255, 149, 141, 1) 0%, rgba(255, 94, 138, 1) 100%);
  border-radius: 44rpx;
  color: rgba(255, 255, 255, 1);
  padding: 20rpx 70rpx;
  flex-wrap: nowrap;
}

.dot {
  width: 18rpx;
  height: 18rpx;
  background: #fff;
  border-radius: 50%;
  opacity: 0.3;
  margin-right: 18rpx;
}
</style>