anmo/staff_uniapp/src/packages/pages/cash_out/cash_out.vue

<template>
    <page-meta :page-style="$theme.pageStyle">
        <!-- #ifndef H5 -->
        <navigation-bar
            :front-color="$theme.navColor"
            :background-color="$theme.navBgColor"
        />
        <!-- #endif -->
    </page-meta>
	<!-- 余额、保证金提现 -->
    <view class="px-2 mt-4">
        <view class="bg-white rounded-lg py-4 px-2">
            <view>提现金额</view>
            <view class="bg-page rounded-lg p-4 flex items-center mt-2">
                <text class="text-4xl font-bold">¥</text>
                <u-input
                    v-model="formData.money"
                    placeholder="请输入自定义金额"
                    class="ml-2"
                ></u-input>
            </view>
            <view class="mt-4 text-info flex items-center">
                <text>可提现{{ formData.apply_type == WithdrawEnum.COMMISSION ? '余额':'保证金' }}：</text>
                <text v-if="formData.apply_type == WithdrawEnum.COMMISSION">¥{{ config.money }}</text>
                <text v-if="formData.apply_type == WithdrawEnum.EARNEST">¥{{ config.deposit }}</text>
                <text class="ml-2 text-primary" @click="allCashOut">全部提现</text>
                <text class="ml-auto text-sm" v-if="formData.apply_type == WithdrawEnum.COMMISSION">提现手续费{{ config.service_charge }}%</text>
            </view>
        </view>
        <view class="mt-4">
            <view class="flex items-center">
                <view class="block"></view>
                <view class="text-lg font-medium ml-2">选择提现账户</view>
            </view>
            <view class="mt-4">
                <view
                    @click="selectType(item.type)"
                    v-for="(item, index) in config.way_list"
                    :key="index"
                    class="bg-white p-4 rounded-lg flex items-center mb-2"
                >
                    <u-image
                        v-if="item.type == 1"
                        border-radius="16rpx"
                        width="50rpx"
                        height="50rpx"
                        :src="wechatIcon"
                    ></u-image>
                    <u-image
                        v-if="item.type == 2"
                        border-radius="16rpx"
                        width="50rpx"
                        height="50rpx"
                        :src="aliIcon"
                    ></u-image>
                    <u-image
                        v-if="item.type == 3"
                        border-radius="16rpx"
                        width="50rpx"
                        height="50rpx"
                        :src="bankIcon"
                    ></u-image>
                    <view class="flex flex-col justify-between ml-2">
                        <view class="font-bold text-lg"
                            >提现至{{
                                item.type == 1 ? '微信' : item.type == 2 ? '支付宝' : '银行卡'
                            }}</view
                        >
                        <view class="text-sm text-info" @click.stop="goPage('/packages/pages/bind_edit_cash_out/index?type='+item.type)">
							<text>{{ item.config.name?.length ? item.config.name + ' ' + (item.type == 1 ? item.config.mobile : item.type == 2 ? item.config.account : item.type == 3 ? item.config.bank_card : '') : '请设置提现账户' }}</text>
							<u-icon name="arrow-right" color="#909399" size="22rpx"></u-icon>
                        </view>
                    </view>
                    <checkbox-mark
                        :select="item.type == formData.type"
                        class="ml-auto"
                    ></checkbox-mark>
                </view>
				<view class="text-muted text-sm">温馨提示：{{ config.tips }}</view>
            </view>
        </view>
        <bottom @click="cashOut"></bottom>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import bottom from './components/bottom.vue'
import { getCashOutConfig, toCashOut } from '@/api/cashOut'
import checkboxMark from '@/components/checkbox-mark/index.vue'
import wechatIcon from '@/packages/static/images/wechat.png'
import aliIcon from '@/packages/static/images/ali.png'
import bankIcon from '@/packages/static/images/bank.png'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { WithdrawEnum } from '@/enums/withdraw'

//提现配置
const config = ref<any>({})
//获取配置
const getConfig = async () => {
    config.value = await getCashOutConfig()
}

//提现表单
const formData = ref<any>({
    money: '',
    type: '',
	apply_type: 0, //1-佣金提现；2-保证金提现；
})

//提现
const cashOut = async () => {
    await toCashOut(formData.value)
    uni.navigateTo({
        url: `/packages/pages/cash_out_record/cash_out_record?apply_type=${formData.value.apply_type}`
    })
}

//选择提现方式
const selectType = (type: number | string) => {
    formData.value.type = type
}

const allCashOut = () => {
	if(formData.value.apply_type == WithdrawEnum.COMMISSION) {
		formData.value.money = config.value.money
	}else {
		formData.value.money = config.value.deposit
	}
}

//页面跳转
const goPage = (url: string) => {
    uni.navigateTo({ url: url })
}

onShow(() => {
    getConfig()
})

onLoad((options) => {
    formData.value.apply_type = options.apply_type || 0
})
</script>

<style lang="scss" scoped>
.block {
    width: 5px;
    height: 50rpx;
    background-color: var(--color-primary, #0b66ef);
}
</style>