JCSS / jcss-miniprogram

<template>
  <view class="work-order-page">
    <!-- 顶部固定搜索栏 -->
    <up-sticky>
      <view class="search-header">
        <!-- 左侧下拉框 -->
        <view class="dropdown-wrap">
          <up-dropdown ref="uDropdownRef" @open="open" @close="close">
            <up-dropdown-item
                v-model="selectedSortValue"
                title="距离"
                :options="sortOptions"
                @change="handleSortChange"
            />
          </up-dropdown>
        </view>

        <!-- 右侧搜索框 -->
        <view class="search-input-wrap">
          <up-search
              v-model="searchValue"
              placeholder="请输入关键字"
              @search="handleSearch"
              bg-color="#f5f5f5"
              :clearabled="false"
              :show-action="true"
              actionText="搜索"
              :animation="true"
              @custom="handleSearch"
          />
        </view>
      </view>
    </up-sticky>

    <!-- 列表容器 -->
    <z-paging
        ref="paging"
        v-model="orderList"
        @query="queryList"
        :top="100"
    :bottom="120"
    >
    <template #empty>
      <view class="empty-tip">暂无工单数据</view>
    </template>

    <!-- 修复：新增列表容器，配置顶部内边距 -->
    <view class="order-list">
      <view class="order-card" v-for="item in orderList" :key="item.orderNo">
        <view class="order-item up-line-1">工单编号：{{ item.orderNo }}</view>
        <view class="order-item up-line-1">工单位置：{{ item.roadName || '未填写' }}</view>
        <view class="order-item up-line-1">工单名称：{{ item.orderName || '未填写' }}</view>
        <view class="order-item up-line-1">情况描述：{{ item.remark || '无' }}</view>
        <view class="order-footer">
          <view class="submit-time up-line-1">提交时间：{{ timeFormat(item.createTime,'yyyy-mm-dd') }}</view>
          <up-button
              type="primary"
              size="mini"
              @click="handleDetail(item)"
              :style="{ width: '80px', height: '28px', fontSize: '14px', borderRadius: 4 }"
          >
            工单详情
          </up-button>
        </view>
      </view>
    </view>
    </z-paging>

    <!-- 修复：补充底部按钮样式层级 -->
    <view class="fixed-bottom-btn-wrap">
      <up-button type="primary" size="large" @click="handleAddOrder">
        新增工单
      </up-button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { workorderPage } from "@/api/quick-order/quick-order";
import { timeFormat } from '@/uni_modules/uview-plus';
// ========== 修复1：声明所有核心响应式变量 ==========
// 顶部/底部高度（rpx）
const headerHeight = 100;
const bottomBtnHeight = 120;
// 排序相关
const selectedSortValue = ref(1);
const sortOptions = ref([
  { label: '默认排序', value: 1 },
  { label: '距离优先', value: 2 }
]);
// 分页相关（核心：声明orderList）
const pageNo = ref(1);
const pageSize = ref(10);
const paging = ref(null);
const orderList = ref([]); // 修复：新增列表变量
// 搜索相关
const searchValue = ref('');



// ========== 修复3：适配z-paging回调参数 ==========
const queryList = async (pageNo,pageSize) => {
  try {
    // 修复：z-paging的query回调参数是对象 {pageNo, pageSize}
    const apiParams = {
      searchContent: searchValue.value.trim() || '',
      pageNo: pageNo,
      pageSize: pageSize,
      type:1 //  1 位置 2 工单名称 3 情况描述 4 工单编号
    };
    console.log('请求参数：', apiParams);
    const res = await workorderPage(apiParams);
    console.log('接口返回：', res);


    paging.value.complete(res.list);
  } catch (error) {
    console.error('加载失败：', error);
    paging.value?.complete(false);
    uni.showToast({ title: '加载失败，请重试', icon: 'none' });
  }
};

// ========== 其他方法补充 ==========
const handleSortChange = (val) => {
  console.log('排序变更：', val);
  paging.value?.reload(); // 排序后刷新列表
};

const handleSearch = (val) => {
  console.log('搜索内容：', val);
  searchValue.value = val;
  paging.value?.reload(); // 搜索后刷新列表
};

const handleDetail = (item) => {
  console.log('工单详情：', item);
  uni.navigateTo({
    url: `/pages-sub/daily/quick-order/order-detail?id=${item.id}`
  });
};

const handleAddOrder = () => {
  uni.navigateTo({
    url: '/pages-sub/daily/quick-order/add-order'
  });
};

// 空方法（避免下拉框报错）
const open = () => {};
const close = () => {};
</script>

<style scoped lang="scss">
// 修复：页面基础样式
.work-order-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}

// 顶部搜索栏
.search-header {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  height: v-bind(headerHeight + 'rpx');
  box-sizing: border-box;

  .dropdown-wrap {
    flex: 1;
    margin-right: 20rpx;
  }

  .search-input-wrap {
    flex: 2;
  }
}

// 修复：列表容器样式（核心）
.order-list {
  padding: 120rpx 20rpx 20rpx; // 顶部内边距避开搜索栏
  box-sizing: border-box;
}

// 空状态样式
.empty-tip {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
}

// 工单卡片样式
.order-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .order-item {
    font-size: 28rpx;
    color: #333;
    line-height: 48rpx;
    margin-bottom: 8rpx;
  }

  .order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12rpx;

    .submit-time {
      font-size: 26rpx;
      color: #666;
      line-height: 40rpx;
    }
  }
}

</style>