feat: 上线银行模块

2024-03-14 18:32:58 +08:00
parent 069e411dc4
commit e4f89e5a05
11 changed files with 230 additions and 47 deletions
--- a/Yi.Bbs.Vue3/src/views/bank/Index.vue
+++ b/Yi.Bbs.Vue3/src/views/bank/Index.vue
@@ -4,7 +4,7 @@
    <div>
      <ExchangeRate :option="statisOptions" />
      <div class="div-show">
-        <p class="p-rate">当前实时利息：<span>110%</span>（可获取投入的百分之110%的本金）</p>
+        <p class="p-rate">当前实时利息：<span>130%</span>（可获取投入的百分之130%的本金）</p>
        <el-button type="primary" @click="applying()"><el-icon>
            <AddLocation />
          </el-icon>申领银行卡</el-button>
@@ -12,48 +12,132 @@
    </div>
    <el-divider />
    <div>
-      <el-row :gutter="20">
-        <el-col :span=8 v-for="item in bankCardList">
-          <BankCard></BankCard>
+      <el-row :gutter="20" v-if="bankCardList.length > 0">
+
+        <el-col :span=8 v-for="item in bankCardList" :key="item.id">
+          <BankCard :card="item" @handlerDeposit="handlerDeposit(item.id)" @handlerDraw="sendDraw(item.id)"></BankCard>
        </el-col>
      </el-row>
-
+      <div v-else> <el-alert title="当前暂未拥有银行卡，请申请！" type="info" center :closable="false" /></div>
    </div>
+
+    <el-dialog v-model="depositDialogVisible" title="输入您的存款金额，最低不能少于50，该卡最大上限100" width="600">
+      <el-form :model="depositForm" ref="depositFormRef"  >
+        <el-form-item label="存入金额" prop="number">
+          <el-input-number v-model="depositForm.number" :min="50" :max="100"  autocomplete="off"/>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="depositDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="sendDeposit">
+            确认存入该卡中
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
  </div>
 </template>
 <script setup>
 import BankCard from "./components/BankCard.vue"
 import ExchangeRate from "./components/ExchangeRateChart.vue"
-import { getBankCardList, applyingBankCard, getInterestList } from '@/apis/bankApi'
+import { getBankCardList, applyingBankCard, getInterestList, depositMoney,drawMoney } from '@/apis/bankApi'
 import useAuths from '@/hooks/useAuths.js';
-import { computed, ref,onMounted } from "vue";
-
+import { computed, ref, onMounted,reactive } from "vue";
+import useUserStore from "@/stores/user";
 const { isLogin } = useAuths();
 const bankCardList = ref([]);
+const interestList = ref([]);
+const depositForm = ref({
+  cardId: null,
+  number: 50
+});
+const userStore=useUserStore();
+
+const depositFormRef = ref(null)
+
+const depositDialogVisible = ref(false);

-const interestList=ref([]);
 const refreshData = async () => {

  if (isLogin) {
-  const {data} = await getBankCardList();
-  bankCardList.value=data;
+    const { data } = await getBankCardList();
+    bankCardList.value = data;
  }

-   const {data2:data}  = await getInterestList();
-  interestList.value =data;
+  const { data2: data } = await getInterestList();
+  interestList.value = data;
 }

 onMounted(async () => {
  await refreshData();
 })
+
+//申请银行卡
 const applying = async () => {
- // await applyingBankCard();
+
+  ElMessageBox.confirm(
+    '现在要向行长申领银行卡吗？行长会根据你的【等级】信誉可为你开通不同数量的银行卡',
+    '提交申请',
+    {
+      confirmButtonText: '申请',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(async () => {
+      await applyingBankCard();
+      ElMessage({
+        type: 'success',
+        message: '领取成功',
+      })
+      await refreshData();
+    });
  //刷新一下
-  await refreshData();
+
 }

+//打开存款面板
+const handlerDeposit = (cardId) => {
+  depositForm.value.cardId = cardId;
+  depositDialogVisible.value = true;
+}
+//进行提款操作
+const sendDraw=async (cardId)=>{
+  ElMessageBox.confirm(
+    '确定现在进行提款吗？如果提前提款，将只能获取存入的本金',
+    '提款',
+    {
+      confirmButtonText: '确认提款',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(async () => {
+      await drawMoney(cardId)
+      await refreshData();
+      await userStore.getInfo();
+      ElMessage({
+        type: 'success',
+        message: '钱钱提款成功',
+      })
+    });

-const statisOptions = computed( () => {
+
+}
+
+//进行存款操作
+const sendDeposit = async () => {
+  await depositMoney(depositForm.value.cardId, depositForm.value.number);
+  depositDialogVisible.value=false;
+      await refreshData();
+     await userStore.getInfo();
+      ElMessage({
+        type: 'success',
+        message: '钱钱提款成功',
+      })
+}
+const statisOptions = computed(() => {

  return {
    xAxis: {
--- a/Yi.Bbs.Vue3/src/views/bank/components/BankCard.vue
+++ b/Yi.Bbs.Vue3/src/views/bank/components/BankCard.vue
@@ -1,34 +1,99 @@
 <template>
    <div class="card">
-<div class="card-body">
-        银行卡-32659854213658541
-        <p>当前余额：100钱钱</p>
-        <p>状态：存款中</p>
-        <p>剩余定期提款时间还剩: 2天12小时</p>
-    </div>    
+        <div class="card-body"
+         :class="{ 'card-wait': cardData.bankCardState=='Wait',
+        'card-unused': cardData.bankCardState=='Unused'}">
+            银行卡-{{ cardData.id.substring(0,8) }}
+            <p>当前余额：{{ cardData.storageMoney }}钱钱</p>
+            <p>状态：{{ state }}</p>
+            <p v-if="cardData.bankCardState=='Wait'">剩余提款时间: {{ time }}</p>
+        </div>
        <div class="div-oper">
-            <el-button>存款</el-button><el-button type="danger">提款</el-button>
+            <el-button v-if="cardData.bankCardState=='Unused'" @click="handlerDeposit">存款</el-button>
+            <el-button v-if="cardData.bankCardState=='Wait'" type="danger" @click="handlerDraw(cardData.id)">提款</el-button>
        </div>
    </div>
 </template>
+<script setup>
+import {computed,watch,ref} from 'vue'
+const props = defineProps(['card'])
+const emit =defineEmits(['handlerDeposit'])
+const cardData=ref(props.card);
+const bankCardStateEnum=[
+{key:'Unused',value:"闲置中"},
+{key:'Wait',value:"存款中"}
+]
+const state=computed(()=>{
+   return bankCardStateEnum.filter(x=>x.key==cardData.value.bankCardState)[0].value
+})
+
+const time=computed(()=> {
+    // 将传入的字符串转换为时间对象
+    const inputDate = new Date(props.card.fulltermTime);
+    
+    // 获取当前时间
+    const currentDate = new Date();
+    
+    // 计算时间差（以毫秒为单位）
+    const timeDiff = inputDate.getTime() - currentDate.getTime();
+
+    // 如果传入时间早于当前时间，则返回"已满"提示
+    if (timeDiff <= 0) {
+        return "0";
+    }
+
+    // 将时间差转换为天、小时、分钟和秒
+    const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))+1;
+    // 返回剩余时间字符串
+    return `${days}天${hours}时`;
+}
+)
+
+const handlerDraw=(cardId)=>{
+    emit('handlerDraw',cardId)
+}
+
+//存款
+const handlerDeposit=()=>{
+    emit('handlerDeposit')
+};
+
+watch(
+  () => props.card,
+   (val, oldValue) => {
+    cardData.value=props.card;
+  },
+  { immediate: true, deep: true }
+);
+</script>
 <style scoped lang="scss">
+.card-wait
+{
+    background-color:brown;
+}
+.card-unused
+{ background-color: #FDC830;
+   
+}
 .card {
    height: 140px;
    margin: 10px 0;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
-    .card-body
-    {
+
+    .card-body {
        padding: 5px;
        height: 100px;
-        background-color: #FDC830;
-  color: #FFFFFF;
-      border-radius: 15px 15px 0 0;
+        // background-color: #FDC830;
+        color: #FFFFFF;
+        border-radius: 15px 15px 0 0;
    }
+
    .div-oper {
        padding: 5px;
        padding-right: 10px;
-        border-radius:0 0 15px 15px ;
+        border-radius: 0 0 15px 15px;
        background-color: #FFFFFF;
        text-align: end;
        height: 40px;
--- a/Yi.Bbs.Vue3/src/views/bank/components/ExchangeRateChart.vue
+++ b/Yi.Bbs.Vue3/src/views/bank/components/ExchangeRateChart.vue
@@ -1,7 +1,6 @@
 <template>
    <div>
    <div class="rate v-chart"  ref="statis">
-        银行利息利息趋势图
    </div>
   
    
--- a/Yi.Bbs.Vue3/src/views/bank/hooks/exchangeRateConfig.js
+++ b/Yi.Bbs.Vue3/src/views/bank/hooks/exchangeRateConfig.js
@@ -1,6 +1,6 @@
 export const exchangeRateConfig ={
  title: {
-    text: '银行利息趋势图'
+    text: '银行利息趋势图-（暂未开放）'
  },
  tooltip: {
    trigger: 'axis'