Hooke / temple_material_request

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
91c10ac2 1 parent de20ca3b

完善选择物资组件

Inline Side-by-side
Showing 2 changed files with 116 additions and 7 deletions
1 <!-- 1 <!--
2 * @Date: 2024-07-23 16:24:08 2 * @Date: 2024-07-23 16:24:08
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-07-23 16:33:39 4 + * @LastEditTime: 2024-07-23 17:50:18
5 * @FilePath: /temple_material_request/src/components/chooseMaterial/index.vue 5 * @FilePath: /temple_material_request/src/components/chooseMaterial/index.vue
6 * @Description: 选择物资组件 6 * @Description: 选择物资组件
7 --> 7 -->
...@@ -13,7 +13,68 @@ ...@@ -13,7 +13,68 @@
13 closeable 13 closeable
14 @close="onClose" 14 @close="onClose"
15 :style="{ height: '100%' }" 15 :style="{ height: '100%' }"
16 - ></van-popup> 16 + >
17 + <van-sticky :offset-top="-33">
18 + <div style="margin-top: 2rem; background-color: white;">
19 + <div style="padding: 1rem;">
20 + <van-row gutter="10" justify="center" align="center">
21 + <van-col span="16">
22 + <div style="background-color: #FBF9F1; display: flex; border-radius: 5rem; padding: 0 1rem; align-items: center; justify-content: center;">
23 + <van-icon name="search" /><van-field v-model="value" label="" placeholder="搜索物资" style="background-color: #FBF9F1;" />
24 + </div>
25 + </van-col>
26 + <van-col span="8">
27 + <div @click="showType" style="border-radius: 8px; border: 1px solid #DBDBDB; padding: 0.5rem 0 0.5rem 1rem; font-size: 0.9rem; color: #B4B4B4;">
28 + 物资分类&nbsp;&nbsp;
29 + <van-icon name="arrow-down" color="#A67939" />
30 + </div>
31 + </van-col>
32 + </van-row>
33 + </div>
34 + </div>
35 + </van-sticky>
36 + <van-list
37 + v-model:loading="loading"
38 + :finished="finished"
39 + finished-text="没有更多了"
40 + @load="onLoad"
41 + >
42 + <div v-for="item in list" :key="item" >
43 + <van-row justify="space-around" align="center" style="padding: 1rem; background-color: #F2F2F2;">
44 + <van-col span="8"><van-icon name="passed" size="1.25rem" />&nbsp;&nbsp;<span :style="{ color: styleColor.baseColor }">全选</span></van-col>
45 + <van-col span="8" style="text-align: center; font-size: 0.95rem; color: #666666; font-weight: bold;">物资分类1</van-col>
46 + <van-col span="8"></van-col>
47 + </van-row>
48 + <van-row align="center" justify="space-between" style="">
49 + <van-col span="24" style="display: flex; padding: 1rem; border-bottom: 1px solid #F5F5F5;">
50 + <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>
51 + </van-col>
52 + <van-col span="24" style="display: flex; padding: 1rem; border-bottom: 1px solid #F5F5F5;">
53 + <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>
54 + </van-col>
55 + </van-row>
56 + </div>
57 + </van-list>
58 + <div style="height: 6rem;"></div>
59 + <div class="control-bar">
60 + <van-button plain block type="primary" :color="styleColor.baseColor" @click="addMore">加入购物车</van-button>
61 + <div style="display: flex; align-items: center; margin-left: 1rem;">
62 + <van-badge :content="5">
63 + <van-icon name="shopping-cart-o" size="2.5rem" :color="styleColor.baseColor" @click="goShoppingCart" />
64 + </van-badge>
65 + </div>
66 + </div>
67 + <van-back-top class="custom" bottom="12vh" z-index="9999">返回顶部</van-back-top>
68 +
69 + <van-dialog v-model:show="show_type" title="请选择筛选分类" @confirm="onConfirm" show-cancel-button :confirm-button-color="styleColor.baseColor">
70 + <div style="padding: 1rem;">
71 + <van-checkbox-group v-model="type_checked" shape="square" :checked-color="styleColor.baseColor">
72 + <van-checkbox name="a" style="margin-bottom: 0.5rem;">复选框 a</van-checkbox>
73 + <van-checkbox name="b" style="margin-bottom: 0.5rem;">复选框 b</van-checkbox>
74 + </van-checkbox-group>
75 + </div>
76 + </van-dialog>
77 + </van-popup>
17 </div> 78 </div>
18 </template> 79 </template>
19 80
...@@ -25,6 +86,8 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@ ...@@ -25,6 +86,8 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
25 //import { } from '@/utils/generateModules.js' 86 //import { } from '@/utils/generateModules.js'
26 //import { } from '@/utils/generateIcons.js' 87 //import { } from '@/utils/generateIcons.js'
27 //import { } from '@/composables' 88 //import { } from '@/composables'
89 +import { styleColor } from "@/constant.js";
90 +
28 const $route = useRoute(); 91 const $route = useRoute();
29 const $router = useRouter(); 92 const $router = useRouter();
30 useTitle($route.meta.title); 93 useTitle($route.meta.title);
...@@ -50,8 +113,54 @@ watch( ...@@ -50,8 +113,54 @@ watch(
50 const onClose = () => { 113 const onClose = () => {
51 emit('close'); 114 emit('close');
52 } 115 }
116 +
117 +const list = ref([]);
118 +const loading = ref(false);
119 +const finished = ref(false);
120 +
121 +const onLoad = () => {
122 + // 异步更新数据
123 + // setTimeout 仅做示例，真实场景中一般为 ajax 请求
124 + setTimeout(() => {
125 + for (let i = 0; i < 10; i++) {
126 + list.value.push(list.value.length + 1);
127 + }
128 +
129 + // 加载状态结束
130 + loading.value = false;
131 +
132 + // 数据全部加载完成
133 + if (list.value.length >= 40) {
134 + finished.value = true;
135 + }
136 + }, 1000);
137 +};
138 +
139 +const onClickTitle = (item) => { // 点击物资标题回调
140 + console.warn(item);
141 +}
142 +
143 +const show_type = ref(false);
144 +const showType = () => {
145 + show_type.value = true;
146 +}
147 +const type_checked = ref([]);
148 +const onConfirm = () => {
149 + console.warn(type_checked.value);
150 +}
53 </script> 151 </script>
54 152
55 -<style lang="less" scoped> 153 +<style lang="less">
56 -.choose-material-page {} 154 +.choose-material-page {
155 + .control-bar {
156 + 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);
157 + }
158 +}
159 +
160 +.custom {
161 + width: 80px;
162 + font-size: 14px;
163 + text-align: center;
164 + background-color: #A67939;
165 +}
57 </style> 166 </style>
......
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-31 12:06:19 3 * @Date: 2022-05-31 12:06:19
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2024-07-23 13:46:16 5 + * @LastEditTime: 2024-07-23 17:17:52
6 * @FilePath: /temple_material_request/src/main.js 6 * @FilePath: /temple_material_request/src/main.js
7 * @Description: 7 * @Description:
8 */ 8 */
9 import { createApp } from 'vue'; 9 import { createApp } from 'vue';
10 -import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search, NavBar, Collapse, CollapseItem, RadioGroup, Radio, CheckboxGroup, Area, DatePicker, TimePicker, PickerGroup, Rate, Calendar, Divider, Popover, NoticeBar, ImagePreview, FloatingBubble, Badge } from 'vant'; 10 +import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search, NavBar, Collapse, CollapseItem, RadioGroup, Radio, CheckboxGroup, Area, DatePicker, TimePicker, PickerGroup, Rate, Calendar, Divider, Popover, NoticeBar, ImagePreview, FloatingBubble, Badge, BackTop } from 'vant';
11 import router from './router'; 11 import router from './router';
12 import App from './App.vue'; 12 import App from './App.vue';
13 // import axios from './utils/axios'; 13 // import axios from './utils/axios';
...@@ -25,6 +25,6 @@ app.config.warnHandler = () => null; ...@@ -25,6 +25,6 @@ app.config.warnHandler = () => null;
25 25
26 app.config.globalProperties.$http = axios; // 关键语句 26 app.config.globalProperties.$http = axios; // 关键语句
27 27
28 -app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider).use(NavBar).use(Collapse).use(CollapseItem).use(Radio).use(RadioGroup).use(CheckboxGroup).use(Area).use(DatePicker).use(TimePicker).use(PickerGroup).use(Rate).use(Calendar).use(Divider).use(Popover).use(NoticeBar).use(ImagePreview).use(FloatingBubble).use(Badge); 28 +app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider).use(NavBar).use(Collapse).use(CollapseItem).use(Radio).use(RadioGroup).use(CheckboxGroup).use(Area).use(DatePicker).use(TimePicker).use(PickerGroup).use(Rate).use(Calendar).use(Divider).use(Popover).use(NoticeBar).use(ImagePreview).use(FloatingBubble).use(Badge).use(BackTop);
29 app.use(vueEsign) 29 app.use(vueEsign)
30 app.mount('#app'); 30 app.mount('#app');
......