material_request.vue
4.1 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
<!--
* @Date: 2024-07-23 12:53:15
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-07-23 14:27:11
* @FilePath: /temple_material_request/src/views/material_request.vue
* @Description: 申领物资页面
-->
<template>
<div class="material-request-page">
<div class="list-wrapper">
<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-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: 5rem;"></div>
</div>
<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>
</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";
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const num_value = ref('');
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');
}
const addShoppingCart = () => { // 加入购物车
console.warn('addShoppingCart');
}
const goShoppingCart = () => { // 跳转购物车
console.warn('goShoppingCart');
}
</script>
<style lang="less" scoped>
.material-request-page {
.list-wrapper {
width: 100%;
.select-all-item {
padding: 0.5rem 1rem;
}
.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>