leromro-mini/pages_mine/pages/wallet/index.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">{{ data.balance }}</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">{{ data.balance }}</view>
                </view>
                <view class="flex-center-column">
                    <text class="wallet-box-title">待入账（元）</text>
                    <view class="wallet-box-price2">{{  data.orderFrozenBalance }}</view>
                </view>
                <view class="flex-center-column">
                    <text class="wallet-box-title">银行卡（张）</text>
                    <view class="wallet-box-price2">0</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 '@/pages_mine/components/bank-item/bank-item.vue';
import { getVolunteerAccountInfo } from "@/api/mine";
import {
	onShow
} from '@dcloudio/uni-app';
const bankList = ref([
    // {
    //     bankCode: 'ABC',
    //     bankName: '中国农业银行',
    //     cardType: '储蓄卡',
    //     cardCode: '5106365986893',
    //     color: 'linear-gradient(135deg, rgba(43, 102, 248, 1) 0%, rgba(27, 69, 178, 1) 100%), rgba(0, 0, 0, 0)'
    // },
    // {
    //     bankCode: 'ABC',
    //     bankName: '中国农业银行',
    //     cardType: '储蓄卡',
    //     cardCode: '5106365986893',
    //     color: 'linear-gradient(135deg, rgba(43, 102, 248, 1) 0%, rgba(27, 69, 178, 1) 100%), rgba(0, 0, 0, 0)'
    // },
])
const userType = uni.getStorageSync('userType') //读取本地存储
const data = ref({});
const onWithdrawal = () => {
    uni.navigateTo({
        url: '/pages_mine/pages/withdrawal/index'
    })
}

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

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

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

const init = async() => {
	try {
		uni.showLoading({
			title: '数据加载中...'
		});

		if(userType === 2){
			const res = await getVolunteerAccountInfo();
			data.value =res.data;			
		}
	} catch (error) {
		console.log('error', error);
		uni.showToast({
			title: error.msg,
			icon: 'error',
		});
	} finally {
		uni.hideLoading();
	}
}

onShow(()=>{
    init();
})

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