shuhi-app/pages/index/audit/scan-order.vue

<template>
  <view class="container">
    <!-- 顶部操作栏 -->
    <view class="header">
      <text>清除全部</text>
    </view>

    <!-- 提示信息 -->
    <view class="tips">
      <text>请勿录入审核为不良的书籍ISBN！</text>
      <text class="sub-tips">不良书籍的ISBN可能是错误的！</text>
    </view>

    <!-- ISBN列表 -->
    <scroll-view scroll-y class="isbn-list">
      <view 
        v-for="(item, index) in isbnList" 
        :key="index"
        class="isbn-item"
      >
        <view class="item-left">
          <u-icon
            name="minus-circle-fill"
            color="#dd524d"
            size="24"
            @click="removeItem(index)"
          />
          <text class="index">{{ index + 1 }}、</text>
          <text class="isbn">{{ item.isbn }}</text>
        </view>

        <view class="quantity-control">
          <u-button
            text="-"
            size="mini"
            @click="decreaseQuantity(index)"
            :disabled="item.quantity <= 1"
          />
          <text class="quantity">{{ item.quantity }}</text>
          <u-button
            text="+"
            size="mini"
            @click="increaseQuantity(index)"
          />
        </view>
      </view>
    </scroll-view>

    <!-- 底部按钮 -->
    <view class="footer">
      <u-button
        type="warning"
        text="扫码加书"
        @click="handleScan"
      />
      <u-button
        type="primary"
        text="查询"
        @click="handleQuery"
      />
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// ISBN列表数据
const isbnList = ref([
  { isbn: '9787050405548', quantity: 1 },
  { isbn: '9787050405548', quantity: 3 },
  { isbn: '9787050405548', quantity: 3 },
  { isbn: '9787050405548', quantity: 3 },
  { isbn: '9787050405548', quantity: 3 },
  { isbn: '9787050405548', quantity: 3 },
  { isbn: '9787050405548', quantity: 3 },
  { isbn: '9787050405548', quantity: 3 },
  { isbn: '9787050405548', quantity: 3 }
]);

// 移除项目
const removeItem = (index) => {
  isbnList.value.splice(index, 1);
};

// 减少数量
const decreaseQuantity = (index) => {
  if (isbnList.value[index].quantity > 1) {
    isbnList.value[index].quantity--;
  }
};

// 增加数量
const increaseQuantity = (index) => {
  isbnList.value[index].quantity++;
};

// 扫码处理
const handleScan = () => {
  uni.scanCode({
    success: (res) => {
      // 验证ISBN格式
      if (isValidISBN(res.result)) {
        isbnList.value.push({
          isbn: res.result,
          quantity: 1
        });
      } else {
        uni.showToast({
          title: '无效的ISBN',
          icon: 'none'
        });
      }
    }
  });
};

// ISBN格式验证
const isValidISBN = (isbn) => {
  // 简单的ISBN-13验证
  return /^97[89]\d{10}$/.test(isbn);
};

// 查询处理
const handleQuery = () => {
  if (isbnList.value.length === 0) {
    uni.showToast({
      title: '请先添加ISBN',
      icon: 'none'
    });
    return;
  }
  console.log('查询ISBN列表:', isbnList.value);
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.header {
  padding: 12px;
  background-color: #999;
  color: #fff;
  text-align: center;
}

.tips {
  padding: 16px;
  background-color: #f8f8f8;
  text-align: center;
  
  text {
    display: block;
    color: #666;
    font-size: 14px;
  }
  
  .sub-tips {
    font-size: 12px;
    margin-top: 4px;
  }
}

.isbn-list {
  flex: 1;
  padding: 12px;
}

.isbn-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background-color: #fff;
  margin-bottom: 8px;
  border-radius: 4px;
  
  .item-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .index {
    color: #666;
  }
  
  .isbn {
    color: #333;
  }

}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 12px;
  
  .quantity {
    min-width: 24px;
    text-align: center;
  }
  
  :deep(.u-button) {
    min-width: 32px;
    height: 32px;
    padding: 0;
  }
}

.footer {
  padding: 12px;
  display: flex;
  gap: 12px;
  background-color: #fff;
  
  .u-button {
    flex: 1;
  }
}
</style>