选择物资组件逻辑完善

 <!--
  * @Date: 2024-07-23 16:24:08
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-24 09:39:18
+ * @LastEditTime: 2024-07-24 18:14:14
  * @FilePath: /temple_material_request/src/components/chooseMaterial/index.vue
  * @Description: 选择物资组件
 -->
@@ -20,7 +20,7 @@
               <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;" />
+                    <van-icon name="search" /><van-field v-model="search_value" @blur="onBlur" label="" placeholder="搜索物资" style="background-color: #FBF9F1;" />
                   </div>
                 </van-col>
                 <van-col span="8">
@@ -42,25 +42,30 @@
       >
         <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" @click="onCheckAll(item)">
+              <van-icon v-if="item.checked" name="checked" size="1.25rem" :color="styleColor.baseColor" />
+              <van-icon v-else name="passed" size="1.25rem" />
+              <span :style="{ color: styleColor.baseColor }">&nbsp;&nbsp;全选</span>
+            </van-col>
+            <van-col span="8" style="text-align: center; font-size: 0.95rem; color: #666666; font-weight: bold;">{{ item.name }}</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 v-for="m in item.m_list" :key="m.id" span="24" style="display: flex; padding: 1rem; border-bottom: 1px solid #F5F5F5;">
+              <van-icon v-if="m.checked" @click="onCheck(item, m)" name="checked" size="1.25rem" :color="styleColor.baseColor" />
+              <van-icon v-else name="passed" @click="onCheck(item, m)" size="1.25rem" />&nbsp;&nbsp;
+              <div class="van-ellipsis" :style="{ color: styleColor.baseColor, textDecoration: 'underline' }" @click="onClickTitle(m)">
+                {{ m.name }}
+              </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>
+        <van-button plain block type="primary" :color="styleColor.baseColor" @click="addShoppingCart">加入购物车</van-button>
         <div style="display: flex; align-items: center; margin-left: 1rem;">
-          <van-badge :content="5">
+          <van-badge :content="cart_count">
             <van-icon name="shopping-cart-o" size="2.5rem" :color="styleColor.baseColor" @click="goShoppingCart" />
           </van-badge>
         </div>
@@ -68,25 +73,31 @@
       <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-group v-model="type_checked" shape="square" direction="horizontal" :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 name="c" style="margin-bottom: 0.5rem;">复选框 c</van-checkbox>
+            <van-checkbox name="d" style="margin-bottom: 0.5rem;">复选框 d</van-checkbox>
           </van-checkbox-group>
         </div>
       </van-dialog>
     </van-popup>
   </div>
+
+  <material-detail :show="show_material_detail" @close="onCloseDetail"></material-detail>
+
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-
+import { showToast } from 'vant';
 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 materialDetail from '@/components/materialDetail/index.vue';
 
 const $route = useRoute();
 const $router = useRouter();
@@ -122,10 +133,16 @@ const onLoad = () => {
   // 异步更新数据
   // setTimeout 仅做示例，真实场景中一般为 ajax 请求
   setTimeout(() => {
-    for (let i = 0; i < 10; i++) {
-      list.value.push(list.value.length + 1);
+    for (let i = 0; i < 5; i++) {
+      list.value.push({ id: i, name: '物资分类' + i, checked: false, m_list: [] });
     }
 
+    list.value.forEach((item) => {
+      for (let j = 0; j < 5; j++) {
+        item.m_list.push({ id: j, name: '标题' + j, checked: false });
+      }
+    })
+
     // 加载状态结束
     loading.value = false;
 
@@ -138,6 +155,7 @@ const onLoad = () => {
 
 const onClickTitle = (item) => { // 点击物资标题回调
   console.warn(item);
+  show_material_detail.value = true;
 }
 
 const show_type = ref(false);
@@ -148,6 +166,58 @@ const type_checked = ref([]);
 const onConfirm = () => {
   console.warn(type_checked.value);
 }
+
+const search_value = ref('');
+const onBlur = () => {
+  // TODO: 输入框失去焦点，接口需要一个搜索接口，返回相应的值
+  console.warn(search_value.value);
+}
+
+const show_material_detail = ref(false);
+const onCloseDetail = () => { // 关闭物资详情窗口
+  show_material_detail.value = false;
+}
+
+const onCheckAll = (item) => { // 全选分类
+  item.checked = !item.checked;
+  item.m_list.forEach((m) => {
+    m.checked = item.checked;
+  });
+}
+const onCheck = (item, m) => { // 选中单个物资
+  m.checked = !m.checked;
+  item.checked = item.m_list.every(m => m.checked);
+}
+
+const addShoppingCart = () => { // 新增购物车
+  shop_cart_list.value = [];
+  list.value.forEach(item => {
+    item.m_list.forEach(m => {
+      if (m.checked) {
+        shop_cart_list.value.push(m);
+      }
+    })
+  });
+  // 购物车为空提示
+  if (!shop_cart_list.value.length) {
+    showToast('请选择物资');
+    return;
+  }
+  // TODO: 请求购物车接口，更新购物车数量
+  console.warn(shop_cart_list.value);
+}
+
+const goShoppingCart = () => { // 点击购物车图标
+  if ($route.path === '/material_pre_request') { // 待申领物资页面
+    onClose()
+  } else {
+    $router.push({ path: '/material_pre_request' });
+  }
+}
+
+const cart_count = ref(0); // 购物车数量
+
+const shop_cart_list = ref([]); // 购物车列表
 </script>
 
 <style lang="less">