recycle-front/pages/subcomponent/inspection-detail.vue

<template>
  <view class="inspection-detail-page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar" :style="{height: navBarTotalHeight + 'px', paddingTop: statusBarHeight + 'px'}">
      <view class="nav-bar-left" @tap="navigateBack">
        <uni-icons type="left" size="22" color="#222" />
      </view>
      <view class="nav-bar-title">质检详情</view>
      <view class="nav-bar-right">
        <uni-icons type="more-filled" size="22" color="#222" />
        <uni-icons type="camera" size="22" color="#222" style="margin-left: 12rpx;" />
      </view>
    </view>
    <view class="main-content safe-area-inset-bottom" :style="{marginTop: navBarTotalHeight + 'px'}">
      <view v-if="status === 'problem'" class="card card-problem">
        <view class="card-header">
          <view class="dot dot-orange"></view>
          <text class="card-title card-title-orange">质检有问题不可回收</text>
        </view>
        <view class="card-desc card-desc-orange">
          感谢您参与旧衣回收活动，支持环保事业。\n我们已收到您的旧衣，并完成质检。经平台专业质检员严格查验，发现商品存在质量问题。
        </view>
        <view class="timeline">
          <view class="timeline-item">
            <view class="timeline-dot"></view>
            <view class="timeline-content">
              <view class="timeline-title-row">
                <text class="timeline-title">质检说明</text>
                <text class="timeline-time">{{testingTime}}</text>
              </view>
              <view v-for="(item, idx) in problemList" :key="idx" class="problem-block">
                <view class="problem-index">{{(idx+1).toString().padStart(2, '0')}} / {{problemList.length.toString().padStart(2, '0')}}</view>
                <view class="problem-title">{{testingInstructions || '质量问题'}}</view>
                <view class="problem-divider"></view>
                <view class="problem-label">质量问题实拍</view>
                <view class="problem-images">
                  <image v-for="(img, i) in item.images" :key="i" :src="img" class="problem-img" mode="aspectFill" />
                </view>
              </view>
            </view>
          </view>
          <view class="timeline-item">
            <view class="timeline-dot gray"></view>
            <view class="timeline-content">
              <view class="timeline-title-row">
                <text class="timeline-title">开始查验质检</text>
                <text class="timeline-time">{{testingTime}}</text>
              </view>
              <view class="timeline-desc">
                感谢您参与旧衣回收活动，支持环保事业。\n我们已收到您的旧衣，正在进行逐件查验。
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-else-if="status === 'qualified'" class="card card-qualified">
        <view class="card-header">
          <view class="dot dot-green"></view>
          <text class="card-title card-title-green">质检合格</text>
        </view>
        <view class="card-desc card-desc-green">
          感谢您参与旧衣回收活动，支持环保事业。\n经平台专业质检员严格查验，商品合格。
        </view>
        <view class="timeline">
          <view class="timeline-item">
            <view class="timeline-dot"></view>
            <view class="timeline-content">
              <view class="timeline-title-row">
                <text class="timeline-title">质检说明</text>
                <text class="timeline-time">{{testingTime}}</text>
              </view>
              <view class="problem-block">
                <view class="problem-index">01 / {{qualifiedImages.length < 10 ? '0' + qualifiedImages.length : qualifiedImages.length}}</view>
                <view class="problem-title">质检图片</view>
                <view class="problem-divider"></view>
                <view class="problem-images">
                  <image v-for="(img, i) in qualifiedImages" :key="i" :src="img" class="problem-img" mode="aspectFill" />
                </view>
              </view>
            </view>
          </view>
          <view class="timeline-item">
            <view class="timeline-dot gray"></view>
            <view class="timeline-content">
              <view class="timeline-title-row">
                <text class="timeline-title">开始查验质检</text>
                <text class="timeline-time">{{testingTime}}</text>
              </view>
              <view class="timeline-desc">
                感谢您参与旧衣回收活动，支持环保事业。\n我们已收到您的旧衣，正在进行逐件查验。
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      status: 'problem', // 'problem' or 'qualified'
      testingStatus: '',
      testingInstructions: '',
      testingTime: '',
      testingImages: [],
      statusBarHeight: 0,
      navBarHeight: 44,
      navBarTotalHeight: 44,
      // 质量问题示例数据
      problemList: [
        {
          title: '大面积破损',
          images: [
            'https://oss.budingxiaoshuo.com/upload/组46584_1747804049771.png',
            'https://oss.budingxiaoshuo.com/upload/组46584_1747804049771.png'
          ]
        },
        {
          title: '大面积破损',
          images: [
            'https://oss.budingxiaoshuo.com/upload/组46584_1747804049771.png',
            'https://oss.budingxiaoshuo.com/upload/组46584_1747804049771.png',
            'https://oss.budingxiaoshuo.com/upload/组46584_1747804049771.png'
          ]
        },
        {
          title: '大面积破损',
          images: [
            'https://oss.budingxiaoshuo.com/upload/组46584_1747804049771.png',
            'https://oss.budingxiaoshuo.com/upload/组46584_1747804049771.png',
            'https://oss.budingxiaoshuo.com/upload/组46584_1747804049771.png',
            'https://oss.budingxiaoshuo.com/upload/组46584_1747804049771.png'
          ]
        }
      ],
      // 合格图片示例
      qualifiedImages: [
        'https://oss.budingxiaoshuo.com/upload/组46584_1747804049771.png'
      ]
    }
  },
  onLoad(options) {
    // 适配顶部安全区
    const sysInfo = uni.getSystemInfoSync()
    this.statusBarHeight = sysInfo.statusBarHeight
    this.navBarHeight = 44
    this.navBarTotalHeight = this.statusBarHeight + this.navBarHeight
    // 可通过 options.status = 'problem'/'qualified' 控制状态
    if (options && options.status) {
      this.status = options.status
    }
    if (options.testingStatus) {
      this.testingStatus = options.testingStatus
    }
    if (options.testingInstructions) {
      this.testingInstructions = decodeURIComponent(options.testingInstructions)
    }
    if (options.testingTime) {
      this.testingTime = decodeURIComponent(options.testingTime)
    }
    if (options.testingImages) {
      // 逗号分割为数组
      this.testingImages = decodeURIComponent(options.testingImages).split(',')
    }
    // 可根据 status 动态设置 problemList/qualifiedImages
    if (this.status === 'problem') {
      this.problemList = [
        {
          title: this.testingInstructions || '质量问题',
          images: this.testingImages
        }
      ]
    } else if (this.status === 'qualified') {
      this.qualifiedImages = this.testingImages
    }
  },
  methods: {
    navigateBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.inspection-detail-page {
  min-height: 100vh;
  background: #f7f7f7;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav-bar {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  padding: 0 24rpx;
  .nav-bar-left, .nav-bar-right {
    display: flex;
    align-items: center;
    min-width: 60rpx;
  }
  .nav-bar-title {
    flex: 1;
    text-align: center;
    font-size: 34rpx;
    font-weight: bold;
    color: #222;
  }
  max-width: 750rpx;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.main-content {
  padding: 32rpx 0 0 0;
  width: 100%;
  max-width: 750rpx;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.safe-area-inset-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
.card {
  margin: 0 24rpx;
  border-radius: 32rpx;
  padding: 32rpx 32rpx 24rpx 32rpx;
  box-shadow: 0 4rpx 24rpx rgba(60, 167, 250, 0.08);
  background: #fff;
  max-width: 700rpx;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}
.card-problem {
  background: linear-gradient(180deg, #fff7e6 0%, #fff 40%);
}
.card-qualified {
  background: linear-gradient(180deg, #e8ffe0 0%, #fff 100%);
}
.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}
.dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin-right: 12rpx;
  &.dot-orange { background: #ffa800; }
  &.dot-green { background: #13ac47; }
  &.gray { background: #bbb; }
}
.card-title {
  font-size: 30rpx;
  font-weight: bold;
}
.card-title-orange { color: #ffa800; }
.card-title-green { color: #13ac47; }
.card-desc {
  font-size: 24rpx;
  color: #888;
  margin-bottom: 24rpx;
  line-height: 1.7;
  margin-left: 32rpx + 16rpx;
}
.card-desc-orange { color: #888; }
.card-desc-green { color: #888; }
.timeline {
  position: relative;
  margin-left: 0;
  padding-left: 0;
}
.timeline:before {
  content: '';
  position: absolute;
  left: 8rpx;
  top: 0;
  bottom: 0;
  width: 2rpx;
  background: #eee;
  z-index: 0;
}
.timeline-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32rpx;
  position: relative;
}
.timeline-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: #bbb;
  margin-right: 16rpx;
  margin-top: 8rpx;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.timeline-dot.dot-orange { background: #ffa800; }
.timeline-dot.dot-green { background: #13ac47; }
.timeline-dot.gray { background: #bbb; }
.timeline-content {
  flex: 1;
  min-width: 0;
}
.timeline-title-row {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}
.timeline-title {
  font-size: 26rpx;
  color: #222;
  font-weight: bold;
  margin-right: 16rpx;
}
.timeline-time {
  font-size: 22rpx;
  color: #bbb;
}
.problem-block {
  background: #f7f8fa;
  border-radius: 20rpx;
  padding: 24rpx 20rpx 16rpx 20rpx;
  margin-bottom: 20rpx;
  max-width: 100%;
  box-sizing: border-box;
}
.problem-index {
  font-size: 22rpx;
  color: #bbb;
  margin-bottom: 6rpx;
}
.problem-title {
  font-size: 26rpx;
  color: #222;
  font-weight: bold;
  margin-bottom: 8rpx;
}
.problem-divider {
  border-bottom: 2rpx dashed #ddd;
  margin: 12rpx 0 10rpx 0;
}
.problem-label {
  font-size: 22rpx;
  color: #bbb;
  margin-bottom: 8rpx;
}
.problem-images {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  max-width: 100%;
}
.problem-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  background: #eee;
  max-width: 40vw;
  max-height: 40vw;
}
.timeline-desc {
  font-size: 24rpx;
  color: #888;
  margin-top: 8rpx;
  line-height: 1.7;
}
</style>