fix: nạp rút
This commit is contained in:
hiyu
parent
702bb551a9
commit
29c0b81f93
@ -1,3 +1,57 @@
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue";
|
||||
import axios from "@/axios";
|
||||
import API from "@/api";
|
||||
import { handleRequest } from "@/helpers/request";
|
||||
import { formatNumber, formatDateTime } from "@/helpers/format";
|
||||
import { showToast } from "vant";
|
||||
|
||||
const list = ref([]);
|
||||
const loading = ref(false);
|
||||
const finished = ref(false);
|
||||
const refreshing = ref(false);
|
||||
|
||||
const params = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
});
|
||||
|
||||
const onLoad = async () => {
|
||||
const data = await getData();
|
||||
loading.value = false;
|
||||
if (refreshing.value) {
|
||||
list.value = data;
|
||||
refreshing.value = false;
|
||||
return showToast("Làm mới thành công.");
|
||||
}
|
||||
|
||||
list.value.unshift(...data);
|
||||
if (data.length == 0) {
|
||||
finished.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const onRefresh = () => {
|
||||
params.page = 1;
|
||||
finished.value = false;
|
||||
loading.value = true;
|
||||
onLoad();
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
const res = await handleRequest(
|
||||
axios.get(API.TRANSACTION_HISTORY + "/" + "deposit", { params })
|
||||
);
|
||||
if (res.success) {
|
||||
params.page += 1;
|
||||
return res.data;
|
||||
}
|
||||
return [];
|
||||
};
|
||||
|
||||
onRefresh();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container page">
|
||||
<div class="header">
|
||||
@ -16,17 +70,49 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="van-pull-refresh">
|
||||
<div class="van-pull-refresh__track" style="transition-duration: 0ms">
|
||||
<div class="van-pull-refresh__head"></div>
|
||||
<div class="van-empty">
|
||||
<div class="van-empty__image">
|
||||
<img src="@/assets/images/common/empty-image-default.png" />
|
||||
</div>
|
||||
<p class="van-empty__description">Dữ liệu trống</p>
|
||||
<van-pull-refresh
|
||||
v-model="refreshing"
|
||||
@refresh="onRefresh"
|
||||
pulling-text="Kéo lên để làm mới..."
|
||||
loading-text="Đang tải..."
|
||||
loosing-text="Phát hiện có thể làm mới được"
|
||||
style="height: 100%; overflow: auto"
|
||||
>
|
||||
<van-empty description="Dữ liệu trống" v-if="!list.length" />
|
||||
<van-list
|
||||
v-else
|
||||
v-model:loading="loading"
|
||||
error-text="Lỗi"
|
||||
loading-text="Đang tải..."
|
||||
:finished="finished"
|
||||
finished-text=""
|
||||
@load="onLoad"
|
||||
>
|
||||
<div v-for="item in list" :key="item" class="item_list">
|
||||
<div class="topInfo">
|
||||
<span style="color: rgb(7, 193, 96)" v-if="item.status == 1"
|
||||
>Trả tiền</span
|
||||
>
|
||||
<span v-else-if="item.status == 0">Chưa thanh toán</span>
|
||||
<span style="color: rgb(7, 193, 96)" v-else
|
||||
>Thanh toán thất bại</span
|
||||
>
|
||||
<span>Số tiền：{{ formatNumber(item.amount) }}Đ</span>
|
||||
</div>
|
||||
<div class="desc">
|
||||
<span>Minh họa：{{ item.note }}</span>
|
||||
</div>
|
||||
<div class="time">
|
||||
<span>Thời gian nộp：{{ formatDateTime(item.createdAt) }}</span>
|
||||
</div>
|
||||
<div class="time" v-if="item.status !== 0">
|
||||
<span
|
||||
>Thời gian xem xét：{{ formatDateTime(item.updatedAt) }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,12 +1,19 @@
|
||||
<script setup>
|
||||
import { computed } from "vue"
|
||||
import { showFailToast } from "vant";
|
||||
import { useUserStore } from "@/store/user";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { formatNumber } from "@/helpers/format"
|
||||
// const router = useRouter();
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const { userInfo } = storeToRefs(userStore);
|
||||
|
||||
const withdrawLink = computed(() => {
|
||||
return userInfo.value.isSetBank ? "/withdraw" : "/Setbank";
|
||||
});
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="mine page">
|
||||
@ -73,7 +80,7 @@ const { userInfo } = storeToRefs(userStore);
|
||||
><span class="text">NẠP ĐIỂM</span>
|
||||
</router-link>
|
||||
<div class="line"></div>
|
||||
<router-link to="/Setbank" class="finance-item">
|
||||
<router-link :to="withdrawLink" class="finance-item">
|
||||
<i class="icon van-icon van-icon-idcard"></i
|
||||
><span class="text">RÚT ĐIỂM</span>
|
||||
</router-link>
|
||||
|
||||
@ -1,3 +1,19 @@
|
||||
<script setup>
|
||||
import { showFailToast } from "vant";
|
||||
import { useUserStore } from "@/store/user";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { formatNumber } from "@/helpers/format"
|
||||
import { computed } from "vue";
|
||||
// const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const { userInfo } = storeToRefs(userStore);
|
||||
|
||||
|
||||
const setBankLink = computed(() => {
|
||||
return userInfo.value.isSetPayPass ? "/BindCard" : "/SetPayPassword";
|
||||
});
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="container page">
|
||||
<div class="nav-bar van-nav-bar van-hairline--bottom">
|
||||
@ -12,7 +28,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper" style="background-color: #f2f2f5">
|
||||
<router-link to="/SetPayPassword" class="add-card">
|
||||
<router-link :to="setBankLink" class="add-card">
|
||||
<i class="van-icon van-icon-plus"></i
|
||||
><span>Thêm tài khoản ngân hàng</span>
|
||||
</router-link>
|
||||
|
||||
@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<div class="container page">
|
||||
<div class="nav-bar van-nav-bar van-hairline--bottom">
|
||||
<div class="van-nav-bar__content">
|
||||
<div @click="$router.go(-1)" class="van-nav-bar__left">
|
||||
<i
|
||||
class="van-icon van-icon-arrow-left"
|
||||
style="color: rgb(255, 255, 255)"
|
||||
></i>
|
||||
</div>
|
||||
<div class="van-nav-bar__title van-ellipsis">MẬT KHẨU RÚT TIỀN</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div
|
||||
class="van-cell-group van-cell-group--inset van-hairline--top-bottom"
|
||||
>
|
||||
<div class="van-cell van-field van-field--label-top">
|
||||
<div class="van-cell__title van-field__label van-field__label--top">
|
||||
<span>Mật khẩu rút tiền hiện tại</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Tạo Mật Khẩu Rút Tiền"
|
||||
class="van-field__control"
|
||||
style="color: #323233"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>Mật khẩu rút tiền mới</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Vui lòng nhập lại mật khẩu rút tiền mới"
|
||||
class="van-field__control"
|
||||
style="color: #323233"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>Nhập lại mật rút tiền mới</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Nhập Lại Mật Khẩu Rút Tiền Đã Tạo"
|
||||
class="van-field__control"
|
||||
style="color: #323233"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="sub-btn van-button van-button--default van-button--normal">
|
||||
<div class="van-button__content">
|
||||
<span class="van-button__text">Xác nhận</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
330
src/components/withdraw/BindCard.vue
Normal file
330
src/components/withdraw/BindCard.vue
Normal file
@ -0,0 +1,330 @@
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue";
|
||||
|
||||
import axios from "@/axios";
|
||||
import API from "@/api";
|
||||
import { handleRequest } from "@/helpers/request";
|
||||
import { showFailToast, showToast } from "vant";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const showBankSelect = ref(false);
|
||||
const formData = reactive({
|
||||
bankName: "",
|
||||
accountNumber: "",
|
||||
holder: "",
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
text: "Techcombank",
|
||||
value: "Techcombank",
|
||||
},
|
||||
{
|
||||
text: "Sacombank",
|
||||
value: "Sacombank",
|
||||
},
|
||||
{
|
||||
text: "Vietcombank",
|
||||
value: "Vietcombank",
|
||||
},
|
||||
{
|
||||
text: "Asia Commercial Bank ACB",
|
||||
value: "Asia Commercial Bank ACB",
|
||||
},
|
||||
{
|
||||
text: "DongA Bank",
|
||||
value: "DongA Bank",
|
||||
},
|
||||
{
|
||||
text: "Vietin Bank",
|
||||
value: "Vietin Bank",
|
||||
},
|
||||
{
|
||||
text: "BIDV",
|
||||
value: "BIDV",
|
||||
},
|
||||
{
|
||||
text: "Eximbank Vietnam",
|
||||
value: "Eximbank Vietnam",
|
||||
},
|
||||
{
|
||||
text: "Bank Central Asia",
|
||||
value: "Bank Central Asia",
|
||||
},
|
||||
{
|
||||
text: "Bank Negara Indonesia",
|
||||
value: "Bank Negara Indonesia",
|
||||
},
|
||||
{
|
||||
text: "Bank Rakyat Indonesia",
|
||||
value: "Bank Rakyat Indonesia",
|
||||
},
|
||||
{
|
||||
text: "Mandiri Bank",
|
||||
value: "Mandiri Bank",
|
||||
},
|
||||
{
|
||||
text: "CIMB Niaga",
|
||||
value: "CIMB Niaga",
|
||||
},
|
||||
{
|
||||
text: "VP",
|
||||
value: "VP",
|
||||
},
|
||||
{
|
||||
text: "MB",
|
||||
value: "MB",
|
||||
},
|
||||
{
|
||||
text: "Tien Phong Commercial",
|
||||
value: "Tien Phong Commercial",
|
||||
},
|
||||
{
|
||||
text: "AGRI BANK",
|
||||
value: "AGRI BANK",
|
||||
},
|
||||
{
|
||||
text: "LienVietPostBank",
|
||||
value: "LienVietPostBank",
|
||||
},
|
||||
{
|
||||
text: "SHB",
|
||||
value: "SHB",
|
||||
},
|
||||
{
|
||||
text: "PVcombank",
|
||||
value: "PVcombank",
|
||||
},
|
||||
{
|
||||
text: "SAIGON BANK",
|
||||
value: "SAIGON BANK",
|
||||
},
|
||||
{
|
||||
text: "SeABank",
|
||||
value: "SeABank",
|
||||
},
|
||||
{
|
||||
text: "ABBank",
|
||||
value: "ABBank",
|
||||
},
|
||||
{
|
||||
text: "Bac A Bank",
|
||||
value: "Bac A Bank",
|
||||
},
|
||||
{
|
||||
text: "Viet Capital Bank",
|
||||
value: "Viet Capital Bank",
|
||||
},
|
||||
{
|
||||
text: "MSB",
|
||||
value: "MSB",
|
||||
},
|
||||
{
|
||||
text: "KienLongBank",
|
||||
value: "KienLongBank",
|
||||
},
|
||||
{
|
||||
text: "NAMABANK",
|
||||
value: "NAMABANK",
|
||||
},
|
||||
{
|
||||
text: "NCB",
|
||||
value: "NCB",
|
||||
},
|
||||
{
|
||||
text: "HD Bank",
|
||||
value: "HD Bank",
|
||||
},
|
||||
{
|
||||
text: "OCB",
|
||||
value: "OCB",
|
||||
},
|
||||
{
|
||||
text: "VIB",
|
||||
value: "VIB",
|
||||
},
|
||||
{
|
||||
text: "SCB",
|
||||
value: "SCB",
|
||||
},
|
||||
{
|
||||
text: "SGB",
|
||||
value: "SGB",
|
||||
},
|
||||
{
|
||||
text: "VietABank",
|
||||
value: "VietABank",
|
||||
},
|
||||
{
|
||||
text: "BAOVIET Bank",
|
||||
value: "BAOVIET Bank",
|
||||
},
|
||||
{
|
||||
text: "VietBank",
|
||||
value: "VietBank",
|
||||
},
|
||||
{
|
||||
text: "PGBank",
|
||||
value: "PGBank",
|
||||
},
|
||||
{
|
||||
text: "SHBVN",
|
||||
value: "SHBVN",
|
||||
},
|
||||
{
|
||||
text: "WOO",
|
||||
value: "WOO",
|
||||
},
|
||||
{
|
||||
text: "UOB",
|
||||
value: "UOB",
|
||||
},
|
||||
{
|
||||
text: "SCVN",
|
||||
value: "SCVN",
|
||||
},
|
||||
{
|
||||
text: "VID",
|
||||
value: "VID",
|
||||
},
|
||||
{
|
||||
text: "HSBC",
|
||||
value: "HSBC",
|
||||
},
|
||||
{
|
||||
text: "HLB",
|
||||
value: "HLB",
|
||||
},
|
||||
{
|
||||
text: "CIMB",
|
||||
value: "CIMB",
|
||||
},
|
||||
{
|
||||
text: "MB BAN",
|
||||
value: "MB BAN",
|
||||
},
|
||||
];
|
||||
|
||||
const onConfirm = ({ selectedOptions }) => {
|
||||
formData.bankName = selectedOptions[0].value;
|
||||
showBankSelect.value = false;
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
if(!formData.bankName) {
|
||||
return showFailToast("Vui lòng chọn một ngân hàng.")
|
||||
}
|
||||
if(!formData.accountNumber) {
|
||||
return showFailToast("Vui lòng nhập số tài khoản.")
|
||||
}
|
||||
if(!formData.holder) {
|
||||
return showFailToast("Vui lòng nhập tên thật của bạn.")
|
||||
}
|
||||
|
||||
// const { password } = formData;
|
||||
|
||||
handleRequest(axios.post(API.BANK_LINK, formData)).then((res) => {
|
||||
if(res.success) {
|
||||
showToast("Thành công")
|
||||
router.push("/mine")
|
||||
} else {
|
||||
showFailToast(res.message ?? "Lỗi")
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container page">
|
||||
<div class="nav-bar van-nav-bar van-hairline--bottom">
|
||||
<div class="van-nav-bar__content">
|
||||
<div class="van-nav-bar__left" @click="router.go(-1)">
|
||||
<i
|
||||
class="van-icon van-icon-arrow-left"
|
||||
style="color: rgb(255, 255, 255)"
|
||||
></i>
|
||||
</div>
|
||||
<div class="van-nav-bar__title van-ellipsis">
|
||||
Liên kết số tài khoản ngân hàng
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-box">
|
||||
<div class="label">Vui lòng điền số tài khoản của bạn để rút tiền</div>
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-field" @click="showBankSelect = true">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>Tên ngân hàng</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input
|
||||
type="text"
|
||||
:value="formData.bankName"
|
||||
readonly="readonly"
|
||||
placeholder="Vui lòng chọn một ngân hàng"
|
||||
class="van-field__control"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>Số tài khoản</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input
|
||||
v-model="formData.accountNumber"
|
||||
type="tel"
|
||||
inputmode="numeric"
|
||||
placeholder="Vui lòng nhập số tài khoản ngân hàng"
|
||||
class="van-field__control"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>Tên</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input
|
||||
v-model="formData.holder"
|
||||
type="text"
|
||||
placeholder="Vui lòng nhập tên thật của bạn"
|
||||
class="van-field__control"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
Khách hàng thân ái,để bảo vệ sự an toàn cho tài sản của bạn,Vui lòng
|
||||
liên kết tên thật và cài đặt mật khẩu rút tiền,Nếu tên không khớp với
|
||||
tên tài khoản,sẽ không thể rút tiền.
|
||||
</p>
|
||||
</div>
|
||||
<button class="bindCard van-button van-button--default van-button--normal" @click="submit">
|
||||
<div class="van-button__content">
|
||||
<span class="van-button__text">Xác nhận liên kết tài số tài khoản</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<van-popup
|
||||
v-model:show="showBankSelect"
|
||||
confirm="Xác nhận"
|
||||
position="bottom"
|
||||
:style="{ height: '35%' }"
|
||||
>
|
||||
<van-picker
|
||||
title=""
|
||||
confirm-button-text="Xác nhận"
|
||||
cancel-button-text="Hủy"
|
||||
:columns="columns"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showBankSelect = false"
|
||||
/>
|
||||
</van-popup>
|
||||
</template>
|
||||
121
src/components/withdraw/Withdraw.vue
Normal file
121
src/components/withdraw/Withdraw.vue
Normal file
@ -0,0 +1,121 @@
|
||||
<script setup>
|
||||
import { reactive } from "vue";
|
||||
import { showFailToast } from "vant";
|
||||
import { useUserStore } from "@/store/user";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { formatNumber } from "@/helpers/format";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import axios from "@/axios";
|
||||
import API from "@/api";
|
||||
import { handleRequest } from "@/helpers/request";
|
||||
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const { userInfo } = storeToRefs(userStore);
|
||||
|
||||
const formData = reactive({
|
||||
amount: "",
|
||||
password_withdraw: "",
|
||||
});
|
||||
|
||||
const submit = () => {
|
||||
if (isNaN(formData.amount) || formData.amount <= 0) {
|
||||
return showFailToast("Vui lòng điền số tiền chính xác.");
|
||||
}
|
||||
if (!formData.password_withdraw) {
|
||||
return showFailToast("Vui lòng nhập mật khẩu rút tiền");
|
||||
}
|
||||
handleRequest(axios.post(API.TRANSACTION_WITHDRAW, formData)).then((res) => {
|
||||
if (res.success) {
|
||||
showFailToast("Rút tiền thành công.");
|
||||
router.push("/mine");
|
||||
} else {
|
||||
showFailToast(res.message ?? "Lỗi");
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container page">
|
||||
<div class="nav-bar van-nav-bar van-hairline--bottom">
|
||||
<div class="van-nav-bar__content">
|
||||
<div class="van-nav-bar__left" @click="router.go(-1)">
|
||||
<i
|
||||
class="van-icon van-icon-arrow-left"
|
||||
style="color: rgb(255, 255, 255)"
|
||||
></i>
|
||||
</div>
|
||||
<div class="van-nav-bar__title van-ellipsis">Trung tâm rút tiền</div>
|
||||
<div class="van-nav-bar__right" @click="router.push('/WithdrawRecord')">
|
||||
<span class="nav-right">Hồ sơ rút điểm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="withdrawMoney">
|
||||
<span>Số điểm rút (Đ)</span>
|
||||
<div class="money">
|
||||
<div class="moneyNumber">
|
||||
<div class="van-cell van-field">
|
||||
<div
|
||||
class="van-cell__value van-cell__value--alone van-field__value"
|
||||
>
|
||||
<div class="van-field__body">
|
||||
<input
|
||||
v-model.number="formData.amount"
|
||||
type="text"
|
||||
inputmode="decimal"
|
||||
class="van-field__control"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="all">Tất cả</span>
|
||||
</div>
|
||||
<div class="money" style="width: 100%">
|
||||
<div class="moneyNumber" style="width: 100%">
|
||||
<div
|
||||
class="van-cell van-field"
|
||||
style="font-size: 16px; width: 100%"
|
||||
>
|
||||
<div
|
||||
class="van-cell__value van-cell__value--alone van-field__value"
|
||||
>
|
||||
<div class="van-field__body">
|
||||
<input
|
||||
v-model="formData.password_withdraw"
|
||||
type="password"
|
||||
placeholder="Vui lòng nhập lại mật khẩu rút tiền mới"
|
||||
class="van-field__control"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="information">
|
||||
<div class="description">
|
||||
<span class="van-popover__wrapper"
|
||||
><i class="van-icon van-icon-info-o"></i>
|
||||
Mô tả hạn ngạch
|
||||
</span>
|
||||
</div>
|
||||
<div class="balance">
|
||||
<span>VND：</span><span class="number">1000Đ</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="withdraw_btn van-button van-button--default van-button--normal"
|
||||
@click="submit"
|
||||
>
|
||||
<div class="van-button__content">
|
||||
<span class="van-button__text"> RÚT ĐIỂM ngay lập tức</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
121
src/components/withdraw/WithdrawRecord.vue
Normal file
121
src/components/withdraw/WithdrawRecord.vue
Normal file
@ -0,0 +1,121 @@
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue";
|
||||
import axios from "@/axios";
|
||||
import API from "@/api";
|
||||
import { handleRequest } from "@/helpers/request";
|
||||
import { formatNumber, formatDateTime } from "@/helpers/format";
|
||||
import { showToast } from "vant";
|
||||
|
||||
const list = ref([]);
|
||||
const loading = ref(false);
|
||||
const finished = ref(false);
|
||||
const refreshing = ref(false);
|
||||
|
||||
const params = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
});
|
||||
|
||||
const onLoad = async () => {
|
||||
const data = await getData();
|
||||
loading.value = false;
|
||||
if (refreshing.value) {
|
||||
list.value = data;
|
||||
refreshing.value = false;
|
||||
return showToast("Làm mới thành công.");
|
||||
}
|
||||
|
||||
list.value.unshift(...data);
|
||||
if (data.length == 0) {
|
||||
finished.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const onRefresh = () => {
|
||||
params.page = 1;
|
||||
finished.value = false;
|
||||
loading.value = true;
|
||||
onLoad();
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
const res = await handleRequest(
|
||||
axios.get(API.TRANSACTION_HISTORY + "/" + "withdrawal", { params })
|
||||
);
|
||||
if (res.success) {
|
||||
params.page += 1;
|
||||
return res.data;
|
||||
}
|
||||
return [];
|
||||
};
|
||||
|
||||
onRefresh();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container page">
|
||||
<div class="header">
|
||||
<div class="nav-bar van-nav-bar van-hairline--bottom">
|
||||
<div class="van-nav-bar__content">
|
||||
<div @click="$router.go(-1)" class="van-nav-bar__left">
|
||||
<i
|
||||
class="van-icon van-icon-arrow-left"
|
||||
style="color: rgb(255, 255, 255)"
|
||||
></i>
|
||||
</div>
|
||||
<div class="van-nav-bar__title van-ellipsis">Hồ sơ rút điểm</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<van-pull-refresh
|
||||
v-model="refreshing"
|
||||
@refresh="onRefresh"
|
||||
pulling-text="Kéo lên để làm mới..."
|
||||
loading-text="Đang tải..."
|
||||
loosing-text="Phát hiện có thể làm mới được"
|
||||
style="height: 100%; overflow: auto"
|
||||
>
|
||||
<van-empty description="Dữ liệu trống" v-if="!list.length"/>
|
||||
<van-list
|
||||
v-else
|
||||
v-model:loading="loading"
|
||||
error-text="Lỗi"
|
||||
loading-text="Đang tải..."
|
||||
:finished="finished"
|
||||
finished-text=""
|
||||
@load="onLoad"
|
||||
>
|
||||
<div v-for="item in list" :key="item" class="item_list">
|
||||
<div class="topInfo">
|
||||
<span style="color: rgb(7, 193, 96)" v-if="item.status == 1"
|
||||
>Trả tiền</span
|
||||
>
|
||||
<span v-else-if="item.status == 0">Chưa thanh toán</span>
|
||||
<span style="color: rgb(7, 193, 96)" v-else
|
||||
>Thanh toán thất bại</span
|
||||
>
|
||||
<span>Số tiền：{{ formatNumber(item.amount) }}Đ</span>
|
||||
</div>
|
||||
<div class="desc">
|
||||
<span>Minh họa：{{ item.note }}</span>
|
||||
</div>
|
||||
<div class="time">
|
||||
<span>Thời gian nộp：{{ formatDateTime(item.createdAt) }}</span>
|
||||
</div>
|
||||
<div class="time" v-if="item.status !== 0">
|
||||
<span
|
||||
>Thời gian xem xét：{{ formatDateTime(item.updatedAt) }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.van-empty__description {
|
||||
color: #969799;
|
||||
}
|
||||
</style>
|
||||
@ -124,12 +124,12 @@ const routes = [
|
||||
meta: { auth: true },
|
||||
component: () => import("@/components/mine/Personalreport.vue"),
|
||||
},
|
||||
{
|
||||
path: "/RechargeRecord",
|
||||
name: "RechargeRecord",
|
||||
meta: { auth: true },
|
||||
component: () => import("@/components/mine/RechargeRecord.vue"),
|
||||
},
|
||||
// {
|
||||
// path: "/RechargeRecord",
|
||||
// name: "RechargeRecord",
|
||||
// meta: { auth: true },
|
||||
// component: () => import("@/components/mine/RechargeRecord.vue"),
|
||||
// },
|
||||
{
|
||||
path: "/GameRecord",
|
||||
name: "GameRecord",
|
||||
@ -173,6 +173,27 @@ const routes = [
|
||||
component: () => import("@/components/withdraw/SetPayPassword.vue"),
|
||||
},
|
||||
|
||||
{
|
||||
path: "/BindCard",
|
||||
name: "BindCard",
|
||||
meta: { auth: true },
|
||||
component: () => import("@/components/withdraw/BindCard.vue"),
|
||||
},
|
||||
|
||||
{
|
||||
path: "/withdraw",
|
||||
name: "withdraw",
|
||||
meta: { auth: true },
|
||||
component: () => import("@/components/withdraw/Withdraw.vue"),
|
||||
},
|
||||
|
||||
{
|
||||
path: "/WithdrawRecord",
|
||||
name: "WithdrawRecord",
|
||||
meta: { auth: true },
|
||||
component: () => import("@/components/withdraw/WithdrawRecord.vue"),
|
||||
},
|
||||
|
||||
{
|
||||
path: "/:pathMatch(.*)*",
|
||||
redirect: { name: "home" },
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user