zhywpt-sp/subpackage/after-sale/activation-once-again/vehicle-details.vue

<template>
  <view class="vehicle-details-container">
    <!-- 车辆基本信息 -->
    <view class="vehicle-info-section">
      <view class="info-item">
        <text class="label">车牌号</text>
        <text class="value">{{ vehicleInfo.vehiclePlate }}</text>
      </view>
      <view class="info-item">
        <text class="label">车牌颜色</text>
        <text class="value">{{
          getVehiclePlateColor(vehicleInfo.vehiclePlateColor)
        }}</text>
      </view>
      <!-- 行驶证图片 -->
      <view class="license-section">
        <view class="license-item">
          <text class="license-title">行驶证主页</text>
          <view class="license-image-container">
            <image
              v-if="vehicleInfo.vehPosImgUrl"
              :src="getImageUrl(vehicleInfo.vehPosImgUrl)"
              class="license-image"
              mode="aspectFit"
              @click="previewImage(getImageUrl(vehicleInfo.vehPosImgUrl))"
            />
            <view v-else class="license-placeholder">
              <text class="placeholder-text">暂无图片</text>
            </view>
          </view>
        </view>
        <view class="license-item">
          <text class="license-title">行驶证副页</text>
          <view class="license-image-container">
            <image
              v-if="vehicleInfo.vehNegImgUrl"
              :src="getImageUrl(vehicleInfo.vehNegImgUrl)"
              class="license-image"
              mode="aspectFit"
              @click="previewImage(getImageUrl(vehicleInfo.vehNegImgUrl))"
            />
            <view v-else class="license-placeholder">
              <text class="placeholder-text">暂无图片</text>
            </view>
          </view>
        </view>
      </view>

      <view class="info-item">
        <text class="label">车辆所有人信息</text>
        <text class="value">{{ vehicleInfo.ownerName }}</text>
      </view>
      <view class="info-item">
        <text class="label">车辆所有人证件类型</text>
        <text class="value">{{ vehicleInfo.ownerIdType }}</text>
      </view>
      <view class="info-item">
        <text class="label">车辆所有人证件号码</text>
        <text class="value">{{ vehicleInfo.ownerIdNum }}</text>
      </view>
      <view class="info-item">
        <text class="label">车辆所有人电话</text>
        <text class="value">{{ vehicleInfo.ownerTel }}</text>
      </view>
      <view class="info-item">
        <text class="label">车辆号码</text>
        <text class="value">{{ vehicleInfo.vehicleId }}</text>
      </view>
      <view class="info-item">
        <text class="label">行驶证车辆类型</text>
        <text class="value">{{ vehicleInfo.vehicleType }}</text>
      </view>
      <view class="info-item">
        <text class="label">车辆识别号</text>
        <text class="value">{{ vehicleInfo.vin }}</text>
      </view>
      <view class="info-item">
        <text class="label">发动机号码</text>
        <text class="value">{{ vehicleInfo.engineNum }}</text>
      </view>
      <view class="info-item">
        <text class="label">车辆收费类型</text>
        <text class="value">{{ vehicleInfo.type }}</text>
      </view>
      <view class="info-item">
        <text class="label">核定载人数</text>
        <text class="value">{{ vehicleInfo.approvedCount }}</text>
      </view>
      <view class="info-item">
        <text class="label">总质量</text>
        <text class="value">{{ vehicleInfo.totalMass }}kg</text>
      </view>
      <view class="info-item">
        <text class="label">整备质量</text>
        <text class="value">{{ vehicleInfo.maintenaceMass }}kg</text>
      </view>
      <view class="info-item">
        <text class="label">核定载质量</text>
        <text class="value">{{ vehicleInfo.permittedWeight }}kg</text>
      </view>
      <view class="info-item">
        <text class="label">外廊尺寸</text>
        <text class="value">{{ vehicleInfo.vehicleDimensions }}</text>
      </view>
      <view class="info-item">
        <text class="label">准牵引总质量</text>
        <text class="value">{{ vehicleInfo.permittedTowWeight }}Kg</text>
      </view>
      <view class="info-item">
        <text class="label">车轮数</text>
        <text class="value">{{ vehicleInfo.vehicleWheelCount }}</text>
      </view>
      <view class="info-item">
        <text class="label">车轴数</text>
        <text class="value">{{ vehicleInfo.axleCount }}</text>
      </view>
      <view class="info-item">
        <text class="label">车辆使用性质</text>
        <text class="value">{{ vehicleInfo.useCharacter }}</text>
      </view>
      <!-- 车身照和车头照 -->
      <view class="license-section">
        <view class="license-item">
          <text class="license-title">车身照</text>
          <view class="license-image-container">
            <image
              v-if="vehicleInfo.vehBodyUrl"
              :src="getImageUrl(vehicleInfo.vehBodyUrl)"
              class="license-image"
              mode="aspectFit"
              @click="previewImage(getImageUrl(vehicleInfo.vehBodyUrl))"
            />
            <view v-else class="license-placeholder">
              <text class="placeholder-text">暂无图片</text>
            </view>
          </view>
        </view>
        <view class="license-item">
          <text class="license-title">车头照</text>
          <view class="license-image-container">
            <image
              v-if="vehicleInfo.proxyUrl"
              :src="getImageUrl(vehicleInfo.proxyUrl)"
              class="license-image"
              mode="aspectFit"
              @click="previewImage(getImageUrl(vehicleInfo.proxyUrl))"
            />
            <view v-else class="license-placeholder">
              <text class="placeholder-text">暂无图片</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部按钮 -->
    <view class="bottom-actions">
      <button class="submit-btn" @click="changeVehicleInfo">车辆信息变更</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getVehiclePlateColor } from "@/datas/vehiclePlateColor";
import { vehicleInfoView } from "@/utils/network/api.js";
import { requestNew } from "@/utils/network/request.js";
import { fileURL } from "@/datas/fileURL.js";

// 响应式数据
const vehicleInfo = reactive({
  vehiclePlate: '',
  vehiclePlateColor: 0,
  vehPosImgUrl: '',
  vehNegImgUrl: '',
  ownerName: '',
  ownerIdType: '',
  ownerIdNum: '',
  ownerTel: '',
  vin: '',
  vehicleId: '',
  vehicleType: '',
  engineNum: '',
  type: '',
  approvedCount: 0,
  totalMass: 0,
  maintenaceMass: 0,
  permittedWeight: 0,
  vehicleDimensions: '',
  permittedTowWeight: 0,
  vehicleWheelCount: 0,
  axleCount: 0,
  useCharacter: '',
  vehBodyUrl: '',
  proxyUrl: ''
});

const plateNumber = ref(["贵", "Z", "M", "J", "U", "7", "0"]);
const currentInputIndex = ref(0);
const selectedColor = ref("blue");

// 页面加载
onLoad((options) => {
  console.log("车辆详情页面参数:", options);
  uni.setNavigationBarTitle({
    title: "车辆详情",
  });

  if (options.id) {
    // 根据id获取车辆详情
    getVehicleDetails(options.id);
  } else {
    uni.showToast({
      title: "缺少车辆ID参数",
      icon: "none",
    });
  }
});

// 获取车辆详情
const getVehicleDetails = (id: string) => {
  const options = {
    type: 2,
    data: {
      vehicleId: id,
    },
    method: "POST",
    showLoading: true,
  };

  requestNew(vehicleInfoView, options)
    .then((res) => {
      console.log("车辆详情接口返回:", res);
      if (res) {
        // 将接口返回的数据赋值给vehicleInfo
        Object.assign(vehicleInfo, res);
        console.log(vehicleInfo, 'vehicleInfo');
      } else {
        uni.showToast({
          title: res?.message || "获取车辆信息失败",
          icon: "none",
        });
      }
    })
    .catch((err) => {
      console.error("获取车辆详情失败:", err);
      uni.showToast({
        title: "获取车辆信息失败",
        icon: "none",
      });
    });
};

// 处理图片URL
const getImageUrl = (url: string) => {
  if (!url) return '';
  // 如果已经是完整URL，直接返回
  if (url.startsWith('http://') || url.startsWith('https://')) {
    return url;
  }
  // 从fileURL中删除default-bucket/后缀，然后拼上url
  const baseUrl = fileURL.replace('/default-bucket/', '');
  return `${baseUrl}/${url}`;
};

// 预览图片
const previewImage = (url: string) => {
  if (url) {
    uni.previewImage({
      urls: [url],
      current: url,
    });
  }
};

// 聚焦输入框
const focusInput = (index: number) => {
  currentInputIndex.value = index;
};

// 添加新车牌
const addNewPlate = () => {
  uni.showToast({
    title: "添加新车牌功能",
    icon: "none",
  });
};

// 选择车牌颜色
const selectColor = (color: string) => {
  selectedColor.value = color;
};

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ["compressed"],
    sourceType: ["album", "camera"],
    success: (res) => {
      vehicleInfo.proxyUrl = res.tempFilePaths[0];
    },
  });
};

// 下一步
const nextStep = () => {
  uni.showToast({
    title: "下一步功能",
    icon: "none",
  });
};

// 车辆信息变更
const changeVehicleInfo = () => {
  uni.navigateTo({
    url: `/subpackage/personal-center/vehicle-change/vehicle-change-choiceType?vehicleId=${vehicleInfo.vehicleId}&vehiclePlate=${vehicleInfo.vehiclePlate}`,
  });
};
</script>

<style lang="scss" scoped>
.vehicle-details-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 200rpx;
}

.header {
  background-color: #fff;
  padding: 30rpx;
  text-align: center;
  border-bottom: 1rpx solid #eee;

  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.vehicle-info-section {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 12rpx;
  padding: 30rpx;

  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .label {
      font-size: 28rpx;
      color: #666;
      flex: 1;
    }

    .value {
      font-size: 28rpx;
      color: #333;
      flex: 2;
      text-align: right;
    }
  }
}

.license-section {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 12rpx;
  padding: 30rpx;

  .license-item {
    margin-bottom: 30rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .license-title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
      display: block;
    }

    .license-image-container {
      width: 100%;
      height: 300rpx;
      border: 2rpx dashed #ddd;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .license-image {
        width: 100%;
        height: 100%;
        border-radius: 8rpx;
      }

      .license-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;

        .placeholder-text {
          color: #999;
          font-size: 26rpx;
        }
      }
    }
  }
}

.plate-selection-section {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 12rpx;
  padding: 30rpx;

  .plate-header {
    margin-bottom: 30rpx;

    .plate-title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
    }
  }

  .plate-input-section {
    margin-bottom: 30rpx;

    .input-label {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 20rpx;
      display: block;
    }

    .plate-input-container {
      display: flex;
      align-items: center;
      gap: 10rpx;

      .plate-char-input {
        width: 80rpx;
        height: 80rpx;
        border: 2rpx solid #ddd;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;

        &.active {
          border-color: #007aff;
          background-color: #f0f8ff;
        }

        .plate-char {
          font-size: 32rpx;
          color: #333;
          font-weight: bold;
        }
      }

      .plate-add-btn {
        width: 80rpx;
        height: 80rpx;
        border: 2rpx solid #ddd;
        border-radius: 8rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #fff;

        .add-icon {
          font-size: 24rpx;
          color: #007aff;
          font-weight: bold;
        }

        .add-text {
          font-size: 20rpx;
          color: #007aff;
        }
      }
    }
  }

  .plate-color-section {
    .color-label {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 20rpx;
      display: block;
    }

    .color-options {
      display: flex;
      gap: 20rpx;

      .color-option {
        flex: 1;
        height: 80rpx;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2rpx solid transparent;

        &.blue {
          background: linear-gradient(135deg, #007aff, #0056b3);

          &.active {
            border-color: #007aff;
            box-shadow: 0 0 10rpx rgba(0, 122, 255, 0.3);
          }
        }

        &.green {
          background: linear-gradient(135deg, #34c759, #28a745);

          &.active {
            border-color: #34c759;
            box-shadow: 0 0 10rpx rgba(52, 199, 89, 0.3);
          }
        }

        .color-text {
          color: #fff;
          font-size: 28rpx;
          font-weight: bold;
        }
      }
    }
  }
}

.front-photo-section {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 12rpx;
  padding: 30rpx;

  .photo-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 20rpx;
    display: block;
  }

  .photo-container {
    width: 100%;
    height: 400rpx;
    border: 2rpx dashed #ddd;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .front-photo {
      width: 100%;
      height: 100%;
      border-radius: 8rpx;
    }

    .photo-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;

      .placeholder-text {
        color: #999;
        font-size: 26rpx;
      }
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 30rpx;
  border-top: 1rpx solid #eee;
  display: flex;
  flex-direction: column;
  gap: 20rpx;

  .next-btn {
    background: linear-gradient(135deg, #007aff, #0056b3);
    color: #fff;
    border: none;
    border-radius: 12rpx;
    height: 88rpx;
    font-size: 32rpx;
    font-weight: bold;
  }

  .submit-btn {
  width:90%;
    background: linear-gradient(to bottom, #1e3a8a, #1e1e1e);
    color: #fff;
    border: none;
    border-radius: 50rpx;
    height: 88rpx;
    font-size: 32rpx;
    font-weight: bold;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
    position: relative;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2rpx;
      background: linear-gradient(to right, #60a5fa, #93c5fd);
      border-radius: 50rpx 50rpx 0 0;
    }

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2rpx;
      background: #000;
      border-radius: 0 0 50rpx 50rpx;
    }
  }
}
</style>