仓储物流详情

sub-operation-service/src/apis/warehouseLogistics.js

@@ -7,3 +7,11 @@ export function warehouseList(params = {}) {
     params,
   });
 }
+
+// 获取仓储详情
+export function warehouseDetail(id, params = {}) {
+  return request(`logistics/logisticwarehouse/detail/${id}`, {
+    method: 'GET',
+    params,
+  });
+}

sub-operation-service/src/views/warehouseLogistics/warehouse/detail.vue

@@ -3,17 +3,75 @@
     <common>
       <template #main>
         <el-card shadow="none" style="border-radius: 14px">
-          <div class="title">仓储 · <span style="color: rgba(37, 191, 130, 1)">查看详情</span></div>
+          <div class="title" @click="toBack(-1)">
+            <el-icon><ArrowLeftBold /></el-icon>仓储 · <span style="color: rgba(37, 191, 130, 1)">查看详情</span>
+          </div>
+          <div class="max-w-7xl mx-auto p-4">
+            <div class="flex items-center mb-8">
+              <div class="flex items-center mr-4">
+                <!-- 占位符图片，实际使用时替换为真实图片 -->
+                <img :src="state.data.imgPath" fit="cover" class="rounded-lg shadow image-box" />
+              </div>
+              <div class="flex-1">
+                <h3 class="text-xl font-bold mb-2">{{ state.data.name }}</h3>
+                <div class="text-gray-600 mb-2">
+                  <span>{{ state.data.parentTitle }}</span>
+                  <img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px; margin: 0 5px" />
+                  <img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
+                </div>
+                <div class="storage-tags">
+                  <el-tag
+                    v-for="(tags, indexT) in state.data.tag"
+                    :key="indexT"
+                    effect="plain"
+                    round
+                    style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82"
+                  >
+                    {{ tags }}
+                  </el-tag>
+                  <!--  <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">保鲜储存</el-tag>-->
+                </div>
+                <p class="mt-2 text-gray-700">联系人：{{ state.data.contactName }}</p>
+                <p class="mt-2 text-gray-700">联系电话：{{ state.data.contactPhone }}</p>
+                <p class="mt-2 text-gray-700">
+                  <el-icon><Location /></el-icon> {{ state.data.address }}
+                </p>
+              </div>
+              <div class="text-gray-500 text-sm flex items-center" style="text-align: right">
+                <div>
+                  <span style="color: #999999">报价：</span>
+                  <span class="ml-2 text-green-500 font-bold">
+                    ¥{{ state.data.price }}/{{
+                      state.data.priceSpec === 1 ? 'm³' : state.data.priceSpec === 2 ? '间' : state.data.priceSpec === 3 ? '㎡' : ''
+                    }}/{{ state.data.timeSpec === 1 ? '天' : state.data.timeSpec === 2 ? '月' : state.data.timeSpec === 3 ? '年' : '' }}
+                  </span>
+                </div>
+                <div>
+                  <el-button size="large" type="primary" @click="goDei">
+                    <el-icon class="el-icon--right"><ChatLineRound /></el-icon>
+                    留下信息
+                  </el-button>
+                </div>
+              </div>
+            </div>
+            <div class="mt-6">
+              <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
+              <div class="bg-white p-4 rounded-lg shadow-sm">
+                <p style="text-align: left" class="mb-4 text-gray-700" v-html="state.data.content ? state.data.content : '暂无介绍内容'"></p>
+              </div>
+            </div>
+          </div>
         </el-card>
       </template>
     </common>
   </section>
 </template>
 <script setup>
-import { ref, reactive, watch } from 'vue';
+import { ref, reactive, watch, onMounted } from 'vue';
 import { getAssetsFile } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import Common from '../components/common.vue';
+import { warehouseDetail } from '@/apis/warehouseLogistics.js';
 
 const route = useRoute();
 const router = useRouter();
@@ -22,5 +80,262 @@ const state = reactive({
   query: {},
   data: {},
 });
+
+const toBack = (level) => {
+  router.go(level);
+};
+
+const queryDetail = () => {
+  warehouseDetail(state.query.id).then((res) => {
+    if (res.code === 200) {
+      state.data = res.data;
+      for (let i in state.data) {
+        state.data[i].tag = state.data[i].tags.split(',');
+      }
+    }
+  });
+};
+
+onMounted(() => {
+  state.query.id = route.query.id;
+  queryDetail();
+});
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.title {
+  text-align: left;
+  font-size: 18px;
+  font-weight: bold;
+  cursor: pointer;
+}
+/* 根据需要添加样式，这里仅提供基础样式 */
+// 基础颜色配置
+$primary-color: #25bf82; // 主色调
+$text-dark: #25bf82; // 深色文字
+$text-regular: #606266; // 常规文字
+$border-color: #dcdfe6; // 边框颜色
+
+// 弹窗整体样式
+:deep(.custom-inquiry-dialog) {
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+  .el-dialog__header {
+    padding: 20px;
+    border-bottom: 1px solid #f2f6fc;
+    .el-dialog__title {
+      font-size: 18px;
+      color: $text-dark;
+      font-weight: 600;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 20px 28px;
+  }
+
+  .el-form-item__label {
+    color: $text-regular;
+    font-size: 14px;
+    padding-bottom: 6px;
+  }
+}
+
+.info-section {
+  padding: 0px 50px;
+  margin-bottom: 24px;
+  .info-item {
+    margin-bottom: 12px;
+    .label {
+      color: $text-regular;
+      margin-right: 8px;
+      font-size: 20px;
+    }
+    .value {
+      color: $text-dark;
+      font-weight: 500;
+      font-size: 20px;
+    }
+  }
+}
+
+// 输入框样式覆盖
+:deep(.el-input) {
+  .el-input__inner {
+    height: 40px;
+    line-height: 40px;
+    border-radius: 4px;
+    &:focus {
+      border-color: $primary-color;
+    }
+  }
+  .el-input__suffix {
+    color: $text-regular;
+    right: 12px;
+  }
+}
+
+// 下拉菜单样式
+:deep(.custom-select-dropdown) {
+  .el-select-dropdown__item {
+    color: $text-regular;
+    &.selected {
+      color: $primary-color;
+    }
+  }
+}
+
+// 按钮组样式
+.dialog-footer {
+  text-align: right;
+  .el-button {
+    padding: 10px 24px;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  .cancel-btn {
+    color: $text-regular;
+    &:hover {
+      color: $primary-color;
+      border-color: $primary-color;
+    }
+  }
+  .submit-btn {
+    color: #fff;
+    background: $primary-color;
+    &:hover {
+      background: mix($primary-color, #fff, 85%);
+    }
+  }
+}
+.bac {
+  background: rgba(37, 191, 130, 0.1);
+  border: 1px solid rgba(37, 191, 130, 0.5);
+  border-radius: 8px;
+  padding: 2px 5px;
+}
+
+.image-box {
+  width: 300px;
+  height: 300px;
+}
+
+.text-gray-500 {
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: start !important;
+  font-size: 20px !important;
+  color: #000000 !important;
+  padding-top: 30px;
+}
+
+.text-gray-600 {
+  font-size: 20px;
+  color: #000000 !important;
+}
+
+.flex-1 {
+  width: 40%;
+  height: 300px;
+  flex-direction: column;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-evenly;
+}
+
+.max-w-7xl {
+  max-width: 80rem;
+  background-color: #fff;
+  border-radius: 10px;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.text-green-500 {
+  color: #25bf82;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  text-align: left;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+  background-color: #f5f5f5;
+}
+
+.shadow {
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.text-xl {
+  font-size: 24px;
+}
+
+.text-gray-600 {
+  color: #757575;
+}
+
+.text-gray-700 {
+  color: #000000;
+  font-size: 18px;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+}
+
+.space-x-2 {
+  gap: 0.5rem;
+}
+
+.bg-green-500 {
+  background-color: #4caf50;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+</style>

sub-operation-service/src/views/warehouseLogistics/warehouse/index.vue

@@ -162,10 +162,10 @@ const currentChange = (current) => {
 };
 
 const toLink = (row) => {
-  // router.push({
+  router.push({
-  //   path: '/sub-operation-service/warehouse-detail',
+    name: 'warehouse-detail',
-  //   query: { id: row?.id ?? '100' },
+    query: { id: row?.id ?? '100' },
-  // });
+  });
 };
 </script>
 <style lang="scss" scoped>