ebike-ui/ebike-user/pages/user/ScanCarPage.vue

<template>
  <div class="container">
    <button @click="scanQRCode">扫码用车</button>
    <div v-if="carInfo">
      <p>车牌号：{{ carInfo.licensePlate }}</p>
      <p>车主姓名：{{ carInfo.ownerName }}</p>
      <p>车辆状态：{{ carInfo.status }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import * as api from "@/utils/api.js";
import { showModelMessage } from "@/utils/tools.js";

const carInfo = ref(null); // 用来存储车辆信息

// 扫码功能
const scanQRCode = () => {
  uni.scanCode({
    success: (res) => {
      const carId = res.result; // 获取扫码结果（车辆ID）
      getCarInfo(carId); // 获取车辆信息
    },
    fail: () => {
      uni.showToast({
        title: "扫码失败，请重试",
        icon: "none",
      });
    },
  });
};

// 获取车辆信息
const getCarInfo = (carId) => {
  uni.request({
    url: `https://example.com/api/car/${carId}`, // 假设的API接口
    method: "GET",
    success: (response) => {
      if (response.statusCode === 200) {
        carInfo.value = response.data; // 更新车信息
      } else {
        uni.showToast({
          title: "获取车辆信息失败",
          icon: "none",
        });
      }
    },
    fail: () => {
      uni.showToast({
        title: "请求失败，请检查网络",
        icon: "none",
      });
    },
  });
};
</script>

<style scoped>
.container {
  padding: 20px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007aff;
  color: white;
  border-radius: 5px;
  margin: 10px 0;
}
</style>