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> |