recycle-front/pages/manager/inspect.vue

<template>
    <view class="inspect-container">
      <!-- 顶部导航栏 -->
      <view class="nav-bar">
        <view class="back" @tap="goBack">
          <uni-icons type="left" size="20" color="#222" />
        </view>
        <text class="nav-title">步骤一：数量确认</text>
        <view class="nav-icons">
          <uni-icons type="scan" size="24" color="#222" />
        </view>
      </view>
      <view class="main-content">
        <!-- 左侧分类导航 -->
        <view class="category-nav">
          <view v-for="(cat, idx) in categories" :key="cat.title" :class="['category-item', {active: idx === currentCategory}]" @tap="switchCategory(idx)">
            <text>{{cat.title}}</text>
            <view v-if="cat.badge" class="category-badge">{{cat.badge}}</view>
          </view>
        </view>
        <!-- 右侧商品卡片区 -->
        <view class="goods-list">
          <view v-for="(item, idx) in currentGoods" :key="item.id" class="goods-card">
            <view class="goods-header">
              <image :src="item.image" class="goods-img" />
              <view class="goods-info">
                <view class="goods-title-row">
                  <text class="goods-name">{{item.name}}</text>
                  <text class="goods-price">¥ {{item.price}} <text class="goods-unit">/件</text></text>
                </view>
                <text class="goods-desc">{{item.desc}}</text>
              </view>
            </view>
            <view class="goods-row">
              <text class="row-label">合格数量</text>
              <view class="num-ctrl">
                <button class="num-btn" @tap="changeNum(item, 'qualified', -1)">-</button>
                <text class="num">{{item.qualified}}</text>
                <button class="num-btn" @tap="changeNum(item, 'qualified', 1)">+</button>
              </view>
            </view>
            <view class="goods-row">
              <text class="row-label">不合格数量</text>
              <view class="num-ctrl">
                <button class="num-btn" @tap="changeNum(item, 'unqualified', -1)">-</button>
                <text class="num">{{item.unqualified}}</text>
                <button class="num-btn" @tap="changeNum(item, 'unqualified', 1)">+</button>
              </view>
            </view>
            <view class="goods-row">
              <text class="row-label">总金额</text>
              <input class="amount-input" v-model="item.amount" placeholder="请输入金额" />
            </view>
          </view>
        </view>
      </view>
      <!-- 底部操作按钮 -->
      <view class="footer-btns">
        <button class="btn-outline" @tap="goBack">返回订单详情</button>
        <button class="btn-main" @tap="goNext">下一步</button>
      </view>
    </view>
  </template>
  
  <script>
  import pullRefreshMixin from '../mixins/pullRefreshMixin.js'
  export default {
    mixins: [pullRefreshMixin],
    data() {
      return {
        statusBarHeight: 0,
        currentCategory: 0,
        allProducts: {},      // { [categoryId]: [商品数组] }
        allProductsPage: {},  // { [categoryId]: 当前已加载页码 }
        allProductsTotal: {}, // { [categoryId]: 总数 }
        pageSize: 10,
        loadingMore: false,
        finished: false,
      }
    },
    computed: {
      categories() {
        const list = getApp().globalData.pricePreviewList || []
        // 新增不可回收分类
        const extra = [{ id: 'unrecyclable', title: '不可回收' }]
        return [...list.filter(item => item.pid === '0').sort((a, b) => a.sort - b.sort), ...extra]
      },
      currentGoods() {
        const currentCategoryId = this.categories[this.currentCategory]?.id
        // 不可回收分类内容
        if (currentCategoryId === 'unrecyclable') {
          return [{
            id: 'unrecyclable-1',
            image: '/static/回收/衣物.png',
            name: '不可回收品类',
            price: '—',
            desc: '允许脏破烂，160码以上',
            quantity: 2,
            amount: ''
          }]
        }
        return this.allProducts[currentCategoryId] || []
      }
    },
    methods: {
      fetchGoodsList(categoryId, page = 1, callback) {
        this.$api('getClassGoodsList', {
          classId: categoryId,
          pageNo: page,
          pageSize: this.pageSize
        }, res => {
          if (res.code === 200 && res.result && Array.isArray(res.result.records)) {
            const oldList = this.allProducts[categoryId] || []
            const newList = page === 1 ? res.result.records : oldList.concat(res.result.records)
            this.$set(this.allProducts, categoryId, newList)
            this.$set(this.allProductsPage, categoryId, page)
            this.$set(this.allProductsTotal, categoryId, res.result.total)
          }
          if (callback) callback()
        })
      },
      goBack() {
        uni.navigateBack()
      },
      goNext() {
        // 跳转到下一步页面，带上质检数据
        uni.navigateTo({
          url: '/pages/manager/inspect-result'
        })
      },
      switchCategory(idx) {
        this.currentCategory = idx
        this.loadingMore = false
        this.finished = false
        const categoryId = this.categories[idx]?.id
        if (categoryId === 'unrecyclable') {
          // 切换到不可回收时重置默认数据
          this.$set(this.allProducts, 'unrecyclable', [{
            id: 'unrecyclable-1',
            image: '/static/回收/衣物.png',
            name: '不可回收品类',
            price: '—',
            desc: '允许脏破烂，160码以上',
            quantity: 2,
            amount: ''
          }])
          this.$forceUpdate && this.$forceUpdate()
          return
        }
        if (!this.allProducts[categoryId]) {
          this.fetchGoodsList(categoryId, 1)
        }
      },
      changeNum(item, key, delta) {
        if (key === 'qualified') {
          item.qualified = Math.max(0, (item.qualified || 0) + delta)
        } else {
          item.unqualified = Math.max(0, (item.unqualified || 0) + delta)
        }
      },
      refreshData() {
        // 可根据实际需求刷新商品数据、分类等
        // 例如重新请求接口或重置数据
      },
      async onRefresh() {
        await this.refreshData && this.refreshData()
      }
    },
    created() {
      this.currentCategory = 0
      this.$nextTick(() => {
        if (this.categories.length > 0) {
          const firstCategoryId = this.categories[0]?.id
          if (firstCategoryId) {
            this.fetchGoodsList(firstCategoryId, 1)
          }
        }
      })
    },
    onLoad() {
      this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
    },
    onPullDownRefresh() {
      this.refreshData && this.refreshData()
      uni.stopPullDownRefresh()
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .inspect-container {
    min-height: 100vh;
    background: #f8f8f8;
    display: flex;
    flex-direction: column;
  }
  .nav-bar {
    display: flex;
    align-items: center;
    height: calc(150rpx + var(--status-bar-height));
    padding: 0 32rpx;
    padding-top: var(--status-bar-height);
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    box-sizing: border-box;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
    .back {
      padding: 20rpx;
      margin-left: -20rpx;
    }
    .nav-title {
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      font-weight: 500;
      color: #222;
    }
    .nav-icons {
      display: flex;
      align-items: center;
      gap: 12px;
    }
  }
  .main-content {
    margin-top: calc(150rpx + var(--status-bar-height));
    display: flex;
    background: none;
  }
  .category-nav {
    width: 80px;
    background: #fff;
    border-radius: 24px 0 0 24px;
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    height: 100%;
    overflow-y: auto;
    position: relative;
    z-index: 2;
    .category-item {
      width: 64px;
      height: 44px;
      border-radius: 16px 0 0 16px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 16px;
      color: #222;
      margin-bottom: 12px;
      background: #fff;
      position: relative;
      transition: background 0.2s, color 0.2s, font-weight 0.2s;
      padding-left: 12px;
      &.active {
        background: linear-gradient(90deg, #fff7e6 80%, #fff 100%);
        color: #ffb400;
        font-weight: bold;
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 30%;
          height: 40%;
          width: 2px;
          border-radius: 4px;
          background: #ffb400;
          bottom: auto;
        }
      }
      .category-badge {
        position: absolute;
        top: 6px;
        right: 10px;
        background: #ff4d4f;
        color: #fff;
        font-size: 12px;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .goods-list {
    flex: 1;
    height: calc(100vh - 110rpx - var(--status-bar-height) - 80px);
    padding: 0 0 0 16px;
    overflow-y: auto;
    background: none;
  }
  .goods-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    margin-bottom: 18px;
    padding: 18px 18px 0 18px;
    &.unrecycle-card {
      background: #fff;
      border-radius: 24px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.06);
      margin-bottom: 18px;
      padding: 18px 18px 0 18px;
      .goods-header {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        .goods-img {
          width: 56px;
          height: 56px;
          border-radius: 16px;
          margin-right: 12px;
          background: #f8f8f8;
          object-fit: contain;
        }
        .goods-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          min-width: 0;
          .goods-title-row {
            display: flex;
            align-items: baseline;
            .goods-name {
              font-size: 16px;
              font-weight: bold;
              color: #222;
              margin-right: 8px;
            }
            .goods-price {
              font-size: 15px;
              color: #ffb400;
              font-weight: bold;
              .goods-unit {
                font-size: 13px;
                color: #bbb;
              }
            }
          }
          .goods-desc {
            font-size: 13px;
            color: #999;
            margin-top: 4px;
          }
        }
      }
      .goods-row {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        .row-label {
          font-size: 14px;
          color: #888;
          width: 80px;
          flex-shrink: 0;
        }
        .num-ctrl {
          display: flex;
          align-items: center;
          .num-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #f6f6f6;
            color: #bbb;
            font-size: 20px;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 6px;
          }
          .num {
            font-size: 16px;
            color: #222;
            width: 28px;
            text-align: center;
          }
        }
        .amount-input {
          flex: 1;
          height: 32px;
          border-radius: 12px;
          background: #f6f6f6;
          border: none;
          font-size: 15px;
          color: #222;
          padding-left: 10px;
          margin-left: 8px;
        }
      }
    }
  }
  .goods-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .goods-img {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      margin-right: 12px;
      background: #f8f8f8;
      object-fit: contain;
    }
    .goods-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
      .goods-title-row {
        display: flex;
        align-items: baseline;
        .goods-name {
          font-size: 16px;
          font-weight: bold;
          color: #222;
          margin-right: 8px;
        }
        .goods-price {
          font-size: 15px;
          color: #ffb400;
          font-weight: bold;
          .goods-unit {
            font-size: 13px;
            color: #bbb;
          }
        }
      }
      .goods-desc {
        font-size: 13px;
        color: #999;
        margin-top: 4px;
      }
    }
  }
  .goods-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .row-label {
      font-size: 14px;
      color: #888;
      width: 80px;
      flex-shrink: 0;
    }
    .num-ctrl {
      display: flex;
      align-items: center;
      .num-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #f6f6f6;
        color: #bbb;
        font-size: 20px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 6px;
      }
      .num {
        font-size: 16px;
        color: #222;
        width: 28px;
        text-align: center;
      }
    }
    .amount-input {
      flex: 1;
      height: 32px;
      border-radius: 12px;
      background: #f6f6f6;
      border: none;
      font-size: 15px;
      color: #222;
      padding-left: 10px;
      margin-left: 8px;
    }
  }
  .footer-btns {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    gap: 16px;
    padding: 12px 16px 24px 16px;
    z-index: 101;
    .btn-outline {
      flex: 1;
      height: 40px;
      border-radius: 16px;
      border: 1px solid #ffe09a;
      color: #ffb400;
      background: #fff0d2;
      font-size: 15px;
      font-weight: 500;
      box-shadow: none;
      padding: 0 18px;
    }
    .btn-main {
      flex: 1;
      height: 40px;
      border-radius: 16px;
      background: linear-gradient(90deg, #ffd01e 0%, #ffac04 100%);
      color: #fff;
      border: none;
      font-size: 15px;
      font-weight: 500;
      box-shadow: none;
      padding: 0 18px;
    }
  }
  </style>