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

<template>
  <section>
    <common>
      <template #main>
        <div class="warehouse-detail">
          <div class="title">
            <span @click="toBack(-1)">仓储</span>
            <span class="mx-10"> > </span>
            <span style="color: rgba(37, 191, 130, 1)">查看详情</span>
          </div>

          <div class="detail-content-box">
            <div class="detail-content-box-left">
              <img :src="state.data.imageUrl" fit="cover" />
            </div>
            <div class="detail-content-box-center">
              <p class="center-title">
                <span class="highlight">【{{ state.data.typeName }}】</span>{{ state.data.title }}
              </p>
              <div class="center-text">
                <div class="center-text-lable" style="line-height: 32px">参考价格：</div>
                <div class="flex-1">
                  <p class="top-text" style="line-height: 32px">{{ state.data.price }}</p>
                </div>
              </div>
              <div class="center-text">
                <div class="center-text-lable">仓库面积：</div>
                <div class="flex-1">{{ state.data.storageArea }}</div>
              </div>
              <div class="center-text">
                <div class="center-text-lable">仓库区域：</div>
                <div class="flex-1">{{ state.data.location }}</div>
              </div>
              <div class="center-text">
                <div class="center-text-lable">启动年月：</div>
                <div class="flex-1">2025年6月</div>
              </div>
              <div class="center-text">
                <div class="center-text-lable">计价单位：</div>
                <div class="flex-1">{{ state.data.pricingUnit }}</div>
              </div>
              <div style="margin-top: 20px">
                <el-button size="large" type="primary" @click="dialogVisible = true">立即预约</el-button>
                <el-button size="large" plain style="width: 96px">收藏</el-button>
                <el-button size="large" plain style="width: 96px">分享</el-button>
              </div>
            </div>
          </div>

          <div class="warehouse-detail-title">
            <img :src="getAssetsFile('images/warehouseLogistics/product.png')" alt="" style="width: 30px" />
            <div class="center-title" style="margin: 0 0 4px 10px">仓储信息</div>
          </div>
          <div class="warehouse-content-align">
            <div class="center-text">
              <div class="center-text-lable">预计租期：</div>
              <div class="flex-1">{{ state.storageInfor.leaseTerm }}</div>
              <div class="center-text-lable">货品类型：</div>
              <div class="flex-1">{{ state.storageInfor.productType }}</div>
            </div>
            <div class="center-text">
              <div class="center-text-lable">仓库面积：</div>
              <div class="flex-1">{{ state.data.storageArea }}</div>
              <div class="center-text-lable">可用面积：</div>
              <div class="flex-1">{{ state.data.usableArea }}</div>
            </div>
          </div>
        </div>
      </template>
    </common>
    <el-dialog v-model="dialogVisible" title="立即预约" width="1000" center>
      <!-- <h3>立即预约</h3> -->
      <img src="@/assets/images/warehouseLogistics/img28.png" fit="cover" class="storage-image" />

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </section>
</template>
<script setup>
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();

import img1 from './../images/普通仓储/1.jpg';
import img2 from './../images/普通仓储/2.jpg';
import img3 from './../images/恒温仓储/1.jpg';
import img4 from './../images/冷库/4.jpg';
import img5 from './../images/气调仓储/1.jpg';
const state = reactive({
  query: {},
  data: {
    imageUrl: img1,
    typeId: 1,
    typeName: '普通仓储',
    title: '孟定边贸仓储中心',
    operationUnit: '耿马宏泰物流有限公司 ',
    pricingUnit: '元/㎡·月',
    storageArea: '8,600㎡',
    usableArea: '2,300㎡',
    location: '孟定镇中缅大道8号',
    price: '￥12元/㎡/月',
  },
  storageInfor: {
    leaseTerm: '1-3年(可分段报价)', //预计租期
    productType: '水果(需控温0-5℃，湿度85%-90%)', //货品类型
  },
});
const allData = ref([
  {
    imageUrl: img1,
    typeId: 1,
    typeName: '普通仓储',
    title: '孟定边贸仓储中心',
    operationUnit: '耿马宏泰物流有限公司 ',
    pricingUnit: '元/㎡·月',
    storageArea: '8,600㎡',
    usableArea: '2,300㎡',
    location: '孟定镇中缅大道8号',
    price: '￥12元/㎡/月',
    rank: '1',
  },
  {
    imageUrl: img2,
    typeId: 2,
    typeName: '普通仓储',
    title: '绿色食品园区集散仓',
    operationUnit: '耿马县供销集团',
    pricingUnit: '元/吨·天',
    storageArea: '12,000㎡',
    usableArea: '4,500㎡',
    location: '绿色食品园区二期',
    price: '￥1.5元/吨/月',
    rank: '2',
  },
  {
    imageUrl: img3,
    typeId: 3,
    typeName: '恒温仓储',
    title: '蔗糖储备恒温库',
    operationUnit: '耿马糖业有限公司',
    pricingUnit: '元/托·月',
    storageArea: '3,200㎡',
    usableArea: '800㎡',
    location: '耿马糖厂东侧',
    price: '￥28元/托/月',
    rank: '3',
  },
  {
    imageUrl: img4,
    typeId: 4,
    typeName: '冷库',
    title: '孟定果蔬冷链中心',
    operationUnit: '临沧边境合作区管委会 ',
    pricingUnit: '元/板·天',
    storageArea: '5,000㎡',
    usableArea: '1,200㎡',
    location: '孟定海关监管区旁',
    price: '￥2.8元/板/月',
    rank: '4',
  },
  {
    imageUrl: img5,
    typeId: 5,
    typeName: '气调仓储',
    title: '高原蔬菜气调保鲜库',
    operationUnit: '耿马高原农业合作社 ',
    pricingUnit: '元/吨·月',
    storageArea: '1,800㎡',
    usableArea: '300㎡',
    location: '勐撒镇蔬菜基地',
    price: '￥45元/吨/月',
    rank: '5',
  },
]);
const dialogVisible = ref(false);

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();

  if (route.query.typeId) {
    state.data = allData.value.find((item) => item.typeId === route.query.typeId);
    console.log(state.data);
  }
});
</script>
<style lang="scss" scoped>
.warehouse-detail {
  border-radius: 14px;
  background-color: #fff;
  padding: 16px;
}
.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;
  }
}

// 输入框样式覆盖
: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: center;
  .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%);
    }
  }
}

.warehouse-detail-title {
  font-size: 22px;
  font-weight: bold;
  text-align: left;
  margin: 16px 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.detail-content-box {
  height: 276px;
  margin-top: 20px;
  display: flex;
  gap: 20px;
}
.detail-content-box-left {
  height: 100%;
  width: 40%;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
  }
}
.detail-content-box-center {
  flex: 1;
  text-align: left;
}
.center-title {
  font-size: 22px;
  font-weight: bold;
  text-align: left;
  margin-bottom: 10px;
  .highlight {
    color: #25bf82;
  }
}
.warehouse-content-align {
  text-align: left;
}
.center-text {
  font-size: 16px;
  display: flex;
  margin-bottom: 10px;
  .center-text-lable {
    color: #666;
    width: 86px;
  }
  .flex-1 {
    flex: 1;
    text-align: left;
  }
}
.top-text {
  font-size: 22px;
  color: #25bf82;
  font-weight: bold;
}
</style>