kd-aiot-frontend-portal/src/views/traceability/traceabilityCode/purchase.vue

<template>
  <div class="purchase-traceability-page">
    <!-- 顶部导航栏 -->
    <div class="nav-bar">
      <div class="nav-left" @click="handleBack">
        <i class="el-icon-arrow-left back-icon"></i>
      </div>
      <div class="nav-title">采购溯源</div>
      <div class="nav-right"></div>
    </div>
    
    <!-- 主内容区 -->
    <div class="content-wrapper">
      <!-- 产品图片区域 -->
      <div class="product-image-section">
        <div class="product-title">
          采购溯源
        </div>
        <div style="height: 200px;">
          <img v-if="purchaseInfo && purchaseInfo.purchaseImgUrl" class="product-image" :src="purchaseInfo.purchaseImgUrl" alt="产品图片">
        </div>
      </div>
      
      <!-- 采购信息列表 -->
      <div class="info-list">
        <!-- 采购详情标题 -->
        <div class="info-title">
          采购详情
        </div>
        <div class="info-item">
          <span class="info-label">批次号:</span>
          <span class="info-value">{{ purchaseInfo.sourceBatchNo }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">产地:</span>
          <span class="info-value">{{ purchaseInfo.purchaseOrigins }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">供应商名称:</span>
          <span class="info-value">{{ purchaseInfo.supplierName }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">采收时间:</span>
          <span class="info-value">{{ purchaseInfo.purchaseCollectDate }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">采购人员:</span>
          <span class="info-value">{{ purchaseInfo.purchaseUserName }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">采购数量:</span>
          <span class="info-value">{{ purchaseInfo.purchaseQuantity }}{{ purchaseInfo.measuringUnit }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">采购重量:</span>
          <span class="info-value">{{ purchaseInfo.purchaseWeight }}{{ purchaseInfo.weightUnit }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">采购日期:</span>
          <span class="info-value">{{ purchaseInfo.purchaseDate }}</span>
        </div>
        <div class="images-section">
          <span class="section-subtitle">图片:</span>
          <div class="images-grid">
            <img v-if="purchaseInfo && purchaseInfo.purchaseImgUrl" class="detail-image" :src="purchaseInfo.purchaseImgUrl" alt="详情图片">
          </div>
        </div>
      </div>
      
      <!-- 返回首页按钮 -->
      <!-- <div class="home-button" @click="goToHome">
        <svg class="home-icon" viewBox="0 0 16 16" width="32" height="32">
          <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6a.5.5 0 1 0 .708.708L8 2.207l5.646 5.647a.5.5 0 0 0 .708-.708l-6-6zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm-.5 7a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2a.5.5 0 0 1 .5-.5zm0 3a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5z"/>
        </svg>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'PurchaseTraceabilityPage',
  data() {
    return {
      // 使用项目中已有的图标路径
      productImageSrc: require('@/assets/traceability/1.svg'),
      detailImageSrc: require('@/assets/traceability/1.svg'),
      // 定义detail对象来存储从路由获取的参数
      detail: {},
      purchaseInfo: {}
    };
  },
  
  mounted() {
    console.log('路由参数:');
    console.log('路由参数:', this.$route.query);
    // 从路由参数中获取detail对象
    if (this.$route.query && this.$route.query.detail) {
      try {
        // 解析JSON字符串为对象
        this.detail = JSON.parse(this.$route.query.detail);
        console.log('获取到的detail参数:', this.detail);
        this.purchaseInfo = this.detail.purchaseInfo || {};
      } catch (error) {
        console.error('解析detail参数失败:', error);
        this.detail = {};
        this.purchaseInfo = {};
      }
    }
  },
  
  methods: {
    handleBack() {
      // 返回上一页
      this.$router.back();
    },
    goToHome() {
      // 返回首页
      this.$router.push('/pages/home/home');
    }
  }
};
</script>

<style lang="scss" scoped>
.purchase-traceability-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  background-image: url('~@/assets/traceability/bg.jpg');
  background-size: cover;
  background-position: center;
}

.nav-bar {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  color: #000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0 16px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.nav-left {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.back-icon {
  fill: #333;
  font-size: 24px;
}

.nav-title {
  font-size: 18px;
  font-weight: 500;
}

.nav-right {
  width: 40px;
}

.content-wrapper {
  padding: 76px 20px 60px;
}

.product-image-section {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
  border: 1px solid #ffe6e6;
  position: relative;
}

.product-title {
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  margin-bottom: 10px;
  padding: 5px 20px;
  background: #bd0402;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(255, 107, 107, 0.3);
  top: -10px;
}

.product-image {
  width: 100%;
  height: 200px;
  border-radius: 5px;
  margin-top: 20px;
  object-fit: contain;
}

.info-list {
  background-color: #fff;
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
  position: relative;
  padding-top: 30px;
  border: 1px solid #ffe6e6;
}

.info-title {
  position: absolute;
  top: -10px;
  left: 35%;
  background-color: #bd0402;
  color: #fff;
  text-align: center;
  padding: 5px 20px;
  margin-bottom: 15px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 14px;
  color: #bd0402;
}

.info-value {
  font-size: 14px;
  color: #333;
  text-align: right;
}

.images-section {
  padding: 10px 0;
}

.section-subtitle {
  font-size: 14px;
  color: #bd0402;
  margin-bottom: 10px;
  display: block;
}

.images-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-image {
  width: 100%;
  height: 200px;
  border-radius: 5px;
  object-fit: cover;
}

.home-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: #bd0402;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 10px rgba(189, 4, 2, 0.4);
  cursor: pointer;
  z-index: 10;
}

.home-icon {
  fill: #fff;
}
</style>