scancode-miro/pages/cjx/hexiao/jxs/hexiao_record.vue

<template>
  <view class="page-container">
    <view class="sticky-header">
      <view class="search-wrapper">
        <view class="query">
          <u-row customStyle="margin-bottom: 10px" gutter="20">
            <u-col span="9">
              <u--input
                  @focus="timeShow = true"
                  v-model="startTimeXd"
                  placeholder="开始日期 ~ 结束日期"
                  prefixIcon="calendar"
                  prefixIconStyle="font-size: 22px;color: #909399"
                  @clear="handleSearch"
              ></u--input>
            </u-col>
            <u-col span="3">
              <view class="query-btn" @click="clearSearch">
                <view class="query-btn-text">清空</view>
              </view>
            </u-col>
          </u-row>
        </view>
      </view>
      <view class="tabs-wrapper">
        <view
            v-for="tab in tabs"
            :key="tab.key"
            class="tab-item"
            :class="{ 'active': currentTab === tab.id }"
            @click="changeTab(tab.id)"
        >
          {{ tab.name }}
        </view>
      </view>
    </view>

    <scroll-view class="list-container" scroll-y="true" @scrolltolower="loadMore">
      <view v-if="recordList.length === 0 && loadStatus !== 'loading'" class="empty-list">
        <text>暂无相关记录</text>
      </view>

      <view v-for="record in recordList" :key="record.orderNo" class="record-card">
        <view class="card-header">
          <uni-icons type="paperclip" size="20" color="#3c82f8"></uni-icons>
          <text class="record-id" @click="detail(record.orderNo)" style="text-decoration: underline">{{ record.orderNo }}</text>
          <view class="status-badge pending" v-if="record.status === 1">
            {{ getStatusText(record.status) }}
          </view>
          <view class="status-badge verifying"  v-if="record.status === 2">
            {{ getStatusText(record.status) }}
          </view>
          <view class="status-badge verified"  v-if="record.status === 3">
            {{ getStatusText(record.status) }}
          </view>
        </view>
        <view class="card-body">
          <view class="detail-row">
            <text class="detail-label">业务员名称</text>
            <text class="detail-value">{{ record.ywyName }}</text>
          </view>
          <view class="detail-row" v-if="record.status === 1">
            <text class="detail-label">申请时间</text>
            <text class="detail-value">{{ record.applyTime }}</text>
          </view>

          <view class="detail-row" v-if="record.status === 2 || record.status === 3">
            <text class="detail-label">申请时间</text>
            <text class="detail-value">{{ record. dealerApplyTime }}</text>
          </view>

          <view class="detail-row" v-if="record.status === 3">
            <text class="detail-label">审核时间</text>
            <text class="detail-value">{{ record.finishTime }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">商品总数</text>
            <text class="detail-value">{{ record.writeOffNum }}</text>
          </view>
          <view class="detail-row product-item" v-for="(item, index) in record.writeOffRecordDetailVos" :key="index">
            <text class="detail-label">{{ item.categoryName }}</text>
            <text class="detail-value">{{ item.num }}</text>
          </view>



        </view>

        <view class="card-footer" v-if="record.status === 1">
          <button class="verify-btn" @click="verify(record.id,record.orderNo)">一键核销</button>
        </view>
      </view>

      <uni-load-more :status="loadStatus"></uni-load-more>
    </scroll-view>
    <u-calendar @close="timeShow = false" :show="timeShow" :mode="mode" @confirm="confirm"></u-calendar>

  </view>
</template>

<script>
import {queryJxsAddRecord,doCommitToJxs,doCommitToChang, queryHexiaoRecord} from "@/api/hexiao";

export default {
  data() {
    return {
      startTime: '',
      endTime: '',
      timeShow: false,
      startTimeXd:"",
      mode: 'range',
      searchQuery: '',
      tabs: [
        { name: '全部', key: 'all' ,id:-1 },
        { name: '待核销', key: 'pending',id: 1 },
        { name: '核销中', key: 'verifying', id: 2},
        { name: '已核销', key: 'verified' , id :3},
      ],
      currentTab: -1,
      recordList: [],
      pagination: { page: 1, limit: 10 },
      loadStatus: 'more', // 'more', 'loading', 'noMore'
      isLoading: false,
    };
  },
  onLoad() {
    this.fetchRecords(true);
  },
  onPullDownRefresh() {
    this.fetchRecords(true);
  },
  methods: {
    confirm(e) {
      this.startTime = e[0];
      this.endTime = e[e.length-1];
      this.startTimeXd = e[0]+' ~ '+e[e.length-1];
      if(!this.show){
        this.handleSearch()
      }
      this.timeShow = false;

    },
    getStatusClass(status){
      const statusMap = {
        1: 'pending',
        2: 'verifying',
        3: 'verified'
      };
      return statusMap[status] || '';
    },
    getStatusText(status) {
      const statusMap = {
        1: '待核销',
        2: '核销中',
        3: '已核销'
      };
      return statusMap[status] || '未知';
    },
    changeTab(tabKey) {
      if (this.currentTab === tabKey) return;
      this.currentTab = tabKey;
      this.fetchRecords(true); // 切换tab时重新加载数据
    },
    async fetchRecords(isRefresh = false) {
      if (this.isLoading || (this.loadStatus === 'noMore' && !isRefresh)) {
        return;
      }
      if (isRefresh) {
        this.pagination.page = 1;
        this.recordList = [];
        this.loadStatus = 'more';
      }
      this.isLoading = true;
      this.loadStatus = 'loading';


      let data = {};
      if(this.currentTab !== -1){
        data.status = this.currentTab;
      }
      data.startTime = this.startTime;
      data.endTime = this.endTime;
      data.pageIndex = this.pagination.page
      data.pageSize = this.pagination.limit
      queryHexiaoRecord(data).then(res=>{
        let finalData = res.data.records;
        if(!finalData){
          finalData = [];
        }
        if (finalData.length > 0) {
          this.recordList = [...this.recordList, ...finalData];
          this.pagination.page++;
          this.loadStatus = 'more';
        } else {
          this.loadStatus = 'noMore';
        }
        this.isLoading = false;
        uni.stopPullDownRefresh();
      });



    },
    detail(id){
      uni.navigateTo({ url: `/pages/cjx/hexiao/jxs/hexiao_detail?id=`+id });
    },
    loadMore() {
      this.fetchRecords();
    },
    clearSearch(){
      this.startTime = "";
      this.endTime = "";
      this.startTimeXd = "";
      this.handleSearch()
    },
    handleSearch() {
      this.fetchRecords(true);
    },
    verify(id,orderNo) {
      uni.showModal({
        title: '提示',
        content: `确认核销订单 ${orderNo} 吗？`,
        success: (res) => {
          if (res.confirm) {
            doCommitToChang(id).then(res=>{
              if(res.code === 0){
                this.fetchRecords(true);
                uni.showToast({ title: '核销成功' });
              }else{
                uni.showToast({ title: '核销失败' });
              }

            });
          }
        }
      });
    }
  }
}
</script>

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

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #f5f6fa;
}
.search-wrapper {
  padding: 20rpx;
  background-color: #ffffff;
}
.search-bar {
  display: flex;
  align-items: center;
  background-color: #f5f6fa;
  border-radius: 50rpx;
  padding: 0 25rpx;
  height: 70rpx;
}
.search-input { flex: 1; font-size: 28rpx; margin-left: 15rpx; }
.placeholder { color: #b0b0b0; }

.tabs-wrapper {
  display: flex;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 25rpx 0;
    font-size: 28rpx;
    color: #666;
    position: relative;
    &.active {
      color: #3c82f8;
      font-weight: 500;
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 6rpx;
        background-color: #3c82f8;
        border-radius: 3rpx;
      }
    }
  }
}

.list-container {
  flex: 1;
  height: 100%;
}
.empty-list { text-align: center; color: #999; padding-top: 150rpx; }

.record-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  margin: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  position: relative;
}

.card-header {
  display: flex;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
  .record-id {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    margin-left: 15rpx;
  }
}

.status-badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8rpx 20rpx;
  font-size: 24rpx;
  color: #fff;
  border-top-right-radius: 16rpx;
  border-bottom-left-radius: 16rpx;

  &.pending { background-color: #3c82f8; }
  &.verifying { background-color: #ff9900; }
  &.verified { background-color: #909399; }
}

.card-body {
  padding-top: 10rpx;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12rpx 0;
  font-size: 28rpx;
  .detail-label { color: #666; }
  .detail-value { color: #333; }
  &.product-item {
    .detail-label { color: #333; }
    .detail-value { color: #999; }
  }
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20rpx;
}
.verify-btn {
  background-color: #3c82f8;
  color: #fff;
  font-size: 26rpx;
  padding: 0 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 30rpx;
  margin: 0;
  &::after { border: none; }
}

.query-btn {
  background-color: #409eff;
  color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  height: 34rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.query-btn-icon {
  height: 32rpx;
  width: 32rpx;
  background-image:
      url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/queryIoc.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.query-btn-text {
  font-weight: 400;
  font-size: 30rpx;
  color: #F5F5F5;
}
</style>