delivery-depot-uniapp/pages/warehouse-detail-verification/warehouseDetail.vue

<template>
  <view class="container">
    <!-- Tab栏 -->
    <view class="tab-bar">
      <view
        class="tab-item"
        :class="{ active: currentTab === 0 }"
        @click="switchTab(0)"
      >
        仓房基本信息
      </view>
      <view
        class="tab-item"
        :class="{ active: currentTab === 1 }"
        @click="switchTab(1)"
      >
        库区基本信息
      </view>
    </view>

    <!-- 内容区域 -->
    <swiper class="content-swiper" :current="currentTab" @change="swiperChange">
      <!-- 仓房基本信息 -->
      <swiper-item>
        <view class="warehouse-content">
          <!-- 搜索框固定在顶部 -->
          <view class="search-box">
            <input
              type="text"
              v-model="searchValue"
              placeholder="请输入仓房名称"
            />
            <button class="search-btn" @click="search">搜索</button>
          </view>

          <view v-if="warhouseList.length === 0" class="empty-container">
            <image src="" mode="aspectFit" class="empty-image"></image>
            <text class="empty-text">暂无数据</text>
          </view>
          <!-- 列表部分可滚动 -->
          <scroll-view scroll-y class="scroll-content">
            <view class="info-list">
              <view
                class="info-card"
                v-for="(item, index) in warhouseList"
                :key="index"
              >
                <view class="info-item info-item-name">
                  <image
                    src="../../static/icons/warehouse-ico.png"
                    mode="widthFix"
                  ></image>
                  <text class="label">
                    <!-- <text class="iconfont icon-cangfangmingcheng"></text> -->
                    <!-- <image src="/static/icons/warehouse-ico.png" alt="" /> -->

                    仓房名称:</text
                  >
                  <text class="value">{{ item.cfmc }}</text>
                </view>
                <view class="info-row info-item-row">
                  <view class="info-item">
                    <text class="label">仓房类型:</text>
                    <text class="value">{{ filterLX(item.cflx) || "-" }}</text>
                  </view>
                  <view class="info-item">
                    <text class="label">仓房状态:</text>
                    <text class="value">{{ filterZT(item.cazt) || "-" }}</text>
                  </view>
                </view>
                <view class="info-row info-item-row">
                  <view class="info-item">
                    <text class="label">设计仓容:</text>
                    <text class="value">{{ item.sjcr + "吨" }}</text>
                  </view>
                  <view class="info-item">
                    <text class="label">是否空仓:</text>
                    <text class="value">{{
                      item.sfkc === 1 ? "是" : "否"
                    }}</text>
                  </view>
                </view>
                <view class="info-row info-item-row">
                  <view class="info-item">
                    <text class="label">租仓参考价:</text>
                    <text class="value">{{ item.zcckj || "-" }} 元/月</text>
                  </view>
                </view>
                <view class="info-row info-item-row">
                  <view class="info-item">
                    <text class="label">委托保管参考价:</text>
                    <text class="value">{{ item.wbgcj || "-" }} 元/吨/月</text>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </swiper-item>

      <!-- 库区基本信息 -->
      <swiper-item>
        <view class="warehouse-content">
          <scroll-view scroll-y class="scroll-content">
            <view class="warehouse-info">
              <view class="info-row-cang">
                <text class="label">库区名称</text>
                <text class="value">{{ kqxx.kqmc || "-" }}</text>
              </view>
              <view class="info-row-cang">
                <text class="label">所属企业</text>
                <text class="value">{{ kqxx.dwmc || "-" }}</text>
              </view>
              <view class="info-row-cang">
                <text class="label">统一社会信用代码</text>
                <text class="value">{{ kqxx.tyxydm || "-" }}</text>
              </view>
              <view class="info-row-cang">
                <text class="label">企业性质</text>
                <text class="value">{{ filterXZ(kqxx.qyxz) || "-" }}</text>
              </view>
              <view class="info-row-cang">
                <text class="label">库区地址</text>
                <text class="value">{{ kqxx.jtdz || "-" }}</text>
              </view>
              <view class="info-row-cang">
                <text class="label">库区负责人</text>
                <text class="value">{{ kqxx.kqfzr || "-" }}</text>
              </view>
              <view class="info-row-cang">
                <text class="label">库区联系方式</text>
                <text class="value">{{ kqxx.lxdh || "-" }}</text>
              </view>
              <view class="info-row-cang">
                <text class="label">占地面积</text>
                <text class="value">{{ kqxx.zdmj || "-" }}</text>
              </view>
              <view class="info-row-cang">
                <text class="label">经度</text>
                <text class="value">{{ kqxx.jd || "-" }}</text>
              </view>
              <view class="info-row-cang">
                <text class="label">纬度</text>
                <text class="value">{{ kqxx.wd || "-" }}</text>
              </view>
              <view class="info-row-cang">
                <text class="label">附件</text>
                <image
                  @click="previewImage(kqxx.resid)"
                  class="storage-image"
                  :src="kqxx.resid"
                  mode="aspectFit"
                />
              </view>
            </view>
          </scroll-view>
        </view>
      </swiper-item>
    </swiper>

    <!-- 底部按钮 -->
    <view class="footer">
      <button class="submit-btn" @click="handleSubmit">领取</button>
    </view>
  </view>
</template>

<script>
import { getCaxxByKqId, getKqxxByKqId, getTasks } from "@/api/task";
import { dictData } from "@/api/user";
import { getDictOptions, DICT_TYPE } from "@/utils/dict.js";

export default {
  data() {
    return {
      currentTab: 0,
      taskInfo: {},
      qyxzList: [],
      cflxList: [],
      ztlxList: [],
      warhouseList: [],
      kqxx: {},
    };
  },
  onLoad(options) {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on("acceptData", (data) => {
      const taskInfo = JSON.parse(data.taskInfo);

      uni.setNavigationBarTitle({
        title: taskInfo.kqmc || "库区信息",
      });

      this.taskInfo = taskInfo;
      uni.showLoading({
        title: "加载中...",
      });
      getCaxxByKqId({
        kqId: taskInfo.kqId,
        listType: 1,
      })
        .then((res) => {
          if (res.code === 0) {
            this.warhouseList = res.data;
          } else {
            uni.showToast({
              title: res.msg || "获取任务列表失败",
              icon: "none",
            });
          }
        })
        .finally(() => {
          uni.hideLoading();
        });

      getKqxxByKqId({
        kqId: taskInfo.kqId,
        listType: 1,
      }).then((res) => {
        this.kqxx = res.data;
      });
    });
  },
  async mounted() {
    // dictData("system_qyxz").then((res) => {
    //   this.qyxzList = res.data;
    // });
    this.qyxzList = await getDictOptions(DICT_TYPE.SYSTEM_QYXZ);
    this.cflxList = await getDictOptions(DICT_TYPE.SYSTEM_CFLX);
    this.ztlxList = await getDictOptions(DICT_TYPE.SYSTEM_CAZT);
  },
  methods: {
    filterXZ(value) {
      return this.qyxzList.find((item) => item.value == value)?.label;
    },
    filterLX(value) {
      return this.cflxList.find((item) => item.value == value)?.label;
    },
    filterZT(value) {
      return this.ztlxList.find((item) => item.value == value)?.label;
    },

    previewImage(url) {
      if (!url) {
        uni.showToast({
          title: "暂无附件",
          icon: "none",
        });
        return;
      }

      uni.previewImage({
        urls: [url],
      });
    },

    search() {
      // 加载
      uni.showLoading({
        title: "加载中...",
      });

      getCaxxByKqId({
        cfmc: this.searchValue,
        listType: 1,
        kqId: this.taskInfo.kqId,
      })
        .then((res) => {
          if (res.code === 0) {
            this.warhouseList = res.data;
          } else {
            uni.showToast({
              title: res.msg || "获取任务列表失败",
              icon: "none",
            });
          }
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    switchTab(index) {
      this.currentTab = index;
    },
    swiperChange(e) {
      this.currentTab = e.detail.current;
    },
    handleSubmit() {
      // 加载
      uni.showLoading({
        title: "领取中...",
      });
      // 处理领取逻辑
      getTasks({
        kqIds: [this.taskInfo.kqId],
        hyState: 3,
        listType: 1,
      })
        .then((res) => {
          if (res.code === 0) {
            uni.showToast({
              title: "领取成功",
              icon: "success",
            });
            // 获取上一页面的事件通道
            const eventChannel = this.getOpenerEventChannel();
            // 发送刷新事件
            eventChannel.emit("refreshList", { refresh: true });
            uni.navigateBack();
          } else {
            uni.hideLoading();
            uni.showToast({
              title: res.msg || "领取失败",
              icon: "none",
            });
          }
        })
        .catch(() => {
          uni.hideLoading();
          uni.showToast({
            title: "领取失败",
            icon: "none",
          });
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.page-title {
  padding: 20rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  background-color: #fff;
}

.tab-bar {
  display: flex;
  background-color: #cfddfc;
  // border-bottom: 1rpx solid #eee;

  .tab-item {
    flex: 1;
    text-align: center;
    padding: 20rpx 0;
    font-size: 35rpx;
    color: #333;
    font-weight: 400;

    &.active {
      color: #000;
      position: relative;
      font-weight: 500;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 190rpx;
        height: 10rpx;
        background-color: #4185fa;
      }
    }
  }
}

.content-swiper {
  flex: 1;
  height: 0;
  background: linear-gradient(#cfddfc 0%, #e6eeff 10%, #fff 100%);
}

.warehouse-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0);
}

.search-box {
  padding: 20rpx;
  background-color: rgba(255, 255, 255, 0);
  display: flex;
  justify-content: space-between;
  align-items: center;

  input {
    background-color: #fff;
    padding: 10rpx 20rpx;
    border-radius: 8rpx;
    font-size: 28rpx;
    width: 72%;
  }

  .search-btn {
    width: 20%;
    background-color: #2979ff;
    color: #fff;
    border-radius: 8rpx;
    font-size: 28rpx;
    margin: 0;
  }
}

.scroll-content {
  flex: 1;
  height: 0;
}

.info-list {
  padding: 20rpx;
}

.info-card {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

.info-item {
  flex: 1;
  display: flex;
  align-items: center;
  // 文字不换行
  // white-space: nowrap;
  // overflow: hidden;
  // text-overflow: ellipsis;

  image {
    width: 50rpx;
    height: 50rpx;
    margin-right: 10rpx;
  }

  .label {
    white-space: nowrap;
    color: #666;
    font-size: 30rpx;
    margin-right: 10rpx;
  }

  .value {
    color: #666;
    font-size: 30rpx;
  }
}

.info-item-row {
  display: flex;
  align-items: start;
  .info-item {
    display: flex;
    align-items: start;
    padding-right: 10rpx;
    box-sizing: border-box;
  }
}

.info-item-name {
  color: #000 !important;
  font-weight: 500 !important;
  .label {
    color: #000 !important;
  }
  .value {
    color: #000 !important;
  }
}

.warehouse-info {
  background-color: #fff;
  padding: 0 20rpx;
  margin: 20rpx;
  border-radius: 8rpx;

  .info-row-cang {
    display: flex;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #eee;
    align-items: center;
    justify-content: space-between;

    &:last-child {
      border-bottom: 1rpx solid #fff;
    }

    .label {
      color: #666;
      font-size: 28rpx;
    }

    .value {
      color: #000;
      font-size: 28rpx;
    }

    .storage-image {
      width: 400rpx !important;
      height: 200rpx !important;
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
}

.footer {
  padding: 20rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
}

.submit-btn {
  background-color: #2979ff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 32rpx;
}

.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // padding: 100rpx 0;

  .empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }

  .empty-text {
    color: #999;
    font-size: 28rpx;
  }
}
</style>