feat: 上线银行模块

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: {