新增待申领物资页面

 /*
  * @Date: 2023-09-01 10:29:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-23 10:50:32
+ * @LastEditTime: 2024-07-23 14:41:12
  * @FilePath: /temple_material_request/src/route.js
  * @Description: 文件描述
  */
@@ -18,6 +18,12 @@ export default [{
     title: '申领物资',
   }
 }, {
+  path: '/material_pre_request',
+  component: () => import('@/views/material_pre_request.vue'),
+  meta: {
+    title: '待申领物资',
+  }
+}, {
   path: '/auth',
   component: () => import('@/views/auth.vue'),
   meta: {

+<!--
+ * @Date: 2024-07-23 12:53:15
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-07-23 16:05:39
+ * @FilePath: /temple_material_request/src/views/material_pre_request.vue
+ * @Description: 待申领物资页面
+-->
+<template>
+  <div class="material-pre-request-page">
+    <div class="list-wrapper">
+      <van-row justify="space-between" class="select-all-item">
+        <van-col span="8"><van-icon name="passed" size="1.25rem" />&nbsp;&nbsp;<span :style="{ color: styleColor.baseColor }">全选</span></van-col>
+        <van-col span="16" :style="{ textAlign: 'right', fontSize: '0.85rem', color: styleColor.baseColor }">
+          <van-icon name="records-o" />&nbsp;编辑
+          <van-icon name="delete-o" />&nbsp;删除
+        </van-col>
+      </van-row>
+      <van-list
+        v-model:loading="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+      >
+        <div v-for="item in list" :key="item" class="list-boxer">
+          <van-row align="center" justify="space-between">
+            <van-col span="16" style="display: flex;">
+              <van-icon name="passed" size="1.25rem" />&nbsp;&nbsp;<div class="van-ellipsis" :style="{ color: styleColor.baseColor, textDecoration: 'underline' }" @click="onClickTitle(item)">床垫 1.2m*2m</div>
+            </van-col>
+            <van-col span="8" style="display: flex; align-items: center;">
+              <van-field v-model="num_value" style="border: 1px solid #f0f0f0; padding: 0; border-radius: 5px;" label="" label-width="0" input-align="center" placeholder="数量" type="number" >
+                <template #left-icon></template>
+              </van-field>&nbsp;&nbsp;<span style="font-size: 0.9rem; color: #666;">个</span>
+            </van-col>
+          </van-row>
+        </div>
+      </van-list>
+      <div style="height: 6rem;"></div>
+      <div style="position: fixed; left: 0; right: 0; bottom:4.5rem; padding: 1rem;">
+        <van-button icon="plus" type="primary" :color="styleColor.baseColor" plain block @click="addMore">添加更多</van-button>
+      </div>
+    </div>
+    <div class="control-bar">
+      <!--  -->
+      <div style="display: flex; justify-content: space-between; align-items: center;">
+        <div style="display: flex; align-items: center;" @click="showPicker = true">
+          <div style="font-size: 0.85rem; color: #202020;">使用时间:</div>&nbsp;&nbsp;
+          <div style="border: 1px solid #f0f0f0; border-radius: 5px; padding: 0.5rem 0.35rem 0.5rem 1rem; min-width: 6rem; font-size: 0.85rem; display: flex; align-items: center; justify-content: space-between;">{{ use_date }}&nbsp;&nbsp;<van-icon name="notes-o" size="1rem" :color="styleColor.baseColor"  /></div>
+        </div>
+        <div style="display: flex; align-items: center;">
+          <van-button type="primary" :color="styleColor.baseColor" @click="onConfirmRequest">确定申领</van-button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <van-popup v-model:show="showPicker" position="bottom">
+    <van-date-picker
+      v-model="currentDate"
+      title="日期选择"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :columns-type="columns_type"
+      @confirm="onConfirm"
+      @cancel="showPicker = false"
+    />
+  </van-popup>
+
+  <van-dialog v-model:show="showType" @confirm="onDialogConfirm" title="" show-cancel-button :confirm-button-color="styleColor.baseColor">
+    <div style="padding: 1.5rem 0 0; text-align: center; font-size: 0.95rem; font-weight: bold;">请确认您本次是为哪个组别申领物资</div>
+    <div style="display: flex; align-items: center; padding: 1rem;">
+      <div style="font-size: 0.9rem; margin-right: 1rem; width: 5rem;">申领组:&nbsp;&nbsp;</div>
+      <div>
+        <van-radio-group v-model="type_checked" direction="horizontal" style="font-size: 0.9rem;">
+          <van-radio name="1" :checked-color="styleColor.baseColor" style="margin-bottom: 0.25rem;">单选框 1</van-radio>
+          <van-radio name="2" :checked-color="styleColor.baseColor" style="margin-bottom: 0.25rem;">单选框 2</van-radio>
+          <van-radio name="3" :checked-color="styleColor.baseColor" style="margin-bottom: 0.25rem;">单选框 3</van-radio>
+        </van-radio-group>
+      </div>
+    </div>
+  </van-dialog>
+</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";
+import dayjs from "dayjs";
+
+const $route = useRoute();
+const $router = useRouter();
+useTitle($route.meta.title);
+
+const num_value = ref('');
+
+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 showPicker = ref(false);
+const currentDate = ref([]);
+const columns_type = ref(['year', 'month', 'day']);
+const minDate = ref();
+const maxDate = ref();
+const use_date = ref('');
+
+const onConfirm = ({ selectedValues, selectedOptions }) => {
+  use_date.value = selectedValues.join("-");
+  showPicker.value = false;
+};
+
+onMounted(() => {
+  minDate.value = new Date()
+})
+
+const addMore = () => { // 添加更多回调
+  console.warn('addMore');
+}
+
+const onConfirmRequest = () => { // 确定申领回调
+  console.warn('onConfirmRequest');
+  showType.value = true;
+}
+
+const showType = ref(false);
+const type_checked = ref('');
+
+const onDialogConfirm = () => {
+  console.warn(type_checked.value);
+}
+</script>
+
+<style lang="less" scoped>
+.material-pre-request-page {
+  .list-wrapper {
+    position: relative;
+    width: 100%;
+    .select-all-item {
+      padding: 0.5rem 1rem;
+    }
+    .list-boxer {
+      margin: 0; padding: 1rem; border-top: 1px solid #f0f0f0;
+    }
+  }
+
+  .control-bar {
+    display: flex; position: fixed; padding: 1rem 1.5rem; left: 0; right: 0; bottom: 0; background-color: white; width: calc(100% - 3rem);  box-shadow: 0rem -0.33rem 0.33rem 0.08rem rgba(0,0,0,0.06); display: flex; flex-direction: column;
+  }
+}
+
+:deep(.van-picker__confirm) {
+  color: #A67939;
+}
+</style>