aiot-app/pages/traceability/traceabilityCode/index.vue

<template>
  <view class="traceability-page">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="溯源"
      background-color="#fff"
      color="#000"
      @clickLeft="handleBack"
    ></uni-nav-bar>
    
    <!-- 主内容区 -->
    <view class="content-wrapper">
      <!-- 编辑中标签 -->
      <view class="edit-tag">编辑中</view>
      
      <!-- 产品图片区域 -->
      <view class="product-image-section">
        <view class="image-container">
          <image class="product-image" :src="productImageSrc" mode="aspectFit"></image>
        </view>
      </view>
      
      <!-- 产品基本信息区域 -->
      <view class="product-info-section">
        <view class="info-title">产品基本信息</view>
        <view class="info-content">
			<u-row gutter="10" align="top" customStyle="margin-bottom: 10px">
				<u-col span="6">
					<view class="info-item">
					  <text class="info-label">品名:</text>
					  <text class="info-value">菝葜菝葜菝葜菝葜菝葜菝葜菝葜菝葜菝葜</text>
					</view>
				</u-col>
				<u-col span="6">
					<view class="info-item">
					  <text class="info-label">产地:</text>
					  <text class="info-value">湖南怀化</text>
					</view>
				</u-col>
			</u-row>
			<u-row gutter="10" align="top" customStyle="margin-bottom: 10px">
				<u-col span="6">
					<view class="info-item">
					  <text class="info-label">商品编码:</text>
					  <text class="info-value">AD0017</text>
					</view>
				</u-col>
				<u-col span="6">
					<view class="info-item">
					  <text class="info-label">批号:</text>
					  <text class="info-value">25072301</text>
					</view>
				</u-col>
			</u-row>
        </view>
        <!-- 查看更多信息按钮 -->
        <view class="more-info-btn" @click="toggleMoreInfo">
          <text>查看更多信息</text>
          <image class="dropdown-icon" :src="companyIconSrc" mode="aspectFit"></image>
        </view>
      </view>
      
      <!-- 功能按钮区域 -->
      <view class="function-buttons">
        <view class="button-row">
          <view class="function-btn" @click="navigateToPurchase">
            <image class="btn-icon" :src="cartIconSrc" mode="aspectFit"></image>
            <text class="btn-text">采购溯源</text>
          </view>
          <view class="function-btn" @click="navigateToProduction">
            <image class="btn-icon" :src="productionIconSrc" mode="aspectFit"></image>
            <text class="btn-text">生产溯源</text>
          </view>
      <!--  </view>
        <view class="button-row"> -->
          <view class="function-btn" @click="navigateToQuality">
            <image class="btn-icon" :src="qualityIconSrc" mode="aspectFit"></image>
            <text class="btn-text">质检溯源</text>
          </view>
          <view class="function-btn" @click="navigateToCompany">
            <image class="btn-icon" :src="companyIconSrc" mode="aspectFit"></image>
            <text class="btn-text">企业信息</text>
          </view>
        </view>
      </view>
      
      <!-- 底部装饰 -->
    <!--  <view class="bottom-decoration">
        <image :src="waveIconSrc" mode="aspectFill"></image>
      </view> -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showMoreInfo: false,
      // 使用项目中已有的图标路径
      productImageSrc: '/static/product/1.svg',
      selectIconSrc: '/static/select.svg',
      cartIconSrc: '/static/product/2.svg',
      productionIconSrc: '/static/product/3.svg',
      qualityIconSrc: '/static/product/4.svg',
      companyIconSrc: '/static/product/xl.svg',
      waveIconSrc: '/static/svg-icons/wave.svg'
    };
  },
  methods: {
    handleBack() {
      // 返回上一页
      uni.navigateBack();
    },
    toggleMoreInfo() {
      // 切换显示更多信息
      this.showMoreInfo = !this.showMoreInfo;
    },
    navigateToPurchase() {
      // 跳转到采购溯源页面
    //   uni.showToast({
    //     title: '采购溯源功能待实现',
    //     icon: 'none'
    //   });
	  uni.navigateTo({
	  	url: '/pages/traceability/traceabilityCode/purchase'
	  })
    },
    navigateToProduction() {
      // 跳转到生产溯源页面
    //   uni.showToast({
    //     title: '生产溯源功能待实现',
    //     icon: 'none'
    //   });
      uni.navigateTo({
	  	url: '/pages/traceability/traceabilityCode/production'
	  })
    },
    navigateToQuality() {
      // 跳转到质检溯源页面
    //   uni.showToast({
    //     title: '质检溯源功能待实现',
    //     icon: 'none'
    //   });
      uni.navigateTo({
	  	url: '/pages/traceability/traceabilityCode/quality'
	  })
    },
    navigateToCompany() {
      // 跳转到企业信息页面
    //   uni.showToast({
    //     title: '企业信息功能待实现',
    //     icon: 'none'
    //   });
      uni.navigateTo({
	  	url: '/pages/traceability/traceabilityCode/company'
	  })
    }
  }
};
</script>

<style lang="scss" scoped>
.traceability-page {
  background-color: #fff;
  min-height: 100vh;
  background-image: url('/static/svg-icons/bg-pattern.svg');
  background-size: cover;
  background-position: center;
}

.content-wrapper {
  padding: 120rpx 40rpx 40rpx;
  position: relative;
}

.edit-tag {
  position: absolute;
  top: 80rpx;
  left: 0;
  width: 160rpx;
  height: 60rpx;
  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
  color: #fff;
  text-align: center;
  line-height: 60rpx;
  font-size: 26rpx;
  border-radius: 0 30rpx 30rpx 0;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.product-image-section {
  display: flex;
  justify-content: center;
  margin-bottom: 60rpx;
}

.image-container {
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
  border: 16rpx solid #fff;
  position: relative;
}

// 添加红色装饰边框
.image-container::before {
  content: '';
  position: absolute;
  top: -24rpx;
  left: -24rpx;
  right: -24rpx;
  bottom: -24rpx;
  border-radius: 50%;
  border: 2rpx dashed #ff6b6b;
  opacity: 0.6;
}

// .image-container::after {
//   content: '';
//   position: absolute;
//   top: -34rpx;
//   right: -34rpx;
//   width: 80rpx;
//   height: 80rpx;
//   background-image: url('/static/svg-icons/decorative-corner.svg');
//   background-size: contain;
//   background-repeat: no-repeat;
// }

.product-image {
  width: 240rpx;
  height: 240rpx;
  border-radius: 8rpx;
}

.product-info-section {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 60rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  border: 2rpx solid #ffe6e6;
  position: relative;
}

.info-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
  text-align: center;
  margin-bottom: 20rpx;
  padding: 10rpx 40rpx;
  background: #bd0402;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
  position: absolute;
  top: -20rpx;
  left: 30%;
}

.info-content {
  margin-bottom: 20rpx;
  padding-top: 32rpx;
}

.info-item {
  display: flex;
  align-items: flex-start;
}

.info-label {
  font-size: 28rpx;
  color: #bd0402;
  margin-right: 10rpx;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  flex: 1;
}

.more-info-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  color: #bd0402;
  padding: 10rpx 0;
}

.dropdown-icon {
  width: 24rpx;
  height: 24rpx;
  margin-left: 10rpx;
  transform: rotate(0deg);
  transition: transform 0.3s;
  color: #bd0402;
}

.function-buttons {
  margin-bottom: 60rpx;
}

.button-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.function-btn {
  width: 23%;
  height: 240rpx;
  // background: linear-gradient(135deg, #ff6b6b, #ff8e53);
  background: #bd0402;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  box-shadow: 0 8rpx 24rpx rgba(255, 107, 107, 0.3);
  transition: transform 0.2s;
  border: 2rpx solid #fff;
}

.function-btn:active {
  transform: scale(0.98);
}

.btn-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.btn-text {
  font-size: 28rpx;
  font-weight: 500;
}

.bottom-decoration {
  width: 100%;
  height: 100rpx;
  overflow: hidden;
  margin-top: 40rpx;
}

.bottom-decoration image {
  width: 100%;
  height: 100%;
}
</style>