下面是一个基于 Uniapp 的油耗计算器实现，包含 Vue 组件和页面代码。

1. 创建页面文件

在

1. pages

复制代码

目录下创建

1. fuel-calculator

复制代码

页面：

1. <!-- pages/fuel-calculator/fuel-calculator.vue -->
   
2. <template>
   
3.   <view class="container">
   
4.     <view class="calculator">
   
5.       <view class="header">
   
6.         <text class="title">油耗计算器</text>
   
7.       </view>
   
8.       <view class="input-group">
   
9.         <text class="label">当前油价 (元/升)</text>
   
10.         <input
    
11.           type="number"
    
12.           v-model="price"
    
13.           placeholder="例如：7.85"
    
14.           class="input"
    
15.           @input="validateInput('price')"
    
16.         />
    
17.       </view>
    
18.       <view class="input-group">
    
19.         <text class="label">加油金额 (元)</text>
    
20.         <input
    
21.           type="number"
    
22.           v-model="money"
    
23.           placeholder="例如：300"
    
24.           class="input"
    
25.           @input="validateInput('money')"
    
26.         />
    
27.       </view>
    
28.       <view class="input-group">
    
29.         <text class="label">行驶里程 (公里)</text>
    
30.         <input
    
31.           type="number"
    
32.           v-model="distance"
    
33.           placeholder="例如：450"
    
34.           class="input"
    
35.           @input="validateInput('distance')"
    
36.         />
    
37.       </view>
    
38.       <button class="calculate-btn" @click="calculate">计算油耗</button>
    
39.       <view class="result" v-if="showResult">
    
40.         <view class="result-header">
    
41.           <text class="result-title">计算结果</text>
    
42.         </view>
    
43.         <view class="result-item">
    
44.           <text>加油量:</text>
    
45.           <text class="result-value">{{ fuel.toFixed(2) }} 升</text>
    
46.         </view>
    
47.         <view class="result-item">
    
48.           <text>百公里油耗:</text>
    
49.           <text class="result-value">{{ consumption.toFixed(2) }} 升/百公里</text>
    
50.         </view>
    
51.         <view class="result-item">
    
52.           <text>每公里油费:</text>
    
53.           <text class="result-value">{{ costPerKm.toFixed(2) }} 元</text>
    
54.         </view>
    
55.       </view>
    
56.     </view>
    
57.   </view>
    
58. </template>
    
59. <script>
    
60. export default {
    
61.   data() {
    
62.     return {
    
63.       price: '',
    
64.       money: '',
    
65.       distance: '',
    
66.       fuel: 0,
    
67.       consumption: 0,
    
68.       costPerKm: 0,
    
69.       showResult: false
    
70.     }
    
71.   },
    
72.   methods: {
    
73.     validateInput(field) {
    
74.       // 确保输入是正数
    
75.       if (this[field] < 0) {
    
76.         this[field] = ''
    
77.       }
    
78.     },
    
79.     calculate() {
    
80.       // 验证输入
    
81.       if (!this.price || !this.money || !this.distance) {
    
82.         uni.showToast({
    
83.           title: '请填写完整信息',
    
84.           icon: 'none'
    
85.         })
    
86.         return
    
87.       }
    
88.       if (this.price <= 0 || this.money <= 0 || this.distance <= 0) {
    
89.         uni.showToast({
    
90.           title: '请输入大于0的数值',
    
91.           icon: 'none'
    
92.         })
    
93.         return
    
94.       }
    
95.       // 计算
    
96.       this.fuel = this.money / this.price
    
97.       this.consumption = (this.fuel / this.distance) * 100
    
98.       this.costPerKm = this.money / this.distance
    
99.       this.showResult = true
    
100.       // 隐藏键盘
     
101.       uni.hideKeyboard()
     
102.     }
     
103.   }
     
104. }
     
105. </script>
     
106. <style>
     
107. .container {
     
108.   padding: 20px;
     
109.   background-color: #f5f5f5;
     
110.   min-height: 100vh;
     
111. }
     
112. .calculator {
     
113.   background-color: #ffffff;
     
114.   border-radius: 10px;
     
115.   padding: 20px;
     
116.   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     
117. }
     
118. .header {
     
119.   margin-bottom: 25px;
     
120. }
     
121. .title {
     
122.   font-size: 22px;
     
123.   font-weight: bold;
     
124.   color: #333;
     
125.   text-align: center;
     
126.   display: block;
     
127. }
     
128. .input-group {
     
129.   margin-bottom: 20px;
     
130. }
     
131. .label {
     
132.   font-size: 16px;
     
133.   color: #555;
     
134.   font-weight: bold;
     
135.   display: block;
     
136.   margin-bottom: 8px;
     
137. }
     
138. .input {
     
139.   border: 1px solid #ddd;
     
140.   border-radius: 5px;
     
141.   padding: 12px;
     
142.   font-size: 16px;
     
143.   width: 100%;
     
144.   box-sizing: border-box;
     
145. }
     
146. .calculate-btn {
     
147.   background-color: #4CAF50;
     
148.   color: white;
     
149.   border: none;
     
150.   border-radius: 5px;
     
151.   padding: 12px;
     
152.   font-size: 16px;
     
153.   margin-top: 10px;
     
154.   width: 100%;
     
155. }
     
156. .calculate-btn:active {
     
157.   background-color: #45a049;
     
158. }
     
159. .result {
     
160.   margin-top: 25px;
     
161.   padding: 15px;
     
162.   background-color: #f9f9f9;
     
163.   border-radius: 8px;
     
164. }
     
165. .result-header {
     
166.   margin-bottom: 15px;
     
167. }
     
168. .result-title {
     
169.   font-size: 18px;
     
170.   font-weight: bold;
     
171.   color: #333;
     
172. }
     
173. .result-item {
     
174.   display: flex;
     
175.   justify-content: space-between;
     
176.   margin-bottom: 10px;
     
177.   font-size: 16px;
     
178. }
     
179. .result-value {
     
180.   font-weight: bold;
     
181.   color: #2196F3;
     
182. }
     
183. </style>

复制代码

2. 配置页面路由

在

1. pages.json

复制代码

中添加页面路由配置：

1. {
   
2.   "pages": [
   
3.     // ...其他页面配置
   
4.     {
   
5.       "path": "pages/fuel-calculator/fuel-calculator",
   
6.       "style": {
   
7.         "navigationBarTitleText": "油耗计算器"
   
8.       }
   
9.     }
   
10.   ]
    
11. }

复制代码

3. 功能说明

这个 Uniapp 油耗计算器具有以下特点：

• 响应式设计：适配各种屏幕尺寸
  
• 输入验证：确保输入值为正数
  
• 计算结果：
  
  
  
  • 加油量（升）
    
  • 百公里油耗（升/百公里）
    
  • 每公里油费（元）
    
  
  
• 用户体验优化：
  
  
  
  • 计算后自动隐藏键盘
    
  • 错误输入提示
    
  • 清晰的结果展示
    
  
  

4. 使用方法

• 将代码添加到您的 Uniapp 项目中
  
• 通过路由跳转或导航栏访问油耗计算器页面
  
• 输入油价、加油金额和行驶里程
  
• 点击"计算油耗"按钮查看结果
  

5. 扩展建议

如果需要进一步增强功能，可以考虑：

• 添加历史记录功能，保存每次计算结果
  
• 实现多车管理，比较不同车辆的油耗
  
• 增加图表展示，可视化油耗变化趋势
  
• 添加分享功能，方便分享计算结果
  

这个组件已经包含了完整的计算逻辑和基本的UI界面，可以直接集成到您的Uniapp项目中使用。
到此这篇关于如何使用 Deepseek 写的uniapp油耗计算器的文章就介绍到这了,更多相关Deepseek uniapp油耗计算器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/3400210rg.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！