material_list.vue
3.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!--
* @Date: 2024-07-23 10:50:38
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-07-24 11:04:16
* @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-list
v-model:loading="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<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>
</van-col>
<van-col span="5">
<div class="item-num-title">申请数量</div>
<div class="item-num van-ellipsis">200个</div>
</van-col>
<van-col span="5">
<div class="item-num-title">实际领用</div>
<div class="item-num van-ellipsis">200个</div>
</van-col>
</van-row>
</div>
</van-list>
</van-tab>
</van-tabs>
<div style="height: 4rem;"></div>
<div style="position: fixed; left: 0; right: 0; bottom: 0; padding: 1rem; background-color: white;">
<van-button @click="onClickRequest" type="primary" block :color="styleColor.baseColor">我要申领</van-button>
</div>
</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 { 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 active = ref(0);
const onChange = (index) => {
console.warn(index);
}
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);
show_material_detail.value = true;
}
const onClickRequest = () => { // 我要申领物资
$router.push({
path: '/material_request'
})
}
const show_material_detail = ref(false);
const onCloseDetail = () => {
show_material_detail.value = false;
}
</script>
<style lang="less" scoped>
.material-list-page {
position: relative;
.material-list-item {
padding: 1rem;
border-top: 1px solid #F5F5F5;
.item-title {
font-size: 1rem;
text-decoration: underline;
margin-bottom: 0.5rem;
}
.item-attr {
font-size: 0.85rem;
color: #8F8F8F;
}
.item-num-title {
font-size: 0.85rem;
color: #8F8F8F;
text-align: center;
margin-bottom: 0.5rem;
}
.item-num {
font-size: 1rem;
text-align: center;
}
}
}
</style>