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' || status === 'unrecyclable') && item" 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">{{item.testingTime}}</text>
              </view>
              <view v-for="(desc, idx) in problemDescArr.length ? problemDescArr : [item.problemDesc]" :key="idx" class="problem-block">
                <view class="problem-index">{{(idx+1).toString().padStart(2, '0')}} / {{problemDescArr.length.toString().padStart(2, '0')}}</view>
                <view class="problem-title">{{desc || '质量问题'}}</view>
                <view class="problem-divider"></view>
                <view class="problem-label">质量问题实拍</view>
                <view class="problem-images">
                  <view v-for="(img, i) in imagesArr" :key="i" class="img-lock-wrap" @tap="isSelf && previewImage(img, i)">
                    <image :src="img" class="problem-img" mode="aspectFill" />
                    <view v-if="!isSelf" class="img-lock-mask">
                      <image src="/static/lock.png" class="lock-icon" />
                      <view class="lock-tip">为保护用户隐私，衣物照片仅本人可见，您无权限查看</view>
                    </view>
                  </view>
                </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">{{item.testingTime}}</text>
              </view>
              <view class="timeline-desc">
                感谢您参与旧衣回收活动，支持环保事业。\n我们已收到您的旧衣，正在进行逐件查验。
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-else-if="status === 'qualified' && item" 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">{{item.testingTime}}</text>
              </view>
              <view class="problem-block">
                <view class="problem-index">01 / {{imagesArr.length.toString().padStart(2, '0')}}</view>
                <view class="problem-title">质检图片</view>
                <view class="problem-divider"></view>
                <view class="problem-images">
                  <view v-for="(img, i) in imagesArr" :key="i" class="img-lock-wrap" @tap="isSelf && previewImage(img, i)">
                    <image :src="img" class="problem-img" mode="aspectFill" />
                    <view v-if="!isSelf" class="img-lock-mask">
                      <image src="/static/lock.png" class="lock-icon" />
                      <view class="lock-tip">为保护用户隐私，衣物照片仅本人可见，您无权限查看</view>
                    </view>
                  </view>
                </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">{{item.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' or 'unrecyclable'
      statusBarHeight: 0,
      navBarHeight: 44,
      navBarTotalHeight: 44,
      item: null,
      problemDescArr: [],
      imagesArr: [],
      isSelf: true,
    }
  },
  onLoad(options) {
    // 适配顶部安全区
    const sysInfo = uni.getSystemInfoSync()
    this.statusBarHeight = sysInfo.statusBarHeight
    this.navBarHeight = 44
    this.navBarTotalHeight = this.statusBarHeight + this.navBarHeight
    if (options && options.status) {
      this.status = options.status
    }
    if (options.data) {
      this.item = JSON.parse(decodeURIComponent(options.data))
      // 获取当前登录用户id
      const myUserId = uni.getStorageSync('userInfo')?.id
      const orderUserId = this.item.userId
      this.isSelf = myUserId && orderUserId && String(myUserId) === String(orderUserId)
      // 处理图片数组
      if (this.item.testingImages) {
        console.log(this.item.testingImages, 'this.item.testingImages')
        this.imagesArr = String(this.item.testingImages).split(',').filter(i => i)
      } else {
        this.imagesArr = []
      }
      // 处理问题描述数组
      if (this.item.problemDesc) {
        this.problemDescArr = String(this.item.problemDesc).split(',').filter(i => i)
      } else {
        this.problemDescArr = []
      }
    }
  },
  methods: {
    navigateBack() {
      uni.navigateBack()
    },
    previewImage(img, i) {
      uni.previewImage({
        current: img,
        urls: this.imagesArr
      })
    }
  }
}
</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;
}
.img-lock-wrap {
  position: relative;
  display: inline-block;
}
.img-lock-mask {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12rpx;
  z-index: 2;
}
.lock-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 8rpx;
}
.lock-tip {
  color: #fff;
  font-size: 20rpx;
  text-align: center;
  padding: 0 8rpx;
}
</style>