Hooke / temple_material_request

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
62035825 1 parent 435e5adf

接口和逻辑调整

Expand all
Inline Side-by-side
Showing 7 changed files with 378 additions and 122 deletions
/*
* @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));
......
<!--
* @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,23 +20,23 @@
<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-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" />
<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;">选择物资</van-col>
<van-col span="8"></van-col>
</van-row>
</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" />
<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;">选择物资</van-col>
<van-col span="8"></van-col>
</van-row>
<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 loading = ref(false);
const finished = ref(false);
const onLoad = () => {
const onLoad = async () => {
// 异步更新数据
// setTimeout 仅做示例，真实场景中一般为 ajax 请求
setTimeout(() => {
for (let i = 0; i < 5; i++) {
list.value.push({ id: i, name: '物资' + i, checked: false });
}
// 加载状态结束
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 = _.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 = () => {
// TODO: 输入框失去焦点，接口需要一个搜索接口，返回相应的值
console.warn(search_value.value);
const onBlur = async () => { // 搜索回调
// 重置查询条件
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 (m.checked) {
shop_cart_list.value.push(m);
}
})
if (item.checked) {
shop_cart_list.value.push({
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' });
}
......
<!--
* @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>
<div style="text-align: center; font-weight: bold; color: #A67939; font-size: 1.15rem; margin: 1.5rem auto;">口袋义工服T恤（绿）</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>
......
<!--
* @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-attr">申领人：醒莲 2024/05/23使用 </div>
<div class="item-title van-ellipsis" :style="{ color: styleColor.baseColor }" @click="onClickTitle(item)">{{ item.product_name }} / {{ item.spec }}</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) => {
console.warn(index);
const onChange = async (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 请求
setTimeout(() => {
for (let i = 0; i < 10; i++) {
list.value.push(list.value.length + 1);
}
// 加载状态结束
const { code, data } = await getGoodUseListAPI({ activity_id, dept_id: dept_id.value, is_previous: 0, offset: offset.value, limit: limit.value });
if (code) {
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);
}
};
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;
}
}
......
This diff is collapsed. Click to expand it.
<!--
* @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 => {
item.checked = false;
item.error = false;
});
//
dept_id.value = tabList.value[index]['dept_id'];
limit.value = 20;
offset.value = 0;
loading.value = false;
finished.value = false;
list.value = [];
}
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({ id: list.value.length + 1, name: '标题 床垫 1.2m*2m', num: null, checked: false, error: false });
}
const limit = ref(20);
const offset = ref(0);
// 加载状态结束
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');
$router.push({ path: '/material_pre_request' });
if (!cart_count.value) {
//
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);
......
<!--
* @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);
}
......