shenze-sysMan/src/views/airwallex/caPayment.vue

<template>
    <div class="airwallexPayment">
        <s-header :name="$t('airwallex.payout')" :noback="false"></s-header>
        <br>
        <!-- 卡片展示付款信息 -->
        <van-cell-group inset>
            <van-cell title="您支付" :value="payment_amount + ' ' + source_currency" />
            <van-cell title="付款日期" :value="payment_date" label="送达需要0~3个工作日" />
            <!-- <van-cell title="收款方收到" :value="payment_amount + ' ' + payment_currency" /> -->
        </van-cell-group>

        <br>
        <!-- 付款原因 -->
        <van-cell-group inset>
            <van-field v-model="reason" required is-link readonly label="付款原因" placeholder="选择付款原因"
                @click="showPicker = true" />
            <van-popup v-model:show="showPicker" round position="bottom">
                <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
            </van-popup>
        </van-cell-group>

        <br>
        <!-- 交易附言 -->
        <van-form>
            <van-cell-group inset>
                <van-field v-model="reference" required label="交易附言" placeholder="此信息可能会展示在收款方银行账单上，帮助收款方甄别此付款。"
                    :rules="[{ required: true, message: '此项为必填项' }]" />
            </van-cell-group>
        </van-form>

        <br>
        <!-- 备注（选填） -->
        <van-cell-group inset>
            <van-field v-model="text" label="备注" placeholder="选填：你可以通过它给审批人或其他用户提供额外信息。" />
        </van-cell-group>

        <div class="button-container">
            <van-button type="primary" class="cancel" @click="handleCancel">取消</van-button>
            <van-button type="primary" class="register" @click="handleSubmit">提交付款</van-button>
        </div>
    </div>
</template>
<script>
import sHeader from "@/components/SimpleHeader";
import { styleUrl } from '../../common/js/utils';
import { useRouter, useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';
import { createPayment } from '@/service/airwallex/index';


export default {
    components: { sHeader },
    setup() {

        const router = useRouter();
        const route = useRoute();
        let caPaymentReq;

        const source_amount = ref();
        const source_currency = ref();
        const payment_date = ref();
        const payment_currency = ref();
        const payment_amount = ref();
        const payment_method = ref();
        const beneficiary_id = ref();

        const reference = ref('');
        const regerenceError = ref(false);

        const loginUserStr = localStorage.getItem('loginUser');
        const loginUser = JSON.parse(loginUserStr);
        const adminId = loginUser.id;

        const columns = [
            'wages_salary',
            'donation_charitable_contribution',
            'personal_remittance',
            'transfer_to_own_account',
            'pension',
            'family_support',
            'living_expenses',
            'education_training',
            'travel',
            'investment_proceeds',
            'investment_capital',
            'loan_credit_repayment',
            'taxes',
            'goods_purchased',
            'business_expenses',
            'medical_services',
            'professional_business_services',
            'technical_services',
            'other_services',
            'construction',
            'freight',
            'real_estate',
            'audio_visual_services'
        ];

        const reason = ref('');
        const showPicker = ref(false);

        const onConfirm = (selectedItem) => {
            reason.value = selectedItem;
            showPicker.value = false;
        };

        const handleCancel = async () => {
            router.push({
                path: '/airwallex',
                query: {

                }
            })
        }

        onMounted(async () => {
            try {
                // 获取从 payout 页面获取到的参数
                // const beneficiaryId = router.currentRoute.value.query.beneficiaryId;
                // const payment_currency = router.currentRoute.value.query.payment_currency;
                // const payment_method = router.currentRoute.value.query.payment_method;
                // const source_currency = router.currentRoute.value.query.source_currency;
                // const source_amount = router.currentRoute.value.query.source_amount;
                // const fee_paid_by = router.currentRoute.value.query.fee_paid_by;
                // const payment_date = router.currentRoute.value.query.payment_date;

                beneficiary_id.value = route.query.beneficiary_id;
                payment_currency.value = route.query.payment_currency;
                payment_method.value = route.query.payment_method;
                source_currency.value = route.query.source_currency;

                payment_date.value = route.query.payment_date;
                // const fee_paid_by = route.query.fee_paid_by;

                // 注：这里的 payment_amount 用的是 source_amount
                // source_amount.value = route.query.source_amount;
                payment_amount.value = route.query.source_amount;

                console.log("beneficiary_id >>> " + beneficiary_id.value);
                console.log("payment_currency >>> " + payment_currency.value);
                console.log("payment_method >>> " + payment_method.value);
                console.log("source_currency >>> " + source_currency.value);
                console.log("payment_amount >>> " + payment_amount.value);

            } catch (error) {
                console.error(error);
                // 处理异常情况
            }
        });


        const handleSubmit = async () => {
            if (caPaymentReq !== null) {

                if (reference.value === '') {
                    regerenceError.value = true;
                    return;
                }
                console.log("reference:::", reference.value);
                console.log("reason:::", reason.value);

                const caPaymentReq = {
                    beneficiary_id: beneficiary_id.value,
                    payment_currency: payment_currency.value,
                    payment_method: payment_method.value,
                    reason: reason.value,
                    reference: reference.value,
                    // request_id: request_id,
                    source_currency: source_currency.value,
                    payment_amount: payment_amount.value,
                    adminId: adminId
                }

                // 请求后端接口
                const resultsResp = await createPayment(caPaymentReq);
                console.log("resultResp>>>", resultsResp);
                console.log("paymentId>>>", resultsResp.data);

                if (resultsResp) {
                    router.push({
                        path: '/paymentDetail',
                        query: {
                            paymentId: resultsResp.data,
                        }
                    })
                }
            }
        }


        styleUrl("airwallex");
        return {
            handleCancel,
            handleSubmit,
            source_amount,
            source_currency,
            payment_date,
            payment_currency,
            payment_amount,
            reason,
            columns,
            onConfirm,
            showPicker,
            reference
        }
    }
}

</script>