Hooke / temple_material_request

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
6dc39061 1 parent 6d34a3ad

新增申领物资页面

Inline Side-by-side
Showing 5 changed files with 139 additions and 10 deletions
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-26 23:52:36 3 * @Date: 2022-05-26 23:52:36
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2024-07-23 10:33:45 5 + * @LastEditTime: 2024-07-23 14:14:14
6 * @FilePath: /temple_material_request/src/App.vue 6 * @FilePath: /temple_material_request/src/App.vue
7 * @Description: 7 * @Description:
8 --> 8 -->
...@@ -144,8 +144,9 @@ body { ...@@ -144,8 +144,9 @@ body {
144 144
145 body { 145 body {
146 position: relative; 146 position: relative;
147 - display: flex; 147 + // display: flex;
148 - justify-content: center; 148 + // justify-content: center;
149 +
149 p { 150 p {
150 margin: 0; 151 margin: 0;
151 padding: 0; 152 padding: 0;
...@@ -154,7 +155,7 @@ body { ...@@ -154,7 +155,7 @@ body {
154 155
155 #app { 156 #app {
156 min-height: calc(100vh); 157 min-height: calc(100vh);
157 - max-width: 800px; 158 + // max-width: 800px;
158 position: relative; 159 position: relative;
159 } 160 }
160 161
......
...@@ -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-06-07 10:28:48 5 + * @LastEditTime: 2024-07-23 13:46:16
6 - * @FilePath: /data-table/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 } 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 } 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); 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);
29 app.use(vueEsign) 29 app.use(vueEsign)
30 app.mount('#app'); 30 app.mount('#app');
......
...@@ -12,6 +12,12 @@ export default [{ ...@@ -12,6 +12,12 @@ export default [{
12 title: '物资情况', 12 title: '物资情况',
13 } 13 }
14 }, { 14 }, {
15 + path: '/material_request',
16 + component: () => import('@/views/material_request.vue'),
17 + meta: {
18 + title: '申领物资',
19 + }
20 +}, {
15 path: '/auth', 21 path: '/auth',
16 component: () => import('@/views/auth.vue'), 22 component: () => import('@/views/auth.vue'),
17 meta: { 23 meta: {
......
1 <!-- 1 <!--
2 * @Date: 2024-07-23 10:50:38 2 * @Date: 2024-07-23 10:50:38
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-07-23 11:34:47 4 + * @LastEditTime: 2024-07-23 14:24:52
5 * @FilePath: /temple_material_request/src/views/material_list.vue 5 * @FilePath: /temple_material_request/src/views/material_list.vue
6 - * @Description: 文件描述 6 + * @Description: 物资情况页面
7 --> 7 -->
8 <template> 8 <template>
9 <div class="material-list-page"> 9 <div class="material-list-page">
......
1 +<!--
2 + * @Date: 2024-07-23 12:53:15
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-07-23 14:27:11
5 + * @FilePath: /temple_material_request/src/views/material_request.vue
6 + * @Description: 申领物资页面
7 +-->
8 +<template>
9 + <div class="material-request-page">
10 + <div class="list-wrapper">
11 + <van-row justify="space-between" class="select-all-item">
12 + <van-col span="8"><van-icon name="passed" size="1.25rem" />&nbsp;&nbsp;<span :style="{ color: styleColor.baseColor }">全选</span></van-col>
13 + <van-col span="16" style="text-align: right; font-size: 0.85rem; color: #666666;">参考上次同类活动的领用情况</van-col>
14 + </van-row>
15 + <van-list
16 + v-model:loading="loading"
17 + :finished="finished"
18 + finished-text="没有更多了"
19 + @load="onLoad"
20 + >
21 + <div v-for="item in list" :key="item" class="list-boxer">
22 + <van-row align="center" justify="space-between">
23 + <van-col span="16" style="display: flex;">
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>
25 + </van-col>
26 + <van-col span="8" style="display: flex; align-items: center;">
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" >
28 + <template #left-icon></template>
29 + </van-field>&nbsp;&nbsp;<span style="font-size: 0.9rem; color: #666;">个</span>
30 + </van-col>
31 + </van-row>
32 + </div>
33 + </van-list>
34 + <div style="height: 5rem;"></div>
35 + </div>
36 + <div class="control-bar">
37 + <div>
38 + <van-button icon="plus" type="primary" :color="styleColor.baseColor" @click="addMore">添加更多</van-button>
39 + </div>
40 + <div style="display: flex; align-items: center;">
41 + <van-button plain type="primary" :color="styleColor.baseColor" @click="addShoppingCart">加入购物车</van-button>
42 + &nbsp;&nbsp;
43 + <van-badge :content="5">
44 + <van-icon name="shopping-cart-o" size="2.5rem" :color="styleColor.baseColor" @click="goShoppingCart" />
45 + </van-badge>
46 + </div>
47 + </div>
48 + </div>
49 +</template>
50 +
51 +<script setup>
52 +import { ref } from 'vue'
53 +import { useRoute, useRouter } from 'vue-router'
54 +
55 +import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
56 +//import { } from '@/utils/generateModules.js'
57 +//import { } from '@/utils/generateIcons.js'
58 +//import { } from '@/composables'
59 +import { styleColor } from "@/constant.js";
60 +
61 +const $route = useRoute();
62 +const $router = useRouter();
63 +useTitle($route.meta.title);
64 +
65 +const num_value = ref('');
66 +
67 +const list = ref([]);
68 +const loading = ref(false);
69 +const finished = ref(false);
70 +
71 +const onLoad = () => {
72 + // 异步更新数据
73 + // setTimeout 仅做示例，真实场景中一般为 ajax 请求
74 + setTimeout(() => {
75 + for (let i = 0; i < 10; i++) {
76 + list.value.push(list.value.length + 1);
77 + }
78 +
79 + // 加载状态结束
80 + loading.value = false;
81 +
82 + // 数据全部加载完成
83 + if (list.value.length >= 40) {
84 + finished.value = true;
85 + }
86 + }, 1000);
87 +};
88 +
89 +const onClickTitle = (item) => { // 点击物资标题回调
90 + console.warn(item);
91 +}
92 +
93 +const addMore = () => { // 添加更多
94 + console.warn('addMore');
95 +}
96 +
97 +const addShoppingCart = () => { // 加入购物车
98 + console.warn('addShoppingCart');
99 +}
100 +
101 +const goShoppingCart = () => { // 跳转购物车
102 + console.warn('goShoppingCart');
103 +}
104 +</script>
105 +
106 +<style lang="less" scoped>
107 +.material-request-page {
108 + .list-wrapper {
109 + width: 100%;
110 + .select-all-item {
111 + padding: 0.5rem 1rem;
112 + }
113 + .list-boxer {
114 + margin: 0; padding: 1rem; border-top: 1px solid #f0f0f0;
115 + }
116 + }
117 +
118 + .control-bar {
119 + 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);
120 + }
121 +}
122 +</style>