parts_shop_ui_LT/pages/views/recycling/index.vue

<template>
  <view class="container">
    <!-- 固定在顶部的筛选区域 -->
    <view class="filter-header">
      <view class="input-group">
        <u--input
            class="input-item"
            v-model="customerName"
            placeholder="请输入客户名称"
            border="surround"
            clearable
        ></u--input>
        <u--input
            class="input-item"
            v-model="quantity"
            placeholder="请输入订单数量"
            type="number"
            border="surround"
            clearable
        ></u--input>
      </view>

      <view class="filter-controls">
        <view class="date-picker">
          <picker mode="date" @change="bindStartDateChange">
            <view class="date-input">
              <text>{{startDate || '请选择'}}</text>
              <uni-icons
                  v-if="startDate"
                  type="clear"
                  size="16"
                  @click="clearStartDate"
                  style="margin-left: 10rpx">
              </uni-icons>
            </view>
          </picker>
        </view>
        <view class="date-picker">
          <picker mode="date" @change="bindEndDateChange">
            <view class="date-input">
              <text>{{endDate || '请选择'}}</text>
              <uni-icons
                  v-if="endDate"
                  type="clear"
                  size="16"
                  @click="clearEndDate"
                  style="margin-left: 10rpx">
              </uni-icons>
            </view>
          </picker>
        </view>
      </view>
      <button class="filter-btn" @click="handleSearch">查询</button>
    </view>


    <!-- 订单列表 -->
    <scroll-view
        scroll-y
        class="list-container"
        @scrolltolower="loadMore"
        :scroll-top="scrollTop"
    >
        <u-swipe-action
            ref="swipeAction"
        >
          <view
              v-for="(item, index) in orderList"
              :key="item.id"
              class="list-item"
          >
          <u-swipe-action-item
              :options="options"
              :disabled="item.status === 2"
              @click="handleSwipeClick(item, index)"
          >
            <!-- 原有订单内容 -->
            <view class="item-header">
              <text class="order-id">订单号：{{ item.customerName }}</text>
              <view :class="['status-badge', getStatusClass(item.status)]">
                {{ getStatusText(item.status) }}
              </view>
            </view>
            <view class="item-content" @click="checkOrder(item)">
              <view class="info-row">
                <text class="info-label">创建时间：</text>
                <text class="info-value">{{ formatDate(item.createTime) }}</text>
              </view>

              <view class="info-row">
                <text class="info-label">总数量：</text>
                <text class="info-value">{{ item.quantity }}条</text>
              </view>

              <view class="info-row">
                <text class="info-label">总金额：</text>
                <text class="info-value amount">¥{{ item.amount }}</text>
              </view>
            </view>
          </u-swipe-action-item>
          </view>
        </u-swipe-action>


      <!-- 加载状态提示 -->
      <view class="loading-tip">
        <text v-if="loading">加载中...</text>
        <text v-else-if="noMoreData">没有更多数据了</text>
      </view>
    </scroll-view>

    <!-- 新增按钮 -->
    <u-button class="add-btn" @click="goToAddPage" icon="plus"/>
  </view>
</template>

<script>
import {
  getPageList,
  delGreenRecycling
} from '@/api/views/recycling/index.js'
export default {
  data() {
    return {
      options: [{
        text: '删除',
        style: {
          backgroundColor: '#FF7F50',
          color: '#fff'
        }
      }],
      moveIndex: -1,
      startDate: '',
      endDate: '',
      customerName: '',
      quantity: '',
      orderList: [],
      pageNum: 1,
      pageSize: 10,
      loading: false,
      noMoreData: false,
      scrollTop: 0,
      isSearching: false
    }
  },
  created() {
    this.fetchOrderList()
  },
  onShow() {
    this.handleSearch()
  },
  methods: {
    handleMove(index) {
      console.info('index-----', index)
      if (this.moveIndex === index) return;
      this.moveIndex = index;
      this.closeOtherActions();
    },
    closeOtherActions() {
      if (this.moveIndex !== -1) {
        const refName = 'swipeAction' + this.moveIndex;
        this.$refs[refName]?.[0]?.closeHandler();
      }
    },
    handleSwipeClick(item, index) {
      uni.showModal({
        title: '确认删除',
        content: `确定删除该回收单 ${item.id} 吗？`,
        success: (res) => {
          if (res.confirm) {
            delGreenRecycling(item.id).then(res => {
              console.info('res-----', res)
              uni.showToast({ title: res.msg, icon: 'success' });
              this.handleSearch()
            })
          }
        }
      });
    },
    clearStartDate() {
      this.startDate = '';
      this.bindStartDateChange({detail: {value: ''}});
    },
    clearEndDate() {
      this.endDate = '';
      this.bindEndDateChange({detail: {value: ''}});
    },
    bindStartDateChange(e) {
      this.startDate = e.detail.value
    },
    bindEndDateChange(e) {
      this.endDate = e.detail.value
    },
    checkOrder(row){
      uni.navigateTo({
        url: '/pages/views/recycling/details?id=' + row.id
      })
    },
    handleSearch() {
      this.pageNum = 1
      this.noMoreData = false
      this.isSearching = true
      this.scrollTop = 0
      this.fetchOrderList()
    },
    fetchOrderList() {
      if (this.loading || this.noMoreData) return
      this.loading = true
      let params = {
        current: this.pageNum,
        size: this.pageSize,
        customerName: this.customerName,
        quantity: this.quantity,
        startDate: this.startDate,
        endDate: this.endDate
      }
      getPageList(params).then(res => {
        if (this.isSearching) {
          this.orderList = res.data.records
          this.isSearching = false
        } else {
          this.orderList = [...this.orderList, ...res.data.records]
        }
        this.noMoreData = this.pageNum * this.pageSize >= res.data.total;
        this.pageNum++

      }).finally(() => {
        this.loading = false
      })
    },
    loadMore() {
      if (!this.loading && !this.noMoreData) {
        this.fetchOrderList()
      }
    },
    goToAddPage() {
      uni.navigateTo({
        url: '/pages/views/recycling/details'
      })
    },
    formatDate(dateStr) {
      return dateStr.replace(' ', '  ')
    },
    getStatusText(status) {
      const statusMap = {
        0: '待审批',
        2: '已通过',
        1: '已拒绝'
      }
      return statusMap[status] || ''
    },
    getStatusClass(status) {
      const classMap = {
        0: 'status-pending',
        2: 'status-approved',
        1: 'status-rejected'
      }
      return classMap[status] || ''
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0;
  background-color: #f8f8f8;
  min-height: 100vh;
  position: relative;
}

/* 筛选区域优化 */
.filter-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  padding: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}


.filter-controls {
  display: flex;
  align-items: center;
  gap: 15rpx;
  padding: 10rpx 0;
}

.date-picker {
  flex: 1;

  .date-input {
    background: #f8f8f8;
    border-radius: 8rpx;
    padding: 18rpx 20rpx;
    font-size: 28rpx;
    color: #333;
    text-align: center;
  }
}

.filter-btn {
  background: #2979ff;
  color: #fff;
  border-radius: 8rpx;
  padding: 0 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  min-width: 120rpx;

  &::after {
    border: none;
  }
}

/* 列表区域 */
.list-container {
  height: calc(100vh - 180rpx);
  padding: 10rpx;
  transform: translateX(15rpx); /* 强制偏移 */
  width: calc(100% - 30rpx);
}

.list-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 25rpx;
  margin: 0 20rpx 20rpx 20rpx; /* 修改为四边统一间距 */
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  border: 1rpx solid #f0f0f0;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 15rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.order-id {
  font-size: 28rpx;
  color: #666;
}

.status-badge {
  font-size: 24rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;

  &.status-pending {
    background-color: #fff8e6;
    color: #ff9900;
  }

  &.status-approved {
    background-color: #e6f7ff;
    color: #1890ff;
  }

  &.status-rejected {
    background-color: #fff1f0;
    color: #ff4d4f;
  }
}

.item-content {
  .info-row {
    display: flex;
    margin-bottom: 16rpx;
    font-size: 28rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .info-label {
    color: #999;
    width: 160rpx;
  }

  .info-value {
    color: #333;
    flex: 1;

    &.amount {
      color: #f56c6c;
      font-weight: 500;
    }
  }
}

.loading-tip {
  text-align: center;
  padding: 20rpx;
  font-size: 26rpx;
  color: #999;
}

/* 新增按钮 */
.add-btn {
  position: fixed;
  right: 25rpx;
  bottom: 25rpx;
  width: 90rpx;
  height: 90rpx;
  background: #07C160;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3);
  z-index: 99;
  font-size: 36rpx;
  font-weight: bold;

  /* 移除按钮默认样式 */
  padding: 0;
  border: none;
  outline: none;

  /* 动画效果 */
  transition: all 0.2s ease;

  &::after {
    border: none;
  }

  /* 点击反馈 */
  &:active {
    transform: scale(0.95);
    box-shadow: 0 2rpx 6rpx rgba(7, 193, 96, 0.3);
  }

  /* 图标样式 */
  .add-icon {
    margin-top: 4rpx; /* 微调+号位置 */
  }
}


.u-swipe-action {
  border-radius: 12rpx; /* 与列表项圆角一致 */
  overflow: hidden; /* 防止按钮溢出 */
}

.input-group {
  display: flex;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.input-item {
  flex: 1;

  .u--input {
    background: #f8f8f8;
    border-radius: 10rpx;
    padding: 16rpx 20rpx;
    font-size: 28rpx;
    color: #333;
    border: 1rpx solid #e0e0e0;
    transition: all 0.3s ease;

    &__content {
      height: 80rpx;
      line-height: 80rpx;
    }

    &__field-wrapper {
      border: none;
    }

    &__placeholder {
      color: #999;
      font-size: 26rpx;
    }

    &:focus {
      border-color: #2979ff;
      box-shadow: 0 0 0 2rpx rgba(41, 121, 255, 0.2);
      background: #fff;
    }
  }
}
</style>