leromro-mini/pages/myCenter/wallet.vue

<template>
    <view class="wallet-main">
        <view class="wallet-hi">
            <view class="wallet-hi-title">Hi，您好！</view>
            <text class="wallet-hi-text">为了您更好地使用钱包功能， <text class="wallet-active" @click="onAddBankCard" >添加银行卡> </text> </text>
        </view>
        <view class="wallet-box card-box ">
            <view class="wallet-box-top">
                <view class="flex-center-column">
                    <text class="wallet-box-title">钱包总额(元)</text>
                    <view class="wallet-box-price">2000</view>
                </view>
                <view>
                    <view class="wallet-box-btn1 flex-center" @click="onWithdrawal">提现</view>
                    <view class="wallet-box-btn2 flex-center" @click="onIncome">收入明细</view>
                </view>
            </view>
            <up-divider></up-divider>
            <view class="wallet-box-bottom">
                <view class="flex-center-column">
                    <text class="wallet-box-title">可提现（元）</text>
                    <view class="wallet-box-price2">2000</view>
                </view>
                <view class="flex-center-column">
                    <text class="wallet-box-title">待入账（元）</text>
                    <view class="wallet-box-price2">2000</view>
                </view>
                <view class="flex-center-column">
                    <text class="wallet-box-title">银行卡（张）</text>
                    <view class="wallet-box-price2">2</view>
                </view>
            </view>
        </view>

        <view class="bank-box">
            <view v-for="item in bankList" :key="item.cardCode"  :style="`background: ${item.color};border-radius: 8px;`" @click="onBankCardDetails(item)" >
            <BankItem bankCode="ABC" bankName="中国农业银行" cardType="储蓄卡" cardCode="5106365986893"/>
        </view>
        </view>
       
    </view>
</template>

<script setup>
import { ref } from 'vue';
import BankItem from '../../components/bank-item/bank-item.vue';
const bankList = ref([
    {
        bankCode: 'ABC',
        bankName: '中国农业银行',
        cardType: '储蓄卡',
        cardCode: '5106365986893',
        color: 'red'
    },
    {
        bankCode: 'ABC',
        bankName: '中国农业银行',
        cardType: '储蓄卡',
        cardCode: '5106365986893',
        color: 'red'
    },
])

const onWithdrawal = () => {
    uni.navigateTo({
        url: '/pages/myCenter/withdrawal'
    })
}

const onIncome = () => {
    uni.navigateTo({
        url: '/pages/myCenter/income'
    })
}

const onAddBankCard = () => {
    uni.navigateTo({
        url: '/pages/myCenter/addBankCard'
    })
}

const onBankCardDetails = (record) => {
    uni.navigateTo({
        url: '/pages/myCenter/bankCardDetails'
    })
}

</script>

<style lang="scss" scoped>
.card-box {
    border-radius: 8px;
    background: rgba(255, 255, 255, 1);
    padding: 20px;
    margin-bottom: 12px;
}
.bank-box {
    border-radius: 8px;
    margin-bottom: 12px;
}

.wallet-main {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(245, 245, 245, 1);
    padding: 12px;
    overflow: auto;

    .wallet-hi-title {
        font-size: 20px;
        font-weight: 700;
        line-height: 28.96px;
        color: rgba(51, 51, 51, 1);
    }

    .wallet-hi-text {
        font-size: 14px;
        font-weight: 500;
        line-height: 20.27px;
        color: rgba(153, 153, 153, 1);
    }

    .wallet-active {
        font-size: 14px;
        font-weight: 500;
        line-height: 20.27px;
        color: rgba(255, 87, 4, 1);
    }

    .wallet-hi {
        margin-bottom: 20px;
    }

    .wallet-box-title {
        font-size: 12px;
        font-weight: 500;
        line-height: 17.38px;
        color: rgba(199, 199, 199, 1);
        margin-bottom: 8px;
    }

    .wallet-box-price {
        font-size: 30px;
        font-weight: 500;
        line-height: 35.16px;
        color: rgba(252, 228, 187, 1);
    }
    .wallet-box-price2 {
        font-size: 24px;
        font-weight: 400;
        line-height: 28.13px;
        color: rgba(252, 228, 187, 1);
    }

    .wallet-box {
        border-radius: 12px;
        background: linear-gradient(131.81deg, rgba(65, 65, 95, 1) 0%, rgba(45, 48, 74, 1) 100%);
        margin-bottom: 14px;
        .wallet-box-top {
            display: flex;
            align-content: center;
            justify-content: space-between;

            .wallet-box-btn1 {
                width: 78px;
                height: 30px;
                opacity: 1;
                border-radius: 4px;
                background: linear-gradient(222.81deg, rgba(255, 227, 194, 1) 0%, rgba(255, 226, 192, 1) 0%, rgba(255, 225, 189, 1) 0%, rgba(251, 204, 147, 1) 100%);
                margin-bottom: 14px;
                font-size: 16px;
                font-weight: 700;
                line-height: 23.17px;
                color: rgba(50, 52, 80, 1);
            }

            .wallet-box-btn2 {
                width: 78px;
                height: 30px;
                opacity: 1;
                border-radius: 4px;
                border: 1px solid rgba(255, 218, 172, 1);
                font-size: 16px;
                font-weight: 500;
                letter-spacing: 0px;
                line-height: 23.17px;
                color: rgba(255, 218, 172, 1);
            }
        }
        .wallet-box-bottom{
            display: flex;
            align-items: center;
            justify-content: space-around;
        }


    }

}
</style>