需要通过车牌号查询到车辆的基本信息,并查询停车时间和计费
时间: 2024-01-06 15:04:59 浏览: 162
好的,以下是一个简单的查询车辆基本信息,计算停车费用的微信小程序设计方案和代码示例:
1. 在小程序的首页,设计一个输入框,让用户输入车牌号码。
```html
<view class="container">
<input class="input" type="text" placeholder="请输入车牌号码" bindinput="onInput" />
<button class="btn" bindtap="onSearch">查询</button>
</view>
```
2. 用户输入车牌号码后,点击“查询”按钮,小程序向后台发送请求,获取车辆基本信息和停车记录。
```javascript
Page({
data: {
car: null, // 车辆信息
record: null, // 停车记录
},
// 输入框输入事件
onInput(e) {
this.setData({
carNumber: e.detail.value,
});
},
// 查询按钮点击事件
onSearch() {
wx.request({
url: 'https://your-backend.com/api/car-info',
data: {
carNumber: this.data.carNumber,
},
success: res => {
if (res.data.code === 0) {
this.setData({
car: res.data.data.car,
record: res.data.data.record,
});
} else {
wx.showToast({
title: '查询失败,请重新输入',
icon: 'none',
duration: 2000,
});
}
},
fail: () => {
wx.showToast({
title: '网络错误,请稍后再试',
icon: 'none',
duration: 2000,
});
},
});
},
});
```
3. 后台接收到请求后,通过车牌号码查询车辆基本信息和停车记录。
```python
@app.route('/api/car-info')
def get_car_info():
car_number = request.args.get('carNumber')
car = query_car_info(car_number) # 查询车辆信息
record = query_parking_record(car_number) # 查询停车记录
if car and record:
return jsonify(code=0, data={'car': car, 'record': record})
else:
return jsonify(code=-1, message='查询失败')
```
4. 后台将查询到的车辆基本信息和停车记录返回给小程序前端。
5. 小程序前端将查询到的车辆基本信息和停车记录展示在页面上,同时计算停车时间和停车费用。
```html
<view class="container">
<input class="input" type="text" placeholder="请输入车牌号码" bindinput="onInput" />
<button class="btn" bindtap="onSearch">查询</button>
<view wx:if="{{car}}">
<view class="car-info">
<view class="car-info-item">车牌号码:{{car.number}}</view>
<view class="car-info-item">车辆品牌:{{car.brand}}</view>
<view class="car-info-item">车辆型号:{{car.model}}</view>
<view class="car-info-item">车辆颜色:{{car.color}}</view>
<view class="car-info-item">车架号:{{car.vin}}</view>
</view>
<view class="parking-record" wx:if="{{record}}">
<view class="parking-record-item">停车时间:{{record.start_time}} - {{record.end_time}}</view>
<view class="parking-record-item">停车费用:{{record.fee}}元</view>
</view>
</view>
<view wx:if="{{!car}}">
<text>未查询到车辆信息,请重新输入车牌号码。</text>
</view>
</view>
```
```javascript
Page({
data: {
car: null, // 车辆信息
record: null, // 停车记录
},
// 计算停车时间和停车费用
calculateFee(start_time, end_time) {
const duration = (end_time - start_time) / 1000 / 60 / 60; // 停车时长,单位:小时
const fee = duration * 10; // 停车费用,单位:元/小时
return fee.toFixed(2); // 保留两位小数
},
// 输入框输入事件
onInput(e) {
this.setData({
carNumber: e.detail.value,
});
},
// 查询按钮点击事件
onSearch() {
wx.request({
url: 'https://your-backend.com/api/car-info',
data: {
carNumber: this.data.carNumber,
},
success: res => {
if (res.data.code === 0) {
const record = res.data.data.record;
record.fee = this.calculateFee(record.start_time, record.end_time);
this.setData({
car: res.data.data.car,
record: record,
});
} else {
wx.showToast({
title: '查询失败,请重新输入',
icon: 'none',
duration: 2000,
});
}
},
fail: () => {
wx.showToast({
title: '网络错误,请稍后再试',
icon: 'none',
duration: 2000,
});
},
});
},
});
```
这是一个简单的查询车辆基本信息和计算停车费用的微信小程序设计方案和代码示例,仅供参考。如果您有其他需求或问题,欢迎继续提问。
阅读全文