detection-business/pages/index/TodayTable.vue

<template>
  <view class="content">
    <view class="c-top">
      <view style="width: 100%; height: 44px;"></view>
      <view class="top-ail">
        <!-- 新增 -->
        <view class="top-two">
          <view class="" @click="getback()">
            <uni-icons type="left" color="#ffffff" size="22"></uni-icons>
          </view>
          <view class="bai-title">当日订单</view>
          <view style="width: 15px; height: 100%;"></view>
        </view>
        <view class="example-body" style="width: 100%;margin-top: 1rem;display: flex;justify-content: space-between;">
          <uni-datetime-picker v-model="queryParams.queryTime" type="daterange" @maskClick="maskClick"/>
          <radio style="margin-left: 1rem;display: flex;align-items: center" :checked="queryParams.chooseStatus === item.value" @click="queryParams.chooseStatus = item.value" v-for="item in statues" :key="item.value">{{item.label}}</radio>
          <view class="sou" @click="handleSearch">搜索</view>
          <view class="sou" @click="handleReset">重置</view>
        </view>
        <view style="display: flex; flex-wrap: wrap; gap: 1rem; margin: 0.5rem auto; justify-content: flex-start;">
          <view v-for="[key, value] in countMap" :key="key" style="flex: 0 0 auto;">
            <view>{{key}}: {{value}}</view>
          </view>
        </view>
        <view class="table-container">
          <view class="table-row header-row">
            <view class="table-cell">序号</view>
            <view class="table-cell">车牌号</view>
            <view class="table-cell">检测类型</view>
            <view class="table-cell">检测状态</view>
            <view class="table-cell">检测结果</view>
            <view class="table-cell">是否支付</view>
            <view class="table-cell">支付方式</view>
          </view>
          <view v-for="(item, index) in tableData" :key="index" class="table-row" @click="handleShow(item.id)">
            <view class="table-cell">{{ index + 1 }}</view>
            <view class="table-cell">{{ item.carNum }}</view>
            <view class="table-cell">{{ item.type }}</view>
            <view class="table-cell">{{ item.status }}</view>
            <view class="table-cell">{{ item.result }}</view>
            <view class="table-cell">{{ item.pay }}</view>
            <view class="table-cell">{{ getPayType(item.payType) }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from '../../utils/request';
import {getDictDataByType} from '../../utils/utils'

export default {
  name: "TodayTable",
  data() {
    return {
      platform: process.env.UNI_PLATFORM, // 获取当前平台
      tableData: [],
      queryParams: {
        queryTime: null,
        pageNum: 1,
        pageSize: 10,
        chooseStatus: "1"
      },
      loading: false, // 加载更多时的标志位
      payTypes: [],
      pages: 0,
      statues: [
        {
          label: "全部",
          value: "1",
        },
        {
          label: "进行中",
          value: "2",
        },
        {
          label: "已完成",
          value: "3",
        },
      ],
      countMap:[]
    };
  },
  onReady() {
    this.setLandscape();
    this.getCountMap()
    this.getTableData();
    this.getDictData()
  },
  onUnload() {
    this.resetOrientation();
  },
  onReachBottom() { // 当用户滚动到底部时触发
    if (!this.loading && this.queryParams.pageNum < this.pages) {
      this.queryParams.pageNum += 1;
      this.getTableData(true);
    } else {
      uni.showToast({
        title: '没有下一页数据',
        icon: 'none'
      })
    }
  },
  methods: {
    getCountMap(){
      request({
        url: '/partnerOwn/partner/getTypeCount',
        method: 'get',
        params: this.queryParams
      }).then(res => {
        this.countMap = Object.entries(res.data)
      })
    },
    handleShow(id) {
      uni.navigateTo({
        url: "/pages/index/orderdetails?inspectionInfoId=" + id
      })
    },
    maskClick() {
      this.handleReset()
    },
    getDictData() {
      if (!this.payTypes || this.payTypes.length === 0) {
        this.payTypes = getDictDataByType("pay_type")
      }
    },
    getPayType(type) {
      if (!this.payTypes || this.payTypes.length === 0) {
        this.getDictData()
      }
      if (type) {
        const index = this.payTypes.findIndex(item => item.value === type)
        if (index !== -1) {
          return this.payTypes[index].label
        }
      }
    },
    handleReset() {
      this.queryParams = {
        queryTime: null,
        pageNum: 1,
        pageSize: 10,
        chooseStatus: "1"
      };
      this.tableData = []; // 重置时清空数据
      this.getCountMap()
      this.getTableData();
    },
    handleSearch() {
      this.tableData = []
      this.queryParams.pageNum = 1
      if (this.queryParams.queryTime) {
        this.queryParams.startTime = this.queryParams.queryTime[0];
        this.queryParams.endTime = this.queryParams.queryTime[1];
      }
      this.getCountMap()
      this.getTableData();
    },
    getTableData(isLoadMore = false) {
      this.loading = true; // 开始加载更多
      request({
        url: '/partnerOwn/partner/getOrderByDate',
        method: 'get',
        params: this.queryParams
      }).then(res => {
        this.pages = res.data.pages
        const newData = res.data.records || [];
        if (isLoadMore) {
          this.tableData = this.tableData.concat(newData); // 合并新旧数据
        } else {
          this.tableData = newData; // 初始加载或搜索时替换数据
        }
        this.loading = false; // 完成加载
      }).catch(err => {
        console.error('获取订单数据失败', err);
        this.loading = false; // 出错也停止加载
      });
    },
    getback() {
      uni.navigateBack();
    },
    setLandscape() {
      const platform = this.platform;

      // 小程序环境下使用 uni.setScreenOrientation
      if (uni.setScreenOrientation) {
        try {
          uni.setScreenOrientation({
            orientation: 'landscape'
          });
        } catch (err) {
          console.error('Setting screen orientation failed', err);
        }
      }

      // APP-PLUS 环境下使用 plus.screen.lockOrientation
      if (platform === 'app-plus') {
        this.lockOrientationForAppPlus('landscape-primary');
      }
    },
    resetOrientation() {
      const platform = this.platform;

      // 小程序环境下恢复默认屏幕方向
      if (uni.setScreenOrientation) {
        try {
          uni.setScreenOrientation({
            orientation: 'portrait'
          });
        } catch (err) {
          console.error('Resetting screen orientation failed', err);
        }
      }

      // APP-PLUS 环境下恢复竖屏
      if (platform === 'app-plus') {
        this.lockOrientationForAppPlus('portrait-primary');
      }
    },
    lockOrientationForAppPlus(orientation) {
      if (typeof plus !== 'undefined' && plus.screen) {
        plus.screen.lockOrientation(orientation);
      } else {
        // 如果 plus.screen 未定义，等待 plusReady 事件
        document.addEventListener('plusready', () => {
          if (plus.screen) {
            plus.screen.lockOrientation(orientation);
          } else {
            console.error('plus.screen is not available');
          }
        }, false);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color: #F4F4F4;
}

.c-top {
  width: 100%;
  height: 283px;
  background-color: cornflowerblue;
  background: url("../../static/detection/mybj.png") center no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.top-ail {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}

.top-two {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bai-title {
  font-size: 20px;
  font-weight: bold;
  color: white;
}

.table-container {
  width: 100%;
  overflow: hidden;
  border-collapse: collapse;
}

.table-row {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #ddd;
}

.table-cell {
  flex: 1; /* 确保每个单元格宽度相同 */
  min-width: 0; /* 防止内容过多时破坏布局 */
  padding: 12px;
  text-align: center; /* 内容居中 */
  border-right: 1px solid #ddd;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center; /* 确保即使内容为空也居中 */
}

.header-row .table-cell {
  font-weight: bold;
  background-color: #f8f8f8; /* 表头背景颜色 */
}

.table-row:last-child {
  border-bottom: none;
}

.table-cell:last-child {
  border-right: none;
}

/* 可选：为表格添加一些间距和阴影，使其更美观 */
.table-container {
  margin: 5px 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.sou {
  width: 15%;
  color: white;
  margin-left: 1rem;
  background-color: #4575e1;
  border-radius: 5px;
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  box-sizing: border-box; /* 确保 padding 和 border 不会增加元素的实际宽度 */
}
.example-body{
}
</style>