接口和逻辑调整

hookehuyr
Commit 6203582522691f32b57cea26685881d9888a99fa 62035825 1 parent 435e5adf
Showing 7 changed files with 370 additions and 114 deletions
src/api/material.js
src/components/chooseMaterial/index.vue
src/components/materialDetail/index.vue
src/views/material_list.vue
src/views/material_pre_request.vue
src/views/material_request.vue
src/views/success.vue
--- a/src/api/material.js
View file @6203582
+++ b/src/api/material.js
View file @6203582
 /*
  * @Date: 2022-06-17 14:54:29
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-25 13:13:43
+ * @LastEditTime: 2024-07-26 11:34:18
  * @FilePath: /temple_material_request/src/api/material.js
  * @Description: 物资申请接口
  */
@@ -60,6 +60,7 @@ export const addCartAPI = (params) => fn(fetch.post(Api.CART_ADD, params));
 /**
  * @description: 编辑购物车
  * @param: activity_id 活动ID
+ * @param: good_list [{good_id,apply_number}]
  */
 export const editCartAPI = (params) => fn(fetch.post(Api.CART_EDIT, params));
@@ -91,7 +92,7 @@ export const myUserAPI = (params) => fn(fetch.get(Api.MY_USER, params));
  * @param: contact_name 领用人姓名
  * @param: contact_phone 领用人电话
  * @param: use_time 使用时间
- * @param: good_list [good_id 物资ID, apply_number 申请数量]
+ * @param: good_list [good_id 物资ID, apply_number 申请数量] 如果为空，就自动查询购物车中的物资
  */
 export const addUseOrderAPI = (params) => fn(fetch.post(Api.USE_ORDER_ADD, params));
@@ -102,10 +103,10 @@ export const addUseOrderAPI = (params) => fn(fetch.post(Api.USE_ORDER_ADD, param
  * @param: offset
  * @param: limit
  */
-export const skuListAPI = (params) => fn(fetch.get(Api.SKU_LIST, params));
+export const getSkuListAPI = (params) => fn(fetch.get(Api.SKU_LIST, params));
 /**
  * @description: 规格物资详情
  * @param: i 规格物资ID
  */
-export const skuInfoAPI = (params) => fn(fetch.get(Api.SKU_INFO, params));
+export const getSkuInfoAPI = (params) => fn(fetch.get(Api.SKU_INFO, params));
--- a/src/components/chooseMaterial/index.vue
View file @6203582
+++ b/src/components/chooseMaterial/index.vue
View file @6203582
 <!--
  * @Date: 2024-07-23 16:24:08
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-25 13:32:12
+ * @LastEditTime: 2024-07-26 13:57:29
  * @FilePath: /temple_material_request/src/components/chooseMaterial/index.vue
  * @Description: 选择物资组件
 -->
 <template>
-  <div class="choose-material-page">
+  <div v-if="showBottom" class="choose-material-page">
     <van-popup
       v-model:show="showBottom"
       position="bottom"
@@ -20,14 +20,12 @@
               <van-row gutter="10" justify="center" align="center">
                 <van-col span="24">
                   <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="search_value" @blur="onBlur" 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-row>
             </div>
         </div>
-      </van-sticky>
-      <!-- TODO：物资列表显示值需要过滤掉购物车已经选中的物资，新增的物资需要显示在购物车最上面 -->
         <van-row justify="space-around" align="center" style="padding: 1rem; background-color: #F2F2F2;">
           <van-col span="8" @click="onCheckAll()">
             <van-icon v-if="is_all_checked" name="checked" size="1.25rem" :color="styleColor.baseColor" />
@@ -37,6 +35,8 @@
           <van-col span="8" style="text-align: center; font-size: 0.95rem; color: #666666; font-weight: bold;">选择物资</van-col>
           <van-col span="8"></van-col>
         </van-row>
+      </van-sticky>
+      <!-- TODO：物资列表显示值需要过滤掉购物车已经选中的物资，新增的物资需要显示在购物车最上面 -->
       <van-list
         v-model:loading="loading"
         :finished="finished"
@@ -49,7 +49,7 @@
               <van-icon v-if="item.checked" @click="onCheck(item)" name="checked" size="1.25rem" :color="styleColor.baseColor" />
               <van-icon v-else name="passed" @click="onCheck(item)" size="1.25rem" />&nbsp;&nbsp;
               <div class="van-ellipsis" :style="{ color: styleColor.baseColor, textDecoration: 'underline' }" @click="onClickTitle(item)">
-                {{ item.name }}
+                {{ item.name }}&nbsp;/&nbsp;{{ item.spec }}
               </div>
             </van-col>
           </van-row>
@@ -68,7 +68,7 @@
     </van-popup>
   </div>
-  <material-detail :show="show_material_detail" @close="onCloseDetail"></material-detail>
+  <material-detail :show="show_material_detail" :good-id="material_id" @close="onCloseDetail"></material-detail>
 </template>
@@ -82,11 +82,14 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
 //import { } from '@/composables'
 import { styleColor } from "@/constant.js";
 import materialDetail from '@/components/materialDetail/index.vue';
+import { getSkuListAPI, getCartListAPI, addCartAPI } from "@/api/material";
 const $route = useRoute();
 const $router = useRouter();
 useTitle($route.meta.title);
+const activity_id = $route.query.activity_id ? $route.query.activity_id : 800863;
+
 const props = defineProps({
   show: Boolean,
 });
@@ -94,46 +97,84 @@ const emit = defineEmits(['close']);
 const showBottom = ref(false);
-onMounted(() => {
+const limit = ref(20);
+const offset = ref(0);
+
+const list = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+
+
+const getList = async () => {
+  const { code, data } = await getSkuListAPI({ exclude_activity_id: activity_id, k: '', offset: offset.value, limit: limit.value });
+  if (code) {
+    // 默认勾选标记
+    data.forEach(item => {
+      item.checked = false;
+    });
+    list.value = data;
+    offset.value = list.value.length;
+  }
+}
+
+onMounted(async () => {
+  // 获取物资列表
+  getList();
+  // 购物车数量
+  getCartCount();
 });
+const getCartCount = async () => {
+  // 购物车数量
+  const cartList = await getCartListAPI({activity_id});
+  if (cartList.code) {
+    cart_count.value = cartList.data.length;
+  }
+}
+
 // 监听字段变化
 watch(
   () => props.show,
   (v) => {
     showBottom.value = v;
+    if (v) {
+    }
   }
 );
 const onClose = () => {
+  // 重置查询条件
+  offset.value = 0;
+  limit.value = 20;
+  finished.value = false;
+  list.value = [];
   emit('close');
 }
-const list = ref([]);
+const onLoad = async () => {
-const loading = ref(false);
-const finished = ref(false);
-
-const onLoad = () => {
   // 异步更新数据
-  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+  const { code, data } = await getSkuListAPI({ exclude_activity_id: activity_id, k: search_value.value, offset: offset.value, limit: limit.value });
-  setTimeout(() => {
+  if (code) {
-    for (let i = 0; i < 5; i++) {
+    // 默认勾选标记
-      list.value.push({ id: i, name: '物资' + i, checked: false });
+    data.forEach(item => {
-    }
+      item.checked = false;
-
+    });
-    // 加载状态结束
+    list.value = _.concat(list.value, data);
+    list.value = _.uniqBy(list.value, 'id');
+    offset.value = list.value.length;
     loading.value = false;
-
     // 数据全部加载完成
-    if (list.value.length >= 10) {
+    if (!data.length) {
+      // 加载状态结束
       finished.value = true;
     }
-  }, 1000);
+  }
 };
+const material_id = ref('');
 const onClickTitle = (item) => { // 点击物资标题回调
-  console.warn(item);
   show_material_detail.value = true;
+  material_id.value = item.id;
 }
 const show_type = ref(false);
@@ -146,9 +187,22 @@ const onConfirm = () => {
 }
 const search_value = ref('');
-const onBlur = () => {
+const onBlur = async () => { // 搜索回调
-  // TODO: 输入框失去焦点，接口需要一个搜索接口，返回相应的值
+  // 重置查询条件
-  console.warn(search_value.value);
+  offset.value = 0;
+  limit.value = 20;
+  finished.value = false;
+  list.value = [];
+  // 查询列表数据
+  const { code, data } = await getSkuListAPI({ exclude_activity_id: activity_id, k: search_value.value, offset: offset.value, limit: limit.value });
+  if (code) {
+    // 默认勾选标记
+    data.forEach(item => {
+      item.checked = false;
+    });
+    list.value = data;
+    offset.value = list.value.length;
+  }
 }
 const show_material_detail = ref(false);
@@ -181,27 +235,40 @@ const onCheck = (item) => {
   }
 }
-const addShoppingCart = () => { // 新增购物车
+const addShoppingCart = async () => { // 新增购物车
   shop_cart_list.value = [];
   list.value.forEach(item => {
-    item.m_list.forEach(m => {
+    if (item.checked) {
-      if (m.checked) {
+      shop_cart_list.value.push({
-        shop_cart_list.value.push(m);
+        good_id: item.id,
+        apply_number: 0
+      });
     }
-    })
   });
   // 购物车为空提示
   if (!shop_cart_list.value.length) {
     showToast('请选择物资');
     return;
   }
-  // TODO: 请求购物车接口，更新购物车数量
+  // 请求购物车接口，更新购物车数量
-  console.warn(shop_cart_list.value);
+  const { code, data } = await addCartAPI({ activity_id, good_list: shop_cart_list.value });
+  if (code) {
+    // 获取 shop_cart_list 中所有 id 的数组
+    let idsToRemove = shop_cart_list.value.map(item => item.good_id);
+
+    // 过滤 arr1，排除 id 在 idsToRemove 中的元素
+    list.value = list.value.filter(item => !idsToRemove.includes(item.id));
+
+    // 购物车数量
+    getCartCount();
+
+    showToast('添加成功');
+  }
 }
 const goShoppingCart = () => { // 点击购物车图标
   if ($route.path === '/material_pre_request') { // 待申领物资页面
-    onClose()
+    onClose();
   } else {
     $router.push({ path: '/material_pre_request' });
   }
--- a/src/components/materialDetail/index.vue
View file @6203582
+++ b/src/components/materialDetail/index.vue
View file @6203582
 <!--
  * @Date: 2024-07-23 18:31:35
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-24 11:00:42
+ * @LastEditTime: 2024-07-26 10:11:43
  * @FilePath: /temple_material_request/src/components/materialDetail/index.vue
  * @Description: 物资详情页面
 -->
 <template>
-  <div class="material-detail-page">
+  <div v-if="showRight" class="material-detail-page">
     <van-popup
       v-model:show="showRight"
       position="right"
@@ -16,7 +16,7 @@
     >
       <div style="margin-top: 3rem; background-color: white;">
         <div style="display: flex; justify-content: center; align-items: center;">
-          <div style="padding: 2rem 5rem; padding-bottom: 2rem; border: 1px solid #F2EDE6; background-color: #FFFDF6; text-align: center;">
+          <div v-if="!goodInfo.cover" style="padding: 2rem 5rem; padding-bottom: 2rem; border: 1px solid #F2EDE6; background-color: #FFFDF6; text-align: center;">
             <van-image
               width="6rem"
               height="6rem"
@@ -25,45 +25,71 @@
             />
             <div style="color: #e0d0ba; margin-top: 1rem;">物资图正在整理中</div>
           </div>
+          <div v-else>
+            <van-image
+              width="15rem"
+              height="12rem"
+              fit="contain"
+              :src="goodInfo.cover"
+            />
           </div>
-        <div style="text-align: center; font-weight: bold; color: #A67939; font-size: 1.15rem; margin: 1.5rem auto;">口袋义工服T恤（绿）</div>
+        </div>
+        <div style="text-align: center; font-weight: bold; color: #A67939; font-size: 1.15rem; margin: 1.5rem auto;">{{ goodInfo.name }}</div>
         <div style="color: #1C1C1C; background-color: #F2F2F2; font-size: 1rem; font-weight: bold; padding: 0.5rem 1.5rem;">基本信息</div>
         <div style="padding: 1rem;">
           <van-row style="margin-bottom: 0.5rem;">
             <van-col span="8" style="color: #AFAFAF;">编码</van-col>
-            <van-col span="16">XFZ0021004</van-col>
+            <van-col span="16">{{ goodInfo.coding }}</van-col>
           </van-row>
           <van-row style="margin-bottom: 0.5rem;">
             <van-col span="8" style="color: #AFAFAF;">规格</van-col>
-            <van-col span="16">XXL</van-col>
+            <van-col span="16">{{ goodInfo.spec }}</van-col>
           </van-row>
           <van-row style="margin-bottom: 0.5rem;">
             <van-col span="8" style="color: #AFAFAF;">单位</van-col>
-            <van-col span="16">件</van-col>
+            <van-col span="16">{{ goodInfo.specification }}</van-col>
           </van-row>
           <van-row style="margin-bottom: 0.5rem;">
             <van-col span="8" style="color: #AFAFAF;">分类</van-col>
-            <van-col span="16">新服装</van-col>
+            <van-col span="16">
+              <div v-if="goodInfo.category_name">{{ goodInfo.category_name }}</div>
+              <div v-else>/</div>
+            </van-col>
           </van-row>
           <van-row style="margin-bottom: 0.5rem;">
             <van-col span="8" style="color: #AFAFAF;">描述</van-col>
-            <van-col span="16">/</van-col>
+            <van-col span="16">
+              <div v-if="goodInfo.description" v-html="goodInfo.description"></div>
+              <div v-else>/</div>
+            </van-col>
           </van-row>
           <van-row style="margin-bottom: 0.5rem;">
             <van-col span="8" style="color: #AFAFAF;">条码</van-col>
-            <van-col span="16">/</van-col>
+            <van-col span="16">
+              <div v-if="goodInfo.bar_code">{{ goodInfo.bar_code }}</div>
+              <div v-else>/</div>
+            </van-col>
           </van-row>
           <van-row style="margin-bottom: 0.5rem;">
             <van-col span="8" style="color: #AFAFAF;">价格</van-col>
-            <van-col span="16">/</van-col>
+            <van-col span="16">
+              <div v-if="goodInfo.price">{{ goodInfo.price }}</div>
+              <div v-else>/</div>
+            </van-col>
           </van-row>
           <van-row style="margin-bottom: 0.5rem;">
             <van-col span="8" style="color: #AFAFAF;">是否可定</van-col>
-            <van-col span="16">可定</van-col>
+            <van-col span="16">
+              <div v-if="goodInfo.is_ordered">可定</div>
+              <div v-else>不可定</div>
+            </van-col>
           </van-row>
           <van-row style="margin-bottom: 0.5rem;">
             <van-col span="8" style="color: #AFAFAF;">状态</van-col>
-            <van-col span="16">上架</van-col>
+            <van-col span="16">
+              <div v-if="goodInfo.status === 9">上架</div>
+              <div v-else>下架</div>
+            </van-col>
           </van-row>
         </div>
       </div>
@@ -79,24 +105,37 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
 //import { } from '@/utils/generateModules.js'
 //import { } from '@/utils/generateIcons.js'
 //import { } from '@/composables'
+import { getSkuInfoAPI } from "@/api/material";
+
 const $route = useRoute();
 const $router = useRouter();
 useTitle($route.meta.title);
 const props = defineProps({
   show: Boolean,
+  goodId: Number,
 });
+
 const emit = defineEmits(['close']);
 const showRight = ref(false);
 const onClose = () => {
   emit('close');
 }
+const goodInfo = ref({});
+
 // 监听字段变化
 watch(
   () => props.show,
-  (v) => {
+  async (v) => {
     showRight.value = v;
+    if (v) {
+      const { code, data } = await getSkuInfoAPI({ i: props.goodId });
+      if (code) {
+        // 物资信息
+        goodInfo.value = data;
+      }
+    }
   }
 );
 </script>
--- a/src/views/material_list.vue
View file @6203582
+++ b/src/views/material_list.vue
View file @6203582
 <!--
  * @Date: 2024-07-23 10:50:38
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-25 10:00:39
+ * @LastEditTime: 2024-07-26 14:39:00
  * @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-tab v-for="(item, index) in tabList" :title="item.dept_name" shrink>
         <van-list
           v-model:loading="loading"
           :finished="finished"
@@ -18,16 +18,20 @@
           <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-title van-ellipsis" :style="{ color: styleColor.baseColor }" @click="onClickTitle(item)">{{ item.product_name }} / {{ item.spec }}</div>
-                <div class="item-attr">申领人：醒莲 2024/05/23使用 </div>
+                <div class="item-attr">
+                  <div v-for="(x, index) in item.order_list" :key="index">
+                    申领人:&nbsp;{{ x.contact_name }}&nbsp;{{ x.use_time }}&nbsp;使用
+                  </div>
+                </div>
               </van-col>
               <van-col span="5">
                 <div class="item-num-title">申请数量</div>
-                <div class="item-num van-ellipsis">200个</div>
+                <div class="item-num van-ellipsis">{{ item.total_apply_number }}&nbsp;个</div>
               </van-col>
               <van-col span="5">
                 <div class="item-num-title">实际领用</div>
-                <div class="item-num van-ellipsis">200个</div>
+                <div v-if="item.total_number" class="item-num van-ellipsis">{{ item.total_number }}&nbsp;个</div>
               </van-col>
             </van-row>
           </div>
@@ -40,63 +44,105 @@
     </div>
   </div>
-  <material-detail :show="show_material_detail" @close="onCloseDetail"></material-detail>
+  <material-detail :show="show_material_detail" :good-id="material_id" @close="onCloseDetail"></material-detail>
 </template>
 <script setup>
 import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-
+import { showDialog } 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';
-import { getActivityDeptsAPI } from "@/api/material";
+import { getActivityDeptsAPI, getGoodUseListAPI } from "@/api/material";
 const $route = useRoute();
 const $router = useRouter();
 useTitle($route.meta.title);
+// form_id=799652&i=801234&c=35697
+const activity_id = $route.query.activity_id ? $route.query.activity_id : '';
+const form_id = $route.query.form_id ? $route.query.form_id : '';
+const client_id = $route.query.client_id ? $route.query.client_id : '';
+
+onMounted(async () => {
+  const { data, code } = await getActivityDeptsAPI({ activity_id, is_previous: 0, only_my_dept: 0 });
+  if (code) {
+    tabList.value = data;
+    if (tabList.value.length) { // 默认选中组别ID
+      dept_id.value = tabList.value[0]['dept_id'];
+    } else { // 组别为空时跳转到购物车页面
+      showDialog({
+        title: '温馨提示',
+        message: '物资列表为空，将前往添加！',
+        confirmButtonColor: styleColor.baseColor
+      }).then(() => {
+        $router.push({
+          path: '/material_pre_request',
+          query: {
+            activity_id,
+            form_id,
+            client_id
+          }
+        })
+      });
+    }
+  }
+});
+
 const active = ref(0);
-const onChange = (index) => {
+const onChange = async (index) => {
-  console.warn(index);
+  dept_id.value = tabList.value[index]['dept_id'];
+  limit.value = 20;
+  offset.value = 0;
+  loading.value = false;
+  finished.value = false;
+  list.value = [];
 }
-// TODO: getActivityDeptsAPI,is_previous=0,only_my_dept=0
 const tabList = ref([]); // 组别列表
+const dept_id = ref('');
+
+const limit = ref(20);
+const offset = ref(0);
 const list = ref([]);
 const loading = ref(false);
 const finished = ref(false);
-const onLoad = () => {
+const onLoad = async () => {
   // 异步更新数据
-  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+  const { code, data } = await getGoodUseListAPI({ activity_id, dept_id: dept_id.value, is_previous: 0, offset: offset.value, limit: limit.value });
-  setTimeout(() => {
+  if (code) {
-    for (let i = 0; i < 10; i++) {
+    list.value = _.concat(list.value, data);
-      list.value.push(list.value.length + 1);
+    list.value = _.uniqBy(list.value, 'good_id');
-    }
+    offset.value = list.value.length;
-
-    // 加载状态结束
     loading.value = false;
-
     // 数据全部加载完成
-    if (list.value.length >= 40) {
+    if (!data.length) {
+      // 加载状态结束
       finished.value = true;
     }
-  }, 1000);
+  }
 };
+const material_id = ref('');
 const onClickTitle = (item) => { // 点击物资标题回调
-  console.warn(item);
   show_material_detail.value = true;
+  material_id.value = item.good_id;
 }
 const onClickRequest = () => { // 我要申领物资
   $router.push({
-    path: '/material_request'
+    path: '/material_request',
+    query: {
+      activity_id,
+      form_id,
+      client_id
+    }
   })
 }
@@ -118,7 +164,7 @@ const onCloseDetail = () => {
       margin-bottom: 0.5rem;
     }
     .item-attr {
-      font-size: 0.85rem;
+      font-size: 0.8rem;
       color: #8F8F8F;
     }
     .item-num-title {
@@ -128,7 +174,7 @@ const onCloseDetail = () => {
       margin-bottom: 0.5rem;
     }
     .item-num {
-      font-size: 1rem;
+      font-size: 0.95rem;
       text-align: center;
     }
   }
--- a/src/views/material_pre_request.vue
View file @6203582
+++ b/src/views/material_pre_request.vue
View file @6203582
--- a/src/views/material_request.vue
View file @6203582
+++ b/src/views/material_request.vue
View file @6203582
 <!--
  * @Date: 2024-07-23 12:53:15
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-25 10:01:06
+ * @LastEditTime: 2024-07-26 14:42:54
  * @FilePath: /temple_material_request/src/views/material_request.vue
  * @Description: 申领物资页面
 -->
 <template>
   <div class="material-request-page">
     <van-tabs v-model:active="active" @change="onChange" sticky :color="styleColor.baseColor">
-      <van-tab v-for="index in 8" :title="'标签 ' + index">
+      <van-tab v-for="(item, index) in tabList" :title="item.dept_name" shrink>
         <div class="list-wrapper">
           <van-sticky  :offset-top="44">
             <van-row justify="space-between" class="select-all-item">
@@ -32,12 +32,12 @@
                     <van-icon v-if="item.checked" @click="onCheck(item)" name="checked" size="1.25rem" :color="styleColor.baseColor" />
                     <van-icon v-else name="passed" @click="onCheck(item)" size="1.25rem" />&nbsp;&nbsp;
                     <div class="van-ellipsis" :style="{ color: styleColor.baseColor, textDecoration: 'underline' }" @click="onClickTitle(item)">
-                      {{ item.name }}
+                      {{ item.product_name }} / {{ item.spec }}
                     </div>
                   </van-col>
                   <van-col span="8" style="display: flex; align-items: center;">
                     <van-field
-                      v-model="item.num"
+                      v-model="item.total_apply_number"
                       style="border: 1px solid #f0f0f0; padding: 0; border-radius: 5px;"
                       label=""
                       label-width="0"
@@ -73,14 +73,14 @@
   </div>
   <choose-material :show="show_choose_material" @close="onCloseChoose"></choose-material>
-  <material-detail :show="show_material_detail" @close="onCloseDetail"></material-detail>
+  <material-detail :show="show_material_detail" :good-id="material_id" @close="onCloseDetail"></material-detail>
 </template>
 <script setup>
 import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { showToast } from 'vant';
+import { showToast, showDialog } from 'vant';
 import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
 //import { } from '@/utils/generateModules.js'
 //import { } from '@/utils/generateIcons.js'
@@ -88,14 +88,54 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
 import { styleColor } from "@/constant.js";
 import chooseMaterial from '@/components/chooseMaterial/index.vue';
 import materialDetail from '@/components/materialDetail/index.vue';
-import { getActivityDeptsAPI } from "@/api/material";
+import { getActivityDeptsAPI, getGoodUseListAPI, getCartListAPI, addCartAPI } from "@/api/material";
 const $route = useRoute();
 const $router = useRouter();
 useTitle($route.meta.title);
-// TODO: getActivityDeptsAPI,is_previous=1,only_my_dept=1
+const activity_id = $route.query.activity_id ? $route.query.activity_id : 800863;
+const form_id = $route.query.form_id ? $route.query.form_id : '';
+const client_id = $route.query.client_id ? $route.query.client_id : '';
+
+const cart_count = ref(0); // 购物车数量
+const getCartCount = async () => {
+  // 购物车数量
+  const cartList = await getCartListAPI({activity_id});
+  if (cartList.code) {
+    cart_count.value = cartList.data.length;
+  }
+}
+
+onMounted(async () => {
+  const { data, code } = await getActivityDeptsAPI({ activity_id, is_previous: 1, only_my_dept: 1 });
+  if (code) {
+    tabList.value = data;
+    if (tabList.value.length) { // 默认选中组别ID
+      dept_id.value = tabList.value[0]['dept_id'];
+    } else { // 组别为空时跳转到购物车页面
+      showDialog({
+        title: '温馨提示',
+        message: '物资列表为空，将前往添加！',
+        confirmButtonColor: styleColor.baseColor
+      }).then(() => {
+        $router.push({
+          path: '/material_pre_request',
+          query: {
+            activity_id,
+            form_id,
+            client_id
+          }
+        })
+      });
+    }
+  }
+  // 购物车数量
+  getCartCount();
+});
+
 const tabList = ref([]); // 组别列表
+const dept_id = ref('');
 const is_all_checked = ref(false);
 const num_value = ref('');
@@ -130,8 +170,9 @@ const onCheck = (item) => {
 }
 const onBlur = (item) => { // 输入框失去焦点回调
+  console.warn(item);
   if (item.checked) {
-    if (item.num === null || item.num === '') {
+    if (item.total_apply_number === null || item.total_apply_number === '') {
       item.error = true;
     } else {
       item.error = false;
@@ -144,40 +185,48 @@ const onChange = (index) => { // 切换标签回调
   console.warn(index);
   // 取消全选
   is_all_checked.value = false;
-  // TODO：重新查询列表数据, 取消选中
+  //
-  list.value.forEach(item => {
+  dept_id.value = tabList.value[index]['dept_id'];
-    item.checked = false;
+  limit.value = 20;
-    item.error = false;
+  offset.value = 0;
-  });
+  loading.value = false;
+  finished.value = false;
+  list.value = [];
 }
 const list = ref([]);
 const loading = ref(false);
 const finished = ref(false);
-const onLoad = () => {
+const limit = ref(20);
-  // 异步更新数据
+const offset = ref(0);
-  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
-  setTimeout(() => {
-    for (let i = 0; i < 10; i++) {
-      list.value.push({ id: list.value.length + 1, name: '标题 床垫 1.2m*2m', num: null, checked: false, error: false });
-    }
-    // 加载状态结束
+const onLoad = async () => {
+  // 异步更新数据
+  const { code, data } = await getGoodUseListAPI({ activity_id, dept_id: dept_id.value, is_previous: 1, offset: offset.value, limit: limit.value });
+  if (code) {
+    data.forEach(item => {
+      item.checked = false;
+      item.error = false;
+    });
+    list.value = _.concat(list.value, data);
+    list.value = _.uniqBy(list.value, 'good_id');
+    offset.value = list.value.length;
     loading.value = false;
-
     // 数据全部加载完成
-    if (list.value.length >= 40) {
+    if (!data.length) {
+      // 加载状态结束
       finished.value = true;
     }
-  }, 1000);
+  }
   // TODO: 如果查询到的数据大于0，需要取消全选
   is_all_checked.value = false;
 };
+const material_id = ref('');
 const onClickTitle = (item) => { // 点击物资标题回调
-  console.warn(item);
   show_material_detail.value = true;
+  material_id.value = item.good_id;
 }
 const addMore = () => { // 添加更多
@@ -185,9 +234,8 @@ const addMore = () => { // 添加更多
   show_choose_material.value = true;
 }
-const cart_count = ref(0);
 const shop_cart_list = ref([]); // 购物车列表
-const addShoppingCart = () => { // 加入购物车
+const addShoppingCart = async () => { // 加入购物车
   shop_cart_list.value = [];
   // 把选中的值集合
   list.value
@@ -201,7 +249,7 @@ const addShoppingCart = () => { // 加入购物车
     return;
   }
   // 校验购物车值
-  let error_list = shop_cart_list.value.filter((item) => { if (item.num === null || item.num === '') { return item;} })
+  let error_list = shop_cart_list.value.filter((item) => { if (item.total_apply_number === null || item.total_apply_number === '') { return item;} })
   if (error_list.length) {
     // 跳到第一个错误框
     scrollToSection(error_list[0].id);
@@ -211,18 +259,66 @@ const addShoppingCart = () => { // 加入购物车
     })
     return;
   }
-  // 购物车数量
+  //
-  cart_count.value = shop_cart_list.value.length;
+  shop_cart_list.value.forEach(item => {
+    item.apply_number = item.total_apply_number;
+  });
+  // 请求购物车接口
+  const { code, data } = await addCartAPI({ activity_id, good_list: shop_cart_list.value });
+  if (code) {
+    showToast('添加成功');
+    setTimeout(() => {
+      $router.push({
+        path: '/material_pre_request',
+        query: {
+          activity_id,
+          form_id,
+          client_id
+        }
+      });
+    }, 1000);
+  }
 }
 const goShoppingCart = () => { // 跳转购物车
-  console.warn('goShoppingCart');
+  if (!cart_count.value) {
-  $router.push({ path: '/material_pre_request' });
+    //
+    showDialog({
+      title: '温馨提示',
+      message:
+        `您的购物车为空，将前往添加！`,
+        confirmButtonColor: styleColor.baseColor,
+    })
+      .then(() => {
+        $router.push({
+          path: '/material_pre_request',
+          query: {
+            activity_id,
+            form_id,
+            client_id
+          }
+        });
+      })
+      .catch(() => {
+        // on cancel
+      });
+  } else {
+    $router.push({
+      path: '/material_pre_request',
+      query: {
+        activity_id,
+        form_id,
+        client_id
+      }
+    });
+  }
 }
 const show_choose_material = ref(false);
 const onCloseChoose = () => { // 关闭选择物资弹窗回调
   show_choose_material.value = false;
+  // 购物车数量
+  getCartCount();
 }
 const show_material_detail = ref(false);
--- a/src/views/success.vue
View file @6203582
+++ b/src/views/success.vue
View file @6203582
 <!--
  * @Date: 2022-06-29 18:18:02
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-24 18:25:08
+ * @LastEditTime: 2024-07-25 17:30:16
  * @FilePath: /temple_material_request/src/views/success.vue
  * @Description: 文件描述
 -->
@@ -65,8 +65,15 @@ const goTo = (type) => {
   // TODO：地址待定需要和后台沟通
   if (type === 'home') { // 返回首页
     // location.href = '/';
+    /**
+     * 活动首页：
+      http://oa.onwall.cn/f/main/?p=activity&form_id=799652&i=801234
+     */
   } else { // 返回活动主页
     // location.href = '/';
+    /**
+     * https://oa-dev.onwall.cn/?p=volunteer_home&t=volunteer&c=35697
+     */
   }
   console.warn(type);
 }