leromro-mini/pages_mine/pages/withdrawal/index.vue

<template>
    <view class="withdrawal-main">
        <view class="withdrawal-item">
            <label class="withdrawal-label">提现到账</label>
            <view class="withdrawal-item-right" @click="openSheet">
                <view class="withdrawal-text">微信零钱</view>
                <up-icon name="arrow-right"></up-icon>
            </view>
        </view>
        <view class="withdrawal-item" >
            <label class="withdrawal-label">提现金额</label>
        </view>
        <view class="price-box">
            <up-icon name="rmb" size="28" color="rgba(0, 0, 0, 1)"></up-icon>
            <input class="price-input" placeholder="请输入提现金额" border="none" v-model="priceValue" @change="change" />
        </view>
        <view class="withdrawal-item">
            <label class="withdrawal-label">可提现余额  <up-icon name="rmb"></up-icon>{{ maxPrice }}</label>
            <view class="withdrawal-item-right" @click="onMaxChange">
                <view class="withdrawal-text">全部提现</view>
            </view>
        </view>

        <view style="margin-top: 45px;">
            <up-button type="primary" text="确定提现" @click="onSubmit" ></up-button> 
        </view>


        <up-action-sheet
			:show="show"
			@close="close"
			@select="select"
			:actions="actions"
		>
		</up-action-sheet>
    </view>
</template>

<script setup>
import { ref } from 'vue';

const actions = [
    {
        name: '微信零钱',
    }
]

const show = ref(false);

const maxPrice = ref(1200);



const priceValue = ref('');
const change = (e) => {
    console.log('change', e);
    const regex = /^\d*\.?\d*$/;
    if (!regex.test(e.detail.value)) {
        priceValue.value = priceValue.value.replace(/[^\d.]/g, '');
    }
};

const openSheet = (index) => {
    show.value = true;
}
const close = () => {
    show.value = false;
}
const select = (index) => {
    console.log('select', index);
}

const onSubmit = () => {
    uni.showToast({
        title: '提交成功',
        icon: 'none'
    })
}

const onMaxChange = () => {
    priceValue.value = maxPrice.value;
}

</script>

<style lang="scss" scoped>
.withdrawal-main {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #fff;
    padding: 0 12px;

    .withdrawal-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;

        .withdrawal-label {
            font-size: 14px;
            font-weight: 500;
            line-height: 20.27px;
            color: rgba(153, 153, 153, 1);

            display: flex;
            align-items: center;
        }

        .withdrawal-item-right {
            display: flex;
            align-items: center;

            .withdrawal-text {
                font-size: 16px;
                font-weight: 700;
                line-height: 23.17px;
                color: rgba(0, 0, 0, 1);
                margin-right: 6px;
            }

        }
    }

    .price-box {
        display: flex;
        .price-input {
            flex: 1;
            height: 58px;
            padding: 0  12px;
            font-size: 28px;
        }
    }
}
</style>