77 lines
1.5 KiB
Vue
77 lines
1.5 KiB
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>
|