jiuyiUniapp/jiuyi/pages/mine/balance/index.vue

<template>
    <!-- 余额 -->
    <view class="jy-balance-container underpainting">
        <JyCommonHead title="余额"></JyCommonHead>
        <view class="jy-balance-content ">
            <view class="df aifc fdc mt20 plr40">
                <text class="jy-balance-title">可用余额（元）</text>
                <text class="jy-balance-pcie">1.00</text>
            </view>
            <image class="mineBalance" :src="mineBalance" mode="aspectFit"></image>
            <view class="btn-group">
                <view class="jy-balance-btn cz">充值</view>
                <view @click="withdrawalPopup.open()" class="jy-balance-btn tx">提现</view>
            </view>
        </view> <!-- 明细变动 列表 -->
        <view class="jy-balance-list">
            <uni-section class="line" title="明细变动" @click="goto('/pages/mine/balance-details/index')">
                <template v-slot:default>
                    <JyBalanceItem></JyBalanceItem>
                </template>
                <template v-slot:right>
                    <uni-icons type="right"></uni-icons>
                </template>
            </uni-section>
        </view>
        <!-- 提现弹窗 -->
        <uni-popup ref="withdrawalPopup" type="center">
            <view class="jy-withdrawal-popup f1 bfff pr">
                <view class="title">
                    <text>输入提现账号</text>
                </view>
                <view class="close-btn" @click="withdrawalPopup.close()">×</view>
                <view class="p25">
                    <uni-forms :modelValue="formData">
                        <uni-forms-item label="输入卡号" name="name">
                            <uni-easyinput :inputBorder="false" type="text" suffixIcon="scan" v-model="formData.bankNub"
                                placeholder="点击输入本人银行卡号"></uni-easyinput>
                        </uni-forms-item>
                    </uni-forms>
                    <button class="save-btn" @click="savePost">保存</button>
                </view>
            </view>
        </uni-popup>
    </view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import JyCommonHead from '@/components/public/jy-common-head'
import JyBalanceItem from './components/jy-balance-item'

import mineBalance from '@/static/mine-balance.png'
const withdrawalPopup = ref(null)
const formData = reactive({
    bankNub: ''
})
const savePost = () => {
    console.log('我是保存');
    withdrawalPopup.close()
}
const goto = (url) => {
    uni.navigateTo({
        url
    })
}
</script>
<style lang="scss" scoped>
.jy-balance-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 40rpx;

    .jy-balance-content {
        background: #FFFFFF;
        height: 318rpx;
        width: 100%;
        margin-top: 60rpx;
        border-radius: 20rpx;
        z-index: 1;

        .jy-balance-title {
            font-size: 28rpx;
            color: #666666;
        }

        .jy-balance-pcie {
            font-size: 72rpx;
            color: #3D3D3D;
            font-weight: 600;
        }

        .mineBalance {
            width: 200rpx;
            height: 224rpx;
            position: absolute;
            top: 60rpx;
            right: 60rpx;
        }

        .btn-group {
            display: flex;
            margin-top: 66rpx;


            .jy-balance-btn {
                margin: 0 20rpx;
                height: 84rpx;
                width: 323rpx;
                border-radius: 2306rpx;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .tx {
                font-size: 32rpx;
                color: #FFFFFF;
                background: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
            }

            .cz {
                color: #333333;
                font-size: 32rpx;
                border: 2rpx solid #DDDDDD;
            }
        }
    }

    .jy-balance-list {
        margin-top: 20rpx;
        width: 100%;
        border-radius: 20rpx;

    }



    ::v-deep .uni-section {
        border-radius: 20rpx;

        .uni-section__content-title {
            color: #333333;
            font-size: 32rpx !important;
            font-weight: 600;
        }
    }


}
</style>