新增物资情况列表页面

 /*
  * @Date: 2023-09-01 10:29:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-23 10:34:10
+ * @LastEditTime: 2024-07-23 10:50:32
  * @FilePath: /temple_material_request/src/route.js
  * @Description: 文件描述
  */
 export default [{
-  path: '/',
-  component: () => import('@/views/index.vue'),
+  path: '/material_list',
+  component: () => import('@/views/material_list.vue'),
   meta: {
-    title: '首页',
+    title: '物资情况',
   }
 }, {
   path: '/auth',

 <!--
  * @Date: 2024-07-23 10:34:37
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-23 10:34:49
+ * @LastEditTime: 2024-07-23 10:46:40
  * @FilePath: /temple_material_request/src/views/index.vue
  * @Description: 文件描述
 -->

+<!--
+ * @Date: 2024-07-23 10:50:38
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-07-23 11:34:47
+ * @FilePath: /temple_material_request/src/views/material_list.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="material-list-page">
+    <van-tabs v-model:active="active" @change="onChange" sticky :color="styleColor.baseColor">
+      <van-tab v-for="index in 8" :title="'标签 ' + index">
+        <van-list
+          v-model:loading="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
+        >
+          <div v-for="item in list" :key="item" class="material-list-item">
+            <van-row>
+              <van-col span="14">
+                <div class="item-title van-ellipsis" :style="{ color: styleColor.baseColor }" @click="onClickTitle(item)">床垫 1.2m*2m</div>
+                <div class="item-attr">申领人：醒莲 2024/05/23使用 </div>
+              </van-col>
+              <van-col span="5">
+                <div class="item-num-title">申请数量</div>
+                <div class="item-num van-ellipsis">200个</div>
+              </van-col>
+              <van-col span="5">
+                <div class="item-num-title">实际领用</div>
+                <div class="item-num van-ellipsis">200个</div>
+              </van-col>
+            </van-row>
+          </div>
+        </van-list>
+      </van-tab>
+    </van-tabs>
+    <div style="height: 4rem;"></div>
+    <div style="position: fixed; left: 0; right: 0; bottom: 0; padding: 1rem; background-color: white;">
+      <van-button @click="onClickRequest" type="primary" block :color="styleColor.baseColor">我要申领</van-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
+//import { } from '@/utils/generateModules.js'
+//import { } from '@/utils/generateIcons.js'
+//import { } from '@/composables'
+import { styleColor } from "@/constant.js";
+
+const $route = useRoute();
+const $router = useRouter();
+useTitle($route.meta.title);
+
+const active = ref(0);
+const onChange = (index) => {
+  console.warn(index);
+}
+
+const list = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+
+const onLoad = () => {
+  // 异步更新数据
+  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+  setTimeout(() => {
+    for (let i = 0; i < 10; i++) {
+      list.value.push(list.value.length + 1);
+    }
+
+    // 加载状态结束
+    loading.value = false;
+
+    // 数据全部加载完成
+    if (list.value.length >= 40) {
+      finished.value = true;
+    }
+  }, 1000);
+};
+
+const onClickTitle = (item) => { // 点击物资标题回调
+  console.warn(item);
+}
+
+const onClickRequest = () => { // 我要申领物资
+
+}
+</script>
+
+<style lang="less" scoped>
+.material-list-page {
+  position: relative;
+  .material-list-item {
+    padding: 1rem;
+    border-top: 1px solid #F5F5F5;
+    .item-title {
+      font-size: 1rem;
+      text-decoration: underline;
+      margin-bottom: 0.5rem;
+    }
+    .item-attr {
+      font-size: 0.85rem;
+      color: #8F8F8F;
+    }
+    .item-num-title {
+      font-size: 0.85rem;
+      color: #8F8F8F;
+      text-align: center;
+      margin-bottom: 0.5rem;
+    }
+    .item-num {
+      font-size: 1rem;
+      text-align: center;
+    }
+  }
+}
+</style>