Hooke / temple_material_request

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

物资选择组件列表变成单行列表

Inline Side-by-side
Showing 2 changed files with 276 additions and 48 deletions
<!--
* @Date: 2024-07-23 16:24:08
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-07-24 18:14:14
* @FilePath: /temple_material_request/src/components/chooseMaterial/index.vue
* @Description: 选择物资组件
-->
<template>
<div class="choose-material-page">
<van-popup
v-model:show="showBottom"
position="bottom"
closeable
@close="onClose"
:style="{ height: '100%' }"
>
<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="search_value" @blur="onBlur" 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>
<!-- TODO：物资列表显示值需要过滤掉购物车已经选中的物资，新增的物资需要显示在购物车最上面 -->
<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" @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 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="addShoppingCart">加入购物车</van-button>
<div style="display: flex; align-items: center; margin-left: 1rem;">
<van-badge :content="cart_count">
<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" 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();
useTitle($route.meta.title);
const props = defineProps({
show: Boolean,
});
const emit = defineEmits(['close']);
const showBottom = ref(false);
onMounted(() => {
});
// 监听字段变化
watch(
() => props.show,
(v) => {
showBottom.value = v;
}
);
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 < 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;
// 数据全部加载完成
if (list.value.length >= 40) {
finished.value = true;
}
}, 1000);
};
const onClickTitle = (item) => { // 点击物资标题回调
console.warn(item);
show_material_detail.value = true;
}
const show_type = ref(false);
const showType = () => {
show_type.value = true;
}
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">
.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>
<!--
* @Date: 2024-07-23 16:24:08
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-07-24 18:14:14
* @LastEditTime: 2024-07-25 13:32:12
* @FilePath: /temple_material_request/src/components/chooseMaterial/index.vue
* @Description: 选择物资组件
-->
......@@ -18,22 +18,25 @@
<div style="margin-top: 2rem; background-color: white;">
<div style="padding: 1rem;">
<van-row gutter="10" justify="center" align="center">
<van-col span="16">
<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;" />
</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>
<!-- 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"
......@@ -41,21 +44,12 @@
@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" @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 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 }}
<van-col span="24" style="display: flex; padding: 1rem; border-bottom: 1px solid #F5F5F5;">
<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 }}
</div>
</van-col>
</van-row>
......@@ -71,16 +65,6 @@
</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" 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>
......@@ -134,20 +118,14 @@ const onLoad = () => {
// setTimeout 仅做示例，真实场景中一般为 ajax 请求
setTimeout(() => {
for (let i = 0; i < 5; i++) {
list.value.push({ id: i, name: '物资分类' + i, checked: false, m_list: [] });
list.value.push({ id: i, name: '物资' + i, checked: false });
}
list.value.forEach((item) => {
for (let j = 0; j < 5; j++) {
item.m_list.push({ id: j, name: '标题' + j, checked: false });
}
})
// 加载状态结束
loading.value = false;
// 数据全部加载完成
if (list.value.length >= 40) {
if (list.value.length >= 10) {
finished.value = true;
}
}, 1000);
......@@ -178,15 +156,29 @@ const onCloseDetail = () => { // 关闭物资详情窗口
show_material_detail.value = false;
}
const onCheckAll = (item) => { // 全选分类
item.checked = !item.checked;
item.m_list.forEach((m) => {
m.checked = item.checked;
});
const is_all_checked = ref(false);
const onCheckAll = () => {
is_all_checked.value = !is_all_checked.value;
if (is_all_checked.value) {
list.value.forEach(item => {
item.checked = true;
})
} else {
list.value.forEach(item => {
item.checked = false;
item.error = false;
})
}
}
const onCheck = (item, m) => { // 选中单个物资
m.checked = !m.checked;
item.checked = item.m_list.every(m => m.checked);
const onCheck = (item) => {
item.checked = !item.checked;
// 全部为选中
let all_checked = list.value.every((item) => item.checked === true);
if (all_checked) {
is_all_checked.value = true;
} else {
is_all_checked.value = false;
}
}
const addShoppingCart = () => { // 新增购物车
......