daimp-front/sub-operation-service/src/views/warehouseLogistics/logistics/match.vue

<template>
  <section>
    <common>
      <template #main>
        <el-card shadow="never" style="border-radius: 14px">
          <div class="title">
            <span @click="toBack(-2)">物流</span>
            <span class="mx-10"> > </span>
            <span @click="toBack(-1)">在线寄货</span>
            <span class="mx-10"> > </span>
            <span style="color: rgba(37, 191, 130, 1)">资源匹配</span>
          </div>
          <div style="display: flex">
            <div style="width: 60%">
              <el-descriptions title="发货信息" :column="3" style="margin-top: 20px">
                <el-descriptions-item label="姓名:">张超</el-descriptions-item>
                <el-descriptions-item label="电话:">15684968769</el-descriptions-item>
                <el-descriptions-item label="位置:">临沧市-耿马县</el-descriptions-item>
              </el-descriptions>
              <el-descriptions title="收货信息" :column="3">
                <el-descriptions-item label="姓名:">刘美丽</el-descriptions-item>
                <el-descriptions-item label="电话:">13375869426</el-descriptions-item>
                <el-descriptions-item label="位置:">临沧市-耿马县</el-descriptions-item>
              </el-descriptions>
              <el-descriptions title="收货信息" :column="3">
                <el-descriptions-item label="货物名称:">西红柿</el-descriptions-item>
                <el-descriptions-item label="货物重量:">500吨</el-descriptions-item>
              </el-descriptions>
            </div>
            <div style="flex: 1; text-align: right">
              <el-button type="primary" size="large" style="width: 100px; margin-top: 100px">重新匹配</el-button>
            </div>
          </div>
        </el-card>

        <div class="storage-content">
          <div class="content-custom-title">平台匹配仓储资源</div>
          <div class="tabs">
            <div class="tab cursor">
              <div
                v-for="(item, index) in tab1"
                :key="index"
                class="tab_list_li"
                :class="{ active: currentTab1 === index }"
                @click="handleTab1Click(item, index)"
              >
                {{ item }}
              </div>
            </div>
          </div>

          <el-row :gutter="20">
            <el-col v-for="(item, index) in allData" :key="index" :span="8">
              <div class="resource-item">
                <div class="resource-item-img">
                  <img :src="item.imageUrl" fit="cover" draggable="false" class="storage-image" />
                </div>
                <p class="center-title">
                  {{ item.title }}
                </p>
                <div class="resource-custom-text">距离您的位置：{{ item.distance }}</div>
                <div class="center-text">
                  <div class="center-text-lable">发布企业：</div>
                  <div class="flex-1" :title="item.operationUnit">{{ item.operationUnit }}</div>
                </div>
                <div class="center-text">
                  <div class="center-text-lable">联系电话：</div>
                  <div class="flex-1" :title="item.phoneNumber">{{ item.phoneNumber }}</div>
                </div>
                <div class="center-text" style="margin: 10px 0">
                  <div class="center-text-lable" style="color: 000; font-weight: bold">参考价格：</div>
                  <div class="flex-1" style="font-size: 20px; color: #25bf82; font-weight: bold">{{ item.price }}</div>
                </div>
                <div style="display: flex">
                  <el-button type="primary" size="large" style="flex: 1; margin: 10px 20px">立即查看</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </template>
    </common>
  </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();

const tab1 = reactive(['全部', '距离最近', '价格最便宜']);
const currentTab1 = ref(0);
const handleTab1Click = (item, index) => {
  currentTab1.value = index;
};

import img1 from './images/car1.png';
import img2 from './images/car2.png';
import img3 from './images/car3.png';
const allData = ref([
  {
    imageUrl: img1,
    title: '长途货车',
    operationUnit: '昌盛伟业运输有限公司 ',
    phoneNumber: '15684968769',
    pricingUnit: '元/㎡·月',
    location: '孟定镇中缅大道8号',
    cargoVolume: '61.2m³',
    price: '￥19元/吨/公里',
    distance: '9.1km',
  },
  {
    imageUrl: img2,
    title: '长途货车',
    operationUnit: '昌盛伟业运输有限公司',
    phoneNumber: '13375869426',
    pricingUnit: '元/吨·天',
    location: '绿色食品园区二期',
    cargoVolume: '63m³',
    price: '￥20元/吨/公里',
    distance: '10.3km',
  },
  {
    imageUrl: img3,
    title: '长途货车',
    operationUnit: '昌盛伟业运输有限公司',
    phoneNumber: '15958621375',
    pricingUnit: '元/托·月',
    location: '耿马糖厂东侧',
    cargoVolume: '63m³',
    price: '￥20元/吨/公里',
    distance: '12.6km',
  },
]);

const toBack = (level) => {
  router.go(level);
};

const param = ref({
  id: '100',
});
const queryDetail = () => {
  warehouseDetail(param).then((res) => {
    if (res.code === 200) {
      allData.value = res.data;
      for (let i in allData.value) {
        allData.value[i].tag = allData.value[i].tags.split(',');
      }
    }
  });
};

onMounted(() => {
  param.value.id = route.query.id ?? '100';
  // queryDetail();
});
</script>
<style lang="scss" scoped>
.title {
  text-align: left;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.storage-content {
  padding: 20px 20px 0 20px;
  margin-top: 20px;
  border-radius: 14px;
  background-color: #fff;
}
.content-custom-title {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  margin-bottom: 10px;
}

.tabs {
  //height: 160px;
  line-height: 50px;
  display: flex;
  flex-direction: column;
  font-size: 18px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}
.tabs0 {
  padding: 0;
}
.tab {
  // height: 100px;
  width: 850px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow-x: auto;
  overflow: auto; /* 启用滚动 */
  white-space: nowrap; /* 强制单行显示 */
  -ms-overflow-style: none; /* IE/Edge 兼容 */
  scrollbar-width: none; /* 隐藏滚动条 */
  .tab_list {
    color: #999999;
    font-size: 20px;
    font-weight: 400;
  }
  .tab_list_li {
    margin-left: 40px;
    color: #666;
    font-size: 18px;
    font-weight: 400;
    transition: color 0.3s ease;
  }
  .tab_list_li:first-child {
    margin-left: 0px;
  }
  .tab_list_li.active {
    color: #25bf82;
    font-weight: bold;
  }
}
.cursor {
  cursor: pointer;
}
.active {
  color: #25bf82;
  font-weight: bold;
}

.resource-item {
  width: 100%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  text-align: left;
  .resource-item-img {
    width: 100%;
    height: 250px;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    background-color: rgb(102 102 102 / 10%);
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 100%;
      min-height: 100%;
      object-fit: cover;
    }
  }
  .center-title {
    color: #666;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
    .highlight {
      color: #25bf82;
    }
  }
  .resource-custom-text {
    margin-bottom: 10px;
    font-size: 16px;
    color: #25bf82;
  }
  .center-text {
    font-size: 16px;
    display: flex;
    margin-bottom: 10px;
    .center-text-lable {
      color: #666;
      width: 86px;
      line-height: 20px;
    }
    .flex-1 {
      flex: 1;
      line-height: 20px;
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>