cmc-oa/oa-ui-app/pages/oa/car/useCarList.vue

<!--
 * @Author: ysh
 * @Date: 2025-06-18 15:39:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-06-19 11:26:48
-->
<template>
  <view class="container">
    <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
      :up="upOption" :fixed="false" :top="10" style="padding: 30rpx;">
      <view v-for="item, index in useCarList" :key="'car' + index" class="modern-card">
        <view class="modern-card-header">
          <view class="modern-card-title">
            <view class="car-status" :class="'status-' + item.carUsage">{{ getStatusText(item.carUsage) }}</view>
          </view>
        </view>
        <view class="modern-card-body">
          <view class="avatar-section">
            <view class="avatar">
              <text>{{ item.applierUser ? item.applierUser.nickName[0] : '无' }}</text>
            </view>
            <view>
              <text class="applier-name">{{ item.applierUser ? item.applierUser.nickName : '无' }}</text>
              <text class="dept-name">{{ item.dept ? item.dept.deptName : '无' }}</text>
            </view>
          </view>
          <view class="info-row">
            <text class="info-label">用车时间：</text>
            <text class="info-value">{{ item.beginDate + ' 至 ' + item.endDate }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">用车事由：</text>
            <text class="info-value">{{ item.applyReason }}</text>
          </view>
          <view class="info-row" v-if="item.carUsage == '0'">
            <text class="info-label">项目编号：</text>
            <text class="info-value">{{ item.project ? item.project.projectNumber : '无' }}</text>
          </view>
          <view class="info-row" v-if="item.carUsage == '0'">
            <text class="info-label">项目名称：</text>
            <text class="info-value">{{ item.project ? item.project.projectName : '无' }}</text>
          </view>
        </view>
      </view>
    </mescroll-uni>
  </view>
</template>

<script>
import { listCarApproval } from "@/api/oa/car/carApproval";
export default {
  data() {
    return {
      carId: '',
      licensePlate: '',
      useCarList: [],
      mescroll: null,
      queryParams: {
        pageNum: 1,
        pageSize: 20
      },
      downOption: {
        auto: true,
        textOutOffset: '下拉刷新',
        textLoading: '加载中...'
      },
      upOption: {
        auto: false,
        page: { num: 1, size: 20 },
        noMoreSize: 5,
        empty: { tip: '暂无借款数据' },
        textNoMore: '~ 没有更多数据了 ~'
      },
    }
  },
  onLoad(options) {
    this.carId = options.carId;
    this.licensePlate = options.licensePlate;
    uni.setNavigationBarTitle({
      title: this.licensePlate + '派车记录'
    })
    uni.startPullDownRefresh();
  },
  methods: {
    // 加载数据
    async loadData() {
      try {
        let res = null;
        res = await listCarApproval({ carId: this.carId, cars: this.carId, ...this.queryParams })
        return { data: res.rows, total: res.total }
      } catch (error) {
        console.error(error);
        return { data: [] };
      }
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    async downCallback() {
      this.useCarList = []; // 清空列表
      this.queryParams.pageNum = 1
      const res = await this.loadData()
      if (res.error) {
        this.mescroll.endErr();
      } else {
        this.useCarList = res.data;
        this.mescroll.endSuccess(res.data.length, res.total);
      }
      uni.stopPullDownRefresh();
    },
    async upCallback(page) {
      this.queryParams.pageNum = page.num
      const res = await this.loadData()
      if (res.error) {
        this.mescroll.endErr();
      } else {
        this.useCarList = this.useCarList.concat(res.data);
        this.mescroll.endSuccess(res.data.length, res.total);
      }
    },
    getStatusText(status) {
      switch (status) {
        case '0':
          return '项目用车';
        case '1':
          return '非项目用车';
        case '2':
          return '工会用车';
        case '3':
          return '党委用车';
        case '4':
          return '团委用车';
      }
    }
  }
}
</script>

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

.modern-card {
  background: #fff;
  border-radius: 18rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: box-shadow 0.2s;
  border: 1rpx solid #f0f0f0;
}

.modern-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #e0e7ff 0%, #f8fafc 100%);
  padding: 24rpx 28rpx 16rpx 28rpx;
}

.modern-card-title {
  display: flex;
  flex-direction: column;
}

.car-plate {
  font-size: 32rpx;
  color: #22223b;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.car-status {
  font-size: 24rpx;
  font-weight: 500;
  padding: 4rpx 16rpx;
  border-radius: 8rpx;
  display: inline-block;
  width: fit-content;
}

.status-0 {
  background: #fef3c7;
  color: #d97706;
}

/* 已派出 */
.status-1 {
  background: #d4f3e9;
  color: #10b981;
}

/* 可使用 */
.status-4 {
  background: #fee2e2;
  color: #ef4444;
}

/* 已报废 */
.status-3 {
  background: #dbeafe;
  color: #3b82f6;
}

/* 已还车 */

.modern-card-body {
  padding: 20rpx 28rpx 24rpx 28rpx;
}

.avatar-section {
  display: flex;
  align-items: center;
  margin-bottom: 18rpx;
}

.avatar {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #a5b4fc;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: bold;
  margin-right: 18rpx;
}

.applier-name {
  font-size: 28rpx;
  color: #22223b;
  font-weight: 500;
}

.dept-name {
  font-size: 24rpx;
  color: #64748b;
  margin-left: 8rpx;
}

.info-row {
  display: flex;
  margin-bottom: 10rpx;
}

.info-label {
  color: #64748b;
  font-size: 24rpx;
  min-width: 120rpx;
}

.info-value {
  color: #22223b;
  font-size: 24rpx;
  flex: 1;
  word-break: break-all;
}

.amount-highlight-detail {
  background: #fef3c7;
  color: #d97706;
  font-size: 28rpx;
  font-weight: bold;
  border-radius: 10rpx;
  padding: 4rpx 18rpx;
  margin-left: 8rpx;
}

.manager-amount-highlight-detail {
  background: #d4f3e9;
  color: #10b981;
  font-size: 28rpx;
  font-weight: bold;
  border-radius: 10rpx;
  padding: 4rpx 18rpx;
  margin-left: 8rpx;
}

.modern-card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  padding: 16rpx 28rpx 20rpx 28rpx;
  border-top: 1px solid #f0f0f0;
  background: #fafbfc;
}

.footer-btn {
  font-size: 26rpx;
  border-radius: 8rpx;
  border: none;
  outline: none;
  background: #e0e7ff;
  color: #3b3b4f;
}

.detail-btn {
  background: #6366f1;
  color: #fff;
}

.detail-btn2 {
  background: #f4c542;
  color: #fff;
}
</style>