<template> <block> <view :class="'mItem ' + ((index + 1) % 2 == 0 ? 'bg1' : (index + 1) % 2 == 0 ? 'bg2' : 'bg3')" v-for="(item, index) in list" :key="index"> <!-- <image src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIibNthPtcRZKfZCjg4u4IbfezjPAZ9PQWLmRLcTsaFerR8sxOBs7fVibx7NJmEFZy9qXVaoWG82CjA/132"> </image> --> <view class="mInfo"> <view class="info1"> <view> {{ item.bank }} <text class="fz24">({{ item.name }})</text> </view> </view> <view class="info2"> <view>{{ parse.filterNum(item.card) }}</view> </view> <!-- <view class="info3" v-if="item.is_default">默认账户</view> --> </view> </view> <view v-if="!list.length" style='color:#999;text-align:center;margin:150rpx 0;font-size:30rpx'>暂无数据</view> <view class="fb"> <view class="addAddress" :data-type="type" @tap="toPage" data-url="/pages/Withdrawal/addbank"> <image src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/a21445e2e3a4427ed6307bf3bb91cd75.png" mode="widthFix"></image> <view>添加银行卡</view> </view> </view> </block> </template> <script module="parse" lang="wxs"> module.exports = { filterNum: function(value) { var value = value+'' console.log(value) var card = value.replace(getRegExp('(/^(\d{4})\d+(\d{4})$/)','g'),'$1 **** **** $2') return card } } </script> <script> // pages/tabbar/index/index.js var app = getApp(); export default { data() { return { navIndex: 0, list: [ // { // account: "hhD", // bank_name: "农业银行", // card_no: "6228481561378773113", // card_no_end: "3113", // create_time: "1659088920", // id: "7", // is_default: "0", // status: "1", // uniacid: "3", // update_time: "1659088920", // user_id: "1" // } ], loaded: false, page: 1, type: '', pageSize:10 }; }, onLoad: function (options) { }, onShow() { this.init() this.getlist(); }, onPullDownRefresh: function () {}, onReachBottom: function () { this.loaded || this.getlist(); }, onShareAppMessage: function () {}, methods: { toPage(e) { app.globalData.toPage(e); }, init() { this.page=1 this.loaded= false this.list= [] }, async getlist() { var that = this; let res = await this.$api.request('/bank/index', 'GET', { page: this.page, pagesize: this.pageSize }); console.log(res) if (res) { if (res.length > 0) { this.list = this.list.concat(res); this.page++; } else { this.loaded = true this.$api.msg('没有更多数据'); } } } } }; </script> <style> page { } .mItem { margin: 30rpx 30rpx 0; padding: 50rpx 48rpx; display: flex; align-items: center; border-radius: 10rpx; position: relative; } .info3 { position: absolute; font-size: 26rpx; color: #fff; right: 32rpx; top: 25rpx; } .mItem > image { width: 100rpx; height: 100rpx; border-radius: 50%; margin-right: 25rpx; } .mInfo { flex: 1; height: 110rpx; display: flex; flex-direction: column; justify-content: center; } .info1 { display: flex; align-items: center; justify-content: space-between; padding-right: 36rpx; } .info1 > view:nth-child(1) { font-size: 30rpx; font-weight: 700; color: #fff; } .fz24 { font-size: 24rpx; margin-left: 30rpx; } .info1 > view:nth-child(2) { color: #1479ff; font-size: 34rpx; } .info2 { display: flex; align-items: center; justify-content: space-between; margin-top: 26rpx; } .info2 > view:nth-child(1) { color: #fff; font-size: 36rpx; font-weight: 700; } .fb { height: 80rpx; width: 100%; position: fixed; bottom: 48rpx; display: flex; justify-content: center; align-items: center; } .addAddress { width: 670rpx; height: 80rpx; display: flex; justify-content: center; align-items: center; background: linear-gradient(to right,#F8A52B,#F8C657); border-radius: 50rpx; } .addAddress > view { color: #fff; font-size: 30rpx; } .addAddress > image { width: 30rpx; margin-right: 14rpx; } .bg1 { background: #dd3b42; } .bg2 { background: #018468; } .bg3 { background: #0c3f9d; } </style>