work-order/work-order-uniapp/pages/car/index.vue

<template>
  <view class="app-container">
    <HeaderBar title="车辆信息" text-align="center" enable-back />

    <view class="car-list">
      <view
        v-for="item in carList"
        :key="item.id"
        class="car-item"
        @click="selectCar(item)"
      >
        <image :src="item.picture" class="car-img" mode="aspectFill" />
        <view class="car-info">
          <view class="no">
            {{ item.no | dv}}
            <view v-if="item.isDefault" class="default-tag">默认</view>
          </view>
          <view class="name">{{ item.name | dv}}</view>
          <view class="mobile">{{ item.mobile | dv}}</view>
        </view>
        <view class="car-actions">
          <view class="action-btn edit" @click.stop="editCar(item)">
            <u-icon name="edit-pen" size="32" color="#2979ff"></u-icon>
          </view>
          <view class="action-btn delete" @click.stop="deleteCar(item)">
            <u-icon name="trash" size="32" color="#f56c6c"></u-icon>
          </view>
        </view>
      </view>
      <view class="car-item add-placeholder" @click="addCar">
        <view class="add-content">
          <u-icon name="plus" size="40" color="#2979ff"></u-icon>
          <text class="add-text">添加新车辆</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { appGetCarList, appDeleteCar } from '@/api/app/car'
import HeaderBar from '@/components/HeaderBar.vue'
import { appUpdateTask } from '@/api/app/task'

export default {
  name: 'CarIndex',
  components: { HeaderBar },
  data() {
    return {
      carList: [],
      taskId: null,
      queryParams: {
        orderByColumn: "createTime",
        isAsc: "desc"
      }
    }
  },
  onLoad(options) {
    this.taskId = options.taskId
  },
  onShow() {
    this.getCarList()
  },
  methods: {
    getCarList() {
      appGetCarList(this.queryParams).then(res => {
        this.carList = res.data
      })
    },
    // 选择车辆，如果taskId不为空，则更新task表
    selectCar(car) {
      if (this.taskId == null || car == null) {
        return;
      }
      this.$modal.loading("加载中");
      appUpdateTask({
        id: this.taskId,
        carId: car.id,
        carNo: car.no,
        createName: car.name,
        createMobile: car.mobile,
      }).then(res => {
        this.$modal.closeLoading();
        uni.navigateBack();
      })
    },
    deleteCar(car) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该车辆吗？',
        success: (res) => {
          if (res.confirm) {
            appDeleteCar(car.id).then(() => {
              uni.showToast({ title: '删除成功', icon: 'success' })
              this.getCarList()
            })
          }
        }
      })
    },
    editCar(car) {
      uni.navigateTo({
        url: `/pages/car/edit?id=${car.id}`
      })
    },
    addCar() {
      uni.navigateTo({
        url: '/pages/car/edit'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.car-list {
  margin-top: 30rpx;
  padding: 0 20rpx;
}
.car-item {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  position: relative;
  &.add-placeholder {
    background: #ffffff71;
    border: 2rpx dashed #fff;
    justify-content: center;
    padding: 40rpx;
    .add-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10rpx;
      .add-text {
        font-size: 28rpx;
        color: #2979ff;
      }
    }
  }
  .car-img {
    width: 100rpx;
    height: 100rpx;
    border-radius: 10rpx;
    margin-right: 20rpx;
    background: #f7f8fa;
  }
  .car-info {
    flex: 1;
    .no { font-size: 32rpx; color: #333; }
    .mobile, .name { font-size: 28rpx; color: #666; }
    .default-tag {
      display: inline-block;
      background: #2979ff;
      color: #fff;
      border-radius: 8rpx;
      font-size: 22rpx;
      padding: 2rpx 10rpx;
      margin-left: 10rpx;
    }
  }
  .car-actions {
    display: flex;
    gap: 20rpx;
    .action-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #f7f8fa;
    }
  }
}
</style>