添加支付中心，修改404页面

src/components/DataTable.vue

@@ -2,49 +2,104 @@
   <div>
     <div class="card">
       <div class="card-body">
-        <h5 class="card-title">{{ title }}</h5>
-        <p>DataTables has most features enabled by default, so all you need to do to use it with your own tables is to
-          call the construction function: <code>$().DataTable();</code>.</p>
+        <h5 class="card-title text-center card-header">{{ title }}</h5>
         <div id="zero-conf_wrapper" class="dataTables_wrapper dt-bootstrap4">
-          <div class="row">
-            <div class="col-sm-12 col-md-6">
-              <div class="dataTables_length" id="zero-conf_length"><label>展示 <select name="zero-conf_length"
-                    aria-controls="zero-conf" class="custom-select custom-select-sm form-control form-control-sm"
-                    v-model="pageSize">
+          <div class="row align-items-center">
+            <div class="col-sm-12 col-md-6 d-flex align-items-center">
+              <div class="dataTables_length" id="zero-conf_length">
+                <label class="d-flex align-items-center" style="white-space: nowrap">
+                  展示
+                  <select
+                    name="zero-conf_length"
+                    aria-controls="zero-conf"
+                    class="custom-select custom-select-sm form-control form-control-sm mx-2"
+                    v-model="pageSize"
+                  >
                     <option value="10">10</option>
                     <option value="25">25</option>
                     <option value="50">50</option>
                     <option value="100">100</option>
-                  </select>条数据</label></div>
+                  </select>
+                  条数据
+                </label>
+              </div>
+              <div class="ms-3">
+                <label class="d-flex align-items-center" style="white-space: nowrap">
+                  搜索:
+                  <input
+                    type="search"
+                    class="form-control form-control-sm ms-2"
+                    placeholder="请输入关键字"
+                    aria-controls="zero-conf"
+                  />
+                  <button class="btn btn-sm btn-secondary ms-2" @click="handleSearch">
+                    搜索
+                  </button>
+                </label>
+              </div>
             </div>
-            <div class="col-sm-12 col-md-6">
-              <div id="zero-conf_filter" class="dataTables_filter"><label>搜索:<input type="search"
-                    class="form-control form-control-sm" placeholder="" aria-controls="zero-conf"></label></div>
+            <div class="col-sm-12 col-md-6 text-center">
+              <button class="btn btn-sm btn-primary ms-2" @click="handleAddUser">
+                添加
+              </button>
+              <button class="btn btn-sm btn-danger ms-2" @click="handleBatchDelete">
+                批量删除
+              </button>
             </div>
           </div>
           <div class="row">
             <div class="col-sm-12">
-              <table id="zero-conf" class="display dataTable" style="width:100%" role="grid"
-                aria-describedby="zero-conf_info">
+              <table
+                id="zero-conf"
+                class="display dataTable"
+                style="width: 100%"
+                role="grid"
+                aria-describedby="zero-conf_info"
+              >
                 <thead>
                   <tr role="row">
-                    <th class="sorting_asc" tabindex="0" aria-controls="zero-conf" rowspan="1" colspan="1"
-                      aria-sort="ascending" aria-label="Name: activate to sort column descending"
-                      style="width: 85.5469px;" v-for="(item, index) in headers" :key="index">{{ item.text }}</th>
+                    <th
+                      class="sorting_asc"
+                      tabindex="0"
+                      aria-controls="zero-conf"
+                      rowspan="1"
+                      colspan="1"
+                      aria-sort="ascending"
+                      aria-label="Name: activate to sort column descending"
+                      style="width: 85.5469px"
+                      v-for="(item, index) in headers"
+                      :key="index"
+                    >
+                      {{ item.text }}
+                    </th>
                   </tr>
                 </thead>
                 <tbody>
-                  <tr role="row" v-for="(item, rowIndex) in rows" :key="rowIndex"
-                    :class="rowIndex % 2 ? 'even' : 'odd'">
+                  <tr
+                    role="row"
+                    v-for="(item, rowIndex) in rows"
+                    :key="rowIndex"
+                    :class="rowIndex % 2 ? 'even' : 'odd'"
+                  >
                     <td v-for="(header, colIndex) in headers" :key="colIndex">
                       <div v-if="header.type == null">
                         <span>{{ item[header.value] }}</span>
                       </div>
                       <div v-if="header.type == 'bool'">
-                        <span :class="['badge',item[header.value] ? 'bg-danger' : 'bg-success']">{{ item[header.value] ? '禁用' : '正常'}}</span>
+                        <span
+                          :class="[
+                            'badge',
+                            item[header.value] ? 'bg-danger' : 'bg-success',
+                          ]"
+                          >{{ item[header.value] ? "禁用" : "正常" }}</span
+                        >
                       </div>
                       <div v-if="header.type == 'arrObj'">
-                        <span class="badge bg-info" v-for="(objItem,objIndex) in item[header.value]" :key="objIndex">
+                        <span
+                          class="badge bg-info"
+                          v-for="(objItem, objIndex) in item[header.value]"
+                          :key="objIndex"
+                        >
                           {{ objItem[header.child] }}
                         </span>
                       </div>
@@ -56,15 +111,31 @@
                       </div>
                     </td>
                     <td>
-                      <button class="btn btn-outline-secondary m-b-xs" @click="modify(item.id)">修改</button>
-                      <button class="btn btn-outline-danger m-b-xs" @click="deleteData(item.id)">删除</button>
-                      
+                      <button
+                        class="btn btn-outline-secondary m-b-xs"
+                        @click="modify(item.id)"
+                      >
+                        修改
+                      </button>
+                      <button
+                        class="btn btn-outline-danger m-b-xs"
+                        @click="deleteData(item.id)"
+                      >
+                        删除
+                      </button>
                     </td>
                   </tr>
                 </tbody>
                 <tfoot>
                   <tr>
-                    <th rowspan="1" colspan="1" v-for="(header, index) in headers" :key="index">{{ header.value }}</th>
+                    <th
+                      rowspan="1"
+                      colspan="1"
+                      v-for="(header, index) in headers"
+                      :key="index"
+                    >
+                      {{ header.value }}
+                    </th>
                   </tr>
                 </tfoot>
               </table>
@@ -72,22 +143,79 @@
           </div>
           <div class="row">
             <div class="col-sm-12 col-md-5">
-              <div class="dataTables_info" id="zero-conf_info" role="status" aria-live="polite">正在展示 {{ (currentPageIndex * pageSize) - (pageSize - 1) }} 到 {{ currentPageIndex * pageSize }} 条数据 总计 {{dataCount}} 条</div>
+              <div
+                class="dataTables_info"
+                id="zero-conf_info"
+                role="status"
+                aria-live="polite"
+              >
+                正在展示 {{ currentPageIndex * pageSize - (pageSize - 1) }} 到
+                {{ currentPageIndex * pageSize }} 条数据 总计 {{ dataCount }} 条
+              </div>
             </div>
             <div class="col-sm-12 col-md-7">
-              <div class="dataTables_paginate paging_simple_numbers" id="zero-conf_paginate">
+              <div
+                class="dataTables_paginate paging_simple_numbers"
+                id="zero-conf_paginate"
+              >
                 <ul class="pagination">
-                  <li :class="['paginate_button', 'page-item', 'previous', (currentPageIndex == 1 ? 'disabled' : '')]"
-                    id="zero-conf_previous"><a href="#" aria-controls="zero-conf" data-dt-idx="0" tabindex="0"
-                      class="page-link" @click.prevent="previousPage">上一页</a></li>
-                  <li :class="['paginate_button','page-item',item.index == currentPageIndex ? 'active' : '']"
-                    v-for="(item,index) in pageBtn" :key="index"
-                  ><a href="#" aria-controls="zero-conf" :data-dt-idx="item.index"
-                      tabindex="0" class="page-link" @click.prevent="currentPageIndex = item.index">{{item.text}}</a></li>
                   <li
-                    :class="['paginate_button', 'page-item', 'next', (currentPageIndex == pageCount ? 'disabled' : '')]"
-                    id="zero-conf_next"><a href="#" aria-controls="zero-conf" data-dt-idx="7" tabindex="0"
-                      class="page-link" @click.prevent="nextPage">下一页</a></li>
+                    :class="[
+                      'paginate_button',
+                      'page-item',
+                      'previous',
+                      currentPageIndex == 1 ? 'disabled' : '',
+                    ]"
+                    id="zero-conf_previous"
+                  >
+                    <a
+                      href="#"
+                      aria-controls="zero-conf"
+                      data-dt-idx="0"
+                      tabindex="0"
+                      class="page-link"
+                      @click.prevent="previousPage"
+                      >上一页</a
+                    >
+                  </li>
+                  <li
+                    :class="[
+                      'paginate_button',
+                      'page-item',
+                      item.index == currentPageIndex ? 'active' : '',
+                    ]"
+                    v-for="(item, index) in pageBtn"
+                    :key="index"
+                  >
+                    <a
+                      href="#"
+                      aria-controls="zero-conf"
+                      :data-dt-idx="item.index"
+                      tabindex="0"
+                      class="page-link"
+                      @click.prevent="currentPageIndex = item.index"
+                      >{{ item.text }}</a
+                    >
+                  </li>
+                  <li
+                    :class="[
+                      'paginate_button',
+                      'page-item',
+                      'next',
+                      currentPageIndex == pageCount ? 'disabled' : '',
+                    ]"
+                    id="zero-conf_next"
+                  >
+                    <a
+                      href="#"
+                      aria-controls="zero-conf"
+                      data-dt-idx="7"
+                      tabindex="0"
+                      class="page-link"
+                      @click.prevent="nextPage"
+                      >下一页</a
+                    >
+                  </li>
                 </ul>
               </div>
             </div>
@@ -118,8 +246,8 @@ export default {
     },
     dataCount: {
       type: Number,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
@@ -130,12 +258,10 @@ export default {
       //总页数
       pageCount: 0,
       //分页按钮数据，[{text:'1',index:1},.....]
-      pageBtn: []
-    }
-  },
-  mounted() {
-
+      pageBtn: [],
+    };
   },
+  mounted() {},
   methods: {
     //下一页
     nextPage() {
@@ -144,11 +270,11 @@ export default {
     //上一页
     previousPage() {
       if (this.currentPageIndex > 1) {
-        this.currentPageIndex--
+        this.currentPageIndex--;
       }
     },
     changePage(pageIndex) {
-      this.currentPageIndex == pageIndex
+      this.currentPageIndex == pageIndex;
     },
     //更新总页数
     updatePageCount(newPageSize) {
@@ -156,82 +282,88 @@ export default {
       this.pageCount += this.dataCount % newPageSize == 0 ? 0 : 1;
     },
     //更新分页按钮数据
-    updatePageBtn(newPageIndex){
-      this.pageBtn = []
+    updatePageBtn(newPageIndex) {
+      this.pageBtn = [];
       //初始化首页
-      this.pageBtn.push({text: '1', index: 1})
+      this.pageBtn.push({ text: "1", index: 1 });
       //总页数小于8时显示全部页码
-      if(this.pageCount <= 8){
-        for(let i = 2; i < this.pageCount; i++){
-          this.pageBtn.push({text: `${i}`, index: i})
+      if (this.pageCount <= 8) {
+        for (let i = 2; i < this.pageCount; i++) {
+          this.pageBtn.push({ text: `${i}`, index: i });
         }
-      }else{
+      } else {
         //当前页左侧显示2格页码，当显示最小页码距离首页中间间隔大于1时隐藏间隔页面
-        if(newPageIndex - 2 > 3){
-          this.pageBtn.push({text: '...', index: newPageIndex})
+        if (newPageIndex - 2 > 3) {
+          this.pageBtn.push({ text: "...", index: newPageIndex });
         }
         //渲染当前页码左右各两格页码
-        const numleft = (newPageIndex - 2) < 2 ? newPageIndex - 2 : 2;
-        const numright = (newPageIndex + 2) < this.pageCount ? 2 : (this.pageCount - newPageIndex - 1);
-        for(let i = newPageIndex - numleft; i <= newPageIndex + numright; i++){
-          this.pageBtn.push({text: `${i}`, index: i})
+        const numleft = newPageIndex - 2 < 2 ? newPageIndex - 2 : 2;
+        const numright =
+          newPageIndex + 2 < this.pageCount ? 2 : this.pageCount - newPageIndex - 1;
+        for (let i = newPageIndex - numleft; i <= newPageIndex + numright; i++) {
+          this.pageBtn.push({ text: `${i}`, index: i });
         }
         //当前页右侧显示2格页码，当显示最大页码距离尾页中间间隔大于1时隐藏间隔页面
-        if(newPageIndex + 2 < this.pageCount - 2){
-          this.pageBtn.push({text: '...', index: newPageIndex})
+        if (newPageIndex + 2 < this.pageCount - 2) {
+          this.pageBtn.push({ text: "...", index: newPageIndex });
         }
       }
       //渲染尾页
-        this.pageBtn.push({text: `${this.pageCount}`, index: this.pageCount})
-  },
-  formatDateTime(str){
-    if (!str) return '-';
+      this.pageBtn.push({ text: `${this.pageCount}`, index: this.pageCount });
+    },
+    formatDateTime(str) {
+      if (!str) return "-";
 
-  const date = new Date(str);
-  if (isNaN(date)) return '-';  // 防止 Safari 报 Invalid Date
+      const date = new Date(str);
+      if (isNaN(date)) return "-"; // 防止 Safari 报 Invalid Date
 
-  const pad = n => n.toString().padStart(2, '0');
+      const pad = (n) => n.toString().padStart(2, "0");
 
-  const Y = date.getFullYear();
-  const M = pad(date.getMonth() + 1);
-  const D = pad(date.getDate());
-  const h = pad(date.getHours());
-  const m = pad(date.getMinutes());
-  const s = pad(date.getSeconds());
+      const Y = date.getFullYear();
+      const M = pad(date.getMonth() + 1);
+      const D = pad(date.getDate());
+      const h = pad(date.getHours());
+      const m = pad(date.getMinutes());
+      const s = pad(date.getSeconds());
 
-  return `${Y}-${M}-${D} ${h}:${m}:${s}`;
-  },
-  modify(id){
-    this.$emit('dataModify',id)
-  },
-  deleteData(id){
-    this.$emit('dataDelete',id)
-  }
+      return `${Y}-${M}-${D} ${h}:${m}:${s}`;
+    },
+    modify(id) {
+      this.$emit("dataModify", id);
+    },
+    deleteData(id) {
+      this.$emit("dataDelete", id);
+    },
   },
   watch: {
     //监听分页大小变化
-    'pageSize': {
+    pageSize: {
       handler(newVal) {
-        this.updatePageCount(newVal)
+        this.updatePageCount(newVal);
         //单页显示数据量改变时重置当前索引，防止数据以及控件异常
-        this.currentPageIndex = 1
-        this.$emit('pageChanged',{pageIndex:this.currentPageIndex,pageSize:newVal})
-        this.updatePageBtn(this.currentPageIndex)
+        this.currentPageIndex = 1;
+        this.$emit("pageChanged", { pageIndex: this.currentPageIndex, pageSize: newVal });
+        this.updatePageBtn(this.currentPageIndex);
       },
-      immediate: true
+      immediate: true,
     },
     //监听页索引，用于切换数据
-    'currentPageIndex': {
+    currentPageIndex: {
       handler(newVal) {
-        this.$emit('pageChanged',{pageIndex:newVal,pageSize:this.pageSize})
-        this.updatePageBtn(newVal)
+        this.$emit("pageChanged", { pageIndex: newVal, pageSize: this.pageSize });
+        this.updatePageBtn(newVal);
       },
-      immediate: true
-    }
-  }
-}
+      immediate: true,
+    },
+  },
+};
 </script>
 
 <style scoped>
 /* 可自定义样式 */
+.card-title {
+  font-size: 1.8rem;
+  font-weight: bold;
+  color: #333;
+}
 </style>

src/views/Notfound.vue

@@ -1,20 +1,23 @@
 <template>
-        <div class="error-page err-404 page">
-        <div class="container">
-            <div class="error-container">
-                <div class="error-info">
-                    <h1>404</h1>
-                    <p>It seems that the page you are looking for no longer exists.<br>Please contact our <a href="#">help center</a> or go to the <RouterLink to="/home">homepage</RouterLink>.</p>
-                </div>
-                <div class="error-image"></div>
-            </div>
+  <div class="error-page err-404 page login-page">
+    <div class="container">
+      <div class="error-container">
+        <div class="error-info">
+          <h1>404</h1>
+          <p>
+            It seems that the page you are looking for no longer exists.<br />Please
+            contact our <a href="#">help center</a> or go to the
+            <RouterLink to="/home">homepage</RouterLink>.
+          </p>
         </div>
+        <div class="error-image"></div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-
 export default {
-    name: 'notfound'
-}
+  name: "notfound",
+};
 </script>

src/views/layout/Balance.vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="row justify-content-center mt-5">
+    <div class="card custom-card">
+      <div class="card-header text-center">
+        <h3 class="card-title">充值中心</h3>
+      </div>
+      <div class="card-body">
+        <div class="row mb-4">
+          <div class="col text-start">
+            <div class="balance-box">
+              <h5 class="balance-text">
+                <i class="fas fa-wallet balance-icon"></i>
+                剩余余额：<span class="balance-amount">{{ balance }}</span>
+              </h5>
+            </div>
+          </div>
+        </div>
+        <div class="mb-4">
+          <label class="form-label" for="formGroupExampleInput">充值金额</label>
+          <div class="input-group">
+            <input
+              type="number"
+              class="form-control custom-input"
+              id="formGroupExampleInput"
+              placeholder="请输入充值金额"
+              v-model="formattedRechargeAmount"
+            />
+            <div class="input-group-text custom-input-text">元</div>
+          </div>
+        </div>
+        <div class="mb-4">
+          <p class="payment-title">充值方式</p>
+          <div class="container">
+            <div class="row d-flex justify-content-between">
+              <!-- 单选按钮 1 -->
+              <div
+                class="col-6 d-flex justify-content-center mb-3 option-box"
+                :class="{ 'selected-box': selectedpay === 'alipay' }"
+              >
+                <input
+                  type="radio"
+                  id="option1"
+                  name="options"
+                  class="hidden-radio"
+                  value="alipay"
+                  v-model="selectedpay"
+                />
+                <label for="option1" class="label-style">
+                  <img src="../../assets/images/Alipay.png" alt="支付宝" />
+                </label>
+              </div>
+              <!-- 单选按钮 2 -->
+              <div
+                class="col-6 d-flex justify-content-center mb-3 option-box"
+                :class="{ 'selected-box': selectedpay === 'wechat' }"
+              >
+                <input
+                  type="radio"
+                  id="option2"
+                  name="options"
+                  class="hidden-radio"
+                  value="wechat"
+                  v-model="selectedpay"
+                />
+                <label for="option2" class="label-style">
+                  <img src="../../assets/images/wechat.png" alt="微信支付" />
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="text-center">
+          <button type="button" class="btn custom-btn" @click="deposit">立刻充值</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "Balance",
+  data() {
+    return {
+      rechargeAmount: 0,
+      selectedpay: "",
+    };
+  },
+  computed: {
+    ...mapState("userinfo", {
+      balance: (state) => (state.user ? state.user.balance : 0),
+    }),
+    formattedRechargeAmount: {
+      get() {
+        return this.rechargeAmount === 0 ? "" : this.rechargeAmount;
+      },
+      set(value) {
+        this.rechargeAmount = value === "" ? 0 : Number(value);
+      },
+    },
+  },
+  created() {
+    this.$store.dispatch("userinfo/fetchUserInfo");
+  },
+  methods: {
+    deposit() {
+      if (this.rechargeAmount <= 0) {
+        this.$alert("充值金额必须大于0", "danger");
+        return;
+      }
+      if (!this.selectedpay) {
+        this.$alert("请选择充值方式", "danger");
+        return;
+      }
+      try {
+        console.log(`Depositing ${this.rechargeAmount} using ${this.selectedpay}`);
+        this.$alert("充值成功", "success");
+      } catch (error) {
+        console.error("充值失败:", error);
+        this.$alert("充值失败，请稍后再试", "danger");
+      }
+      this.rechargeAmount = 0;
+      this.selectedpay = "";
+    },
+  },
+};
+</script>
+
+<style scoped>
+input[type="radio"].hidden-radio {
+  display: none; /* 隐藏原生单选按钮 */
+}
+/* 禁用数字输入框的调节按钮 */
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield; /* 针对 Firefox */
+}
+/* 余额盒子样式 */
+.balance-box {
+  background-color: #f0f8ff; /* 柔和的背景色 */
+  border: 1px solid #d1e7ff; /* 边框颜色 */
+  border-radius: 10px; /* 圆角 */
+  padding: 15px; /* 内边距 */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
+  display: flex;
+  align-items: center;
+}
+
+/* 余额文本样式 */
+.balance-text {
+  font-size: 1.2rem;
+  color: #333;
+  margin: 0;
+}
+img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  cursor: pointer;
+}
+/* 余额数字样式 */
+.balance-amount {
+  font-weight: bold;
+  color: #007bff;
+}
+
+/* 图标样式 */
+.balance-icon {
+  color: #007bff;
+  margin-right: 8px;
+  font-size: 1.5rem;
+}
+/* 卡片样式 */
+.custom-card {
+  border-radius: 15px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  max-width: 600px;
+  background-color: #ffffff;
+}
+
+/* 标题样式 */
+.card-title {
+  font-size: 1.8rem;
+  font-weight: bold;
+  color: #333;
+}
+
+/* 余额样式 */
+.balance-text {
+  font-size: 1.2rem;
+  color: #666;
+}
+.balance-amount {
+  font-weight: bold;
+  color: #007bff;
+}
+
+/* 输入框样式 */
+.custom-input {
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.custom-input-text {
+  background-color: #f8f9fa;
+  border-radius: 0 8px 8px 0;
+}
+
+/* 支付方式样式 */
+.option-box {
+  padding: 10px;
+  border: 2px solid transparent;
+  border-radius: 10px;
+  transition: all 0.3s ease;
+}
+.option-box.selected-box {
+  border-color: #007bff;
+  background-color: #e9f5ff;
+}
+.label-style {
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* 按钮样式 */
+.custom-btn {
+  background: linear-gradient(45deg, #007bff, #0056b3);
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 10px 20px;
+  font-size: 1rem;
+  font-weight: bold;
+  transition: 0.3s ease;
+}
+.custom-btn:hover {
+  background: linear-gradient(45deg, #0056b3, #003f7f);
+}
+
+/* 全局字体 */
+body {
+  font-family: "Arial", sans-serif;
+  background-color: #f5f5f5;
+}
+</style>