下面是一个基于 Uniapp 的油耗计算器实现，包含 Vue 组件和页面代码。
1. 创建页面文件
在 pages 目录下创建 fuel-calculator 页面：
油耗计算器当前油价 (元/升)加油金额 (元)行驶里程 (公里)
计算结果加油量:{{ fuel.toFixed(2) }} 升百公里油耗:{{ consumption.toFixed(2) }} 升/百公里每公里油费:{{ costPerKm.toFixed(2) }} 元
export default {
data() {
return {
price: '',
money: '',
distance: '',
fuel: 0,
consumption: 0,
costPerKm: 0,
showResult: false
}
},
methods: {
validateInput(field) {
// 确保输入是正数
if (this[field] < 0) {
this[field] = ''
}
},
calculate() {
// 验证输入
if (!this.price || !this.money || !this.distance) {
uni.showToast({
title: '请填写完整信息',
icon: 'none'
})
return
}
if (this.price <= 0 || this.money <= 0 || this.distance <= 0) {
uni.showToast({
title: '请输入大于0的数值',
icon: 'none'
})
return
}
// 计算
this.fuel = this.money / this.price
this.consumption = (this.fuel / this.distance) * 100
this.costPerKm = this.money / this.distance
this.showResult = true
// 隐藏键盘
uni.hideKeyboard()
}
}
}
.container {
padding: 20px;
background-color: #f5f5f5;
min-height: 100vh;
}
.calculator {
background-color: #ffffff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.header {
margin-bottom: 25px;
}
.title {
font-size: 22px;
font-weight: bold;
color: #333;
text-align: center;
display: block;
}
.input-group {
margin-bottom: 20px;
}
.label {
font-size: 16px;
color: #555;
font-weight: bold;
display: block;
margin-bottom: 8px;
}
.input {
border: 1px solid #ddd;
border-radius: 5px;
padding: 12px;
font-size: 16px;
width: 100%;
box-sizing: border-box;
}
.calculate-btn {
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
padding: 12px;
font-size: 16px;
margin-top: 10px;
width: 100%;
}
.calculate-btn:active {
background-color: #45a049;
}
.result {
margin-top: 25px;
padding: 15px;
background-color: #f9f9f9;
border-radius: 8px;
}
.result-header {
margin-bottom: 15px;
}
.result-title {
font-size: 18px;
font-weight: bold;
color: #333;
}
.result-item {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 16px;
}
.result-value {
font-weight: bold;
color: #2196F3;
}
2. 配置页面路由
在 pages.json 中添加页面路由配置：
{
"pages": [
// ...其他页面配置
{
"path": "pages/fuel-calculator/fuel-calculator",
"style": {
"navigationBarTitleText": "油耗计算器"
}
}
]
}
3. 功能说明
这个 Uniapp 油耗计算器具有以下特点：
- 响应式设计：适配各种屏幕尺寸
- 输入验证：确保输入值为正数
-
计算结果：
- 加油量（升）
- 百公里油耗（升/百公里）
- 每公里油费（元）
-
用户体验优化：
- 计算后自动隐藏键盘
- 错误输入提示
- 清晰的结果展示
4. 使用方法
- 将代码添加到您的 Uniapp 项目中
- 通过路由跳转或导航栏访问油耗计算器页面
- 输入油价、加油金额和行驶里程
- 点击”计算油耗”按钮查看结果
5. 扩展建议
如果需要进一步增强功能，可以考虑：
- 添加历史记录功能，保存每次计算结果
- 实现多车管理，比较不同车辆的油耗
- 增加图表展示，可视化油耗变化趋势
- 添加分享功能，方便分享计算结果
这个组件已经包含了完整的计算逻辑和基本的UI界面，可以直接集成到您的Uniapp项目中使用。
到此这篇关于如何使用 Deepseek 写的uniapp油耗计算器的文章就介绍到这了,更多相关Deepseek uniapp油耗计算器内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
