fix: nạp rút

src/components/deposit/RechargeRecord.vue

@@ -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">
+      <van-pull-refresh
-        <div class="van-pull-refresh__track" style="transition-duration: 0ms">
+        v-model="refreshing"
-          <div class="van-pull-refresh__head"></div>
+        @refresh="onRefresh"
-          <div class="van-empty">
+        pulling-text="Kéo lên để làm mới..."
-            <div class="van-empty__image">
+        loading-text="Đang tải..."
-              <img src="@/assets/images/common/empty-image-default.png" />
+        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>
-            <p class="van-empty__description">Dữ liệu trống</p>
           </div>
-        </div>
+        </van-list>
-      </div>
+      </van-pull-refresh>
     </div>
   </div>
 </template>

src/components/mine/Mine.vue

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

src/components/setting/SetBank.vue

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

src/components/withdraw/BinCard.vue

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

src/components/withdraw/BindCard.vue

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

src/components/withdraw/Withdraw.vue

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

src/components/withdraw/WithdrawRecord.vue

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

src/router/index.js

@@ -124,12 +124,12 @@ const routes = [
     meta: { auth: true },
     component: () => import("@/components/mine/Personalreport.vue"),
   },
-  {
+  // {
-    path: "/RechargeRecord",
+  //   path: "/RechargeRecord",
-    name: "RechargeRecord",
+  //   name: "RechargeRecord",
-    meta: { auth: true },
+  //   meta: { auth: true },
-    component: () => import("@/components/mine/RechargeRecord.vue"),
+  //   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" },