123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210 |
- <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>
|