qd_81fang/pages/Withdrawal/banklist.vue

<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>