feat: 静态页面-完成

Author: fsaf95

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gf-bank",
-  "homepage": "https://yulimchen.github.io/vue3-h5-template/",
+  "homepage": "",
   "version": "0.5.8",
   "license": "MIT",
   "repository": {

src/App.vue

@@ -2,4 +2,9 @@
   <router-view />
 </template>
 
-<style></style>
+<style lang="less">
+.van-toast {
+  --van-toast-default-width: 70%;
+  --van-toast-font-size: 28px;
+}
+</style>

src/components/Tabbar/index.vue

@@ -18,24 +18,26 @@ const active = ref(0);
 const tabbarData = reactive([
   {
     icon: "wap-home-o",
-    title: "主页",
+    title: "数据",
     to: {
       name: "Demo"
     }
   },
   {
-    icon: "gem-o",
-    title: "工具",
+    icon: "manager-o",
+    title: "客户",
     to: {
-      name: "Tools"
+      name: "CustomerList"
     }
   },
-  {
-    icon: "user-o",
-    title: "关于",
-    to: {
-      name: "About"
-    }
-  }
 ]);
 </script>
+<style lang="less">
+.van-tabbar__placeholder {
+  --van-tabbar-height: 120px;
+  --van-tabbar-item-font-size: 26px;
+  --van-tabbar-item-icon-size: 52px;
+  --van-tabbar-item-text-color: #333333;
+  --van-tabbar-item-active-color: #e81414;
+}
+</style>

src/layout/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import tabbar from "@/components/Tabbar/index.vue";
-import NavBar from "@/components/NavBar/index.vue";
+// import NavBar from "@/components/NavBar/index.vue";
 import { useCachedViewStoreHook } from "@/store/modules/cachedView";
 import { useDarkMode } from "@/hooks/useToggleDarkMode";
 import { computed } from "vue";
@@ -13,7 +13,7 @@ const cachedViews = computed(() => {
 <template>
   <div class="app-wrapper">
     <van-config-provider :theme="useDarkMode() ? 'dark' : 'light'">
-<!--      <nav-bar />-->
+      <!--      <nav-bar />-->
       <router-view v-slot="{ Component }">
         <keep-alive :include="cachedViews">
           <component :is="Component" />
@@ -32,5 +32,6 @@ const cachedViews = computed(() => {
   position: relative;
   height: 100%;
   width: 100%;
+  color: #9aa0a8;
 }
 </style>

src/router/routes.ts

@@ -19,12 +19,12 @@ const routes: Array<RouteRecordRaw> = [
         }
       },
       {
-        path: "/tools",
-        name: "Tools",
-        component: () => import("@/views/tools/index.vue"),
+        path: "/customerList",
+        name: "CustomerList",
+        component: () => import("@/views/customerList/index.vue"),
         meta: {
-          title: "工具",
-          requireAuth: true
+          title: "客户",
+          requireAuth: false
         }
       },
       {

src/utils/utils.ts

@@ -27,6 +27,20 @@ export function isUsercaptchaValue(value) {
   }
 }
 
+// 手机号码验证
+export function isNameValid(name) {
+  const regExp = /^[\u4e00-\u9fa5·\s]{2,20}$/;
+  if (!name) {
+    showToast("请输入名字！");
+    return false;
+  } else if (!regExp.test(name)) {
+    showToast("请输入正确的名字！");
+    return false;
+  } else {
+    return true;
+  }
+}
+
 // 手机号码验证
 export function isPhoneNumberValid(phoneNumber) {
   const regExp =

src/views/customerList/component/CustomerTable.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="my-[30px] box-border">
+    <div class="w-full">
+      <!-- 表格头部 -->
+      <div>
+        <div
+          class="px-[20px] py-[10px] text-[26px] text-[#333333] flex justify-between"
+        >
+          <div class="w-[10%] text-left">姓名</div>
+          <div class="w-[25%] text-center">手机号</div>
+          <div class="w-[20%] text-center">领券状态</div>
+          <div class="w-[20%] text-center">金额(元)</div>
+          <div class="w-[25%] text-right">领券时间</div>
+        </div>
+      </div>
+      <!-- 表格内容 -->
+      <div
+        v-for="(item, index) in currentPageData"
+        :key="index"
+        class="my-[10px] py-[10px] px-[20px] bg-[#f2f2f2] flex justify-between overflow-hidden border-[2px] border-[#e0e0e0] border-solid rounded-[10px] text-[#333333]"
+      >
+        <div class="w-[10%] text-left">{{ item.name }}</div>
+        <div class="w-[25%] text-center">{{ item.phone }}</div>
+        <div class="w-[20%] text-center text-[#ff4343]">
+          {{ item.couponStatus === 1 ? "未领取" : "已领取" }}
+        </div>
+        <div class="w-[20%] text-center">{{ item.amount }}</div>
+        <div class="w-[25%] text-right">{{ item.couponTime }}</div>
+      </div>
+    </div>
+    <!-- 分页控件 -->
+    <div class="flex my-[30px] justify-end">
+      <button
+        class="mx-[10px] py-[4px] px-[16px] bg-[#e1eaff] border-2 border-[#ff4343] border-solid rounded-[10px]"
+        @click="prevPage"
+        :disabled="currentPage === 1"
+      >
+        上一页
+      </button>
+      <button
+        class="mx-[10px] py-[4px] px-[16px] bg-[#e1eaff] border-2 border-[#ff4343] border-solid rounded-[10px]"
+        @click="nextPage"
+        :disabled="currentPage === totalPages"
+      >
+        下一页
+      </button>
+      <!--      <span>当前页：{{ currentPage }} / 总页数：{{ totalPages }}</span>-->
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, toRef, computed, defineProps } from "vue";
+
+const props = defineProps<{
+  allData: any;
+}>();
+
+const listData = toRef(props, "allData");
+
+const pageSize = ref(10); // 每页显示的数据条数
+const currentPage = ref(1); // 当前页码
+
+// 计算当前页的数据
+const currentPageData = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value;
+  const end = start + pageSize.value;
+  return listData.value.slice(start, end);
+});
+
+// 计算总页数
+const totalPages = computed(() => {
+  return Math.ceil(listData.value.length / pageSize.value);
+});
+
+// 上一页
+function prevPage() {
+  if (currentPage.value > 1) {
+    currentPage.value--;
+  }
+}
+
+// 下一页
+function nextPage() {
+  if (currentPage.value < totalPages.value) {
+    currentPage.value++;
+  }
+}
+</script>
+<style scoped>
+/* 样式 */
+</style>

src/views/customerList/component/Select.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="pet-select-container">
+    <select
+      name="pets"
+      id="pet-select"
+      v-model="selectedPet"
+      @change="handlePetChange"
+    >
+      <option value="">-- 领取状态 --</option>
+      <option v-for="pet in pets" :key="pet.value" :value="pet.value">
+        {{ pet.label }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits } from "vue";
+
+// 定义 props
+const props = defineProps({
+  // 假设父组件可以传入初始选中的宠物值
+  initialPet: {
+    type: String,
+    default: ""
+  }
+});
+
+// 定义 emit 事件
+const emit = defineEmits(["handleSelected"]);
+
+// 响应式数据
+const selectedPet = ref(props.initialPet);
+const pets = ref([
+  { value: "2", label: "已领取" },
+  { value: "1", label: "未领取" }
+]);
+
+// 监听选中值的变化
+// watch(selectedPet, (newVal, oldVal) => {
+//   if (newVal !== oldVal) {
+//     emit("handleSelected", newVal);
+//   }
+// });
+
+// 处理宠物改变的方法
+function handlePetChange() {
+  // 在这里可以添加额外的逻辑
+  emit("handleSelected", selectedPet.value);
+}
+</script>
+
+<style scoped>
+select {
+  width: 100%;
+  padding: 16px 10px;
+  border: 2px solid #ccc;
+  border-radius: 10px;
+  font-size: 26px;
+  color: #333333;
+  box-sizing: border-box;
+}
+</style>