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>
    <scroll-view scroll-y class="main-content safe-area-inset-bottom" :style="{ marginTop: navBarTotalHeight + 'px' }">
      <!-- 质检合格列表 -->
      <view v-if="qualifiedList.length > 0" class="section">
        <view class="section-title">
          <view class="dot dot-green"></view>
          <text class="title-text">质检合格</text>
        </view>
        <view v-for="(item, index) in qualifiedList" :key="'qualified-' + index" class="card card-qualified">
          <view v-if="item.qualityLevel" class="quality-level-badge">{{ item.qualityLevel }}</view>
          <view class="card-header">
            <view class="goods-info">
              <image :src="item.img" class="goods-img" mode="aspectFit" />
              <view class="goods-detail">
                <text class="goods-name">{{ item.name }}</text>
                <text class="goods-desc">{{ item.desc }}</text>
                <text v-if="item.styleName" class="goods-style">款式：{{ item.styleName }}</text>
                <view class="goods-price-row">
                  <text class="goods-price" v-if="item.price">￥{{ (item.price / item.count).toFixed(2) }}/件</text>
                  <text class="goods-count">x{{ item.count }}</text>
                </view>
              </view>
            </view>
          </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-title">质检图片</view>
                  <view class="problem-divider"></view>
                  <view class="problem-images" v-if="item.imagesArr && item.imagesArr.length > 0">
                    <view v-for="(img, i) in item.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 v-else class="no-images">暂无质检图片</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 不可回收列表 -->
      <view v-if="unrecyclableList.length > 0" class="section">
        <view class="section-title">
          <view class="dot dot-orange"></view>
          <text class="title-text">不可回收</text>
        </view>
        <view v-for="(item, index) in unrecyclableList" :key="'unrecyclable-' + index" class="card card-problem">
          <view v-if="item.qualityLevel" class="quality-level-badge">{{ item.qualityLevel }}</view>
          <view class="card-header">
            <view class="goods-info">
              <image :src="item.img || bkhs_image" class="goods-img" mode="aspectFit" />
              <view class="goods-detail">
                <text class="goods-name">{{ item.name }}</text>
                <text class="goods-desc">{{ item.desc }}</text>
                <text v-if="item.styleName" class="goods-style">款式：{{ item.styleName }}</text>
                <view class="goods-price-row">
                  <text class="goods-price" v-if="item.price">￥{{ (item.price / item.count).toFixed(2) }}/件</text>
                  <text class="goods-count">x{{ item.count }}</text>
                </view>
              </view>
            </view>
          </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-title">{{ item.problemDesc || '不可回收' }}</view>
                  <view class="problem-divider"></view>
                  <view class="problem-label">质检实拍</view>
                  <view class="problem-images" v-if="item.imagesArr && item.imagesArr.length > 0">
                    <view v-for="(img, i) in item.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 v-else class="no-images">暂无质检图片</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 质量问题列表 -->
      <view v-if="problemList.length > 0" class="section">
        <view class="section-title">
          <view class="dot dot-orange"></view>
          <text class="title-text">质量问题</text>
        </view>
        <view v-for="(item, index) in problemList" :key="'problem-' + index" class="card card-problem">
          <view v-if="item.qualityLevel" class="quality-level-badge">{{ item.qualityLevel }}</view>
          <view class="card-header">
            <view class="goods-info">
              <image :src="item.img || zlwt_image" class="goods-img" mode="aspectFit" />
              <view class="goods-detail">
                <text class="goods-name">{{ item.name }}</text>
                <text class="goods-desc">{{ item.desc }}</text>
                <text v-if="item.styleName" class="goods-style">款式：{{ item.styleName }}</text>
                <view class="goods-price-row">
                  <text class="goods-price" v-if="item.price">￥{{ (item.price / item.count).toFixed(2) }}/件</text>
                  <text class="goods-count">x{{ item.count }}</text>
                </view>
              </view>
            </view>
          </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-title">{{ item.problemDesc || '质量问题' }}</view>
                  <view class="problem-divider"></view>
                  <view class="problem-label">质量问题实拍</view>
                  <view class="problem-images" v-if="item.imagesArr && item.imagesArr.length > 0">
                    <view v-for="(img, i) in item.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 v-else class="no-images">暂无质检图片</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      navBarHeight: 44,
      navBarTotalHeight: 44,
      orderId: '',
      qualifiedList: [],
      problemList: [],
      unrecyclableList: [],
      isSelf: true,
    }
  },
  computed: {
    bkhs_image() {//不可回收图片
      const item = getApp().globalData.configData.find(i => i.keyName === 'bkhs_image')
      return item ? item.keyContent : ''
    },
    zlwt_image() {//质量问题图片
      const item = getApp().globalData.configData.find(i => i.keyName === 'zlwt_image')
      return item ? item.keyContent : ''
    },
  },
  onLoad(options) {
    // 适配顶部安全区
    const sysInfo = uni.getSystemInfoSync()
    this.statusBarHeight = sysInfo.statusBarHeight
    this.navBarHeight = 44
    this.navBarTotalHeight = this.statusBarHeight + this.navBarHeight
    
    // 获取订单ID
    if (options && options.orderId) {
      this.orderId = options.orderId
      this.fetchOrderDetail()
    }
    
    // 判断是否为本人或管理员
    if (options.isSelf) {
      this.isSelf = true
    }
  },
  methods: {
    async fetchOrderDetail() {
      this.$api && this.$api('getOrderDetail', {
        orderId: this.orderId
      }, res => {
        if (res && res.code === 200 && res.result) {
          this.parseOrderData(res.result)
        }
      })
    },
    
    parseOrderData(orderData) {
      this.qualifiedList = []
      this.problemList = []
      this.unrecyclableList = []
      
      if (orderData.orderCheckList && orderData.orderCheckList.length > 0) {
        orderData.orderCheckList.forEach(item => {
          // 合格商品
          if (Number(item.qualifiedNum) > 0) {
            const imagesArr = item.commonOrderList && item.commonOrderList[0] && item.commonOrderList[0].testingImages 
              ? item.commonOrderList[0].testingImages.split(',').filter(img => img.trim() !== '') 
              : []
            
            this.qualifiedList.push({
              img: item.image || '/static/default-goods.png',
              name: item.title || '未知品类',
              desc: item.pinName ? `${item.pinName}` : '',
              styleName: item.styleName || '',
              price: item.price || 0,
              count: item.qualifiedNum,
              qualityLevel: item.qualityLevel || '',
              testingTime: item.commonOrderList && item.commonOrderList[0] && item.commonOrderList[0].testingTime || '',
              imagesArr: imagesArr
            })
          }
          
          // 质量问题和不可回收
          if (Array.isArray(item.commonOrderList)) {
            item.commonOrderList.forEach(sub => {
              const imagesArr = sub.testingImages ? sub.testingImages.split(',').filter(img => img.trim() !== '') : []
              
              // 质量问题
              if (sub.testingStatus == 1) {
                this.problemList.push({
                  img: item.image,
                  name: item.title || '未知品类',
                  desc: item.pinName ? `${item.pinName}` : '',
                  styleName: item.styleName || '',
                  price: (item.price || 0) / (item.noQualifiedNum || 1),
                  count: sub.num || 1,
                  qualityLevel: sub.qualityLevel || '',
                  testingTime: sub.testingTime || '',
                  problemDesc: sub.testingInstructions || '',
                  imagesArr: imagesArr
                })
              }
              
              // 不可回收
              if (sub.testingStatus == 2) {
                this.unrecyclableList.push({
                  img: item.image,
                  name: item.title || '未知品类',
                  desc: item.pinName ? `${item.pinName}` : '',
                  styleName: item.styleName || '',
                  price: (item.price || 0) / (item.unrecyclable || 1),
                  count: sub.num || 1,
                  qualityLevel: sub.qualityLevel || '',
                  testingTime: sub.testingTime || '',
                  problemDesc: sub.testingInstructions || '',
                  imagesArr: imagesArr
                })
              }
            })
          }
        })
      }
    },
    
    navigateBack() {
      uni.navigateBack()
    },
    
    previewImage(img, i) {
      // 获取当前点击图片所在的列表
      let allImages = []
      this.qualifiedList.forEach(item => {
        if (item.imagesArr) allImages = allImages.concat(item.imagesArr)
      })
      this.problemList.forEach(item => {
        if (item.imagesArr) allImages = allImages.concat(item.imagesArr)
      })
      this.unrecyclableList.forEach(item => {
        if (item.imagesArr) allImages = allImages.concat(item.imagesArr)
      })
      
      uni.previewImage({
        current: img,
        urls: allImages.length > 0 ? allImages : [img]
      })
    }
  }
}
</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 24rpx 0 24rpx;
  width: 100%;
  max-width: 750rpx;
  margin: 0 auto;
  box-sizing: border-box;
  height: calc(100vh - var(--nav-bar-height));
}

.section {
  margin-bottom: 40rpx;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  padding: 0 16rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
}

.goods-info {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.goods-img {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
  margin-right: 20rpx;
  background: #f5f5f5;
}

.goods-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.goods-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 4rpx;
}

.goods-desc {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 4rpx;
}

.goods-style {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 4rpx;
}

.goods-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.goods-price {
  font-size: 24rpx;
  color: #ff6600;
  font-weight: bold;
}

.goods-count {
  font-size: 24rpx;
  color: #666;
}

.no-images {
  color: #999;
  font-size: 24rpx;
  text-align: center;
  padding: 20rpx;
  background: #f8f8f8;
  border-radius: 12rpx;
}

.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: calc(100% - 30rpx);
  box-sizing: border-box;
  position: relative;
}

.quality-level-badge {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background: #ffb400;
  color: #fff;
  font-size: 24rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 2rpx 8rpx rgba(255, 180, 0, 0.3);
}

.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>