物资信息页面完善和相关页面链接

hookehuyr
Commit 31ff64da340337359fd8b93b040d7bff68c93f75 31ff64da 1 parent 6d45336a
Showing 4 changed files with 138 additions and 4 deletions
src/components/materialDetail/index.vue
src/views/material_list.vue
src/views/material_pre_request.vue
src/views/material_request.vue
--- a/src/components/materialDetail/index.vue 0 → 100644
View file @31ff64d
+++ b/src/components/materialDetail/index.vue 0 → 100644
View file @31ff64d
+<!--
+ * @Date: 2024-07-23 18:31:35
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-07-24 11:00:42
+ * @FilePath: /temple_material_request/src/components/materialDetail/index.vue
+ * @Description: 物资详情页面
+-->
+<template>
+  <div class="material-detail-page">
+    <van-popup
+      v-model:show="showRight"
+      position="right"
+      closeable
+      @close="onClose"
+      :style="{ height: '100%', width: '100%' }"
+    >
+      <div style="margin-top: 3rem; background-color: white;">
+        <div style="display: flex; justify-content: center; align-items: center;">
+          <div style="padding: 2rem 5rem; padding-bottom: 2rem; border: 1px solid #F2EDE6; background-color: #FFFDF6; text-align: center;">
+            <van-image
+              width="6rem"
+              height="6rem"
+              fit="contain"
+              src="https://cdn.ipadbiz.cn/oa/pic/%E7%89%A9%E8%B5%84%E5%9B%BE@2x.png"
+            />
+            <div style="color: #e0d0ba; margin-top: 1rem;">物资图正在整理中</div>
+          </div>
+        </div>
+        <div style="text-align: center; font-weight: bold; color: #A67939; font-size: 1.15rem; margin: 1.5rem auto;">口袋义工服T恤（绿）</div>
+        <div style="color: #1C1C1C; background-color: #F2F2F2; font-size: 1rem; font-weight: bold; padding: 0.5rem 1.5rem;">基本信息</div>
+        <div style="padding: 1rem;">
+          <van-row style="margin-bottom: 0.5rem;">
+            <van-col span="8" style="color: #AFAFAF;">编码</van-col>
+            <van-col span="16">XFZ0021004</van-col>
+          </van-row>
+          <van-row style="margin-bottom: 0.5rem;">
+            <van-col span="8" style="color: #AFAFAF;">规格</van-col>
+            <van-col span="16">XXL</van-col>
+          </van-row>
+          <van-row style="margin-bottom: 0.5rem;">
+            <van-col span="8" style="color: #AFAFAF;">单位</van-col>
+            <van-col span="16">件</van-col>
+          </van-row>
+          <van-row style="margin-bottom: 0.5rem;">
+            <van-col span="8" style="color: #AFAFAF;">分类</van-col>
+            <van-col span="16">新服装</van-col>
+          </van-row>
+          <van-row style="margin-bottom: 0.5rem;">
+            <van-col span="8" style="color: #AFAFAF;">描述</van-col>
+            <van-col span="16">/</van-col>
+          </van-row>
+          <van-row style="margin-bottom: 0.5rem;">
+            <van-col span="8" style="color: #AFAFAF;">条码</van-col>
+            <van-col span="16">/</van-col>
+          </van-row>
+          <van-row style="margin-bottom: 0.5rem;">
+            <van-col span="8" style="color: #AFAFAF;">价格</van-col>
+            <van-col span="16">/</van-col>
+          </van-row>
+          <van-row style="margin-bottom: 0.5rem;">
+            <van-col span="8" style="color: #AFAFAF;">是否可定</van-col>
+            <van-col span="16">可定</van-col>
+          </van-row>
+          <van-row style="margin-bottom: 0.5rem;">
+            <van-col span="8" style="color: #AFAFAF;">状态</van-col>
+            <van-col span="16">上架</van-col>
+          </van-row>
+        </div>
+      </div>
+    </van-popup>
+  </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'
+const $route = useRoute();
+const $router = useRouter();
+useTitle($route.meta.title);
+
+const props = defineProps({
+  show: Boolean,
+});
+const emit = defineEmits(['close']);
+const showRight = ref(false);
+const onClose = () => {
+  emit('close');
+}
+
+// 监听字段变化
+watch(
+  () => props.show,
+  (v) => {
+    showRight.value = v;
+  }
+);
+</script>
+
+<style lang="less" scoped>
+.material-detail-page {}
+</style>
--- a/src/views/material_list.vue
View file @31ff64d
+++ b/src/views/material_list.vue
View file @31ff64d
 <!--
  * @Date: 2024-07-23 10:50:38
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-23 16:36:26
+ * @LastEditTime: 2024-07-24 11:04:16
  * @FilePath: /temple_material_request/src/views/material_list.vue
  * @Description: 物资情况页面
 -->
@@ -39,6 +39,8 @@
       <van-button @click="onClickRequest" type="primary" block :color="styleColor.baseColor">我要申领</van-button>
     </div>
   </div>
+
+  <material-detail :show="show_material_detail" @close="onCloseDetail"></material-detail>
 </template>
 <script setup>
@@ -50,6 +52,7 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
 //import { } from '@/utils/generateIcons.js'
 //import { } from '@/composables'
 import { styleColor } from "@/constant.js";
+import materialDetail from '@/components/materialDetail/index.vue';
 const $route = useRoute();
 const $router = useRouter();
@@ -84,6 +87,7 @@ const onLoad = () => {
 const onClickTitle = (item) => { // 点击物资标题回调
   console.warn(item);
+  show_material_detail.value = true;
 }
 const onClickRequest = () => { // 我要申领物资
@@ -91,6 +95,11 @@ const onClickRequest = () => { // 我要申领物资
     path: '/material_request'
   })
 }
+
+const show_material_detail = ref(false);
+const onCloseDetail = () => {
+  show_material_detail.value = false;
+}
 </script>
 <style lang="less" scoped>
--- a/src/views/material_pre_request.vue
View file @31ff64d
+++ b/src/views/material_pre_request.vue
View file @31ff64d
 <!--
  * @Date: 2024-07-23 12:53:15
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-23 18:17:22
+ * @LastEditTime: 2024-07-23 18:27:27
  * @FilePath: /temple_material_request/src/views/material_pre_request.vue
  * @Description: 待申领物资页面
 -->
 <template>
   <div class="material-pre-request-page">
     <div class="list-wrapper">
+      <van-sticky>
         <van-row justify="space-between" class="select-all-item">
           <van-col span="8">
             <!-- TODO：编辑模式下，不能确认申请 -->
@@ -20,6 +21,7 @@
             <van-icon name="delete-o" />&nbsp;删除
           </van-col>
         </van-row>
+      </van-sticky>
       <van-list
         v-model:loading="loading"
         :finished="finished"
@@ -85,6 +87,7 @@
   </van-dialog>
   <choose-material :show="show_choose_material" @close="onCloseChoose"></choose-material>
+  <material-detail :show="show_material_detail" @close="onCloseDetail"></material-detail>
 </template>
@@ -99,7 +102,7 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
 import { styleColor } from "@/constant.js";
 import dayjs from "dayjs";
 import chooseMaterial from '@/components/chooseMaterial/index.vue';
-
+import materialDetail from '@/components/materialDetail/index.vue';
 const $route = useRoute();
 const $router = useRouter();
@@ -131,6 +134,7 @@ const onLoad = () => {
 const onClickTitle = (item) => { // 点击物资标题回调
   console.warn(item);
+  show_material_detail.value = true;
 }
 const showPicker = ref(false);
@@ -170,6 +174,11 @@ const show_choose_material = ref(false);
 const onCloseChoose = () => {
   show_choose_material.value = false;
 }
+
+const show_material_detail = ref(false);
+const onCloseDetail = () => {
+  show_material_detail.value = false;
+}
 </script>
 <style lang="less" scoped>
@@ -179,6 +188,7 @@ const onCloseChoose = () => {
     width: 100%;
     .select-all-item {
       padding: 0.5rem 1rem;
+      background-color: white;
     }
     .list-boxer {
       margin: 0; padding: 1rem; border-top: 1px solid #f0f0f0;
--- a/src/views/material_request.vue
View file @31ff64d
+++ b/src/views/material_request.vue
View file @31ff64d
 <!--
  * @Date: 2024-07-23 12:53:15
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-23 16:38:59
+ * @LastEditTime: 2024-07-24 11:05:03
  * @FilePath: /temple_material_request/src/views/material_request.vue
  * @Description: 申领物资页面
 -->
@@ -54,6 +54,8 @@
   </div>
   <choose-material :show="show_choose_material" @close="onCloseChoose"></choose-material>
+  <material-detail :show="show_material_detail" @close="onCloseDetail"></material-detail>
+
 </template>
 <script setup>
@@ -66,6 +68,7 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
 //import { } from '@/composables'
 import { styleColor } from "@/constant.js";
 import chooseMaterial from '@/components/chooseMaterial/index.vue';
+import materialDetail from '@/components/materialDetail/index.vue';
 const $route = useRoute();
 const $router = useRouter();
@@ -102,6 +105,7 @@ const onLoad = () => {
 const onClickTitle = (item) => { // 点击物资标题回调
   console.warn(item);
+  show_material_detail.value = true;
 }
 const addMore = () => { // 添加更多
@@ -122,6 +126,11 @@ const show_choose_material = ref(false);
 const onCloseChoose = () => {
   show_choose_material.value = false;
 }
+
+const show_material_detail = ref(false);
+const onCloseDetail = () => {
+  show_material_detail.value = false;
+}
 </script>
 <style lang="less" scoped>