144 lines
6.1 KiB
Vue
144 lines
6.1 KiB
Vue
<script setup>
|
|
import { ref, watch } from 'vue';
|
|
import axios from 'axios';
|
|
import { usePageTitle } from '@/composables/Core/usePageTitle';
|
|
import { useNavigate } from '@/composables/Core/useNavigate';
|
|
|
|
usePageTitle('Send Money');
|
|
const { navigate } = useNavigate();
|
|
|
|
const search = ref('');
|
|
const users = ref([]);
|
|
const selectedUser = ref(null);
|
|
const amount = ref('');
|
|
const isSearching = ref(false);
|
|
const isSubmitting = ref(false);
|
|
|
|
const searchUsers = async () => {
|
|
if (search.value.length < 3) {
|
|
users.value = [];
|
|
return;
|
|
}
|
|
isSearching.value = true;
|
|
try {
|
|
const response = await axios.post('/Financial/Credit/SearchUsers', { q: search.value });
|
|
if (response.data.success) {
|
|
users.value = response.data.data;
|
|
}
|
|
} catch (error) {
|
|
console.error('Search failed');
|
|
} finally {
|
|
isSearching.value = false;
|
|
}
|
|
};
|
|
|
|
let searchTimeout;
|
|
watch(search, () => {
|
|
clearTimeout(searchTimeout);
|
|
searchTimeout = setTimeout(searchUsers, 500);
|
|
});
|
|
|
|
const handleTransfer = async () => {
|
|
if (!selectedUser.value || !amount.value) return;
|
|
|
|
isSubmitting.value = true;
|
|
try {
|
|
if (window.toastr) window.toastr.info('Processing transfer...');
|
|
const response = await axios.post('/Financial/Credit/Transfer', {
|
|
recipient_hash: selectedUser.value.hashkey,
|
|
amount: amount.value
|
|
});
|
|
if (response.data.success) {
|
|
if (window.toastr) window.toastr.success('Transfer successful!');
|
|
navigate({ page: 'MyWallet' });
|
|
}
|
|
} catch (error) {
|
|
if (window.toastr) window.toastr.error(error.response?.data?.message || 'Transfer failed');
|
|
} finally {
|
|
isSubmitting.value = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="send-money pb-5">
|
|
<div class="tf-container mt-4">
|
|
<div class="card border-0 shadow-sm rounded-25 p-4 mb-4">
|
|
<h5 class="fw_7 mb-4">Send Money</h5>
|
|
|
|
<!-- Recipient Search -->
|
|
<div v-if="!selectedUser" class="search-section">
|
|
<div class="form-group mb-3">
|
|
<label class="smallest fw_6 text-muted mb-1">Search Recipient</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-light border-0 rounded-start-pill ps-3">
|
|
<i :class="isSearching ? 'fas fa-spinner fa-spin' : 'fas fa-search'"></i>
|
|
</span>
|
|
<input v-model="search" type="text" class="form-control bg-light border-0 rounded-end-pill pe-3" placeholder="Name or mobile number">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="user-results">
|
|
<div v-for="user in users" :key="user.hashkey"
|
|
@click="selectedUser = user"
|
|
class="d-flex align-items-center gap-3 p-3 mb-2 bg-light rounded-20 cursor-pointer hover-up">
|
|
<div class="bg-primary text-white rounded-circle p-2" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<h6 class="fw_7 mb-0 text-dark text-truncate">{{ user.fullname || user.name }}</h6>
|
|
<p class="smallest text-muted mb-0">{{ user.mobile_number }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Selected User & Amount -->
|
|
<div v-else class="amount-section animate-fade-in">
|
|
<div class="d-flex align-items-center gap-3 p-3 mb-4 bg-soft-primary rounded-20 position-relative">
|
|
<div class="bg-primary text-white rounded-circle p-2" style="width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;">
|
|
<i class="fas fa-user fa-lg"></i>
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<p class="smallest fw_6 text-muted mb-0">Sending to</p>
|
|
<h6 class="fw_7 mb-0 text-dark text-truncate">{{ selectedUser.fullname || selectedUser.name }}</h6>
|
|
</div>
|
|
<button @click="selectedUser = null" class="btn btn-link py-0 smallest text-danger">Change</button>
|
|
</div>
|
|
|
|
<div class="form-group mb-4">
|
|
<label class="smallest fw_6 text-muted mb-1">Amount to Send</label>
|
|
<div class="input-group input-group-lg">
|
|
<span class="input-group-text bg-light border-0 rounded-start-pill ps-4 fw_7">₱</span>
|
|
<input v-model="amount" type="number" class="form-control bg-light border-0 rounded-end-pill pe-4 fw_8" placeholder="0.00">
|
|
</div>
|
|
</div>
|
|
|
|
<button @click="handleTransfer"
|
|
:disabled="isSubmitting || !amount"
|
|
class="btn btn-primary rounded-pill w-100 py-3 fw_7 shadow-sm transition-all">
|
|
<i v-if="isSubmitting" class="fas fa-spinner fa-spin me-2"></i>
|
|
Confirm Transfer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.rounded-25 { border-radius: 25px; }
|
|
.rounded-20 { border-radius: 20px; }
|
|
.bg-soft-primary { background-color: rgba(var(--primary-rgb), 0.1); }
|
|
.cursor-pointer { cursor: pointer; }
|
|
.hover-up:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
|
|
.smallest { font-size: 0.75rem; }
|
|
.transition-all { transition: all 0.2s ease; }
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: scale(0.95); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
|
|
</style>
|