material_request.vue
4.95 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
133
134
135
136
137
138
139
140
141
142
143
144
145
<!--
* @Date: 2024-07-23 12:53:15
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-07-23 16:38:59
* @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">
<div class="list-wrapper">
<van-sticky :offset-top="44">
<van-row justify="space-between" class="select-all-item">
<van-col span="8"><van-icon name="passed" size="1.25rem" /> <span :style="{ color: styleColor.baseColor }">全选</span></van-col>
<van-col span="16" style="text-align: right; font-size: 0.85rem; color: #666666;">参考上次同类活动的领用情况</van-col>
</van-row>
</van-sticky>
<van-list
v-model:loading="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<div v-for="item in list" :key="item" class="list-boxer">
<van-row align="center" justify="space-between">
<van-col span="16" style="display: flex;">
<van-icon name="passed" size="1.25rem" /> <div class="van-ellipsis" :style="{ color: styleColor.baseColor, textDecoration: 'underline' }" @click="onClickTitle(item)">床垫 1.2m*2m</div>
</van-col>
<van-col span="8" style="display: flex; align-items: center;">
<van-field v-model="num_value" style="border: 1px solid #f0f0f0; padding: 0; border-radius: 5px;" label="" label-width="0" input-align="center" placeholder="数量" type="number" >
<template #left-icon></template>
</van-field> <span style="font-size: 0.9rem; color: #666;">个</span>
</van-col>
</van-row>
</div>
</van-list>
<div style="height: 6rem;"></div>
</div>
</van-tab>
</van-tabs>
<div class="control-bar">
<div>
<van-button icon="plus" type="primary" :color="styleColor.baseColor" @click="addMore">添加更多</van-button>
</div>
<div style="display: flex; align-items: center;">
<van-button plain type="primary" :color="styleColor.baseColor" @click="addShoppingCart">加入购物车</van-button>
<van-badge :content="5">
<van-icon name="shopping-cart-o" size="2.5rem" :color="styleColor.baseColor" @click="goShoppingCart" />
</van-badge>
</div>
</div>
</div>
<choose-material :show="show_choose_material" @close="onCloseChoose"></choose-material>
</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 chooseMaterial from '@/components/chooseMaterial/index.vue';
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const num_value = ref('');
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);
}
const addMore = () => { // 添加更多
console.warn('addMore');
show_choose_material.value = true;
}
const addShoppingCart = () => { // 加入购物车
console.warn('addShoppingCart');
}
const goShoppingCart = () => { // 跳转购物车
console.warn('goShoppingCart');
$router.push({ path: '/material_pre_request' });
}
const show_choose_material = ref(false);
const onCloseChoose = () => {
show_choose_material.value = false;
}
</script>
<style lang="less" scoped>
.material-request-page {
.list-wrapper {
width: 100%;
.select-all-item {
padding: 0.5rem 1rem;
border-top: 1px solid #f0f0f0;
background-color: white;
}
.list-boxer {
margin: 0; padding: 1rem; border-top: 1px solid #f0f0f0;
}
}
.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);
}
}
</style>