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">{{ w_key }}</view>
                <up-icon name="arrow-right"></up-icon>
            </view>
        </view>
        <view v-if="w_key === '支付宝账户'">

            <view class="withdrawal-item">
                <label class="withdrawal-label">支付宝账户名</label>
            </view>
            <view class="price-box">
                <input class="price-input2" placeholder="请输入支付宝账户名" border="none" v-model="priceData.name"
                     />
            </view>
            <view class="withdrawal-item">
                <label class="withdrawal-label">支付宝账号</label>
            </view>
            <view class="price-box">
                <input class="price-input2" placeholder="请输入支付宝账号" border="none" v-model="priceData.code"
                     />
            </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="priceData.price" @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';
import { getVolunteerAccountInfo,getAccountInfo,submitAmountApply} from "@/api/mine";
import {
    onShow,
} from "@dcloudio/uni-app";
const actions = [
    {
        name: '支付宝账户',
    }
]
const userType = uni.getStorageSync('userType') //读取本地存储
const w_key = ref('支付宝账户');
const show = ref(false);

const maxPrice = ref(0);

const priceData = ref({
    // price: '0.01',
    // name: '搁置',
    // code: '18696601943'

    price: '',
    name: '',
    code: ''
})


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

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

const errors =  (e) => {
    uni.showToast({
        title: e,
        icon: 'none',
        })
}

const handleCheck = ()=> {
    const is =priceData.value.price && priceData.value.price>0&&priceData.value.name && priceData.value.code;
    if(is){
        return true
    }
    !priceData.value.price && errors('请输入提现金额');
    priceData.value.price<=0 &&  errors('请输入正确的金额');
    !priceData.value.name&&  errors('请输入账户名');
    !priceData.value.code&&  errors('请输入账号');
    return false
}
const onSubmit = () => {
	console.log("TCL: priceData", priceData.value)
    // init();
  
  const type = handleCheck();
    

  type && submitAmountApply({
        takeAmount:priceData.value.price,
        alipayName:priceData.value.name,
        alipayAccountNo:priceData.value.code,
        payType:'2'
    }).then(res => {
        if(res.code === 200){
            uni.showToast({
                title: '提交成功',
                icon: 'success'
            })
            setTimeout(() => {
                uni.redirectTo({ url: `/pages_mine/pages/wallet/index` });
            }, 800)
        }
    })
}

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

const init = async() => {
	try {
		uni.showLoading({
			title: '数据加载中...'
		});
        
		if(userType === 2){
			const res = await getVolunteerAccountInfo();
            maxPrice.value = res.data.balance;
		}
        if(userType === 1){
            const res = await getAccountInfo();
            maxPrice.value = res.data.balance;
        }
	} catch (error) {
		console.log('error', error);
		uni.showToast({
			title: error.msg,
			icon: 'error',
		});
	} finally {
		uni.hideLoading();
	}
}

onShow(()=>{
    init();
})
</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;
        }
        .price-input2 {
            flex: 1;
            height: 38px;
            padding: 0 12px;
            font-size: 16px;
        }
    }
}
</style>