完善选择物资组件

 <!--
  * @Date: 2024-07-23 16:24:08
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-23 16:33:39
+ * @LastEditTime: 2024-07-23 17:50:18
  * @FilePath: /temple_material_request/src/components/chooseMaterial/index.vue
  * @Description: 选择物资组件
 -->
@@ -13,7 +13,68 @@
       closeable
       @close="onClose"
       :style="{ height: '100%' }"
-    ></van-popup>
+    >
+        <van-sticky  :offset-top="-33">
+      <div style="margin-top: 2rem; background-color: white;">
+          <div style="padding: 1rem;">
+            <van-row gutter="10" justify="center" align="center">
+              <van-col span="16">
+                <div style="background-color: #FBF9F1; display: flex; border-radius: 5rem; padding: 0 1rem; align-items: center; justify-content: center;">
+                  <van-icon name="search" /><van-field v-model="value" label="" placeholder="搜索物资" style="background-color: #FBF9F1;" />
+                </div>
+              </van-col>
+              <van-col span="8">
+                <div @click="showType" style="border-radius: 8px; border: 1px solid #DBDBDB; padding: 0.5rem 0 0.5rem 1rem; font-size: 0.9rem; color: #B4B4B4;">
+                  物资分类&nbsp;&nbsp;
+                  <van-icon name="arrow-down" color="#A67939" />
+                </div>
+              </van-col>
+            </van-row>
+          </div>
+      </div>
+        </van-sticky>
+      <van-list
+        v-model:loading="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+      >
+        <div v-for="item in list" :key="item" >
+          <van-row justify="space-around" align="center" style="padding: 1rem; background-color: #F2F2F2;">
+            <van-col span="8"><van-icon name="passed" size="1.25rem" />&nbsp;&nbsp;<span :style="{ color: styleColor.baseColor }">全选</span></van-col>
+            <van-col span="8" style="text-align: center; font-size: 0.95rem; color: #666666; font-weight: bold;">物资分类1</van-col>
+            <van-col span="8"></van-col>
+          </van-row>
+          <van-row align="center" justify="space-between" style="">
+            <van-col span="24" style="display: flex; padding: 1rem; border-bottom: 1px solid #F5F5F5;">
+              <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="24" style="display: flex; padding: 1rem; border-bottom: 1px solid #F5F5F5;">
+              <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-row>
+        </div>
+      </van-list>
+      <div style="height: 6rem;"></div>
+      <div class="control-bar">
+        <van-button plain block type="primary" :color="styleColor.baseColor" @click="addMore">加入购物车</van-button>
+        <div style="display: flex; align-items: center; margin-left: 1rem;">
+          <van-badge :content="5">
+            <van-icon name="shopping-cart-o" size="2.5rem" :color="styleColor.baseColor" @click="goShoppingCart" />
+          </van-badge>
+        </div>
+      </div>
+      <van-back-top class="custom" bottom="12vh"  z-index="9999">返回顶部</van-back-top>
+
+      <van-dialog v-model:show="show_type" title="请选择筛选分类" @confirm="onConfirm" show-cancel-button :confirm-button-color="styleColor.baseColor">
+        <div style="padding: 1rem;">
+          <van-checkbox-group v-model="type_checked" shape="square" :checked-color="styleColor.baseColor">
+            <van-checkbox name="a" style="margin-bottom: 0.5rem;">复选框 a</van-checkbox>
+            <van-checkbox name="b" style="margin-bottom: 0.5rem;">复选框 b</van-checkbox>
+          </van-checkbox-group>
+        </div>
+      </van-dialog>
+    </van-popup>
   </div>
 </template>
 
@@ -25,6 +86,8 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
 //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);
@@ -50,8 +113,54 @@ watch(
 const onClose = () => {
   emit('close');
 }
+
+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 show_type = ref(false);
+const showType = () => {
+  show_type.value = true;
+}
+const type_checked = ref([]);
+const onConfirm = () => {
+  console.warn(type_checked.value);
+}
 </script>
 
-<style lang="less" scoped>
-.choose-material-page {}
+<style lang="less">
+.choose-material-page {
+  .control-bar {
+    display: flex; position: fixed; padding: 1rem 1.5rem; left: 0; right: 0; bottom: 0; background-color: white; width: calc(100% - 3rem); justify-content: space-between; align-items: center; box-shadow: 0rem -0.33rem 0.33rem 0.08rem rgba(0,0,0,0.06);
+  }
+}
+
+.custom {
+  width: 80px;
+  font-size: 14px;
+  text-align: center;
+  background-color: #A67939;
+}
 </style>

@@ -2,12 +2,12 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-31 12:06:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-23 13:46:16
+ * @LastEditTime: 2024-07-23 17:17:52
  * @FilePath: /temple_material_request/src/main.js
  * @Description:
  */
 import { createApp } from 'vue';
-import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search, NavBar, Collapse, CollapseItem, RadioGroup, Radio, CheckboxGroup, Area, DatePicker, TimePicker, PickerGroup, Rate, Calendar, Divider, Popover, NoticeBar, ImagePreview, FloatingBubble, Badge } from 'vant';
+import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search, NavBar, Collapse, CollapseItem, RadioGroup, Radio, CheckboxGroup, Area, DatePicker, TimePicker, PickerGroup, Rate, Calendar, Divider, Popover, NoticeBar, ImagePreview, FloatingBubble, Badge, BackTop } from 'vant';
 import router from './router';
 import App from './App.vue';
 // import axios from './utils/axios';
@@ -25,6 +25,6 @@ app.config.warnHandler = () => null;
 
 app.config.globalProperties.$http = axios; // 关键语句
 
-app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider).use(NavBar).use(Collapse).use(CollapseItem).use(Radio).use(RadioGroup).use(CheckboxGroup).use(Area).use(DatePicker).use(TimePicker).use(PickerGroup).use(Rate).use(Calendar).use(Divider).use(Popover).use(NoticeBar).use(ImagePreview).use(FloatingBubble).use(Badge);
+app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider).use(NavBar).use(Collapse).use(CollapseItem).use(Radio).use(RadioGroup).use(CheckboxGroup).use(Area).use(DatePicker).use(TimePicker).use(PickerGroup).use(Rate).use(Calendar).use(Divider).use(Popover).use(NoticeBar).use(ImagePreview).use(FloatingBubble).use(Badge).use(BackTop);
 app.use(vueEsign)
 app.mount('#app');