hookehuyr

申领物资页面新增组别切换

1 <!-- 1 <!--
2 * @Date: 2024-07-23 12:53:15 2 * @Date: 2024-07-23 12:53:15
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-07-23 14:27:11 4 + * @LastEditTime: 2024-07-23 16:12:12
5 * @FilePath: /temple_material_request/src/views/material_request.vue 5 * @FilePath: /temple_material_request/src/views/material_request.vue
6 * @Description: 申领物资页面 6 * @Description: 申领物资页面
7 --> 7 -->
8 <template> 8 <template>
9 <div class="material-request-page"> 9 <div class="material-request-page">
10 - <div class="list-wrapper"> 10 + <van-tabs v-model:active="active" @change="onChange" sticky :color="styleColor.baseColor">
11 - <van-row justify="space-between" class="select-all-item"> 11 + <van-tab v-for="index in 8" :title="'标签 ' + index">
12 - <van-col span="8"><van-icon name="passed" size="1.25rem" />&nbsp;&nbsp;<span :style="{ color: styleColor.baseColor }">全选</span></van-col> 12 + <van-list
13 - <van-col span="16" style="text-align: right; font-size: 0.85rem; color: #666666;">参考上次同类活动的领用情况</van-col> 13 + v-model:loading="loading"
14 - </van-row> 14 + :finished="finished"
15 - <van-list 15 + finished-text="没有更多了"
16 - v-model:loading="loading" 16 + @load="onLoad"
17 - :finished="finished" 17 + >
18 - finished-text="没有更多了" 18 + <div class="list-wrapper">
19 - @load="onLoad" 19 + <van-sticky :offset-top="44">
20 - > 20 + <van-row justify="space-between" class="select-all-item">
21 - <div v-for="item in list" :key="item" class="list-boxer"> 21 + <van-col span="8"><van-icon name="passed" size="1.25rem" />&nbsp;&nbsp;<span :style="{ color: styleColor.baseColor }">全选</span></van-col>
22 - <van-row align="center" justify="space-between"> 22 + <van-col span="16" style="text-align: right; font-size: 0.85rem; color: #666666;">参考上次同类活动的领用情况</van-col>
23 - <van-col span="16" style="display: flex;"> 23 + </van-row>
24 - <van-icon name="passed" size="1.25rem" />&nbsp;&nbsp;<div class="van-ellipsis" :style="{ color: styleColor.baseColor, textDecoration: 'underline' }" @click="onClickTitle(item)">床垫 1.2m*2m</div> 24 + </van-sticky>
25 - </van-col> 25 + <van-list
26 - <van-col span="8" style="display: flex; align-items: center;"> 26 + v-model:loading="loading"
27 - <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" > 27 + :finished="finished"
28 - <template #left-icon></template> 28 + finished-text="没有更多了"
29 - </van-field>&nbsp;&nbsp;<span style="font-size: 0.9rem; color: #666;">个</span> 29 + @load="onLoad"
30 - </van-col> 30 + >
31 - </van-row> 31 + <div v-for="item in list" :key="item" class="list-boxer">
32 - </div> 32 + <van-row align="center" justify="space-between">
33 - </van-list> 33 + <van-col span="16" style="display: flex;">
34 - <div style="height: 5rem;"></div> 34 + <van-icon name="passed" size="1.25rem" />&nbsp;&nbsp;<div class="van-ellipsis" :style="{ color: styleColor.baseColor, textDecoration: 'underline' }" @click="onClickTitle(item)">床垫 1.2m*2m</div>
35 - </div> 35 + </van-col>
36 + <van-col span="8" style="display: flex; align-items: center;">
37 + <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" >
38 + <template #left-icon></template>
39 + </van-field>&nbsp;&nbsp;<span style="font-size: 0.9rem; color: #666;">个</span>
40 + </van-col>
41 + </van-row>
42 + </div>
43 + </van-list>
44 + <div style="height: 3rem;"></div>
45 + </div>
46 + </van-list>
47 + </van-tab>
48 + </van-tabs>
36 <div class="control-bar"> 49 <div class="control-bar">
37 <div> 50 <div>
38 <van-button icon="plus" type="primary" :color="styleColor.baseColor" @click="addMore">添加更多</van-button> 51 <van-button icon="plus" type="primary" :color="styleColor.baseColor" @click="addMore">添加更多</van-button>
...@@ -64,6 +77,11 @@ useTitle($route.meta.title); ...@@ -64,6 +77,11 @@ useTitle($route.meta.title);
64 77
65 const num_value = ref(''); 78 const num_value = ref('');
66 79
80 +const active = ref(0);
81 +const onChange = (index) => {
82 + console.warn(index);
83 +}
84 +
67 const list = ref([]); 85 const list = ref([]);
68 const loading = ref(false); 86 const loading = ref(false);
69 const finished = ref(false); 87 const finished = ref(false);
...@@ -109,6 +127,8 @@ const goShoppingCart = () => { // 跳转购物车 ...@@ -109,6 +127,8 @@ const goShoppingCart = () => { // 跳转购物车
109 width: 100%; 127 width: 100%;
110 .select-all-item { 128 .select-all-item {
111 padding: 0.5rem 1rem; 129 padding: 0.5rem 1rem;
130 + border-top: 1px solid #f0f0f0;
131 + background-color: white;
112 } 132 }
113 .list-boxer { 133 .list-boxer {
114 margin: 0; padding: 1rem; border-top: 1px solid #f0f0f0; 134 margin: 0; padding: 1rem; border-top: 1px solid #f0f0f0;
......